/* ---------- tipografía ----------
   Jost servida desde acá y no desde fonts.googleapis.com. Antes cada visita
   pedía la hoja de estilos a Google y el archivo a gstatic, o sea dos
   conexiones a terceros y la IP de la persona viajando a Google antes de que
   pudiera decidir nada sobre cookies. Ahora sale todo del mismo dominio.

   Es UNA sola tipografía variable, no cinco archivos: Google ya servía el
   mismo .woff2 para los cinco pesos y lo declaraba cinco veces. Por eso acá
   va un font-weight con rango (200 600) en vez de cinco reglas.

   Descargados de fonts.gstatic.com (Jost v20, SIL Open Font License 1.1).
   El corte cirílico no se bajó: el sitio es en español y no hay una sola
   palabra que lo use. Si algún día hace falta, es el tercer archivo de
   https://fonts.googleapis.com/css2?family=Jost:wght@200..600
   Para actualizar la tipografía: volver a pedir ese CSS con un User-Agent de
   navegador moderno, bajar los .woff2 nuevos y subir el v20 del nombre. */
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url("assets/fonts/jost-v20-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url("assets/fonts/jost-v20-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#102854;
  --navy-700:#0B1C3B;
  --petroleo:#2E7D74;
  --petroleo-600:#256760;
  --bone:#FFFFFF;
  --bone-2:#FAF9F7;
  --line:#E4E2DD;
  --muted:#6A716D;
  --white:#FFFFFF;
  --sold:#B23A2B;

  --display:"Jost",system-ui,sans-serif;
  --body:"Jost",system-ui,sans-serif;

  --pad:clamp(20px,5vw,40px);
  --gap-s:clamp(64px,9vw,112px);
  /* Aire a cada lado de la cruz que divide dos secciones. */
  --seam:clamp(44px,6vw,76px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--navy);
  font-family:var(--body);font-size:17.5px;font-weight:300;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--petroleo);outline-offset:3px;
}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--pad)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- tipografía ---------- */
.hero .eyebrow{margin-bottom:26px}
.eyebrow{
  font-family:var(--display);font-size:11.5px;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--petroleo);
  margin:0 0 20px;
}
.eyebrow--pale{color:rgba(255,255,255,.55)}

h1,h2{font-family:var(--display);font-weight:200;text-transform:uppercase;line-height:1.03;margin:0}
h1{font-size:clamp(40px,7vw,86px);letter-spacing:.005em;max-width:13ch}
h2{font-size:clamp(28px,4.4vw,52px);letter-spacing:.012em}
h3{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.09em;
   text-transform:uppercase;line-height:1.3;margin:0}

.lede{font-size:clamp(17px,1.8vw,20px);font-weight:300;line-height:1.62;color:var(--muted);margin:22px 0 0;max-width:52ch}
.lede--wide{max-width:60ch}

/* ---------- la cruz: elemento de firma ---------- */
.rule{display:flex;align-items:center;gap:20px;margin:0}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.cross{display:block;position:relative;width:15px;height:15px;flex:0 0 auto}
.cross::before,.cross::after{
  content:"";position:absolute;background:var(--petroleo);border-radius:2px;
}
.cross::before{left:50%;top:0;width:3.4px;height:100%;transform:translateX(-50%)}
.cross::after{top:50%;left:0;height:3.4px;width:100%;transform:translateY(-50%)}
.cross--pale::before,.cross--pale::after{background:rgba(255,255,255,.42)}

/* ---------- header ---------- */
.head{
  padding:22px 0;border-bottom:1px solid var(--line);
  position:sticky;top:var(--preventa-bar-h,0px);background:var(--bone);z-index:10;
  transition:padding .25s ease,box-shadow .25s ease;
}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.head-logo{display:flex;align-items:center}
.head img{height:30px;width:auto;transition:height .25s ease}
.head.is-scrolled{padding:13px 0;box-shadow:0 1px 0 rgba(16,40,84,.07)}
.head.is-scrolled img{height:24px}

.head-nav{display:flex;align-items:center;gap:30px;margin:0 auto 0 0;padding:0;list-style:none}
.head-nav a{
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding-bottom:3px;position:relative;transition:color .18s ease;
}
.head-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--petroleo);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.head-nav a:hover{color:var(--navy)}
.head-nav a.is-active{color:var(--navy)}
.head-nav a.is-active::after{transform:scaleX(1)}

/* El botón y el panel los arma script.js, así el markup no se repite en
   las seis páginas. Arriba de 1060px no existen: manda .head-nav. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;flex:0 0 auto;
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--navy);cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.nav-toggle:hover{border-color:var(--petroleo);color:var(--petroleo)}
.nav-toggle-bars{position:relative;display:block;width:17px;height:1.6px;
  background:currentColor;border-radius:2px;transition:background .2s ease}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;
  background:currentColor;border-radius:2px;transition:transform .2s ease;
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* El panel vive adentro de .head, así que el padding inferior del header
   le queda debajo: sin este margen negativo el menú no llega al borde. */
.nav-panel{
  background:var(--bone);border-top:1px solid var(--line);
  margin-bottom:-22px;transition:margin-bottom .25s ease;
}
.head.is-scrolled .nav-panel{margin-bottom:-13px}
/* .head .wrap es flex; adentro del panel el contenedor tiene que volver
   a ser un bloque o el nav se encoge al ancho de su contenido. */
.nav-panel .wrap{display:block}
.nav-panel[hidden]{display:none}
.nav-panel nav{display:flex;flex-direction:column;padding:4px 0 12px}
.nav-panel a{
  font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:14px 0;border-bottom:1px solid var(--line);transition:color .18s ease;
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a:hover,.nav-panel a.is-active{color:var(--navy)}

@media (max-width:1060px){
  .head-nav{display:none}
  .nav-toggle{display:inline-flex}
}
@media (min-width:1061px){
  .nav-panel{display:none}
}

.head-account{display:flex;align-items:center;gap:14px;flex:0 1 auto}
.account-link{
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy);
  transition:color .18s ease;white-space:nowrap;
}
.account-link:hover{color:var(--petroleo)}
.account-name{
  font-size:13px;color:var(--muted);max-width:160px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;
}
.account-logout{
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:0;transition:color .18s ease;
  white-space:nowrap;flex:0 0 auto;
}
.account-logout:hover{color:var(--sold)}
@media (max-width:600px){
  .account-name{display:none}
}

.cart-trigger{
  font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);background:none;border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;cursor:pointer;transition:border-color .18s,color .18s;flex:0 0 auto;
}
.cart-trigger:hover{border-color:var(--petroleo);color:var(--petroleo)}
.cart-trigger span{font-weight:600}

/* ---------- hero ---------- */
.hero{padding:clamp(64px,9vw,110px) 0 clamp(72px,9vw,112px);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .lede{max-width:48ch}
.hero .lede,.hero .fineprint{max-width:560px}
@media (min-width:900px){
  .hero .lede,.hero .fineprint{max-width:min(560px,58%)}
}
.hero-mark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  height:138%;width:auto;max-width:none;opacity:.055;filter:grayscale(1);
  pointer-events:none;user-select:none;z-index:0;
}
/* En mobile los clamp del hero caen todos en su valor mínimo (9vw a 390px son
   35px), así que el alto lo fijan los pisos: 64+72 de padding más los márgenes
   internos. Son medidas pensadas para desktop y acá dejan al primer ambo del
   catálogo a más de una pantalla de distancia. Se recortan solo en pantallas
   chicas; arriba de 600px el hero queda igual que siempre. */
@media (max-width:600px){
  .hero{padding:36px 0 40px}
  .hero .eyebrow{margin-bottom:14px}
  .hero .lede{margin-top:16px}
  .hero .btn{margin-top:26px}
  .hero .fineprint{margin-top:14px}
}

/* ---------- llamados a la acción ---------- */
.btn{
  display:inline-block;margin-top:36px;
  font-family:var(--display);font-size:13.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);background:var(--navy);border:1px solid var(--navy);
  border-radius:8px;padding:15px 30px;cursor:pointer;
  transition:background .18s,border-color .18s,transform .1s;
}
.btn:hover{background:var(--petroleo);border-color:var(--petroleo)}
.btn:active{transform:translateY(1px)}
.fineprint{font-size:14px;color:var(--muted);margin:15px 0 0;max-width:46ch}

/* ---------- secciones ---------- */
.sec{padding:var(--gap-s) 0;scroll-margin-top:calc(90px + var(--preventa-bar-h,0px))}
.sec .rule{max-width:200px;margin:0 auto 30px}
.sec-head{max-width:60ch;margin:0 0 clamp(40px,5vw,60px)}

/* ---------- divisores entre secciones ----------
   La cruz va centrada exactamente sobre el borde entre dos secciones, con el
   mismo aire arriba y abajo. Antes vivía adentro de la sección de abajo,
   después de su padding, y quedaba entre 8 y 150 px por debajo de la división,
   con 140 a 240 px de aire arriba y 38 abajo.

   Cómo: la sección que abre con divisor y la anterior se reparten el hueco
   (--seam cada una), y el divisor se corre hacia arriba con un margen negativo
   de todo su padding más la mitad de su alto, devolviendo lo mismo abajo. Así
   su centro cae en el borde y el contenido empieza donde empezaría sin él.
   Aplica solo entre secciones: la primera de la página (los encabezados de las
   páginas legales) no tiene nada arriba que dividir.

   Las secciones con marca de agua (.manifesto, .close) antes cortaban lo que
   sobresalía, y eso cortaba la mitad de arriba de la cruz. Ahora la marca vive
   en .mark-clip, que recorta solo la marca. */
section + section:has(> .wrap > .rule:first-child, > .wrap > div:first-child > .rule:first-child){
  padding-top:var(--seam);
}
section:has(+ section > .wrap > .rule:first-child, + section > .wrap > div:first-child > .rule:first-child){
  padding-bottom:var(--seam);
}
section + section > .wrap > .rule:first-child,
section + section > .wrap > div:first-child > .rule:first-child{
  position:relative;z-index:2;
  margin:calc(-1 * var(--seam) - 7.5px) auto calc(var(--seam) - 7.5px);
}
/* Sobre un borde entre blanco y azul, la cruz necesita fondo propio para
   leerse en las dos mitades. Sobre blanco el disco no se ve. Y en un borde
   siempre va el petróleo: la versión pálida desaparece sobre blanco. */
section + section > .wrap > .rule:first-child .cross,
section + section > .wrap > div:first-child > .rule:first-child .cross{
  border-radius:50%;background:var(--bone);box-shadow:0 0 0 8px var(--bone);
}
section + section > .wrap > .rule:first-child .cross--pale::before,
section + section > .wrap > .rule:first-child .cross--pale::after,
section + section > .wrap > div:first-child > .rule:first-child .cross--pale::before,
section + section > .wrap > div:first-child > .rule:first-child .cross--pale::after{
  background:var(--petroleo);
}
.mark-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---------- colección ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
/* .grid2 nació para las dos fichas de producto, que van pegadas. Con dos
   bloques de texto al lado —misión y visión— ese aire es poco y las columnas
   se leen como una sola. */
.grid2--texto{gap:clamp(32px,5vw,64px)}
.grid2--texto .pillar p{font-size:16.5px;line-height:1.65}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-img{position:relative;aspect-ratio:3/4;background:#E4E2DD;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.card-body{padding:22px clamp(18px,2.2vw,26px) 26px}
.card-body h3{margin:0 0 5px}
.card-meta{font-size:15px;color:var(--muted);margin:0}
/* Res. 4/2025: el importe sin impuestos nacionales va junto al precio final,
   siempre en tipografía menor que este. */
.price-neto{font-size:11.5px;line-height:1.4;letter-spacing:.02em;color:var(--muted);margin:3px 0 0}
.color-picker{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line)}
.color-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px 6px 7px;cursor:pointer;transition:border-color .16s;
}
.color-btn:hover{border-color:var(--petroleo)}
.color-btn.is-selected{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.color-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(16,40,84,.18);flex:0 0 auto}
.size-picker{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.size-btn{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:8px 12px;cursor:pointer;transition:border-color .16s,background .16s,color .16s;
}
.size-btn:hover{border-color:var(--petroleo)}
.size-btn.is-selected{background:var(--navy);border-color:var(--navy);color:var(--white)}
.size-btn:disabled{
  color:#B9B6AE;background:var(--bone-2);border-color:var(--line);
  text-decoration:line-through;cursor:not-allowed;
}
.qty-picker{display:flex;align-items:center;gap:14px;margin:14px 0 0}
.qty-btn{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:var(--white);
  color:var(--navy);font-size:16px;line-height:1;cursor:pointer;transition:border-color .16s;
}
.qty-btn:hover{border-color:var(--petroleo)}
.qty-value{font-family:var(--display);font-size:14px;font-weight:600;min-width:1.4em;text-align:center}
.card-buy{
  display:block;width:100%;margin-top:18px;text-align:center;border:0;cursor:pointer;
  font-family:var(--display);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);background:var(--navy);border-radius:8px;
  padding:13px;transition:background .18s;
}
.card-buy:hover{background:var(--petroleo)}

/* ---------- pilares ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.pillar{border-top:1px solid var(--line);padding-top:22px}
.pillar .cross{margin-bottom:20px}
.pillar h3{margin:0 0 9px}
.pillar p{font-size:15.5px;line-height:1.58;color:var(--muted);margin:0}

/* ---------- pasos (equipos) ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.step{border-top:1px solid var(--line);padding-top:22px}
.step-number{
  display:block;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.12em;color:var(--petroleo);margin-bottom:14px;
}
.step h3{margin:0 0 9px}
.step-opcional{
  margin-left:7px;font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.step p{font-size:15.5px;line-height:1.58;color:var(--muted);margin:0}

/* ---------- faq (equipos) ---------- */
/* ---------- ficha técnica ---------- */
/* dl y no una tabla: es una lista de pares dato/valor, no una grilla con
   filas y columnas comparables. */
.ficha{margin:0;border-top:1px solid var(--line)}
.ficha-fila{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.ficha dt{
  font-family:var(--display);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo);
}
.ficha dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.ficha dd a{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}
/* Cuando un dato tiene un valor distinto por línea (la composición de la tela,
   por ejemplo), esto nombra cuál es cuál sin abrir otra fila. */
.ficha-variante{color:var(--navy);font-weight:500}
@media (min-width:700px){
  .ficha-fila{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0 32px;align-items:baseline}
}

.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--display);font-size:16px;font-weight:400;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:22px;font-weight:300;color:var(--petroleo);flex:0 0 auto;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:70ch}

/* ---------- formulario de equipos ---------- */
.team-form{display:flex;flex-direction:column;gap:18px;max-width:480px;margin:36px auto 0;text-align:left}
.team-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted)}
.team-form input,.team-form textarea{
  font-family:var(--body);font-size:16px;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;transition:border-color .18s,box-shadow .18s;resize:vertical;
}
.team-form input:focus,.team-form textarea:focus{
  outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(46,125,116,.16);
}
.team-form .btn{margin-top:4px;width:100%;text-align:center}
.team-form[hidden]{display:none}
.field-hint{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* ---------- manifiesto ---------- */
.manifesto{
  background:var(--navy);color:var(--white);
  padding:clamp(72px,10vw,124px) 0;position:relative;
  scroll-margin-top:0;
}
.manifesto .wrap{position:relative;z-index:1}
.manifesto-mark{
  position:absolute;left:-9%;bottom:-34%;width:min(52vw,620px);
  opacity:.07;pointer-events:none;user-select:none;z-index:0;
}
.manifesto h2{max-width:17ch}
.manifesto .rule{max-width:200px;margin:0 auto 30px}
.manifesto .rule::before,.manifesto .rule::after{background:rgba(255,255,255,.22)}
.manifesto-body{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  margin-top:clamp(34px,4vw,52px);
}
.manifesto-body p{
  font-size:17px;line-height:1.68;color:rgba(255,255,255,.76);margin:0 0 20px;
}
.manifesto-body p:last-child{margin-bottom:0}
.manifesto-body strong{color:var(--white);font-weight:500}

/* ---------- cierre ---------- */
.close{padding:var(--gap-s) 0;text-align:center;position:relative;scroll-margin-top:calc(60px + var(--preventa-bar-h,0px))}
.close .wrap{position:relative;z-index:1}
.close-mark{position:absolute;left:-8%;top:50%;transform:translateY(-50%);
  height:128%;width:auto;max-width:none;opacity:.045;filter:grayscale(1);
  pointer-events:none;user-select:none;z-index:0;}
.close .rule{max-width:200px;margin:0 auto 30px}
.close h2{max-width:20ch;margin-inline:auto}
.close .lede{margin-inline:auto;text-align:center}
.close .fineprint{margin-inline:auto;text-align:center}

/* ---------- fidelización ---------- */
.loyalty-widget{margin-top:clamp(28px,4vw,40px)}
.loyalty-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
.loyalty-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.2vw,22px)}
.loyalty-card-status{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.loyalty-card.is-done{border-color:rgba(46,125,116,.35)}
.loyalty-card.is-done .loyalty-card-status{color:var(--petroleo)}
.loyalty-card-value{
  font-family:var(--display);font-size:clamp(19px,2vw,22px);font-weight:200;
  text-transform:uppercase;color:var(--navy);margin:0;
}
.loyalty-card-meta{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.loyalty-status{margin:28px 0 0;font-size:15.5px;color:var(--muted)}
.loyalty-status strong{color:var(--navy);font-family:var(--display);font-weight:600}
.loyalty-widget .btn{margin-top:22px}
.loyalty-rewards{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.loyalty-rewards-title{
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin:0 0 12px;
}
.loyalty-rewards ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.loyalty-rewards li{font-size:15px;color:var(--muted)}
.loyalty-rewards a{color:var(--petroleo);text-decoration:underline;text-underline-offset:2px}
.loyalty-coupon-code{
  font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.04em;
  color:var(--petroleo);margin:0 0 6px;
}
.loyalty-coupon-note{font-size:13.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.loyalty-coupon-note:last-child{margin-bottom:0}
@media (max-width:600px){
  .loyalty-milestone-label{font-size:10.5px}
}

/* ---------- footer ---------- */
.foot{background:var(--bone-2);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 34px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.foot img{height:26px;width:auto;margin-bottom:16px}
.foot-about{font-size:15px;color:var(--muted);margin:0;max-width:34ch}
.foot h4{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin:0 0 15px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:15px;color:var(--muted)}
.foot li a{color:var(--muted);transition:color .16s}
.foot li a:hover{color:var(--petroleo)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(38px,5vw,56px);padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);
}
.foot li.foot-support{margin-top:16px;line-height:1.55}
.foot-support-title{
  display:block;margin-bottom:3px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);
}

/* Franja legal obligatoria. El botón de arrepentimiento tiene que verse
   distinto del resto de los links: la norma pide que esté destacado. */
.foot-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
}
.foot-arrep{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  color:var(--navy);background:var(--white);border:1.5px solid var(--navy);border-radius:8px;
  padding:11px 18px;transition:background .18s,color .18s;
}
.foot-arrep:hover{background:var(--navy);color:var(--white)}
.foot-legal-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot .foot-legal-links li{margin:0;font-size:13.5px}
/* El logo de ARCA es una imagen vertical de 239x327: se acota por altura y
   el ancho sale del alto intrínseco, sin deformarlo. */
.foot-datafiscal{margin-left:auto;display:inline-flex;line-height:0;opacity:.92;transition:opacity .16s}
.foot-datafiscal:hover{opacity:1}
.foot-datafiscal img{height:56px;width:auto;display:block}

/* ---------- motion ---------- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}

/* ---------- modal de cuenta ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(16,40,84,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay[hidden]{display:none}
.modal{
  position:relative;width:100%;max-width:420px;background:var(--white);
  border-radius:14px;padding:clamp(28px,4vw,40px);
  box-shadow:0 24px 60px rgba(16,40,84,.28);
}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:0;background:none;color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;transition:background .16s,color .16s;
}
.modal-close:hover{background:var(--bone-2);color:var(--navy)}
.modal-title{font-size:22px;margin:0 0 22px}
.modal-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.modal-tab{
  font-family:var(--display);font-size:12.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer;
  padding:0 0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.modal-tab:hover{color:var(--navy)}
.modal-tab.is-active{color:var(--navy);border-color:var(--petroleo)}
.modal-form{display:flex;flex-direction:column;gap:16px}
.modal-form[hidden]{display:none}
.modal-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted)}
.modal-form input{
  font-family:var(--body);font-size:16px;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;transition:border-color .18s,box-shadow .18s;
}
.modal-form input:focus{
  outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(46,125,116,.16);
}
.modal-form .btn{margin-top:4px;width:100%;text-align:center}
.modal-note{
  font-family:var(--display);font-size:13px;font-weight:600;margin:0;
  display:none;
}
.modal-note.show{display:block}
.modal-note.ok{color:var(--petroleo)}
.modal-note.err{color:var(--sold)}
.modal-link{
  align-self:flex-start;
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--petroleo);
  background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.modal-link[hidden]{display:none}
.modal-link:hover{color:var(--navy)}
.modal-link:disabled{color:var(--muted);cursor:default;text-decoration:none}

/* ---------- carrito (drawer lateral) ---------- */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(420px,100vw);background:var(--white);
  box-shadow:-14px 0 40px rgba(16,40,84,.18);
  padding:clamp(28px,4vw,36px) clamp(22px,3vw,30px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);visibility:hidden;
  transition:transform .32s ease,visibility 0s linear .32s;
}
.cart-drawer.is-open{transform:translateX(0);visibility:visible;transition:transform .32s ease}
.cart-scrim{position:fixed;inset:0;z-index:99;background:rgba(16,40,84,.45)}
.cart-scrim[hidden]{display:none}
/* Bloquea el scroll del fondo mientras hay un diálogo abierto. */
body.is-locked{overflow:hidden}
.cart-empty{color:var(--muted);font-size:15px;margin:0}
.cart-items{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.cart-item{
  display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.cart-item-info{display:flex;flex-direction:column;gap:2px}
.cart-item-info strong{font-family:var(--display);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.cart-item-info span{font-size:13px;color:var(--muted)}
.cart-item-qty{display:flex;align-items:center;gap:8px}
.cart-item-price{font-family:var(--display);font-size:13px;font-weight:600;white-space:nowrap}
.cart-item-remove{
  width:26px;height:26px;border-radius:50%;border:0;background:none;color:var(--muted);
  font-size:18px;cursor:pointer;transition:color .16s,background .16s;
}
.cart-item-remove:hover{color:var(--sold);background:var(--bone-2)}

.cart-summary{display:flex;flex-direction:column;gap:20px;margin-top:24px}
.cart-summary[hidden]{display:none}
.cart-coupon{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted)}
.cart-coupon input{
  font-family:var(--body);font-size:15px;color:var(--navy);background:var(--white);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;text-transform:uppercase;
}
.cart-coupon input:focus{outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(46,125,116,.16)}

.cart-payment{display:flex;flex-direction:column;gap:10px}
.cart-payment-label{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);
}
.cart-payment label{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--navy)}
.cart-payment label em{color:var(--muted);font-style:normal;font-size:13px}
.cart-payment label.is-disabled{color:var(--muted)}

.cart-totals{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.cart-totals-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--muted)}
.cart-discount-row{color:var(--petroleo)}
.cart-total-row{font-family:var(--display);font-size:16px;font-weight:600;color:var(--navy)}
.cart-item-neto{grid-column:1/-1;margin:-6px 0 0;text-align:right}
.cart-anticipo-row{color:var(--navy);font-weight:500;padding-top:8px;border-top:1px solid var(--line)}
.cart-total-neto{margin:-4px 0 0;text-align:right}

.cart-shipping{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cart-shipping legend{padding:0;margin-bottom:10px}
.cart-shipping label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;color:var(--muted)}
.cart-shipping .is-wide{grid-column:1/-1}
.cart-shipping input,.cart-shipping select{
  font-family:var(--body);font-size:15px;color:var(--navy);background:var(--white);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;min-width:0;
}
.cart-shipping input:focus,.cart-shipping select:focus{
  outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(46,125,116,.16);
}
.cart-shipping [aria-invalid="true"]{border-color:var(--sold)}

.cart-summary .btn{width:100%;text-align:center;margin-top:4px}

.cart-success{text-align:center;display:flex;flex-direction:column;gap:16px;margin-top:20px}
.cart-success[hidden]{display:none}
.cart-success .btn{width:100%;text-align:center;margin-top:0}
.cart-success .fineprint{max-width:100%;margin:0}
.cart-success .fineprint a{color:var(--petroleo);text-decoration:underline;text-underline-offset:2px}

/* ---------- guía de talles ---------- */
.size-guide-link{
  display:inline-block;margin:12px 0 0;font-family:var(--display);font-size:12.5px;
  font-weight:500;letter-spacing:.04em;color:var(--petroleo);text-decoration:underline;
  text-underline-offset:3px;
}
.size-guide-link:hover{color:var(--navy)}

.size-calc{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:clamp(26px,4vw,40px);max-width:640px;margin:0 auto;
}
/* ---------- recomendador de talles (guia-talles.html) ---------- */
/* Un paso por pantalla. En celular el panel ocupa el ancho y el botón queda
   abajo, como una app. Desde 900px pasa a dos columnas: título y resumen de
   respuestas a la izquierda, la pregunta actual a la derecha. */
.recomendador{padding-block:clamp(28px,5vw,72px) clamp(56px,8vw,104px)}
.reco-wrap{display:grid;gap:28px}
.reco-lado h1{margin-top:4px}
.reco-lado .lede{max-width:44ch}
.reco-resumen{display:none}
.reco-lado .saved-sizes{margin-top:28px}

.reco-panel{display:flex;flex-direction:column;gap:14px}
.reco-paso{display:flex;flex-direction:column}
.reco-paso[hidden]{display:none}
.reco-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.reco-atras,.reco-atras-hueco{width:34px;height:34px;flex:none}
.reco-atras{
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:none;color:var(--navy);cursor:pointer;transition:background .16s;
}
.reco-atras svg{width:22px;height:22px}
.reco-atras:hover{background:var(--bone-2)}
/* La pista es el span; el i es lo que se llena, y su ancho lo pone el JS. */
.reco-prog{flex:1;display:flex;justify-content:center}
.reco-prog span{display:block;width:120px;height:1px;background:var(--line)}
.reco-prog i{display:block;width:0;height:1px;background:var(--navy);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.reco-prog i{transition:none}}

/* En celular el paso fluye: la pregunta arriba y el botón justo debajo, sin
   estirar el panel hasta el pie de la pantalla, que dejaba el botón fuera de
   vista detrás del título de la página. En desktop sí se centra en alto fijo. */
.reco-cuerpo{
  flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;
  margin:0;padding:24px 0 28px;border:0;min-width:0;text-align:center;
}
.reco-pregunta{
  margin:0 auto;padding:0;float:none;max-width:30ch;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);text-wrap:balance;
}
.reco-pregunta:focus{outline:none}
.reco-pregunta:focus-visible{outline:2px solid var(--petroleo);outline-offset:6px}
.reco-ayuda{margin:-18px 0 0;font-size:14.5px;color:var(--muted)}
.reco-opcional{margin-left:6px;font-size:10.5px;letter-spacing:.12em;color:var(--muted)}

/* Opciones: el radio real queda accesible pero invisible; se dibuja el span. */
.reco-panel input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.reco-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin:0 auto}
.reco-opcion span{
  display:block;padding:20px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .16s,background .16s,color .16s;
}
.reco-opcion span:hover{border-color:var(--petroleo)}
.reco-opcion input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--white)}

.reco-caminos{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;margin:0 auto;text-align:left}
.reco-camino > span{
  display:flex;flex-direction:column;gap:3px;padding:18px 18px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;transition:border-color .16s,box-shadow .16s;
}
.reco-camino > span:hover{border-color:var(--petroleo)}
.reco-camino input:checked + span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.reco-camino strong{font-weight:500;font-size:16px;color:var(--navy)}
.reco-camino small{font-size:14px;color:var(--muted);line-height:1.4}
.reco-camino em{
  margin-top:6px;font-style:normal;font-family:var(--display);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo);
}

.reco-opcion input:focus-visible + span,
.reco-camino input:focus-visible + span,
.reco-escala input:focus-visible + .marca,
.reco-tres input:focus-visible + span{outline:2px solid var(--petroleo);outline-offset:3px}

/* Números grandes */
.reco-datos{display:flex;flex-direction:column;align-items:center;gap:26px}
.reco-dato{display:flex;flex-direction:column;align-items:center;gap:8px}
.reco-dato > span:first-child{
  font-family:var(--display);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.reco-dato small{margin-left:4px;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.reco-valor{display:inline-flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--navy)}
.reco-valor input{
  width:4ch;padding:4px 0 6px;border:0;background:none;text-align:center;
  font-family:var(--display);font-size:clamp(34px,5vw,40px);font-weight:300;color:var(--navy);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.reco-valor input::-webkit-outer-spin-button,
.reco-valor input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.reco-valor input::placeholder{color:var(--line)}
.reco-valor input:focus{outline:none}
.reco-valor:focus-within{border-bottom-color:var(--petroleo);box-shadow:0 1px 0 var(--petroleo)}
.reco-valor i{font-style:normal;font-size:14px;color:var(--muted)}

/* Calce */
.reco-escala{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  width:100%;max-width:440px;margin:0 auto;
}
.reco-escala::before{content:"";position:absolute;left:10%;right:10%;top:12px;height:1px;background:var(--navy)}
.reco-escala label{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer}
.reco-escala .marca{
  width:25px;height:25px;border-radius:50%;background:var(--white);border:1px solid var(--navy);
  transition:border-color .16s,box-shadow .16s;
}
.reco-escala input:checked + .marca{border:2px solid var(--petroleo);box-shadow:inset 0 0 0 5px var(--white);background:var(--navy)}
.reco-escala label span:last-child{
  font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
/* Los puntos intermedios no llevan texto a la vista: son más chicos para que
   se lean como pasos entre dos opciones con nombre. */
.reco-escala-medio .marca{width:17px;height:17px;margin-top:4px}
.reco-escala input:checked ~ span:last-child{color:var(--navy);font-weight:600}

/* Forma */
.reco-formas{gap:24px}
.reco-forma{margin:0;padding:0;border:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.reco-forma[hidden]{display:none}
.reco-forma legend{
  padding:0;margin:0 auto 4px;font-family:var(--display);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.reco-forma svg{height:72px;width:auto;color:var(--navy)}
.reco-forma svg .acento{color:var(--petroleo);stroke:var(--petroleo)}
.reco-tres{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.reco-tres span{
  display:block;padding:8px 12px;cursor:pointer;border-bottom:1px solid transparent;
  font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.reco-tres input:checked + span{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}

/* Resultado */
/* El resultado es el talle y nada más: sin foto, centrado. */
.reco-resultado{justify-content:center;gap:22px;padding-top:18px}
.reco-veredicto{display:flex;flex-direction:column;gap:12px;align-items:center}
.reco-talle{margin:0;font-family:var(--display);font-weight:200;text-transform:none;line-height:1.15;font-size:clamp(22px,3vw,28px);max-width:22ch}
.reco-talle span{
  display:block;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.reco-talle strong{display:block;margin-top:8px;font-size:clamp(88px,14vw,120px);font-weight:200;line-height:1;color:var(--navy)}
.reco-talle:focus{outline:none}
.reco-porque{margin:0;max-width:42ch;font-size:15px;color:var(--muted);line-height:1.55}
.reco-porque a{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}
.reco-estimado{
  margin:0;max-width:42ch;padding:12px 14px;border-radius:8px;background:#EEF5F4;
  color:#1F5A53;font-size:14px;line-height:1.5;text-align:left;
}
.reco-estimado .reco-link{color:inherit;font-size:inherit}

.reco-pie{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:4px}
.reco-pie .btn{margin-top:0;width:100%;max-width:440px;text-align:center}
.reco-pie .btn[hidden]{display:none}
.reco-error{margin:0;min-height:1.4em;font-size:14px;color:var(--sold);text-align:center}
.reco-error:empty{min-height:0}
.reco-links{display:flex;gap:20px}
.reco-link{
  padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:14px;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px;
}
.reco-link:hover{color:var(--petroleo)}
.reco-pie .size-invite,.reco-pie .size-save-cta{margin-top:0;padding-top:0;border:0;align-items:center;text-align:center;max-width:440px}
.reco-pie .size-invite{padding:16px}
.reco-legal{margin:0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}

@media (min-width:900px){
  .reco-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
  .reco-lado{position:sticky;top:calc(110px + var(--preventa-bar-h,0px));padding-top:32px}
  .reco-resumen{display:block;margin:32px 0 0;border-top:1px solid var(--line)}
  .reco-resumen[hidden]{display:none}
  .reco-resumen-fila{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .reco-resumen dt{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:2px}
  .reco-resumen dd{margin:0;font-size:15px;color:var(--navy);display:flex;justify-content:space-between;gap:12px}
  .reco-resumen .reco-link{font-size:13px;color:var(--muted)}
  .reco-panel{
    background:var(--white);border:1px solid var(--line);border-radius:18px;
    padding:28px clamp(28px,4vw,48px) 24px;
  }
  .reco-paso{min-height:600px}
  .reco-cuerpo{justify-content:center}
}

.size-save-cta{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.size-save-cta p{font-size:14.5px;color:var(--muted);margin:0}
.size-save-cta .btn{margin-top:0;width:100%;text-align:center}

.size-invite{
  margin-top:20px;padding:20px;background:var(--bone-2);border-radius:10px;
  display:flex;flex-direction:column;gap:12px;
}
.size-invite p{font-size:14.5px;color:var(--navy);margin:0;line-height:1.55}
.size-invite .btn{margin-top:0;width:100%;text-align:center}

.saved-sizes{margin-top:32px}
.saved-sizes-title{
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin:0 0 14px;
}
.saved-sizes-list{display:flex;flex-direction:column;gap:10px}
.saved-size-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:var(--bone-2);border-radius:8px;
}
.saved-size-item-info{display:flex;flex-direction:column;gap:2px}
.saved-size-item-info strong{font-family:var(--display);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.saved-size-item-info span{font-size:13px;color:var(--muted)}
.saved-size-remove{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:0;background:none;color:var(--muted);
  font-size:18px;cursor:pointer;transition:color .16s,background .16s;
}
.saved-size-remove:hover{color:var(--sold);background:var(--white)}
.saved-sizes-empty{font-size:14px;color:var(--muted);margin:0}

/* ---------- preventa ---------- */
/* Banda sticky arriba de todo; el header se pega debajo, a la altura que
   publica script.js en --preventa-bar-h. Sin preventa esa variable no existe
   y todo vuelve a top:0. */
.preventa-bar{position:sticky;top:0;z-index:11;background:var(--navy);color:var(--white);padding:9px 0}
.preventa-bar.is-cerrada{background:var(--muted)}
.preventa-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 18px;text-align:center}
.preventa-bar-text{margin:0;font-family:var(--display);font-size:11.5px;font-weight:400;letter-spacing:.06em;line-height:1.55}
.preventa-bar-text strong{font-weight:600;letter-spacing:.14em}
.preventa-bar a{
  font-family:var(--display);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  color:var(--white);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
.preventa-bar a:focus-visible{outline-color:var(--white)}

/* Durante la preventa el precio que paga todo el mundo es el de preventa, así
   que es el que lleva la jerarquía tipográfica. El de lista queda tachado y
   chico como referencia. .is-tachado la pone pricing.js y no el HTML: con la
   preventa apagada no hay nada que tachar. */
.card-preventa{margin-top:10px}
.card-preventa-precio{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;
  /* Las ramas "preventa cerrada" y "sin porcentaje configurado" escriben texto
     plano en este mismo párrafo: sin font-size propio heredarían el del body. */
  font-size:14.5px;font-weight:400;color:var(--navy);
}
.card-preventa-label{
  flex-basis:100%;
  font-family:var(--display);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo);
}
.card-preventa-importe{
  font-family:var(--display);font-size:clamp(26px,3vw,32px);font-weight:400;
  line-height:1.15;letter-spacing:.01em;color:var(--navy);
}
.card-preventa-ahorro{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--petroleo);background:rgba(46,125,116,.1);
  border-radius:999px;padding:3px 9px;
}
.card-preventa-entrega{margin:5px 0 0;font-size:13px;color:var(--muted)}
.card-meta [data-ambo-price].is-tachado{text-decoration:line-through;text-decoration-thickness:1px}

.preventa-aviso{
  margin:26px 0 0;max-width:62ch;padding:12px 16px;
  border:1px solid rgba(255,255,255,.35);border-radius:8px;
  font-size:15px;line-height:1.55;color:var(--white);
}

.btn--ghost{color:var(--navy);background:var(--white)}
.btn--ghost:hover{color:var(--white)}
.btn:disabled,.card-buy:disabled{opacity:.45;pointer-events:none}
.cart-summary .fineprint{margin:0;max-width:none;font-size:13px;line-height:1.5}
.cart-summary .fineprint a,.step p a{color:var(--petroleo);text-decoration:underline;text-underline-offset:2px}

/* ---------- páginas legales ---------- */
.legal-hero h1{font-size:clamp(30px,4.6vw,54px);line-height:1.08;max-width:24ch}
.legal-hero .lede{color:rgba(255,255,255,.76);max-width:62ch}
.legal-body{max-width:74ch}
.legal-body h2{
  font-size:clamp(20px,2.3vw,26px);line-height:1.25;letter-spacing:.04em;
  margin:clamp(40px,5vw,56px) 0 14px;
}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:14.5px;margin:24px 0 6px}
.legal-body p,.legal-body li{font-size:16px;line-height:1.7;color:var(--muted)}
.legal-body p{margin:0 0 14px}
.legal-body ul,.legal-body ol{margin:0 0 14px;padding-left:20px}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:var(--navy);font-weight:500}
.legal-body a{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}
.legal-table-wrap{overflow-x:auto;margin:6px 0 18px}
.legal-table{width:100%;min-width:560px;border-collapse:collapse}
.legal-table th,.legal-table td{
  text-align:left;vertical-align:top;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--muted);
}
.legal-table th{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);
}
.legal-table td:first-child{color:var(--navy);font-weight:400}
/* Fecha de última actualización al pie del texto legal. */
.legal-fecha{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px}

.arrep-result{
  max-width:480px;margin:36px auto 0;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4vw,28px);
}
.arrep-result[hidden]{display:none}
.arrep-result .eyebrow{margin-bottom:6px}
.arrep-code{
  font-family:var(--display);font-size:clamp(24px,6vw,30px);font-weight:600;letter-spacing:.08em;
  color:var(--navy);margin:0 0 16px;overflow-wrap:anywhere;
}
/* Con clase propia y no `.arrep-result p`: ese selector le ganaba en
   especificidad a .eyebrow y a .arrep-code, que también son <p>. */
.arrep-copy{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.arrep-copy:last-child{margin-bottom:0}
.arrep-copy a{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr;gap:32px}
  .loyalty-cards{grid-template-columns:1fr;gap:14px}
  .manifesto-body{grid-template-columns:1fr;gap:0}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .hero-mark{right:-34%;height:auto;width:105vw;opacity:.04}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid2{grid-template-columns:1fr;gap:18px}
  .grid4{grid-template-columns:1fr;gap:26px}
  .hero .btn,.close .btn{width:100%;text-align:center}
  .card-img{aspect-ratio:4/5}
  .cart-drawer{width:100vw}
  .preventa-bar{padding:7px 0}
  .preventa-bar-text,.preventa-bar a{font-size:11px;letter-spacing:.03em}
  .preventa-bar-text strong{letter-spacing:.08em}
  .foot-legal{flex-direction:column;align-items:stretch;gap:16px}
  .foot-legal-links{flex-direction:column;gap:10px}
  .foot-datafiscal{margin-left:0;align-self:flex-start}
  .cart-shipping{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- botón flotante de WhatsApp ---------- */
/* Lo monta script.js (ver SIN_WHATSAPP_FLOTANTE: no va en las páginas legales
   ni en la de cambiar contraseña). z-index 98: por debajo del drawer del
   carrito (100) y de su fondo (99), por encima del resto. */
.wa-flotante{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:98;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;
  background:var(--navy);color:var(--white);
  font-family:var(--display);font-size:12.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 6px 24px rgba(16,40,84,.24);
  transition:background .18s ease,transform .1s ease;
}
.wa-flotante:hover{background:var(--petroleo);color:var(--white)}
.wa-flotante:active{transform:translateY(1px)}
.wa-flotante svg{flex:none}

/* Con un diálogo abierto (carrito o cuenta) el body queda bloqueado: el botón
   flotaría sobre un fondo que ya no se puede tocar. */
body.is-locked .wa-flotante{display:none}

/* En pantallas chicas queda redondo y sin texto: al lado del botón de agregar
   al carrito, una píldora con palabra tapa demasiado. */
@media (max-width:600px){
  .wa-flotante{padding:15px;border-radius:50%}
  .wa-flotante-texto{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .wa-flotante{transition:none}
}

/* ---------- consentimiento de cookies ---------- */
/* Lo monta cookies.js. Barra al pie, no modal: el sitio se puede seguir
   leyendo mientras está abierta. z-index 101 para que ni el drawer del
   carrito (100) ni el modal de cuenta (100) la tapen — un banner de
   consentimiento tapado no es un banner de consentimiento. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -14px 40px rgba(16,40,84,.13);
  padding:clamp(20px,3vw,28px) 0;
  /* En pantallas bajas el texto no puede quedar cortado sin forma de llegar
     a los botones. */
  max-height:85vh;overflow-y:auto;
  animation:cookies-entra .28s ease both;
}
.cookies[hidden]{display:none}
@keyframes cookies-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cookies-wrap{display:flex;align-items:center;gap:clamp(20px,4vw,48px)}
.cookies-texto{flex:1;min-width:0}
.cookies-titulo{
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  margin:0 0 8px;line-height:1.2;
}
.cookies-texto p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;max-width:74ch}
.cookies-texto strong{color:var(--navy);font-weight:500}
.cookies-texto a{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}
.cookies-estado{margin-top:8px!important;font-size:13.5px!important;color:var(--navy)!important}

/* Los dos botones son idénticos a propósito: mismo tamaño, mismo color,
   mismo peso. No hay un "sí" grande y un "no" chiquito. */
.cookies-acciones{display:flex;gap:12px;flex:none}
.cookies-btn{margin-top:0;min-width:148px;text-align:center}

/* El botón flotante de WhatsApp vive abajo a la derecha: con el banner
   abierto quedaría encima. Vuelve solo al cerrarlo. */
body.con-cookies .wa-flotante{display:none}

/* Link del pie. Es un <button> porque no navega a ningún lado, pero tiene
   que leerse igual que los links legales que tiene al lado. */
.foot-cookies{
  font:inherit;font-size:13.5px;color:var(--muted);
  background:none;border:0;padding:0;cursor:pointer;
  text-align:left;transition:color .16s;
}
.foot-cookies:hover{color:var(--petroleo)}

@media (max-width:760px){
  .cookies-wrap{flex-direction:column;align-items:stretch;gap:18px}
  .cookies-acciones{gap:10px}
  /* Mitad y mitad: ninguno de los dos es más fácil de apretar que el otro. */
  .cookies-btn{flex:1 1 0;min-width:0;padding-inline:12px}
}

@media (prefers-reduced-motion:reduce){
  .cookies{animation:none}
}