/* ============================================================
   AQUAWIPES — Prototipo editorial v2
   Fuente de verdad: Brandbook 2026 (Saturna Studio)
   Tipografía: Nohemi (display) + Cabinet Grotesk (UI/body) — sustitutos self-hosted de Gotham
   ============================================================ */

@font-face { font-family:'Nohemi'; src:url('fonts/Nohemi-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('fonts/Nohemi-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('fonts/Nohemi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('fonts/Nohemi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('fonts/CabinetGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  /* Marca principal — Brandbook p.30 */
  --navy: #1F3C8F;
  --navy-deep: #142a66;
  --pale: #DFEAF2;         /* Pantone 649C — único "neutro claro" oficial */
  --ink: #101418;
  --white: #FFFFFF;

  /* Bebés — p.31 */
  --blue: #0999D6;
  --blue-tint: #DFEAF2;

  /* Higiene Personal — p.32 (el único lugar donde el crema SÍ es de marca) */
  --green: #1F9C7E;
  --green-cream: #FDF2DF;

  /* Higiene Íntima — muestreado del empaque real (sin hex oficial en el brandbook) */
  --purple: #8E6FC0;
  --purple-tint: #EFE7F9;

  /* Skincare Desmaquillante — control grasa, p.33 */
  --pink: #E299B7;
  --pink-tint: #FADEE8;
  --carbon: #16181B;       /* variante Detox / carbón activado, del empaque real */

  --ease-out: cubic-bezier(.16,1,.3,1);
  --radius-lg: 40px;
  --radius-md: 24px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin:0; background:var(--white); color:var(--ink); font-family:'Cabinet Grotesk', system-ui, sans-serif; cursor:default; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,.display { font-family:'Nohemi', system-ui, sans-serif; font-weight:800; line-height:.98; letter-spacing:-0.01em; margin:0; }
.icon { width:1em; height:1em; display:inline-block; vertical-align:-0.14em; }
.eyebrow { font-family:'Cabinet Grotesk'; font-weight:700; font-size:clamp(11px,1vw,13px); letter-spacing:.14em; text-transform:uppercase; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:100px; background:var(--navy); color:#fff; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:transform .45s var(--ease-out); }
.btn:hover { transform:translateY(-3px) scale(1.02); }
.btn.outline { background:transparent; border:2px solid currentColor; color:var(--ink); }
.btn .icon { width:16px; height:16px; }

/* ---------- preloader — intro de píldoras apiladas (adaptada del HTML de referencia del cliente,
   supadupa-replica: mismo concepto de rótulos ovalados apilados y girados que se revelan en cascada).
   Todo en CSS puro (sin depender de JS ni de una librería Lottie) para que nunca se quede pegado. ---------- */
#preloader { position:fixed; inset:0; z-index:999; background:var(--navy); display:flex; align-items:center; justify-content:center;
  animation:preloaderOut .6s ease forwards; animation-delay:1.8s; }
@keyframes preloaderOut { 0%{opacity:1;visibility:visible;} 99%{opacity:0;visibility:visible;} 100%{opacity:0;visibility:hidden;pointer-events:none;} }
/* logo del preloader simple de las páginas de categoría (el home usa la intro de píldoras de arriba) */
#preloader img { width:64px; filter:brightness(0) invert(1); opacity:.92; }
/* ya vimos la intro en esta sesión: el preloader no se muestra ni un instante, sin animación */
html.no-intro #preloader { animation:none; opacity:0; visibility:hidden; pointer-events:none; }

.intro-stack { display:flex; flex-direction:column; align-items:center; padding:0 24px; }
/* relleno solido del mismo color que el fondo: así cada píldora TAPA limpiamente el borde de la
   anterior donde se encima, en vez de que ambos contornos se crucen como tejido (como pasaba antes) */
.intro-pill { border:3px solid var(--blue); border-radius:999px; padding:14px clamp(24px,4vw,44px);
  font-family:'Nohemi'; font-weight:800; font-size:clamp(22px,4.4vw,52px); color:var(--blue);
  background:var(--navy); position:relative;
  white-space:nowrap; margin-top:-16px; opacity:0;
  animation:pillIn .65s cubic-bezier(.16,1,.3,1) forwards; }
.intro-pill:nth-child(1) { --rot:-6deg; animation-delay:.1s; z-index:4; }
.intro-pill:nth-child(2) { --rot:4deg; animation-delay:.32s; z-index:3; }
.intro-pill:nth-child(3) { --rot:-5deg; animation-delay:.54s; z-index:2; }
.intro-pill:nth-child(4) { --rot:3deg; animation-delay:.76s; z-index:1; }
@keyframes pillIn {
  0% { opacity:0; transform:translateY(36px) rotate(var(--rot,0deg)) scale(.9); }
  100% { opacity:1; transform:translateY(0) rotate(var(--rot,0deg)) scale(1); }
}
@media (max-width:600px) { .intro-pill { font-size:clamp(17px,6vw,28px); padding:10px 20px; } }

/* ---------- cursor glow ---------- */
#cursor-glow { position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle, rgba(31,60,143,.35), transparent 70%); pointer-events:none; z-index:998;
  mix-blend-mode:multiply; transform:translate(-50%,-50%); display:none; }
@media (hover:hover) and (pointer:fine) { #cursor-glow { display:block; } }

/* ---------- nav ---------- */
header.nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); transition:background .4s var(--ease-out), box-shadow .4s, transform .4s var(--ease-out); }
header.nav.scrolled { background:rgba(255,255,255,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(0,0,0,.06); }
/* se oculta al bajar, reaparece al subir (ver main.js) */
header.nav.nav-hidden { transform:translateY(-110%); }
.logo-img { height:42px; display:block; filter:brightness(0) invert(1); transition:filter .3s; }
header.nav.scrolled .logo-img { filter:none; }
footer .logo-img { height:32px; filter:none; }

/* menú tipo Supa Dupa: pill con ícono rotando + overlay fullscreen, + CTA persistente —
   --nav-accent por default es el azul del hero de home (no el navy); cada página de categoría lo
   sobreescribe con su propio color (ver header.nav--bebes etc. en PÁGINAS DE CATEGORÍA) para que
   el navbar se sienta parte de esa categoría en vez de quedarse siempre azul */
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-cta { display:flex; align-items:center; padding:14px 24px; border-radius:100px; background:var(--nav-accent, var(--blue)); color:#fff;
  font-weight:700; font-size:14.5px; transition:background .3s; }
.menu-btn { display:flex; align-items:center; gap:10px; padding:14px 22px 14px 18px; border-radius:100px; background:#fff; color:var(--nav-accent, var(--blue));
  border:1.5px solid var(--nav-accent, var(--blue)); cursor:pointer; font-weight:700; font-size:14.5px; font-family:'Cabinet Grotesk'; transition:color .3s, border-color .3s; }
/* la gotita real del imagotipo (recortada de Aquawipes_Imagotipo_Azul), no el ícono genérico de la
   librería — se queda en su azul de marca siempre, sin heredar --nav-accent como los demás íconos:
   es el logo, no un ícono de UI, así que no debe cambiar de color por categoría. width:auto conserva
   su proporción real (no es un cuadrado 1:1 como los símbolos SVG de la spritesheet). */
.menu-logo-icon { height:18px; width:auto; display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
/* con 7 links el tamaño no puede depender solo del ancho (7vw): en pantallas de laptop (~800px de
   alto) ese tamaño hacía que el bloque completo fuera más alto que el viewport — "Inicio" se cortaba
   arriba y "Certificaciones" se encimaba con el pie. Sigue siendo tan grande como el original (84px
   de tope, igual que antes) pero ahora escala con la ALTURA (vh) en vez del ancho, así se achica lo
   justo y necesario en pantallas bajas en lugar de quedarse fijo y desbordar. El padding reserva el
   espacio del botón de cerrar y del pie para que justify-content:center nunca los tape; overflow-y:auto
   es el respaldo si aun así no cupiera en una pantalla muy baja. */
.menu-overlay { position:fixed; inset:0; z-index:200; background:var(--navy); color:#fff; display:flex; flex-direction:column;
  justify-content:center; padding:80px var(--gutter) 60px; overflow-y:auto; transform:translateY(-100%); visibility:hidden;
  transition:transform .55s var(--ease-out), visibility 0s linear .55s; }
.menu-overlay.open { transform:translateY(0); visibility:visible; transition:transform .55s var(--ease-out), visibility 0s; }
.menu-overlay .close-btn { position:fixed; top:22px; right:var(--gutter); background:rgba(255,255,255,.12); border:none; color:#fff;
  width:44px; height:44px; border-radius:50%; font-size:20px; cursor:pointer; z-index:1; }
.menu-overlay .m-links { display:flex; flex-direction:column; gap:4px; max-width:900px; margin:auto 0; }
.menu-overlay .m-links a { font-family:'Nohemi'; font-weight:800; font-size:clamp(30px,10vh,84px); line-height:1.05; color:#fff; opacity:.55;
  transition:opacity .3s, transform .3s; display:inline-block; overflow-wrap:break-word; max-width:100%; }
.menu-overlay .m-links a:hover { opacity:1; transform:translateX(14px); }
.menu-overlay .m-links a span { color:#A9C6FF; font-family:'Cabinet Grotesk'; font-weight:700; font-size:.24em; vertical-align:super; margin-left:.15em; }
.menu-overlay .m-foot { position:fixed; bottom:28px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between;
  font-size:13px; opacity:.6; flex-wrap:wrap; gap:10px; }

/* el tope de 10vh (pensado para pantallas anchas y bajas, tipo laptop) no considera el ANCHO —
   en un celular angosto y alto llega casi al máximo de 84px sin importar qué tan angosta sea la
   pantalla, y palabras sueltas largas ("Certificaciones", "Skincare") se salen del viewport porque
   no hay espacio en el que quepan ni para partir la línea (no tienen espacios donde envolver).
   overflow-wrap ya evita el desborde como respaldo, pero aquí se baja el tope real con un clamp
   que además considera el ancho (9vw) para que el texto se vea del tamaño pensado para mobile,
   no solo "lo que no se corta". */
@media (max-width:640px) {
  .menu-overlay { padding-top:96px; padding-bottom:84px; }
  .menu-overlay .m-links { gap:2px; }
  .menu-overlay .m-links a { font-size:clamp(26px, 9vw, 42px); line-height:1.2; opacity:.85; }
  .menu-overlay .m-foot { font-size:11.5px; }
}

/* ============ HERO + AMBITION — adaptación 1:1 del HTML de referencia programado por el cliente
   (supadupa-replica/index.html): misma estructura, mismo CSS, misma animación GSAP/ScrollTrigger.
   Solo se cambiaron --dark-green→navy, --light-green→blue, la tipografía (Nohemi/Cabinet Grotesk en
   vez de Bricolage Grotesque), el texto y las imágenes. No es un pin: el hero fluye normal
   (min-height, no height fija) y la tarjeta de fotos crece en la sección .ambition de abajo mientras
   la página hace scroll normal — sin quedarse fija en el viewport, igual que en el HTML del cliente. */
.hero { position:relative; background:var(--navy); overflow:hidden; padding:24px var(--gutter); padding-top:190px; min-height:100vh; isolation:isolate; }
.hero-bg-gradient { position:absolute; inset:0; height:125%; background-image:linear-gradient(180deg, var(--navy) 90%, var(--white)); z-index:0; }
.hero-glow { position:absolute; z-index:0; pointer-events:none; height:auto; }
.hero-glow.t { width:75vw; left:-10%; top:0; }
.hero-glow.l { width:60vw; left:0; bottom:-30%; }

.hero-inner { position:relative; z-index:1; }

.hero .eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--blue);
  font-size:clamp(15px,1.5vw,24px); font-weight:500; margin:0; text-transform:none; letter-spacing:normal; }
.hero .eyebrow .icon { width:18px; height:18px; }

.hero-title { color:var(--blue); text-align:center; letter-spacing:-0.03em; line-height:1;
  font-size:clamp(42px, 8.5vw, 150px); font-weight:800; margin:14px 0 40px;
  padding-right:1.5rem; margin-right:-1.5rem; }

.hero-line { background:var(--blue); opacity:.35; width:100%; height:1px; border:none; }

.header-row { display:grid; grid-template-columns:8fr 4fr; gap:24px; align-items:end;
  height:45vh; margin-top:-7.5rem; margin-bottom:48px; }
.explore-col { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--blue); }
.explore-col .icon { width:13px; height:16px; transform:rotate(90deg); animation:bob 1.6s ease-in-out infinite; }
.explore-col .vertical-label { writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Cabinet Grotesk';
  font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
@keyframes bob { 0%,100%{transform:rotate(90deg) translateY(0);} 50%{transform:rotate(90deg) translateY(5px);} }

.info-col { display:flex; flex-direction:column; gap:12px; max-width:32rem; }
.info-col h6 { color:var(--blue); font-size:16px; font-weight:600; margin:0; }
.info-col p { color:var(--blue); opacity:.85; font-size:clamp(14px,1.1vw,18px); line-height:1.4; margin:0; }
.info-cta { color:var(--blue); font-weight:600; text-decoration:none; display:inline-block; width:fit-content; }
.info-cta-line { background:var(--blue); opacity:.5; width:100%; height:1px; margin-top:4px; }

@media (max-width:767px) {
  /* nav ya es más baja en mobile (--nav-cta se oculta, ver más abajo), así que el hero no necesita
     tanto aire arriba como en desktop para despejar el navbar */
  .hero { padding-top:130px; }
  .header-row { grid-template-columns:1fr; height:auto; margin-top:32px; }
  .hero-title { font-size:16vw; }
  .explore-col { flex-direction:row; }
  .explore-col .vertical-label { writing-mode:horizontal-tb; transform:none; }
}

/* ---------- nav en mobile: el pill de texto "Descubre las líneas" se encimaba/envolvía a dos
   líneas junto al botón de Menú (no caben los tres elementos con texto completo en <560px), inflando
   la altura del navbar — se retira aquí porque el mismo CTA ya vive en el hero y en el menú overlay ---------- */
@media (max-width:640px) {
  header.nav { padding:14px var(--gutter); }
  .nav-cta { display:none; }
}

/* =====================================================================
   AMBITION — la tarjeta de fotos crece en flujo normal de documento (sin pin, sin sticky)
   mientras el usuario hace scroll: mismos valores medidos por el cliente en el sitio real
   (width 40%→100%, xPercent -30→0, yPercent -110→0, radius fijo, ver main.js). El fondo blanco
   y la mecánica son exactamente los del HTML de referencia. ===================================================================== */
.ambition { position:relative; background:var(--white); padding:24px 24px 96px; }
.ambition-wrapper { display:flex; justify-content:center; width:100%; }
.project-card { position:relative; width:40%; aspect-ratio:16/9; border-radius:2rem; overflow:hidden; background:#0b1d4d; }
/* 16/9 (la proporción de escritorio) en un celular angosto deja la foto bastante corta de alto — se
   siente chica aunque ya ocupe el 100% del ancho. 4/5 (más vertical, tipo retrato) le da mucha más
   presencia sin volverse un cuadrado forzado; el mecanismo de crecimiento por scroll es el mismo,
   solo cambia la proporción final de la tarjeta. Esta regla va DESPUÉS de la base (arriba) a propósito
   — con la misma especificidad, la que aparece después en el archivo gana, así que si esto se
   moviera antes de la regla base, la base la volvería a pisar sin importar el ancho de pantalla. */
@media (max-width:767px) {
  .project-card { aspect-ratio:4/5; }
  .ambition { padding:20px 16px 80px; }
}
/* (antes tenía will-change:width,transform — en Safari/iOS ese hint en un elemento con border-radius
   + overflow:hidden es una causa conocida de que la capa se quede "congelada" visualmente: el layout
   sí se actualiza (el ancho real cambia) pero la pantalla no se repinta a tiempo, así que se ve como
   si la tarjeta nunca creciera aunque por debajo sí esté creciendo. Se quita porque "width" tampoco
   es una propiedad que will-change optimice de forma útil — solo transform/opacity se benefician. */
.swiper.slider-project { width:100%; height:100%; }
.slider-project .swiper-slide { position:relative; }
.slide-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.slide-ui { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between; padding:24px; }
.discover-btn { background:var(--blue); color:#fff; border-radius:100px; padding:12px 20px 12px 24px;
  font-weight:700; font-size:14.5px; text-decoration:none; display:inline-flex; align-items:center; }
.swiper-pagination { position:relative !important; display:flex; gap:8px; align-items:center;
  width:auto !important; height:8px !important; left:auto !important; bottom:auto !important; }
.swiper-pagination-bullet { width:40px; height:2px; background:rgba(255,255,255,.4); display:inline-block;
  border-radius:0; opacity:1; position:relative; overflow:hidden; margin:0 !important; }
.swiper-pagination-bullet-active { background:rgba(255,255,255,.4); }
.swiper-pagination-bullet-active::after { content:''; position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--blue); animation:bulletProgress 7s linear forwards; }
@keyframes bulletProgress { from{width:0%;} to{width:100%;} }
@media (max-width:700px) { .gallery-strip { height:60vh; } }

/* (marquesina retirada — sustituida por el componente orbital de sellos) */

/* ============ PROPÓSITO (scroll reveal, quote corta) ============ */
.proposito { position:relative; background:var(--pale); padding:150px var(--gutter); display:flex; justify-content:center; overflow:hidden; }
.proposito .blur { position:absolute; right:-8%; top:6%; width:44vw; height:44vw; border-radius:50%;
  background:radial-gradient(circle, rgba(31,60,143,.18), transparent 65%); pointer-events:none; }
.proposito-text { max-width:1000px; font-family:'Nohemi'; font-weight:800; font-size:clamp(26px,4.4vw,54px); line-height:1.18; text-align:center; position:relative; z-index:2; }
.proposito-text .word { color:#b9cadd; transition:color .3s; }
.proposito-text .word.on { color:var(--navy); }
.proposito .eyebrow { display:block; text-align:center; margin-bottom:26px; color:var(--navy); }

/* ============ IDENTIFICADOR + LÍNEAS (grid interactivo) ============ */
.lineas-intro { text-align:center; padding:110px var(--gutter) 46px; }
.lineas-intro h2 { font-size:clamp(34px,5vw,62px); color:var(--navy); }
.lineas-intro p { max-width:580px; margin:16px auto 0; color:#4a5568; font-size:16px; line-height:1.5; }

.lineas-grid { display:flex; gap:14px; padding:0 var(--gutter) 120px; max-width:1500px; margin:0 auto; height:640px; }
.linea-panel { position:relative; border-radius:28px; overflow:hidden; cursor:pointer; flex:1; transition:flex .7s var(--ease-out); }
.linea-panel.active { flex:5; }
/* mismos blobs orgánicos que .cat-hero (ver PÁGINAS DE CATEGORÍA más abajo) para que el fondo se
   sienta como un mismo sistema visual al pasar de esta grilla a la página de la categoría — acá en
   % en vez de vw porque el ancho del panel cambia todo el tiempo (colapsado/activo), no el viewport */
.linea-panel .panel-bg { position:absolute; inset:0; overflow:hidden; transition:background .3s; }
.linea-panel .panel-bg::before, .linea-panel .panel-bg::after { content:''; position:absolute; }
.linea-panel .panel-bg::before { width:150%; height:120%; top:-32%; left:-20%;
  border-radius:32% 68% 70% 30% / 38% 32% 68% 62%; opacity:.95; transform:rotate(-6deg); }
.linea-panel .panel-bg::after { width:105%; height:108%; bottom:-28%; right:-22%;
  border-radius:70% 30% 38% 62% / 62% 40% 60% 38%; opacity:.9; transform:rotate(10deg); }
.linea-panel .panel-tag { position:absolute; top:28px; left:0; right:0; display:flex; align-items:center; gap:12px; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed; font-family:'Nohemi'; font-weight:800; font-size:19px; letter-spacing:.01em;
  color:#fff; opacity:1; visibility:visible; transition:opacity .18s linear .3s, visibility 0s linear .3s; height:calc(100% - 56px); z-index:1; }
.linea-panel .panel-tag .icon { writing-mode:horizontal-tb; width:25px; height:25px; }
.linea-panel.active .panel-tag { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s linear, visibility 0s linear .18s; }
/* el contenido nunca cambia de ancho (evita reflow de texto) — el panel solo revela más o menos, como una ventana */
.linea-panel .panel-content { position:absolute; inset:0; display:flex; align-items:flex-end; padding:40px; opacity:0; z-index:2;
  transition:opacity .3s linear; transition-delay:0s; pointer-events:none;
  /* scrim de seguridad para que el texto siga legible sobre el patrón de ondas en cualquier color de categoría */
  background:linear-gradient(to top, rgba(0,0,0,.38), transparent 60%); }
.linea-panel.active .panel-content { opacity:1; transition-delay:.35s; pointer-events:auto; }
/* height:100% es obligatorio: sin una altura definida aquí, "height:100%" e "img{max-height:100%}"
   más abajo quedan indefinidos (el flex padre solo hace align-items:flex-end, no stretch), así que
   la imagen del producto se renderizaba a su tamaño natural (enorme) y el overflow:hidden del panel
   le cortaba la parte de arriba */
/* min-width:640px (fijo) es el verdadero origen del corte: en ventanas angostas (~1366px o menos)
   el panel activo mide menos de 640px+padding, así que ese mínimo lo forzaba a desbordarse por la
   derecha y el overflow:hidden del panel le cortaba la imagen. width:100% ya lo ajusta al ancho real
   del panel en cada momento — el texto solo se hace visible .35s después de que termina de abrirse
   (ver transition-delay en .active .panel-content), así que quitar el mínimo no genera reflow visible. */
.panel-content .inner { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:end; width:100%; min-width:0; height:100%; }
.panel-content .badge-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px; background:rgba(255,255,255,.55);
  font-weight:700; font-size:12px; margin-bottom:16px; }
.panel-content h3 { font-size:clamp(30px,3.4vw,52px); color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.2); }
.panel-content p.claim { color:rgba(255,255,255,.92); font-size:16px; line-height:1.5; margin-top:14px; max-width:400px; text-shadow:0 1px 12px rgba(0,0,0,.18); }
.panel-sellos { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.panel-sellos .mini { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.22); padding:7px 12px; border-radius:100px; }
.panel-sellos .mini .icon { width:13px; height:13px; }
.panel-content .btn-line { margin-top:22px; background:#fff; color:var(--ink); }
.panel-product { position:relative; height:100%; min-width:0; display:flex; align-items:flex-end; justify-content:center; }
/* max-width es tan obligatorio como max-height: al fijar solo la altura, una foto ancha (como la del
   pouch de Higiene Personal) se escalaba por altura y se salía por el costado del panel activo,
   cortándose contra el overflow:hidden de .linea-panel en vez del de arriba/abajo */
.panel-product img { max-height:100%; max-width:100%; width:auto; object-fit:contain; filter:drop-shadow(0 26px 30px rgba(0,0,0,.28)); }

/* color base plano + los mismos dos blobs (claro/oscuro vía color-mix) y los mismos porcentajes que
   .cat-hero--* — así el color y la sensación de "paleta en formas irregulares" es idéntica en los
   dos lugares donde aparece cada categoría */
#panel-bebes .panel-bg { background:var(--blue); }
#panel-bebes .panel-bg::before { background:color-mix(in srgb, var(--blue) 100%, white 36%); }
#panel-bebes .panel-bg::after { background:color-mix(in srgb, var(--blue) 100%, black 42%); }
#panel-personal .panel-bg { background:var(--green); }
#panel-personal .panel-bg::before { background:color-mix(in srgb, var(--green) 100%, white 38%); }
#panel-personal .panel-bg::after { background:color-mix(in srgb, var(--green) 100%, black 44%); }
#panel-intima .panel-bg { background:var(--purple); }
#panel-intima .panel-bg::before { background:color-mix(in srgb, var(--purple) 100%, white 34%); }
#panel-intima .panel-bg::after { background:color-mix(in srgb, var(--purple) 100%, black 38%); }
#panel-skincare .panel-bg { background:var(--carbon); }
#panel-skincare .panel-bg::before { background:color-mix(in srgb, var(--carbon) 100%, white 30%); }
#panel-skincare .panel-bg::after { background:color-mix(in srgb, var(--carbon) 100%, white 16%); }

/* ============ STORYTELLING — dos momentos, cada uno con su propio acompañamiento visual ============ */
.story-1 { background:var(--navy); color:#fff; padding:120px var(--gutter); min-height:92vh; display:flex; align-items:center;
  position:relative; overflow:hidden; }

/* líneas gordas tipo espiral — mismos trazos (path real) y técnica de beetogreen.com: stroke grueso,
   sin relleno, un color de acento por forma para que contrasten contra el navy, y un dibujado (draw-in)
   al entrar en pantalla via stroke-dashoffset (GSAP, ver main.js) */
.story-shapes { position:absolute; inset:0; pointer-events:none; z-index:0; }
.story-shape { position:absolute; fill:none; }
.story-shape path { stroke-width:34; stroke-linecap:round; }
.story-shape--a { top:-8%; left:-9%; width:30%; }
.story-shape--a path { stroke:var(--blue); opacity:.65; }
.story-shape--b { bottom:-14%; right:-7%; width:34%; }
.story-shape--b path { stroke:var(--pink); opacity:.55; }
.story-shape--c { top:38%; left:78%; width:16%; display:none; }
.story-shape--c path { stroke:var(--green); opacity:.55; }
@media (min-width:1100px) { .story-shape--c { display:block; } }
.story-grid { position:relative; z-index:2; max-width:1220px; margin:0 auto; width:100%; display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; }
.story-grid .eyebrow { color:#A9C6FF; font-size:14px; }
.story-grid h2 { font-size:clamp(36px,5.6vw,68px); margin-top:18px; line-height:1.05; text-wrap:balance; }
.story-body p { font-size:clamp(17px,1.5vw,20px); line-height:1.75; color:rgba(255,255,255,.86); margin:0 0 22px; max-width:640px; }
/* la última línea del storytelling real de marca (Brandbook) cierra como una declaración, no como
   otro párrafo más — mismo tamaño de impacto que el h2 de al lado, para aprovechar el aire vertical
   de la sección con jerarquía en vez de solo agrandar todo por igual */
.story-body .story-lead { font-family:'Nohemi'; font-weight:800; font-size:clamp(24px,2.8vw,36px); line-height:1.3;
  color:#fff; margin:32px 0 0; max-width:600px; text-wrap:balance; }

.story-2 { background:var(--pale); padding:110px var(--gutter); }
.story-2-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
/* antes esta foto (una gota de agua) se convertía a escala de grises y se le aplicaba un mix-blend
   navy encima — quedaba plana y sin vida ("la imagen de fondo azul... no me encanta"). La foto nueva
   (hoja con gotas, verde real) se deja en su color natural con solo un realce de contraste/saturación,
   igual que el resto de fotografía del sitio — el verde es justo lo que se pidió, no hay que taparlo. */
.story-2-photo { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1.05; }
.story-2-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.08) brightness(1.03); }
.story-2 .pull { font-family:'Nohemi'; font-weight:800; font-size:clamp(24px,3vw,40px); line-height:1.28; color:var(--navy); text-wrap:balance; }
.story-2 .sign { font-weight:700; color:var(--navy); margin-top:22px; font-size:15px; }

/* ============ SELLOS — orbital, headline al centro ============ */
.sellos { position:relative; background:var(--white); padding:110px var(--gutter) 90px; overflow:hidden; }
.sellos-head { text-align:center; margin-bottom:10px; }
.sellos-head .eyebrow { color:var(--navy); }

.orbit-wrap { position:relative; --orbit-size:min(760px, 92vw); width:var(--orbit-size); aspect-ratio:1; margin:0 auto; }
.orbit-ring { position:absolute; inset:6%; border-radius:50%; border:1.5px dashed #c9d6ec; animation:spin 90s linear infinite; }
.orbit-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 14%; }
.orbit-center h2 { font-size:clamp(24px,3.2vw,40px); color:var(--navy); text-wrap:balance; }
.orbit-item { position:absolute; top:50%; left:50%; width:118px; margin:-32px 0 0 -59px; text-align:center;
  /* el radio debe coincidir siempre con el del aro (inset:6% => radio = 44% del wrap), si no, los badges quedan flotando fuera de línea con el círculo punteado en cualquier ancho que no sea exactamente 760px.
     margin-top es -32px (mitad del alto del badge, 64px) y NO -59px (mitad del alto total de la caja):
     la caja incluye la etiqueta de texto debajo del ícono, así que centrarla completa desalinea el
     badge ~27px hacia arriba del punto real de rotación — medido en vivo (radio variaba entre 308px
     abajo y 361px arriba en vez de un radio constante de 334.5px). Centrando solo el badge (su mitad
     superior, ya que es el primer hijo) el círculo queda perfecto sin importar cuánto texto tenga cada sello. */
  --r: calc(var(--orbit-size) * 0.44); transform:rotate(calc(var(--i) * 30deg)) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) * -30deg)); }
.orbit-item .ring-badge { width:64px; height:64px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; color:var(--navy); background:#fff; transition:transform .35s var(--ease-out), background .3s, color .3s; }
.orbit-item .ring-badge .icon { width:26px; height:26px; }
.orbit-item .ring-badge .num { font-family:'Nohemi'; font-weight:900; font-size:16px; }
.orbit-item:hover .ring-badge { background:var(--navy); color:#fff; transform:scale(1.1); }
.orbit-item p { margin:0; font-size:11.5px; font-weight:700; color:#33415e; line-height:1.25; }

.sellos-grid-fallback { display:none; }
@media (max-width:860px) {
  .orbit-wrap { display:none; }
  .sellos-grid-fallback { display:grid; grid-template-columns:repeat(3,1fr); gap:22px 14px; max-width:560px; margin:30px auto 0; }
  .sellos-grid-fallback .sello { text-align:center; }
  .sellos-grid-fallback .ring-badge { width:62px; height:62px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; color:var(--navy); }
  .sellos-grid-fallback .ring-badge .icon { width:26px; height:26px; }
  .sellos-grid-fallback .ring-badge .num { font-family:'Nohemi'; font-weight:900; font-size:16px; }
  .sellos-grid-fallback p { margin:0; font-size:11.5px; font-weight:700; color:#33415e; }
}

/* ============ CTA FINAL ============ */
.cta-final { background:var(--navy); color:#fff; padding:130px var(--gutter) 90px; text-align:center; position:relative; overflow:hidden; }
.cta-final .blob { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:70vw; height:70vw; border-radius:50%;
  background:radial-gradient(circle, rgba(9,153,214,.5), transparent 65%); pointer-events:none; }
.cta-final .eyebrow { color:#A9C6FF; position:relative; z-index:2; }
.cta-final h2 { font-size:clamp(32px,6vw,78px); color:#fff; position:relative; z-index:2; margin-top:14px; }
.cta-final .btn { margin-top:30px; position:relative; z-index:2; font-size:16px; padding:19px 34px; background:#fff; color:var(--navy); }

/* ============ SOCIOS — logos reales de tiendas/plataformas, mismo patrón que un "logo cloud":
   una tarjeta de texto destacada (spans 3 filas) + grid de logos en su color real sobre tarjetas
   claras. fondo var(--pale) para alternar con #sellos (blanco) antes y el navy de #cta-final después. */
.partners { background:var(--pale); padding:100px var(--gutter); }
.partners-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.partners-intro { grid-column:1; grid-row:span 3; background:#fff; border-radius:28px; padding:36px 30px;
  display:flex; flex-direction:column; justify-content:space-between; }
.partners-intro p { font-family:'Nohemi'; font-weight:800; font-size:clamp(22px,2.2vw,28px); line-height:1.25; color:var(--navy); text-wrap:balance; }
.partners-intro .btn { margin-top:28px; align-self:flex-start; }
/* display:grid + place-items:center en vez de position:absolute+inset:0+margin:auto (que sí es lo
   que usa gbco): en el celular real del cliente el logo de Chedraui seguía viéndose recortado aunque
   en las pruebas de escritorio se veía perfecto -- absolute+inset+width/height% en % es una de las
   combinaciones de CSS con más variación histórica entre motores para cómo se resuelve el porcentaje
   contra el "containing block". CSS Grid resuelve el porcentaje de sus hijos de forma más directa
   (el área de la celda YA es una medida concreta, no depende de encontrar el "containing block
   posicionado" correcto) y es el método que Grid está diseñado para hacer bien -- mismo resultado
   visual, menos superficie para que un navegador lo interprete distinto. */
.partner-tile { position:relative; background:#fff; border-radius:22px; overflow:hidden;
  aspect-ratio:4/3; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; place-items:center;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.partner-tile:hover { transform:translateY(-4px); box-shadow:0 20px 34px -18px rgba(16,24,40,.18); }
/* grid-template-columns/rows:1fr arriba -- SIN esto, .partner-tile es un contenedor grid con una sola
   celda implícita de tamaño "auto", y "auto" NO es una medida concreta contra la cual un hijo pueda
   resolver un alto en % (mismo tipo de bug que ya se vio con flexbox: el porcentaje necesita una
   medida definida de verdad, no una que dependa del propio contenido). Farmacias Guadalajara se
   seguía viendo cortado (la mitad de abajo del círculo) -- el navegador probablemente resolvía su
   height:44% contra 0 o contra un valor equivocado, y el 44% resultante superaba lo que "cabía"
   antes de que overflow:hidden lo recortara. Con la celda ya explícita en 1fr (=100% del contenedor,
   que SÍ tiene alto real vía aspect-ratio), el porcentaje del hijo por fin resuelve contra algo real. */
/* max-width/max-height + width/height:auto en vez de width/height ambos en % -- con las dos
   dimensiones en % (72%/56%), el navegador tiene que resolver AMBAS como medidas concretas antes de
   que object-fit:contain entre a decidir el tamaño final; si cualquiera de las dos se resuelve mal
   (el bug de Safari real que ya se documentó arriba), el resultado se ve recortado o gigante. Con
   max-width/max-height + auto, el navegador solo tiene que respetar un tope en cada eje y calcula el
   tamaño final a partir del ratio intrínseco de la imagen -- una sola fuente de verdad, no dos
   porcentajes que puedan desincronizarse entre sí. */
.partner-tile img { max-width:72%; max-height:56%; width:auto; height:auto; object-fit:contain; }
@media (max-width:900px) {
  .partners-grid { grid-template-columns:repeat(2,1fr); }
  .partners-intro { grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:480px) {
  .partners-grid { grid-template-columns:1fr; }
  .partners-intro { grid-column:1; }
  /* en una sola columna, 4/3 dejaba cada tarjeta demasiado alta con mucho aire vacío alrededor
     del logo — más ancha que alta se siente mejor para una fila completa */
  .partner-tile { aspect-ratio:2.2/1; }
  /* Farmacias Guadalajara ya no es un emblema cuadrado: el logo completo incluye "Super Farmacia"
     debajo, así que es más alto que ancho (359x428). Metido en una tarjeta 2.2/1 (ancha y baja) como
     sus vecinos, object-fit:contain lo encoge muchísimo para no desbordar el alto -- se ve minúsculo,
     casi ilegible, aunque técnicamente no esté "cortado". Se le da su propia tarjeta más alta en vez
     de forzar el mismo marco ancho que a un wordmark horizontal. */
  .partner-tile--tall { aspect-ratio:1/1; }
  .partner-tile--tall img { max-height:80%; }
}

/* ============ FOOTER — navy-deep (un tono más oscuro que el navy del CTA de arriba, para que se
   sienta como un cierre con más profundidad en vez de repetir el mismo azul) ============ */
footer { background:var(--navy-deep); color:#fff; padding:84px var(--gutter) 30px; }
.footer-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:56px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14); }
footer .logo-img { height:38px; filter:brightness(0) invert(1); }
.footer-brand { max-width:320px; }
.footer-brand p { margin:18px 0 0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.65); }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4 { font-family:'Cabinet Grotesk'; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#7C93D6; font-weight:700; margin-bottom:16px; }
.footer-col a { display:block; font-size:14.5px; margin-bottom:11px; color:rgba(255,255,255,.8); transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-social { display:flex; gap:10px; }
.footer-social a { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; margin:0; transition:background .25s, transform .25s; }
.footer-social a:hover { background:var(--blue); transform:translateY(-3px); color:#fff; }
.footer-social a .icon { width:16px; height:16px; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:22px; font-size:12px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px; }

/* ============ RESPONSIVE ============ */
/* Líneas en mobile/tablet: en touch no existe ":hover", así que la interacción real de esta grilla
   siempre fue "toca la línea y navega" (ver panels.forEach click en main.js — mouseenter es lo único
   que llama a setActive, nunca el click). O sea que el mecanismo de expandir-con-hover del desktop
   nunca puede pasar aquí, y dejar los paneles colapsados a 120px con .panel-content en position:absolute
   + opacity:0 los volvía completamente invisibles: la caja resultaba en 0px de alto porque .linea-panel
   tiene flex:1 (= flex-basis:0%) desde la regla base, y flex-basis distinto de "auto" IGNORA el height
   del elemento por completo — el height:120px/560px de aquí nunca se aplicaba, y como todo el contenido
   interno vive en position:absolute (no aporta alto intrínseco), el panel medía 0px y toda la sección
   "Nuestras líneas" quedaba en blanco en cualquier celular. Se resuelve mostrando las 4 líneas como
   tarjetas normales, siempre abiertas, con el contenido en flujo normal (no absolute) para que sí
   definan su propio alto — igual de fiable sin importar cuánto texto tenga cada categoría. */
/* El primer intento de este fix usaba display:flex + flex-direction:column con flex:none en los
   paneles — se veía perfecto en Chrome/escritorio (verificado con medidas reales), pero en un iPhone
   real seguía sin mostrar el texto. Causa: .linea-panel tiene overflow:hidden desde la regla base
   (necesario para recortar los blobs decorativos), y la especificación de Flexbox dice que el
   "automatic minimum size" (el alto mínimo basado en contenido que un flex-item necesita para no
   colapsar) SOLO aplica si overflow es "visible" — con overflow:hidden, el mínimo cae a 0 en vez de
   basarse en el contenido. Chrome es permisivo y de todos modos usa el contenido; Safari/WebKit
   sigue la spec al pie de la letra y colapsa el panel a 0 igual que el bug original. display:block
   no tiene esta ambigüedad en NINGÚN navegador — una caja de bloque con height:auto siempre mide su
   contenido, sin excepciones, sea cual sea su overflow. */
@media (max-width:1000px) {
  .lineas-grid { display:block; height:auto; }
  .linea-panel, .linea-panel.active { flex:none; height:auto; margin-bottom:16px; }
  .linea-panel:last-child { margin-bottom:0; }
  .linea-panel .panel-tag { display:none; }
  .linea-panel .panel-content {
    /* position:relative (NO static) — este fue el bug real, encontrado hasta con capturas de
       pantalla reales del cliente + hit-test con elementFromPoint(): con position:static el texto
       SÍ existía en el DOM con el tamaño y opacidad correctos (por eso las mediciones se veían bien),
       pero .panel-bg (que es position:absolute) se pinta arriba de CUALQUIER contenido "static" sin
       importar el orden en el HTML — es una regla de la especificación de CSS sobre el orden de
       apilamiento (stacking order), no algo específico de un navegador. El texto quedaba tapado por
       el fondo, invisible, aunque perfecto "en el papel". position:relative sí es un elemento
       "posicionado" (a diferencia de static), así que el z-index:2 que ya tiene esta regla en la
       base de arriba por fin surte efecto y lo pinta encima del fondo. */
    position:relative; z-index:2; opacity:1; pointer-events:auto; display:block;
    padding:30px 26px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.28) 65%);
  }
  .panel-content .inner { display:grid; grid-template-columns:1fr; min-width:0; width:100%; gap:22px; }
  .panel-product { height:210px; order:-1; }
  /* los tamaños de texto de esta tarjeta venían del diseño de escritorio (pensados para el panel
     angosto de 5/12 del grid con hover), no para una tarjeta de ancho completo en mobile — se sentían
     chicos para el espacio real que ahora ocupan. Se suben un escalón cada uno, manteniendo las
     mismas proporciones relativas entre sí (badge < sellos < claim < h3). */
  .panel-content .badge-pill { font-size:13.5px; padding:8px 18px; margin-bottom:18px; }
  .panel-content h3 { font-size:clamp(32px,8.5vw,44px); }
  .panel-content p.claim { font-size:17.5px; line-height:1.6; max-width:none; }
  .panel-sellos { gap:10px; margin-top:22px; }
  .panel-sellos .mini { font-size:13px; padding:8px 14px; }
  .panel-sellos .mini .icon { width:15px; height:15px; }
  .panel-content .btn-line { margin-top:26px; }
  .story-grid { grid-template-columns:1fr; gap:30px; }
}
@media (max-width:900px) {
  .story-2-grid { grid-template-columns:1fr; }
  nav.links { display:none; }
}
@media (max-width:520px) {
  .footer-cols { gap:28px; }
}

/* ============ PÁGINAS DE CATEGORÍA ============ */
/* el navbar es el mismo header fijo en todas las páginas, así que el acento se resuelve con una
   clase modificadora en <header class="nav nav--X"> — nada más que --nav-accent cambia */
header.nav--bebes { --nav-accent: var(--blue); }
header.nav--personal { --nav-accent: var(--green); }
header.nav--intima { --nav-accent: var(--purple); }
header.nav--skincare { --nav-accent: var(--carbon); }

.cat-hero { position:relative; overflow:hidden; padding:150px var(--gutter) 80px; color:#fff; }

/* fondo de paleta en formas irregulares (ref. Aardvark Book Club): dos blobs orgánicos, uno claro y
   uno oscuro, ambos derivados del mismo color de la categoría con color-mix — así cada categoría
   queda automáticamente en su propia paleta sin tener que inventar hex nuevos por página */
.cat-blobs { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cat-blob { position:absolute; }
/* los blobs viven del centro hacia la derecha a propósito: el texto (blanco) va siempre en la
   columna izquierda y necesita quedarse sobre el color base plano para no perder contraste */
.cat-blob-a { width:62vw; height:64vw; max-width:820px; max-height:820px; top:-22%; left:34%;
  border-radius:32% 68% 70% 30% / 38% 32% 68% 62%; opacity:.95; transform:rotate(-6deg); }
.cat-blob-b { width:44vw; height:48vw; max-width:560px; max-height:600px; bottom:-22%; right:-6%;
  border-radius:70% 30% 38% 62% / 62% 40% 60% 38%; opacity:.9; transform:rotate(10deg); }

.cat-hero--bebes .cat-blob-a { background:color-mix(in srgb, var(--blue) 100%, white 36%); }
.cat-hero--bebes .cat-blob-b { background:color-mix(in srgb, var(--blue) 100%, black 42%); }
.cat-hero--personal .cat-blob-a { background:color-mix(in srgb, var(--green) 100%, white 38%); }
.cat-hero--personal .cat-blob-b { background:color-mix(in srgb, var(--green) 100%, black 44%); }
.cat-hero--intima .cat-blob-a { background:color-mix(in srgb, var(--purple) 100%, white 34%); }
.cat-hero--intima .cat-blob-b { background:color-mix(in srgb, var(--purple) 100%, black 38%); }
.cat-hero--skincare .cat-blob-a { background:color-mix(in srgb, var(--carbon) 100%, white 30%); }
.cat-hero--skincare .cat-blob-b { background:color-mix(in srgb, var(--carbon) 100%, white 16%); }

.cat-hero .glow { position:absolute; z-index:1; width:60vw; height:60vw; border-radius:50%; top:-25%; right:-10%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); pointer-events:none; }
.cat-hero .back-link { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; opacity:.85; margin-bottom:28px; }
.cat-hero .back-link .icon { width:14px; height:14px; transform:rotate(180deg); }
/* align-items:start (no center): con align-items:center el bloque de texto —más corto que la foto—
   quedaba flotando a la mitad del hero, con un hueco enorme arriba entre el nav y "Volver al inicio".
   Ahora el texto se ancla arriba, justo debajo del padding, y solo la foto se centra por su cuenta. */
.cat-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:start; max-width:1400px; margin:0 auto; }
.cat-hero .eyebrow-row { display:flex; align-items:center; gap:10px; }
.cat-hero .eyebrow-row .icon { width:15px; height:15px; }
.cat-hero h1 { font-size:clamp(44px,7vw,96px); color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.18); margin-top:14px; }
.cat-hero p.lead { max-width:440px; font-size:17px; line-height:1.65; color:rgba(255,255,255,.92); margin-top:22px; text-shadow:0 2px 16px rgba(0,0,0,.15); }
.cat-hero .sello-row { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.cat-hero .sello-row .mini { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.22); padding:8px 14px; border-radius:100px; }
.cat-hero .sello-row .mini .icon { width:14px; height:14px; }
.cat-hero-photo { align-self:center; }
.cat-hero-photo img { width:100%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.35)); }

.cat-products { padding:110px var(--gutter) 130px; max-width:1400px; margin:0 auto; }
.cat-products-head { text-align:center; margin-bottom:64px; }
.cat-products-head h2 { font-size:clamp(30px,4vw,50px); margin-top:10px; }
.cat-products-head p { max-width:540px; margin:16px auto 0; color:#4a5568; font-size:16px; line-height:1.6; }

.cat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:32px; }

/* tarjeta de producto — una sola pieza: la foto vive directo sobre el mismo tono de la tarjeta
   (sin caja blanca separada), pero en un marco de proporción fija (mismo tamaño visual sin
   importar las dimensiones reales de cada foto). Texto a la izquierda para que se lea como el
   resto del sitio (líneas, storytelling) en vez de un template genérico centrado */
.cat-card { border-radius:28px; padding:24px; display:flex; flex-direction:column; text-align:left;
  width:100%; max-width:380px; margin:0 auto;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.cat-card:hover { transform:translateY(-8px); box-shadow:0 34px 54px -24px rgba(16,24,40,.22); }

.cat-card-media { position:relative; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; padding:12px; margin-bottom:18px; overflow:hidden; }
.cat-card-media img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.16));
  transition:transform .45s var(--ease-out); }
.cat-card:hover .cat-card-media img { transform:scale(1.06); }

.cat-card h3 { font-size:clamp(19px,1.6vw,23px); }
.cat-card p.contains { font-size:14px; color:#4a5568; margin-top:9px; line-height:1.6; }
.cat-card .sello-row { display:flex; gap:6px; margin-top:18px; flex-wrap:wrap; justify-content:flex-start; }
.cat-card .sello-row .mini { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:6px 11px; border-radius:100px; background:rgba(0,0,0,.06); }
.cat-card .sello-row .mini .icon { width:12px; height:12px; }
@media (max-width:520px) { .cat-card-media { aspect-ratio:4/3; } }

@media (max-width:900px) { .cat-hero-grid { grid-template-columns:1fr; } .cat-hero-photo { max-width:280px; margin:0 auto; } }