/* =========================================================
   Alto Preu — sistema de estilos compartido
   Paleta y escalas según investigacion/marketing-web-referencias.md
   (Opción A: azul claro + ámbar disciplinado)
   ========================================================= */

:root{
  /* --- Color --- */
  --tinta:#0f172a;        /* texto principal   17,4:1 sobre blanco */
  --gris:#475467;         /* texto secundario   7,6:1 sobre blanco */
  --gris-tenue:#7a8494;   /* 3,8:1: solo bordes de controles y elementos no textuales, nunca texto */
  --marca-900:#10243e;    /* footer, fondos oscuros puntuales */
  --marca-600:#1e5fa8;    /* azul primario, links  6,4:1 */
  --marca-50:#eef4fb;     /* fondos de sección suave */
  --accion:#f2a541;       /* SOLO botón primario  7,5:1 con #10243e */
  --accion-hover:#e0912b;
  --exito:#067647;
  --borde:#e4e7ec;
  --blanco:#ffffff;

  /* --- Colores decorativos ---
     Solo para variedad visual (chips de módulo, iconos, placeholders de foto).
     Nunca en el botón primario ni en CTA — esa regla se mantiene solo para --accion. */
  --deco-1:#0d9488;  /* teal */
  --deco-1-suave:#e6f6f4;
  --deco-2:#e0577b;  /* frambuesa */
  --deco-2-suave:#fce9ee;
  --deco-3:#7c5cd6;  /* violeta */
  --deco-3-suave:#efe9fb;
  --deco-4:#1e5fa8;  /* el mismo azul de marca, como 4ta variante */
  --deco-4-suave:var(--marca-50);

  /* --- Tipografía --- */
  --titulos:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cuerpo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* --- Escala de espacio (múltiplos de 4) --- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e6:24px; --e8:32px; --e12:48px; --e16:64px; --e24:96px;

  /* --- Forma --- */
  --radio:12px;      /* tarjetas */
  --radio-sm:8px;    /* botones e inputs */
  --sombra:0 1px 2px rgba(16,36,62,.04),0 8px 24px rgba(16,36,62,.06);
  --sombra-alta:0 2px 6px rgba(16,36,62,.06),0 16px 40px rgba(16,36,62,.10);
  --ancho:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}
body{
  margin:0;
  font-family:var(--cuerpo);
  font-size:1rem;
  line-height:1.6;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--marca-600);}

/* Foco visible y consistente para navegación con teclado */
:focus-visible{outline:3px solid var(--marca-600);outline-offset:2px;}
.bloque-oscuro :focus-visible,.pie :focus-visible{outline-color:var(--blanco);}

/* Enlace "saltar al contenido": invisible hasta recibir foco */
.salto{
  position:absolute;left:var(--e4);top:-100px;z-index:100;
  background:var(--marca-900);color:var(--blanco);font-weight:600;
  padding:var(--e3) var(--e4);border-radius:var(--radio-sm);text-decoration:none;
}
.salto:focus{top:var(--e3);}

/* Texto solo para lectores de pantalla */
.solo-lector{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Título h2 con tamaño de h3, para no saltar niveles de encabezado */
.titulo-chico{font-size:1.15rem;line-height:1.3;}

h1,h2,h3,h4{font-family:var(--titulos);color:var(--tinta);margin-top:0;}
h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1.2;font-weight:700;letter-spacing:-.01em;}
h3{font-size:1.15rem;line-height:1.3;font-weight:700;}
p{margin:0 0 var(--e4);}
small{font-size:.875rem;}

.container{max-width:var(--ancho);margin:0 auto;padding:0 var(--e6);}
.centro{text-align:center;}
.bg-suave{background:var(--marca-50);}
.texto-gris{color:var(--gris);}
.medida{max-width:68ch;}

/* Marcador temporal — NO puede sobrevivir al primer deploy público */
.todo{
  display:inline-block;background:#fff4da;color:#8a5f00;
  border:1px dashed #e0a800;border-radius:var(--radio-sm);
  padding:1px var(--e2);font-size:.72rem;font-weight:700;vertical-align:middle;
}

/* ---------- NAVEGACIÓN ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.nav-inner{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--e6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e6);height:68px;
}
.marca{
  display:flex;align-items:center;gap:var(--e3);line-height:1.15;min-width:0;
  text-decoration:none;font-family:var(--titulos);font-weight:800;
  color:var(--tinta);font-size:1.1rem;
}
.nav-links{display:flex;align-items:center;gap:var(--e8);}
.nav-links a{
  text-decoration:none;color:var(--gris);font-weight:500;font-size:.94rem;white-space:nowrap;
  padding:var(--e1) 0;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--marca-600);}
.nav-links a.activo{color:var(--tinta);font-weight:600;border-bottom-color:var(--marca-600);}
.nav-cta{display:flex;align-items:center;gap:var(--e3);}
.nav-links .solo-movil,.nav-links .solo-angosto{display:none;}
.nav-cta{flex-shrink:0;}   /* "Ingresar" dentro del menú, solo en celular */
.nav-toggle{
  display:none;background:none;border:1px solid var(--gris-tenue);border-radius:var(--radio-sm);
  padding:var(--e2) var(--e3);font-size:1.05rem;cursor:pointer;color:var(--tinta);
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;font-family:var(--cuerpo);
  font-weight:600;font-size:.95rem;line-height:1.2;
  padding:var(--e3) var(--e6);border-radius:var(--radio-sm);
  border:1.5px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primario{background:var(--accion);color:var(--marca-900);font-weight:700;}
.btn-primario:hover{background:var(--accion-hover);}
.btn-linea{border-color:var(--borde);color:var(--tinta);background:var(--blanco);}
.btn-linea:hover{border-color:var(--marca-600);color:var(--marca-600);}
.btn-texto{color:var(--marca-600);background:none;padding-left:0;padding-right:0;}
.btn-ancho{width:100%;text-align:center;}

/* ---------- SECCIONES ---------- */
.seccion{padding:var(--e24) 0;}
.seccion-sm{padding:var(--e16) 0;}
.antetitulo{
  color:var(--marca-600);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.76rem;margin:0 0 var(--e3);
}
.encabezado-seccion{max-width:600px;margin:0 auto var(--e12);text-align:center;}
.encabezado-seccion p:not(.antetitulo){color:var(--gris);font-size:1.05rem;margin:0;}
.lead{font-size:1.12rem;color:var(--gris);}

/* ---------- HERO CLARO ---------- */
.hero{background:var(--marca-50);padding:var(--e24) 0;border-bottom:1px solid var(--borde);}
.hero-contenido{max-width:760px;}
.hero h1{margin:0 0 var(--e6);}
.hero .lead{max-width:60ch;margin:0 0 var(--e6);}
.insignia{
  display:inline-flex;align-items:center;gap:var(--e2);
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio-sm);
  padding:var(--e2) var(--e4);font-size:.86rem;color:var(--gris);
  margin-bottom:var(--e8);font-weight:500;
}
.insignia b{color:var(--tinta);font-weight:700;}
.hero-botones{display:flex;gap:var(--e3);flex-wrap:wrap;}

/* ---------- CABECERA DE PÁGINA INTERIOR ---------- */
.cabecera-pagina{background:var(--marca-50);padding:var(--e16) 0;border-bottom:1px solid var(--borde);}
.cabecera-pagina h1{margin:0 0 var(--e4);max-width:22ch;}
.cabecera-pagina p:not(.antetitulo){color:var(--gris);font-size:1.08rem;margin:0;max-width:60ch;}

/* ---------- SELECTOR DE AUDIENCIA ---------- */
.selector-audiencia{
  display:inline-flex;background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radio-sm);padding:var(--e1);gap:var(--e1);margin-bottom:var(--e6);
}
.selector-audiencia button{
  border:none;background:none;cursor:pointer;font-family:var(--cuerpo);
  font-size:.92rem;font-weight:600;color:var(--gris);
  padding:var(--e2) var(--e4);border-radius:6px;
}
.selector-audiencia button.activo{background:var(--marca-900);color:var(--blanco);}
.panel-audiencia[hidden]{display:none;}

/* ---------- GRILLAS ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e8);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e6);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e6);}

/* ---------- MÓDULOS CLICKEABLES ---------- */
.modulo{
  display:block;text-decoration:none;color:inherit;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--radio);padding:var(--e6);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.modulo:hover{border-color:var(--marca-600);box-shadow:var(--sombra);}
.modulo-num{
  font-family:var(--titulos);font-weight:800;color:var(--marca-600);
  font-size:.85rem;letter-spacing:.06em;margin-bottom:var(--e3);
}
.modulo h3{margin:0 0 var(--e2);}
.modulo p{margin:0 0 var(--e3);color:var(--gris);font-size:.94rem;}
.modulo .flecha{color:var(--marca-600);font-weight:600;font-size:.88rem;}

/* ---------- TARJETAS ---------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radio);padding:var(--e8);
}
.tarjeta h3{margin:0 0 var(--e2);}
.tarjeta p{margin:0 0 var(--e3);color:var(--gris);font-size:.95rem;}
.tarjeta p:last-child,.tarjeta ul:last-child{margin-bottom:0;}
.tarjeta ul{margin:0;padding-left:var(--e4);color:var(--gris);font-size:.93rem;}
.tarjeta ul li{margin-bottom:var(--e1);}
.tarjeta.destacada{border:1.5px solid var(--marca-600);position:relative;}
.etiqueta{
  position:absolute;top:-11px;left:var(--e6);
  background:var(--marca-600);color:var(--blanco);
  font-size:.71rem;font-weight:700;padding:2px var(--e2);border-radius:6px;
}

.lista-check{list-style:none;margin:0 0 var(--e4);padding:0;}
.lista-check li{
  display:flex;gap:var(--e3);align-items:flex-start;
  padding:var(--e2) 0;font-size:.95rem;color:var(--gris);
}
.check{color:var(--exito);font-weight:700;flex-shrink:0;}

/* ---------- PASOS ---------- */
.paso{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:var(--e8);}
.paso-num{
  font-family:var(--titulos);font-size:.8rem;font-weight:800;color:var(--marca-600);
  letter-spacing:.08em;display:block;margin-bottom:var(--e3);
}
.paso h3{margin:0 0 var(--e2);}
.paso p{margin:0;color:var(--gris);font-size:.94rem;}

/* ---------- PLANES ---------- */
.plan{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--e8);display:flex;flex-direction:column;
}
.plan.recomendado{border:1.5px solid var(--marca-600);box-shadow:var(--sombra);position:relative;}
.plan h3{margin:0 0 var(--e1);}
.plan .publico{color:var(--gris);font-size:.85rem;margin:0 0 var(--e4);}
.plan .precio{
  font-family:var(--titulos);font-size:2.1rem;font-weight:800;
  color:var(--tinta);margin:0 0 var(--e1);line-height:1.1;
}
.plan .precio small{font-size:.85rem;font-weight:500;color:var(--gris);}
.plan ul{list-style:none;margin:var(--e6) 0;padding:0;flex:1;}
.plan li{display:flex;gap:var(--e2);padding:var(--e2) 0;font-size:.93rem;color:var(--gris);}

/* ---------- BLOQUE OSCURO (uso puntual) ---------- */
.bloque-oscuro{
  background:var(--marca-900);color:#c8d6e8;
  border-radius:var(--radio);padding:var(--e16) var(--e12);
}
.bloque-oscuro h2{color:var(--blanco);margin:0 0 var(--e3);}
.bloque-oscuro p{color:#c8d6e8;}

/* ---------- ACORDEÓN ---------- */
.acordeon{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--blanco);}
.acordeon details{border-bottom:1px solid var(--borde);}
.acordeon details:last-child{border-bottom:none;}
.acordeon summary{
  cursor:pointer;padding:var(--e4) var(--e6);font-weight:600;color:var(--tinta);
  font-family:var(--titulos);font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:var(--e4);align-items:center;
}
.acordeon summary::-webkit-details-marker{display:none;}
.acordeon summary::after{content:"+";color:var(--marca-600);font-size:1.3rem;font-weight:600;}
.acordeon details[open] summary::after{content:"−";}
.acordeon summary:hover{background:var(--marca-50);}
.acordeon .cuerpo{padding:0 var(--e6) var(--e6);color:var(--gris);font-size:.95rem;}
.acordeon .cuerpo > :last-child{margin-bottom:0;}
.acordeon .cuerpo ul{padding-left:var(--e4);}

/* ---------- FORMULARIO ---------- */
.formulario{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:var(--e8);}
.formulario h3{margin:0 0 var(--e1);}
.formulario .sub{color:var(--gris);font-size:.92rem;margin:0 0 var(--e6);}
.campo{margin-bottom:var(--e4);}
.campo label{display:block;font-size:.85rem;font-weight:600;margin-bottom:var(--e2);}
.campo input,.campo select,.campo textarea{
  width:100%;padding:var(--e3);border:1px solid var(--gris-tenue);border-radius:var(--radio-sm);
  font-size:.95rem;font-family:var(--cuerpo);background:var(--blanco);color:var(--tinta);
}
.campo textarea{min-height:96px;resize:vertical;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--marca-600);outline-offset:1px;
}
.canal{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) 0;border-top:1px solid var(--borde);}
.canal:last-child{border-bottom:1px solid var(--borde);}
.canal-ico{
  width:40px;height:40px;border-radius:var(--radio-sm);background:var(--marca-50);
  color:var(--marca-600);display:grid;place-items:center;font-weight:700;flex-shrink:0;font-size:.85rem;
}
.canal-dato{font-size:.94rem;}
.canal-dato strong{display:block;color:var(--tinta);}

/* ---------- PIE ---------- */
.pie{background:var(--marca-900);color:#a9bcd4;padding:var(--e16) 0 var(--e8);font-size:.92rem;}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--e12);margin-bottom:var(--e8);}
.pie h4,.pie .pie-titulo{color:var(--blanco);font-family:var(--titulos);font-size:.95rem;line-height:1.3;margin:0 0 var(--e3);}
.pie .pie-marca{font-family:var(--titulos);font-weight:800;font-size:1.05rem;margin:0 0 var(--e3);}
.pie a{color:#a9bcd4;text-decoration:none;display:block;padding:var(--e1) 0;}
.pie a:hover{color:var(--blanco);}
.pie .marca{color:var(--blanco);margin-bottom:var(--e3);}
.pie-legal{
  border-top:1px solid rgba(255,255,255,.12);padding-top:var(--e4);
  display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;font-size:.85rem;
}

/* ---------- HERO CON FOTO Y FORMAS DECORATIVAS ---------- */
.hero{position:relative;overflow:hidden;}
.hero-forma{
  position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;z-index:0;
}
.hero-forma-1{width:340px;height:340px;background:radial-gradient(circle,var(--deco-3-suave) 0%,transparent 70%);top:-120px;right:-80px;}
.hero-forma-2{width:260px;height:260px;background:radial-gradient(circle,var(--deco-1-suave) 0%,transparent 70%);bottom:-100px;left:-60px;}
.hero-grid-foto{
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e12);align-items:center;
  position:relative;z-index:1;
}

/* Placeholder de foto — reemplazar por la imagen real cuando exista.
   Deliberadamente NO es una foto de stock: es un marcador visual honesto
   con degradado + icono, para no mostrar gente falsa mientras no hay foto real. */
.foto-placeholder{
  position:relative;border-radius:var(--radio);overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(150deg,var(--marca-600) 0%,var(--deco-3) 100%);
  display:flex;align-items:flex-end;box-shadow:var(--sombra-alta);
}
.foto-placeholder.cuadrada{aspect-ratio:1/1;}
.foto-placeholder.ancha{aspect-ratio:16/10;}
.foto-placeholder-icono{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  font-size:2.6rem;opacity:.85;
}
.foto-placeholder-nota{
  position:relative;width:100%;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);
  color:#fff;font-size:.8rem;padding:var(--e3) var(--e4);
}
.foto-placeholder-nota b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:2px;}

/* Captura real de la app (no foto de stock): pantalla de celular recortada desde arriba */
.captura-app{
  margin:0;border-radius:var(--radio);overflow:hidden;background:var(--blanco);
  border:1px solid var(--borde);box-shadow:var(--sombra-alta);
}
.captura-app img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;}
.captura-app figcaption{font-size:.8rem;color:var(--gris);padding:var(--e2) var(--e4);border-top:1px solid var(--borde);}

/* ---------- CHIPS DE COLOR POR MÓDULO ---------- */
.modulo{border-top:3px solid var(--m-color,var(--marca-600));}
.modulo[data-color="1"]{--m-color:var(--deco-1);}
.modulo[data-color="2"]{--m-color:var(--deco-2);}
.modulo[data-color="3"]{--m-color:var(--deco-3);}
.modulo[data-color="4"]{--m-color:var(--deco-4);}   /* --accion queda reservado al botón primario */
.modulo-num{color:var(--tinta);}   /* el color decorativo va en el borde; como texto no llega a 4,5:1 */
.modulo:hover{border-top-color:var(--m-color,var(--marca-600));}

.tarjeta-ico-color{
  width:44px;height:44px;border-radius:var(--radio-sm);
  display:grid;place-items:center;font-weight:800;margin-bottom:var(--e4);font-size:1.05rem;
}
.tarjeta-ico-color[data-color="1"]{background:var(--deco-1-suave);color:var(--deco-1);}
.tarjeta-ico-color[data-color="2"]{background:var(--deco-2-suave);color:var(--deco-2);}
.tarjeta-ico-color[data-color="3"]{background:var(--deco-3-suave);color:var(--deco-3);}
.tarjeta-ico-color[data-color="4"]{background:var(--marca-50);color:var(--marca-600);}
.tarjeta-ico-color svg{width:24px;height:24px;}   /* íconos SVG: contraste gráfico >= 3:1 sobre su fondo suave */

/* ---------- ETIQUETA "PRÓXIMAMENTE" Y AVISOS ---------- */
.proximamente{
  display:inline-block;background:var(--marca-50);color:var(--marca-600);
  border:1px solid var(--marca-600);border-radius:6px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px var(--e2);vertical-align:middle;
}
.lista-pendiente{list-style:none;margin:0;padding:0;}
.lista-pendiente li{padding:var(--e2) 0;border-top:1px solid var(--borde);font-size:.93rem;color:var(--gris);}
.lista-pendiente li:first-child{border-top:none;}
.lista-pendiente strong{color:var(--tinta);}
.aviso{
  background:var(--marca-50);border-left:4px solid var(--marca-600);
  border-radius:var(--radio-sm);padding:var(--e3) var(--e4);
  font-size:.9rem;color:var(--tinta);margin:0 0 var(--e6);
}
.aviso p{margin:0 0 var(--e2);}
.aviso p:last-child{margin:0;}
.aviso[hidden]{display:none;}
.honeypot{display:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  /* Con marca larga y dos botones, los enlaces no caben: bajo 1100 px pasan al menú desplegable */
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;background:var(--blanco);
    border-bottom:1px solid var(--borde);flex-direction:column;align-items:stretch;gap:0;
    padding:var(--e2) var(--e6) var(--e4);box-shadow:var(--sombra);
  }
  .nav-links.abierto{display:flex;}
  .nav-links a{padding:var(--e3) 0;border-bottom:1px solid var(--borde);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-toggle{display:block;}
}
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .hero-grid-foto .captura-app{max-width:340px;margin:0 auto;}
  .pie-grid{grid-template-columns:1fr 1fr;}
  .hero-grid-foto{grid-template-columns:1fr;}
  /* En pantallas angostas la foto va DESPUÉS del texto: el H1 y el CTA mandan en la primera pantalla */
  .hero-grid-foto .foto-placeholder{max-width:340px;margin:0 auto;}
}
@media (max-width:760px){
  .nav-links .solo-movil{display:block;}
  /* En celular queda visible solo "Inscríbete" (más compacto); "Ingresar" pasa al menú */
  .nav-inner{gap:var(--e3);padding:0 var(--e4);}
  .nav-cta{gap:var(--e2);}
  .nav-cta .btn-linea{display:none;}
  .nav-cta .btn-primario{padding:var(--e2) var(--e3);font-size:.88rem;}
  /* La marca se apila en dos líneas ("Alto" / "Preuniversitario") */
  .marca{gap:var(--e2);font-size:.92rem;}
  .marca span{max-width:8em;}
  .nav-toggle{padding:var(--e1) var(--e3);}
  .seccion{padding:var(--e16) 0;}
  .seccion-sm{padding:var(--e12) 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .pie-grid{grid-template-columns:1fr;gap:var(--e6);}
  .bloque-oscuro{padding:var(--e12) var(--e6);}
  /* Primera pantalla móvil: menos aire arriba para que H1 y CTA queden sobre el pliegue a 375 px */
  .hero{padding:var(--e8) 0 var(--e12);}
  .hero h1{font-size:1.85rem;margin-bottom:var(--e4);}
  .hero .lead{font-size:1.02rem;margin-bottom:var(--e4);}
  .hero .insignia{display:block;margin-bottom:var(--e4);}
  .hero-grid-foto{gap:var(--e8);}
  .hero-grid-foto .foto-placeholder{aspect-ratio:16/10;max-width:100%;}
  .hero-grid-foto .captura-app img{aspect-ratio:1/1;}
  .cabecera-pagina{padding:var(--e12) 0;}
}
@media (max-width:360px){
  /* Muy angosto: "Inscríbete" pasa al menú para no pisar la marca */
  .nav-cta .btn-primario{display:none;}
  .nav-links .solo-angosto{display:block;text-align:center;margin-top:var(--e3);border-bottom:none;padding:var(--e3) var(--e4);color:var(--marca-900);font-weight:700;}
  .hero h1{font-size:1.6rem;}
  .hero .insignia{font-size:.8rem;}
}