/* ==========================================================================
   Just Care — tema Shopify  ·  v2
   Referencia de estructura: gruns.co (la pidió Antonio, 14 sep 2026).
   Lo que de ahí se toma y por qué:
     · bandas de color plano por sección, nunca todo blanco
     · cada producto con SU color de tarjeta
     · borde duro + sombra SÓLIDA (no difuminada) como firma
     · una palabra del titular en amarillo
     · círculos amarillos con las cifras
     · juego de premio con captura segmentada
   Paleta: la de Just Care (navy/azul/rosa). NADA de crema — Antonio ya lo marcó.
   ========================================================================== */

:root{
  --navy:#0e2747;
  --navy-ink:#081a30;
  --azul:#2a6cb4;
  --azul-hondo:#1d5391;
  --cielo:#6fc0e8;
  --cielo-pal:#c9e4f7;
  --nube:#e9f2fb;
  --nube-pal:#f4f9fd;
  --rosa:#e0428f;
  --rosa-hondo:#bd2e74;
  --rosa-pal:#fde5f0;
  --amarillo:#ffc73f;
  --amarillo-pal:#ffe9b5;
  --coral:#ff5a5a;
  --verde:#2f9e6a;
  --menta:#c8e8d8;
  --blanco:#fff;
  --linea:rgba(14,39,71,.14);

  /* Un color por producto. Es el recurso que le da punch al grid: la tarjeta
     no es blanca con foto, es un campo de color que el producto habita. */
  --t-fem:#f9cfe2;
  --t-sport:#c9e4f7;
  --t-shampoo:#ffe3a8;
  --t-jask:#c8e8d8;

  --r-xl:32px; --r-lg:22px; --r-md:14px; --r-sm:9px; --r-pill:999px;

  /* Sombra suave y borde de pelo. La primera versión usaba borde de 2px y
     sombra sólida desplazada (el recurso de gruns.co) y se veía a caricatura:
     a ellos les funciona porque venden ositos de gomita, a una marca de
     farmacia le quita credibilidad. El acabado es el de bloomnu.mx. */
  --duro:0 2px 6px rgba(14,39,71,.06);
  --duro-lg:0 18px 44px -20px rgba(14,39,71,.24);
  --suave:0 10px 30px -14px rgba(14,39,71,.16);
  --borde:1px solid rgba(14,39,71,.11);

  /* Una sola familia. Bricolage Grotesque y la manuscrita Shantell Sans eran
     medio ambiente de la caricatura; Poppins es además la de casa (el CRM). */
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --disp:var(--sans);

  --pad:clamp(18px,4.4vw,56px);
  --maxw:1280px;
  --head-h:80px;
}

*,*::before,*::after{box-sizing:border-box}
figure,figcaption,blockquote,dl,dd{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--navy);background:var(--nube-pal);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--rosa);outline-offset:3px;border-radius:4px}
.wrap{width:min(100%,var(--maxw));margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ tipografia --- */
.disp{
  font-family:var(--disp);font-weight:700;line-height:1.04;
  letter-spacing:-.032em;margin:0;text-wrap:balance;
}
.h1{font-size:clamp(2.2rem,5.2vw,4rem)}
.h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.h3{font-size:clamp(1.2rem,2vw,1.6rem)}
.amar{color:var(--amarillo)}
.rosita{color:var(--rosa)}
.eyebrow{
  font-weight:700;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
}
.lede{font-size:clamp(.95rem,1.25vw,1.08rem);color:rgba(14,39,71,.72);max-width:56ch}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center}
.center .lede{margin-inline:auto}
.mano{font-weight:600;letter-spacing:.01em}

/* --------------------------------------------------------------- botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:16px 34px;border-radius:var(--r-pill);
  font-weight:600;font-size:.86rem;letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease,background .18s ease,color .18s ease,border-color .18s ease;
  text-align:center;white-space:nowrap;border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--suave)}
.btn:active{transform:none;box-shadow:none}
.btn--navy{background:var(--navy);color:#fff}
.btn--rosa{background:var(--rosa);color:#fff}
.btn--amar{background:var(--amarillo);color:var(--navy)}
.btn--blanco{background:#fff;color:var(--navy)}
.btn--fantasma{background:transparent;color:var(--navy);border-color:rgba(14,39,71,.24)}
.btn--fantasma:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--bloque{display:flex;width:100%}
.btn--sm{padding:11px 20px;font-size:.75rem;box-shadow:var(--duro)}
.btn--sm:hover{box-shadow:var(--duro)}
.btn--lg{padding:19px 42px;font-size:.95rem;box-shadow:var(--duro-lg)}
.btn--lg:hover{transform:translateY(-1px);box-shadow:var(--suave)}
.btn[disabled]{opacity:.4;pointer-events:none;transform:none}
.enlace{text-decoration:underline;text-underline-offset:4px;font-weight:600;font-size:.83rem}

/* ------------------------------------------------------- barra + cabecera --- */
.ticker{
  background:var(--navy);color:#fff;text-align:center;
  padding:9px 16px;font-size:.78rem;line-height:1.4;
}
.ticker b{font-family:var(--disp);font-weight:700;letter-spacing:-.01em}
.ticker__l2{display:block;font-size:.72rem;opacity:.78;letter-spacing:.06em;text-transform:uppercase}

.head{position:sticky;top:0;z-index:60;background:var(--nube-pal);border-bottom:var(--borde)}
.head__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head-h);gap:12px}
/* El cliente pidió el logotipo más grande y más visible (20 sep 2026): pasó de
   22 a 38px y la pastilla blanca creció con él. A 38px el isotipo se lee de
   lejos y la marca deja de competir de tú a tú con los enlaces del menú. */
.head__logo{justify-self:start;display:flex;align-items:center;gap:9px;
  background:#fff;border:var(--borde);border-radius:var(--r-pill);padding:9px 20px;box-shadow:var(--duro)}
.head__logo img{height:38px;width:auto;display:block}
.head__nav{display:flex;justify-content:center;gap:26px}
.head__nav a{font-size:.8rem;font-weight:600;position:relative;padding:5px 0}
.head__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;background:var(--rosa);transition:right .25s ease}
.head__nav a:hover::after{right:0}
.head__act{display:flex;justify-self:end;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;position:relative;transition:background .18s ease}
.icon-btn:hover{background:var(--nube)}
.icon-btn svg{width:20px;height:20px;stroke:var(--navy);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--rosa);color:#fff;font-size:.62rem;
  font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;
  border:2px solid var(--nube-pal);
}
.cart-count[data-count="0"]{display:none}
.burger{display:none}

/* Pestaña lateral que reabre el premio. Vive fuera del flujo para que el
   descuento siga a la mano despues de cerrar el juego. */
.tab-premio{
  position:fixed;left:0;top:44%;z-index:55;
  background:var(--rosa);color:#fff;border:var(--borde);border-left:0;
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:16px 9px;writing-mode:vertical-rl;
  font-weight:700;font-size:.76rem;letter-spacing:.09em;
  box-shadow:var(--duro);transition:padding .18s ease;
}
.tab-premio:hover{padding-inline:12px}
/* En la ficha de producto la barra de compra ya ocupa la parte de abajo. */
.template-product .tab-premio{display:none}


/* ------------------------------------------------------ selector de mundo --- */
/* La home es de la MARCA y se acomoda a quien la ve. Este selector es la vía
   visible; la otra es lo que la persona contestó en el juego. Nunca esconde
   productos: reordena y destaca. Esconderle el shampoo a quien entró por
   cólicos es perder la segunda venta. */
.selector{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;padding:clamp(20px,2.8vw,32px) 0}
.selector__lbl{
  width:100%;text-align:center;font-weight:700;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--azul);margin-bottom:6px;
}
.sel-chip{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  border-radius:var(--r-pill);border:1px solid rgba(14,39,71,.16);background:#fff;
  font-weight:500;font-size:.83rem;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.sel-chip:hover{border-color:var(--navy)}
.sel-chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.sel-chip__i{display:none}
.selector__aviso{
  width:100%;text-align:center;font-size:.78rem;color:rgba(14,39,71,.6);margin-top:4px;
}
.selector__aviso b{color:var(--navy)}
.selector__aviso button{text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--azul)}

/* Al cambiar de mundo el hero y el grid se repintan; un fundido corto avisa
   que algo cambió sin que parezca recarga de página. */
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.repinta{animation:entra .32s ease}
@media (prefers-reduced-motion:reduce){.repinta{animation:none}}
@keyframes baja{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .selector{gap:7px}
  .sel-chip{padding:9px 14px;font-size:.76rem}
}

/* ------------------------------------------------------------------ hero --- */
/* =========================================================================
   Hero
   La primera versión era una foto de grupo y punto: bonita y muda. Vendía
   "gente contenta", no el producto. Ahora el lado derecho es una TARJETA DE
   PRODUCTO flotante —packshot sobre su color, badge, precio y una reseña
   suelta— con inclinación al mover el ratón. Es el mismo lenguaje de los
   componentes que mandó Antonio (product card + parallax + badge con rebote),
   escrito a mano para que corra en un tema de Shopify sin React.
   La tarjeta cambia con el mundo: cólicos enseña el parche, cabello el
   shampoo, embarazo la prueba.
   ========================================================================= */
.hero{
  background:var(--cielo-pal);border-bottom:var(--borde);position:relative;overflow:hidden;
}
/* dos resplandores suaves detrás, para que el fondo plano deje de serlo */
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.5;
}
.hero::before{width:min(46vw,540px);aspect-ratio:1;right:-8%;top:-18%;background:var(--blush)}
.hero::after{width:min(38vw,440px);aspect-ratio:1;left:-12%;bottom:-26%;background:#fff}
.hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(44px,6.4vw,92px);min-height:min(78vh,720px);
}
.hero h1{margin-bottom:20px}
.hero .lede{margin-inline:0}

/* --- prueba social: estrellas + caritas --- */
.rese{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.rese__caras{display:flex}
.rese__caras img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:2.5px solid var(--cielo-pal);margin-left:-11px;background:var(--nube);
  transition:transform .18s ease;
}
.rese__caras img:first-child{margin-left:0}
@media (hover:hover) and (pointer:fine){.rese__caras img:hover{transform:translateY(-4px)}}
.rese__d{display:grid;gap:1px;padding-left:2px;border-left:var(--borde);padding-left:14px}
.rese .stars{font-size:.92rem;letter-spacing:.5px}
.rese__d span{font-size:.78rem;color:rgba(14,39,71,.62)}
.rese__d b{font-weight:700;color:var(--navy)}

.hero__gar{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;font-size:.8rem;font-weight:500}
.hero__gar span{display:inline-flex;align-items:center;gap:7px}
.hero__gar svg{width:15px;height:15px;stroke:var(--verde);stroke-width:2.4;fill:none}

/* --- la tarjeta de producto flotante --- */
.hprod{position:relative;perspective:1100px}
.hprod__c{
  position:relative;border-radius:var(--r-xl);border:var(--borde);overflow:hidden;
  box-shadow:0 26px 58px rgba(8,26,48,.17);background:var(--t-fem);
  aspect-ratio:1/1;display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.22,1,.32,1);transform-style:preserve-3d;
}
/* Los packshots ya vienen sobre su fondo de color, así que la foto ES la
   tarjeta. `contain` + `multiply` los dejaba lavados y con doble fondo. */
.hprod__c img{width:100%;height:100%;object-fit:cover;display:block}
.hprod__flag{
  position:absolute;top:16px;left:16px;z-index:2;padding:8px 14px;border-radius:var(--r-pill);
  background:var(--rosa);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  box-shadow:var(--suave);animation:brinca .36s cubic-bezier(.34,1.56,.64,1) .3s both;
}
.hprod__precio{
  position:absolute;right:-10px;bottom:22px;z-index:3;
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  padding:14px 20px;box-shadow:0 14px 30px rgba(8,26,48,.16);
  display:grid;gap:2px;min-width:132px;
}
.hprod__precio span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(14,39,71,.5)}
.hprod__precio b{
  font-family:var(--disp);font-weight:700;font-size:1.45rem;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.hprod__precio i{font-style:normal;font-size:.74rem;color:rgba(14,39,71,.55)}
.hprod__nota{
  position:absolute;left:-14px;top:26px;z-index:3;max-width:196px;
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  padding:13px 16px;box-shadow:0 14px 30px rgba(8,26,48,.14);
}
.hprod__nota .stars{font-size:.74rem;display:block;margin-bottom:5px}
.hprod__nota p{margin:0;font-size:.78rem;line-height:1.42;color:rgba(14,39,71,.75)}
.hprod__nota b{display:block;margin-top:6px;font-size:.73rem;font-weight:600;color:rgba(14,39,71,.55)}

@media (max-width:1040px){
  .hprod__nota{display:none}
  .hprod__precio{right:10px}
}
@media (max-width:620px){
  .rese__d{border-left:0;padding-left:0}
  .hprod__precio{right:8px;bottom:12px;padding:11px 15px;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .hprod__c{transition:none!important;transform:none!important}
  .hprod__flag{animation:none}
}

/* ------------------------------------------------------------- cifras --- */
.cifras{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);justify-content:center;padding:clamp(28px,3.8vw,48px) 0}
.cifra{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:170px}
/* El círculo amarillo con el número era el recurso más caricaturesco de todos.
   La cifra sola, grande y bien espaciada, dice lo mismo y se ve seria. */
.cifra .cifra__b{
  display:block;margin-bottom:6px;color:var(--azul);
  font-weight:700;font-size:clamp(2rem,3.4vw,2.9rem);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.cifra b{font-weight:600;font-size:.92rem;line-height:1.25;display:block}
.cifra > span:not(.cifra__b){font-size:.76rem;color:rgba(14,39,71,.6);margin-top:4px;line-height:1.35}

/* --------------------------------------------------------------- bandas --- */
.sec{padding:clamp(46px,6.2vw,86px) 0}
.banda{border-block:var(--borde)}
.b-nube{background:var(--nube)}
.b-azul{background:var(--azul);color:#fff}
.b-navy{background:var(--navy);color:#fff}
.b-rosa{background:var(--rosa-pal)}
.b-cielo{background:var(--cielo-pal)}
.b-blanco{background:#fff}
.b-azul .lede,.b-navy .lede{color:rgba(255,255,255,.78)}
.b-navy .cifra > span:not(.cifra__b),.b-azul .cifra > span:not(.cifra__b){color:rgba(255,255,255,.62)}
.b-navy .cifra b,.b-azul .cifra b{color:#fff}
.b-navy .cifra__b,.b-azul .cifra__b{color:var(--amarillo)}
.b-azul .eyebrow,.b-navy .eyebrow{color:var(--amarillo)}
.sec__head{margin-bottom:clamp(26px,3.4vw,46px)}
.sec__head .eyebrow{display:block;margin-bottom:12px;color:var(--azul)}
.sec__head p{margin:14px 0 0}

/* ------------------------------------------------------------ carruseles --- */
.rail{position:relative}
.rail__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);
  gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:6px 4px 10px;
}
.rail__track::-webkit-scrollbar{display:none}
/* `safe` es lo que evita que, si aun así desborda en un celular, el centrado
   deje la primera tarjeta cortada fuera del área con scroll. */
.rail__track--pocos{justify-content:safe center}
.rail__track > *{scroll-snap-align:start}
.rail--4 .rail__track{grid-auto-columns:minmax(238px,calc(25% - 15px))}
.rail--3 .rail__track{grid-auto-columns:minmax(268px,calc(33.333% - 14px))}
.rail--2 .rail__track{grid-auto-columns:minmax(280px,calc(50% - 10px))}
.rail--5 .rail__track{grid-auto-columns:minmax(186px,calc(20% - 16px))}
.rail__nav{position:absolute;top:44%;translate:0 -50%;z-index:3;width:44px;height:44px;border-radius:50%;
  background:#fff;border:var(--borde);box-shadow:var(--duro);display:grid;place-items:center;transition:transform .14s ease,opacity .18s ease}
.rail__nav:hover{transform:translateY(-50%) scale(1.06);box-shadow:var(--duro)}
.rail__nav[disabled]{opacity:0;pointer-events:none}
.rail__nav--prev{left:-16px}
.rail__nav--next{right:-16px}
.rail__nav svg{width:18px;height:18px;stroke:var(--navy);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;justify-content:center;gap:7px;margin-top:20px}
.dots button{width:9px;height:9px;border-radius:50%;background:rgba(14,39,71,.22);transition:background .2s ease,width .2s ease}
.dots button[aria-current="true"]{background:var(--navy);width:24px;border-radius:var(--r-pill)}

/* --------------------------------------------------- tarjeta de producto --- */
.pcard{display:flex;flex-direction:column;height:100%}
.pcard__media{
  position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;
  border:var(--borde);box-shadow:var(--duro);background:var(--t-fem);
  transition:transform .16s ease,box-shadow .16s ease;
}
.pcard:hover .pcard__media{transform:translateY(-3px);box-shadow:var(--suave)}
.pcard__media img{width:100%;height:100%;object-fit:contain;padding:11%;mix-blend-mode:multiply}
.pcard__flag{
  position:absolute;top:10px;left:10px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--coral);color:#fff;font-size:.63rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:var(--borde);
}
.pcard__flag--verde{background:var(--verde)}
.pcard__flag--amar{background:var(--amarillo);color:var(--navy)}
.pcard__body{padding:15px 2px 0;display:flex;flex-direction:column;gap:5px;flex:1;text-align:center}
.pcard__name{font-family:var(--disp);font-weight:700;font-size:1.02rem;line-height:1.2;margin:0;letter-spacing:-.02em;overflow-wrap:anywhere}
.pcard__claim{font-size:.78rem;color:rgba(14,39,71,.62);margin:0}
.pcard__rate{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.72rem;color:rgba(14,39,71,.58)}
.pcard__price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 7px;margin-top:auto;padding-top:8px;font-size:.84rem;min-width:0}
.pcard__price b{font-family:var(--disp);font-weight:700;font-size:1.06rem;font-variant-numeric:tabular-nums}
.pcard__price s{color:rgba(14,39,71,.42)}
.pcard__add{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:9px}
.pcard__add .btn{width:100%}
.stars{display:inline-flex;gap:1px;color:var(--amarillo);font-size:.82rem;line-height:1}

/* --------------------------------------------------------- tarjeta dura --- */
.tarj{
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  box-shadow:var(--duro);overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:transform .16s ease,box-shadow .16s ease;
}
.tarj:hover{transform:translateY(-3px);box-shadow:var(--suave)}
.tarj__media{aspect-ratio:4/3;border-bottom:var(--borde);background:var(--nube)}
.tarj__media img{width:100%;height:100%;object-fit:cover}
.tarj__body{padding:20px 22px 24px;text-align:center}
.tarj__body h3{font-family:var(--disp);font-weight:700;font-size:1.15rem;margin:0 0 8px;letter-spacing:-.02em}
.tarj__body p{margin:0;font-size:.87rem;color:rgba(14,39,71,.68)}

/* ---------------------------------------------------------- tira de logos --- */
/* Los logos de las cadenas son marcas de terceros: van como wordmark tipografico
   uniforme, NUNCA recreados a mano ni generados. Se sustituyen por el asset
   oficial de cada cadena cuando el cliente los consiga. */
.logos{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:repeat(6,1fr)}
.logo-chip{
  display:grid;place-items:center;min-height:76px;padding:14px 10px;
  background:#fff;border:var(--borde);border-radius:var(--r-md);
  box-shadow:var(--duro);text-align:center;
  transition:transform .16s ease,box-shadow .16s ease;
}
.logo-chip:hover{transform:translateY(-3px);box-shadow:var(--suave)}
.logo-chip b{
  font-family:var(--disp);font-weight:700;font-size:clamp(.78rem,1.05vw,.92rem);
  line-height:1.12;letter-spacing:-.022em;color:var(--navy);display:block;
}
.logo-chip span{display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(14,39,71,.45);margin-top:5px;font-weight:600}
.logo-chip img{max-height:34px;width:auto;object-fit:contain}

/* --------------------------------------------------------------- marquee --- */
.marq{overflow:hidden;background:var(--navy);padding:14px 0}
.marq__t{display:flex;gap:0;width:max-content;animation:corre 26s linear infinite}
.marq__t span{
  font-weight:500;font-size:clamp(.8rem,1.15vw,.95rem);letter-spacing:.06em;
  text-transform:uppercase;padding-inline:20px;white-space:nowrap;color:rgba(255,255,255,.86);
}
.marq__t span::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--sky);margin-left:20px;vertical-align:middle}
@keyframes corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}

/* ------------------------------------------------------ testimonios video --- */
.testi{display:flex;flex-direction:column;height:100%}
.testi__v{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  border:var(--borde);box-shadow:var(--duro);background:var(--navy);cursor:pointer;
}
.testi__v video,.testi__v img{width:100%;height:100%;object-fit:cover}
/* Velo inferior: el nombre iba con text-shadow y sobre una foto clara
   (el pelo, el mosaico del bano) desaparecia. */
.testi__v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(transparent,rgba(8,26,48,.78));pointer-events:none;z-index:1}
.testi__play{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s ease;z-index:2}
.testi__play svg{width:52px;height:52px;fill:#fff;filter:drop-shadow(0 4px 14px rgba(8,26,48,.6))}
.testi__son{
  position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;
  background:rgba(8,26,48,.62);display:grid;place-items:center;backdrop-filter:blur(6px);
}
.testi__son svg{width:15px;height:15px;stroke:#fff;stroke-width:2;fill:none}
.testi__quien{
  position:absolute;left:12px;bottom:11px;right:12px;z-index:3;color:#fff;
  text-shadow:0 2px 10px rgba(8,26,48,.7);
}
.testi__quien b{display:block;font-size:.84rem;font-weight:700;line-height:1.2}
.testi__quien span{font-size:.72rem;opacity:.85}
.testi__cita{
  margin-top:13px;padding:15px 17px;background:#fff;border:var(--borde);
  border-radius:var(--r-md);box-shadow:var(--duro);flex:1;
  display:flex;flex-direction:column;gap:9px;
}
.testi__cita p{margin:0;font-size:.86rem;line-height:1.5}
.testi__cita .stars{font-size:.8rem}
.testi__cita .btn{margin-top:auto}

/* ------------------------------------------------------------- polaroids --- */
.pola{padding-block:clamp(28px,4vw,52px)}
.pola__fila{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(10px,1.6vw,22px)}
.pola__f{
  width:clamp(140px,18vw,224px);border:var(--borde);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--duro);background:#fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pola__f img{aspect-ratio:3/4;object-fit:cover;width:100%}
.pola__f:nth-child(odd){transform:rotate(-1.4deg)}
.pola__f:nth-child(even){transform:rotate(1.1deg)}
.pola__f:nth-child(3n){transform:rotate(-.5deg)}
.pola__f:hover{transform:rotate(0) scale(1.03);box-shadow:var(--duro-lg);z-index:2}

/* ------------------------------------------------------- juego de premio --- */
.juego{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:16px}
.juego.is-open{display:grid}
.juego__scrim{position:absolute;inset:0;background:rgba(8,26,48,.62);backdrop-filter:blur(4px)}
.juego__caja{
  position:relative;width:min(880px,100%);max-height:94vh;overflow:hidden auto;
  background:var(--cielo-pal);border:var(--borde);border-radius:var(--r-xl);
  box-shadow:var(--duro-lg);display:grid;grid-template-columns:.86fr 1.14fr;
}
.juego__foto{position:relative;background:var(--rosa-pal);min-height:280px;overflow:hidden}
/* `center top` dejaba la foto cortada en la frente: en el modal sólo se veía
   el pelo. `center 18%` encuadra la cara. */
.juego__foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.juego__cuerpo{padding:clamp(24px,3.4vw,42px);text-align:center;display:flex;flex-direction:column;justify-content:center}
.juego__logo{height:26px;width:auto;margin:0 auto 16px}
.juego h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.03em;margin:0 0 8px;line-height:1.02}
.juego__sub{margin:0 0 20px;font-size:.88rem;color:rgba(14,39,71,.7)}
.juego__cerrar{position:absolute;top:12px;right:12px;z-index:4;width:36px;height:36px;border-radius:50%;
  background:#fff;border:var(--borde);display:grid;place-items:center;box-shadow:var(--duro)}
.juego__cerrar svg{width:17px;height:17px;stroke:var(--navy);stroke-width:2.4;fill:none}

.cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:min(300px,100%);margin-inline:auto}
.carta{
  aspect-ratio:3/4;border-radius:var(--r-md);border:var(--borde);
  background:#fff;box-shadow:var(--duro);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.5rem;
  color:var(--azul);transition:transform .16s ease,box-shadow .16s ease,background .2s ease;
  perspective:600px;
}
.carta:hover:not(.is-flip){transform:translateY(-3px);box-shadow:var(--suave)}
.carta.is-flip{background:var(--amarillo);font-size:1.9rem;animation:voltea .42s ease}
.carta.is-gana{background:var(--verde);color:#fff}
.carta[disabled]{pointer-events:none}
@keyframes voltea{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(.94)}100%{transform:rotateY(0)}}

.juego__opts{display:grid;gap:9px;width:min(350px,100%);margin-inline:auto}
.juego__opts .btn{width:100%;font-size:.8rem;padding:14px 18px}
.juego__form{display:grid;gap:10px;width:min(350px,100%);margin-inline:auto}
.juego__form input{
  padding:15px 18px;border:var(--borde);border-radius:var(--r-pill);
  font-family:var(--sans);font-size:.9rem;background:#fff;color:var(--navy);width:100%;
}
.juego__nota{font-size:.72rem;color:rgba(14,39,71,.55);margin:2px 0 0}
.cupon{
  display:inline-block;margin:4px 0 16px;padding:12px 26px;background:#fff;
  border:2px dashed var(--navy);border-radius:var(--r-md);
  font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:.09em;
}

/* --------------------------------------------------------- pagina producto --- */
.pdp{padding:clamp(22px,3vw,44px) 0 clamp(50px,6.4vw,86px)}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,58px);align-items:start}
/* minmax(0,1fr) y no 1fr, y min-width:0 en la columna: la tira de miniaturas
   es un flex con overflow-x, pero el `min-width:auto` que hereda de ser hijo
   de grid la plantaba en su ancho de contenido (465px con seis miniaturas) y
   en 375px la ficha entera se salía de la pantalla SIN barra de scroll — el
   mismo bochorno que ya se pagó en el tablero de Ads. */
.gal{position:sticky;top:calc(var(--head-h) + 16px);min-width:0}
.gal__main{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1;border:var(--borde);box-shadow:var(--duro-lg);background:var(--t-fem)}
.gal__main img{width:100%;height:100%;object-fit:cover}
.gal__thumbs{display:flex;gap:9px;margin-top:13px;overflow-x:auto;scrollbar-width:none}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumbs button{flex:0 0 70px;height:70px;border-radius:var(--r-sm);overflow:hidden;
  border:var(--borde);background:var(--nube);transition:border-color .16s ease}
.gal__thumbs button[aria-current="true"]{border-color:var(--navy);box-shadow:var(--duro)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}

.pdp__rate{display:flex;align-items:center;gap:8px;font-size:.8rem;color:rgba(14,39,71,.62);margin-bottom:10px}
.pdp__title{font-family:var(--disp);font-weight:700;margin:0 0 8px;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.02;letter-spacing:-.03em}
.pdp__claim{font-size:1rem;color:rgba(14,39,71,.72);margin:0 0 18px}
.pdp__price{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.pdp__price .now{font-family:var(--disp);font-weight:700;font-size:2.1rem;font-variant-numeric:tabular-nums;line-height:1}
.pdp__price .was{font-size:1rem;color:rgba(14,39,71,.44);text-decoration:line-through}
.pdp__price .off{padding:6px 12px;border-radius:var(--r-pill);background:var(--amarillo);
  border:var(--borde);font-size:.73rem;font-weight:700}
.pdp__unit{font-size:.83rem;color:rgba(14,39,71,.58);margin:0 0 20px}

.bundles{display:grid;gap:10px;margin:20px 0}
.bundle{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:16px 18px;border:var(--borde);border-radius:var(--r-md);background:#fff;
  cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.bundle:hover{border-color:var(--navy)}
.bundle input{position:absolute;opacity:0;pointer-events:none}
.dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(14,39,71,.3);display:grid;place-items:center;transition:border-color .16s ease;flex:0 0 20px}
.dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .16s ease}
.bundle input:checked ~ .dot{border-color:var(--navy)}
.bundle input:checked ~ .dot::after{transform:scale(1)}
.bundle:has(input:checked){border-color:var(--navy);box-shadow:var(--duro);transform:translateY(-1px)}
.bundle__name{display:block;font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1.2;margin:0;letter-spacing:-.02em}
.bundle__sub{display:block;font-size:.77rem;color:rgba(14,39,71,.6);margin:3px 0 0}
.bundle__price{text-align:right}
.bundle__price b{font-family:var(--disp);font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums;display:block;line-height:1.15}
.bundle__price s{font-size:.72rem;color:rgba(14,39,71,.45)}
.bundle__tag{position:absolute;top:-11px;right:14px;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--verde);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border:2px solid var(--navy)}

.subs{border:var(--borde);border-radius:var(--r-md);overflow:hidden;margin:20px 0;box-shadow:var(--duro)}
.subs__opt{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;cursor:pointer;position:relative;transition:background .18s ease;background:#fff}
.subs__opt + .subs__opt{border-top:var(--borde)}
.subs__opt:has(input:checked){background:var(--rosa-pal)}
.subs__opt input{position:absolute;opacity:0;pointer-events:none}
.subs__opt .dot{margin-top:2px}
.subs__opt:has(input:checked) .dot{border-color:var(--rosa)}
.subs__opt:has(input:checked) .dot::after{background:var(--rosa);transform:scale(1)}
.subs__body strong{font-family:var(--disp);font-weight:700;font-size:.98rem;display:block;letter-spacing:-.015em}
.subs__body p{margin:3px 0 0;font-size:.79rem;color:rgba(14,39,71,.64)}
.subs__dia{font-size:.75rem;color:var(--verde);font-weight:700;margin-top:3px;display:block}
.subs__save{display:inline-block;margin-left:7px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--verde);color:#fff;font-size:.64rem;font-weight:700;vertical-align:middle;border:var(--borde)}
.subs__freq{display:none;padding:0 18px 16px 51px;background:var(--rosa-pal)}
.subs__opt:has(input:checked) + .subs__freq{display:block}
.subs__freq select{width:100%;padding:11px 14px;border:var(--borde);border-radius:var(--r-sm);
  background:#fff;font-family:var(--sans);font-size:.87rem;color:var(--navy)}

.perks{display:grid;gap:11px;margin:22px 0 0;padding:20px;background:var(--nube);border:var(--borde);border-radius:var(--r-md)}
.perk{display:flex;gap:11px;align-items:flex-start;font-size:.85rem}
.perk svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--verde);stroke-width:2.4;fill:none;margin-top:2px;stroke-linecap:round;stroke-linejoin:round}

.acc{border-top:var(--borde);margin-top:30px}
.acc__item{border-bottom:var(--borde)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;text-align:left;
  font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.acc__btn::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--rosa);transition:transform .22s ease;line-height:1}
.acc__btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.acc__panel{overflow:hidden;max-height:0;transition:max-height .3s ease}
.acc__panel > div{padding:0 0 18px;font-size:.88rem;color:rgba(14,39,71,.74)}
.acc__panel p{margin:0 0 11px}
.acc__panel p:last-child{margin:0}
.acc__panel ol,.acc__panel ul{margin:0 0 11px;padding-left:19px}
.acc__panel li{margin-bottom:6px}

/* -------------------------------------------------------------- pasos --- */
.pasos{counter-reset:s;display:grid;gap:14px}
.paso{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#fff;
  border:var(--borde);border-radius:var(--r-md);box-shadow:var(--duro)}
.paso::before{counter-increment:s;content:counter(s);flex:0 0 40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--nube);color:var(--azul);
  font-weight:700;font-size:1rem}
.paso h3{margin:0 0 5px;font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.paso p{margin:0;font-size:.86rem;color:rgba(14,39,71,.7)}

/* ------------------------------------------------------------ cajon carrito --- */
.drawer{position:fixed;inset:0;z-index:95;pointer-events:none}
.drawer.is-open{pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(8,26,48,.48);opacity:0;transition:opacity .28s ease;backdrop-filter:blur(3px)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);background:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);border-left:var(--borde)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:var(--borde)}
.drawer__head h2{margin:0;font-family:var(--disp);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.drawer__body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer__foot{border-top:var(--borde);padding:18px 22px calc(18px + env(safe-area-inset-bottom));background:var(--nube)}
.ship-bar{margin-bottom:16px}
.ship-bar p{margin:0 0 7px;font-size:.8rem}
.ship-bar p b{color:var(--verde);font-weight:700}
.ship-bar__track{height:9px;border-radius:var(--r-pill);background:#fff;border:var(--borde);overflow:hidden}
.ship-bar__fill{height:100%;background:var(--verde);transition:width .4s ease}
.litem{display:grid;grid-template-columns:64px 1fr auto;gap:13px;padding:15px 0;border-bottom:2px solid var(--linea)}
.litem img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);background:var(--nube);border:2px solid var(--navy)}
.litem b{font-size:.87rem;font-weight:700;line-height:1.28;display:block}
.litem small{color:rgba(14,39,71,.58);font-size:.75rem;display:block}
.litem__rm{font-size:.73rem;color:rgba(14,39,71,.5);text-decoration:underline;margin-top:6px;display:inline-block}
.qty{display:inline-flex;align-items:center;border:var(--borde);border-radius:var(--r-pill);margin-top:8px}
.qty button{width:28px;height:26px;display:grid;place-items:center;font-size:1rem;color:var(--azul);font-weight:700}
.qty input{width:30px;border:0;text-align:center;font-family:var(--sans);font-size:.85rem;font-variant-numeric:tabular-nums;background:none;color:var(--navy)}
.totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.totals b{font-family:var(--disp);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums}
.totals + p{margin:0 0 14px;font-size:.75rem;color:rgba(14,39,71,.58)}
.drawer__empty{text-align:center;padding:46px 0}
.drawer__empty p{color:rgba(14,39,71,.62);margin:0 0 20px}

/* ---------------------------------------------------------- barra pegajosa --- */
.sticky-atc{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:var(--borde);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s ease;
}
.sticky-atc.is-on{transform:none}
.sticky-atc__info{flex:1;min-width:0}
.sticky-atc__info b{font-size:.85rem;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc__info span{font-size:.8rem;color:rgba(14,39,71,.62);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------- pie --- */
.foot{background:var(--navy);color:rgba(255,255,255,.74);padding:clamp(40px,5.4vw,70px) 0 26px;border-top:var(--borde)}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(22px,3.6vw,46px)}
.foot img{height:44px;margin-bottom:18px}
.foot h4{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.85rem}
.foot a:hover{color:var(--amarillo)}
.foot__news{display:flex;gap:8px;margin-top:14px;max-width:340px}
.foot__news input{flex:1;padding:13px 17px;border:2px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:#fff;font-family:var(--sans);font-size:.85rem}
.foot__news input::placeholder{color:rgba(255,255,255,.48)}
.foot__news .btn{box-shadow:none;border-color:var(--amarillo)}
.foot__news .btn:hover{transform:none;box-shadow:none}
.foot__legal{margin-top:clamp(28px,3.4vw,46px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.76rem}
.foot .icon-btn svg{stroke:#fff}
.foot .icon-btn:hover{background:rgba(255,255,255,.12)}

/* -------------------------------------------------------------- responsive --- */
@media (max-width:1040px){
  .burger{display:grid}

  /* El menu NO puede quedarse dentro de la rejilla de la cabecera. Ahi era la
     columna del medio: al abrirse media 107px de ancho, crecia 286px hacia
     abajo y se salia encima del hero, y de paso empujaba el logo al centro
     porque la fila entera crecia con el. Sale del flujo y se vuelve panel. */
  .head__top{grid-template-columns:auto 1fr auto;height:var(--head-h)}
  .head__nav{
    position:absolute;top:100%;left:0;right:0;z-index:2;
    display:none;flex-direction:column;gap:0;
    background:#fff;border-top:var(--borde);border-bottom:var(--borde);
    box-shadow:var(--duro-lg);
    padding:4px var(--pad) 10px;
    max-height:calc(100dvh - var(--head-h) - 60px);overflow-y:auto;
  }
  .head__nav.is-open{display:flex;animation:baja .22s ease}
  .head__nav a{padding:16px 2px;font-size:.94rem;font-weight:500;border-bottom:var(--borde)}
  .head__nav a:last-child{border-bottom:0}
  .head__nav a::after{display:none}

  /* Velo: sin el, el menu se lee encima de la foto del hero y no se entiende
     que hay una capa abierta. */
  .velo-menu{
    position:fixed;inset:0;z-index:50;background:rgba(8,26,48,.42);
    opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  .velo-menu.is-on{opacity:1;pointer-events:auto}
  .hero__grid,.pdp__grid{grid-template-columns:minmax(0,1fr)}
  .hero__media{order:-1}
  .juego__caja{grid-template-columns:1fr}
  /* En una columna la foto queda como una franja de 190px, y una franja de 190px
     sobre un retrato vertical no encuadra una cara: la rebana. Antonio lo vio y
     lo dijo tal cual — *"la foto es el puro pelo"*. Ningún `object-position`
     arregla eso, así que en pantalla angosta el juego va sin foto. */
  .juego__foto{display:none}
  .gal{position:static}
  .logos{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .rail--4 .rail__track{grid-auto-columns:minmax(184px,calc(50% - 10px))}
  .rail--3 .rail__track{grid-auto-columns:minmax(230px,calc(66% - 10px))}
  .rail--5 .rail__track{grid-auto-columns:minmax(160px,calc(33% - 12px))}
  .rail__nav{display:none}
}
@media (max-width:640px){
  .ticker{font-size:.73rem;padding:8px 12px}
  .logos{grid-template-columns:repeat(2,1fr)}
  .cifras{gap:18px 12px}
  .cifra{max-width:126px}
  .foot__grid{grid-template-columns:1fr}
  .sticky-atc{display:flex}
  .pdp{padding-bottom:104px}
  .tab-premio{
    top:auto;bottom:calc(14px + env(safe-area-inset-bottom));left:auto;right:14px;
    writing-mode:horizontal-tb;border-left:1px solid rgba(14,39,71,.11);
    border-radius:var(--r-pill);padding:10px 15px;font-size:.71rem;letter-spacing:.02em;
    box-shadow:var(--duro-lg);
  }
  .pola__f{width:clamp(126px,42vw,168px)}
  .rail--4 .rail__track{grid-auto-columns:minmax(156px,calc(54% - 8px))}
  .juego__cuerpo{padding:22px 18px}
  .cartas{max-width:250px}
}

/* ==========================================================================
   Apartado de producto a fondo (Therma Pad Fem)
   Los bloques que separan una ficha de tienda de una página de producto de
   salud: el mecanismo, la línea de tiempo, la comparación y las precauciones.
   ========================================================================== */

/* ------------------------------------------------------------- mecanismo --- */
.mecan{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);counter-reset:mec}
.mecan__p{
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);text-align:center;box-shadow:var(--duro);
}
.mecan__fig{width:100%;max-width:150px;margin:0 auto 18px;display:block}
.mecan__p h3{font-weight:700;font-size:1.05rem;margin:0 0 8px;letter-spacing:-.02em}
.mecan__p p{margin:0;font-size:.87rem;color:rgba(14,39,71,.7)}
.mecan__n{
  display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--nube);color:var(--azul);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}

/* --------------------------------------------------------- línea de tiempo --- */
/* La promesa del producto es temporal —20 minutos para la temperatura ideal,
   12 horas de efecto—, así que se dibuja en el eje del tiempo. Es el bloque
   que más autoridad da y el único dato que la competencia no puede copiar sin
   tener el mismo producto. */
.lineat{position:relative;padding:clamp(26px,3.2vw,40px) 0 10px}
.lineat__riel{
  position:relative;height:10px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--cielo-pal),var(--rosa) 22%,var(--rosa) 78%,var(--cielo-pal));
}
.lineat__hitos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.lineat__h{text-align:center;position:relative}
.lineat__h::before{
  content:"";position:absolute;top:-30px;left:50%;translate:-50% 0;
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--rosa);box-shadow:0 0 0 4px rgba(224,66,143,.14);
}
.lineat__h b{display:block;font-weight:700;font-size:1.15rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lineat__h span{display:block;font-size:.8rem;color:rgba(14,39,71,.62);margin-top:3px;line-height:1.35}

/* ------------------------------------------------------------ comparación --- */
.compara{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
.compara th,.compara td{padding:15px 16px;text-align:left;border-bottom:var(--borde)}
.compara thead th{
  font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(14,39,71,.5);border-bottom:2px solid rgba(14,39,71,.14);
}
.compara tbody th{font-weight:500;color:rgba(14,39,71,.75)}
.compara td{text-align:center;font-weight:600}
.compara .col-nos{background:var(--rosa-pal)}
.compara thead .col-nos{color:var(--rosa-hondo);border-bottom-color:var(--rosa)}
.compara tr:last-child th,.compara tr:last-child td{border-bottom:0}
.si{color:var(--verde)}
.no{color:rgba(14,39,71,.32)}

/* ------------------------------------------------------------ precauciones --- */
/* Va visible y con su propio color, no escondido en un acordeón: son
   contraindicaciones reales y esconderlas es lo que hace que una página de
   salud parezca de dropshipping. */
.aviso{
  background:#fff;border:var(--borde);border-left:4px solid var(--amarillo);
  border-radius:var(--r-md);padding:clamp(20px,2.4vw,28px);
}
.aviso h3{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.aviso h3 svg{width:19px;height:19px;stroke:var(--amarillo);stroke-width:2.2;fill:none;flex:0 0 19px}
.aviso ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.aviso li{position:relative;padding-left:17px;font-size:.88rem;color:rgba(14,39,71,.76);line-height:1.5}
.aviso li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--amarillo)}
.aviso p{margin:14px 0 0;font-size:.82rem;color:rgba(14,39,71,.58)}

/* -------------------------------------------------------------- ficha téc --- */
.ficha{display:grid;grid-template-columns:1fr;gap:0}
.ficha div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:var(--borde);font-size:.89rem}
.ficha dt,.ficha span:first-child{color:rgba(14,39,71,.6)}
.ficha b{font-weight:600;text-align:right}


/* --------------------------------------------------------------- destacado --- */
.destaca{
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);text-align:center;
}
.destaca p{margin:0;font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.45;font-weight:500;max-width:34ch;margin-inline:auto}
.destaca span{display:block;margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.55)}

@media (max-width:860px){
  .dos-col{grid-template-columns:1fr!important}
  .mecan{grid-template-columns:1fr}
  .lineat__hitos{grid-template-columns:repeat(2,1fr);gap:26px 8px}
  .lineat__h:nth-child(n+3)::before{display:none}
  .ficha{grid-template-columns:1fr}
  .compara{font-size:.84rem}
  .compara th,.compara td{padding:12px 9px}
}

/* ==========================================================================
   Reseñas, ficha técnica agrupada y carrusel de pasos
   ========================================================================== */

/* ------------------------------------------------------- resumen reseñas --- */
.resumen{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,56px);align-items:center;
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--duro);margin-bottom:clamp(22px,3vw,34px);
}
.resumen__nota{text-align:center;padding-right:clamp(20px,3vw,40px);border-right:var(--borde)}
.resumen__nota b{display:block;font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em}
.resumen__nota .stars{font-size:1.05rem;margin:8px 0 6px;display:block}
.resumen__nota span{font-size:.8rem;color:rgba(14,39,71,.6)}
.barras{display:grid;gap:7px}
.barra{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;font-size:.8rem}
.barra__n{color:rgba(14,39,71,.6);font-variant-numeric:tabular-nums;min-width:2.6em}
.barra__riel{height:8px;border-radius:var(--r-pill);background:var(--nube);overflow:hidden}
.barra__riel{display:block}
/* display:block, no se puede quitar: `.barra__fill` es un <span> dentro de otro
   <span>. El riel se blockifica solo por ser hijo de la rejilla `.barra`, pero
   el relleno no, y un inline ignora width y height: las cinco barras salían
   vacías y el desglose de estrellas no decía nada. Se veía "bien" porque el
   riel gris sí se pintaba. */
.barra__fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--amarillo)}
.barra__pct{color:rgba(14,39,71,.5);font-variant-numeric:tabular-nums;min-width:3em;text-align:right}

/* ------------------------------------------------------- tarjetas reseña --- */
.resenas{columns:3;column-gap:clamp(14px,2vw,20px)}
.res{
  break-inside:avoid;background:#fff;border:var(--borde);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:clamp(14px,2vw,20px);box-shadow:var(--duro);
}
.res__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.res__top .stars{font-size:.86rem}
.res__fecha{font-size:.72rem;color:rgba(14,39,71,.45);font-variant-numeric:tabular-nums}
.res h4{margin:0 0 7px;font-weight:700;font-size:.95rem;line-height:1.3;letter-spacing:-.015em}
.res p{margin:0;font-size:.88rem;line-height:1.55;color:rgba(14,39,71,.76)}
.res__pie{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;border-top:var(--borde)}
.res__av{
  width:32px;height:32px;border-radius:50%;background:var(--blush);display:grid;place-items:center;
  font-weight:700;color:var(--rosa-hondo);font-size:.8rem;flex:0 0 32px;
}
.res__quien b{display:block;font-size:.82rem;font-weight:600;line-height:1.2}
.res__quien span{font-size:.73rem;color:rgba(14,39,71,.5)}
.res__ok{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:600;color:var(--verde);white-space:nowrap;
}
.res__ok svg{width:12px;height:12px;stroke:var(--verde);stroke-width:3;fill:none}

/* -------------------------------------------------- ficha técnica agrupada --- */
.specs{display:grid;gap:clamp(18px,2.4vw,26px)}
.specs__g h4{
  margin:0 0 4px;font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);
}
.specs__g > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:var(--borde);font-size:.89rem}
.specs__g > div:last-child{border-bottom:0}
.specs__g > div > span{color:rgba(14,39,71,.6)}
.specs__g > div > b{font-weight:600;text-align:right}
.specs__larga{display:block!important}
.specs__larga span{display:block;margin-bottom:5px}
.specs__larga b{display:block;text-align:left!important;font-weight:500;line-height:1.5;color:rgba(14,39,71,.8)}

/* -------------------------------------------------------- aviso mejorado --- */
.aviso__grupo + .aviso__grupo{margin-top:16px;padding-top:16px;border-top:var(--borde)}
.aviso__grupo > b{
  display:block;margin-bottom:9px;font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(14,39,71,.5);
}
.aviso--rojo{border-left-color:var(--coral)}
.aviso--rojo h3 svg{stroke:var(--coral)}
.aviso--rojo li::before{background:var(--coral)}

/* --------------------------------------------------------- pasos en foto --- */
.pasofoto{display:flex;flex-direction:column;height:100%}
.pasofoto__img{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  border:var(--borde);box-shadow:var(--duro);background:var(--nube);
}
.pasofoto__img img{width:100%;height:100%;object-fit:cover}
.pasofoto__n{
  position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.95rem;box-shadow:var(--suave);
}
.pasofoto__txt{padding:15px 4px 0}
.pasofoto__txt b{display:block;font-weight:700;font-size:1rem;line-height:1.25;letter-spacing:-.02em}
.pasofoto__txt p{margin:5px 0 0;font-size:.85rem;color:rgba(14,39,71,.68);line-height:1.5}

@media (max-width:980px){ .resenas{columns:2} }
@media (max-width:640px){
  .resenas{columns:1}
  .resumen{grid-template-columns:1fr;gap:20px;text-align:center}
  .resumen__nota{padding-right:0;border-right:0;padding-bottom:18px;border-bottom:var(--borde)}
}

/* ==========================================================================
   Testimonio en FOTO (sustituye al de video)
   Antonio los quitó: un carrusel de videos obliga a picarle y subir volumen
   para enterarse de algo. La foto con la cita se lee de corrido.
   ========================================================================== */
.tfoto{display:flex;flex-direction:column;height:100%}
.tfoto__img{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  border:var(--borde);box-shadow:var(--duro);background:var(--nube);
}
.tfoto__img img{width:100%;height:100%;object-fit:cover}
.tfoto__quien{
  position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(8,26,48,.82));
}
.tfoto__quien b{display:block;font-weight:700;font-size:.95rem;line-height:1.2}
.tfoto__quien span{font-size:.78rem;opacity:.86}
.tfoto__cita{
  margin-top:13px;padding:18px 20px;background:#fff;border:var(--borde);
  border-radius:var(--r-md);box-shadow:var(--duro);flex:1;
  display:flex;flex-direction:column;gap:10px;position:relative;
}
.tfoto__cita::before{
  content:"\201C";position:absolute;top:2px;right:16px;
  font-size:3.2rem;line-height:1;color:var(--blush-deep);font-weight:700;
}
.tfoto__cita .stars{font-size:.82rem}
.tfoto__cita p{margin:0;font-size:.87rem;line-height:1.55;color:rgba(14,39,71,.78);position:relative}
/* `.btn` es `white-space:nowrap` para toda la tienda, y aquí adentro la
   pastilla mide 226px mientras el texto —"Shampoo Anti-Caída de Jengibre ·
   $389.00"— pide bastante más: se derramaba por los dos extremos redondeados
   y se leía "ampoo Anti-Caída de Jengibre · $389". En una tarjeta angosta la
   pastilla tiene que poder partirse en dos renglones. */
.tfoto__cita .btn{
  margin-top:auto;width:100%;white-space:normal;text-wrap:balance;
  line-height:1.3;padding:11px 14px;font-size:.78rem;
}

/* La ficha ya no va a media página: con el ancho completo caben dos columnas
   de especificaciones y el aviso deja de partir el segmento en dos. */
.specs--ancho{grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px)}
.specs--ancho .specs__g:last-child{grid-column:1/-1}
.aviso--ancho{margin-top:clamp(24px,3vw,36px)}
.aviso--ancho ul{grid-template-columns:repeat(2,1fr);gap:10px 28px}
@media (max-width:820px){
  .specs--ancho{grid-template-columns:1fr}
  .aviso--ancho ul{grid-template-columns:1fr}
}

/* ---------------------------------------------------------- las estrellas --- */
/* Las estrellas son un <span>, y varios bloques estilan `span` en azul apagado
   (.resumen__nota span, .res__quien span, .tfoto__quien span...). Ese selector
   le ganaba por especificidad a `.stars` y en el resumen de reseñas salían
   grises. La clase se repite a propósito —`.stars.stars`— para subir la
   especificidad a 0,2,0 sin usar !important: así gana contra cualquier
   `.bloque span` que se agregue después y no hay que acordarse de esto. */
.stars.stars{color:var(--amarillo)}

/* ==========================================================================
   Home de marca: introducción, Compromiso Just Care, Comunidad y Contacto
   La home arrancaba directo en producto. Antonio (16 sep 2026): la marca
   primero, luego el catálogo. Todo el texto de estos bloques es el de
   just-care.com — no está inventado.
   ========================================================================== */

/* ------------------------------------------------------------ intro marca --- */
.intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.intro__foto{border-radius:var(--r-xl);overflow:hidden;border:var(--borde);box-shadow:var(--duro-lg);aspect-ratio:16/11;background:var(--nube)}
.intro__foto img{width:100%;height:100%;object-fit:cover;display:block}
.intro__cita{
  margin:0 0 22px;font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.5;
  color:rgba(14,39,71,.82);border-left:3px solid var(--rosa);padding-left:18px;
}
.pilares{display:grid;gap:0;margin-top:6px}
.pilares div{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:var(--borde);font-size:.92rem;line-height:1.5}
.pilares div:last-child{border-bottom:0}
.pilares b{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--nube);color:var(--azul);
  display:grid;place-items:center;font-size:.76rem;font-weight:700;margin-top:1px;
}

/* -------------------------------------------------------------- fundaciones --- */
.fund{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,3vw,36px)}
.fund a,.fund div{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-md);padding:20px 18px;color:#fff;text-decoration:none;
  display:flex;flex-direction:column;gap:7px;min-height:118px;
}
.fund b{font-size:.98rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.fund span{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:auto}

/* --------------------------------------------------------------- comunidad --- */
.blog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.post{
  display:flex;flex-direction:column;background:#fff;border:var(--borde);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--duro);height:100%;
  text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease;
}
.post:hover{transform:translateY(-3px);box-shadow:var(--duro-lg)}
.post__f{aspect-ratio:4/3;border-bottom:var(--borde);background:var(--nube)}
.post__f img{width:100%;height:100%;object-fit:cover;display:block}
.post__b{padding:17px 19px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post__cat{
  align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rosa-hondo);background:var(--blush);border-radius:var(--r-pill);padding:5px 10px;
}
.post h3{margin:0;font-size:.98rem;font-weight:700;line-height:1.3;letter-spacing:-.018em}
.post p{margin:0;font-size:.85rem;line-height:1.5;color:rgba(14,39,71,.68)}
.post__mas{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:600;color:var(--azul)}

/* ---------------------------------------------------------------- contacto --- */
.contacto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start}
.contacto__dat{display:grid;gap:0;margin-top:22px}
.contacto__dat div{padding:15px 0;border-bottom:var(--borde)}
.contacto__dat div:last-child{border-bottom:0}
.contacto__dat span{display:block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(14,39,71,.5);margin-bottom:4px}
.contacto__dat b{font-weight:600;font-size:.95rem;line-height:1.45}
.forma{
  background:#fff;border:var(--borde);border-radius:var(--r-lg);
  box-shadow:var(--duro);padding:clamp(22px,3vw,32px);display:grid;gap:14px;
}
.forma__fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.campo{display:grid;gap:6px}
.campo label{font-size:.79rem;font-weight:600;color:rgba(14,39,71,.72)}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:16px;color:var(--navy);background:var(--nube-pal);
  border:var(--borde);border-radius:var(--r-sm);padding:12px 14px;
}
.campo textarea{min-height:118px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul);outline-offset:1px}
.forma__ok{
  display:flex;gap:9px;align-items:flex-start;font-size:.79rem;color:rgba(14,39,71,.62);line-height:1.5;
}
.forma__ok input{margin-top:3px;flex:0 0 auto;width:16px;height:16px}
.forma__ok a{color:var(--azul)}

/* -------------------------------------------------------------------- legal --- */
.legal{max-width:74ch;margin-inline:auto}
.legal h2{font-family:var(--disp);font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em;margin:34px 0 12px}
.legal p{font-size:.92rem;line-height:1.72;color:rgba(14,39,71,.78);margin:0 0 15px}
.legal ol{padding-left:20px;font-size:.92rem;line-height:1.72;color:rgba(14,39,71,.78)}
.legal li{margin-bottom:7px}
.legal__fecha{font-size:.8rem;color:rgba(14,39,71,.52);margin-bottom:26px}

@media (max-width:980px){
  .intro,.contacto{grid-template-columns:minmax(0,1fr)}
  .blog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fund{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .blog{grid-template-columns:minmax(0,1fr)}
  .fund{grid-template-columns:minmax(0,1fr)}
  .forma__fila{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   Capa de interacción (16 sep 2026)
   Antonio pidió los efectos de unos componentes de React/shadcn (Framer Motion,
   Radix, Tailwind 4). Este proyecto es un tema de Shopify + una vista previa en
   HTML plano: no puede correr React. Lo que SÍ se puede es el efecto, y eso es
   lo que hay aquí — zoom al pasar el ratón, badge que entra con rebote, botón
   que se transforma en palomita, entrada al hacer scroll y tarjeta con
   inclinación. Sin una sola dependencia y sin romper el checkout.
   Todo respeta `prefers-reduced-motion`.
   ========================================================================== */

/* ------------------------------------------------ entrada al hacer scroll --- */
[data-anima]{opacity:0;transform:translateY(20px) scale(.972)}
[data-anima].esta{opacity:1;transform:none;transition:opacity .42s ease,transform .52s cubic-bezier(.22,1,.32,1)}

/* ------------------------------------------------------------- zoom foto --- */
.pcard__media img,.tarj__media img,.post__f img{
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard__media img,
  .tarj:hover .tarj__media img,
  .post:hover .post__f img{transform:scale(1.055)}
}

/* ------------------------------------------------------- badge con rebote --- */
@keyframes brinca{0%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.09)}100%{opacity:1;transform:scale(1)}}
.pcard__flag{animation:brinca .34s cubic-bezier(.34,1.56,.64,1) .22s both}

/* ------------------------------------- botón que se transforma en palomita --- */
.btn--hecho{background:var(--verde)!important;color:#fff!important;border-color:var(--verde)!important}
.btn__swap{display:inline-flex;align-items:center;gap:7px}
.btn__swap svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.6;fill:none;flex:0 0 15px}
@keyframes entra-swap{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.btn__swap{animation:entra-swap .16s ease both}

/* --------------------------------------------------------- corazón guardar --- */
.pcard__like{
  position:absolute;top:11px;right:11px;z-index:3;width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:var(--borde);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  transition:opacity .18s ease,transform .12s ease;padding:0;
}
.pcard__like svg{width:16px;height:16px;stroke:var(--navy);stroke-width:2;fill:none}
.pcard__like:active{transform:scale(.86)}
.pcard__like[aria-pressed="true"] svg{stroke:var(--rosa);fill:var(--rosa)}
@media (hover:hover) and (pointer:fine){
  .pcard__like{opacity:0}
  .pcard:hover .pcard__like,.pcard__like:focus-visible,.pcard__like[aria-pressed="true"]{opacity:1}
}

/* ----------------------------------------------------- tarjeta con inclinación --- */
/* Sólo en las tarjetas grandes de contenido (.tarj). En las de producto NO:
   ahí el usuario está comparando precios y el movimiento estorba. */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;transition:transform .28s cubic-bezier(.22,1,.32,1)}
  .tilt:hover{transition:transform .08s linear}
}

@media (prefers-reduced-motion:reduce){
  [data-anima]{opacity:1!important;transform:none!important}
  .pcard__flag{animation:none}
  .btn__swap{animation:none}
  .pcard__media img,.tarj__media img,.post__f img,.tilt{transition:none!important;transform:none!important}
}

/* ==========================================================================
   JustCareAI — el asistente de la tienda
   Vive en todas las páginas. Contesta con la información del propio sitio:
   catálogo, fichas, preguntas frecuentes, envíos y el Compromiso Just Care.
   NO llama a ninguna API: corre entero en el navegador de quien pregunta.
   ========================================================================== */
.jcai-tab{
  position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  padding:13px 19px;border-radius:var(--r-pill);border:var(--borde);cursor:pointer;
  background:var(--navy);color:#fff;font:inherit;font-size:.88rem;font-weight:600;
  box-shadow:0 10px 26px rgba(8,26,48,.28);transition:transform .16s ease,box-shadow .16s ease;
}
.jcai-tab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(8,26,48,.34)}
.jcai-tab svg{width:17px;height:17px;stroke:var(--amarillo);stroke-width:2;fill:none;flex:0 0 17px}
.jcai-tab.oculto{display:none}

.jcai{position:fixed;inset:0;z-index:90;display:none}
.jcai.abierto{display:block}
.jcai__velo{position:absolute;inset:0;background:rgba(8,26,48,.42);backdrop-filter:blur(2px)}
.jcai__caja{
  position:absolute;right:18px;bottom:18px;width:min(420px,calc(100vw - 32px));
  height:min(620px,calc(100vh - 36px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--nube-pal);border:var(--borde);border-radius:var(--r-xl);box-shadow:var(--duro-lg);
  animation:jcai-entra .2s cubic-bezier(.22,1,.32,1) both;
}
@keyframes jcai-entra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.jcai__head{
  display:flex;align-items:center;gap:11px;padding:15px 16px;background:var(--navy);color:#fff;flex:0 0 auto;
}
.jcai__head svg{width:18px;height:18px;stroke:var(--amarillo);stroke-width:2;fill:none;flex:0 0 18px}
.jcai__head b{font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.jcai__head span{display:block;font-size:.73rem;color:rgba(255,255,255,.6);font-weight:400}
.jcai__x{margin-left:auto;background:none;border:0;cursor:pointer;padding:6px;display:grid;place-items:center}
.jcai__x svg{stroke:rgba(255,255,255,.72)}
.jcai__hilo{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.jcai__b{max-width:86%;padding:12px 15px;border-radius:var(--r-md);font-size:.88rem;line-height:1.55;animation:entra-swap .22s ease both}
.jcai__b--yo{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.jcai__b--ia{align-self:flex-start;background:#fff;border:var(--borde);box-shadow:var(--suave);border-bottom-left-radius:5px}
.jcai__b b{font-weight:600}
.jcai__b ul{margin:8px 0 0;padding-left:17px;display:grid;gap:5px}
.jcai__esc{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#fff;border:var(--borde);border-radius:var(--r-md)}
.jcai__esc i{width:6px;height:6px;border-radius:50%;background:var(--azul);opacity:.35;animation:jcai-late 1s infinite}
.jcai__esc i:nth-child(2){animation-delay:.16s}.jcai__esc i:nth-child(3){animation-delay:.32s}
@keyframes jcai-late{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.jcai__prod{
  align-self:flex-start;width:86%;display:flex;gap:12px;align-items:center;padding:11px;
  background:#fff;border:var(--borde);border-radius:var(--r-md);box-shadow:var(--suave);text-decoration:none;color:inherit;
}
.jcai__prod img{width:58px;height:58px;border-radius:var(--r-sm);object-fit:contain;padding:5px;flex:0 0 58px}
.jcai__prod b{display:block;font-size:.85rem;font-weight:600;line-height:1.25}
.jcai__prod span{display:block;font-size:.76rem;color:rgba(14,39,71,.6);margin-top:2px}
.jcai__prod em{display:block;font-style:normal;font-weight:700;font-size:.85rem;margin-top:4px;font-variant-numeric:tabular-nums}
.jcai__chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex:0 0 auto}
.jcai__chips button{
  font:inherit;font-size:.78rem;padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;border:var(--borde);color:var(--navy);transition:background .14s ease
}
.jcai__chips button:hover{background:var(--nube)}
.jcai__pie{display:flex;gap:8px;padding:12px 14px;border-top:var(--borde);background:#fff;flex:0 0 auto}
.jcai__pie input{
  flex:1;min-width:0;font:inherit;font-size:16px;color:var(--navy);background:var(--nube-pal);
  border:var(--borde);border-radius:var(--r-pill);padding:12px 16px;
}
.jcai__pie input:focus{outline:2px solid var(--azul);outline-offset:1px}
.jcai__pie button{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--rosa);display:grid;place-items:center;transition:transform .12s ease
}
.jcai__pie button:active{transform:scale(.9)}
.jcai__pie button svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;fill:none}
.jcai__nota{padding:0 16px 12px;margin:0;font-size:.7rem;color:rgba(14,39,71,.45);text-align:center}

@media (max-width:560px){
  .jcai__caja{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
  .jcai-tab{right:12px;bottom:12px;padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .jcai__caja,.jcai__b{animation:none}
  .jcai__esc i{animation:none}
}

/* ------------------------------------------------------- dónde comprar --- */
/* Los logos son marcas de terceros. Se usan los archivos que el PROPIO
   just-care.com publica en su pie (uso nominativo: decir dónde se vende), no
   recreaciones. Van en escala de grises y se despintan al pasar el ratón para
   que no compitan con la marca de la tienda. */
.cadenas{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);align-items:center;
}
.cadenas div{
  background:#fff;border:var(--borde);border-radius:var(--r-md);
  padding:22px 20px;display:grid;place-items:center;min-height:104px;
}
/* A color. Estaban en gris para que no compitieran con la marca, pero el gris
   los volvía ilegibles y le quitaba el punto a la sección: la prueba social es
   justamente que se reconozcan. */
.cadenas img{max-width:100%;max-height:54px;width:auto;height:auto;display:block}
.cadenas__nota{
  grid-column:1/-1;margin:6px 0 0;text-align:center;
  font-size:.78rem;color:rgba(14,39,71,.5);
}
@media (max-width:860px){.cadenas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cadenas img{transition:none}}

/* =========================================================================
   Selector de Just Ask
   Cuatro tarjetas en una fila dejaban ~200px cada una y ahí nada cabía: la
   etiqueta y el valor se encabalgaban y "¿Estoy embarazada?" partía en dos.
   Ahora son CUATRO tarjetas horizontales en 2x2: la foto ocupa el lado
   izquierdo y el texto tiene el doble de ancho para respirar. A partir de
   900px baja a una columna y por debajo de 620px la tarjeta se apila.
   ========================================================================= */
.elige{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ecard{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  background:#fff;border:var(--borde);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--duro);text-decoration:none;color:inherit;
  transition:transform .18s cubic-bezier(.22,1,.32,1),box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .ecard:hover{transform:translateY(-3px);box-shadow:var(--duro-lg)}
}
.ecard__f{background:var(--t-jask);display:grid;place-items:center;padding:16px;min-height:100%}
.ecard__f img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.ecard:hover .ecard__f img{transform:scale(1.06)}}
.ecard__c{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column}
.ecard__ojo{
  align-self:flex-start;margin-bottom:10px;font-size:.65rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rosa-hondo);
  background:var(--blush);border-radius:var(--r-pill);padding:6px 11px;line-height:1.3;
}
.ecard__c h3{margin:0 0 7px;font-family:var(--disp);font-weight:700;font-size:1.14rem;letter-spacing:-.025em;line-height:1.15}
.ecard__c > p{margin:0;font-size:.87rem;line-height:1.55;color:rgba(14,39,71,.7)}
.ecard__d{margin:16px 0 0;padding:0;display:grid;gap:0;border-top:var(--borde)}
.ecard__d > div{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:var(--borde);
}
.ecard__d dt{font-size:.75rem;color:rgba(14,39,71,.52)}
.ecard__d dd{margin:0;font-weight:600;font-size:.87rem;text-align:right;line-height:1.3}
.ecard__ir{
  margin-top:auto;padding-top:15px;display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:600;color:var(--azul);
}
.ecard__ir svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.ecard:hover .ecard__ir svg{transform:translateX(3px)}}

@media (max-width:900px){.elige{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){
  .ecard{grid-template-columns:minmax(0,1fr)}
  .ecard__f{aspect-ratio:16/10;min-height:0}
  .ecard__f img{width:auto;max-height:100%}
}

/* ------------------------------------------------- ficha de Just Ask --- */
/* La ficha genérica de dos columnas aquí quedaba coja: el cuarto grupo era un
   párrafo largo y "Comercializa COMPESA" colgaba solo. Se parte en tres grupos
   parejos y lo textual del empaque sale del cuadro de datos a su propia cita. */
.specs--tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,38px)}
@media (max-width:900px){.specs--tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.specs--tres{grid-template-columns:minmax(0,1fr)}}
.textual{
  margin-top:clamp(22px,3vw,30px);background:var(--nube);border:var(--borde);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);
}
.textual span{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(14,39,71,.5);margin-bottom:12px;
}
.textual ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px}
.textual li{position:relative;padding-left:16px;font-size:.89rem;line-height:1.45;color:rgba(14,39,71,.82);font-weight:500}
.textual li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--azul)}
.textual p{margin:14px 0 0;font-size:.79rem;color:rgba(14,39,71,.55)}
@media (max-width:620px){.textual ul{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ hechos de un vistazo --- */
/* Cuatro cifras grandes antes de cualquier lista. Es el respiro que le faltaba
   a la mitad de abajo de Just Ask: venían el selector, una tabla, la ficha y
   las precauciones seguidas, y la página se leía como un formulario. */
.hechos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.hecho{
  background:#fff;border:var(--borde);border-radius:var(--r-lg);box-shadow:var(--duro);
  padding:clamp(20px,2.4vw,28px) clamp(16px,2vw,22px);text-align:center;
}
.hecho b{
  display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--navy);font-variant-numeric:tabular-nums;
}
.hecho i{display:block;font-style:normal;font-weight:600;font-size:.86rem;margin:9px 0 4px}
.hecho span{display:block;font-size:.76rem;line-height:1.4;color:rgba(14,39,71,.55)}
@media (max-width:760px){.hechos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ----------------------------------------------- precauciones en lista --- */
/* Una sola columna. En dos, la vista salta de izquierda a derecha buscando
   dónde sigue y se pierde justo en el bloque donde menos conviene perderse. */
.cuida{
  background:#fff;border:var(--borde);border-left:4px solid var(--rosa);
  border-radius:var(--r-lg);padding:clamp(22px,2.8vw,32px);box-shadow:var(--duro);
}
.cuida h3{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.cuida h3 svg{width:19px;height:19px;stroke:var(--rosa);stroke-width:2.2;fill:none;flex:0 0 19px}
.cuida > p:first-of-type{margin:0 0 18px;font-size:.87rem;color:rgba(14,39,71,.62)}
.cuida ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.cuida li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  padding:13px 0;border-bottom:var(--borde);font-size:.9rem;line-height:1.5;color:rgba(14,39,71,.8);
}
.cuida li:last-child{border-bottom:0;padding-bottom:0}
.cuida li svg{width:18px;height:18px;stroke-width:2.2;fill:none;margin-top:2px}
.cuida li b{font-weight:600;color:var(--navy)}
.cuida__no svg{stroke:var(--rosa)}
.cuida__ok svg{stroke:var(--verde)}
.cuida__ojo svg{stroke:var(--amarillo)}
.cuida__pie{margin:18px 0 0!important;padding-top:16px;border-top:var(--borde);font-size:.79rem;color:rgba(14,39,71,.55)}

/* ------------------------------------------------------ banda a sangre --- */
/* El recurso que hace que Whoop se vea caro: una imagen a sangre completa,
   oscura, con el texto encima y nada más. Rompe la sucesión de secciones
   blancas y azules justo a la mitad de la home. */
.sangre{
  position:relative;min-height:min(62vh,560px);display:grid;align-items:end;
  background:var(--navy);overflow:hidden;
}
.sangre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%}
/* DOS degradados, no uno. El vertical solo no alcanza: en un monitor ancho el
   texto cae sobre la pared clara de la foto y se vuelve ilegible — el mismo
   problema que ya costó tres intentos en el hero. El horizontal le da piso
   oscuro a la columna de texto y deja la foto limpia del lado derecho. */
.sangre::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,26,48,.93) 0%,rgba(8,26,48,.8) 26%,rgba(8,26,48,.34) 54%,rgba(8,26,48,.06) 78%,rgba(8,26,48,0) 100%),
    linear-gradient(180deg,rgba(8,26,48,.28) 0%,rgba(8,26,48,.18) 45%,rgba(8,26,48,.82) 100%);
}
/* El `max-width:46ch` vivía aquí y se lo heredaba TODO, incluidas las cuatro
   cifras: a 1820px la columna medía 433px, los cuatro datos no cabían en fila
   y se apilaban en tres renglones con la banda estirada a 992px de alto.
   El tope va ahora en el párrafo, que es lo único que de verdad lo necesita. */
.sangre__c{position:relative;z-index:2;color:#fff;padding-block:clamp(40px,6vw,84px)}
.sangre__c .eyebrow{color:var(--amarillo);display:block;margin-bottom:12px}
.sangre__c h2{color:#fff;margin:0 0 16px;max-width:16ch}
.sangre__c p{margin:0 0 26px;font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.55;color:rgba(255,255,255,.82);max-width:48ch}
.sangre__d{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(26px,3.4vw,38px);max-width:660px;
}
.sangre__d div{display:grid;gap:3px}
.sangre__d b{
  font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.035em;line-height:1;color:var(--amarillo);font-variant-numeric:tabular-nums;
}
.sangre__d span{font-size:.8rem;color:rgba(255,255,255,.68)}
@media (max-width:760px){
  /* En una columna el texto ocupa todo el ancho, así que el degradado que
     sirve es el vertical; el horizontal dejaría la mitad derecha lavada. */
  .sangre::after{background:linear-gradient(180deg,rgba(8,26,48,.42) 0%,rgba(8,26,48,.55) 42%,rgba(8,26,48,.92) 100%)}
  .sangre__d{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;max-width:none}
  .sangre__c h2,.sangre__c p{max-width:none}
}
@media (max-width:620px){.sangre{min-height:0}.sangre__c{padding-block:clamp(40px,10vw,64px)}}

/* =========================================================================
   Hero partido
   Tres intentos hasta aquí y el problema siempre fue el mismo: el texto encima
   de la gente. Se lee mal por más gradiente que se le ponga, y el gradiente
   necesario para que se lea termina tapando media foto.

   La solución es la que usa el propio just-care.com en su cabecera: foto de un
   lado, texto del otro, sin encimarse. Así el titular se lee siempre y la foto
   se ve completa. Antonio lo pidió literal: *"una familia feliz o así, y que
   pues que se pueda leer"*.

   La foto es FIJA. Lo único que cambia con el mundo es el texto.
   ========================================================================= */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  background:var(--navy);overflow:hidden;border-bottom:0;align-items:stretch;
}
.hero__c{
  position:relative;z-index:2;color:#fff;align-self:center;
  padding-block:clamp(52px,6.6vw,96px);
  padding-inline:clamp(20px,4vw,60px);
  max-width:none;
}
/* El `.wrap` centra en toda la página; aquí el texto tiene que alinearse al
   borde izquierdo de la ventana, no al del contenedor. */
.hero__c.wrap{margin-inline:0;width:100%}
.hero__c .eyebrow{display:block;color:var(--amarillo);margin-bottom:16px}
.hero__c h1{
  color:#fff;margin:0 0 20px;
  font-size:clamp(2rem,3.4vw,3.5rem);line-height:1.05;letter-spacing:-.04em;text-wrap:balance;
}
.hero__c h1 .rosita{color:var(--amarillo)}
.hero__c > p{
  margin:0 0 30px;max-width:46ch;
  font-size:clamp(.98rem,1.4vw,1.14rem);line-height:1.55;color:rgba(255,255,255,.82);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.hero__f{position:relative;min-height:min(80vh,700px)}
.hero__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;display:block}
/* una transición suave entre el panel navy y la foto, para que no sea un corte
   de tijera */
.hero__f::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(14,39,71,.55) 9%,transparent 26%);
}

.hero__abajo{
  grid-column:1/-1;position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.14);background:rgba(8,26,48,.55);
}
.hero__abajo .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px);
  padding-block:15px;font-size:.81rem;color:rgba(255,255,255,.78);
}
.hero__abajo span{display:inline-flex;align-items:center;gap:8px}
.hero__abajo svg{width:15px;height:15px;stroke:var(--amarillo);stroke-width:2.4;fill:none;flex:0 0 15px}
.hero__caras{display:flex;margin-right:2px}
.hero__caras img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:2px solid rgba(255,255,255,.85);margin-left:-9px;
}
.hero__caras img:first-child{margin-left:0}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero__f{min-height:min(46vh,380px);order:-1}
  .hero__f::before{background:linear-gradient(180deg,transparent 58%,rgba(14,39,71,.6) 82%,var(--navy) 100%)}
  .hero__f img{object-position:center 22%}
  .hero__c{padding-inline:clamp(18px,5vw,28px);padding-block:clamp(30px,7vw,48px)}
  .hero__c h1{max-width:none}
}

/* ---------------------------------------------------- logos fundaciones --- */
.fundlogos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.fundlogos a,.fundlogos div{
  background:#fff;border-radius:var(--r-md);padding:24px 18px 18px;min-height:150px;
  display:grid;grid-template-rows:1fr auto;place-items:center;text-decoration:none;gap:14px;
}
.fundlogos img{max-width:100%;max-height:60px;width:auto;height:auto;display:block;align-self:center}
.fundlogos b{
  font-size:.86rem;font-weight:600;line-height:1.25;text-align:center;color:var(--navy);
}
.fundlogos span{font-size:.78rem;font-weight:500;color:rgba(14,39,71,.62);text-align:center;line-height:1.3}
@media (max-width:860px){.fundlogos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fundlogos{grid-template-columns:minmax(0,1fr)}}

/* =========================================================================
   Carrito que acompaña y venta cruzada
   Antonio, 17 sep 2026: *"que siempre te acompañe el carrito para que puedas
   pedir, y que cuando agregas algo siempre te recomiende agregar otro"*.
   ========================================================================= */

/* --- pastilla flotante: sólo aparece cuando ya hay algo dentro --- */
.carrito-flota{
  position:fixed;left:18px;bottom:18px;z-index:78;
  display:none;align-items:center;gap:11px;
  padding:12px 18px 12px 14px;border-radius:var(--r-pill);border:var(--borde);cursor:pointer;
  background:var(--rosa);color:#fff;font:inherit;font-size:.86rem;font-weight:600;
  box-shadow:0 10px 26px rgba(224,66,143,.32);
  transition:transform .16s ease,box-shadow .16s ease;
}
.carrito-flota.hay{display:inline-flex;animation:entra-swap .24s ease both}
.carrito-flota:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(224,66,143,.4)}
.carrito-flota svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;flex:0 0 18px}
.carrito-flota i{
  font-style:normal;background:#fff;color:var(--rosa);border-radius:var(--r-pill);
  padding:2px 8px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .carrito-flota{left:12px;bottom:12px;padding:11px 15px 11px 12px;font-size:.8rem}
}

/* --- "va bien con esto", dentro del cajón --- */
.cruz{border-top:var(--borde);padding:18px 0 4px;margin-top:6px}
.cruz__t{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(14,39,71,.5);margin-bottom:4px;
}
.cruz__s{display:block;font-size:.82rem;color:rgba(14,39,71,.6);margin-bottom:14px;line-height:1.45}
.cruz__l{display:grid;gap:10px}
.cruz__i{
  display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:var(--nube-pal);border:var(--borde);border-radius:var(--r-md);padding:10px;
}
.cruz__i img{width:54px;height:54px;border-radius:var(--r-sm);object-fit:contain;padding:4px}
.cruz__i b{display:block;font-size:.85rem;font-weight:600;line-height:1.25}
.cruz__i span{display:block;font-size:.76rem;color:rgba(14,39,71,.6);margin-top:2px}
.cruz__i em{display:block;font-style:normal;font-weight:700;font-size:.84rem;margin-top:3px;font-variant-numeric:tabular-nums}
.cruz__i .btn{white-space:nowrap}

/* ============================================ CANALES DE COMPRA (20 sep) ===
   Sustituyen a la caja de compra. El cliente no quiso ecommerce: la página
   enseña y manda a comprar a donde la gente ya compra. Cada canal lleva su
   color propio en --canal para que se distingan de un vistazo sin tener que
   reproducir logotipos ajenos. */
.donde{margin:22px 0 4px}
.donde__t{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(14,39,71,.55);margin:0 0 11px;
}
.donde__pie{font-size:.8rem;color:rgba(14,39,71,.6);margin:13px 0 0;line-height:1.5}
.canal{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:14px 16px;margin-bottom:9px;text-decoration:none;color:var(--navy);
  background:#fff;border:var(--borde);border-radius:var(--r-md);box-shadow:var(--duro);
  border-left:4px solid var(--canal,var(--rosa));
  transition:transform .16s ease,box-shadow .16s ease;
}
.canal:hover{transform:translateY(-2px);box-shadow:var(--duro-lg)}
.canal__ico{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--canal) 12%,#fff);
}
.canal__ico svg{width:19px;height:19px;stroke:var(--canal);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.canal__t{display:grid;gap:1px;min-width:0}
.canal__t b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.canal__t span{font-size:.78rem;color:rgba(14,39,71,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canal__fl{width:16px;height:16px;stroke:var(--canal);stroke-width:2.2;fill:none;flex:none}
.canal--sm{padding:10px 13px;gap:10px}
.canal--sm .canal__ico{width:30px;height:30px}
.canal--sm .canal__ico svg{width:15px;height:15px}
.canal--sm .canal__t b{font-size:.85rem}

/* el claim transversal, debajo del titular de cada producto */
.pdp__claim2{
  margin:10px 0 0;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rosa-hondo);
}

/* ================================ RECORRIDO SOCIAL · TikTok → IG → tienda ===
   Pedido del cliente (20 sep 2026): que la navegación se sienta como las
   plataformas que la gente ya usa, y que el contenido social lleve a la
   compra. Por eso el carrete es VERTICAL 9:16 —el formato de TikTok y de
   Reels— y no la rejilla cuadrada de catálogo que teníamos. */
.social{background:var(--navy);color:#fff}
.social .sec__head h2,.social .sec__head .lede{color:#fff}
.social .sec__head .lede{color:rgba(255,255,255,.72)}
.social .eyebrow{color:var(--amarillo)}

.feed{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,calc(20% - 13px));
  gap:clamp(10px,1.4vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:4px 2px 12px;
}
.feed::-webkit-scrollbar{display:none}
.feed > *{scroll-snap-align:start}
.clip{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  display:block;text-decoration:none;background:#0b1d33;
  border:1px solid rgba(255,255,255,.14);
}
.clip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.clip:hover img{transform:scale(1.05)}
.clip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,48,.05) 38%,rgba(8,26,48,.85) 100%);
}
.clip__play{
  position:absolute;top:10px;left:10px;z-index:2;width:28px;height:28px;border-radius:50%;
  background:rgba(8,26,48,.55);backdrop-filter:blur(6px);display:grid;place-items:center;
}
.clip__play svg{width:12px;height:12px;fill:#fff}
.clip__pie{position:absolute;left:11px;right:11px;bottom:10px;z-index:2;color:#fff}
.clip__pie b{display:block;font-size:.84rem;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.clip__pie span{font-size:.7rem;opacity:.8}

/* los tres pasos del recorrido */
.ruta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,22px);
  margin-top:clamp(28px,3.4vw,42px);
}
.rpaso{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:20px 22px;position:relative;
}
.rpaso__n{
  width:26px;height:26px;border-radius:8px;background:var(--amarillo);color:var(--navy);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.8rem;margin-bottom:12px;
}
.rpaso h3{margin:0 0 6px;font-size:1rem;font-weight:700;color:#fff}
.rpaso p{margin:0;font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.72)}
.rpaso__l{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.82rem;font-weight:600;color:var(--amarillo);text-decoration:none}
.rpaso__l svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
.rpaso .canal{background:rgba(255,255,255,.95);margin-bottom:7px}

@media (max-width:860px){
  .ruta{grid-template-columns:minmax(0,1fr)}
  .feed{grid-auto-columns:minmax(148px,44%)}
}

/* ============================== DEL ANAQUEL A LA PANTALLA (20 sep 2026) ===
   El cliente pidió comunicar "tiendas físicas → online" y que se sienta que
   la marca está en todos lados. La flecha del centro es el mensaje: a la
   izquierda el anaquel de siempre, a la derecha los canales en línea. */
.puente{
  display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(14px,2.4vw,30px);
  margin:clamp(26px,3.4vw,42px) 0 clamp(30px,3.8vw,46px);
}
.puente__f{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;border:var(--borde);box-shadow:var(--duro)}
.puente__f img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.puente__f figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;
  font-size:.85rem;font-weight:600;
  background:linear-gradient(transparent,rgba(8,26,48,.82));
}
.puente__fl{width:42px;height:42px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none}
.puente__fl svg{width:20px;height:20px;stroke:var(--amarillo);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.puente__t{
  margin:0 0 11px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(14,39,71,.55);
}
@media (max-width:820px){
  .puente{grid-template-columns:minmax(0,1fr);gap:14px}
  .puente__fl{transform:rotate(90deg);margin-inline:auto}
}

/* ------------------------------------------------ slogan junto a la marca ---
   "Cuidado que sí resuelve": práctico, honesto y real, que son los tres
   atributos que pidió el cliente. Se evita a propósito la palabra "simple",
   que ellos consideran que se malinterpreta. */
.head__slogan{
  font-family:var(--disp);font-weight:600;font-size:.62rem;line-height:1.15;
  letter-spacing:.01em;color:var(--rosa-hondo);
  padding-left:10px;margin-left:2px;border-left:1.5px solid var(--nube);
}
@media (max-width:900px){ .head__slogan{display:none} }
.foot__slogan{
  font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--amarillo);margin:0 0 8px;
}