/* >>> FUENTES — generado por herramientas/fuentes.py, no editar a mano */
/* Fuentes autohospedadas: mismo origen que el CSS, sin viaje a Google. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-400-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:'Bricolage Grotesque';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-500-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:'Bricolage Grotesque';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-600-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;
}
/* <<< FUENTES */

/* ============================================================================
   CAMERA CHEAT SHEETS — dirección «One motif», semilla 1579241130
   Motivo: LA FICHA. Un rectángulo con una esquina cortada: la forma del
   producto, una ficha por escena con cuatro números. Esa esquina recorta el
   bloque gigante del hero, todas las fotos, el botón, los bullets y la banda.
   Paleta dealt: verde botella + oro. Tipografía: Bricolage Grotesque.
   ========================================================================== */

:root{
  --bg:#133621;
  --deep:#0E2A19;
  --surface:#1A4429;
  --surface-2:#215435;
  --ink:#F7E08A;
  --muted:#D5C487;
  --accent:#F4D96C;
  --accent-ink:#133621;

  --notch:clamp(14px,2.2vw,30px);
  --ficha:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);

  --marco:clamp(18px,4vw,64px);
  --aire:clamp(80px,9vw,132px);

  --t-display:clamp(2.75rem,7.4vw,5.75rem);
  --t-head:clamp(1.625rem,1rem + 2.6vw,3.25rem);
  --t-lead:clamp(1.1875rem,1.08rem + 0.55vw,1.5rem);
  --t-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --t-small:clamp(0.875rem,0.85rem + 0.1vw,0.9375rem);

  --sube:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;
}
@supports (scrollbar-color:auto){html{scrollbar-color:var(--muted) var(--deep)}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-body);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}

h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:.96;margin:0;
  font-variation-settings:'opsz' 72;text-wrap:balance}
h1{font-size:var(--t-display);line-height:.92}
h2{font-size:var(--t-head)}
h3{font-size:var(--t-lead);line-height:1.14;letter-spacing:-.02em;font-variation-settings:'opsz' 24}
p{margin:0;max-width:62ch}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink);outline-offset:4px}

.env{width:min(1360px,100% - var(--marco)*2);margin-inline:auto}
.sec{padding-block:var(--aire)}
.campo{background:var(--surface)}
.campo-hondo{background:var(--deep)}
.num{font-variant-numeric:tabular-nums}
.chico{font-size:var(--t-small);color:var(--muted)}

/* ------------------------------------------------------------ EL MOTIVO */
.ficha{clip-path:var(--ficha)}
.bul{display:inline-block;width:.6em;height:.6em;flex:0 0 auto;margin-top:.44em;
  background:var(--accent);clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%)}
.banda{background:var(--accent);color:var(--accent-ink);
  clip-path:polygon(0 0,calc(100% - 7vw) 0,100% 7vw,100% 100%,0 100%);
  padding:clamp(56px,7vw,112px) 0}
.banda p{color:inherit}

/* ------------------------------------------------------------ BOTÓN */
.btn{display:inline-flex;align-items:center;gap:.7em;
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em;
  padding:clamp(17px,2vw,24px) clamp(24px,2.8vw,38px);
  text-decoration:none;border:0;cursor:pointer;clip-path:var(--ficha);
  transition:transform .14s cubic-bezier(.16,1,.3,1),background .14s linear;min-height:56px}
.btn:hover{background:#FFE98A}
.btn:active{transform:translateY(2px)}
.btn__f{width:.8em;height:.8em;background:currentColor;flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.2 18.8 12 13 17.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.2 18.8 12 13 17.8'/%3E%3C/svg%3E") center/contain no-repeat}

/* ------------------------------------------------------------ BARRA */
.barra{position:fixed;inset:0 0 auto 0;z-index:60;background:var(--deep);
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px);
  padding:10px var(--marco);font-size:var(--t-small)}
.barra b{color:var(--accent);font-weight:600}
.barra .btn{font-size:var(--t-small);padding:10px 16px;min-height:0;position:relative}
.barra .btn::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.barra-hueco{height:62px}

/* ------------------------------------------------------------ HERO */
.hero{position:relative;overflow:hidden;min-height:96svh;display:flex;align-items:flex-start;
  padding-block:clamp(68px,16vw,120px) clamp(28px,7vw,96px)}
@media(min-width:900px){.hero{align-items:center}}
.hero__forma{position:absolute;z-index:0;background:var(--accent);
  width:130vw;height:130vw;left:50%;top:58svh;transform:translateX(-50%);
  clip-path:polygon(17vw 0,100% 0,100% 100%,0 100%,0 17vw)}
.hero .env{position:relative;z-index:1;display:grid;gap:clamp(30px,4vw,52px);
  grid-template-columns:1fr;align-items:center}
.hero h1{margin-bottom:.3em}
.hero__lead{font-size:var(--t-lead);line-height:1.32;max-width:34ch;margin-bottom:1.3em}
.hero__pie{margin-top:1.5em;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:var(--t-small)}
.hero__pie li{display:flex;gap:.5em;align-items:flex-start}
.hero__foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero__foto{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}

.marca{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2.2vw,28px) var(--marco)}
.marca__n{display:flex;align-items:center;gap:12px;font-size:var(--t-lead);
  font-weight:600;letter-spacing:-.03em;text-decoration:none}
.marca__n img{width:32px;height:32px}
.marca__l{font-size:var(--t-small)}
@media(min-width:900px){.marca__l{color:var(--accent-ink)}}

/* ------------------------------------------------------------ CIFRAS */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);
  margin-top:clamp(36px,5vw,72px)}
.cifras b{display:block;font-size:var(--t-display);font-weight:600;
  letter-spacing:-.05em;line-height:.86;font-variation-settings:'opsz' 96}
.cifras span{display:block;margin-top:.45em;font-size:var(--t-body)}

/* ------------------------------------------------------------ ENUNCIADO */
.enunciado{font-size:clamp(1.3125rem,0.95rem + 1.5vw,2.25rem);line-height:1.2;
  letter-spacing:-.025em;font-weight:500;max-width:46ch;margin-top:1.1em}
.mini{display:inline-block;height:.82em;width:1.1em;vertical-align:-.1em;object-fit:cover;
  margin-inline:.14em;clip-path:polygon(0 0,78% 0,100% 24%,100% 100%,0 100%)}

/* ------------------------------------------------------------ DOS COLUMNAS */
.dos{display:grid;grid-template-columns:1fr;gap:clamp(32px,4.5vw,64px)}
.dos__p{font-size:var(--t-body);margin-top:1.1em}

/* ------------------------------------------------------------ LISTA DE DOLOR */
.dolor{display:grid;gap:2px}
.dolor li{background:var(--surface);padding:clamp(22px,3vw,34px);clip-path:var(--ficha)}
.dolor h3{margin-bottom:.5em;max-width:28ch}
.dolor p{font-size:var(--t-body)}

/* ------------------------------------------------------------ ESPECÍMENES */
.esp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(32px,4vw,56px)}
.esp__t{background:var(--surface-2);padding:clamp(14px,1.8vw,22px);clip-path:var(--ficha)}
.esp li:nth-child(3n+2) .esp__t{background:var(--deep)}
.esp li:nth-child(3n) .esp__t{background:var(--accent)}
.esp__t img{width:100%;aspect-ratio:4/5;object-fit:cover}
.esp h3{margin:clamp(12px,1.6vw,18px) 0 .35em;max-width:22ch}
.esp p{font-size:var(--t-body)}

/* ------------------------------------------------------------ LA FICHA VIVA */
.viva{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;
  margin-top:clamp(30px,4vw,52px)}
.viva__nom{display:flex;flex-direction:column;gap:.1em;align-items:flex-start}
.viva__nom button{background:none;border:0;padding:.16em 0;text-align:left;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:var(--t-head);font-weight:600;
  letter-spacing:-.035em;line-height:1.1;transition:color .2s linear}
.viva__nom button[aria-pressed="true"],.viva__nom button:hover{color:var(--ink)}

.tarjeta{background:var(--accent);color:var(--accent-ink);clip-path:var(--ficha);
  padding:clamp(22px,3vw,40px)}
.tarjeta__esc{font-size:var(--t-head);font-weight:600;letter-spacing:-.04em;line-height:1;
  margin-bottom:.14em;font-variation-settings:'opsz' 72;max-width:none}
.tarjeta__gr{font-size:var(--t-small);margin-bottom:1em;color:inherit;opacity:.74}
.cuatro{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(19,54,33,.22)}
.cuatro>div{background:var(--accent);padding:clamp(11px,1.6vw,16px);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6em}
.cuatro dt{font-size:var(--t-small);opacity:.74;order:2;text-align:right}
.cuatro dd{margin:0;order:1;font-size:var(--t-lead);font-weight:600;letter-spacing:-.03em}
.tres{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(19,54,33,.22);margin-top:1px}
.tres>div{background:var(--accent);padding:clamp(11px,1.5vw,15px);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6em}
.tres dt{font-size:var(--t-small);opacity:.74;order:2;text-align:right}
.tres dd{margin:0;order:1;font-size:var(--t-small);font-weight:600}
.tarjeta__n{margin-top:1em;font-size:var(--t-small);line-height:1.45;color:inherit;max-width:none}
.tarjeta__n b{font-weight:600}

/* ------------------------------------------------------------ MOMENTOS */
.mom{display:grid;gap:clamp(26px,3vw,40px);grid-template-columns:1fr;
  margin-top:clamp(32px,4.5vw,64px)}
.mom img{width:100%;aspect-ratio:1;object-fit:cover;clip-path:var(--ficha)}
.mom h3{margin:clamp(14px,1.8vw,20px) 0 .3em}
.mom p{margin-top:.5em}
.mom b{font-weight:600}

/* ------------------------------------------------------------ 129 FICHAS */
.muchas{margin-top:clamp(32px,4vw,56px)}
.muchas svg{width:100%;height:auto;display:block}
.pasos{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);
  margin-top:clamp(26px,3.2vw,44px)}
.pasos h3{margin-bottom:.35em}

/* ------------------------------------------------------------ PARTES */
.partes{display:grid;gap:2px;margin-top:clamp(32px,4.5vw,64px)}
.partes li{background:var(--surface);display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,32px);padding:clamp(22px,3vw,38px);clip-path:var(--ficha)}
.partes img{width:100%;aspect-ratio:16/9;object-fit:cover;
  clip-path:polygon(0 0,90% 0,100% 18%,100% 100%,0 100%)}
.partes__t{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:.5em;flex-wrap:wrap}
.partes__v{color:var(--accent);font-weight:600;white-space:nowrap;font-size:var(--t-small)}

/* ------------------------------------------------------------ UN MARCO */
.marco{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr;align-items:center}
.marco__f{position:relative;aspect-ratio:4/5;clip-path:var(--ficha);background:var(--surface)}
.marco__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s linear}
.marco__f img.on{opacity:1}
.marco__p{margin-top:.9em;font-size:var(--t-small)}

/* ------------------------------------------------------------ REGALOS */
.reg{display:grid;gap:clamp(14px,2vw,26px);margin-top:clamp(32px,4vw,56px)}
.reg__t{background:var(--surface);padding:clamp(14px,1.8vw,22px);clip-path:var(--ficha)}
.reg li:nth-child(2) .reg__t{background:var(--surface-2)}
.reg__t img{width:100%;aspect-ratio:2/3;object-fit:cover}
.reg h3{margin:clamp(12px,1.6vw,18px) 0 .3em}
.reg b{display:block;color:var(--accent);font-weight:600;font-size:var(--t-small)}

/* ------------------------------------------------------------ CHATS */
.chats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(32px,4vw,56px)}
.chats img{width:100%;aspect-ratio:9/16;object-fit:cover;clip-path:var(--ficha)}

/* ------------------------------------------------------------ OFERTA */
.oferta{display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:1fr;align-items:start;
  margin-top:clamp(32px,4vw,56px)}
.pila{background:var(--surface);clip-path:var(--ficha);padding:clamp(22px,3vw,40px)}
.pila li{display:flex;justify-content:space-between;gap:16px;padding:.6em 0;font-size:var(--t-body)}
.pila .tach{color:var(--muted);text-decoration:line-through}
.pila .grat{color:var(--accent);font-weight:600}
.pila__tot{display:flex;justify-content:space-between;gap:16px;margin-top:.7em;padding-top:.8em;
  font-weight:600;font-size:var(--t-lead);max-width:none}
.precio{background:var(--accent);color:var(--accent-ink);clip-path:var(--ficha);
  padding:clamp(24px,3.2vw,44px)}
.precio p{color:inherit;max-width:none}
.precio__n{font-size:var(--t-display);font-weight:600;letter-spacing:-.05em;line-height:.86;
  font-variation-settings:'opsz' 96}
.precio__ah{margin-top:.6em;font-weight:600;font-size:var(--t-lead)}
.precio .btn{background:var(--accent-ink);color:var(--accent);width:100%;
  justify-content:center;margin-top:1em}
.precio .btn:hover{background:#0A2213}
.precio__g{margin-top:.8em;font-size:var(--t-small);line-height:1.5}
.urg{margin-top:1em;padding-top:1em;font-size:var(--t-small);line-height:1.6}
.reloj{display:flex;gap:8px;align-items:flex-end;margin-top:.4em}
.reloj b{font-size:var(--t-head);font-weight:600;letter-spacing:-.04em;line-height:.9}
.reloj span{font-size:var(--t-small);padding-bottom:.3em}
.viven{display:flex;align-items:center;gap:.6em;font-size:var(--t-small);margin-top:.9em}
.punto{width:9px;height:9px;background:var(--accent-ink);flex:0 0 auto;
  clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%);animation:lat 1.8s ease-out infinite}
@keyframes lat{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------------------ AUTORA */
.autora{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start}
.autora img{width:100%;aspect-ratio:3/4;object-fit:cover;clip-path:var(--ficha)}
.autora p{margin-top:1.05em}
.firma{font-weight:600;margin-top:1.5em}

/* ------------------------------------------------------------ RESEÑAS */
.nota{display:flex;align-items:baseline;gap:.6em;margin-top:.9em;flex-wrap:wrap;max-width:none}
.nota b{font-size:var(--t-head);font-weight:600;letter-spacing:-.05em;line-height:.9}
.estrellas{display:inline-flex;gap:3px}
.estrella{width:15px;height:15px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 15 9l7.4.6-5.6 4.9 1.7 7.2L12 17.9 5.5 21.7l1.7-7.2L1.6 9.6 9 9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 15 9l7.4.6-5.6 4.9 1.7 7.2L12 17.9 5.5 21.7l1.7-7.2L1.6 9.6 9 9z'/%3E%3C/svg%3E") center/contain no-repeat}
.estrella--v{background:var(--muted);opacity:.4}
.res{display:grid;gap:2px;margin-top:clamp(32px,4vw,56px)}
.res li{background:var(--surface);padding:clamp(22px,3vw,34px);clip-path:var(--ficha)}
.res blockquote{margin:0;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.02em;max-width:34ch}
.res__a{display:flex;flex-direction:column;margin-top:1.3em}
.res__d{font-size:var(--t-small);color:var(--muted)}
.res__n{font-weight:600;font-size:var(--t-body)}
.res .estrellas{margin-top:.8em}

/* ------------------------------------------------------------ GARANTÍA */
.gar{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr;align-items:center}
.sello{background:var(--accent);color:var(--accent-ink);clip-path:var(--ficha);
  padding:clamp(24px,3.2vw,44px)}
.sello p{color:inherit;max-width:none}
.sello b{display:block;font-size:var(--t-display);font-weight:600;letter-spacing:-.05em;
  line-height:.86;font-variation-settings:'opsz' 96}
.sello .d{font-size:var(--t-lead);font-weight:600;margin-top:.15em}

/* ------------------------------------------------------------ FAQ */
.faq{display:grid;gap:2px;margin-top:clamp(26px,3.2vw,48px)}
.faq details{background:var(--surface);clip-path:var(--ficha)}
.faq details[open]{background:var(--accent);color:var(--accent-ink)}
.faq summary{list-style:none;cursor:pointer;padding:clamp(18px,2.2vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:var(--t-lead);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq__m{position:relative;width:18px;height:18px;flex:0 0 auto}
.faq__m::before,.faq__m::after{content:'';position:absolute;background:currentColor;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.faq__m::before{inset:7.5px 0 auto 0;height:3px}
.faq__m::after{inset:0 7.5px auto 7.5px;height:18px;width:3px}
.faq details[open] .faq__m::after{transform:scaleY(0)}
.faq__r{padding:0 clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);max-width:56ch;
  font-size:var(--t-body);line-height:1.55}

/* ------------------------------------------------------------ CIERRE */
.cierre{position:relative;overflow:hidden;display:flex;align-items:center;
  padding-block:clamp(72px,8vw,120px)}
.cierre__forma{position:absolute;z-index:0;background:var(--accent);
  width:120vh;height:120vh;left:-38vh;top:50%;transform:translateY(-50%);
  clip-path:polygon(0 0,calc(100% - 20vh) 0,100% 20vh,100% 100%,0 100%)}
.cierre .env{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
  gap:clamp(20px,2.6vw,36px)}
.cierre__h{max-width:16ch}
.cierre__ob img{width:100%;aspect-ratio:4/3;object-fit:cover;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.cierre__tx h2{margin-bottom:.45em}
.cierre__tx p{margin-bottom:1.3em}

/* ------------------------------------------------------------ PIE */
.pie{background:var(--deep);padding-block:clamp(52px,6vw,88px) clamp(26px,3vw,40px)}
.bloques{display:flex;gap:4px;align-items:flex-end;height:clamp(78px,15vw,180px)}
.bloques span{flex:1;display:grid;place-items:center;background:var(--surface);color:var(--ink);
  font-size:clamp(1.4rem,5vw,4.25rem);font-weight:600;letter-spacing:-.05em;line-height:1;
  clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%)}
.bloques span:nth-child(2n){background:var(--surface-2);height:78%}
.bloques span:nth-child(3n){background:var(--accent);color:var(--accent-ink);height:92%}
.bloques span:nth-child(1){height:100%}
.pie__d{margin-top:clamp(32px,4vw,56px);display:grid;gap:18px;grid-template-columns:1fr;
  font-size:var(--t-small);color:var(--muted);line-height:1.6}
.pie__d a{color:var(--ink)}

/* ------------------------------------------------------------ MOVIMIENTO
   Nada se esconde sin JavaScript: la clase .anima la pone el script, y un
   plazo de seguridad muestra todo si el observador no llega a disparar. */
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.anima .ent{opacity:0}
.anima h1.ent,.anima h2.ent{opacity:1}
.anima .ent.vis{animation:entra .65s cubic-bezier(.16,1,.3,1) both}
.anima .ent.vis:nth-child(2){animation-delay:.06s}
.anima .ent.vis:nth-child(3){animation-delay:.12s}
.anima .ent.vis:nth-child(4){animation-delay:.18s}
.anima .ent.vis:nth-child(5){animation-delay:.24s}
.anima .ent.vis:nth-child(6){animation-delay:.3s}

@keyframes obtura{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes asienta{from{transform:scale(1.12)}to{transform:scale(1)}}
.anima .hero__foto{animation:obtura 1.1s cubic-bezier(.16,1,.3,1) both}
.anima .hero__foto img{animation:asienta 1.6s cubic-bezier(.16,1,.3,1) both}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anima .ent{opacity:1;animation:none}
  .anima .hero__foto,.anima .hero__foto img{animation:none}
  .punto{animation:none}
  .btn,.viva__nom button,.faq__m::before,.faq__m::after,.marco__f img{transition:none}
}

/* ------------------------------------------------------------ ANCHOS */
@media(min-width:620px){
  .cifras{grid-template-columns:repeat(4,1fr)}
  .tres{grid-template-columns:repeat(3,1fr)}
  .tres>div{display:block}
  .tres dt{text-align:left}
  .tres dd{margin-top:.2em}
  .chats{grid-template-columns:repeat(4,1fr)}
}
.esp--ancha .esp__t img{aspect-ratio:8/5}
@media(min-width:900px){
  .esp--ancha{grid-column:span 2}
  .dos{grid-template-columns:5fr 7fr}
  .esp{grid-template-columns:repeat(3,1fr)}
  .mom{grid-template-columns:repeat(3,1fr)}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .partes li{grid-template-columns:5fr 7fr;align-items:center}
  .reg{grid-template-columns:repeat(3,1fr)}
  .res{grid-template-columns:repeat(2,1fr)}
  .marco{grid-template-columns:5fr 7fr}
  .viva{grid-template-columns:4fr 8fr;align-items:center}
  .oferta{grid-template-columns:7fr 5fr}
  .autora{grid-template-columns:4fr 8fr}
  .gar{grid-template-columns:4fr 8fr}
  .pie__d{grid-template-columns:2fr 1fr}
  .hero__forma{width:125vh;height:125vh;left:auto;right:-30vh;top:50%;
    transform:translateY(-50%);
    clip-path:polygon(18vh 0,100% 0,100% 100%,0 100%,0 18vh)}
  .hero .env{grid-template-columns:6fr 6fr}
  .cierre .env{grid-template-columns:7fr 5fr;align-items:center}
  .cierre__h{grid-column:1 / -1;max-width:22ch}
  .chats{grid-template-columns:repeat(7,1fr)}
  .dosfaq{display:grid;grid-template-columns:4fr 8fr;gap:clamp(36px,5vw,72px);align-items:start}
  .dosfaq h2{position:sticky;top:96px}
  .dosfaq .faq{margin-top:0}
}

/* El teléfono: la marca sola arriba, y aire antes del titular. */
@media(max-width:619px){
  .marca__l{display:none}
  .marca__n{font-size:var(--t-body)}
  .hero{padding-top:92px}
}