/* ============================================================
   SOLMARE — hoja de estilos común (index.html + seleccion.html)
   ============================================================ */

/* ---- 1. TOKENS ---- */
:root{
  --ink:#0A0A0A;
  --ink-80:rgba(10,10,10,.72);
  --ink-45:rgba(10,10,10,.6);        /* .6 = contraste AA sobre hueso */
  --bone:#F4F1EA;
  --bone-dim:#EAE5DB;
  --sand:#C9BCA8;
  --accent:#9A6B3C;
  /* El acento da 4,1:1 sobre hueso: vale para lo grande, no para texto
     pequeño. Este, del mismo matiz, da 5,4:1. */
  --accent-ink:#84592F;
  /* Tinta un punto más clara para el hover de los botones llenos: el
     acento con letra hueso tampoco llegaba a AA */
  --ink-hover:#2B2A29;
  /* Fondo de las fotos de producto: casi el mismo tono que el de las fotos */
  --frame:#DBD3C4;
  --bone-80:rgba(244,241,234,.74);
  --bone-35:rgba(244,241,234,.55);   /* .55 = contraste AA sobre tinta */
  --line:rgba(10,10,10,.14);
  --line-dark:rgba(244,241,234,.18);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:176px;

  --gutter:24px;
  --maxw:1360px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:640px){ :root{ --gutter:40px } }
@media (min-width:1024px){ :root{ --gutter:64px } }

/* ---- 2. BASE ---- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:300; letter-spacing:-.02em; line-height:1.05 }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:1px solid var(--accent); outline-offset:4px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.d1{ font-size:clamp(3rem,10vw,7.5rem) }
.d2{ font-size:clamp(2.25rem,6vw,4.75rem) }
.d3{ font-size:clamp(1.75rem,3.4vw,2.75rem) }
.eyebrow{
  font-family:var(--sans); font-size:.6875rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45);
}
.eyebrow--light{ color:var(--bone-35) }
.lead{ font-size:clamp(1rem,1.35vw,1.125rem); color:var(--ink-80); max-width:46ch }

/* ---- 3. NAV + BARRA DE ANUNCIO ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; color:var(--bone);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:76px }
.nav.is-stuck,
.nav--solid{ background:var(--bone); color:var(--ink); border-bottom-color:var(--line) }

.promo{
  background:var(--sand); color:var(--ink);
  overflow:hidden; max-height:110px;
  transition:max-height .5s var(--ease),opacity .35s var(--ease);
}
.nav.is-stuck .promo{ max-height:0; opacity:0 }
.promo__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px var(--s2); min-height:44px; padding-block:10px; text-align:center;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
}
.promo strong{ font-weight:500 }
.promo__timer{
  font-variant-numeric:tabular-nums; letter-spacing:.1em;
  padding-left:var(--s2); border-left:1px solid rgba(10,10,10,.28);
}
@media (max-width:639px){
  .promo__in{ font-size:.625rem; letter-spacing:.08em }
  .promo__timer{ padding-left:0; border-left:0; width:100% }
}

.brand{ position:relative; display:block; width:132px; flex:none; line-height:0 }
.brand img{ width:100%; transition:opacity .4s var(--ease) }
.brand .on-ink{ position:absolute; inset:0; opacity:0 }
.nav.is-stuck .brand .on-ink,
.nav--solid .brand .on-ink{ opacity:1 }
.nav.is-stuck .brand .on-bone,
.nav--solid .brand .on-bone{ opacity:0 }
@media (min-width:1024px){ .brand{ width:158px } }

.nav__links{ display:none; gap:var(--s5) }
.nav__links a{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.85; transition:opacity .3s var(--ease);
}
.nav__links a:hover{ opacity:1 }
.nav__right{ display:flex; align-items:center; gap:var(--s3) }
.cart{
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  transition:opacity .3s var(--ease);
}
.cart:hover{ opacity:.6 }
.cart__count{ font-variant-numeric:tabular-nums }
.burger{ display:flex; flex-direction:column; gap:5px; padding:8px; margin-right:-8px }
.burger span{ display:block; width:22px; height:1px; background:currentColor }
@media (min-width:1024px){
  .nav__links{ display:flex }
  .burger{ display:none }
}

.sheet{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gutter);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.sheet.is-open{ opacity:1; visibility:visible; transform:none }
.sheet__close{ position:absolute; top:26px; right:var(--gutter); font-size:1.75rem; line-height:1 }
.sheet a{ font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); padding:10px 0; display:block }
.sheet__foot{ position:absolute; left:var(--gutter); bottom:var(--s5) }

/* ---- 4. HERO ---- */
.hero{
  position:relative; background:var(--ink); color:var(--bone);
  min-height:100svh; display:flex; align-items:center;
  padding-top:152px; padding-bottom:var(--s7); overflow:hidden;
}
.hero__grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:center }
.hero__copy h1{ margin:var(--s3) 0 }
.hero__copy .d1{ font-style:italic; font-weight:300 }
.hero__cta{ margin-top:var(--s5); display:inline-block }
.hero__media{ position:relative; justify-self:center; width:100%; max-width:560px }
.hero__media img{ width:100%; aspect-ratio:1/1; object-fit:cover }
.scrollcue{
  position:absolute; left:var(--gutter); bottom:var(--s4);
  display:flex; align-items:center; gap:12px;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-35);
}
.scrollcue i{ display:block; width:44px; height:1px; background:currentColor; animation:cue 2.6s var(--ease) infinite }
@keyframes cue{ 0%,100%{transform:scaleX(.35);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} }
@media (min-width:1024px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; gap:var(--s6) }
  .hero__media{ max-width:none }
}

/* ---- 5. SECCIONES ---- */
.section{ padding-block:var(--s7) }
@media (min-width:1024px){ .section{ padding-block:var(--s8) } }

.shead{
  display:grid; gap:var(--s3); margin-bottom:var(--s6);
  border-top:1px solid var(--line); padding-top:var(--s3);
}
@media (min-width:1024px){ .shead{ grid-template-columns:1fr 1.4fr; gap:var(--s6); align-items:start } }

/* Botón añadir */
.add{
  margin-top:var(--s3); width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding:14px 0; border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; text-align:left;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.add::after{ content:"+"; font-size:1.125rem; line-height:1; transition:transform .3s var(--ease) }
.add:hover{ color:var(--accent-ink); border-top-color:var(--accent-ink) }
.add:hover::after{ transform:rotate(90deg) }
.add.is-added{ color:var(--accent-ink); border-top-color:var(--accent-ink) }
.add.is-added::after{ content:"✓"; font-size:.9375rem }

/* Cuenta regresiva en bloques */
.clock{ display:flex; gap:var(--s3); margin-bottom:var(--s4) }
.clock div{ display:grid; gap:4px; min-width:56px }
.clock b{
  font-family:var(--serif); font-size:clamp(2rem,4vw,2.75rem); font-weight:400;
  letter-spacing:0; line-height:1; font-variant-numeric:tabular-nums;
}
.clock span{ font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-35) }
.clock--ink span{ color:var(--ink-45) }

/* Lista de puntos (la usa la selección) */
.values{ margin-top:var(--s5); border-top:1px solid var(--line) }
.values > div{ padding:var(--s3) 0; border-bottom:1px solid var(--line); display:grid; gap:6px }
.values dt{ font-family:var(--serif); font-size:1.25rem }
.values dd{ margin:0; font-size:.9375rem; color:var(--ink-80) }
.values .num{ font-size:.625rem; letter-spacing:.2em; color:var(--accent-ink) }

/* Footer */
.foot{ background:var(--ink); color:var(--bone); padding-block:var(--s7) var(--s4) }
.foot__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4) }
@media (min-width:1024px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6) } }
.foot h4{ font-family:var(--sans); font-size:.6875rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-35); margin-bottom:var(--s3) }
.foot li{ margin-bottom:10px }
.foot li a{ font-size:.875rem; color:var(--bone-80); transition:color .3s var(--ease) }
.foot li a:hover{ color:var(--bone) }
.foot__brand img{ width:150px }
.foot__brand p{ margin-top:var(--s3); font-size:.875rem; color:var(--bone-80); max-width:34ch }
.foot__bar{
  margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-size:.75rem; color:var(--bone-35);
}
.social{ display:flex; gap:var(--s3) }
.social a{ transition:color .3s var(--ease) }
.social a:hover{ color:var(--bone) }

/* ============================================================
   6. PÁGINA DE SELECCIÓN (seleccion.html)
   ============================================================ */
.pagehead{ padding-top:180px; padding-bottom:var(--s6) }
.pagehead__grid{ display:grid; gap:var(--s4) }

/* Ayuda: las preguntas frecuentes las escribe el panel (Contenido → Ayuda) */
.faq{ margin-top:var(--s6); border-top:1px solid var(--line); max-width:820px }
.faq details{ border-bottom:1px solid var(--line); padding:var(--s3) 0 }
.faq summary{
  display:flex; justify-content:space-between; gap:var(--s3); cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.125rem,2vw,1.375rem); font-weight:400; line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--sans); font-weight:300; flex:none }
.faq details[open] summary::after{ content:"−" }
.faq details p{ margin-top:var(--s2); color:var(--ink-80); max-width:65ch }
@media (min-width:1024px){ .pagehead__grid{ grid-template-columns:1.2fr 1fr; gap:var(--s8); align-items:end } }
.crumb{ display:flex; gap:10px; align-items:center; margin-bottom:var(--s3) }

.steps{ display:flex; gap:var(--s2); margin-top:var(--s4) }
.steps div{
  flex:1; height:2px; background:var(--line); position:relative; overflow:hidden;
}
.steps div::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.steps div.is-on::after{ transform:scaleX(1) }
.steps__label{ margin-top:12px; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45) }

.picker{ display:grid; grid-template-columns:1fr; gap:var(--s5) var(--s4) }
@media (min-width:640px){ .picker{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .picker{ grid-template-columns:repeat(4,1fr) } }

.pick{
  border:1px solid var(--line); background:var(--bone);
  display:flex; flex-direction:column; padding:var(--s3);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.pick.is-picked{ border-color:var(--ink); background:var(--bone-dim) }
.pick__media{ position:relative; aspect-ratio:1/1; background:var(--bone-dim); overflow:hidden }
.pick__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.pick:hover .pick__media img{ transform:scale(1.04) }
.pick__qty{
  position:absolute; top:10px; right:10px; min-width:26px; height:26px; border-radius:999px;
  background:var(--ink); color:var(--bone); display:none; align-items:center; justify-content:center;
  font-size:.6875rem; letter-spacing:.04em;
}
.pick.is-picked .pick__qty{ display:flex }
.pick__body{ margin-top:var(--s3); flex:1 }
.pick__name{
  font-family:var(--sans); font-size:.8125rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
}
.pick__mat{ font-family:var(--serif); font-size:1.375rem; margin-top:8px; color:var(--ink-80); line-height:1.2 }
.pick__row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--s3) }
.pick__price{ font-size:.9375rem }
.pick__swatch{ width:26px; height:26px; border-radius:999px; border:1px solid var(--line) }

.pickbar{
  position:sticky; bottom:0; z-index:40; background:var(--ink); color:var(--bone);
  margin-top:var(--s6); padding:var(--s3) var(--s4);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3);
}
.pickbar__sum{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap }
.pickbar__sum b{ font-family:var(--serif); font-size:1.75rem; font-weight:400 }
.pickbar__was{ text-decoration:line-through; color:var(--bone-35); font-size:.875rem }
.pickbar__msg{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-35) }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  background:var(--bone); color:var(--ink);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.btn:hover{ background:var(--sand) }
.btn[disabled]{ opacity:.35; cursor:not-allowed }
.btn--ghost{ background:none; color:var(--ink); border:1px solid var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:var(--bone) }

/* ============================================================
   7. BOLSA (panel lateral, inyectado por JS en ambas páginas)
   ============================================================ */
.drawer-backdrop{
  position:fixed; inset:0; z-index:80; background:rgba(10,10,10,.5);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility .4s;
}
.drawer-backdrop.is-open{ opacity:1; visibility:visible }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(440px,100%);
  background:var(--bone); color:var(--ink); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .5s var(--ease);
  box-shadow:-20px 0 60px rgba(10,10,10,.18);
}
.drawer.is-open{ transform:none }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
}
.drawer__head h2{ font-family:var(--sans); font-size:.75rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase }
.drawer__close{ font-size:1.5rem; line-height:1; padding:4px 8px; margin-right:-8px }
.drawer__body{ flex:1; overflow-y:auto; padding:var(--s3) var(--s4) }
.drawer__empty{ padding:var(--s7) 0; text-align:center; color:var(--ink-45); font-size:.9375rem }

.litem{ display:grid; grid-template-columns:76px 1fr; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line) }
.litem img{ width:76px; height:76px; object-fit:cover; background:var(--bone-dim) }
.litem__name{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase }
.litem__mat{ font-family:var(--serif); font-size:1.125rem; color:var(--ink-80); margin-top:4px; line-height:1.2 }
.litem__row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:var(--s2) }
.qty{ display:flex; align-items:center; border:1px solid var(--line) }
.qty button{ width:28px; height:28px; line-height:1; font-size:.875rem }
.qty span{ min-width:26px; text-align:center; font-size:.8125rem; font-variant-numeric:tabular-nums }
.litem__price{ font-size:.875rem; white-space:nowrap }
.litem__half{ color:var(--accent-ink); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase }
.litem__drop{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); transition:color .3s var(--ease) }
.litem__drop:hover{ color:var(--ink) }

.drawer__foot{ border-top:1px solid var(--line); padding:var(--s3) var(--s4) var(--s4) }
.drawer__line{ display:flex; justify-content:space-between; font-size:.875rem; padding:6px 0 }
.drawer__line--save{ color:var(--accent-ink) }
.drawer__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line);
}
.drawer__total b{ font-family:var(--serif); font-size:1.75rem; font-weight:400 }
.drawer__cta{
  width:100%; justify-content:center; margin-top:var(--s3);
  background:var(--ink); color:var(--bone);
}
.drawer__cta:hover{ background:var(--ink-hover); color:var(--bone) }
.drawer__note{ margin-top:12px; font-size:.6875rem; letter-spacing:.1em; color:var(--ink-45); text-align:center }

/* Aviso flotante al añadir */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:95; transform:translate(-50%,20px);
  background:var(--ink); color:var(--bone); padding:12px 22px;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.toast.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0) }

/* ---- 8. REVELADO AL SCROLL ---- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
}

/* ============================================================
   9. CÓDIGO DE PROMOTOR (bolsa y resumen de pago)
   ============================================================ */
.code{ margin:var(--s3) 0; padding-top:var(--s3); border-top:1px solid var(--line) }
.code__row{ display:flex; align-items:flex-end; gap:var(--s2); border-bottom:1px solid var(--line); padding-bottom:8px }
.code__row input{
  flex:1; min-width:0; border:0; background:none; padding:4px 0;
  font-family:var(--sans); font-size:.875rem; font-weight:300; color:var(--ink);
  letter-spacing:.14em; text-transform:uppercase;
}
.code__row input::placeholder{ color:var(--ink-45); letter-spacing:.14em }
.code__row input:focus{ outline:none }
.code__row button{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition:color .3s var(--ease);
}
.code__row button:hover{ color:var(--accent) }
.code__msg{ margin-top:8px; font-size:.6875rem; letter-spacing:.1em; min-height:1.2em; color:var(--accent) }
.code__msg.is-bad{ color:#9B2C2C }
.chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:var(--s2);
  padding:7px 8px 7px 14px; border:1px solid var(--ink); border-radius:999px;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
}
.chip button{ font-size:1rem; line-height:1; padding:0 4px; opacity:.55; transition:opacity .3s var(--ease) }
.chip button:hover{ opacity:1 }

/* ============================================================
   10. PÁGINA DE PAGO (pago.html)
   ============================================================ */
.pay{ display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:start; padding-bottom:var(--s8) }
@media (min-width:1024px){ .pay{ grid-template-columns:1.35fr 1fr; gap:var(--s8) } }

.panel{ border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s6) }
.panel:first-child{ margin-top:0 }
.panel__h{
  display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s4);
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45);
}
.panel__h b{ font-family:var(--serif); font-size:1.5rem; font-weight:400; letter-spacing:0; color:var(--ink) }

/* Billeteras rápidas */
.wallets__note{ margin-top:12px; font-size:.6875rem; letter-spacing:.08em; color:var(--ink-45) }
/* Motivo técnico que devuelve el banco tras un rechazo. Va debajo del
   aviso, más apagado: explica, pero no es lo que el comprador debe leer
   primero. */
.livenote__motivo{ display:inline-block; margin-top:4px; opacity:.75; letter-spacing:.04em }

/* ---- Campos de tarjeta ----
   El SDK de PaguéloFácil los dibuja dentro de nuestra página y
   manda los datos directo a ellos. Solmare no los ve. */
.cf{ margin-top:var(--s2) }
.cf__f{ margin-bottom:var(--s4) }
.cf__f label{
  display:block; margin-bottom:8px;
  font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-45);
}
.cf__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) }
@media (max-width:520px){ .cf__row{ grid-template-columns:1fr } }
.cf .paybtn{ margin-top:var(--s2) }

/* El SDK toma estos inputs por su id, así que se estilan aquí
   directamente, igual que el resto del formulario del checkout. */
.cf__f input,.cf__f select{
  width:100%; height:48px; padding:0 14px;
  border:1px solid var(--line); background:#fff; border-radius:0;
  font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink);
  transition:border-color .2s ease; appearance:none; -webkit-appearance:none;
}
.cf__f select{
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-45) 50%),
                   linear-gradient(135deg,var(--ink-45) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.cf__f input:focus,.cf__f select:focus{ outline:none; border-color:var(--ink) }
.cf__f input::placeholder{ color:var(--ink-45) }
/* El SDK marca así los campos que no pasan validación */
.cf__f input.is-bad,.cf__f input[aria-invalid="true"]{ border-color:#8A2B2B }

/* Contenedor donde el SDK dibuja su formulario de pago.
   Vacío no ocupa nada; con contenido se separa de lo de arriba. */
#pf-container:not(:empty){ margin-top:var(--s2) }

.divider{
  display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-45);
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line) }

/* Formulario */
.form{ display:grid; gap:var(--s4) }
.frow{ display:grid; gap:var(--s4) }
@media (min-width:640px){ .frow--2{ grid-template-columns:1fr 1fr } .frow--3{ grid-template-columns:2fr 1fr 1fr } }
.f{ display:grid; gap:8px }
.f label{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45) }
.f input,.f select{
  width:100%; border:0; border-bottom:1px solid var(--line); background:none;
  padding:8px 0; font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--ink);
  border-radius:0; transition:border-color .3s var(--ease);
}
.f select{ -webkit-appearance:none; appearance:none; cursor:pointer }
.f input:focus,.f select:focus{ outline:none; border-bottom-color:var(--ink) }
.f input::placeholder{ color:rgba(10,10,10,.32) }
.f.is-bad input,.f.is-bad select{ border-bottom-color:#9B2C2C }
.f__err{ font-size:.6875rem; letter-spacing:.06em; color:#9B2C2C; min-height:1em }

.cardline{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2) }
.brands{ display:flex; gap:6px }
.brands span{
  font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 7px; border:1px solid var(--line); border-radius:3px; color:var(--ink-45);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.brands span.is-on{ border-color:var(--ink); color:var(--ink) }

.paybtn{
  width:100%; justify-content:center; margin-top:var(--s2);
  background:var(--ink); color:var(--bone); min-height:56px;
}
.paybtn:hover{ background:var(--ink-hover); color:var(--bone) }
.secure{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:var(--s3);
  font-size:.6875rem; letter-spacing:.1em; color:var(--ink-45);
}

/* Resumen lateral */
.summary{ background:var(--bone-dim); padding:var(--s4) }
@media (min-width:1024px){ .summary{ position:sticky; top:110px } }
.summary__list{ margin-bottom:var(--s2) }
.summary__list .litem{ border-bottom-color:rgba(10,10,10,.1) }
.summary__empty{ padding:var(--s5) 0; text-align:center; color:var(--ink-45); font-size:.9375rem }

/* Confirmación */
.done{ text-align:center; padding:var(--s8) 0; max-width:44ch; margin-inline:auto }
.done__mark{
  width:56px; height:56px; margin:0 auto var(--s4); border-radius:999px;
  border:1px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:1.375rem;
}

/* Aviso de demo */
.demo{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); padding:14px var(--s3); margin-bottom:var(--s5);
  font-size:.75rem; line-height:1.55; color:var(--ink-80);
}
.demo b{ font-weight:500 }

/* El mismo recuadro, cuando cuenta cómo fue el pago al volver de
   PaguéloFácil. Con el estilo de la nota de demostración (12 px, gris,
   sin fondo) un pago rechazado pasó desapercibido en la primera prueba
   real: un error tiene que verse como error. */
.demo--info,
.demo--error{
  font-size:.9375rem; line-height:1.5; color:var(--ink);
  padding:var(--s2) var(--s3); align-items:flex-start;
}
.demo--info{ background:var(--bone-dim); border-color:var(--ink) }
.demo--error{ background:rgba(158,59,47,.08); border:1px solid #9E3B2F; border-left-width:4px }
.demo__icono{ flex:none; font-weight:500; line-height:1.5 }
.demo--error .demo__icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#9E3B2F; color:var(--bone);
  font-size:.8125rem;
}
.demo--error .demo__texto{ font-weight:500 }
.demo--info .livenote__motivo,
.demo--error .livenote__motivo{ display:block; margin-top:6px; font-size:.8125rem; opacity:.8 }

/* ============================================================
   11. TRANSICIÓN DEL WORDMARK
   ============================================================ */
@keyframes pageIn{ from{ opacity:0 } to{ opacity:1 } }
body{ animation:pageIn .45s var(--ease) both }

.wipe{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transform:scaleY(0); transform-origin:top; pointer-events:none;
}
.wipe img{ width:min(210px,52vw); opacity:0; transform:translateY(10px) }
.wipe.is-on{ transform:scaleY(1); transition:transform .5s var(--ease) }
.wipe.is-on img{
  opacity:1; transform:none;
  transition:opacity .38s var(--ease) .2s, transform .38s var(--ease) .2s;
}
.brand{ transition:opacity .3s var(--ease), transform .3s var(--ease) }
.brand:hover{ opacity:.72 }
.brand.is-going{ animation:brandGo .55s var(--ease) forwards }
@keyframes brandGo{
  0%{ transform:none; opacity:1 }
  35%{ transform:scale(.93); opacity:1 }
  100%{ transform:scale(.93); opacity:0 }
}

/* ============================================================
   12. CHECKOUT POR PASOS
   ============================================================ */
.flow{ display:grid; counter-reset:step }
.step{ border-top:1px solid var(--line); padding:var(--s4) 0 }
.step:last-child{ border-bottom:1px solid var(--line) }
.step.is-locked{ opacity:.42 }

.step__head{ display:flex; align-items:center; gap:var(--s3) }
.step__num{
  width:30px; height:30px; flex:none; border-radius:999px;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:.75rem; letter-spacing:.02em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.step.is-open .step__num,
.step.is-done .step__num{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.step__head h2{ flex:1; font-family:var(--serif); font-size:clamp(1.375rem,2.4vw,1.75rem); font-weight:400 }
.step__edit{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45);
  transition:color .3s var(--ease);
}
.step__edit:hover{ color:var(--ink) }

.step__body,.step__recap{ padding-left:calc(30px + var(--s3)) }
@media (max-width:639px){ .step__body,.step__recap{ padding-left:0 } }
.step__body{ display:none; padding-top:var(--s4) }
.step.is-open .step__body{ display:block }
.step__recap{ display:none; margin-top:10px; font-size:.875rem; color:var(--ink-80) }
.step.is-done .step__recap{ display:block }
.step__next{ margin-top:var(--s5); min-width:220px; justify-content:center; background:var(--ink); color:var(--bone) }
.step__next:hover{ background:var(--ink-hover) }

/* Aviso de umbral de envío gratis */
.shipnote{
  margin:6px 0 2px; font-size:.6875rem; letter-spacing:.08em; color:var(--accent-ink);
}

/* ============================================================
   13. PROBADOR VIRTUAL
   ============================================================ */
/* En el teléfono la imagen ocupa toda la pantalla y los controles
   flotan encima, sobre un velo; en pantallas anchas van en un panel
   azul hondo a la derecha. Antes la lista de modelos se comía el alto
   del teléfono y la cámara no se veía. */
.tryon{
  position:fixed; inset:0; z-index:120; background:#0B0F11; color:var(--bone);
  font-variant-numeric:lining-nums;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
/* Visible desde el primer instante al abrir: si no, el foco no puede
   entrar todavía en el botón de cerrar */
.tryon.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s }
.tryon :focus-visible{ outline:2px solid var(--bone); outline-offset:3px }
/* El aviso de «Añadido a la bolsa» va por encima del probador */
body.tryon-abierto .toast{ z-index:130; bottom:auto; top:calc(env(safe-area-inset-top) + 72px) }

/* --- Escenario --- */
.tryon__stage{ position:absolute; inset:0; overflow:hidden; background:#111; touch-action:none }
.tryon__stage:focus-visible{ outline-offset:-3px }
.tryon__stage video,
.tryon__stage > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;
}
.tryon.has-cam   #tryVideo{ display:block }
.tryon.has-photo #tryPhoto{ display:block }
#tryVideo.is-mirrored{ transform:scaleX(-1) }
/* Los lentes en 3D (probador3d.js): un lienzo encima de la imagen que
   sigue la cara. Mientras carga, solo se ve la imagen. */
.tryon__3d{ position:absolute; inset:0; z-index:1; pointer-events:none }
.tryon__3d[hidden]{ display:none }
/* En 3D el lienzo dibuja también la imagen (así el cristal la filtra y
   el acetato la refracta): el vídeo y la foto siguen ahí, pero no se ven */
.tryon.modo-3d #tryVideo, .tryon.modo-3d #tryPhoto{ opacity:0 }
.tryon__cargando{
  position:absolute; z-index:2; left:50%; top:calc(env(safe-area-inset-top) + 72px); transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:999px;
  background:rgba(10,10,10,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.78125rem; color:var(--bone); white-space:nowrap;
}
.tryon__cargando::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(244,241,234,.3); border-top-color:var(--bone); animation:tryon-gira .9s linear infinite;
}
@keyframes tryon-gira{ to{ transform:rotate(360deg) } }
/* Con el aviso de carga a la vista, el otro aviso baja un poco */
.tryon__cargando:not([hidden]) ~ .tryon__hint, .tryon__hint:has(~ .tryon__cargando:not([hidden])){ top:calc(env(safe-area-inset-top) + 116px) }
.tryon__hint{
  position:absolute; left:50%; top:calc(env(safe-area-inset-top) + 72px); transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 32px); text-align:center; text-wrap:balance;
  padding:8px 16px; border-radius:20px; background:rgba(10,10,10,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.78125rem; line-height:1.45; color:var(--bone);
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.tryon__hint.is-on{ opacity:1 }
/* Si el probador no cargó: el botón para volver a intentarlo, bajo el aviso */
.tryon__reintentar{
  position:absolute; z-index:2; left:50%; top:calc(env(safe-area-inset-top) + 132px); transform:translateX(-50%);
}
.tryon__reintentar[hidden]{ display:none }
.tryon__reintentar:active{ transform:translateX(-50%) scale(.98) }

/* --- Barra de arriba --- */
.tryon__top{
  position:absolute; z-index:5; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 28px;
  background:linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,0));
  pointer-events:none;
}
.tryon__top > *{ pointer-events:auto }
.tryon__title{ font-size:.71875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80) }

/* Botón redondo de cristal */
.tryon__redondo{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  color:var(--bone); background:rgba(244,241,234,.14); border:1px solid rgba(244,241,234,.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.tryon__redondo svg{ width:20px; height:20px }
@media (hover:hover){ .tryon__redondo:hover{ background:rgba(244,241,234,.26) } }
.tryon__redondo:active{ transform:scale(.94) }
.tryon__redondo[aria-expanded="true"]{ background:var(--bone); color:var(--ink) }

/* --- Inicio --- */
.tryon__start{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:88px 24px 48px;
  background:radial-gradient(120% 90% at 50% 0%, #173C47 0%, var(--mar-hondo) 60%);
}
.tryon__inicio{ display:grid; justify-items:center; gap:16px; max-width:32rem; text-align:center }
.tryon__kicker{ font-size:.71875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80) }
.tryon__h{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); line-height:1.06; text-wrap:balance }
.tryon__lead{ color:var(--bone-80); max-width:36ch }
.tryon__startbtns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px }
.tryon__priv{ font-size:.8125rem; color:rgba(244,241,234,.66) }
.tryon__err{ font-size:.875rem; color:#F2C9A0; max-width:38ch; min-height:1.2em }

/* --- Panel: abajo y flotando en el teléfono --- */
.tryon__panel{
  position:absolute; z-index:3; left:0; right:0; bottom:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:12px;
  padding:36px 16px calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 62%, rgba(10,10,10,0) 100%);
}
/* Sin imagen todavía, los controles de la imagen no se enseñan */
.tryon:not(.has-cam):not(.has-photo) .tryon__panel{ display:none }
.tryon__info{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0 }
.tryon__nombre{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.875rem; color:var(--bone-80) }
.tryon__nombre b{ font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--bone); margin-right:4px }
.tryon__precio{ flex:none; font-family:var(--serif); font-size:1.35rem }
.tryon__modelos{
  display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  margin-inline:-16px; padding:2px 16px;
}
.tryon__modelos::-webkit-scrollbar{ display:none }
.tryon__grupo{ display:flex; align-items:center; flex:none }
.tryon__mod{ margin-right:4px; font-family:var(--serif); font-size:1.05rem; color:var(--bone-80); white-space:nowrap }
.trymuestra{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50% }
.trymuestra i{
  width:24px; height:24px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); transition:transform .3s var(--ease), box-shadow .25s var(--ease);
}
@media (hover:hover){ .trymuestra:hover i{ transform:scale(1.12) } }
.trymuestra[aria-pressed="true"] i{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 3px rgba(10,10,10,.9), 0 0 0 4.5px var(--bone) }
.trymuestra.is-agotada i{ background:linear-gradient(135deg, transparent 45%, rgba(244,241,234,.95) 45% 55%, transparent 55%), var(--c) }
.tryon__ajustes{ display:none; gap:14px }
.tryon.con-ajustes .tryon__ajustes{ display:grid }
.tryon__ctrl{ display:grid; grid-template-columns:96px 1fr; align-items:center; gap:12px }
.tryon__ctrl span{ font-size:.78125rem; color:var(--bone-80) }
.tryon__ctrl input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; border-radius:2px;
  background:rgba(244,241,234,.3); outline:none;
}
.tryon__ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--bone); box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:pointer;
}
.tryon__ctrl input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border:0; border-radius:50%; background:var(--bone); box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:pointer;
}
.tryon__acts{ display:flex; align-items:center; gap:10px }
.tryon__add{ flex:1; min-width:0 }
.tryon__add > span{ overflow:hidden; text-overflow:ellipsis }
.tryon__add.is-out{ opacity:.55; cursor:not-allowed }
.tryon__note{ display:none }

@media (min-width:1024px){
  .tryon__stage, .tryon__top{ right:400px }
  .tryon__panel{
    left:auto; top:0; width:400px; align-content:start; gap:22px; padding:36px 28px;
    background:var(--mar-hondo); border-left:1px solid rgba(244,241,234,.12); overflow-y:auto;
  }
  .tryon__info{ display:grid; gap:2px }
  .tryon__nombre{ white-space:normal }
  .tryon__nombre b{ display:block; font-size:2rem; line-height:1.1 }
  .tryon__precio{ font-size:1.6rem }
  .tryon__modelos{ flex-wrap:wrap; overflow:visible; margin:0; padding:0; gap:10px 22px }
  /* Un modelo con muchos colores (el mod.04 tiene 8) baja de línea */
  .tryon__grupo{ flex-wrap:wrap; flex:0 1 auto; min-width:0 }
  .tryon__ajustes{ display:grid }
  .tryon__ajustar{ display:none }
  .tryon__acts{ flex-wrap:wrap }
  .tryon__add{ flex:1 1 100%; order:-1 }
  .tryon__note{ display:block; font-size:.78125rem; line-height:1.6; color:rgba(244,241,234,.66) }
}

/* Botón "Probártelos" en las tarjetas */
.add--try{ border-top-color:var(--line) }
.add--try::after{ content:"◎"; font-size:.9375rem }
.add--try:hover::after{ transform:none }
.pick .add--try{ margin-top:var(--s2) }

/* ============================================================
   14. CONFIRMACIÓN DE PEDIDO
   ============================================================ */
.done{
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  padding:var(--s8) var(--gutter);
}
.done__inner{ max-width:46ch; text-align:center }

/* Sello: el aro se dibuja y luego entra la palomita */
.done__seal{ width:96px; height:96px; margin:0 auto var(--s5); display:block; overflow:visible }
.done__ring{
  fill:none; stroke:var(--ink); stroke-width:1.5;
  stroke-dasharray:327; stroke-dashoffset:327;
  transform:rotate(-90deg); transform-origin:50% 50%;
}
.done__tick{
  fill:none; stroke:var(--ink); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:64; stroke-dashoffset:64;
}
.done__rule{
  width:0; height:1px; background:var(--line); margin:var(--s4) auto;
}

.done .r{ opacity:0; transform:translateY(14px) }

/* Detalle del pedido */
.done__ref{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
  display:grid; gap:10px; text-align:left;
}
.done__ref div{ display:flex; justify-content:space-between; gap:var(--s3); font-size:.8125rem }
.done__ref dt{ color:var(--ink-45) }
.done__ref dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums }

/* --- Secuencia --- */
.done.is-on .done__ring{ animation:drawRing .95s var(--ease) forwards }
.done.is-on .done.is-on .done__tick{ animation:drawTick .5s var(--ease) .72s forwards }
.done.is-on .done__rule{ animation:growRule .7s var(--ease) 1.05s forwards }
.done.is-on .r{ animation:riseIn .65s var(--ease) forwards }
.done.is-on .r1{ animation-delay:.95s }
.done.is-on .r2{ animation-delay:1.08s }
.done.is-on .r3{ animation-delay:1.22s }
.done.is-on .r4{ animation-delay:1.38s }
.done.is-on .r5{ animation-delay:1.54s }

@keyframes drawRing{ to{ stroke-dashoffset:0 } }
@keyframes drawTick{ to{ stroke-dashoffset:0 } }
@keyframes growRule{ from{ width:0 } to{ width:120px } }
@keyframes riseIn{ to{ opacity:1; transform:none } }
  100%{ stroke-dashoffset:0; opacity:0; stroke-width:8 }
}

@media (prefers-reduced-motion:reduce){
  .done__ring,.done__tick{ stroke-dashoffset:0 }
    .done__rule{ width:120px }
  .done .r{ opacity:1; transform:none }
}

/* Aviso cuando el cobro aún no está configurado */
.notset{
  margin-top:var(--s4); padding:var(--s3); border:1px solid var(--line);
  font-size:.8125rem; line-height:1.6; color:var(--ink-80);
}
.notset b{ font-weight:500 }
.notset code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem;
  background:var(--bone-dim); padding:2px 5px;
}
.notset a{ text-decoration:underline; text-underline-offset:3px }

/* ============================================================
   15. AGOTADOS
   ============================================================ */
/* Agotado: la foto se apaga y el botón no añade */
.is-agotado .pick__media img{ opacity:.55; filter:grayscale(.4) }
.add.is-out, .btn.is-out{ opacity:.5; cursor:not-allowed }
.add.is-out::after{ content:none }

/* ============================================================
   16. HERO DE CAMPAÑA
   Móvil: póster arriba, mensaje debajo (nada encima de la cara).
   Escritorio: dos columnas, sin espacio muerto.
   ============================================================ */
.hero--campaign{
  display:flex; flex-direction:column; padding:0; min-height:0;
  background:var(--ink); overflow:hidden;
}
.hero__poster{ position:relative; width:100%; order:1 }
.hero__bg{
  width:100%; height:auto; display:block;
  max-height:72svh; object-fit:cover; object-position:50% 32%;
}
.hero__veil{
  position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to bottom, rgba(10,10,10,0), rgba(10,10,10,.92));
  pointer-events:none;
}
.hero__foot{
  order:2; color:var(--bone);
  padding-top:var(--s5); padding-bottom:var(--s7); margin-top:-1px;
}

.hero__kicker{ display:flex; align-items:center; gap:10px; color:var(--sand) }
.hero__kicker i{
  width:6px; height:6px; border-radius:999px; background:var(--sand); flex:none;
}
.hero__claim{
  font-family:var(--serif); font-weight:300; letter-spacing:-.025em;
  font-size:clamp(2.25rem,7vw,3.5rem); line-height:1.06;
  margin:var(--s3) 0 var(--s3);
}
.hero__claim em{ font-style:italic; color:var(--sand) }
.hero__sub{ max-width:42ch }

.hero__acts{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.hero--campaign .btn{ background:var(--bone); color:var(--ink) }
.hero--campaign .btn:hover{ background:var(--sand) }
.hero--campaign .btn--ghost{ background:none; color:var(--bone); border:1px solid rgba(244,241,234,.5) }
.hero--campaign .btn--ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone) }

@media (min-width:1024px){
  /* Sin contenedor: la foto sangra hasta el borde derecho y de arriba
     abajo, así no queda ningún hueco negro alrededor. */
  .hero--campaign{
    display:grid; grid-template-columns:1fr 46%;
    align-items:stretch; min-height:100svh;
    max-width:none; margin:0; padding:0;
  }
  .hero__poster{
    order:2; position:relative; width:100%; height:100%;
    aspect-ratio:auto; max-height:none;
  }
  .hero__bg{
    position:absolute; inset:0; width:100%; height:100%;
    max-height:none; object-fit:cover; object-position:50% 45%;
  }
  .hero__veil{ display:none }
  .hero__foot{
    order:1; align-self:center; margin:0; max-width:none; width:100%;
    padding-block:150px var(--s6);
    padding-inline-start:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
    padding-inline-end:var(--s6);
  }
  .hero__claim{ font-size:clamp(2.5rem,4vw,3.75rem); margin-block:var(--s4) }
}

/* ============================================================
   17. SELECTOR DE PAREJA: los productos en una sola fila
   ============================================================ */
@media (min-width:1200px){ .picker{ grid-template-columns:repeat(5,1fr); gap:var(--s3) } }
@media (min-width:900px) and (max-width:1199px){ .picker{ grid-template-columns:repeat(3,1fr) } }

/* Botón de idioma en el nav */
.langbtn{
  font-size:.6875rem; letter-spacing:.16em; padding:5px 9px;
  border:1px solid currentColor; border-radius:0; line-height:1.4;
  opacity:.75; transition:opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.langbtn:hover{ opacity:1 }
.nav.is-stuck .langbtn:hover,
.nav--solid .langbtn:hover{ background:var(--ink); color:var(--bone) }

/* Botón de copiar el código en la barra superior */
.promo__copy{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border:1px solid rgba(10,10,10,.4); border-radius:0;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.promo__copy:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.promo b{ font-weight:500; letter-spacing:.18em }

/* ============================================================
   18. BARRA SUPERIOR EN MARQUESINA
   ============================================================ */
.promo{
  background:var(--sand); color:var(--ink);
  display:flex; align-items:center; gap:var(--s2);
  padding-inline:var(--gutter);
  overflow:hidden; max-height:110px;
  transition:max-height .5s var(--ease), opacity .35s var(--ease);
}
.nav.is-stuck .promo{ max-height:0; opacity:0; padding-block:0 }

.promo__marquee{
  flex:1; min-width:0; overflow:hidden; padding-block:11px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.promo__track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
}
.promo:hover .promo__track,
.promo:focus-within .promo__track{ animation-play-state:paused }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.promo__group{
  display:flex; align-items:center; flex:none; white-space:nowrap;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
}
.promo__group b{ font-weight:500 }
.promo__group em{
  font-style:normal; font-weight:500; letter-spacing:.22em;
  border-bottom:1px solid rgba(10,10,10,.45); padding-bottom:1px; margin-left:.4em;
}
.promo__group i{ font-style:normal; opacity:.4; padding-inline:var(--s3); font-size:.5rem }
.promo__group [data-timer]{ font-variant-numeric:tabular-nums; letter-spacing:.1em }

.promo__copy{
  flex:none; font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border:1px solid rgba(10,10,10,.42); border-radius:0;
  background:rgba(244,241,234,.35);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.promo__copy:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink) }

@media (prefers-reduced-motion:reduce){
  .promo__track{ animation:none }
}
@media (max-width:639px){
  .promo__group{ font-size:.625rem; letter-spacing:.1em }
  .promo__copy{ font-size:.5625rem; padding:4px 9px }
}

/* Dos campos de código en el resumen */
.codes{ display:grid; gap:var(--s3); margin:var(--s3) 0 }
.code{ margin:0; padding:0; border:0 }
.code__label{
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:8px;
}
.code__label i{ font-style:normal; opacity:.7; letter-spacing:.1em }

/* ============================================================
   CONFIRMACIÓN: terminal SOLMARE y recibo impreso (assets/recibo.js)
   Diseño basado en «Receipt Printer» de dqnamo, sin librerías.
   data-etapa: verificando -> imprimiendo -> listo
   ============================================================ */
/* La vista de confirmación apila la terminal y lo de debajo, pegada
   al título: el recibo crece hacia abajo y debe verse sin desplazarse */
#doneView.done{ flex-direction:column; justify-content:flex-start; max-width:none; min-height:0; padding:var(--s4) 0 var(--s7) }
.done .recibo{ margin:0 auto; width:100%; max-width:24rem; display:flex; flex-direction:column; align-items:center; text-align:left }
.recibo__maquina{
  position:relative; z-index:2; width:100%; border-radius:24px; padding:12px 12px 32px;
  background:#1B1B1B; border:1px solid #0A0A0A;
  box-shadow:0 20px 36px -20px rgba(10,10,10,.55), 0 6px 14px -8px rgba(10,10,10,.25),
             inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.55);
}
.recibo__cabeza{ height:34px; display:flex; align-items:flex-start; padding:2px 6px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; letter-spacing:.16em; color:rgba(244,241,234,.7) }
.recibo__pantalla{
  position:relative; border-radius:12px; padding:16px; background:#0A0A0A; color:var(--bone, #F4F1EA);
  box-shadow:inset 0 0 24px 4px rgba(0,0,0,.55);
}
.recibo__resumen{ display:flex; justify-content:space-between; gap:16px; font-size:.875rem }
.recibo__titulo{ margin:0; font-weight:500; letter-spacing:.04em }
.recibo__sub{ margin:2px 0 0; color:rgba(244,241,234,.55) }
.recibo__importe{ font-weight:500; font-variant-numeric:tabular-nums }
.recibo__estado{ display:flex; align-items:center; gap:8px; margin-top:16px; min-height:20px }
.recibo__texto{ font-size:.75rem; color:rgba(244,241,234,.6) }
.recibo__icono{ position:relative; width:18px; height:18px; flex:none; display:grid; place-items:center }
.recibo__giro{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(244,241,234,.25);
  border-top-color:rgba(244,241,234,.75); animation:reciboGiro .8s linear infinite }
.recibo__ok{ display:none; width:18px; height:18px }
.recibo__ok circle{ fill:#3E9B6A }
.recibo__ok path{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.recibo[data-etapa="listo"] .recibo__giro{ display:none }
.recibo[data-etapa="listo"] .recibo__ok{ display:block; animation:reciboOk .18s ease-out }
.recibo[data-etapa="listo"] .recibo__texto{ color:rgba(244,241,234,.85) }
.recibo__ranura{ position:absolute; left:24px; right:24px; bottom:12px; height:8px; border-radius:4px;
  background:#050505; box-shadow:inset 0 1px 3px rgba(0,0,0,.9) }

/* La salida tapa el papel mientras no se imprime: el papel sube
   dentro de ella (translateY) y no ocupa sitio en pantalla */
.recibo__salida{ position:relative; z-index:3; margin-top:-16px; width:calc(80% + 3rem); max-width:100%;
  overflow:hidden; padding:0 24px 18px }
.recibo__salida::before{ content:""; position:absolute; left:24px; right:24px; top:-4px; height:8px; z-index:2;
  background:rgba(10,10,10,.7); filter:blur(6px); opacity:0; transition:opacity .2s }
.recibo:not([data-etapa="verificando"]) .recibo__salida::before{ opacity:1 }
.recibo__papel{
  position:relative; display:block; padding:28px 22px 32px; background:#FBFAF7; color:#141414;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.6;
  box-shadow:0 8px 24px rgba(10,10,10,.18); transform:translateY(calc(-100% - 2px)); opacity:0;
}
.recibo[data-etapa="imprimiendo"] .recibo__papel{ opacity:1; animation:reciboImprime 1.75s linear forwards }
.recibo[data-etapa="listo"] .recibo__papel{ opacity:1; transform:translateY(0) }
.recibo__marca{ margin:0; text-align:center; font-size:11px; letter-spacing:.3em }
.recibo__gracias{ margin:4px 0 0; text-align:center; font-size:11px; color:#5E5A52 }
.recibo__corte{ border:0; border-top:1px dashed #A8A398; margin:16px 0 }
.recibo__lista{ margin:0; display:grid; gap:6px }
.recibo__fila{ display:flex; justify-content:space-between; gap:16px }
.recibo__fila dt{ min-width:0 }
.recibo__fila dd{ margin:0; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.recibo__fila--suave, .recibo__lista--datos .recibo__fila{ color:#5E5A52 }
.recibo__fila--total{ font-weight:700; margin-top:2px }
.recibo__lista--datos{ font-size:11px; gap:4px }
.recibo__lista--datos dt{ white-space:nowrap }
/* En el teléfono el papel va casi del ancho de la ranura: con el 80 %
   del diseño original los nombres de los modelos se partían en tres líneas */
@media (max-width:480px){
  .recibo__salida{ width:100%; padding:0 26px 18px }
  .recibo__salida::before{ left:26px; right:26px }
  .recibo__papel{ padding:24px 16px 28px }
}
.recibo__cant{ color:#5E5A52; white-space:nowrap }
.recibo__pie{ margin:24px 0 0; text-align:center; font-size:10px; letter-spacing:.3em; color:#8C877C }
.recibo__despues{ text-align:center; margin-top:var(--s5, 32px) }
.recibo__despues #recCorreo{ word-break:break-all }

@keyframes reciboGiro{ to{ transform:rotate(360deg) } }
@keyframes reciboOk{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:scale(1) } }
/* El papel sale a saltos, como una impresora térmica */
@keyframes reciboImprime{
  0%{ transform:translateY(calc(-100% + 2px)) }
  7.5%{ transform:translateY(-91%) }
  10.5%{ transform:translateY(-91%) }
  18%{ transform:translateY(-81%) }
  21%{ transform:translateY(-81%) }
  28.5%{ transform:translateY(-70%) }
  31.5%{ transform:translateY(-70%) }
  39%{ transform:translateY(-58%) }
  42%{ transform:translateY(-58%) }
  49.5%{ transform:translateY(-45%) }
  52.5%{ transform:translateY(-45%) }
  60%{ transform:translateY(-32%) }
  63%{ transform:translateY(-32%) }
  70.5%{ transform:translateY(-20%) }
  73.5%{ transform:translateY(-20%) }
  81%{ transform:translateY(-10%) }
  84%{ transform:translateY(-10%) }
  91.5%{ transform:translateY(-3%) }
  94.5%{ transform:translateY(-3%) }
  100%{ transform:translateY(0%) }
}
@media (prefers-reduced-motion: reduce){
  .recibo__giro{ animation:none }
  .recibo[data-etapa="imprimiendo"] .recibo__papel{ animation:none; transform:translateY(0) }
}

/* ============================================================
   19. PORTADA «MAREA» (rediseño): cinta, cabecera, campaña,
   colección, resto de bloques y olas
   Clases propias de la portada (cinta, nav--marea, camp, pildora,
   col, formas, foco, oferta, nov, man, gar, dest, prensa, boletin,
   ola): la selección, el pago y Ayuda
   siguen con su cabecera y su marquesina hasta que se igualen.
   El acento de mar sale de la lente azul petróleo del mod.04 y del
   agua de la campaña: marca lo que se mueve y los fondos hondos.
   ============================================================ */
:root{
  --mar:#1B4F5C;            /* 8:1 sobre hueso */
  --mar-hondo:#0F2A33;      /* fondo hondo; el hueso encima da 13:1 */
  --hdr:60px; --hdr-c:52px; /* alto de la cabecera y alto ya compactada */
  --vh:1vh; --pin-n:28;     /* cuánto (en % de pantalla) se queda fija la campaña */
}
@supports (height:1svh){ :root{ --vh:1svh } }
@media (min-width:768px){ :root{ --pin-n:34 } }
@media (min-width:1024px){ :root{ --hdr:72px; --hdr-c:60px; --pin-n:45 } }
@media (prefers-reduced-motion:reduce){ :root{ --pin-n:0 } }

/* Al acabar la promoción se ocultan los contadores, no se dejan en cero */
.promo-fin [data-solo-promo]{ display:none !important }

/* ---------- Cinta de anuncios: un mensaje cada vez, con flechas ---------- */
.cinta{
  display:grid; grid-template-columns:40px minmax(0,1fr) 40px auto; align-items:center;
  min-height:40px; padding-right:max(10px, calc(var(--gutter) - 14px));
  background:var(--ink); color:var(--bone);
  font-size:.75rem; font-weight:400; letter-spacing:.02em; line-height:1.4;
}
.cinta :focus-visible{ outline:2px solid var(--bone); outline-offset:-2px }
.cinta__flecha{
  height:40px; padding:0; display:grid; place-items:center; color:var(--bone-80);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.cinta__flecha svg{ width:14px; height:14px }
.cinta__flecha:hover{ color:var(--bone) }
.cinta__flecha:active{ transform:scale(.88) }
.cinta__vista{ display:grid; overflow:hidden; padding:6px 0; text-align:center }
.cinta__msg{
  grid-area:1/1; align-self:center;
  transition:opacity .55s var(--ease), transform .75s var(--ease), visibility 0s;
}
.cinta__msg:not(.is-on){
  opacity:0; visibility:hidden; transform:translateY(var(--sale, 100%));
  transition:opacity .4s var(--ease), transform .75s var(--ease), visibility 0s .75s;
}
.cinta__msg b{ font-weight:500 }
.cinta__msg em{ font-style:normal; font-weight:500; letter-spacing:.08em }
/* El contador, solo donde cabe entero en la misma línea */
.cinta__tiempo{ display:none; color:var(--bone-80); font-variant-numeric:tabular-nums; white-space:nowrap }
.cinta__tiempo i{ font-style:normal; padding-inline:.45em }
.cinta__copiar{
  justify-self:end; padding:5px 12px; border:1px solid rgba(244,241,234,.45);
  font-size:.6875rem; font-weight:500; letter-spacing:.06em; white-space:nowrap;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.cinta__copiar:hover{ background:var(--bone); color:var(--ink) }
@media (min-width:768px){ .cinta{ font-size:.8125rem } }
@media (min-width:1024px){ .cinta__tiempo{ display:inline } }

/* ---------- Cabecera pegajosa que se compacta ----------
   La caja mide siempre --hdr (sin saltos de maquetación); al bajar,
   el fondo sube con transform y el contenido se acerca unos píxeles. */
.nav--marea{
  position:sticky; inset:auto; top:0; z-index:60; height:var(--hdr);
  color:var(--ink); background:none; border-bottom:0; pointer-events:none; transition:none;
}
.nav--marea::before{
  content:""; position:absolute; inset:0; background:var(--bone); box-shadow:0 1px 0 var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.nav--marea.is-compacta::before{
  transform:translateY(calc(var(--hdr-c) - var(--hdr)));
  box-shadow:0 1px 0 var(--line), 0 14px 30px -24px rgba(15,42,51,.35);
}
.nav--marea .nav__in{ position:relative; height:var(--hdr); transition:transform .5s var(--ease) }
.nav--marea .nav__in > *{ pointer-events:auto }
.nav--marea.is-compacta .nav__in{ transform:translateY(calc((var(--hdr-c) - var(--hdr)) / 2)) }
.nav--marea .brand img{ transform-origin:left center; transition:opacity .4s var(--ease), transform .5s var(--ease) }
.nav--marea .brand .on-ink{ opacity:1 }
.nav--marea .brand .on-bone{ opacity:0 }
.nav--marea.is-compacta .brand img{ transform:scale(.88) }
.nav--marea .nav__links a{ position:relative }
.nav--marea .nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--mar);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav--marea .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav--marea .langbtn:hover{ background:var(--ink); color:var(--bone) }
/* Al saltar a un bloque desde el menú, queda justo debajo de la cabecera */
.nav--marea ~ main > section{ scroll-margin-top:var(--hdr-c) }

/* ---------- Campaña: fija un momento al bajar ----------
   La sección es más alta que su escena: mientras se recorre esa
   diferencia, la escena se queda pegada y portada.js recorta la foto.
   Con «reducir movimiento» la diferencia es cero: no se queda fija. */
.camp{
  position:relative; background:var(--bone);
  height:calc(max(560px, var(--vh) * 100 - var(--hdr-c)) + var(--vh) * var(--pin-n));
}
.camp__escena{
  position:sticky; top:var(--hdr-c); overflow:hidden;
  height:max(560px, calc(var(--vh) * 100 - var(--hdr-c)));
}
.camp__marco{ position:absolute; inset:0; overflow:hidden; background:var(--mar-hondo); will-change:clip-path }
.camp__zoom{ position:absolute; inset:0; transform:scale(1.1); transform-origin:50% 62%; will-change:transform }
/* Pantalla alta o cuadrada: la foto se alarga y se ancla abajo, así el
   «SOLMARE / ELEVATE YOUR VISION» quemado arriba queda siempre fuera */
.camp__foto{
  position:absolute; left:0; bottom:0; width:100%; height:161%; max-width:none;
  object-fit:cover; object-position:38% 100%;
  animation:camp-respira 1.8s var(--ease) both;
}
@media (min-aspect-ratio:7/5){ .camp__foto{ height:100%; object-position:50% 68% } }
@keyframes camp-respira{ from{ scale:1.06 } }
.camp__velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.22) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,.12) 50%, rgba(10,10,10,.7) 100%);
}
/* Abajo queda sitio para la cinta y la cabecera, que al cargar empujan
   la escena: así los botones se ven sin bajar */
.camp__copia{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 var(--gutter) clamp(92px, 12vh, 124px); text-align:center; color:var(--bone);
  will-change:transform;
}
.camp__copia > *{ animation:camp-entra .95s var(--ease) both; animation-delay:.2s }
.camp__copia > :nth-child(2){ animation-delay:.32s }
.camp__copia > :nth-child(3){ animation-delay:.44s }
.camp__copia > :nth-child(4){ animation-delay:.56s }
@keyframes camp-entra{ from{ opacity:0; transform:translateY(24px) } }
.camp :focus-visible{ outline:2px solid var(--bone); outline-offset:3px }
.camp__kicker{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; margin-bottom:18px;
  padding:7px 16px; border-radius:999px; background:rgba(10,10,10,.34); border:1px solid rgba(244,241,234,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.71875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.camp__kicker [data-timer]{ font-variant-numeric:tabular-nums; letter-spacing:.06em; text-transform:none }
.camp__kicker i{ width:24px; height:1px; background:currentColor; opacity:.7 }
/* Si el panel deja vacía la etiqueta, la raya no se queda suelta delante del contador */
.camp__kicker [data-campo="ey"][hidden] + i{ display:none }
.camp__titulo{
  max-width:21ch; margin:0; padding-bottom:.06em;
  font-size:clamp(2.45rem, 1.5rem + 4.4vw, 5.6rem); font-weight:300; line-height:1.04; letter-spacing:-.018em;
  text-wrap:balance; text-shadow:0 2px 30px rgba(10,10,10,.25);
}
.camp__titulo em{ font-style:italic }
.camp__texto{
  max-width:44ch; margin-top:16px; color:var(--bone-80);
  font-size:clamp(.95rem, .9rem + .3vw, 1.125rem); text-shadow:0 1px 16px rgba(10,10,10,.35);
}
.camp__acc{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px }
@media (max-width:599px){
  .camp__kicker{ font-size:.65625rem; letter-spacing:.1em; border-radius:16px; padding:6px 14px }
  .camp__kicker i{ display:none }
  .camp__acc{ gap:8px; margin-top:20px }
  .camp__acc .pildora{ padding-inline:16px }
  .camp__acc .pildora__ico{ display:none }
  .camp__texto{ margin-top:12px; font-size:.92rem }
}

/* Píldoras de cristal sobre la foto */
.pildora{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border-radius:999px;
  font-size:.8125rem; font-weight:500; letter-spacing:.03em; line-height:1.2; white-space:nowrap; text-decoration:none;
  transition:transform .3s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pildora:active{ transform:scale(.98) }
.pildora--cristal{
  color:var(--bone); background:rgba(244,241,234,.14); border:1px solid rgba(244,241,234,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.pildora--cristal:hover{ background:rgba(244,241,234,.28) }
.pildora--clara{ color:var(--ink); background:rgba(244,241,234,.9); border:1px solid rgba(244,241,234,.95) }
.pildora--clara:hover{ background:rgba(250,248,244,.98) }
.pildora__ico{
  width:26px; height:26px; margin-right:-10px; border-radius:50%; display:grid; place-items:center;
  background:rgba(10,10,10,.08); transition:transform .45s var(--ease);
}
.pildora__ico svg{ width:14px; height:14px }
.pildora:hover .pildora__ico{ transform:translateX(3px) }

/* ---------- Revelado tipo ola ----------
   Solo si el observador arrancó (.mov); sin él, todo se ve. Al
   terminar se quita el recorte (.hecha) para no cortar sombras. */
.ola{
  clip-path:polygon(-10% -6%, 20% -12%, 40% -14%, 60% -8%, 80% -4%, 110% -6%, 110% 120%, -10% 120%);
  transition:clip-path 1.25s cubic-bezier(.7,0,.2,1) var(--d, 0ms);
}
.mov .ola:not(.is-in){ clip-path:polygon(-10% 112%, 20% 106%, 40% 104%, 60% 108%, 80% 114%, 110% 110%, 110% 130%, -10% 130%) }
.ola.hecha{ clip-path:none }
.ola img{ transition:scale 1.6s var(--ease) var(--d, 0ms) }
.mov .ola:not(.is-in) img{ scale:1.08 }

/* ---------- Colección: formas, carrusel con foco y oferta ----------
   El marcado sale del catálogo (solmare.js) y se mueve con portada.js.
   Cifras alineadas: con las de estilo antiguo de Cormorant, «mod.01»
   se leía «mod.oɪ». */
.col{
  background:var(--bone); font-variant-numeric:lining-nums;
  padding-block:clamp(72px, 10vw, 150px) clamp(72px, 9vw, 128px);
}
.col :focus-visible{ outline:2px solid var(--mar); outline-offset:3px; border-radius:6px }
.col__cab{ display:grid; justify-items:center; gap:14px; text-align:center }
.col__ey{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.25rem; line-height:1.3; color:var(--mar) }
.col__cab .lead{ margin-top:4px }

/* Botón redondo con flecha (formas y carrusel) */
.flecha{
  width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(10,10,10,.24); color:var(--ink); background:rgba(244,241,234,.72);
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.flecha svg{ width:18px; height:18px }
@media (hover:hover){ .flecha:hover{ background:var(--ink); color:var(--bone) } }
.flecha:active{ transform:scale(.93) }

/* Recorte de las fotos de producto: llevan texto quemado arriba
   (hasta y = 450 de 1200). La foto se amplía (--z) y se centra en --y:
   así la ventana visible empieza siempre por debajo de ese texto. */
.shot{ --ar:4/3; --z:1.3; --y:.68; display:block; position:relative; overflow:hidden; aspect-ratio:var(--ar); background:var(--frame) }
.shot > img{
  position:absolute; top:50%; left:calc((1 - var(--z)) * 50%);
  width:calc(var(--z) * 100%); max-width:none; height:auto;
  transform:translateY(calc(var(--y) * -100%));
}

/* «Elige por la forma»: una fila que se desliza, con barra de progreso */
.formas{ margin-top:clamp(48px, 6vw, 88px) }
.formas__cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(20px, 3vw, 32px) }
.formas__titulo{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height:1.1; letter-spacing:-.01em }
.formas__flechas{ display:flex; gap:8px }
.formas.sin-desplazar .formas__flechas, .formas.sin-desplazar .barra{ display:none }
.pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  /* La primera tarjeta se alinea con el título; las demás salen por la derecha */
  --borde:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-inline:var(--borde); padding:4px var(--borde) 10px;
  scrollbar-width:none;
}
.pista::-webkit-scrollbar{ display:none }
.pista:focus-visible{ outline-offset:-2px }
@media (min-width:768px){ .pista{ grid-auto-columns:46%; gap:20px } }
@media (min-width:1024px){ .pista{ grid-auto-columns:36%; gap:24px } }
@media (min-width:1440px){ .pista{ grid-auto-columns:31% } }
.forma{ position:relative; display:block; scroll-snap-align:start; color:var(--ink); text-decoration:none; border-radius:20px }
.forma__foto{ border-radius:20px }
.forma__foto > img{ transition:scale .9s var(--ease) }
@media (hover:hover){ .forma:hover .forma__foto > img{ scale:1.05 } }
.forma:focus-visible .forma__foto > img{ scale:1.05 }
.forma__pildora{
  position:absolute; z-index:2; top:14px; left:14px; padding:7px 14px; border-radius:999px;
  background:rgba(244,241,234,.92); font-size:.78125rem; font-weight:500; letter-spacing:.02em;
  transition:transform .45s var(--ease);
}
@media (hover:hover){ .forma:hover .forma__pildora{ transform:translateY(-2px) } }
.forma__pie{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 2px 0 }
.forma__mods{ font-family:var(--serif); font-size:1.35rem; line-height:1.2 }
.forma__dato{ font-size:.8125rem; color:var(--ink-45); white-space:nowrap }
@media (max-width:599px){ .forma__pie{ flex-direction:column; align-items:flex-start; gap:2px } }
.barra{ position:relative; height:2px; margin-top:28px; background:var(--line); border-radius:2px; overflow:hidden }
.barra__pulgar{ position:absolute; left:0; top:0; height:100%; width:30%; background:var(--mar); border-radius:2px }

/* Carrusel con foco: el del centro grande; los de los lados, más
   pequeños y atenuados (con un desenfoque leve en pantallas anchas) */
.col__modelos{ margin-top:clamp(56px, 7vw, 104px) }
.foco{ position:relative; overflow:hidden; --w:72vw; --lado:97%; --esc:.74; scroll-margin-top:calc(var(--hdr-c) + 20px) }
@media (min-width:768px){ .foco{ --w:56vw; --lado:90%; --esc:.7 } }
@media (min-width:1024px){ .foco{ --w:min(40vw, 600px); --lado:88%; --esc:.68 } }
.foco__escena{ position:relative; height:calc(var(--w) * .75 + 18px); touch-action:pan-y; user-select:none; -webkit-user-select:none }
.foco__escena:focus-visible{ outline-offset:-3px }
.foco__slide{
  position:absolute; top:0; left:50%; width:var(--w); margin-left:calc(var(--w) / -2);
  transition:transform .85s var(--ease), opacity .65s var(--ease), filter .65s var(--ease);
  cursor:pointer; -webkit-user-drag:none;
}
.foco__slide[data-o="0"]{ transform:none; opacity:1; z-index:3; cursor:default }
.foco__slide[data-o="1"]{ transform:translateX(var(--lado)) scale(var(--esc)); opacity:.5; z-index:2 }
.foco__slide[data-o="-1"]{ transform:translateX(calc(var(--lado) * -1)) scale(var(--esc)); opacity:.5; z-index:2 }
.foco__slide:not([data-o="0"]):not([data-o="1"]):not([data-o="-1"]){ transform:scale(.5); opacity:0; z-index:1; pointer-events:none }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .foco__slide[data-o="1"], .foco__slide[data-o="-1"]{ filter:blur(1.5px) saturate(.85) }
}
.foco__marco{ padding:8px; border-radius:28px; background:rgba(255,255,255,.42); border:1px solid rgba(10,10,10,.06); box-shadow:0 34px 60px -36px rgba(15,42,51,.45) }
.foco__marco .shot{ border-radius:20px }
.foco .shot > .foco__img{ opacity:0; transition:opacity .6s var(--ease), scale 1.6s var(--ease) }
.foco .shot > .foco__img.is-on{ opacity:1 }
.foco__flecha{ position:absolute; z-index:5; top:calc(50% - 24px) }
.foco__flecha--prev{ left:calc(50% - var(--w) / 2 - 18px) }
.foco__flecha--next{ right:calc(50% - var(--w) / 2 - 18px) }
@media (min-width:1024px){
  .foco__flecha--prev{ left:calc(50% - var(--w) / 2 - 24px) }
  .foco__flecha--next{ right:calc(50% - var(--w) / 2 - 24px) }
}
.foco__info{ text-align:center; margin-top:30px; padding-inline:var(--gutter) }
.foco__datos{ transition:opacity .34s var(--ease), transform .5s var(--ease) }
.foco__info.cambia .foco__datos{ opacity:0; transform:translateY(8px); transition-duration:.16s }
.foco__nombre{ display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:400; font-size:clamp(2rem, 1.6rem + 1.4vw, 3rem); line-height:1 }
.foco__nuevo{ font-family:var(--sans); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--mar); border:1px solid currentColor; border-radius:999px; padding:4px 9px }
.foco__info:not([data-nuevo="true"]) .foco__nuevo{ display:none }
.foco__var, .foco__precio{ transition:opacity .3s var(--ease) }
.foco__datos.cambia-color .foco__var, .foco__datos.cambia-color .foco__precio{ opacity:0; transition-duration:.14s }
.foco__var{ margin-top:10px; color:var(--ink-45); font-size:.875rem }
.foco__precio{ margin-top:6px; font-family:var(--serif); font-size:1.6rem; line-height:1.2 }
.muestras{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:12px }
.muestra{ width:40px; height:40px; display:grid; place-items:center; border-radius:50% }
.muestra i{
  width:24px; height:24px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.2); transition:transform .35s var(--ease), box-shadow .25s var(--ease);
}
@media (hover:hover){ .muestra:hover i{ transform:scale(1.12) } }
.muestra[aria-pressed="true"] i{ box-shadow:inset 0 0 0 1px rgba(10,10,10,.2), 0 0 0 3px var(--bone), 0 0 0 4.5px var(--mar) }
/* Un color agotado sigue a la vista, tachado: se puede mirar y probar */
.muestra.is-agotada i{ background:linear-gradient(135deg, transparent 45%, rgba(244,241,234,.95) 45% 55%, transparent 55%), var(--c) }
.foco__info.is-agotado .foco__precio{ color:var(--ink-45) }
.foco__acc{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px }
.foco__pos{ display:flex; justify-content:center; gap:6px; margin-top:22px }
.foco__pos i{ width:22px; height:2px; background:rgba(10,10,10,.24); border-radius:2px; transform-origin:left; transition:background-color .4s var(--ease), transform .5s var(--ease) }
.foco__pos i.is-on{ background:var(--mar); transform:scaleX(1.6) }
.col__todo{ margin-top:26px; text-align:center }
.col__todo a{
  font-size:.8125rem; font-weight:500; letter-spacing:.03em; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--mar); text-underline-offset:6px;
  transition:color .3s var(--ease);
}
.col__todo a:hover{ color:var(--mar) }

/* Botones de la colección: tinta llena y de línea, que se llena desde
   abajo como el agua */
.pildora--tinta{ color:var(--bone); background:var(--ink); border:1px solid var(--ink) }
.pildora--tinta:hover{ background:var(--ink-hover); border-color:var(--ink-hover) }
.pildora--tinta.is-added{ background:var(--mar); border-color:var(--mar) }
.pildora--linea{ position:relative; isolation:isolate; overflow:hidden; color:var(--ink); border:1px solid currentColor }
.pildora--linea::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
@media (hover:hover){
  .pildora--linea:hover{ color:var(--bone) }
  .pildora--linea:hover::before{ transform:none }
}
.pildora.is-out{ opacity:.5; cursor:not-allowed }

/* Oferta en azul hondo, con marco doble fino */
.oferta{ margin-top:clamp(56px, 8vw, 112px); padding:8px; border-radius:34px; background:rgba(15,42,51,.07); border:1px solid rgba(15,42,51,.1) }
.oferta__in{
  display:grid; gap:32px; padding:clamp(28px, 5vw, 72px); border-radius:27px;
  background:radial-gradient(120% 140% at 100% 0%, #173C47 0%, var(--mar-hondo) 55%); color:var(--bone);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.oferta__in > *{ min-width:0 }
@media (min-width:1024px){ .oferta__in{ grid-template-columns:1.1fr 1fr; gap:clamp(48px, 6vw, 96px); align-items:center } }
.oferta :focus-visible{ outline-color:var(--bone) }
.oferta__ey{ font-size:.71875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80) }
.oferta__titulo{ margin-top:14px; font-family:var(--serif); font-weight:300; font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); line-height:1.1; letter-spacing:-.01em }
.oferta__ej{ margin-top:22px; font-size:.875rem; color:var(--bone-80) }
.oferta__ej strong{ font-weight:500; color:var(--bone) }
.oferta__ej s{ opacity:.8 }
/* Cada nombre con su precio en la misma línea */
.oferta__par{ white-space:nowrap }
.oferta .clock{ gap:clamp(18px, 3vw, 40px); margin-bottom:22px }
.oferta .clock b{ font-weight:300; font-size:clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem); font-variant-numeric:tabular-nums lining-nums }
.oferta .clock span{ font-size:.6875rem; font-weight:500; letter-spacing:.14em; color:rgba(244,241,234,.66) }
.oferta__txt{ color:var(--bone-80); max-width:46ch }
/* Sobre el azul hondo, el botón claro va macizo: el de cristal translúcido
   de la campaña se veía gris aquí */
.oferta__cta{ margin-top:26px }
.oferta .pildora--clara{ background:var(--bone); border-color:var(--bone) }
.oferta .pildora--clara:hover{ background:#fff; border-color:#fff }

/* ---------- Resto de la portada: novedad, manifiesto, garantía, pieza
   destacada, prensa y boletín ---------- */
:root{ --bruma:#DCE5E1 }   /* solo en el degradado de la garantía */
.nov, .man, .gar, .prensa, .boletin{ font-variant-numeric:lining-nums }
.nov :focus-visible, .man :focus-visible, .gar :focus-visible, .prensa :focus-visible, .boletin :focus-visible{
  outline:2px solid var(--mar); outline-offset:3px; border-radius:6px;
}
/* El rótulo del panel en cursiva serif, en el color del mar */
.ey-i{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.25rem; line-height:1.3; color:var(--mar) }
/* Marco doble fino alrededor de una foto */
.bisel{ padding:8px; border-radius:28px; background:rgba(255,255,255,.38); border:1px solid rgba(10,10,10,.06) }
.bisel .shot{ border-radius:20px }
.shot--1610{ --ar:16/10; --z:1.2; --y:.66 }

/* Modelo nuevo */
.nov{ background:var(--bone-dim); padding-block:clamp(72px, 10vw, 150px) }
.nov__grid{ display:grid; gap:36px; align-items:center }
.nov__grid > *{ min-width:0 }
@media (min-width:1024px){ .nov__grid{ grid-template-columns:7fr 5fr; gap:clamp(48px, 6vw, 96px) } }
.nov__foto{ position:relative; margin:0 }
.bandera{
  position:absolute; z-index:2; top:22px; left:22px; padding:7px 14px; border-radius:999px;
  background:rgba(244,241,234,.92); font-size:.75rem; font-weight:500; letter-spacing:.04em;
}
.nov__txt{ display:grid; gap:18px; justify-items:start }
.nov__precio{ display:flex; align-items:baseline; gap:14px; margin-top:4px }
.nov__precio b{ font-family:var(--serif); font-weight:400; font-size:2.3rem; line-height:1 }
.nov__precio span{ font-size:.8125rem; font-weight:500; color:var(--accent-ink) }
.nov__acc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }

/* Manifiesto: foto a lo ancho con el titular encima (en pantallas
   anchas) y los puntos en pestañas */
.man{ background:var(--bone); padding-block:clamp(64px, 8vw, 120px) clamp(32px, 4vw, 64px) }
.man__escena{ position:relative }
.man__foto{ position:relative }
.man__velo{ display:none }
.man__sobre{ display:grid; gap:22px; padding-top:32px }
.man__sobre .ey-i{ margin-bottom:10px }
.man__acc{ display:flex; flex-wrap:wrap; gap:10px }
@media (min-width:1024px){
  .man__velo{
    display:block; position:absolute; inset:8px; border-radius:20px;
    background:linear-gradient(0deg, rgba(244,241,234,.94) 0%, rgba(244,241,234,.62) 26%, rgba(244,241,234,0) 52%);
  }
  .man__sobre{
    position:absolute; left:8px; right:8px; bottom:8px; grid-template-columns:1fr auto; align-items:end;
    padding:0 clamp(32px, 4vw, 64px) clamp(32px, 4vw, 56px);
  }
}
.man__abajo{ display:grid; gap:32px; padding-top:clamp(40px, 5vw, 80px) }
.man__abajo > *{ min-width:0 }
@media (min-width:1024px){ .man__abajo{ grid-template-columns:5fr 6fr; gap:clamp(48px, 7vw, 120px); align-items:start } }
.pestanas__lista{ position:relative; display:flex; gap:26px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line) }
.pestanas__lista::-webkit-scrollbar{ display:none }
.pestana{ flex:none; padding:14px 0; font-size:.875rem; font-weight:400; color:var(--ink-45); white-space:nowrap; transition:color .3s var(--ease) }
.pestana:hover, .pestana[aria-selected="true"]{ color:var(--ink) }
.man .pestana:focus-visible{ outline-offset:-2px }
.pestanas__linea{
  position:absolute; left:0; bottom:0; width:100px; height:2px; background:var(--mar);
  transform-origin:0 0; transform:scaleX(0); transition:transform .6s var(--ease);
}
.pestanas__paneles{ display:grid; margin-top:26px }
.pestanas__panel{
  grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s;
}
.pestanas__panel.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .55s var(--ease) .08s, transform .7s var(--ease) .08s, visibility 0s;
}
.pestanas__panel p{ font-family:var(--serif); font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height:1.25; font-weight:300; max-width:30ch }

/* Garantía: los puntos del panel en tres tarjetas sobre un degradado */
.gar{ background:linear-gradient(180deg, var(--bone) 0%, var(--bruma) 100%); padding-block:clamp(72px, 10vw, 150px) }
.gar__arriba{ display:grid; gap:32px; align-items:center }
.gar__arriba > *{ min-width:0 }
@media (min-width:1024px){ .gar__arriba{ grid-template-columns:5fr 7fr; gap:clamp(48px, 6vw, 96px) } }
.gar__txt{ display:grid; gap:18px; justify-items:start }
/* En su columna estrecha, el titular un punto más pequeño: a tamaño completo ocupaba cuatro líneas */
.gar__txt .d2{ font-size:clamp(2.1rem, 1.45rem + 2.7vw, 3.9rem) }
.gar__foto{ margin:0 }
.gar__tarjetas{ display:grid; gap:20px; margin:clamp(40px, 5vw, 72px) 0 0 }
@media (min-width:768px){ .gar__tarjetas{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
/* El marco doble con sombras: no cambia el tamaño de la tarjeta */
.gar__tarjetas > div{
  display:grid; align-content:start; gap:10px; padding:clamp(22px, 2.6vw, 36px); border-radius:20px;
  background:rgba(244,241,234,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 6px rgba(255,255,255,.34), 0 0 0 7px rgba(27,79,92,.12);
}
.gar__tarjetas .num{ font-size:.6875rem; font-weight:500; letter-spacing:.14em; color:var(--mar) }
.gar__tarjetas dt{ font-family:var(--serif); font-size:1.6rem; font-weight:400; line-height:1.15 }
.gar__tarjetas dd{ margin:0; font-size:.90625rem; color:var(--ink-80) }
.gar__pie{ margin-top:36px }

/* Pieza destacada: azul hondo, cielo de la campaña y píldora que flota */
.dest{ background:var(--mar-hondo); color:var(--bone); padding-bottom:clamp(80px, 10vw, 150px); font-variant-numeric:lining-nums }
.dest :focus-visible{ outline:2px solid var(--bone); outline-offset:3px; border-radius:6px }
.dest__cielo{
  position:relative; display:grid; place-items:center; text-align:center;
  min-height:max(320px, 24vw); padding:72px var(--gutter);
  background:url(campana.jpg) 50% 0 / auto 580% no-repeat, var(--mar-hondo);
}
.dest__cielo::before{
  content:""; position:absolute; inset:0 0 -1px;
  /* Llega al azul hondo antes del borde: sin raya entre el cielo y el cuerpo */
  background:linear-gradient(180deg, rgba(15,42,51,.42) 0%, rgba(15,42,51,.5) 55%, var(--mar-hondo) 94%);
}
.dest__cab{ position:relative; display:grid; gap:16px; justify-items:center }
.dest__ey{ font-size:.71875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80) }
.dest__cab h2{ max-width:18ch; text-wrap:balance }
.dest__cuerpo{ display:grid; gap:64px; margin-top:clamp(8px, 2vw, 24px) }
.dest__cuerpo > *{ min-width:0 }
@media (min-width:1024px){ .dest__cuerpo{ grid-template-columns:1.1fr 1fr; gap:clamp(56px, 7vw, 112px); align-items:center } }
.dest__placa{ position:relative }
.dest__placa .bisel{ background:rgba(244,241,234,.08); border-color:rgba(244,241,234,.14) }
.flota{ position:absolute; z-index:3; left:50%; bottom:-30px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 16px) }
.flota__in{
  display:flex; align-items:center; gap:12px; padding:7px; border-radius:999px;
  background:rgba(244,241,234,.95); color:var(--ink);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8);
  animation:flota 5.5s ease-in-out infinite alternate;
}
@keyframes flota{ to{ transform:translateY(-6px) } }
.flota__mini{ --ar:1/1; --z:2.2; --y:.62; width:46px; flex:none; border-radius:50% }
.flota__txt{ display:grid; line-height:1.25 }
.flota__txt b{ font-family:var(--serif); font-weight:500; font-size:1.15rem }
.flota__txt span{ font-size:.75rem; color:var(--ink-45) }
.flota__precio{ font-family:var(--serif); font-size:1.3rem; padding-inline:4px }
.flota__btn{ min-height:44px; padding:10px 18px; font-size:.78125rem }
@media (max-width:479px){ .flota__txt span{ display:none } }
.dest__txt{ display:grid; gap:28px; justify-items:start }
.dest__txt .lead{ color:var(--bone-80) }
.fichas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; width:100% }
.ficha{ padding:16px 18px; border-radius:16px; background:rgba(244,241,234,.06); border:1px solid rgba(244,241,234,.12) }
.ficha dt{ font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,241,234,.66) }
.ficha dd{ margin:6px 0 0; font-family:var(--serif); font-size:1.3rem; line-height:1.2 }
@media (max-width:599px){ .ficha{ padding:14px } .ficha dd{ font-size:1.15rem } }
/* Botón de línea sobre fondo oscuro */
.pildora--clara-linea{ color:var(--bone) }
.pildora--clara-linea::before{ background:var(--bone) }
@media (hover:hover){ .pildora--clara-linea:hover{ color:var(--ink) } }

/* Prensa: cada cita en su tarjeta */
.prensa{ background:var(--bone); padding-block:clamp(72px, 10vw, 150px) }
.prensa__cab{ display:grid; gap:12px }
.citas{ display:grid; gap:20px; margin-top:clamp(36px, 5vw, 72px) }
@media (min-width:1024px){ .citas{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px } }
.cita{
  display:flex; flex-direction:column; justify-content:space-between; gap:28px; margin:0;
  padding:clamp(26px, 3vw, 40px); border-radius:24px;
  background:rgba(255,255,255,.42); border:1px solid rgba(10,10,10,.06);
}
.cita q{ display:block; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height:1.24; quotes:"«" "»" }
.cita cite{ display:flex; align-items:center; gap:12px; font-style:normal; font-size:.78125rem; font-weight:500; letter-spacing:.06em; color:var(--ink-45) }
.cita cite::before{ content:""; width:28px; height:1px; background:var(--mar) }

/* Boletín */
.boletin{ background:var(--bone-dim); padding-block:clamp(64px, 8vw, 120px) }
.boletin__grid{ display:grid; gap:32px }
.boletin__grid > *{ min-width:0 }
@media (min-width:1024px){ .boletin__grid{ grid-template-columns:1.2fr 1fr; gap:clamp(48px, 6vw, 104px); align-items:end } }
.boletin h2{ font-size:clamp(1.95rem, 1.4rem + 1.9vw, 3.1rem); line-height:1.08 }
.boletin__form label{ display:block; font-size:.8125rem; font-weight:500; margin-bottom:10px }
.boletin__campo{ display:flex; flex-wrap:wrap; gap:10px }
.boletin__campo input{
  flex:1 1 220px; min-width:0; min-height:50px; padding:12px 20px; border-radius:999px;
  border:1px solid rgba(10,10,10,.24); background:var(--bone); color:var(--ink);
  font:inherit; font-size:1rem; font-weight:300; transition:border-color .3s var(--ease);
}
.boletin__campo input::placeholder{ color:rgba(10,10,10,.55) }
.boletin__campo input:focus{ outline:none; border-color:var(--mar) }
.boletin__campo input:focus-visible{ outline:2px solid var(--mar); outline-offset:2px }
.boletin__msg{ min-height:1.6em; margin-top:10px; font-size:.84375rem; color:var(--mar) }

/* ---------- Movimiento reducido: todo quieto y visible ---------- */
@media (prefers-reduced-motion:reduce){
  .camp__zoom{ transform:none; will-change:auto }
  .camp__marco{ will-change:auto }
  .camp__foto, .camp__copia > *{ animation:none }
  .cinta__msg, .cinta__msg:not(.is-on){ transition:none }
  .nav--marea::before, .nav--marea .nav__in, .nav--marea .brand img{ transition:none }
  .ola, .ola img{ transition:none }
  .foco__slide, .foco .shot > .foco__img, .foco__datos, .foco__var, .foco__precio{ transition:none }
  .flota__in{ animation:none }
  .pestanas__linea, .pestanas__panel, .pestanas__panel.is-on{ transition:none }
}