/* DISEÑO WEB ELEGANTE (2026-10-11) — solo páginas web; la app conserva su tipografía.
   Mismos colores (azul noche + cian). Cambia: titulares en serifa fina con acento cian en cursiva,
   texto ligero, más aire, líneas finas, cristal sutil y botones más sobrios. */

:root{
  --serif:"Twemoji Country Flags","Albert Sans",Figtree,system-ui,sans-serif;
  --sans:"Twemoji Country Flags","Albert Sans",Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hair:rgba(150,205,245,.14);
}

/* Titulares: serifa fina, tamaño grande, tracking cerrado */
h1,h2,h3,.cardtitle,.tracker-title,.phone-title,.chat-head b,.hero-stats b,.step-num{
  font-family:var(--serif);font-weight:600;letter-spacing:-.03em;
}
h1{font-weight:600;letter-spacing:-.048em;line-height:1.04;font-size:clamp(44px,5.4vw,78px)}
h1 em,h2 em{font-weight:600;font-style:normal;letter-spacing:-.048em;padding-right:.04em;
  background-image:linear-gradient(100deg,#9fe4fa 0%,#00aadd 100%);background-size:100% auto;animation:none;
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:600;letter-spacing:-.045em}
.card h3,.cardtitle{font-weight:600}
.hero-stats b{font-weight:600}
.faq-group h2{font-weight:600}
.chat-head b{font-weight:600}

/* Texto: ligero y respirado */
body{font-family:var(--sans);font-weight:400;letter-spacing:.005em}
.lead{font-weight:300;line-height:1.85;color:#a9c4de}
p,li{font-weight:400}
b,strong{font-weight:500}

/* Etiquetas y navegación: pequeñas, en mayúsculas, con tracking */
.eyebrow{font-weight:500;font-size:12px;letter-spacing:.3em}
.navlinks{font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;gap:30px}
.navlinks a,.auth-actions a,.auth-actions button{white-space:nowrap}
.navlinks a{color:#a9c4de}.navlinks a:hover{color:#fff}
@media(max-width:1280px){.navlinks{letter-spacing:.07em;gap:22px}}
@media(max-width:1260px){.navlinks{letter-spacing:.03em;gap:14px;font-size:11.5px}.nav{gap:16px}}
.hero-stats small,.quote-field span:first-child,.label-up{letter-spacing:.14em}

/* Botones: píldora sobria */
.btn{font-weight:500;letter-spacing:.04em;font-size:14px;padding:16px 32px}
.btn.gold{box-shadow:0 8px 28px rgba(0,170,221,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{border-color:rgba(150,205,245,.28);background:rgba(255,255,255,.02)}
.auth-actions a,.auth-actions button{font-weight:500;font-size:13px;letter-spacing:.04em}
/* «Iniciar sesión» con el mismo contorno de píldora que «Crear cuenta» (este va resaltado en cian) */
.auth-actions .login{border:1px solid rgba(150,205,245,.32)}
.auth-actions .login:hover{border-color:rgba(150,205,245,.6);background:rgba(255,255,255,.04)}

/* Cristal y líneas finas */
.quote-card{border:1px solid var(--hair);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 50px 110px rgba(0,8,30,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.hair{background:linear-gradient(90deg,transparent,rgba(0,170,221,.45),transparent)}
section{padding-top:92px;padding-bottom:92px}
/* Orden: titulares de sección en una línea (o equilibrados), ritmo vertical más compacto */
.section-head{max-width:880px;margin-bottom:48px}
section h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12;margin:14px 0 12px;text-wrap:balance}
h1{text-wrap:balance}
.section-head p,.lead{max-width:62ch}
header{border-bottom:1px solid rgba(150,205,245,.09)}
.card,.step,.faq details,.tracker{border-color:var(--hair)}

/* Iconos de las tarjetas: pieza de cristal con degradado cian, aro fino y luz (antes, un cuadrado oscuro plano) */
.icon-wrap{position:relative;width:60px;height:60px;border-radius:19px;color:#d4f2ff;border:1px solid rgba(127,216,247,.5);
  background:radial-gradient(120% 120% at 18% 8%,rgba(127,216,247,.42),rgba(0,170,221,.14) 55%,rgba(0,80,140,.22));
  box-shadow:0 10px 22px rgba(0,170,221,.14),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,50,110,.3);
  transition:transform .3s ease}
.icon-wrap:before{content:"";position:absolute;inset:5px 5px auto 5px;height:42%;border-radius:14px 14px 40px 40px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));pointer-events:none}
.icon-wrap .ic{position:relative;width:28px;height:28px;stroke-width:1.7}
.icon-wrap{transition:transform .3s ease !important}
.card:hover .icon-wrap{transform:translateY(-2px)}
/* Ayuda: los iconos de los temas con la misma pieza */
.topic .ic{box-sizing:border-box;flex:none;width:44px;height:44px;padding:10px;border-radius:14px;color:#d4f2ff;border:1px solid rgba(127,216,247,.45);
  background:radial-gradient(120% 120% at 18% 8%,rgba(127,216,247,.4),rgba(0,170,221,.13) 55%,rgba(0,80,140,.22));
  box-shadow:0 6px 16px rgba(0,170,221,.12),inset 0 1px 0 rgba(255,255,255,.2);stroke-width:1.7;transition:transform .3s ease !important}
.topic:hover .ic{transform:scale(1.05)}

/* MÓVIL: más compacto y ordenado (13-oct-2026). Esta hoja se carga después de la de cada página y estaba imponiendo en móvil
   los 92 px de relleno y los tamaños de escritorio; aquí se reducen para que la portada no ocupe 17 pantallas. */
@media(max-width:900px){
  section{padding-top:60px;padding-bottom:60px}
  .section-head{margin-bottom:30px}
}
@media(max-width:520px){
  section{padding-top:42px;padding-bottom:42px}
  .hero{padding:24px 0 40px}
  .hero-grid{gap:26px}
  h1{font-size:38px;line-height:1.07}
  section h2{font-size:26px;margin:10px 0 8px}
  .lead{font-size:16px;line-height:1.6}
  .btn{padding:13px 22px}
  .card{padding:20px}
  .section-head{margin-bottom:22px}
  .icon-wrap{width:48px;height:48px;border-radius:15px}
  .icon-wrap .ic{width:24px;height:24px}
  .trust .container{padding:16px 0;gap:12px 10px}
  .trust div{width:calc(50% - 6px);font-size:12px;gap:8px}
  .trust .ic{width:18px;height:18px}
  /* Los 11 países en 2 columnas compactas (antes, 11 tarjetas grandes una debajo de otra) */
  #countryGrid{grid-template-columns:1fr 1fr!important;gap:10px}
  #countryGrid .country{padding:14px 12px;gap:10px}
  #countryGrid .country .flag{font-size:24px}
  #countryGrid .country b{font-size:14px}
  #countryGrid .country p{font-size:12.5px;line-height:1.3}
}

/* Pie y pequeños detalles */
.foot-bottom em{font-style:italic;font-weight:300;font-size:17px}
::selection{background:rgba(0,170,221,.35)}
/* Franja fina sobre la cabecera de la portada: ConexaGo en preparación (dentro del header, siempre visible en escritorio) */
.build-bar{background:rgba(0,170,221,.10);border-bottom:1px solid rgba(0,170,221,.28);color:#cfe9f8;font-size:13px;text-align:center;padding:7px 16px;line-height:1.4}
.build-bar b{color:#fff;font-weight:600}
.build-bar a{color:#7fd8f7;text-decoration:underline;margin-left:6px;white-space:nowrap}
@media(max-width:520px){.build-bar{font-size:12.5px;padding:7px 14px;text-align:left}.build-bar .bb-long{display:none}}