@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/manrope-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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/manrope-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}
/* Sitio público de Geotype: página de entrada, beneficios, precios y acceso.
   Lenguaje visual: vacío negro, tipografía enorme y ligera, sin tarjetas ni bordes, un solo botón de acción y constelaciones de triángulos.
   Colores: los de la identidad de Geotype (azul de ubicación y verde de variedad, versión oscura). */
:root{
  --void:#000; --ink:#fff; --ash:#9a9a9a; --mist:#bdbdbd; --faint:#2b2b2b;
  --blue:#74A8D0; --green:#9BD46E; --spark:#ffb829;
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --max:1280px; --ease-out:cubic-bezier(.23,1,.32,1); --r:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--font);font-weight:300;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,canvas{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,48px)}

/* navegación */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav .brand img{width:34px;height:34px}
.wordmark{font-weight:800;font-size:24px;letter-spacing:-.02em}
.wordmark .g{color:var(--blue)}.wordmark .t{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.025em}
.nav-links a{color:var(--ash);text-decoration:none;transition:color .15s}
.nav-links a[aria-current=page]{color:var(--ink)}
.lang{background:none;border:0;color:var(--ash);font:inherit;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.025em;padding:6px 2px}

@media(max-width:820px){.nav{padding:16px 0}.nav-links{order:3;width:100%;justify-content:space-between;gap:8px}}

/* botón principal: la única píldora rellena */
.pill{display:inline-block;background:var(--blue);color:#04121f;border:0;border-radius:24px;padding:14px 22px;font:600 14px/1.1 var(--font);text-transform:uppercase;letter-spacing:.025em;text-decoration:none;cursor:pointer;transition:filter 160ms ease,transform 160ms var(--ease-out)}
.pill:active{transform:scale(.97)}
.ghost{color:var(--ash);text-decoration:none;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.025em;transition:color .15s}

.row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* tipografía */
.label{display:block;color:var(--green);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.display{font-weight:400;font-size:clamp(50px,8.6vw,113px);line-height:1.04;letter-spacing:-.04em;margin:0}
.h1{font-weight:400;font-size:clamp(44px,6.6vw,84px);line-height:1.05;letter-spacing:-.04em;margin:0}
.h2{font-weight:400;font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px}
.h3{font-weight:400;font-size:27px;line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
.lead,.body{color:var(--mist);font-weight:200;font-size:19px;line-height:1.55;max-width:540px;margin:0 0 18px}
.lead{color:var(--ink)}
.small{color:var(--ash);font-size:14px;font-weight:300}

/* composición de dos columnas */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,4vw,60px);min-height:min(82vh,820px);padding-top:30px;padding-bottom:60px}
.hero .field{aspect-ratio:1/1;width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,6vw,100px);padding:clamp(60px,9vw,120px) 0}
.split.flip .copy{order:2}
.split .field{aspect-ratio:5/4;width:100%}
@media(max-width:900px){.hero,.split{grid-template-columns:1fr;min-height:0}.split.flip .copy{order:0}.hero .field{max-width:520px;margin:0 auto}}
.field{position:relative}
.field canvas{width:100%;height:100%}

/* bloques de texto sin cajas */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(30px,5vw,70px);padding:20px 0 clamp(60px,8vw,110px)}
.cols .body{max-width:none}
.audience{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--faint)}
.audience ul{list-style:none;margin:0;padding:0}
.audience li{color:var(--mist);font-weight:200;font-size:19px;padding:12px 0;max-width:640px}
.audience li b{color:var(--ink);font-weight:400}
.band{padding:clamp(70px,10vw,140px) 0;text-align:left}
.foot{border-top:1px solid var(--faint);padding:34px 0 60px;color:var(--ash);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{color:var(--ash);text-decoration:none}

/* precios */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(30px,5vw,64px);padding:30px 0 40px}
.plan{padding-top:22px;border-top:1px solid var(--faint)}
.plan .price{font-size:clamp(44px,5vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1;margin:14px 0 4px}
.plan .price small{font-size:16px;font-weight:300;color:var(--ash);letter-spacing:0}
.plan ul{list-style:none;margin:20px 0 26px;padding:0}
.plan li{color:var(--mist);font-weight:200;font-size:17px;padding:7px 0 7px 22px;position:relative}
.plan li::before{content:'';position:absolute;left:0;top:15px;width:9px;height:9px;border:1px solid var(--green);clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--green)}
.plan.hot .label{color:var(--spark)}
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px 60px;padding:30px 0 90px}

/* acceso */
.login{min-height:calc(100vh - 140px);display:grid;place-items:center;padding-top:20px;padding-bottom:60px}
.login form{width:min(420px,100%)}
.login label{display:block;color:var(--ash);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:26px 0 4px}
.login input{width:100%;background:transparent;border:0;border-bottom:1px solid #444;color:var(--ink);font:300 20px var(--font);padding:10px 0;border-radius:0;outline:none;transition:border-color .15s}
.login input:focus{border-bottom-color:var(--blue)}
.login .actions{margin-top:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.login .note{color:var(--ash);font-size:14px;margin-top:26px;max-width:420px}

/* accesibilidad */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nav-links a.pill,.nav-links a.pill:hover{color:#04121f}

/* páginas legales */
html[lang=es] .en,html[lang=en] .es{display:none!important}
.legal{max-width:820px;padding-bottom:70px}
.legal h1{margin:6px 0 8px}
.legal h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:34px 0 8px}
.legal p,.legal li{color:var(--mist);font-weight:300;font-size:17px;line-height:1.65}
.legal li{margin:6px 0}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--blue)}
.draft{border:1px solid #4a3b00;background:#1a1400;color:var(--spark);border-radius:12px;padding:12px 16px;font-size:14px;margin:6px 0 24px}
.ph{background:#2a2200;color:var(--spark);border-radius:4px;padding:0 5px}

/* ===== Detalle de interacción (revisión con la skill de Emil Kowalski, 2026-10-09) ===== */
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover,.lang:hover,.ghost:hover,.foot a:hover{color:var(--ink)}
  .pill:hover{filter:brightness(1.12)}
}
/* entrada escalonada del encabezado de la portada (es una pantalla que se ve pocas veces) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero>div:first-child>*{opacity:0;animation:rise 480ms var(--ease-out) forwards}
.hero>div:first-child>*:nth-child(2){animation-delay:60ms}
.hero>div:first-child>*:nth-child(3){animation-delay:120ms}
.hero>div:first-child>*:nth-child(4){animation-delay:180ms}
@media (prefers-reduced-motion:reduce){.hero>div:first-child>*{animation:none;opacity:1}.pill,.pill:active{transition:none;transform:none}}