/* ============================================================
   GEO — Productos (page-productos.php)
   CATÁLOGO DE MARCAS por categoría + tabs/filtro (sin recarga).
   ============================================================

   VALORES FIGMA EXACTOS — leídos vía MCP (Regla 0)
   ───────────────────────────────────────────────────────────
   Frames: 695:2 (Productos/TODOS), 695:6 (progresivos),
           695:4 (filtros), 695:5 (mas).

   · Título "TODOS LOS PRODUCTOS" (588:17 / 594:57)
       Montserrat · SemiBold 600 · 32 px · lh 39.00994 px · ls 0 · #000
   · Tabs "Lentes Monofocales / Lentes Progresivos / Filtros / Más"
       Montserrat · Medium 500 · 18 px · lh 21.94199 px · ls 0 · #000
       Estado ACTIVO en Figma = Bold 700 (mismo tamaño).
   · Hero (588:12): 1761 × 1051  → aspect-ratio 1.6756 : 1
   · Banner "Más" (599:20): 1769 × 941 → aspect-ratio 1.8799 : 1
   · Texto "ESPERA NUESTROS / PRÓXIMOS LANZAMIENTOS" (598:3)
       Montserrat · Medium 500 · 48 px · lh 58.512 px · ls 0 · #fff
       (2 líneas, alineado a la izquierda, tercio inferior del banner)

   Nota espaciado: los 4 frames-mock de Figma redibujan el nav y usan
   cajas de texto centradas muy anchas → los gaps horizontales entre
   tabs NO son medibles 1:1. Se respetan EXACTOS los valores tipográficos
   (familia/peso/size/lh/ls/color) y se usa un ritmo de espaciado limpio
   y on-brand para la fila de tabs y la grilla.
   ============================================================ */

.pcat {
	background: #ffffff;
	color: #000000;
	width: 100%;
	overflow: hidden;
}

/* ── HERO · full-bleed, ratio fijo, cover (Regla 4: la foto cambiará) ── */
.pcat__hero {
	width: 100%;
	aspect-ratio: 1761 / 1051;
	max-height: 78vh;                 /* tope para que el hero no domine en pantallas altas */
	overflow: hidden;
}
.pcat__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Zoom de apertura sutil (CSS, arranca en el 1er pintado, sin lag) */
	transform-origin: 50% 50%;
	animation: pcat-hero-zoom 5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pcat-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.pcat__hero-img { animation: none; }
}

/* ── Contenedor del catálogo ── inset ~67 px (Figma title x-frame) ── */
.pcat__inner {
	max-width: 1761px;               /* ancho del frame Figma */
	margin: 0 auto;
	padding: 72px 64px 96px;
	box-sizing: border-box;
}

/* ── TABS ─────────────────────────────────────────────────────────── */
.pcat__tabs {
	display: flex;
	flex-direction: column;
	gap: 22px;                        /* Figma: título y=4126 → tabs y=4213 (≈63 px de aire real) */
	margin-bottom: 56px;
}

/* Reset de <button> para que se vean como texto (tabs tipográficos) */
.pcat__tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #000000;
	text-align: left;
	letter-spacing: 0;
	transition: color 0.2s ease, opacity 0.2s ease;
}
.pcat__tab:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
}

/* Tab primaria "TODOS LOS PRODUCTOS" — 32 px SemiBold */
.pcat__tab--primary {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 39.00994873px;
	text-transform: uppercase;
}

/* Fila de sub-tabs 18 px */
.pcat__subtabs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 40px;
}
.pcat__tab--sub {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;                 /* Figma inactivo = Medium 500 */
	font-size: 18px;
	line-height: 21.94199944px;
	/* Hit-area táctil ~42px sin mover el layout (padding compensado con margin) */
	padding: 10px 4px;
	margin: -10px -4px;
}
.pcat__tab--sub:hover { opacity: 0.6; }

/* Estado ACTIVO (Figma: Bold 700). La primaria activa además subraya. */
.pcat__tab--sub.is-active { font-weight: 700; }
.pcat__tab--primary.is-active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* ── GRILLA DE LOGOS ──────────────────────────────────────────────────
   Brand-wall: 4 columnas en desktop, logos negros centrados sobre blanco
   (como en Figma). Contenedor de alto fijo + object-fit: contain para que
   logos de dimensiones distintas queden alineados y no rompan el layout. */
.pcat__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px 40px;
	align-items: center;
}
.pcat__item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}
/* Tile clicable (abre el drawer). Reset de botón. */
.pcat__tile {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.pcat__tile:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
	border-radius: 4px;
}
.pcat__logo {
	display: block;
	max-width: 78%;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.25s cubic-bezier(.2,.7,.2,1), opacity 0.2s ease;
}
.pcat__tile:hover .pcat__logo,
.pcat__tile:focus-visible .pcat__logo { transform: scale(1.05); }

/* ── MÁS · banner "ESPERA NUESTROS PRÓXIMOS LANZAMIENTOS" ────────────── */
.pcat__coming {
	position: relative;
	width: 100%;
	aspect-ratio: 1769 / 941;          /* Figma banner exacto */
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;               /* texto en el tercio inferior-izq */
	justify-content: flex-start;
}
.pcat__coming[hidden] { display: none; }
.pcat__coming-text {
	margin: 0;
	padding: 0 6% 8%;
	align-self: flex-end;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: clamp(22px, 2.73vw, 48px);   /* fluido · proporción Figma 48/1760 */
	line-height: 1.2;
	letter-spacing: 0;
	color: #ffffff;
	text-transform: uppercase;
	text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────
   La grilla reduce columnas; los tabs hacen wrap; el texto del banner
   escala con clamp para no romper. (Ver Regla 9: mobile limpio, on-brand.) */

@media (max-width: 1200px) {
	.pcat__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.pcat__inner { padding: 56px 40px 80px; }
	.pcat__tab--primary { font-size: 28px; line-height: 1.22; }
	/* .pcat__coming-text ahora escala con clamp() continuo desde la base */
}

@media (max-width: 760px) {
	.pcat__inner { padding: 44px 24px 64px; }
	.pcat__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
	.pcat__item { min-height: 112px; }
	.pcat__logo { max-height: 76px; max-width: 82%; }
	.pcat__tab--primary { font-size: 24px; }
	.pcat__tab--sub { font-size: 16px; line-height: 1.22; }
	.pcat__subtabs { gap: 20px 28px; }   /* flex-wrap: los tabs bajan de línea sin romper */
	.pcat__coming { aspect-ratio: 3 / 4; }
	.pcat__coming-text { padding: 0 8% 12%; }   /* font-size lo maneja el clamp base */
}

@media (max-width: 440px) {
	.pcat__inner { padding: 36px 16px 56px; }
	.pcat__grid { gap: 28px 18px; }
	.pcat__item { min-height: 96px; }
	.pcat__logo { max-height: 60px; }
	.pcat__tab--primary { font-size: 21px; }
	.pcat__coming-text { font-size: 18px; }
	/* (La tabla comparativa se ajusta al final del archivo: sus reglas base y el
	   bloque de 760px están declarados DESPUÉS de este @media y lo pisaban.) */
}

/* ════════════════════════════════════════════════════════════════════
   DRAWER de detalle por marca (clic en un logo → panel derecho).
   Contenido leído 1:1 de los frames Figma características-* (tarjeta blanca).
   Tipografía Figma: Montserrat, 20/18/16 px, lh 1.219, ls -0.02em, #000.
   ════════════════════════════════════════════════════════════════════ */

/* Backdrop · desenfoca + oscurece el resto de la página */
.pd-backdrop {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.32s ease;
}
.pd-backdrop.is-open { opacity: 1; }
.pd-backdrop[hidden] { display: none; }

/* Panel derecho · entra deslizando desde la derecha, scroll vertical interno */
.pd-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 3001;
	width: min(720px, 94vw);
	height: 100%;
	height: 100dvh;
	background: #ffffff;
	box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}
.pd-drawer.is-open { transform: translateX(0); }
.pd-drawer[hidden] { display: none; }

/* Botón cerrar · círculo negro con × blanco (Figma Ellipse 75 + X) */
.pd-close {
	position: sticky;
	top: 20px;
	align-self: flex-end;
	flex: 0 0 auto;
	margin: 20px 24px 0 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #000000;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.pd-close:hover { transform: scale(1.08); }
.pd-close:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.pd-body {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 4px 0 40px;
	box-sizing: border-box;
}

/* Tarjeta de contenido · ancho de texto ~748 px del Figma, centrada.
   Flex column + footer con margin-top:auto → el link "aquí" queda al FONDO. */
.pd-card {
	width: 100%;
	max-width: 748px;
	margin: 0 auto;
	padding: 0 clamp(24px, 6%, 64px);
	box-sizing: border-box;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.pd-logo {
	display: flex;
	justify-content: center;
	margin: 16px 0 32px;
}
.pd-logo img {
	display: block;
	max-width: 300px;
	max-height: 132px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ── Tipografía de bloques (valores Figma exactos) ── */
.pd-block {
	font-family: 'Montserrat', sans-serif;
	color: #000000;
	margin: 0 0 18px;
}
.pd-20 { font-size: 20px; line-height: 1.219; letter-spacing: -0.02em; }
.pd-18 { font-size: 18px; line-height: 1.219; letter-spacing: -0.02em; }
.pd-16 { font-size: 16px; line-height: 1.219; letter-spacing: -0.02em; }
/* Pesos INLINE exactos de Figma (get_styled_text_segments). Aplicados a <span>
   por run → jerarquía real (label vs descripción). */
.pd-bi  { font-weight: 700; font-style: italic; }   /* Bold Italic (títulos) */
.pd-b   { font-weight: 700; font-style: normal; }   /* Bold (encabezados de lista) */
.pd-si  { font-weight: 600; font-style: italic; }   /* SemiBold Italic */
.pd-sb  { font-weight: 600; font-style: normal; }   /* SemiBold (labels) */
.pd-md  { font-weight: 500; font-style: normal; }   /* Medium (sub-labels RedCut/Zyhro) */
.pd-mdi { font-weight: 500; font-style: italic; }   /* Medium Italic */
.pd-rg  { font-weight: 400; font-style: normal; }   /* Regular (descripciones) */
.pd-it  { font-weight: 400; font-style: italic; }   /* Italic */
.is-left   { text-align: left; }
.is-center { text-align: center; }

/* Listas de beneficios (Label: descripción) */
.pd-ul {
	list-style: disc;
	padding-left: 1.25em;
	margin: 0 0 18px;
}
.pd-ul li { margin: 0 0 12px; }
.pd-ul li:last-child { margin-bottom: 0; }
.pd-ul strong { font-weight: 600; }

/* Sub-encabezado de lista (ítem con solo label, sin descripción) → sin viñeta,
   alineado al borde y con un poco más de aire debajo. */
.pd-ul li.pd-li-head {
	list-style: none;
	margin-left: -1.25em;
	margin-bottom: 14px;
}

/* Lista con BOLITAS de color a la derecha (Trinity Lirium · colores HEX de Figma).
   Cada ítem lleva su punto; sin viñeta de disco. */
.pd-ul--dots {
	list-style: none;
	padding-left: 0;
}
.pd-ul--dots li {
	position: relative;
	padding-right: 40px;
	min-height: 26px;
}
.pd-ul--dots li.pd-li-head { margin-left: 0; }
.pd-dot {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
}

.pd-hr {
	border: 0;
	border-top: 1px solid #000000;
	margin: 26px 0 38px;   /* más aire ANTES de los bullets (Figma) */
}

.pd-footer { margin-top: auto; padding-top: 40px; }
.pd-portfolio-link {
	color: #000000;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pd-portfolio-link:hover { opacity: 0.7; }

/* ── Tabla comparativa (Eleven Lens) ── Material / Óptica / Dureza / Peso ── */
.pd-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	table-layout: fixed;
}
.pd-table th,
.pd-table td {
	border: 1px solid #000000;
	padding: 8px 6px;
	text-align: center;
	vertical-align: middle;
}
.pd-table th {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 20px;
	letter-spacing: -0.02em;
}
.pd-table td {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.02em;
}
.pd-stars { white-space: nowrap; line-height: 1; }
.pd-star { font-size: 15px; color: #000000; }

/* Accesibilidad · título oculto que nombra el diálogo */
.pd-vh {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Bloquea el scroll del body mientras el drawer está abierto */
body.pd-lock { overflow: hidden; }

/* WP admin bar (usuario logueado): el drawer arranca DEBAJO de la barra para
   que la X no quede tapada/cortada por ella. En el sitio público (sin barra)
   no aplica → drawer a pantalla completa. */
body.admin-bar .pd-drawer { top: 32px; height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .pd-drawer { top: 46px; height: calc(100dvh - 46px); }
}

/* ── Responsive · en móvil el drawer ocupa (casi) todo el ancho ── */
@media (max-width: 760px) {
	.pd-drawer { width: 100%; }
	.pd-card { padding: 0 22px; }
	.pd-table th { font-size: 16px; }
	.pd-table td { font-size: 14px; }
	/* 4 columnas de ~70px: "Policarbonato" (palabra única) y las 5 estrellas
	   nowrap se derramaban sobre la columna vecina. Partir palabra/estrellas. */
	.pd-table th, .pd-table td { overflow-wrap: anywhere; hyphens: auto; }
	.pd-stars { white-space: normal; }
	.pd-star { font-size: 11px; }
	.pd-logo img { max-height: 104px; }
}

/* Drawer muy angosto (~320px): 4 columnas no caben cómodas ni a 16/14px.
   VA AL FINAL del archivo a propósito — declarado arriba quedaba pisado por
   las reglas base de .pd-table y por el bloque de 760px. */
@media (max-width: 440px) {
	.pd-table th { font-size: 13px; }
	.pd-table td { font-size: 12px; }
}

/* Respeta prefers-reduced-motion: sin deslizamiento/blur-fade */
@media (prefers-reduced-motion: reduce) {
	.pd-drawer,
	.pd-backdrop,
	.pd-close { transition: none; }
}