/* Portada de Métricamente (28 oct 2026). Se carga solo en la página de inicio, en lugar del CSS del tema.
   Una sola hoja: base, héroe con secuencia de imágenes, bandas, sellos, comparativa, pie.
   Todo movimiento es transform, opacity o clip-path y se apaga con prefers-reduced-motion. */

/* ------------------------------------------------------------ fuentes (autoalojadas por el tema) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/archivo-400-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/archivo-400-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/metricamente/assets/fuentes/ibm-plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------ base */
:root{
  --tinta:#0D1423; --suelo:#070C18; --fondo-osc:#060D1D; --blanco:#FFFFFF;
  --azul:#0F47CC; --azul-fondo:#1450DC; --acento:#8FB4FF; --acento-plano:#BFD4FF; --azul-banda:#DCE7FF;
  --gris:#8B93A5; --gris-2:#9AA3B7; --ink-3:#5A6274; --verde-osc:#4ED2A0; --verde-cla:#0F7A52;
  --sup:#0E1526; --sup-2:#131B2E; --claro-1:#EEF3FC; --claro-2:#F7FAFF; --dorado:#F5B400;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --dato:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:2px; --rapido:130ms; --lento:560ms; --curva:cubic-bezier(.16,.84,.44,1);
  --env:min(1180px,calc(100% - 2*clamp(20px,5vw,96px)));
  --cab:56px;
}
@media (min-width:48em){:root{--cab:64px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cab) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.mseo-portada{margin:0;background:var(--suelo);color:var(--blanco);font-family:var(--display);font-size:1.1875rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.mseo-portada) figure{margin:0}
:where(.mseo-portada) :is(img,video,canvas,svg){display:block;max-width:100%}
:where(.mseo-portada) img{height:auto}
:where(.mseo-portada) a{color:inherit}
:where(.mseo-portada) p{margin:0}
:where(.mseo-portada) :is(h1,h2,h3){font-family:var(--display);font-weight:700;letter-spacing:-.03em;margin:0}
:where(.mseo-portada) h1{font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.042em}
:where(.mseo-portada) h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;max-width:20ch;text-wrap:balance}
:where(.mseo-portada) h3{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.15}
:where(.mseo-portada) :is(ul,ol){margin:0;padding:0;list-style:none}
.env{width:var(--env);margin-inline:auto}
.dato{font-family:var(--dato);font-variant-numeric:tabular-nums}
.sr,.mt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.saltar{position:absolute;left:12px;top:-80px;z-index:99;background:#fff;color:var(--tinta);padding:.7rem 1rem;border-radius:var(--r);font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
.mseo-portada a:focus-visible,.mseo-portada button:focus-visible,.mseo-portada summary:focus-visible,.mseo-portada input:focus-visible,.mseo-portada iframe:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.clara a:focus-visible,.clara-1 a:focus-visible,.clara button:focus-visible,.clara-1 input:focus-visible,.clara summary:focus-visible{outline-color:var(--azul)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;background:var(--azul-fondo);color:#fff;text-decoration:none;font-weight:600;font-size:1.0625rem;line-height:1.2;padding:.9rem 1.5rem;border-radius:var(--r);border:0;cursor:pointer;transition:transform var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(20,80,220,.35)}
.btn-chico{min-height:44px;padding:.55rem 1rem;font-size:.95rem}
.banda{padding-block:clamp(4rem,9vw,7.5rem);position:relative;border-top:1px solid rgba(255,255,255,.06)}
.clara{background:var(--blanco);color:var(--tinta);border-top-color:rgba(13,20,35,.08)}
.clara-1{background:var(--claro-1);color:var(--tinta);border-top-color:rgba(13,20,35,.08)}
.osc{background:var(--fondo-osc)}
.osc-2{background:#0A1226}
.etq{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;color:var(--gris-2);margin-bottom:1.1rem}
.etq::before{content:"";width:22px;height:1px;background:currentColor}
.clara .etq,.clara-1 .etq{color:var(--ink-3)}
h2.etq{letter-spacing:normal;line-height:1.55;max-width:none;text-wrap:wrap}
.sub{color:var(--ink-3);max-width:38rem;margin-top:1rem}
.pie-fuente{font-size:.85rem;color:var(--gris);margin-top:.9rem;max-width:44rem;line-height:1.5}

/* logos y estrellas (a color: sus colores oficiales) */
.lg{width:24px;height:24px;flex:none}
.est{width:88px;height:16px;color:var(--dorado);flex:none}

/* ------------------------------------------------------------ cabecera */
.cab{position:sticky;top:0;z-index:60;height:var(--cab);background:var(--suelo);border-bottom:1px solid rgba(255,255,255,.08)}
.cab-fila{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cab-logo{display:flex;align-items:center;min-height:44px}
.cab-logo img{height:15px;width:auto}
@media (min-width:48em){.cab-logo img{height:22px}}
.cab-nav{display:none;gap:2rem;font-weight:500;font-size:1rem}
.cab-nav a{text-decoration:none;color:#fff;display:inline-flex;align-items:center;min-height:44px;transition:color var(--rapido)}
.cab-nav a:hover{color:var(--acento)}
@media (min-width:64em){.cab-nav{display:flex}}
.cab-der{display:flex;align-items:center;gap:.5rem}
.idioma{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:.4rem .6rem;font-size:.8rem;font-weight:600;text-decoration:none;color:#fff}
.idioma svg{width:21px;height:14px}
.cab .btn-chico{background:transparent;border:1px solid rgba(255,255,255,.4)}
.cab .btn-chico:hover{background:rgba(255,255,255,.1);box-shadow:none;transform:none}
.cab-menu{position:relative}
@media (min-width:64em){.cab-menu{display:none}}
.cab-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);cursor:pointer}
.cab-menu summary::-webkit-details-marker{display:none}
.cab-menu summary svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.cab-menu[open] summary{background:rgba(255,255,255,.1)}
.cab-menu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:15rem;display:grid;background:var(--sup);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:.4rem;box-shadow:0 18px 30px -16px rgba(0,0,0,.8)}
.cab-menu nav a{display:flex;align-items:center;min-height:48px;padding:0 .9rem;text-decoration:none;font-weight:500}
.cab-menu nav a:hover{background:rgba(255,255,255,.07)}
@media (max-width:23.5em){.cab .btn-chico{padding-inline:.7rem}.idioma span{display:none}}

/* ------------------------------------------------------------ héroe: mínimo; la caja se abre con el scroll */
/* héroe: video a pantalla completa (28 oct 2026, noche: Joseph prefiere el video del pedido empacándose a la caja).
   El velo oscuro es el de contraste que permite la ficha: solo donde va el texto. */
.hv{position:relative;isolation:isolate;overflow:hidden;background:var(--suelo);min-height:calc(100vh - var(--cab));min-height:calc(100svh - var(--cab));display:grid;align-items:end}
.hv-media{position:absolute;inset:0;z-index:-2}
.hv-media img,.hv-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.hv-video{opacity:0;transition:opacity .7s var(--curva)}
.hv-video.ok{opacity:1}
.hv-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(7,12,24,.94) 0%,rgba(7,12,24,.78) 34%,rgba(7,12,24,.25) 64%,rgba(7,12,24,0) 82%)}
.hv .h-txt{width:var(--env);margin:0 auto;padding:0 0 clamp(4.2rem,9vh,5.5rem)}
.h-ant{font-size:.8125rem;line-height:1.4;color:#FFFFFF;opacity:.9;max-width:26rem;margin-bottom:.7rem}
.hv h1{font-size:clamp(2.3rem,10vw,3.4rem);line-height:.98;letter-spacing:-.036em;text-wrap:balance;max-width:14ch;color:#fff}
.h-lema{margin-top:.95rem;font-size:1.125rem;font-weight:500;line-height:1.3;color:#fff}
.hv .btn{margin-top:1.35rem;min-height:56px;padding-inline:1.7rem;width:100%}
.hv-pausa{position:absolute;right:max(16px,calc((100% - 1180px) / 2));bottom:1rem;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);background:rgba(7,12,24,.55);color:#fff;font:500 .875rem/1 var(--display);cursor:pointer}
.hv-pausa[hidden]{display:none}
.hv-pausa svg{width:12px;height:12px}
@media (prefers-reduced-motion:no-preference){
  .hv .h-txt > *{animation:h-in .9s var(--curva) backwards}
  .hv .h-txt > :nth-child(2){animation-delay:.08s}.hv .h-txt > :nth-child(3){animation-delay:.16s}.hv .h-txt > :nth-child(4){animation-delay:.24s}
  @keyframes h-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (min-width:48em){
  .h-ant{font-size:.875rem}
  .h-lema{font-size:1.3rem}
  .hv .btn{width:auto}
}
@media (min-width:64em){
  .hv{align-items:center}
  .hv-media img,.hv-video{object-position:30% 50%}
  .hv-media{transform:translateX(9%) scale(1.12);transform-origin:50% 50%}
  .hv-velo{background:linear-gradient(to right,rgba(7,12,24,.92) 0%,rgba(7,12,24,.78) 30%,rgba(7,12,24,.25) 58%,rgba(7,12,24,0) 78%)}
  .hv .h-txt{padding:0}
  .hv .h-txt > *{max-width:36rem}
  .h-ant{margin-bottom:1.4rem}
  .hv h1{font-size:clamp(2.8rem,min(4.6vw,8vh),4.8rem);max-width:13ch}
  .h-lema{margin-top:1.5rem}
  .hv .btn{margin-top:2rem}
}

/* /en/ (28 oct 2026): el titular lleva la garantía en dos tiempos; la segunda mitad (lo que quita el riesgo) en el acento sobre video.
   El video de la sala tiene la acción a la derecha: no se corre como el del empaque. */
.hv h1 .h1-b{display:block;margin-top:.12em;color:#BFD4FF}
.hv-en h1{font-size:clamp(2rem,8.4vw,3rem);max-width:17ch;letter-spacing:-.024em;word-spacing:.04em}
.hv-en .h-lema{font-size:1rem;font-weight:400;line-height:1.45;max-width:30rem;opacity:.92;text-wrap:pretty}
.cab .btn-chico{white-space:nowrap}
.mseo-en .retrato{aspect-ratio:4/5;max-width:400px}
.mseo-en .retrato img,.mseo-en .retrato.in img{transform:none}  /* Joseph pidió la foto completa, sin acercamiento */
.jo-bio{color:var(--gris-2);line-height:1.55;max-width:34rem;margin-bottom:.4rem}
@media (min-width:48em){.hv-en .h-lema{font-size:1.0625rem}}
@media (min-width:64em){
  .hv-en .hv-media{transform:none}
  .hv-en .hv-media img,.hv-en .hv-video{object-position:50% 50%}
  .hv-en h1{font-size:clamp(2.8rem,min(4.6vw,8.4vh),4.9rem);max-width:16ch}
  .hv-en .h-txt > *{max-width:40rem}
  .hv-en .h-txt > .h-lema{max-width:31rem}
}

/* chip de reseñas de Google (oscuro por defecto; claro sobre fondos claros) */
.h-chip{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.3rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);font-size:.9375rem;line-height:1.2;color:#fff;text-decoration:none;background:rgba(255,255,255,.04);transition:background-color var(--rapido)}
.h-chip:hover{background:rgba(255,255,255,.1)}
.h-chip b{font-family:var(--dato);font-weight:600}
.h-chip .lg{width:20px;height:20px}
.h-chip .est{width:72px;height:13px}
.clara .h-chip{color:var(--tinta);border-color:rgba(13,20,35,.18);background:#fff;box-shadow:0 6px 0 -3px rgba(13,20,35,.1)}
.clara .h-chip:hover{background:var(--claro-1)}

/* ------------------------------------------------------------ confianza */
.conf{padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.conf-res{display:flex;justify-content:center;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.conf-rot{font-weight:600;font-size:1.0625rem;color:var(--ink-3);text-align:center;margin-bottom:1.25rem}
.conf-ej{margin-top:clamp(1.5rem,3vw,2.25rem);text-align:center;font-size:.875rem;color:var(--ink-3)}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-pista{display:flex;width:max-content;animation:marq 50s linear infinite}
.marq:hover .marq-pista,.marq:focus-within .marq-pista,.marq.pausa .marq-pista{animation-play-state:paused}
.marq-grupo{display:flex;flex:none;align-items:center;gap:clamp(2.5rem,5vw,4.5rem);padding-right:clamp(2.5rem,5vw,4.5rem)}
.marq-grupo li{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--tinta);white-space:nowrap}
.marq-grupo .lg{width:32px;height:32px}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-ctl{display:flex;justify-content:center;margin-top:.4rem}
.marq-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;background:transparent;border:0;border-radius:var(--r);color:var(--ink-3);font:600 .875rem/1 var(--display);cursor:pointer}
.marq-btn:hover{color:var(--tinta);background:var(--claro-1)}
.marq-btn svg{width:13px;height:13px}
.marq-btn .i-play{display:none}
.marq-btn[aria-pressed="true"] .i-play{display:block}
.marq-btn[aria-pressed="true"] .i-pausa{display:none}
.sellos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem;margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:clamp(1.75rem,3.5vw,2.75rem);border-top:1px solid rgba(13,20,35,.1)}
.sello-q{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
.sello-q svg.sello{width:92px;height:92px;margin-bottom:.55rem;overflow:visible}
.sello-q b{font-size:1.0625rem;line-height:1.2;letter-spacing:-.015em}
.sello-q > span{font-size:.9rem;line-height:1.35;color:var(--ink-3)}
@media (min-width:60em){.sellos{grid-template-columns:repeat(4,minmax(0,1fr))}.sello-q svg.sello{width:104px;height:104px}}
.js .sello-q.sube svg.sello{transform:scale(.7) rotate(-14deg);transition:transform 700ms var(--curva) calc(var(--k,0) * 90ms)}
.js .sello-q.sube.in svg.sello{transform:none}

/* datos reales */
.cif h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:none}
.cif-rej{display:grid;gap:0;margin-top:2rem}
.cif-rej li{padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.12)}
.cif-rej b{display:block;font-weight:600;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;letter-spacing:-.045em;color:#fff}
.cif-rej p{color:var(--gris-2);font-size:.95rem;line-height:1.5;margin-top:.7rem;max-width:26rem}
@media (min-width:56em){.cif-rej{grid-template-columns:repeat(3,1fr);gap:0 2.75rem}.cif-rej li{border-top:2px solid var(--azul-fondo);padding-top:1.3rem}}

/* caminos */
.caminos{display:grid;gap:1.25rem;margin-top:2.5rem}
@media (min-width:48em){.caminos{grid-template-columns:1fr 1fr}}
.camino{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);text-decoration:none;color:#fff;background:var(--sup)}
.camino img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--curva)}
.camino:hover img{transform:scale(1.05)}
.camino .sombra{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(180deg,rgba(6,13,29,0),rgba(6,13,29,.92))}
.camino .txt{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem}
.camino .txt p{color:#fff;font-size:1rem;margin-top:.35rem}
.camino .ir{margin-top:.8rem;font-weight:600;font-size:1rem;display:inline-block;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}

/* ------------------------------------------------------------ el sistema */
.sistema{background:#0A1226}
.sis-rej{display:grid;gap:2rem;margin-top:3rem}
@media (min-width:60em){.sis-rej{grid-template-columns:.8fr 1.2fr;gap:4rem}}
.pasos{position:relative;padding:0 0 0 2.4rem}
.pasos::before{content:"";position:absolute;left:8px;top:.4rem;bottom:.4rem;width:2px;background:rgba(255,255,255,.1)}
.pasos::after{content:"";position:absolute;left:8px;top:.4rem;bottom:.4rem;width:2px;background:var(--acento);transform-origin:top;transform:scaleY(var(--p,0))}
.paso{position:relative;padding-bottom:3.5rem}
.paso .nodo{position:absolute;left:calc(-2.4rem + 2px);top:.35rem;width:14px;height:14px;border-radius:2px;background:#0A1226;border:2px solid var(--gris);transition:background var(--rapido),border-color var(--rapido)}
.paso.on .nodo{background:var(--acento);border-color:var(--acento)}
.paso h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.paso p{color:var(--gris-2);margin-top:.6rem;max-width:30rem}
.logos-paso{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.logo-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:.25rem .7rem .25rem .5rem;border-radius:var(--r);background:#fff;color:var(--tinta);font-size:.9rem;font-weight:700}
.logo-pill .lg{width:20px;height:20px}
.paso-img{margin-top:1.5rem}
.escenario{display:none}
@media (min-width:60em){
  .paso{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:0}
  .paso:not(.on) h3{color:var(--gris-2)}
  .paso-img{display:none}
  .escenario{display:block;position:sticky;top:calc(var(--cab) + 4vh);height:74vh}
  .cuadro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:scale(.97);transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva)}
  .cuadro.on{opacity:1;transform:none}
}
@media (max-width:59.99em){.pasos{padding-left:2rem}.paso .nodo{left:calc(-2rem + 2px)}}
.marco img{width:100%;height:auto}
.marco{position:relative;background:#fff;color:var(--tinta);border-radius:var(--r);overflow:hidden;box-shadow:0 22px 34px -20px rgba(0,0,0,.8),0 3px 0 rgba(0,0,0,.28)}
.compuesto{position:relative;padding-bottom:9%}
.compuesto .cel{position:absolute;right:-1%;bottom:0;width:27%;border:6px solid #0D1423;border-radius:2px;overflow:hidden;box-shadow:0 18px 26px -16px rgba(0,0,0,.85)}
.cel img{width:100%;height:auto}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
.trio .obj{max-width:none}
.busqueda{grid-column:1/-1;background:#fff;color:var(--tinta);border-radius:var(--r);padding:.85rem 1rem;font-size:.9rem;box-shadow:0 8px 0 -4px rgba(0,0,0,.25)}
.busqueda small{color:var(--ink-3);display:block;font-size:.75rem}
.busqueda b{color:#1A0DAB;font-weight:500;font-size:1.05rem;display:block;margin:.15rem 0}
.pie-cap{font-size:.85rem;color:var(--gris-2);margin-top:1.1rem;max-width:36rem;line-height:1.45}
.nav-falsa{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--claro-1);border-bottom:1px solid rgba(13,20,35,.1)}
.nav-falsa i{width:7px;height:7px;border-radius:1px;background:var(--gris);opacity:.45}
.nav-falsa span{margin-left:8px;font-family:var(--dato);font-size:.75rem;color:#5A6274;background:#fff;border:1px solid rgba(13,20,35,.1);padding:1px 8px;border-radius:1px}
.graf-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.7rem .85rem .2rem}
.graf-cab small{display:block;font-size:.8rem;color:var(--ink-3)}
.graf-cab b{font-family:var(--dato);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.1}
.graf-cab .sube-v{font-family:var(--dato);font-weight:600;color:var(--verde-cla);font-size:clamp(1.2rem,2vw,1.6rem);white-space:nowrap}

/* objetos de la vida real dibujados (anuncio, correo, informe) */
.obj{background:#fff;color:var(--tinta);border-radius:var(--r);border:1px solid rgba(13,20,35,.1);box-shadow:0 8px 0 -4px rgba(13,20,35,.12);overflow:hidden;font-size:.85rem}
.obj-cab{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid rgba(13,20,35,.08)}
.obj-cab .pt{width:22px;height:22px;border-radius:1px;background:var(--claro-1);display:grid;place-items:center;font-weight:700;font-size:.78rem;color:var(--azul)}
.obj-cab small{display:block;color:var(--ink-3);font-size:.78rem}
.obj img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--azul-fondo)}
.obj-pie{display:flex;justify-content:space-between;align-items:center;padding:.55rem .7rem;font-weight:600}
.obj-pie span.b{background:var(--azul-fondo);color:#fff;padding:.45rem .7rem;border-radius:1px;font-size:.78rem}
.obj-asunto{padding:.6rem .7rem .2rem}
.obj-asunto small{color:var(--ink-3);display:block;font-size:.78rem}
.obj-asunto strong{font-size:.95rem}
.obj-carta{display:grid;grid-template-columns:64px 1fr;gap:.6rem;align-items:center;padding:.5rem .7rem .8rem}
.obj-carta img{aspect-ratio:1;border-radius:1px}
.obj-carta span.b{display:inline-block;background:var(--azul-fondo);color:#fff;padding:.45rem .7rem;border-radius:1px;font-size:.78rem;font-weight:600}

/* ------------------------------------------------------------ los cuatro momentos (#metodo) */
#metodo{--mt-tinta:var(--tinta);--mt-azul:var(--azul);--mt-gris:var(--gris);--mt-ink:var(--ink-3);--mt-c2:var(--claro-2);--mt-mono:var(--dato);--mt-curva:var(--curva);--mt-alto:15rem;--mt-cg:clamp(1rem,2.4vw,2rem);background:#fff;color:var(--mt-tinta);scroll-margin-top:1rem;overflow-x:clip}
#metodo h2{max-width:24ch;color:var(--mt-tinta)}
#metodo .mt-baj{color:var(--mt-ink);font-size:clamp(1.1rem,1.45vw,1.28rem);line-height:1.5;max-width:40rem;margin-top:1.1rem;text-wrap:pretty}
#metodo .mt-baj b{color:var(--mt-tinta);font-weight:600}
#metodo .mt-unid{margin-top:.7rem;font-size:1rem;color:var(--mt-ink)}
#metodo .mt-panel{margin-top:clamp(1.5rem,3.5vw,2.5rem);background:var(--mt-c2);border:1px solid rgba(13,20,35,.1);border-radius:2px;padding:0 clamp(1rem,3.2vw,2.25rem) clamp(1.25rem,3.2vw,2.25rem);box-shadow:0 8px 0 -4px rgba(13,20,35,.12)}
#metodo .mt-ejem{margin:0;padding:.7rem 0 .6rem;background:var(--mt-c2);border-bottom:1px solid rgba(13,20,35,.12);font-size:1rem;line-height:1.3;color:var(--mt-tinta)}
#metodo .mt-ejem b{font-weight:600}
#metodo .mt-ley{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:.8rem 0 0;font-size:1rem;line-height:1.3}
#metodo .mt-ley li{display:flex;gap:.6rem;align-items:center}
#metodo .mt-ley b{font-weight:600}
#metodo .mt-sw{flex:none;width:1rem;height:1rem;border-radius:1px;background:var(--c)}
#metodo .mt-gasto{--c:var(--mt-gris)}
#metodo .mt-venta{--c:var(--mt-azul)}
#metodo .mt-mom{margin:1.75rem 0 0;display:grid;gap:3rem;position:relative}
#metodo .mt-mom::before{content:"";position:absolute;left:.95rem;top:.9rem;bottom:.9rem;width:1px;background:rgba(13,20,35,.3)}
#metodo .mt-m{position:relative;display:flex;flex-direction:column;padding-left:2.9rem}
#metodo .mt-num{position:absolute;left:0;top:0;z-index:1;width:1.9rem;height:1.9rem;display:grid;place-items:center;background:var(--mt-tinta);color:#fff;font:600 .9rem/1 var(--mt-mono);border-radius:2px}
#metodo .mt-m h3{font-size:clamp(1.2rem,1.7vw,1.35rem);line-height:1.15;margin-top:.2rem;color:var(--mt-tinta)}
#metodo .mt-m p{color:var(--mt-ink);font-size:1rem;line-height:1.4;margin-top:.4rem;max-width:26rem}
#metodo .mt-lg{display:flex;align-items:center;gap:.9rem;margin-top:.7rem}
#metodo .mt-lg .lg{width:24px;height:24px}
#metodo .mt-pista{display:grid;gap:.85rem;margin-top:1rem}
#metodo .mt-b{display:grid;gap:.3rem}
#metodo .mt-v{display:block;font-family:var(--mt-mono);font-size:1rem;line-height:1.2;color:var(--mt-ink);white-space:nowrap}
#metodo .mt-v b{font-weight:600;font-size:1.125rem;color:var(--mt-tinta)}
#metodo .mt-b.clave .mt-v b{font-size:1.3125rem}
#metodo .mt-u{font-family:var(--display);font-size:.9375rem}
#metodo .mt-tr{position:relative;display:block;height:1.6rem}
#metodo .mt-fill{position:absolute;left:0;top:0;bottom:0;width:max(4px,calc(var(--h) * 1%));background:var(--c);border-radius:1px;transform-origin:left}
#metodo .mt-gasto .mt-fill{border:1px solid var(--mt-ink)}
#metodo .mt-b.clave .mt-fill{border:2px solid var(--mt-tinta)}
@media (min-width:60em){
  #metodo .mt-ejem{border-bottom:0;padding:1.25rem 0 0}
  #metodo .mt-unid{display:none}
  #metodo .mt-ley{gap:2rem;margin-top:.6rem}
  #metodo .mt-mom{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--mt-cg);margin-top:2.5rem}
  #metodo .mt-mom::before{display:none}
  #metodo .mt-m{padding-left:0}
  #metodo .mt-pista{order:-2;display:flex;align-items:flex-end;gap:8px;height:var(--mt-alto);margin:0;border-bottom:1px solid rgba(13,20,35,.3)}
  #metodo .mt-b{position:relative;flex:1 1 0;max-width:5.5rem;height:100%;display:block}
  #metodo .mt-tr{position:absolute;inset:0;height:auto}
  #metodo .mt-fill{left:0;right:0;top:auto;bottom:0;width:auto;height:max(4px,calc(var(--h) * 1%));transform-origin:bottom}
  #metodo .mt-v{position:absolute;left:50%;bottom:calc(max(4px,var(--h) * 1%) + 6px);transform:translateX(-50%)}
  #metodo .mt-u{display:none}
  #metodo .mt-v b{font-size:1.0625rem}
  #metodo .mt-num{order:-1;position:relative;margin-top:1rem}
  #metodo .mt-m h3{margin-top:.9rem}
  #metodo .mt-m::before{content:"";position:absolute;left:0;right:calc(var(--mt-cg) * -1);top:calc(var(--mt-alto) + 1rem + .95rem);height:2px;margin-top:-1px;background:var(--mt-tinta);transform-origin:left}
  #metodo .mt-m:last-child::before{right:0}
  /* impeccable-disable-next-line side-tab -- punta de flecha CSS hecha con bordes */
  #metodo .mt-m:last-child::after{content:"";position:absolute;right:0;top:calc(var(--mt-alto) + 1rem + .95rem);margin-top:-6px;border-left:8px solid var(--mt-tinta);border-top:6px solid transparent;border-bottom:6px solid transparent}
}
#metodo .mt-fin{margin-top:clamp(2.25rem,5vw,3.5rem);display:grid;gap:1.5rem;align-items:center}
@media (min-width:48em){#metodo .mt-fin{grid-template-columns:1fr auto;gap:3rem}}
#metodo .mt-fin-t{font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--mt-ink);max-width:40ch}
#metodo .mt-fin-t b{font-weight:700;color:var(--mt-tinta)}
#metodo .mt-fin .btn{display:none}
@media (min-width:48em){#metodo .mt-fin .btn{display:inline-flex}}
@media (prefers-reduced-motion:no-preference){
  #metodo .mt-b{--d:260ms}
  #metodo .mt-b.clave{--d:0ms}
  #metodo .mt-fill{transition:transform 600ms var(--mt-curva) var(--d)}
  #metodo .mt-m{transition:opacity 480ms var(--mt-curva),transform 480ms var(--mt-curva)}
  #metodo.js .mt-m:not(.in){opacity:0;transform:translateY(14px)}
  #metodo.js .mt-m:not(.in) .mt-fill{transform:scaleX(0)}
  @media (min-width:60em){
    #metodo .mt-m{transition-delay:calc(var(--k) * 80ms)}
    #metodo.js .mt-m:not(.in) .mt-fill{transform:scaleY(0)}
    #metodo .mt-m::before{transition:transform 560ms var(--mt-curva) calc(var(--k) * 80ms)}
    #metodo .mt-m:last-child::after{transition:opacity 300ms ease 600ms}
    #metodo.js .mt-m:not(.in)::before{transform:scaleX(0)}
    #metodo.js .mt-m:last-child:not(.in)::after{opacity:0}
  }
}

/* ------------------------------------------------------------ el caso */
.caso-rej{display:grid;gap:3rem;align-items:center;margin-top:2.5rem}
@media (min-width:64em){.caso-rej{grid-template-columns:1fr 1.15fr}}
.umbral{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);font-family:var(--dato);font-weight:600;letter-spacing:-.04em}
.umbral .antes,.umbral .despues{font-size:clamp(2rem,5.5vw,4.2rem)}
.umbral .antes{color:var(--gris)}
.umbral .linea{flex:1;height:2px;background:rgba(255,255,255,.18);position:relative;overflow:hidden;max-width:180px}
.umbral .linea::after{content:"";position:absolute;inset:0;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--curva)}
.umbral.in .linea::after{transform:scaleX(1)}
.umbral .despues{color:var(--verde-osc)}
.caso-nota{color:var(--gris-2);font-size:1rem;margin-top:1rem;max-width:30rem}
.ventana{position:relative;margin-top:2.75rem}
.ventana .marco{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--curva)}
.ventana.in .marco{clip-path:inset(0 0 0 0)}
.anotas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.1rem}
.anota{display:flex;flex-direction:column;gap:.15rem;background:var(--tinta);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:.6rem .8rem;font-size:.9rem;max-width:16rem;opacity:0;transform:translateY(8px);transition:opacity var(--lento) var(--curva) .9s,transform var(--lento) var(--curva) .9s;box-shadow:0 10px 0 -4px rgba(0,0,0,.35)}
.ventana.in .anota{opacity:1;transform:none}
.anota b{font-family:var(--dato);font-weight:600;font-size:1.25rem}
.anota b.v{color:var(--verde-osc)}
@media (max-width:47.99em){.anota{opacity:1;transform:none;flex:1 1 100%;max-width:none}.ventana .marco{clip-path:none}}
@media (max-width:30em){.umbral{gap:.6rem}.umbral .antes,.umbral .despues{font-size:1.6rem}.umbral .linea{min-width:1rem}}
.tiendas{display:grid;gap:1.1rem}
.tienda{display:grid;grid-template-columns:7.5rem 1fr auto;gap:1rem;align-items:center}
.tienda span{color:var(--gris-2);font-size:.95rem}
.tienda .barra{height:14px;background:var(--sup-2);border-radius:1px;overflow:hidden}
.tienda .barra i{display:block;height:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--curva)}
#tiendas.in .barra i{transform:scaleX(1)}
.tienda b{font-family:var(--dato);font-weight:500;font-size:1rem;min-width:6.5rem;text-align:right}
@media (max-width:30em){.tienda{grid-template-columns:5.5rem 1fr auto}.tienda b{min-width:5.5rem;font-size:.9rem}}

/* ------------------------------------------------------------ comparativa */
.cmp-tabla{width:100%;border-collapse:separate;border-spacing:0;margin-top:2.5rem;font-size:1.0625rem;color:var(--tinta)}
.cmp-tabla th,.cmp-tabla td{padding:1.1rem 1.2rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(13,20,35,.12);line-height:1.4}
.cmp-tabla thead th{font-weight:700;font-size:1rem;letter-spacing:-.01em;vertical-align:bottom;padding-bottom:1rem;border-bottom:2px solid var(--tinta)}
.cmp-tabla tbody th{font-weight:600;width:22%;color:var(--tinta)}
.cmp-tabla .cmp-vacio{border-bottom:2px solid transparent}
/* impeccable-disable-next-line side-tab -- marco de columna a ambos lados (izquierda y derecha), no pestaña lateral */
.cmp-tabla .nos{background:var(--claro-1);border-left:2px solid var(--azul-fondo);border-right:2px solid var(--azul-fondo);font-weight:600}
.cmp-tabla thead .nos{background:var(--azul-fondo);color:#fff;border-radius:var(--r) var(--r) 0 0;border-bottom-color:var(--azul-fondo);font-size:1.125rem}
.cmp-tabla tbody tr:last-child .nos{border-bottom:2px solid var(--azul-fondo)}
.cmp-tabla tbody tr:last-child th,.cmp-tabla tbody tr:last-child td:not(.nos){border-bottom-color:rgba(13,20,35,.12)}
.cmp-c{display:flex;gap:.7rem;align-items:flex-start}
.cmp-c > span:last-child{flex:1;min-width:0}
.ic{width:24px;height:24px;flex:none;margin-top:.05rem}
.cmp-pie{margin-top:1.1rem;font-size:.9rem;color:var(--ink-3);max-width:44rem}
@media (max-width:47.99em){
  .cmp-tabla,.cmp-tabla tbody,.cmp-tabla tr,.cmp-tabla th,.cmp-tabla td{display:block;width:auto}
  .cmp-tabla thead{display:none}
  .cmp-tabla tbody tr{border:1px solid rgba(13,20,35,.14);border-radius:var(--r);margin-bottom:1rem;overflow:hidden;background:#fff;box-shadow:0 8px 0 -4px rgba(13,20,35,.1)}
  .cmp-tabla tbody th{width:auto;padding:.9rem 1rem;background:var(--tinta);color:#fff;border:0;font-size:1rem}
  .cmp-tabla td{display:grid;grid-template-columns:1fr;gap:.25rem;padding:.8rem 1rem;border-bottom:1px solid rgba(13,20,35,.1);border-left:0;border-right:0}
  .cmp-tabla td:last-child{border-bottom:0}
  .cmp-tabla td::before{content:attr(data-label);font-size:.8125rem;font-weight:600;color:var(--ink-3)}
  .cmp-tabla .nos{background:var(--claro-1);border:2px solid var(--azul-fondo)}
  .cmp-tabla .nos::before{color:var(--azul)}
  .cmp-tabla tbody tr:last-child .nos{border-bottom:0}
}
.js .cmp-tabla tbody tr.sube{transition-delay:calc(var(--k,0) * 70ms)}

/* ------------------------------------------------------------ calculadora */
.calc{display:grid;gap:2rem;margin-top:2.5rem;align-items:center}
@media (min-width:56em){.calc{grid-template-columns:1fr 1fr}}
.panel{background:var(--tinta);color:#fff;border-radius:var(--r);padding:1.6rem;box-shadow:0 10px 0 -4px rgba(13,20,35,.18)}
.panel label{display:block;font-size:.95rem;color:var(--gris-2);margin-top:.9rem}
.panel label:first-child{margin-top:0}
.panel output{display:block;font-family:var(--dato);font-weight:600;font-size:1.9rem;margin:.15rem 0 .5rem}
.panel input[type=range]{width:100%;height:32px;accent-color:var(--azul-fondo)}
.comparar{display:grid;gap:.8rem}
.calc-t{color:var(--ink-3);font-size:1rem}
.calc-n{font-weight:600;font-size:clamp(2.8rem,7vw,5rem);line-height:1;letter-spacing:-.04em;color:var(--tinta)}
.calc-p{color:var(--ink-3);font-size:.95rem}

/* ------------------------------------------------------------ Joseph y reseñas */
.joseph-rej{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:60em){.joseph-rej{grid-template-columns:1fr 1.1fr}}
.retrato{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);background:var(--sup);max-width:420px;width:100%}
.retrato img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--curva)}
.retrato.in img{transform:scale(1)}
.retrato figcaption{position:absolute;left:1rem;bottom:1rem;background:#fff;color:var(--tinta);padding:.55rem .8rem;border-radius:var(--r);font-size:.9rem;font-weight:600}
.retrato figcaption small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem}
.gran-cifra{font-family:var(--dato);font-weight:600;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.9;letter-spacing:-.05em;color:#fff}
.gran-cifra-txt{color:var(--gris-2);font-size:1rem;max-width:30rem;margin-top:.8rem}
.res-cab{margin-top:1.4rem}
.resenas{display:grid;gap:1rem;margin-top:1.25rem}
@media (min-width:40em){.resenas{grid-template-columns:1fr 1fr}.resena:first-child{grid-column:1/-1}}
.resena{background:var(--sup);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:0 8px 0 -4px rgba(0,0,0,.35)}
.res-top{display:flex;align-items:center;gap:.7rem}
.res-top .lg{width:22px;height:22px}
.resena blockquote{margin:.7rem 0 .8rem;font-size:1rem;line-height:1.5;color:#fff}
.resena figcaption{font-size:.85rem;color:var(--gris-2)}

/* ------------------------------------------------------------ oferta y garantía */
.recibes{display:grid;gap:1.25rem;margin-top:2.5rem;align-items:end}
@media (min-width:40em){.recibes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60em){.recibes{grid-template-columns:repeat(4,1fr)}}
@media (min-width:40em){.recibes{align-items:start}.recibe{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}.recibe .obj{align-self:end}}
.recibe .obj{max-width:none}
.recibe h3{margin-top:1rem}
.recibe p{color:var(--ink-3);font-size:1rem;margin-top:.3rem}
.cuenta{padding:1rem .8rem;display:grid;gap:.5rem}
.cuenta div{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border:1px solid rgba(13,20,35,.1);border-radius:1px;padding:.6rem .75rem;font-size:.8rem}
.cuenta div b{font-weight:600}
.garantia{margin-top:2.5rem;display:grid;gap:1.5rem;align-items:center;border:2px solid var(--tinta);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);background:#fff}
@media (min-width:56em){.garantia{grid-template-columns:auto 1.4fr 1fr;gap:2.25rem}}
.gar-sello svg{width:112px;height:112px;overflow:visible}
.gar-txt p{color:var(--ink-3);font-size:1rem;margin-top:.4rem;max-width:40rem}
.gar-precio .precio{display:block;font-family:var(--dato);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;line-height:1.1}
.gar-precio .precio small{display:block;font-family:var(--display);font-size:.9375rem;font-weight:400;line-height:1.45;color:var(--ink-3);margin-top:.5rem}
.gar-precio .btn{margin-top:1rem}

/* ------------------------------------------------------------ preguntas */
.faq{margin-top:2rem;max-width:52rem}
.faq details{border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--dato);color:var(--acento);font-size:1.4rem;transition:transform var(--rapido)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gris-2);margin-top:.6rem;max-width:44rem}

/* ------------------------------------------------------------ cierre con Cal.com */
.cierre-rej{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56em){.cierre-rej{grid-template-columns:1.2fr 1fr;align-items:start}}
.cal{position:relative;background:#fff;color:var(--tinta);border-radius:var(--r);overflow:hidden;min-height:760px;border:1px solid rgba(13,20,35,.1);box-shadow:0 10px 0 -4px rgba(13,20,35,.18)}
.cal iframe{display:block;width:100%;height:760px;border:0}
.cal-sin{padding:2rem;text-align:center}
.cal-carga{display:none;position:absolute;inset:0 0 auto;padding:2rem 1.5rem;text-align:center;color:var(--ink-3)}
.js .cal-carga:not([hidden]){display:block}
.cal-carga a{color:inherit}

/* ------------------------------------------------------------ pie */
.pie{background:var(--suelo);border-top:1px solid rgba(255,255,255,.08);padding:clamp(3rem,6vw,4.5rem) 0 2.25rem;color:var(--gris-2);font-size:1rem}
.pie-rej{display:grid;gap:2.25rem}
@media (min-width:40em){.pie-rej{grid-template-columns:1fr 1fr}}
@media (min-width:64em){.pie-rej{grid-template-columns:1.25fr 1fr 1.1fr 1fr;gap:2.5rem}}
.pie-marca img{height:22px;width:auto}
.pie-marca p{margin-top:1rem;font-size:.95rem;max-width:30ch;text-wrap:pretty}
.pie-t{font-weight:600;color:#fff;margin-bottom:.6rem;font-size:1rem}
.pie li a{display:inline-flex;align-items:center;min-height:36px;color:var(--gris-2);text-decoration:none;font-size:.95rem;line-height:1.3;transition:color var(--rapido)}
.pie li a:hover,.pie-marca a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pie-marca a{color:var(--gris-2)}
.pie-fin{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:var(--gris)}
@media (max-width:47.99em){.pie{padding-bottom:6rem}}
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--azul-fondo);color:#fff;text-align:center;font-weight:600;padding:1rem;text-decoration:none;min-height:56px;transform:translateY(100%);transition:transform var(--lento) var(--curva)}
.barra-fija.on{transform:none}
@media (min-width:48em){.barra-fija{display:none}}

/* ------------------------------------------------------------ revelado al entrar */
.js .sube:not(.in){opacity:0;transform:translateY(22px)}
.sube{transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva);transition-delay:calc(var(--k,0) * 110ms)}

/* ------------------------------------------------------------ sin movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq{-webkit-mask-image:none;mask-image:none}
  .marq-pista{animation:none;width:auto;flex-wrap:wrap}
  .marq-grupo{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:1.5rem}
  .marq-grupo[aria-hidden="true"],.marq-ctl{display:none}
  .sube,.js .sube:not(.in),.js .sello-q.sube svg.sello,.cuadro,.anota,.paso,.retrato img,.ventana .marco{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
  .cuadro:not(.on){opacity:0!important}
  .tienda .barra i,.umbral .linea::after{transform:none!important;transition:none!important}
  .h-canvas{display:none}
  .camino img,.btn,.retrato img{transition:none}
}
@media print{.barra-fija,.cab,.h-canvas{display:none}}

/* fluidez (29 oct 2026): las secciones fuera de pantalla no se recalculan. Sin esto cada pasada de estilo
   costaba 45 ms en un celular con la CPU a 1/4 (casi tres fotogramas). #inicio y #sistema quedan fuera:
   el héroe se ve al cargar y el sistema lleva un hijo sticky, que la contención rompe.
   contain-intrinsic-size es el alto del CONTENIDO, sin el relleno, medido en 390, 768 y 1440 px;
   «auto» hace que, después de verse una vez, el navegador recuerde el alto real. */
#confianza,#datos,#caminos,#metodo,#caso,#comparar,#calculadora,#joseph,#precio,#preguntas,#agendar,#pie{content-visibility:auto}
body:not(.mseo-en) #confianza{contain-intrinsic-size:auto 661px}
body:not(.mseo-en) #datos{contain-intrinsic-size:auto 553px}
body:not(.mseo-en) #caminos{contain-intrinsic-size:auto 716px}
body:not(.mseo-en) #metodo{contain-intrinsic-size:auto 1588px}
body:not(.mseo-en) #caso{contain-intrinsic-size:auto 1051px}
body:not(.mseo-en) #comparar{contain-intrinsic-size:auto 1744px}
body:not(.mseo-en) #calculadora{contain-intrinsic-size:auto 625px}
body:not(.mseo-en) #joseph{contain-intrinsic-size:auto 1197px}
body:not(.mseo-en) #precio{contain-intrinsic-size:auto 2040px}
body:not(.mseo-en) #preguntas{contain-intrinsic-size:auto 406px}
body:not(.mseo-en) #agendar{contain-intrinsic-size:auto 1166px}
body:not(.mseo-en) #pie{contain-intrinsic-size:auto 1293px}
.mseo-en #confianza{contain-intrinsic-size:auto 472px}
.mseo-en #datos{contain-intrinsic-size:auto 530px}
.mseo-en #metodo{contain-intrinsic-size:auto 1615px}
.mseo-en #caso{contain-intrinsic-size:auto 1144px}
.mseo-en #comparar{contain-intrinsic-size:auto 1632px}
.mseo-en #calculadora{contain-intrinsic-size:auto 601px}
.mseo-en #joseph{contain-intrinsic-size:auto 1440px}
.mseo-en #precio{contain-intrinsic-size:auto 2095px}
.mseo-en #preguntas{contain-intrinsic-size:auto 566px}
.mseo-en #agendar{contain-intrinsic-size:auto 1104px}
.mseo-en #pie{contain-intrinsic-size:auto 548px}
@media (min-width:48em){
body:not(.mseo-en) #confianza{contain-intrinsic-size:auto 620px}
body:not(.mseo-en) #datos{contain-intrinsic-size:auto 527px}
body:not(.mseo-en) #caminos{contain-intrinsic-size:auto 395px}
body:not(.mseo-en) #metodo{contain-intrinsic-size:auto 1424px}
body:not(.mseo-en) #caso{contain-intrinsic-size:auto 1023px}
body:not(.mseo-en) #comparar{contain-intrinsic-size:auto 860px}
body:not(.mseo-en) #calculadora{contain-intrinsic-size:auto 616px}
body:not(.mseo-en) #joseph{contain-intrinsic-size:auto 1009px}
body:not(.mseo-en) #precio{contain-intrinsic-size:auto 1362px}
body:not(.mseo-en) #preguntas{contain-intrinsic-size:auto 384px}
body:not(.mseo-en) #agendar{contain-intrinsic-size:auto 1080px}
body:not(.mseo-en) #pie{contain-intrinsic-size:auto 835px}
.mseo-en #confianza{contain-intrinsic-size:auto 452px}
.mseo-en #datos{contain-intrinsic-size:auto 550px}
.mseo-en #metodo{contain-intrinsic-size:auto 1497px}
.mseo-en #caso{contain-intrinsic-size:auto 1093px}
.mseo-en #comparar{contain-intrinsic-size:auto 768px}
.mseo-en #calculadora{contain-intrinsic-size:auto 616px}
.mseo-en #joseph{contain-intrinsic-size:auto 1216px}
.mseo-en #precio{contain-intrinsic-size:auto 1411px}
.mseo-en #preguntas{contain-intrinsic-size:auto 544px}
.mseo-en #agendar{contain-intrinsic-size:auto 1051px}
.mseo-en #pie{contain-intrinsic-size:auto 403px}
}
@media (min-width:64em){
body:not(.mseo-en) #confianza{contain-intrinsic-size:auto 518px}
body:not(.mseo-en) #datos{contain-intrinsic-size:auto 275px}
body:not(.mseo-en) #caminos{contain-intrinsic-size:auto 641px}
body:not(.mseo-en) #metodo{contain-intrinsic-size:auto 936px}
body:not(.mseo-en) #caso{contain-intrinsic-size:auto 1144px}
body:not(.mseo-en) #comparar{contain-intrinsic-size:auto 671px}
body:not(.mseo-en) #calculadora{contain-intrinsic-size:auto 519px}
body:not(.mseo-en) #joseph{contain-intrinsic-size:auto 598px}
body:not(.mseo-en) #precio{contain-intrinsic-size:auto 873px}
body:not(.mseo-en) #preguntas{contain-intrinsic-size:auto 426px}
body:not(.mseo-en) #agendar{contain-intrinsic-size:auto 762px}
body:not(.mseo-en) #pie{contain-intrinsic-size:auto 548px}
.mseo-en #confianza{contain-intrinsic-size:auto 322px}
.mseo-en #datos{contain-intrinsic-size:auto 252px}
.mseo-en #metodo{contain-intrinsic-size:auto 994px}
.mseo-en #caso{contain-intrinsic-size:auto 1235px}
.mseo-en #comparar{contain-intrinsic-size:auto 626px}
.mseo-en #calculadora{contain-intrinsic-size:auto 519px}
.mseo-en #joseph{contain-intrinsic-size:auto 701px}
.mseo-en #precio{contain-intrinsic-size:auto 851px}
.mseo-en #preguntas{contain-intrinsic-size:auto 586px}
.mseo-en #agendar{contain-intrinsic-size:auto 762px}
.mseo-en #pie{contain-intrinsic-size:auto 224px}
}