/* ============================================================
   Marina 151 — CSS compartido del tema
   Extraído de las maquetas aprobadas (Estrategia/web/propuestas):
   wellina-151.html · categoria-151.html · producto-151.html ·
   sobre-151.html · legal-*.html
   Un solo fichero para todas las plantillas; nada duplicado.
   ============================================================ */

/* ============ RESET / BASE / TOKENS ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --blanco:#FFFFFF;
  --negro:#111111;
  --gris-panel:#F1F3F5;
  --gris-borde:#E2E6EA;
  --gris-texto:#5B6470;
  --beige:#F0EBE1;
  --beige-hover:#E7E0D2;
  --azul-marca:#4A90D9;
  --azul-boton:#2E6FB8;
  /* Acento de titulares y de iconos. #4A90D9 sobre beige (#F0EBE1) o azul
     suave (#E8F1FA) se queda en 2,8:1 y 2,9:1, por debajo del 3:1 que exige
     el texto grande y los graficos. El azul oscuro de marca sube a 4,2:1 y
     4,5:1 sin salir de la paleta. */
  --azul-acento:#2E6FB8;
  --azul-boton-hover:#245C9E;
  --azul-marca-hover:var(--azul-boton-hover);
  --azul-suave:#E8F1FA;
  --azul-profundo:#111111; /* cabecera blanca; pie/franjas oscuras en negro */
  --azul-claro:#A8CCEE;
  --display:'Raleway',system-ui,-apple-system,sans-serif;
  --sans:'Geist',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth;font-size:62.5%}
body{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--negro);background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2}
h1 em,h2 em,h3 em,.h1 em,.mega em{font-style:normal;color:var(--azul-acento)}
.hero-copy em,.collections em,.foot-claim em{color:var(--azul-claro)}
/* Anillo de foco de dos tonos: halo blanco pegado al elemento + aro azul
   oscuro. Uno de los dos contrasta siempre, en beige, en azul suave, sobre
   el propio boton azul y sobre el pie oscuro. Sin border-radius: fijarlo aqui
   deformaba las pildoras (60px) en un rectangulo de 4px al recibir el foco. */
:focus-visible{outline:3px solid var(--azul-acento);outline-offset:2px;box-shadow:0 0 0 2px #fff}
footer :focus-visible,.collections :focus-visible{outline-color:#fff;box-shadow:0 0 0 2px rgba(17,17,17,.6)}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,50px)}
/* Etiqueta de seccion. Reutiliza la escala de etiqueta que ya existe en el
   pie (.foot-top h4: 13px / .05em / 500) en vez de mantener una segunda a
   15px que competia en peso con el titular que va debajo. */
.kicker{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;display:block;color:var(--gris-texto);margin-bottom:12px}

/* Utilidades de accesibilidad (WP + maquetas) */
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ============ BOTONES ============ */
/* Botón píldora Wellina — 50px alto, radio 60px */
/* min-height en vez de height: con height fija el texto largo ("Consulta a
   tu farmaceutica por WhatsApp") se partia en dos lineas y se salia de la
   pildora en movil. Con min-height + padding vertical el boton de una linea
   mide exactamente los mismos 50px y el de dos crece. */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:50px;background:var(--azul-boton);color:var(--blanco);border:none;cursor:pointer;border-radius:60px;padding:5px 5px 5px 24px;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.3;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--azul-boton-hover)}
.btn:active{background:var(--azul-boton-hover);transform:scale(.985)}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:scale(1.03)}}
.btn .arr{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blanco);color:var(--azul-marca);font-size:15px;flex:none}
/* El boton de contorno solo cambiaba de escala al pasar el raton: sin cambio
   de color no habia estado hover reconocible en el CTA de WhatsApp. */
/* Padding 1px menor por lado: el borde cuenta dentro de min-height, asi el
   boton de contorno mide los mismos 50px que el solido y no 52. */
.btn--outline{background:transparent;color:var(--negro);border:1px solid var(--negro);padding:4px 4px 4px 23px}
.btn--outline:hover,.btn--outline:active{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn--outline .arr{background:var(--azul-boton);color:var(--blanco)}
.btn--outline:hover .arr,.btn--outline:active .arr{background:var(--blanco);color:var(--azul-boton)}
.btn--sm{min-height:36px;padding:6px 18px;gap:0}
.btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#fff;padding:12px 24px}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
/* .btn--ghost va después de .btn--sm con la misma especificidad, así que le
   ganaba el padding: con height fija daba igual, pero con min-height los
   botones pequeños de la rejilla («Ver productos») pasaban de 36 a 45,5px.
   Esta combinación devuelve los 36px exactos sin tocar el ancho. */
.btn--ghost.btn--sm{padding-top:6px;padding-bottom:6px}
/* Botón de consulta por WhatsApp: icono delante del texto, sin círculo .arr */
.btn--wa{gap:10px;padding:12px 22px}
.btn--wa svg{width:18px;height:18px;flex:none;fill:currentColor;stroke:none}

/* ============ TARJETA DE PRODUCTO ============ */
/* flex columna: precios alineados al pie en cada fila */
.card{display:flex;flex-direction:column;height:100%}
.card .card-price{margin-top:auto}
/* Tarjeta con fab AJAX real: enlaces internos (imagen y texto) en vez de una <a> envolvente */
.card .card-link{display:flex;flex-direction:column;flex-grow:1}
.card .card-img-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.card-img{position:relative;background:var(--gris-panel);border-radius:20px;padding:26px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.05;margin-bottom:14px;transition:transform .18s ease}
.card:hover .card-img{transform:translateY(-4px)}
.card-img img{mix-blend-mode:multiply;max-height:100%;object-fit:contain}
.card-meta{display:block;font-size:14px;font-weight:400;color:var(--gris-texto);margin-bottom:4px}
.card:hover .card-meta{text-decoration:underline;text-underline-offset:3px}
.card-name{font-family:var(--sans);font-size:15px;font-weight:500;margin-bottom:4px}
.card-price{font-size:15px;font-weight:400;color:var(--gris-texto)}
.badge{position:absolute;top:14px;left:14px;font-size:12px;font-weight:500;color:#fff;border-radius:60px;padding:5px 12px}
.badge--new{background:var(--azul-marca)}
.badge--best{background:var(--negro)}
.cart-fab{position:absolute;right:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--negro);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s,background .2s}
.card:hover .cart-fab,.card:focus-within .cart-fab{opacity:1;transform:none}
.cart-fab:hover{background:var(--azul-boton)}
.cart-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.cart-fab{opacity:1;transform:none}}

/* ============ GRIDS Y SECCIONES ============ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
section{padding:clamp(2.8rem,4.5vw,5.2rem) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(3.36rem,4vw,4.8rem)}

/* Flechas redondas outline (carruseles) */
.circ-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;cursor:pointer;font-size:16px;transition:opacity .2s}
.circ-arrow:hover{opacity:.6}

/* ============ BARRA DE ANUNCIO ============ */
.announce{background:var(--azul-suave);color:var(--negro);text-align:center;font-size:13px;font-weight:500;padding:9px 16px;letter-spacing:.03em}
/* Estado base = estado sin movimiento: los dos mensajes visibles, seguidos.
   Es lo que ve quien pide prefers-reduced-motion y quien no soporta la media
   query, así que el mensaje de WhatsApp nunca depende de una animación. */
.announce{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 12px}
.announce-sep{color:var(--gris-texto)}
.announce a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.announce a:hover{color:var(--azul-boton-hover)}
/* Solo si el visitante no ha pedido menos movimiento: se apilan en la misma
   celda y se turnan cada 6 s. visibility evita que el mensaje oculto siga
   siendo clicable o lo lea un lector de pantalla. */
@media (prefers-reduced-motion:no-preference){
  .announce{display:grid;grid-template-columns:1fr}
  .announce-msg{grid-area:1/1;animation:m151-announce 12s linear infinite}
  .announce-msg--b{animation-delay:-6s}
  .announce-sep{display:none}
}
@keyframes m151-announce{
  0%{opacity:0;visibility:hidden;transform:translateY(4px)}
  1%{opacity:0;visibility:visible;transform:translateY(4px)}
  4%,45%{opacity:1;visibility:visible;transform:none}
  49%{opacity:0;visibility:visible;transform:translateY(-4px)}
  50%,100%{opacity:0;visibility:hidden;transform:translateY(-4px)}
}

/* ============ HEADER BLANCO ============ */
header{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:var(--negro);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(226,230,234,.7)}
.header-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:14px clamp(20px,4vw,50px);max-width:1440px;margin:0 auto}
.nav{justify-self:start}
.logo{justify-self:center;display:inline-flex}
.logo img{width:105px;height:auto}
.logo a{display:inline-flex;align-items:center}
.logo-text{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em}
.nav ul{display:flex;gap:24px;font-size:15px;font-weight:500;flex-wrap:wrap}
.nav a{color:var(--negro)}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.nav a[aria-current="page"],.mnav-panel a[aria-current="page"],
.nav .current-menu-item>a,.mnav-panel .current-menu-item>a{text-decoration:underline;text-underline-offset:5px}
.header-icons{display:flex;gap:6px;align-items:center;justify-self:end}
.header-icons a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:50%;padding:4px}
.header-icons a:hover{background:var(--gris-panel)}
.header-icons a:active{background:var(--gris-borde)}
.header-icons svg{width:21px;height:21px;stroke:var(--negro);fill:none;stroke-width:1.6}
.cart-n{font-size:11px;background:var(--negro);color:var(--blanco);border-radius:50%;width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-left:-8px;margin-top:-10px}
.menu-toggle{display:none}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--negro);color:#fff;padding:10px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* Búsqueda del header (details expandible con formulario GET real) */
.hsearch{position:relative}
.hsearch summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:50%;padding:4px}
.hsearch summary::-webkit-details-marker{display:none}
.hsearch summary:hover{background:var(--gris-panel)}
.hsearch summary:active{background:var(--gris-borde)}
.hsearch summary svg{width:21px;height:21px;stroke:var(--negro);fill:none;stroke-width:1.6}
.hsearch-panel{position:absolute;top:calc(100% + 14px);right:-8px;z-index:60;width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid var(--gris-borde);border-radius:60px;padding:5px;box-shadow:0 18px 40px rgba(17,17,17,.12)}
.hsearch-form{display:flex;align-items:center;gap:8px}
.hsearch-form input[type="search"]{flex:1;min-width:0;height:40px;border:none;background:transparent;padding:0 0 0 16px;font-family:var(--sans);font-size:15px;color:var(--negro)}
.hsearch-form input[type="search"]:focus{outline:none}
.hsearch-form input[type="search"]::placeholder{color:var(--gris-texto)}
.hsearch-form button{flex:none;appearance:none;border:none;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--azul-boton);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.hsearch-form button:hover{background:var(--azul-boton-hover)}
.hsearch-form button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.6}

/* Menú móvil (details) */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:11px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:24px;height:24px;fill:none;stroke:var(--negro);stroke-width:1.8;stroke-linecap:round}
.mnav-panel{position:absolute;top:calc(100% + 14px);left:-8px;z-index:60;min-width:220px;background:#fff;border:1px solid var(--gris-borde);border-radius:16px;padding:10px;box-shadow:0 18px 40px rgba(17,17,17,.12);display:flex;flex-direction:column}
.mnav-panel ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.mnav-panel a{display:block;padding:11px 16px;border-radius:10px;font-size:15px;font-weight:500;color:var(--negro)}
.mnav-panel a:hover{background:var(--azul-suave)}

/* ============ HERO A SANGRE COMPLETA (slider) ============ */
.hero{padding:0;overflow:hidden;position:relative}
.hero input{position:absolute;opacity:0;pointer-events:none}
.hero-track{display:flex;width:300%;transition:transform .6s ease}
.hero-slide{width:calc(100%/3);position:relative;min-height:min(82vh,720px);display:flex;align-items:center;justify-content:center;padding:clamp(4.8rem,8vw,10rem) 0}
.hero-slide--beige{background:var(--beige)}
.hero-slide--azul{background:var(--azul-suave)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,28,.68) 0%,rgba(8,18,28,.45) 55%,rgba(8,18,28,.12) 100%)}
.hero-copy{position:relative;z-index:2;text-align:left;color:#fff;width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,50px)}
.hero-copy .kicker{color:#fff;margin-bottom:22px}
.hero-copy h1,.hero-copy .h1{font-family:var(--display);font-weight:600;font-size:clamp(5rem,8vw,7rem);line-height:1.2;margin-bottom:26px;max-width:13ch}
.hero-copy p.sub{font-size:16px;color:rgba(255,255,255,.9);margin:0 0 34px;max-width:46ch}
.hero-copy h1.h1--claims{font-size:clamp(3.4rem,5vw,5.2rem);line-height:1.18;max-width:20ch}

.hero-copy .btn{margin-right:10px;margin-top:6px}
#hs1:checked ~ .hero-track{transform:translateX(0)}
#hs2:checked ~ .hero-track{transform:translateX(-33.3333%)}
#hs3:checked ~ .hero-track{transform:translateX(-66.6666%)}
/* controles: contador + barra + flechas */
.hero-ui{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:14px;color:#fff;width:min(420px,86%)}
.hero-count{font-size:12px;font-weight:500;letter-spacing:.08em;min-width:48px}
.hero-count span{display:none}
#hs1:checked ~ .hero-ui .hc1{display:inline}
#hs2:checked ~ .hero-ui .hc2{display:inline}
#hs3:checked ~ .hero-ui .hc3{display:inline}
.hero-progress{flex:1;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.hero-progress i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(.33333);transform-origin:left center;transition:transform .5s ease}
#hs2:checked ~ .hero-ui .hero-progress i{transform:scaleX(.66666)}
#hs3:checked ~ .hero-ui .hero-progress i{transform:scaleX(1)}
.hero-arrows{display:flex;gap:8px}
.hero-ui .circ-arrow{width:34px;height:34px;font-size:13px}
.hero-dots{display:flex;align-items:center;gap:8px}
.hero-dots label{width:7px;height:7px;border-radius:5px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s ease,background .3s ease}
#hs1:checked ~ .hero-ui .hd1,#hs2:checked ~ .hero-ui .hd2,#hs3:checked ~ .hero-ui .hd3{width:24px;background:#fff}
@keyframes heroprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-arrows label{display:none}
.hero-arrows .circ-arrow{border-color:rgba(255,255,255,.6);color:#fff}
#hs1:checked ~ .hero-ui .hero-arrows label.s1,
#hs2:checked ~ .hero-ui .hero-arrows label.s2,
#hs3:checked ~ .hero-ui .hero-arrows label.s3{display:inline-flex}

/* ============ PESTAÑAS + CARRUSEL DE TARJETAS ============ */
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tab-labels{display:flex;gap:10px;flex-wrap:wrap}
.tab-labels label{display:inline-flex;align-items:center;height:42px;border:none;border-radius:60px;padding:0 20px;font-size:15px;font-weight:500;color:var(--gris-texto);cursor:pointer;transition:background .2s,color .2s}
.tab-labels label:hover{color:var(--negro);background:var(--beige-hover)}
.carousel-ctrl{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px}
.car-prog{flex:0 1 300px;height:2px;background:var(--gris-borde);border-radius:2px;overflow:hidden}
.car-prog i{display:block;height:100%;width:100%;background:var(--negro);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.carousel-ctrl .circ-arrow{border-color:var(--gris-borde);color:var(--negro)}
.carousel-ctrl .circ-arrow:hover{border-color:var(--negro)}
.tab-panel{display:none}
#tab-dest:checked ~ .tabs-body .panel-dest,#tab-most:checked ~ .tabs-body .panel-most{display:flex}
#tab-dest:checked ~ .sec-head .tab-labels label[for="tab-dest"],#tab-most:checked ~ .sec-head .tab-labels label[for="tab-most"]{background:var(--gris-panel);color:var(--negro)}
.tabs-body .tab-panel{overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;padding-bottom:8px;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);scroll-padding-inline:calc(50vw - 50%)}
.tabs-body .tab-panel::-webkit-scrollbar{display:none}
.tabs-body .tab-panel .card{flex:0 0 clamp(240px,24vw,300px);scroll-snap-align:start}

/* ============ TARJETAS DE NECESIDAD (foto de fondo) ============ */
.needs{background:var(--beige)}
.need-card{position:relative;overflow:hidden;background:var(--negro);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:380px;color:#fff;transition:transform .18s ease}
.need-card:hover{transform:translateY(-4px)}
.need-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.need-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(8,18,28,.18) 0%,rgba(8,18,28,.34) 45%,rgba(8,18,28,.92) 100%)}
.need-card>*:not(img){position:relative;z-index:2}
.need-card h3{font-size:27px;color:#fff;text-shadow:0 1px 14px rgba(8,18,28,.55)}
.need-card .n{order:-1;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.75)}
.need-card p{font-size:15px;color:rgba(255,255,255,.94);flex-grow:0;text-shadow:0 1px 10px rgba(8,18,28,.5)}
.need-card .btn{align-self:flex-start}

/* ============ MOSAICO DE FAMILIAS (tiles simples) ============ */
.fam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fam-tile{background:var(--gris-panel);border-radius:20px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;transition:transform .18s ease}
.fam-tile:hover{transform:translateY(-4px)}
.fam-tile:nth-child(2){background:var(--azul-suave)}
.fam-tile:nth-child(4){background:var(--beige)}
.fam-tile:nth-child(6){background:var(--azul-suave)}
.fam-tile img{max-height:170px;object-fit:contain;mix-blend-mode:multiply;align-self:center;margin:8px 0 18px}
.fam-tile h3{font-size:30px}
.fam-tile span{font-size:13px;color:var(--gris-texto)}
/* tiles grandes con foto de fondo */
.fam-tile--photo{position:relative;overflow:hidden;color:#fff;justify-content:flex-end}
.fam-tile--photo>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;mix-blend-mode:normal;margin:0;z-index:0}
.fam-tile--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(8,18,28,.05) 35%,rgba(8,18,28,.75) 100%)}
.fam-tile--photo>div{position:relative;z-index:2}
.fam-tile--photo h3{color:#fff}
.fam-tile--photo span{color:rgba(255,255,255,.94)}

/* ============ FAMILIAS BENTO (home aprobada) ============ */
.families-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.family-card{position:relative;isolation:isolate;min-height:330px;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:30px;background:var(--gris-panel);transition:transform .3s ease,box-shadow .3s ease}
.family-card h3{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(3rem,4vw,5.5rem);line-height:1.05}
.family-card .family-count{font-size:14px;font-weight:500;color:var(--gris-texto)}
.family-card .family-arrow{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--negro);font-size:18px}
.family-card--photo{color:#fff;justify-content:flex-end;min-height:450px}
.family-card--photo .family-count{color:rgba(255,255,255,.85)}
.family-photo,.family-shade{position:absolute;inset:0;z-index:-2}
.family-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.family-shade{z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.02) 30%,rgba(17,17,17,.78) 100%)}
.family-card--photo .family-arrow{position:absolute;right:24px;top:24px}
.family-card--facial{grid-column:span 7}
.family-card--complements{grid-column:span 5;min-height:450px}
.family-card--complements .family-number{margin:auto 0;font-family:var(--display);font-weight:600;font-size:clamp(8rem,12vw,15rem);line-height:.8;color:var(--azul-boton);letter-spacing:-.08em}
.family-card--third{grid-column:span 4}
.family-card--health{grid-column:span 12;min-height:260px}
.family-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,17,17,.12)}
.family-card:hover .family-photo img{transform:scale(1.035)}

/* ============ ANTES / DESPUÉS CON ARRASTRE ============ */
.ba{background:var(--azul-suave)}
.ba-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ba-wrap{--pos:50%;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:580px}
.ba-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:2}
.ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--negro);display:flex;align-items:center;justify-content:center;gap:3px;font-size:14px;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.28);pointer-events:none;z-index:3}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none;z-index:4}
.ba-tag{position:absolute;bottom:16px;font-size:12px;font-weight:500;background:rgba(255,255,255,.92);color:var(--negro);border-radius:60px;padding:6px 14px;pointer-events:none;z-index:2}
.ba-tag--antes{left:16px}
.ba-tag--despues{right:16px}
.ba-note{font-size:14px;color:var(--gris-texto);margin-top:12px}
.ba-copy h2{font-size:clamp(3.36rem,4vw,4.8rem);margin-bottom:6px}
.ba-thumbs{display:flex;gap:14px;margin:26px 0 24px;flex-wrap:wrap}
.ba-thumb{appearance:none;font:inherit;width:76px;height:76px;border-radius:50%;background:#fff;border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;padding:13px;cursor:pointer;transition:border-color .2s,transform .18s ease}
.ba-thumb:hover{transform:translateY(-3px)}
.ba-thumb img{mix-blend-mode:multiply;max-height:100%;object-fit:contain}
.ba-thumb.is-active{border-color:var(--azul-marca)}
.ba-checks{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#333;margin:16px 0 26px}
.ba-checks li::before{content:"✓";margin-right:10px;font-weight:700;color:var(--azul-marca)}
.ba-wrap:focus-within{outline:2px solid var(--azul-boton);outline-offset:4px}

/* ============ RUTINA PASO A PASO ============ */
.routine-in{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.routine-media{position:sticky;top:110px}
.routine-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.routine-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;position:relative;margin-bottom:48px}
.step .num{font-family:var(--display);font-size:44px;display:block;margin-bottom:10px}
.step .stage{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;margin-bottom:14px;display:block;color:var(--gris-texto)}
.routine-total{background:var(--beige);border-radius:20px;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.routine-total strong{font-family:var(--display);font-weight:600;font-size:30px}
.routine-steps .card-img{aspect-ratio:1/1;flex:0 0 auto;padding:14px;margin-bottom:10px}
.routine-steps .step{justify-content:flex-start}
.routine-steps .card-img img{max-height:78%;max-width:78%}

/* ============ CINTA MARQUESINA ============ */
.marquee{background:var(--azul-suave);padding:14px 0;overflow:hidden}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 20s linear infinite}
.marquee-group{display:flex;align-items:center;gap:36px;padding-right:36px}
.marquee-item{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:24px;white-space:nowrap}
.marquee-item .btn--sm{font-size:14px}
.marquee-group>span.dot{font-size:18px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ============ CIFRAS ============ */
.numbers{background:var(--beige)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.numbers-grid>div{background:#fff;border-radius:20px;padding:44px 20px}
.numbers-grid strong{font-family:var(--display);font-weight:600;font-size:clamp(5rem,6vw,7rem);display:block;line-height:1}
.numbers-grid span{font-size:14px;color:var(--gris-texto);display:block;margin-top:14px}

/* ============ COLECCIONES (franja oscura) ============ */
.collections{background:var(--azul-profundo);color:#fff}
.collections input{position:absolute;opacity:0;pointer-events:none}
.collections .kicker{color:var(--azul-claro)}
.coll-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.coll-titles{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.coll-titles label{font-family:var(--display);font-size:clamp(3.36rem,5vw,5.6rem);line-height:1.15;color:rgba(255,255,255,.6);cursor:pointer;transition:color .2s;border-bottom:1px solid transparent;padding-bottom:6px}
.coll-titles label:hover{color:rgba(255,255,255,.85)}
#coll1:checked ~ .coll-in .coll-titles label[for="coll1"],
#coll2:checked ~ .coll-in .coll-titles label[for="coll2"],
#coll3:checked ~ .coll-in .coll-titles label[for="coll3"]{color:#fff;border-bottom-color:#fff}
.coll-card{display:none;background:#fff;color:var(--negro);border-radius:24px;padding:30px;flex-direction:column;gap:16px}
#coll1:checked ~ .coll-in .coll-card--1,
#coll2:checked ~ .coll-in .coll-card--2,
#coll3:checked ~ .coll-in .coll-card--3{display:flex}
.coll-card .card-img{margin-bottom:0}
.coll-card .checks{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#333}
.coll-card .checks li::before{content:"✓";margin-right:10px;font-weight:700}
.coll-card .btn{align-self:flex-start}

/* ============ ACTIVOS ============ */
.actives{background:var(--gris-panel)}
.actives .active-card{background:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:8px;height:100%}
.active-card .btn{align-self:flex-start;margin-top:auto}
.active-card .pct{font-family:var(--display);font-size:38px;line-height:1}
.active-card .card-img{background:var(--gris-panel);aspect-ratio:1/.85;margin:14px 0 6px}
.actives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ============ COMPRA POR NECESIDAD ============ */
.shopneed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.shopneed{border-radius:24px;padding:40px 32px;min-height:520px;display:flex;flex-direction:column}
.shopneed:nth-child(1){background:var(--beige)}
.shopneed:nth-child(2){background:var(--azul-suave)}
.shopneed:nth-child(3){background:var(--gris-panel)}
.shopneed img{width:100%;height:280px;object-fit:cover;border-radius:16px;align-self:stretch;margin:22px 0;flex-grow:0}
.shopneed h3{font-size:34px}
.shopneed p{font-size:15px;color:var(--gris-texto);margin-top:8px;flex-grow:1}
.shopneed .btn{align-self:flex-start}

/* ============ ICONOS DE LÍNEA EN CÍRCULO AZUL SUAVE ============ */
/* El trazo #4A90D9 sobre el circulo #E8F1FA daba 2,9:1: por debajo del 3:1
   que piden los graficos con significado (direccion, telefono, horario). */
.icircle{display:inline-flex;align-items:center;justify-content:center;width:90px;height:90px;border-radius:50%;background:var(--azul-suave);color:var(--azul-acento);flex:none}
.icircle svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ============ TESTIMONIOS ============ */
.testimonial{background:var(--azul-suave)}
.testi-stars{font-size:26px;letter-spacing:6px;color:var(--negro);margin-bottom:18px}
.testi-star-soft{opacity:.28}
.testi-quote{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,3vw,3.2rem);line-height:1.35;margin:0 0 18px}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.testi-dots button{width:8px;height:8px;border-radius:5px;border:none;background:rgba(17,17,17,.25);cursor:pointer;padding:0;transition:width .3s,background .3s}
.testi-dots button.is-on{width:24px;background:var(--azul-boton)}
.testi-meta{font-size:14px;color:var(--gris-texto)}

/* ============ CINTA DE CONFIANZA ============ */
.trust{background:#fff;border-top:1px solid var(--gris-borde);border-bottom:1px solid var(--gris-borde);padding:30px 0}
.trust-in{display:flex;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:14px}
.trust .icircle{width:56px;height:56px}
.trust .icircle svg{width:24px;height:24px}
.trust-item span{font-size:15px;font-weight:500}

/* ============ TRES NUMERADOS ============ */
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.three-grid .icircle{width:56px;height:56px;margin-bottom:16px}
.three-grid .icircle svg{width:22px;height:22px}
.three-grid h3{font-size:20px;margin-bottom:10px}
.three-grid p{font-size:14px;line-height:1.65;color:var(--gris-texto)}

/* ============ CONSEJOS (blog) ============ */
.journal{background:var(--beige)}
.journal-card{background:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.journal-card .jimg{position:relative;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:22px}
.journal-card .jimg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journal-card:nth-child(1) .jimg{background:var(--azul-suave)}
.journal-card:nth-child(2) .jimg{background:var(--azul-profundo)}
.journal-card:nth-child(3) .jimg{background:var(--gris-panel)}
.journal-card .jimg span{position:relative;z-index:2;font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;background:#fff;border-radius:60px;padding:6px 15px}
.journal-card .jbody{padding:24px 26px 30px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.journal-card h3{font-size:26px}
.journal-card p{font-size:14px;color:var(--gris-texto);flex-grow:1}
.journal-card .more{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* ============ NEWSLETTER ============ */
.newsletter{background:var(--azul-suave);text-align:center}
.newsletter h2{font-size:clamp(3.36rem,4vw,4.8rem);margin-bottom:12px}
.newsletter p{color:var(--gris-texto);margin-bottom:30px}
.news-form{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1 1 260px;height:50px;border:1px solid #A9BFD6;background:#fff;border-radius:60px;padding:0 24px;font-family:var(--sans);font-size:15px}
.news-form input::placeholder{color:var(--gris-texto)}

/* ============ PIE OSCURO, DOS NIVELES ============ */
footer{background:#232A36;color:#fff;padding:clamp(4.8rem,8vw,10rem) 0 36px;font-size:14px}
.foot-top{display:grid;grid-template-columns:45% 1fr 1fr 1fr;gap:44px;margin-bottom:56px}
.foot-brand .foot-logo-pill{display:inline-flex;background:#fff;border-radius:16px;padding:8px 16px;margin-bottom:26px}
.foot-brand .foot-logo-pill img{width:105px}
.foot-claim{font-family:var(--display);font-weight:600;font-size:clamp(3.36rem,3.4vw,4.8rem);line-height:1.2;color:#fff}
.foot-top h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--azul-claro);margin-bottom:18px}
.foot-top li{margin-bottom:10px}
.foot-top a,.foot-top p{color:rgba(255,255,255,.7)}
.foot-top a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:0 0 44px}
.foot-insta{margin-bottom:52px}
.foot-insta h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--azul-claro);margin-bottom:22px}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.insta-grid a{background:var(--gris-panel);border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:16px;transition:transform .18s ease;overflow:hidden}
.insta-grid a:hover{transform:translateY(-4px)}
.insta-grid img{mix-blend-mode:multiply;max-height:100%;object-fit:contain}
/* variante para fotos (fallback estático del tema, sin recortes PNG) */
.insta-grid--photos a{padding:0}
.insta-grid--photos img{mix-blend-mode:normal;width:100%;height:100%;object-fit:cover}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;color:rgba(255,255,255,.65);font-size:13px}
.foot-social{display:flex;gap:10px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4)}
.foot-social a:hover{border-color:#fff}
.foot-social svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.6}
.foot-nav{display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap;padding-bottom:38px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-nav a{color:rgba(255,255,255,.85);font-size:15px;font-weight:500}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot-nav .foot-logo-pill{margin:0 14px}
.foot-legal{display:flex;gap:8px 20px;flex-wrap:wrap}
.foot-legal ul{display:flex;gap:8px 20px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot-legal a{color:rgba(255,255,255,.65)}
.foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============ FOCO VISIBLE (auditoría) ============ */
/* La regla que había aquí (a,button,summary,[tabindex]) repetía el foco con
   más especificidad (0,2,0) y ganaba a la base de :focus-visible (0,1,0) y al
   override del pie (footer :focus-visible, 0,1,1). Resultado: el aro seguía a
   2px, sin halo, y con el border-radius:4px que convertía las píldoras de
   60px en rectángulos al enfocarlas. Se elimina: la base ya cubre a, button,
   summary y [tabindex], y así el override del pie vuelve a aplicarse. */
input[type="radio"]:focus-visible + label{outline:3px solid var(--azul-acento);outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ============================================================
   PÁGINA DE CATEGORÍA (categoria-151)
   ============================================================ */
.cat-hero{position:relative;padding:0;overflow:hidden;min-height:clamp(280px,38vh,420px);display:flex;align-items:flex-end}
.cat-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.cat-hero .hero-overlay{background:linear-gradient(90deg,rgba(8,18,28,.66) 0%,rgba(8,18,28,.42) 55%,rgba(8,18,28,.12) 100%)}
.cat-hero-copy{position:relative;z-index:2;color:#fff;width:100%;max-width:1440px;margin:0 auto;padding:clamp(3.4rem,6vw,6rem) clamp(20px,4vw,50px)}
.cat-hero-copy h1{font-size:clamp(4.4rem,7vw,6.4rem);margin-bottom:10px}
.cat-hero-copy .cat-count{font-size:15px;color:rgba(255,255,255,.9)}
.cat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.filters{position:sticky;top:96px}
.fgroup{border-bottom:1px solid var(--gris-borde);padding:4px 0 18px;margin-bottom:14px}
.fgroup summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:15px;font-weight:500;padding:10px 0}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--negro);border-bottom:1.6px solid var(--negro);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.fgroup[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.fcheck{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.fcheck label{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--negro);cursor:pointer}
.fcheck input{width:18px;height:18px;accent-color:var(--azul-boton)}
.fcat{padding-top:8px}
.fcat li{margin-bottom:2px}
.fcat a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;padding:8px 10px;margin:0 -10px;border-radius:10px}
.fcat a:hover{background:var(--azul-suave)}
.fcat a span{font-size:13px;color:var(--gris-texto)}
.ps-track{position:relative;height:3px;background:var(--gris-borde);border-radius:3px;margin:26px 9px 16px}
.ps-fill{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--azul-boton);border-radius:3px}
.ps-dot{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--azul-boton);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(17,17,17,.18)}
.ps-dot--a{left:0}
.ps-dot--b{left:100%}
.price-vals{display:flex;justify-content:space-between;font-size:14px;color:var(--gris-texto)}
.grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.grid-toolbar .n-res{font-size:14px;color:var(--gris-texto)}
.grid-toolbar .sort{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;border:1px solid var(--gris-borde);border-radius:60px;padding:10px 18px;background:#fff;cursor:pointer;font-family:var(--sans)}
.grid-toolbar .sort:hover{border-color:var(--negro)}
.grid-toolbar .sort::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--negro);border-bottom:1.5px solid var(--negro);transform:rotate(45deg);margin-top:-3px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}
.cat-about .wrap{max-width:820px;text-align:center}
.cat-about h2{font-size:clamp(3rem,3.6vw,4.2rem);margin-bottom:18px}
.cat-about p{font-size:15px;color:var(--gris-texto);line-height:1.75}

/* ============================================================
   MIGAS DE PAN
   Base gris (ficha de producto y páginas interiores);
   variante blanca dentro del hero de categoría.
   ============================================================ */
.crumbs{font-size:13px;color:var(--gris-texto);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-bottom:18px}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--negro)}
.crumbs .sep{color:var(--gris-borde)}
.crumbs [aria-current]{color:var(--negro);font-weight:500}
.cat-hero-copy .crumbs{gap:10px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.85);margin-bottom:16px}
.cat-hero-copy .crumbs a{color:rgba(255,255,255,.85)}
.cat-hero-copy .crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cat-hero-copy .crumbs [aria-current]{color:#fff;font-weight:500}

/* ============================================================
   FICHA DE PRODUCTO (producto-151)
   ============================================================ */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,70px);align-items:start}
.pdp-gallery{display:grid;grid-template-columns:86px 1fr;gap:16px;position:sticky;top:104px}
.pdp-thumbs{display:flex;flex-direction:column;gap:12px}
.pdp-thumb{appearance:none;font:inherit;background:#F0F0F0;border:2px solid transparent;border-radius:14px;padding:10px;cursor:pointer;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .18s ease}
.pdp-thumb:hover{transform:translateY(-2px)}
.pdp-thumb.is-active{border-color:var(--azul-marca)}
.pdp-thumb img{mix-blend-mode:multiply;max-height:100%;object-fit:contain}
.pdp-main{background:#F0F0F0;border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,60px)}
.pdp-main img{mix-blend-mode:multiply;max-height:100%;object-fit:contain}
.pdp-gallery-note{grid-column:1/-1;font-size:12px;color:var(--gris-texto)}
.pdp-buy .card-meta{margin-bottom:8px}
.pdp-buy h1{font-size:clamp(2.9rem,3.2vw,4.2rem);line-height:1.18;margin-bottom:14px;max-width:22ch}
.pdp-price{font-family:var(--display);font-weight:600;font-size:28px;margin-bottom:6px}
.pdp-tax{font-size:13px;color:var(--gris-texto);margin-bottom:20px}
.pdp-desc{font-size:15px;color:#333;max-width:52ch;margin-bottom:18px}
.pdp-checks{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#333;margin-bottom:26px}
.pdp-checks li::before{content:"✓";margin-right:10px;font-weight:700;color:var(--azul-marca)}
.pdp-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.qty{display:inline-flex;align-items:center;height:50px;border:1px solid var(--gris-borde);border-radius:60px;overflow:hidden}
.qty button{appearance:none;border:none;background:transparent;width:46px;height:100%;font-size:18px;font-family:var(--sans);color:var(--negro);cursor:pointer;transition:background .2s}
.qty button:hover{background:var(--gris-panel)}
.qty input{width:44px;border:none;text-align:center;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--negro);background:transparent;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-proto-note{font-size:12px;color:var(--gris-texto);margin-bottom:26px}
.pdp-perks{display:grid;gap:14px;padding:22px 0;border-top:1px solid var(--gris-borde);border-bottom:1px solid var(--gris-borde);margin-bottom:26px}
.pdp-perk{display:flex;align-items:center;gap:14px}
.pdp-perk .icircle{width:48px;height:48px}
.pdp-perk .icircle svg{width:21px;height:21px}
.pdp-perk strong{display:block;font-size:14px;font-weight:500}
.pdp-perk span{display:block;font-size:13px;color:var(--gris-texto)}
.pdp-acc details{border-bottom:1px solid var(--gris-borde)}
.pdp-acc details:first-child{border-top:1px solid var(--gris-borde)}
.pdp-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;font-family:var(--sans);font-size:15px;font-weight:500}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc summary .acc-ico{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--gris-borde);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:400;color:var(--negro);transition:transform .25s ease,background .2s}
.pdp-acc details[open] summary .acc-ico{transform:rotate(45deg);background:var(--azul-suave);border-color:var(--azul-suave);color:var(--azul-boton)}
.pdp-acc .acc-body{padding:0 2px 20px;font-size:14px;color:#333;max-width:60ch}
.pdp-acc .acc-body p{margin-bottom:10px}
.pdp-acc .acc-body p:last-child{margin-bottom:0}
.pdp-acc .acc-body ul{list-style:none}
.pdp-acc .acc-body li{padding-left:18px;position:relative;margin-bottom:6px}
.pdp-acc .acc-body li::before{content:"·";position:absolute;left:4px;font-weight:700;color:var(--azul-marca)}
.acc-note{font-size:13px;color:var(--gris-texto)}
/* relacionados: fila con fondo #F0F0F0 como el resto de tarjetas de la ficha */
.related .card-img{background:#F0F0F0}

/* ============================================================
   SOBRE NOSOTROS (sobre-151)
   ============================================================ */
.photo{width:100%;border-radius:20px;object-fit:cover;background:var(--gris-panel)}
/* La foto real de la fachada es vertical (3:4). Se encuadra a 4/5 con un
   object-position bajo para que el escaparate y el rótulo +151 manden sobre
   el cielo, y con max-height para que el hero no se dispare en pantallas
   anchas. */
.photo--hero{aspect-ratio:4/5;height:auto;max-height:min(78vh,760px);object-position:center 55%}
.photo--team{aspect-ratio:3/2;max-width:900px;margin:0;display:block}
/* Retrato vertical del equipo (foto real del interior de Casp 151).
   height:auto es obligatorio: sin él manda el atributo height HTML de 1448 px
   y aspect-ratio se ignora (la foto salía de 420x1448). */
.photo--portrait{aspect-ratio:3/4;height:auto;margin:0;display:block}
.team-figure{margin:0;max-width:460px}
.about-hero{background:var(--beige);padding:clamp(4rem,6vw,7.2rem) 0}
.about-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}

/* --- Recurso gráfico sobre la foto del hero (manuscrito + pastilla) ---
   El manuscrito imita el rótulo a mano que usa Santiago sobre la foto de la
   farmacia: Caveat en blanco, ligeramente girado, arriba a la derecha. La
   sombra suave es obligatoria: la fachada es piedra clara y sin ella el
   blanco no se lee. Ambos elementos son decorativos (aria-hidden) y no
   interceptan el clic. */
.about-hero-figure{position:relative;isolation:isolate}
.hero-script{
  position:absolute;top:clamp(10px,2.6vw,26px);right:clamp(14px,3vw,30px);z-index:2;
  font-family:'Caveat',var(--display);font-weight:600;line-height:1;
  font-size:clamp(3rem,4.4vw,5.2rem);color:var(--blanco);
  transform:rotate(-7deg);transform-origin:100% 0;
  text-shadow:0 2px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);
  pointer-events:none;user-select:none
}
.hero-pill{
  position:absolute;bottom:clamp(12px,2.4vw,22px);right:clamp(12px,2.4vw,22px);z-index:2;
  max-width:calc(100% - 24px);padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--negro);
  box-shadow:0 4px 18px rgba(0,0,0,.2);pointer-events:none
}
/* Raleway a 62px con tracking normal se abre demasiado; -.02em cierra la
   palabra sin llegar al suelo de -.04em. */
.about-hero h1{font-size:clamp(3.8rem,5.4vw,6.2rem);letter-spacing:-.02em;margin-bottom:20px;max-width:16ch}
/* Los dos parrafos pesaban igual (16px/#333) y el mensaje no tenia entrada.
   El primero pasa a ser la entradilla; el segundo, apoyo. */
.about-hero p.sub{font-size:16px;color:#333;margin:0 0 16px;max-width:52ch}
.about-hero p.sub--lead{font-size:18px;line-height:1.6;color:#262626}
.about-hero p.sub:last-of-type{margin-bottom:28px}
/* margin-right/margin-top por boton dejaba 6px entre pildoras al envolver.
   Una fila flex con gap real las separa igual en horizontal y en vertical. */
.about-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.story-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
.story-in h2{font-size:clamp(3.36rem,4vw,4.8rem);letter-spacing:-.02em}
.story-copy p{margin-bottom:16px;color:#333;max-width:60ch}
.story-copy p:last-child{margin-bottom:0}
.formula{background:var(--azul-suave)}
.formula-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.formula h2{font-size:clamp(3.36rem,4vw,4.8rem);letter-spacing:-.02em;margin-bottom:16px}
.formula p{color:#333;margin-bottom:14px;max-width:58ch}
/* Antes: ::before con el glifo Unicode de la marca de verificacion. Al
   envolver, la segunda linea volvia al margen izquierdo y se perdia la
   sangria colgante; ademas el glifo no comparte trazo con el resto de iconos
   de la pagina. Ahora es un SVG del mismo sistema (stroke 2, linecap round)
   y la fila es flex. */
.formula-checks{display:flex;flex-direction:column;gap:12px;font-size:15px;color:#333;margin-top:20px}
.formula-checks li{display:flex;align-items:flex-start;gap:10px}
.formula-checks svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:var(--azul-acento);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 24px era el unico radio de tarjeta fuera de la escala del tema (20px). */
.formula-card{background:#fff;border-radius:20px;padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.formula-card h3{font-size:22px}
.formula-card p{font-size:14px;color:var(--gris-texto);margin:0}
.formula-card .dato{display:flex;align-items:flex-start;gap:14px}
.formula-card .dato .icircle{width:48px;height:48px}
.formula-card .dato .icircle svg{width:20px;height:20px}
/* El margin-top:-24px compensaba a mano el margen del .sec-head. Se sustituye
   por un modificador explicito del encabezado (.sec-head--tight). */
.team-intro{font-size:15px;color:#333;max-width:62ch;margin:0 0 32px}
.sec-head--tight{margin-bottom:20px}
/* Begona y la fachada son el argumento de la pagina. Con la biografia arriba
   y el retrato debajo, la mitad derecha de la seccion quedaba vacia y la foto
   caia muy abajo. Se emparejan en la misma reticula 1.05/.95 que ya usan el
   hero y la seccion de formula. */
.team-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:start}
.team-layout .team-figure{justify-self:end;width:100%}
.team-bio{max-width:62ch;margin:0}
.team-bio h3{font-size:22px;margin-bottom:10px}
.team-bio p{font-size:15px;color:#333;margin-bottom:12px}
.team-bio p:last-child{margin-bottom:0}
.team-note{font-size:14px;color:var(--gris-texto);margin-top:12px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,56px);align-items:stretch}
.contact-form label{display:block;font-size:14px;margin-bottom:14px;color:var(--gris-texto)}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--gris-borde);border-radius:8px;font:inherit;background:#fff}
.contact-list{display:flex;flex-direction:column;gap:22px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-item .icircle{width:56px;height:56px}
.contact-item .icircle svg{width:24px;height:24px}
.contact-item strong{display:block;font-weight:600;font-family:var(--sans);font-size:15px;margin-bottom:2px}
/* El telefono y la ficha de Google se pintaban del mismo gris que el texto
   corrido y sin subrayado: no se leian como enlaces. */
.contact-item p{font-size:15px;color:var(--gris-texto)}
.contact-item a{font-size:15px;color:var(--negro);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(17,17,17,.4)}
.contact-item a:hover,.contact-item a:active{color:var(--azul-boton);text-decoration-color:currentColor}
/* El telefono es una via de contacto principal en una farmacia: gana cuerpo y
   pasa de 19px de alto a 33px, por encima del minimo tactil de 24px. */
.contact-item a[href^="tel:"]{display:inline-block;padding:3px 0;font-size:17px;font-weight:500}
.contact-titular{font-size:13px;color:var(--gris-texto);background:var(--gris-panel);border-radius:12px;padding:12px 16px;margin-top:6px}
.map-frame{position:relative;border-radius:20px;overflow:hidden;background:var(--gris-panel);min-height:380px}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-note{font-size:13px;color:var(--gris-texto);margin-top:10px}
.map-note a{display:inline-block;padding:3px 0;color:var(--negro);text-decoration:underline;text-underline-offset:2px}
.map-note a:hover,.map-note a:active{color:var(--azul-boton)}
.cta-shop{background:var(--beige);text-align:center}
.cta-shop h2{font-size:clamp(3.36rem,4vw,4.8rem);letter-spacing:-.02em;margin-bottom:12px}
.cta-shop p{color:var(--gris-texto);margin-bottom:30px;max-width:52ch;margin-left:auto;margin-right:auto}

/* ============================================================
   RESULTADOS DE BÚSQUEDA (search.php — búsquedas generales)
   ============================================================ */
.sresults{display:flex;flex-direction:column;gap:22px;max-width:840px}
ul.products+.sresults{margin-top:44px}
.sresult{border:1px solid var(--gris-borde);border-radius:20px;padding:24px 26px}
.sresult h2{font-size:22px;margin:2px 0 8px}
.sresult h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.sresult p{font-size:14px;color:var(--gris-texto)}
.sresults--empty{border:none;gap:20px;align-items:flex-start}
.sresults--empty p{font-size:15px;color:var(--gris-texto);max-width:52ch}
.snav{margin-top:44px}
.snav .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.snav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--gris-borde);border-radius:60px;font-size:14px;font-weight:500;color:var(--negro);transition:border-color .2s,background .2s}
.snav a.page-numbers:hover{border-color:var(--negro)}
.snav .page-numbers.current{background:var(--negro);border-color:var(--negro);color:#fff}
/* Paginacion de WooCommerce. El aspecto pildora lo pone marina151-woo.css;
   aqui se retiran los recuadros de woocommerce.css, que usa el selector
   '.woocommerce nav.woocommerce-pagination ul li' — hay que igualar o
   superar esa especificidad o el borde vuelve. */
.woocommerce-pagination{margin:38px 0 4px;text-align:center}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul.page-numbers{list-style:none;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;border:0;white-space:normal}
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul.page-numbers li{border:0;margin:0;padding:0;overflow:visible;background:none;float:none}
.woocommerce-pagination .page-numbers.dots{border-color:transparent;background:none;min-width:26px;padding:0}


/* ============================================================
   PÁGINAS LEGALES (legal-*)
   ============================================================ */
.draft-band{background:#FFF4D6;color:#6B4E00;text-align:center;font-size:13px;font-weight:600;padding:10px 16px;letter-spacing:.02em;border-bottom:1px solid #EAD9A6}
.legal-hero{background:var(--beige);padding:clamp(3.6rem,5vw,6rem) 0}
.legal-hero h1{font-size:clamp(3.4rem,4.8vw,5.6rem);margin-bottom:14px;max-width:20ch}
.legal-hero p.sub{font-size:16px;color:#333;max-width:60ch}
.legal-meta{font-size:13px;color:var(--gris-texto);margin-top:14px}
.legal-body{max-width:840px}
.legal-body h2{font-size:clamp(2.2rem,2.4vw,2.8rem);margin:36px 0 12px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-family:var(--sans);font-size:16px;font-weight:600;margin:22px 0 8px}
.legal-body p{margin-bottom:13px;color:#333;max-width:72ch}
.legal-body ul{list-style:disc;padding-left:22px;margin-bottom:14px;color:#333}
.legal-body ul li{margin-bottom:6px;max-width:68ch}
.legal-body a{text-decoration:underline;text-underline-offset:3px;color:var(--azul-boton)}
.tbd{display:inline-block;background:#FFF4D6;border:1px dashed #C9A227;border-radius:6px;padding:0 7px;font-weight:600;color:#6B4E00;font-size:.95em}
.legal-card{background:var(--gris-panel);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.legal-card p{margin-bottom:6px}
.legal-card p:last-child{margin-bottom:0}
.form-model{background:#fff;border:1.5px dashed #C6CDD4;border-radius:16px;padding:20px 22px;margin:14px 0;color:#333;font-size:14px}
.form-model p{margin-bottom:8px}
.form-model p:last-child{margin-bottom:0}
.table-wrap{overflow-x:auto;margin:14px 0 8px}
table.cookies{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
table.cookies th{text-align:left;font-family:var(--sans);font-weight:600;background:var(--azul-suave);padding:10px 12px;border:1px solid var(--gris-borde)}
table.cookies td{padding:10px 12px;border:1px solid var(--gris-borde);vertical-align:top;color:#333}

/* ============================================================
   BLOG (home.php índice /blog/ + single.php entrada)
   ============================================================ */
/* --- Índice: banda de cabecera propia + rejilla journal --- */
.blog-hero{background:var(--beige);padding:clamp(3.6rem,5vw,6rem) 0 0}
.blog-hero h1{font-size:clamp(3.36rem,4vw,4.8rem);margin-bottom:12px}
.blog-hero p.sub{font-size:16px;color:#333;max-width:56ch}
.journal--index{padding-top:clamp(2.4rem,3.5vw,3.6rem)}
.journal-card .jdate{font-size:13px;color:var(--gris-texto)}
.journal .snav .page-numbers{background:#fff}
.journal .snav .page-numbers.current{background:var(--negro)}

/* --- Entrada: banda superior con migas + kicker de fecha --- */
.post-hero{background:var(--beige);padding:clamp(3.2rem,4.5vw,5.2rem) 0}
.post-hero .crumbs{margin-bottom:24px}
.post-hero .kicker{color:var(--gris-texto);margin-bottom:14px}
.post-hero h1{font-size:clamp(3.4rem,4.8vw,5.6rem);max-width:24ch}

/* --- Entrada: foto destacada ancha + cuerpo a 720 px --- */
.post-figure{max-width:1040px;margin:0 auto}
.post-figure img{width:100%;height:auto;aspect-ratio:21/10;object-fit:cover;border-radius:20px}
.post-content{max-width:720px;margin:clamp(2.6rem,4vw,4rem) auto 0;font-size:18px;line-height:1.7;color:#333}
.post-content>*:first-child{margin-top:0}
.post-content p{margin-bottom:18px}
.post-content h2{font-size:clamp(2.4rem,2.8vw,3.2rem);color:var(--negro);margin:38px 0 14px}
.post-content h3{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--negro);margin:28px 0 10px}
.post-content ul,.post-content ol{margin:0 0 18px;padding-left:24px}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:8px}
.post-content li::marker{color:var(--azul-marca)}
.post-content a{color:var(--azul-boton);text-decoration:underline;text-underline-offset:3px}
.post-content blockquote{background:var(--azul-suave);border-left:3px solid var(--azul-marca);border-radius:0 16px 16px 0;padding:22px 26px;margin:28px 0;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.5}
.post-content blockquote p{margin-bottom:0}
.post-content blockquote p+p{margin-top:10px}
.post-content img{border-radius:16px;height:auto}
.post-content figure{margin:28px 0}
.post-content figcaption{font-size:13px;color:var(--gris-texto);margin-top:8px}
.post-content .page-links{margin-top:18px;font-size:15px}

/* --- Entrada: caja final de CTA (teléfono + tienda) --- */
.post-cta{max-width:720px;margin:clamp(3rem,4.5vw,4.4rem) auto 0;background:var(--azul-suave);border-radius:20px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.post-cta strong{display:block;font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:4px}
.post-cta p{font-size:15px;color:#333;margin:0;max-width:44ch}
.post-cta .tel{font-weight:600;color:var(--azul-boton);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.post-cta .btn{flex:none}

/* --- Entrada: «Más consejos» (2 journal-card) --- */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}

/* --- Blog responsive --- */
@media (max-width:768px){
  .related-grid{grid-template-columns:1fr}
  .post-content{font-size:17px}
  .post-figure img{aspect-ratio:16/10}
  .post-cta{padding:24px 22px}
  .post-cta .btn{width:100%;justify-content:space-between}
}

/* ============================================================
   RESPONSIVE (fusionado de todas las maquetas)
   ============================================================ */
@media (max-width:1280px){
  /* Menú de 9 ítems en UNA línea también en desktop justo (1025–1280 px) */
  .nav ul{gap:16px}
  .header-in{gap:22px}
}
@media (max-width:1180px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .fam-grid,.actives-grid{grid-template-columns:repeat(2,1fr)}
  .family-card--facial,.family-card--complements,.family-card--third{grid-column:span 6}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .routine-steps{grid-template-columns:repeat(2,1fr);gap:36px 28px}
  .nav{display:none}
  .mnav{display:block}
  .header-in{grid-template-columns:1fr auto 1fr}
  .logo{justify-self:center}
  .coll-in{grid-template-columns:1fr;gap:40px}
  .foot-top{grid-template-columns:1fr 1fr}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .cat-layout{grid-template-columns:220px minmax(0,1fr)}
  .pdp{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .about-hero-in,.story-in,.formula-in,.contact-grid,.team-layout{grid-template-columns:1fr}
  /* A una columna la foto vertical ocuparía todo el ancho y el hero se haría
     interminable: se limita el ancho de la figura, no la altura. */
  .about-hero-figure{max-width:520px}
}
@media (max-width:860px){
  .cat-layout{grid-template-columns:1fr}
  .filters{position:static}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  /* Los CTA del hero se apilan aquí: el padding inferior reserva la franja
     de .hero-ui (contador, progreso y flechas, en absolute a bottom:26px)
     para que el segundo botón no quede debajo de los controles. */
  .hero-slide{min-height:min(64vh,540px);padding:clamp(3.2rem,6vw,4.8rem) 0 9.5rem}
  .hero-copy h1,.hero-copy .h1{font-size:clamp(3.6rem,10vw,5rem);margin-bottom:18px}
  .hero-copy .btn{margin-top:10px}
  .hero-lead{font-size:14px;max-width:34ch}
  .grid-3,.three-grid{grid-template-columns:1fr}
  .related .grid-3{grid-template-columns:repeat(2,1fr);gap:16px}
  .shopneed-grid,.fam-grid,.actives-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .families-grid{grid-template-columns:1fr}
  .family-card--facial,.family-card--complements,.family-card--third,.family-card--health{grid-column:auto}
  .family-card--photo,.family-card--complements{min-height:380px}
  .family-card--health{min-height:200px;grid-template-columns:1fr}
  .shopneed{min-height:340px;padding:26px 20px}
  .fam-tile{min-height:240px;padding:22px}
  .active-card{padding:18px}
  .ba-in{grid-template-columns:1fr;gap:36px}
  .foot-top{grid-template-columns:1fr}
  .routine-in{grid-template-columns:1fr}
  .routine-media{position:static;order:-1}
  .routine-media img{aspect-ratio:16/10}
  .pdp-gallery{grid-template-columns:1fr}
  .pdp-thumbs{flex-direction:row;order:2}
  .pdp-thumb{width:76px}
  .photo--team{aspect-ratio:3/2;min-height:0}
  .team-figure{max-width:340px}
  .map-frame{min-height:300px}
}
@media (max-width:600px){
  /* En móvil el manuscrito se come el escaparate: se retira y se deja solo
     la pastilla de dirección, más pequeña y a todo el ancho útil. */
  .hero-script{display:none}
  .hero-pill{left:12px;right:12px;bottom:12px;max-width:none;font-size:12px;padding:8px 14px;text-align:center}
}
@media (max-width:360px){
  /* Header compacto para móviles estrechos (320–360 px): sin desbordes */
  .header-in{gap:10px;padding:12px 14px}
  .header-icons{gap:0}
  .header-icons a,.hsearch summary{min-width:38px;min-height:38px}
  .header-icons svg,.hsearch summary svg{width:19px;height:19px}
  .logo img{width:86px}
  .logo-text{font-size:17px}
  .mnav summary{padding:7px}
  .cart-n{margin-left:-6px}
}
@media (max-width:480px){
  .grid-4{grid-template-columns:repeat(2,1fr);gap:16px}
  .shopneed-grid{grid-template-columns:1fr}
  .shopneed{min-height:300px}
  .card-img{padding:14px}
  .numbers-grid{grid-template-columns:1fr;gap:16px}
  .routine-steps{grid-template-columns:1fr}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4 .need-card{grid-column:span 2}
  .icircle{width:72px;height:72px}
  .icircle svg{width:30px;height:30px}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .related .grid-3{grid-template-columns:1fr}
  .pdp-cta .btn{flex:1;justify-content:space-between}
}

/* logo del pie: contener el custom-logo dentro de la píldora */
.foot-logo-pill .custom-logo{width:105px;height:auto;display:block}

/* tarjetas del blog: imagen y titular clicables */
.journal-card .jbody h3 a{color:inherit;text-decoration:none}
.journal-card .jbody h3 a:hover{color:var(--azul-boton)}
a.jimg{display:block}
.journal-card:hover .jimg img{transform:scale(1.03)}
.jimg img{transition:transform .35s ease}


/* ============ ROUTER DE NECESIDADES (portada) ============ */
/* Reutiliza .needs y .need-card de la maqueta Wellina: aqui solo van la
   rejilla adaptativa y el pie con la consulta a la farmaceutica. */
.needs .grid-3{gap:22px}
/* Legibilidad: con foto clara el degradado de la maqueta dejaba el conteo por
   debajo de 4.5:1. Se refuerza el tramo medio y se sube el blanco del conteo. */
.needs .need-card::after{background:linear-gradient(rgba(8,18,28,.14) 0%,rgba(8,18,28,.52) 44%,rgba(8,18,28,.94) 100%)}
.needs .need-card .n{color:rgba(255,255,255,.92)}
.needs .need-card p{max-width:34ch}
.needs-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px}
.needs-foot p{font-size:15px;color:var(--gris-texto);max-width:58ch;margin:0}
@media (max-width:1024px){.needs .grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.needs .grid-3{grid-template-columns:1fr}}

/* ============ CABECERA DE LA TIENDA (textos del cliente, 4-sep-2026) ============ */
.shop-intro{position:relative;overflow:hidden;background:var(--gris-panel)}
.shop-intro__bg{position:absolute;inset:0;pointer-events:none}
.shop-intro__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.shop-intro__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.74) 58%,rgba(255,255,255,.18) 82%,rgba(255,255,255,0) 100%)}
.shop-intro__in{position:relative;z-index:2;padding-top:clamp(2.6rem,5vw,4.4rem);padding-bottom:clamp(4.8rem,7vw,6.6rem)}
.shop-intro__copy{max-width:760px;color:var(--negro)}
.shop-intro__copy .crumbs{margin-bottom:18px;color:var(--gris-texto)}
.shop-intro__copy .crumbs a{color:var(--gris-texto)}
.shop-intro__copy .crumbs a:hover{color:var(--negro)}
.shop-intro__copy h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,3.4vw,3.6rem);line-height:1.16;margin:0}
.shop-intro__copy h1 em{display:block;font-style:italic;font-weight:400;font-size:.6em;line-height:1.26;margin-top:.14em}
.shop-intro__rule{display:block;width:64px;height:2px;background:var(--azul-acento);margin:26px 0 22px}
.shop-intro__lead{font-size:17px;line-height:1.62;color:var(--gris-texto);max-width:44ch;margin:0 0 24px}
.shop-intro__checks{list-style:none;display:grid;gap:13px;margin:0 0 30px}
.shop-intro__checks li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:var(--negro)}
.shop-intro__checks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--azul-acento)}
.shop-intro__checks li::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4px;border-left:1.5px solid var(--azul-acento);border-bottom:1.5px solid var(--azul-acento);transform:rotate(-45deg)}
.shop-intro__badge{display:inline-flex;align-items:center;gap:14px;background:var(--negro);color:#fff;border-radius:14px;padding:14px 22px;font-size:14px;line-height:1.5;margin:0}
.shop-intro__badge-t{font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.shop-intro__badge-t strong{font-weight:600}
.shop-intro__pin svg{display:block;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shop-values{position:relative;z-index:3;margin-top:-44px;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.shop-values__grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-radius:20px;box-shadow:0 18px 44px rgba(17,17,17,.10);overflow:hidden}
.shop-values__item{padding:30px 22px;text-align:center;border-right:1px solid var(--gris-borde)}
.shop-values__item:last-child{border-right:0}
.shop-values__icon svg{display:block;margin:0 auto;width:34px;height:34px;fill:none;stroke:var(--azul-acento);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.shop-values__title{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:14px 0 10px;color:var(--negro)}
.shop-values__text{font-size:14px;line-height:1.55;color:var(--gris-texto)}
@media(max-width:1080px){
  .shop-values__grid{grid-template-columns:repeat(2,1fr)}
  .shop-values__item{border-bottom:1px solid var(--gris-borde)}
  .shop-values__item:nth-child(2n){border-right:0}
  .shop-values__item:last-child{grid-column:1/-1;border-bottom:0}
}
@media(max-width:640px){
  .shop-intro__veil{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 55%,rgba(255,255,255,.86) 100%)}
  .shop-intro__copy{max-width:none}
  .shop-intro__badge{width:100%}
  .shop-values{margin-top:-28px}
  .shop-values__grid{grid-template-columns:1fr}
  .shop-values__item{border-right:0}
}
/* La farmacia: ritmo y CTA del contenido aprobado el 8-sep.
   El prefijo de plantilla mantiene estos ajustes fuera del resto del tema. */
.page-template-page-sobre #contenido > section{
  padding-block:clamp(48px,6vw,80px)
}
.page-template-page-sobre .about-hero h1{
  margin-bottom:24px;
  text-wrap:balance
}
.page-template-page-sobre .about-hero p.sub{
  margin-bottom:20px
}
.page-template-page-sobre .about-hero p.sub:last-of-type{
  margin-bottom:32px
}
.page-template-page-sobre .about-hero-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  max-width:420px
}
.page-template-page-sobre .about-hero-actions .btn,
.page-template-page-sobre .cta-shop .btn{
  min-height:56px;
  justify-content:space-between;
  text-align:left;
  max-width:100%;
  padding:7px 7px 7px 24px;
  gap:16px
}
.page-template-page-sobre .about-hero-actions .btn{
  width:100%
}
.page-template-page-sobre .about-hero-actions .btn--outline{
  padding:6px 6px 6px 23px
}
.page-template-page-sobre .story-in h2,
.page-template-page-sobre .formula h2,
.page-template-page-sobre .sec-head h2{
  line-height:1.15;
  text-wrap:balance
}
.page-template-page-sobre .story-copy p{
  margin-bottom:20px
}
.page-template-page-sobre .story-copy p:last-child{
  margin-bottom:0
}
.page-template-page-sobre .sec-head{
  margin-bottom:32px
}
.page-template-page-sobre .sec-head--tight{
  margin-bottom:16px
}
.page-template-page-sobre .team-intro{
  margin-bottom:28px
}
.page-template-page-sobre .team-layout{
  align-items:center
}
.page-template-page-sobre .team-layout .team-figure{
  max-width:380px
}
.page-template-page-sobre .team-bio p{
  margin-bottom:18px
}
.page-template-page-sobre .team-bio p:last-child{
  margin-top:26px;
  margin-bottom:0
}
.page-template-page-sobre .team-bio .btn{
  min-height:56px;
  padding:12px 24px;
  justify-content:center
}
.page-template-page-sobre .formula-card{
  gap:22px;
  padding:clamp(24px,3vw,40px)
}
.page-template-page-sobre .cta-shop h2{
  margin-bottom:20px;
  text-wrap:balance
}
.page-template-page-sobre .cta-shop p{
  margin-bottom:32px
}
.page-template-page-sobre .cta-shop .btn{
  width:min(100%,360px)
}
@media (max-width:980px){
  .page-template-page-sobre .about-hero-figure,
  .page-template-page-sobre .team-layout .team-figure{
    justify-self:center
  }
}
@media (max-width:600px){
  .page-template-page-sobre .about-hero-actions,
  .page-template-page-sobre .about-hero-actions .btn,
  .page-template-page-sobre .team-bio .btn,
  .page-template-page-sobre .cta-shop .btn{
    width:100%;
    max-width:none
  }
  .page-template-page-sobre .story-in h2,
  .page-template-page-sobre .formula h2,
  .page-template-page-sobre .sec-head h2{
    font-size:clamp(30px,8.6vw,38px)
  }
}

/* Preguntas frecuentes ---------------------------------------------------
   Una sola columna estrecha: es una pagina para leer, no para explorar. La
   pregunta va en beige para que se distinga del cuerpo sin necesidad de
   acordeones, que esconden el texto a quien llega buscando una respuesta
   concreta y complican que un buscador la lea. */
.faq{
  max-width:70ch;
  margin:0 auto
}
.faq__item{
  border-bottom:1px solid var(--gris-borde);
  padding:26px 0
}
.faq__item:first-child{
  padding-top:0
}
.faq__item:last-child{
  border-bottom:0
}
.faq__p{
  font-family:var(--display);
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.3;
  margin:0 0 10px;
  color:var(--negro)
}
.faq__r p{
  margin:0;
  color:var(--gris-texto);
  line-height:1.65
}
.faq__r a{
  color:var(--azul-boton);
  text-decoration:underline;
  text-underline-offset:2px
}
.faq__r a:hover,
.faq__r a:focus-visible{
  color:var(--azul-boton-hover)
}

/* Crédito de autoría del pie: discreto, del mismo tamaño que el aviso legal
   que tiene al lado, sin competir con él. */
.foot-credito{
  opacity:.75
}
.foot-credito a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px
}
.foot-credito a:hover,
.foot-credito a:focus-visible{
  opacity:1
}

/* Firma visible en el blog: la farmacéutica titular, no solo en metadatos. */
.post-autor{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 0;
  font-size:14px;
  line-height:1.35;
  color:var(--gris-texto,#5B6470)
}
.post-autor-foto{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  flex:none
}
.post-autor strong{
  color:var(--negro,#111);
  font-weight:600
}

/* En móvil el botón de WhatsApp tapaba la flecha «siguiente» del hero. */
@media (max-width:768px){
  .hero-ui{bottom:92px}
  .joinchat{bottom:18px}
  /* El aviso de cookies no debe tapar el titular: barra baja, no modal a pantalla. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    max-height:42vh;
    overflow-y:auto;
    width:100% !important;
    max-width:100% !important;
    border-radius:16px 16px 0 0;
  }
}