/* Topsellia · España (/es/). Presentación de producto: secciones de cine en negro y, al llegar a los
   planes, todo pasa a blanco. Una sola familia (Inter Tight) y un solo acento (azul Topsellia).
   Fuente: _fuentes/topsellia-es/estatico/es.css → se copia a /es/assets/es.css con construir.py. */

:root{
  --negro:#000;
  --carbon:#0b0b0d;
  --grafito:#161618;
  --linea-osc:#2c2c30;
  --texto-osc:#f5f5f7;
  --tenue-osc:#a1a1a6;          /* sobre negro 8,3:1 */
  --blanco:#fff;
  --nube:#f5f5f7;
  --tinta:#1d1d1f;              /* sobre blanco 16,8:1 */
  --tenue-cl:#6e6e73;           /* sobre blanco 5,1:1 · sobre nube 4,7:1 */
  --linea-cl:#d2d2d7;
  --azul:#1f3dff;               /* sobre blanco 7,6:1 */
  --azul-hover:#0f2be0;
  --azul-claro:#8696ff;         /* sobre negro 7,6:1 */
  --brillo:rgba(31,61,255,.55);
  --ok:#1f8a4c;
  --error:#d70015;
  --f:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:1180px;
  --gutter:clamp(16px,4vw,40px);
  --r:22px;
  --r-s:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --cab:52px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--cab) + 12px)}
body{margin:0;background:var(--negro);color:var(--texto-osc);font-family:var(--f);font-size:19px;line-height:1.55;
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
@media (max-width:640px){body{font-size:17px}}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px;border-radius:6px}
.claro :focus-visible,.claro:focus-visible{outline-color:var(--azul)}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blanco);color:var(--tinta);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.saltar:focus{top:10px}
.env{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── tipografía ── */
.cartel{font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(46px,8.6vw,124px)}
.titulo{font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(40px,6.2vw,92px)}
.titulo-m{font-weight:700;letter-spacing:-.025em;line-height:1.08;font-size:clamp(30px,4vw,56px)}
.ante{font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.005em;color:var(--azul-claro);margin-bottom:14px}
.claro .ante{color:var(--azul)}
.entradilla{font-size:clamp(19px,1.9vw,26px);line-height:1.4;font-weight:500;letter-spacing:-.012em;color:var(--tenue-osc);max-width:34ch}
.entradilla b{color:var(--texto-osc);font-weight:600}
.claro .entradilla{color:var(--tenue-cl)}
.claro .entradilla b{color:var(--tinta)}
.tenue{color:var(--tenue-osc)}
.claro .tenue{color:var(--tenue-cl)}
.azul{color:var(--azul-claro)}
.claro .azul{color:var(--azul)}
.letra-peq{font-size:14px;line-height:1.5}

/* ── botones (píldora, como un producto) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--azul);color:#fff;font-weight:600;font-size:17px;text-decoration:none;letter-spacing:-.01em;border:0;cursor:pointer;
  transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--azul-hover)}
.btn:active{transform:scale(.98)}
.btn--blanco{background:var(--blanco);color:var(--tinta)}
.btn--blanco:hover{background:#e8e8ed}
.btn--borde{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--borde:hover{background:rgba(127,127,127,.12)}
.enlace{color:var(--azul-claro);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:.3em;min-height:44px}
.enlace:hover{text-decoration:underline}
.claro .enlace{color:var(--azul)}
.flecha{display:inline-block;transition:transform .2s var(--ease)}
a:hover .flecha{transform:translateX(3px)}

/* ── cabecera ── */
.cab{position:sticky;top:0;z-index:50;height:var(--cab);background:rgba(18,18,20,.74);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);color:var(--texto-osc)}
.cab .env{height:100%;display:flex;align-items:center;gap:20px}
.marca{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.03em;min-height:44px}
.marca i{width:9px;height:9px;border-radius:50%;background:var(--azul);box-shadow:0 0 12px var(--brillo);font-style:normal}
.cab nav{margin-left:auto}
.menu{list-style:none;display:flex;gap:26px}
.menu a{font-size:14px;text-decoration:none;color:rgba(245,245,247,.82);display:inline-flex;align-items:center;min-height:44px}
.menu a:hover,.menu a[aria-current]{color:#fff}
.menu a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.cab .btn{min-height:34px;padding:0 15px;font-size:14px}
.pais{display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.08);padding:3px}
.pais a{display:inline-flex;align-items:center;gap:6px;min-height:30px;min-width:44px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none;color:rgba(245,245,247,.7)}
.pais a[aria-current]{background:rgba(255,255,255,.16);color:#fff}
.pais svg{width:16px;height:11px;border-radius:2px;flex:none}
.abre-menu{display:none}
@media (max-width:960px){
  .cab nav{position:fixed;inset:var(--cab) 0 auto 0;height:calc(100svh - var(--cab));background:rgba(10,10,12,.97);padding:24px var(--gutter);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;overflow:auto}
  .cab.abierto nav{opacity:1;visibility:visible;transform:none}
  .menu{flex-direction:column;gap:0}
  .menu a{font-size:28px;font-weight:600;letter-spacing:-.02em;min-height:60px;border-bottom:1px solid var(--linea-osc);display:flex;color:#fff}
  .menu a[aria-current]{text-decoration:none;color:var(--azul-claro)}
  .cab nav .btn{margin-top:24px;min-height:52px;font-size:17px;width:100%}
  .cab-cta{display:none}
  .pais{margin-left:auto}
  .abre-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 10px;background:none;border:0;color:#fff;font-size:15px;font-weight:500;cursor:pointer}
  .abre-menu span{position:relative;width:18px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:.2s}
  .cab.abierto .abre-menu span{border-bottom-color:transparent;border-top-color:transparent}
  .cab.abierto .abre-menu span::before,.cab.abierto .abre-menu span::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.5px solid currentColor;transform:rotate(45deg)}
  .cab.abierto .abre-menu span::after{transform:rotate(-45deg)}
}
@media (min-width:961px){.cab nav .btn{display:none}}

/* ════════════════════════ PELÍCULA DEL HERO ════════════════════════
   Sin JS o con «reducir movimiento»: se ve el cartel final, quieto (.peli sin .viva).
   Con peli.js: la sección mide 520vh, el escenario queda fijo y el MacBook se gira, se abre y la
   cámara entra en la pantalla. Las variables --ry, --rx, --tapa, --z… las pone peli.js en cada fotograma. */
.peli{position:relative;background:var(--negro);margin-top:calc(-1 * var(--cab))}
.peli__fija{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center}
.peli.viva{height:520vh}
.peli.viva .peli__fija{position:sticky;top:0;height:100svh;min-height:0}
.escena,.peli__cap,.peli__lienzo{display:none}
.peli.viva .escena,.peli.viva .peli__cap{display:block}
.escena{position:absolute;inset:0;perspective:calc(var(--W) * 3.4);perspective-origin:50% 42%;
  --W:min(56vw,820px,calc(100svh * .9));--H:calc(var(--W) * .655)}
@media (max-width:640px){.escena{--W:90vw;perspective-origin:50% 46%}}
.suelo{position:absolute;left:50%;top:calc(50% + var(--H) * .5 + var(--sube,0px));width:calc(var(--W) * 1.5);height:calc(var(--W) * .28);
  translate:-50% -50%;background:radial-gradient(closest-side,rgba(60,80,255,.20),transparent 70%);opacity:calc(1 - var(--z-n,0) * 1.4);pointer-events:none}
.zoom{position:absolute;left:50%;top:50%;width:var(--W);height:var(--H);margin:calc(var(--H) * -.5) 0 0 calc(var(--W) * -.5);
  transform-style:preserve-3d;transform-origin:50% 49.85%;
  transform:translate3d(var(--dx,0px),var(--sube,0px),0) scale(calc(var(--z,1) * var(--esc,1)));will-change:transform}
.mac{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(var(--rx,-32deg)) rotateY(var(--ry,-36deg))}
/* tapa: bisagra abajo; 0deg = abierta en vertical, -90deg = cerrada sobre el teclado */
.tapa{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(var(--tapa,-76deg))}
.tapa__cara,.tapa__dorso{position:absolute;inset:0;border-radius:calc(var(--W) * .028) calc(var(--W) * .028) calc(var(--W) * .008) calc(var(--W) * .008);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.tapa__cara{background:#0a0a0b;box-shadow:inset 0 0 0 calc(var(--W) * .0035) #b9bcc2,inset 0 0 0 calc(var(--W) * .006) #3a3b3f}
.tapa__dorso{transform:rotateY(180deg);background:
  radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.55),transparent 55%),
  linear-gradient(160deg,#e9eaec 0%,#cdd0d4 45%,#b5b8bd 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tapa__dorso::after{content:"";position:absolute;left:50%;top:46%;width:calc(var(--W) * .055);height:calc(var(--W) * .055);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f7f7f8,#c4c7cc 70%);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.camara{position:absolute;left:50%;top:calc(var(--W) * .009);width:calc(var(--W) * .006);height:calc(var(--W) * .006);translate:-50% 0;border-radius:50%;background:#1d1e22;box-shadow:0 0 0 1px #2a2b30}
.pantalla{position:absolute;left:2.1%;right:2.1%;top:3.3%;bottom:3.6%;border-radius:calc(var(--W) * .008);overflow:hidden;background:#000;container-type:size}
.pantalla__luz{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.10),transparent 40%);pointer-events:none;z-index:3}
.web{position:absolute;inset:0;opacity:var(--encendida,0);filter:brightness(calc(.4 + var(--encendida,0) * .6));
  background:radial-gradient(70% 60% at 50% 115%,rgba(31,61,255,.55),transparent 70%),#000;color:#f5f5f7;
  display:flex;flex-direction:column;align-items:center;font-family:var(--f)}
.web__barra{width:100%;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqh 2.6cqw;font-size:1.25cqw;color:rgba(245,245,247,.75);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(20,20,22,.8)}
.web__barra b{color:#fff;font-weight:700;letter-spacing:-.03em;font-size:1.6cqw;display:flex;align-items:center;gap:.5cqw}
.web__barra b i{width:.8cqw;height:.8cqw;border-radius:50%;background:var(--azul)}
.web__barra span:first-of-type{margin-left:auto}
.web__barra em{font-style:normal;background:var(--azul);color:#fff;border-radius:99px;padding:.35cqh 1.1cqw}
.web__cuerpo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6cqw;gap:2.2cqh}
.web__cuerpo p{font-size:1.9cqw;color:var(--azul-claro);font-weight:600}
.web__cuerpo strong{display:block;font-size:8.6cqw;line-height:1;letter-spacing:-.035em;font-weight:700}
.web__cuerpo span{display:block;font-size:3.4cqw;line-height:1.1;letter-spacing:-.025em;font-weight:600;color:#d8d8de}
.web__botones{display:flex;gap:1.2cqw;margin-top:1.4cqh}
.web__botones i{font-style:normal;font-size:1.5cqw;font-weight:600;border-radius:99px;padding:1.1cqh 2.2cqw;background:var(--azul);color:#fff}
.web__botones i+i{background:transparent;box-shadow:inset 0 0 0 .15cqw #fff}
/* base: tumbada desde la bisagra hacia ti */
.base{position:absolute;left:-1.5%;right:-1.5%;top:100%;height:calc(var(--W) * .68);transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;
  border-radius:calc(var(--W) * .006) calc(var(--W) * .006) calc(var(--W) * .03) calc(var(--W) * .03);
  background:linear-gradient(180deg,#c9ccd1 0%,#dfe1e4 30%,#d3d6da 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.teclado{position:absolute;left:12%;right:12%;top:7%;height:41%;border-radius:calc(var(--W) * .008);background:#1b1c1f;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 calc(100% / 14 - 3px),#1b1c1f calc(100% / 14 - 3px) calc(100% / 14)),
    repeating-linear-gradient(180deg,#2e2f34 0 calc(100% / 6 - 3px),#1b1c1f calc(100% / 6 - 3px) calc(100% / 6));
  box-shadow:0 0 0 calc(var(--W) * .004) #b2b5ba}
.trackpad{position:absolute;left:31%;right:31%;top:54%;height:36%;border-radius:calc(var(--W) * .012);background:linear-gradient(180deg,#d0d3d7,#c7cacf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.base__frente{position:absolute;left:0;right:0;top:100%;height:calc(var(--W) * .02);transform-origin:50% 0;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#b7bac0,#8f9298);border-radius:0 0 calc(var(--W) * .02) calc(var(--W) * .02)}
.base__frente::after{content:"";position:absolute;left:44%;right:44%;top:0;height:45%;background:#7d8086;border-radius:0 0 8px 8px}
.peli.dentro .base,.peli.dentro .bisagra{visibility:hidden}
.bisagra{position:absolute;left:8%;right:8%;top:100%;height:calc(var(--W) * .012);background:linear-gradient(180deg,#2a2b2f,#45464b);border-radius:0 0 6px 6px;transform-origin:50% 0;transform:rotateX(90deg) translateZ(-1px)}

/* textos que acompañan a la película */
.peli__cap{position:absolute;left:0;right:0;text-align:center;padding:0 var(--gutter);pointer-events:none;z-index:4}
.peli__cap--1{top:calc(var(--cab) + 6svh);opacity:var(--c1,1);transform:translateY(calc((1 - var(--c1,1)) * -24px))}
.peli__cap--2{top:calc(var(--cab) + 6svh);opacity:var(--c2,0);transform:translateY(calc((1 - var(--c2,0)) * 24px))}
.peli__cap .ante{margin-bottom:10px}
.peli__cap .titulo-m{font-size:clamp(30px,4.6vw,68px)}
.peli__cap p+p{margin-top:0}
.peli__pista{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--tenue-osc)}
.peli__pista i{width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.5);position:relative}
.peli__pista i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff}
@media (prefers-reduced-motion:no-preference){.peli__pista i::after{animation:pista 1.6s var(--ease) infinite}}
@keyframes pista{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* cartel final: es la misma «web» de la pantalla, ya a pantalla completa (y el H1 de la página) */
.final{position:relative;z-index:5;width:100%;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--cab) + 40px) var(--gutter) 64px;
  background:radial-gradient(70% 55% at 50% 112%,rgba(31,61,255,.55),transparent 70%),var(--negro)}
.peli.viva .final{position:absolute;inset:0;opacity:var(--fin,0);visibility:var(--fin-vis,hidden)}
.final .saludo{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 16px;border-radius:999px;background:rgba(31,61,255,.18);box-shadow:inset 0 0 0 1px rgba(134,150,255,.5);font-weight:600;font-size:16px}
.final .saludo[hidden]{display:none}
.final h1{font-weight:700;letter-spacing:-.04em;line-height:.98}
.final h1 .l1{display:block;font-size:clamp(58px,12.4vw,176px)}
.final h1 .l2{display:block;margin-top:.35em;font-size:clamp(26px,4.4vw,62px);letter-spacing:-.028em;line-height:1.06;color:#d8d8de;font-weight:600}
.final h1 .l2 b{color:#fff;font-weight:700;white-space:nowrap}
.final .impuestos{display:block;margin-top:14px;font-size:13px;color:var(--tenue-osc);letter-spacing:.01em}
.final .acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:34px}
.final .btn{min-height:54px;padding:0 28px;font-size:18px}
@media (max-width:640px){
  .final .acciones{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .final h1 .l2 b{white-space:normal}
}
/* modo vídeo (cuando haya película de Higgsfield): lienzo a pantalla completa en lugar del MacBook */
.peli.con-video .escena{display:none}
.peli.con-video .peli__lienzo{display:block;position:absolute;inset:0;width:100%;height:100%}

/* ════════════════════════ SECCIONES ════════════════════════ */
.sec{position:relative;padding:clamp(96px,14vw,180px) 0}
.sec--negra{background:var(--negro);color:var(--texto-osc)}
.sec--carbon{background:var(--carbon);color:var(--texto-osc)}
.claro{background:var(--blanco);color:var(--tinta)}
.claro--nube{background:var(--nube)}
.centro{text-align:center}
.centro .entradilla{margin-inline:auto}

/* revelado al hacer scroll: solo con CSS (animation-timeline). Donde no se soporta, se ve todo quieto. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sube{animation:sube linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .llena{animation:llena linear both;animation-timeline:view();animation-range:cover 18% cover 48%}
    .crece{animation:crece linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  }
}
@keyframes sube{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes llena{from{color:#3a3a3e}to{color:var(--texto-osc)}}
@keyframes crece{from{opacity:.2;transform:scale(.86)}to{opacity:1;transform:none}}

/* ── 3 claves ── */
.claves{display:grid;gap:clamp(90px,14vw,190px)}
.clave{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,64px);align-items:start;max-width:1040px}
.clave:nth-child(2){margin-left:auto}
.clave__n{font-weight:700;font-size:clamp(16px,1.4vw,19px);color:var(--azul-claro);padding-top:.9em;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clave h2{font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(44px,7.6vw,112px)}
.clave h2 span{color:var(--tenue-osc)}
.clave p{margin-top:22px;max-width:44ch;color:var(--tenue-osc);font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.clave p b{color:var(--texto-osc);font-weight:600}
@media (max-width:640px){.clave{grid-template-columns:1fr;gap:6px}.clave__n{padding-top:0}}

/* ── el diseño llega a tu correo ── */
.correo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,110px);align-items:center}
.pasos{list-style:none;counter-reset:p;display:grid;gap:30px;margin-top:44px}
.pasos li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.pasos li::before{content:counter(p);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;background:var(--grafito);box-shadow:inset 0 0 0 1px var(--linea-osc);color:var(--texto-osc)}
.pasos h3{font-size:clamp(21px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:6px}
.pasos p{color:var(--tenue-osc);margin-top:6px;max-width:42ch}
.nota-rondas{margin-top:34px;padding:18px 20px;border-radius:var(--r-s);background:var(--grafito);box-shadow:inset 0 0 0 1px var(--linea-osc);color:var(--tenue-osc);font-size:16px;max-width:52ch}
.nota-rondas b{color:var(--texto-osc)}
/* bandeja de entrada */
.bandeja{position:relative;border-radius:28px;background:linear-gradient(180deg,#1b1b1e,#121214);box-shadow:0 0 0 1px var(--linea-osc),0 60px 120px -40px rgba(31,61,255,.45);padding:clamp(14px,2vw,22px);overflow:hidden}
.bandeja__cab{display:flex;align-items:center;gap:7px;padding:4px 6px 14px}
.bandeja__cab i{width:11px;height:11px;border-radius:50%;background:#3a3a3f}
.bandeja__cab span{margin-left:10px;font-size:13px;color:var(--tenue-osc)}
.mail{border-radius:18px;background:var(--blanco);color:var(--tinta);padding:clamp(16px,2.4vw,26px);font-size:15px}
.mail__de{display:flex;align-items:center;gap:12px}
.mail__av{width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.mail__de b{display:block;font-size:15px}
.mail__de small{color:var(--tenue-cl);font-size:13px}
.mail h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.02em;line-height:1.2;margin:18px 0 8px}
.mail p{color:#424245;font-size:15px}
.mail__web{margin-top:16px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--linea-cl);aspect-ratio:16/10;container-type:inline-size;position:relative;
  background:#122019}
.mail__web .mini{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;background:linear-gradient(120deg,#163a2c,#0e211a)}
.mini__nav{display:flex;justify-content:space-between;align-items:center;padding:2.4cqw 3.6cqw;color:#e9e2d0;font-size:2.4cqw;letter-spacing:.06em;text-transform:uppercase}
.mini__nav b{font-size:3.2cqw;letter-spacing:.02em;text-transform:none;font-weight:700}
.mini__hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;align-items:center;padding:0 3.6cqw 3.6cqw}
.mini__hero strong{display:block;color:#f3ecdb;font-size:7.4cqw;line-height:1;letter-spacing:-.03em;font-weight:700}
.mini__hero span{display:inline-block;margin-top:2.6cqw;background:#e9c46a;color:#1d1d1f;border-radius:99px;padding:1.2cqw 2.8cqw;font-size:2.4cqw;font-weight:700}
.mini__foto{aspect-ratio:3/4;border-radius:2cqw;background:
  radial-gradient(60% 40% at 50% 30%,rgba(233,196,106,.85),transparent 70%),
  radial-gradient(80% 60% at 40% 90%,rgba(255,255,255,.18),transparent 70%),
  linear-gradient(160deg,#2b5d49,#0c1c16)}
.mail__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mail__acciones span{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:99px;font-weight:600;font-size:14px;background:var(--azul);color:#fff}
.mail__acciones span+span{background:var(--nube);color:var(--tinta)}
.etq-ejemplo{position:absolute;right:16px;top:14px;font-size:12px;color:var(--tenue-osc)}
@media (max-width:900px){.correo{grid-template-columns:1fr}}

/* ── mantenimiento: lista que se enciende ── */
.mant .titulo{max-width:14ch}
.lista-grande{list-style:none;margin-top:clamp(40px,6vw,80px);display:grid;gap:clamp(4px,1vw,12px)}
.lista-grande li{font-weight:700;letter-spacing:-.035em;line-height:1.06;font-size:clamp(40px,7vw,104px);color:var(--texto-osc)}
.lista-grande li.azul{color:var(--azul-claro)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lista-grande li{animation:llena linear both;animation-timeline:view();animation-range:cover 15% cover 42%}
    .lista-grande li.azul{animation-name:llena-azul}
  }
}
@keyframes llena-azul{from{color:#2a2d52}to{color:var(--azul-claro)}}
.mant__pie{margin-top:clamp(40px,6vw,70px);display:flex;flex-wrap:wrap;gap:12px 40px;color:var(--tenue-osc);font-size:17px}
.mant__pie span{display:inline-flex;align-items:center;gap:10px}
.mant__pie svg{width:20px;height:20px;color:var(--azul-claro)}

/* ── Google Ads ── */
.ads{overflow:hidden}
.ads__rejilla{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,110px);align-items:center}
.cifra{display:block;margin-top:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.045em;line-height:.95;font-size:clamp(44px,6vw,96px);white-space:nowrap;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 0 60px rgba(31,61,255,.55)}
.cifra small{display:block;font-size:clamp(19px,1.9vw,26px);letter-spacing:-.015em;line-height:1.3;font-weight:600;color:var(--azul-claro);margin-top:14px;text-shadow:none}
.nota-ads{margin-top:24px;max-width:46ch;color:var(--tenue-osc);font-size:15px}
.movil{width:min(340px,100%);margin-inline:auto;aspect-ratio:9/19;border-radius:52px;background:#0a0a0b;padding:12px;position:relative;
  box-shadow:0 0 0 2px #3b3c40,0 0 0 10px #1c1c1f,0 0 0 11px #4a4b50,0 60px 120px -30px rgba(31,61,255,.6)}
.movil__pantalla{position:absolute;inset:12px;border-radius:42px;overflow:hidden;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif;padding:52px 14px 14px}
.movil__isla{position:absolute;left:50%;top:22px;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:2}
.g-busca{display:flex;align-items:center;gap:10px;border-radius:24px;box-shadow:0 1px 6px rgba(32,33,36,.28);padding:11px 14px;font-size:14px;color:#202124}
.g-busca svg{width:16px;height:16px;color:#5f6368;flex:none}
.g-pestanas{display:flex;gap:16px;font-size:12.5px;color:#5f6368;margin:14px 2px 10px;border-bottom:1px solid #ebebeb}
.g-pestanas span{padding-bottom:8px}
.g-pestanas span:first-child{color:#1a73e8;border-bottom:2px solid #1a73e8}
.g-anuncio{padding:12px 4px 14px;border-bottom:1px solid #ebebeb}
.g-anuncio .pat{font-size:12px;font-weight:700;color:#202124}
.g-anuncio .url{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:#4d5156}
.g-anuncio .url i{width:22px;height:22px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:11px;font-family:var(--f)}
.g-anuncio .g-tit{margin:8px 0 4px;font-size:17px;line-height:1.3;color:#1a0dab;font-weight:400}
.g-anuncio p{font-size:13px;line-height:1.45;color:#4d5156}
.g-anuncio .exts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.g-anuncio .exts span{font-size:12px;color:#1a0dab;border:1px solid #dadce0;border-radius:99px;padding:4px 10px}
.g-normal{padding:12px 4px;opacity:.55}
.g-normal b{display:block;height:10px;width:60%;background:#e8eaed;border-radius:4px;margin:8px 0}
.g-normal b+b{width:90%;height:8px}
.g-normal b+b+b{width:75%}
.ads__visual{position:relative}
.cifra small{white-space:normal}
@media (max-width:900px){.ads__rejilla{grid-template-columns:1fr}.ads__visual{margin-top:20px}}
.ads__aviso{position:absolute;left:50%;bottom:-34px;translate:-50% 0;white-space:nowrap;font-size:12px;color:var(--tenue-osc)}

/* ════════════════════════ PLANES (blanco) ════════════════════════ */
.planes-sec{padding-top:clamp(96px,12vw,160px)}
.planes-sec .titulo{max-width:16ch;margin-inline:auto}
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(44px,6vw,72px);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:28px;background:var(--nube);padding:clamp(26px,3vw,38px);text-align:left}
.plan--top{background:var(--blanco);box-shadow:0 0 0 2px var(--azul),0 30px 70px -30px rgba(31,61,255,.45)}
.plan__chapa{position:absolute;top:-14px;left:clamp(26px,3vw,38px);background:var(--azul);color:#fff;font-size:13px;font-weight:600;border-radius:99px;padding:5px 12px}
.plan h3{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.025em}
.plan__para{color:var(--tenue-cl);margin-top:6px;font-size:16px;min-height:3em}
.plan__web{margin-top:22px;font-size:15px;color:var(--tenue-cl)}
.plan__web b{color:var(--tinta);font-size:18px;font-weight:700}
.plan__precio{display:flex;align-items:baseline;gap:6px;margin-top:4px;line-height:1}
.plan__precio strong{font-size:clamp(52px,5.4vw,72px);font-weight:700;letter-spacing:-.045em}
.plan__precio span{font-size:20px;font-weight:600;color:var(--tinta)}
.plan__imp{display:block;margin-top:8px;font-size:13px;color:var(--tenue-cl)}
.plan ul{list-style:none;margin:26px 0 30px;display:grid;gap:12px;font-size:16px;line-height:1.45}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.plan li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.plan li b{font-weight:600}
.plan .btn{margin-top:auto;width:100%;min-height:52px}
.plan--feo .btn{background:var(--tinta)}
.plan--feo .btn:hover{background:#000}
.incluido{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--linea-cl);text-align:left}
.incluido div{display:grid;gap:8px}
.incluido svg{width:30px;height:30px;color:var(--azul)}
.incluido b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.incluido span{font-size:15px;color:var(--tenue-cl)}
.legal-planes{max-width:72ch;margin:clamp(36px,5vw,56px) auto 0;font-size:14px;line-height:1.55;color:var(--tenue-cl);text-align:center}
.legal-planes a{color:var(--tinta)}
@media (max-width:980px){.planes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.plan__para{min-height:0}.incluido{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.incluido{grid-template-columns:1fr}}

/* ── preguntas ── */
.faq{max-width:860px;margin:clamp(40px,5vw,64px) auto 0}
.faq details{border-bottom:1px solid var(--linea-cl)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:14px 0;font-size:clamp(19px,1.8vw,23px);font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--nube);position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--tinta);border-radius:2px;transition:transform .25s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 0 24px;color:#424245;max-width:68ch}

/* ── formulario ── */
.form-sec{background:var(--nube);color:var(--tinta)}
.form-rejilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:start}
.form-rejilla .entradilla{margin-top:18px}
.garantias{list-style:none;margin-top:30px;display:grid;gap:14px}
.garantias li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:17px}
.garantias svg{width:24px;height:24px;color:var(--azul)}
.form{background:var(--blanco);border-radius:28px;padding:clamp(22px,3.4vw,40px);box-shadow:0 30px 80px -40px rgba(0,0,0,.25)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:6px}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:15px;font-weight:600}
.campo label small{font-weight:400;color:var(--tenue-cl)}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:12px 14px;border-radius:12px;border:1.5px solid #86868b;background:var(--blanco);font-size:17px;color:var(--tinta)}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(31,61,255,.18)}
.campo [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(215,0,21,.12)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin-top:14px;font-size:15px;line-height:1.45;color:#424245;cursor:pointer}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--azul)}
.check input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:2px}
.check a{color:var(--azul)}
.form .btn{width:100%;margin-top:22px;min-height:56px;font-size:18px}
.form .btn[disabled]{opacity:.6;cursor:progress}
.primera-capa{margin-top:16px;font-size:13px;line-height:1.5;color:var(--tenue-cl)}
.primera-capa a{color:var(--tenue-cl)}
.aviso-form{margin-top:12px;font-size:15px;font-weight:500}
.aviso-form.error{color:var(--error)}
.gracias{display:none;text-align:center;padding:30px 10px}
.gracias.visible{display:block}
.gracias .ok{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--azul);display:grid;place-items:center}
.gracias .ok svg{width:30px;height:30px;color:#fff}
.gracias h3{font-size:30px;letter-spacing:-.025em}
.gracias p{margin-top:10px;color:#424245}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.trampa input{font-size:16px}
@media (max-width:900px){.form-rejilla{grid-template-columns:1fr}}
@media (max-width:560px){.campos{grid-template-columns:1fr}}

/* ── barra fija móvil ── */
.barra-movil{display:none}
@media (max-width:760px){
  .barra-movil{display:block;position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateY(160%);transition:transform .4s var(--ease)}
  .barra-movil.visible{transform:none}
  .barra-movil .btn{width:100%;min-height:54px;box-shadow:0 14px 40px -10px rgba(0,0,0,.5)}
}

/* ── pie ── */
.pie{background:var(--nube);color:var(--tenue-cl);font-size:13px;line-height:1.55;padding:clamp(40px,5vw,60px) 0 calc(36px + env(safe-area-inset-bottom));border-top:1px solid var(--linea-cl)}
.pie__rejilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding-bottom:28px;border-bottom:1px solid var(--linea-cl)}
.pie h2{font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:8px}
.pie ul{list-style:none;display:grid;gap:2px}
.pie a{color:#424245;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.pie a:hover{text-decoration:underline;color:var(--tinta)}
.pie .marca{color:var(--tinta)}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:18px}
.pie button{background:none;border:0;padding:0;color:#424245;font-size:13px;cursor:pointer;min-height:32px}
.pie button:hover{text-decoration:underline}
@media (max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr}.pie__rejilla>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.pie{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ════════════════════════ PÁGINAS SENCILLAS ════════════════════════ */
.cabeza{padding:clamp(80px,12vw,160px) 0 clamp(70px,10vw,130px);background:radial-gradient(60% 70% at 85% 0%,rgba(31,61,255,.35),transparent 70%),var(--negro)}
.cabeza h1{font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(48px,9vw,132px);max-width:12ch}
.cabeza .entradilla{margin-top:26px;max-width:40ch}
.cabeza .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.bloques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px)}
.bloque{background:var(--nube);border-radius:24px;padding:clamp(24px,3vw,34px)}
.bloque b{display:block;font-size:clamp(21px,2vw,25px);letter-spacing:-.02em;line-height:1.2;font-weight:700}
.bloque p{margin-top:10px;color:#424245;font-size:17px}
.bloque .n{display:block;font-weight:700;color:var(--azul);font-size:15px;margin-bottom:16px}
@media (max-width:900px){.bloques{grid-template-columns:1fr}}
.contacto-vias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.via{display:block;text-decoration:none;background:var(--blanco);border-radius:20px;padding:22px;box-shadow:inset 0 0 0 1px var(--linea-cl)}
.via small{display:block;color:var(--tenue-cl);font-size:14px}
.via b{display:block;font-size:19px;margin-top:4px;overflow-wrap:anywhere}
@media (max-width:560px){.contacto-vias{grid-template-columns:1fr}}

/* ── legales ── */
.legal{padding:clamp(56px,8vw,110px) 0 clamp(80px,10vw,140px)}
.legal .env{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.legal h1{grid-column:1/-1;font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(44px,7vw,96px)}
.legal .resumen{grid-column:1/-1;background:var(--nube);border-radius:20px;padding:clamp(20px,3vw,30px);max-width:80ch}
.legal .resumen h2{font-size:14px;font-weight:600;color:var(--azul);margin-bottom:8px}
.legal .resumen ul{padding-left:1.1em;display:grid;gap:6px;font-size:17px}
.legal nav{position:sticky;top:calc(var(--cab) + 24px);font-size:15px}
.legal nav ol{list-style:none;border-top:2px solid var(--tinta)}
.legal nav li a{display:flex;align-items:center;min-height:40px;padding:6px 0;border-bottom:1px solid var(--linea-cl);text-decoration:none;color:var(--tenue-cl)}
.legal nav li a:hover{color:var(--azul)}
.legal nav .otras{margin-top:22px;font-size:13px;font-weight:600;color:var(--tinta)}
.texto{max-width:72ch;min-width:0;font-size:17px}
.texto section{margin-bottom:clamp(36px,5vw,52px);scroll-margin-top:calc(var(--cab) + 20px)}
.texto h2{font-size:clamp(25px,2.6vw,32px);letter-spacing:-.025em;line-height:1.15;margin-bottom:14px}
.texto h3{font-size:18px;margin:1.2em 0 .3em}
.texto p,.texto li{color:#2b2b2e}
.texto p+p{margin-top:.8em}
.texto ul,.texto ol{padding-left:1.2em;display:grid;gap:6px;margin-top:.6em}
.texto a{color:var(--azul);overflow-wrap:anywhere}
.texto code{font-size:.9em;background:var(--nube);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.fecha{font-size:14px;color:var(--tenue-cl);margin-bottom:28px}
.tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--linea-cl)}
.tabla th{font-size:13px;font-weight:600;background:var(--nube);color:var(--tinta)}
@media (max-width:900px){.legal .env{grid-template-columns:minmax(0,1fr)}.legal nav{position:static}}
@media (max-width:640px){
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr{border-bottom:2px solid var(--tinta);padding:8px 0}
  .tabla td{border:0;padding:4px 0}
  .tabla td::before{content:attr(data-t);display:block;font-size:12px;font-weight:600;color:var(--azul)}
  .tabla.ficha td::before{display:none}
  .tabla.ficha td:first-child{font-size:12px;font-weight:600;color:var(--azul)}
}

/* ── aviso de cookies ── */
.tck{position:fixed;z-index:2147483000;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:620px;margin-inline:auto;background:rgba(29,29,31,.96);color:#f5f5f7;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:18px 20px;box-shadow:0 24px 60px -16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);font:15px/1.5 var(--f)}
.tck p{margin:0 0 14px}
.tck a{color:#fff}
.tck__bot{display:flex;flex-wrap:wrap;gap:8px}
.tck button{flex:1 1 140px;min-height:44px;border-radius:999px;border:0;font:600 15px/1 var(--f);cursor:pointer;background:rgba(255,255,255,.14);color:#fff}
.tck button.si{background:#fff;color:var(--tinta)}
.tck button:hover{filter:brightness(1.1)}