/* ==========================================================
   hero.css — cabecera de Crece, Conecta y Contrata
   Misma voz tipográfica que la portada y una sola cosa que mirar.

   Antes: titular a la izquierda y una maqueta de la app a la derecha,
   compitiendo por la atención en el primer pantallazo. Quien llega no
   sabe si leer o mirar, y acaba sin hacer ninguna de las dos.

   Ahora: titular centrado, solo. La maqueta baja, con aire, y se ve
   cuando la persona ya sabe de qué le están hablando.
   ========================================================== */

/* --- 1. Una sola columna, centrada --------------------- */
header .hgrid{
  display:block !important;
  text-align:center;
}
header .hgrid > div:first-child{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

/* --- 1bis. Sin parpadeo al entrar ------------------------
   Fraunces llega por red y hasta que carga se pinta Georgia.
   Sin esto, el titular cambia de tamaño delante del usuario en
   cada página. El respaldo se ajusta a las métricas de Fraunces
   para que el salto sea invisible. */
@font-face{
  font-family:"FrauncesRespaldo";
  src:local("Georgia"),local("Times New Roman"),local("serif");
  size-adjust:103%;
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
}

/* --- 2. La tipografía de la portada -------------------- */
header .wrap h1,
header .hero-inner h1,
header h1{
  font-family:"Fraunces","FrauncesRespaldo",Georgia,"Times New Roman",serif !important;
  font-optical-sizing:auto;
  font-weight:700 !important;
  font-size:clamp(2.35rem,5vw,3.7rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.024em !important;
  max-width:18ch;
  margin:0 auto 1.4rem !important;
  text-wrap:balance;
}

/* --- 2bis. El hueco de arriba ---------------------------
   Las tres páginas traían 5,5–8 rem de relleno superior, pensadas
   para cuando el titular era pequeño. Con la barra de piloto y el
   menú encima, quedaba media pantalla vacía antes de leer nada. */
/* La cabecera arranca pegada al menú fijo, y es el propio header quien
   deja el aire necesario para no quedar debajo de él. Un solo sitio que
   tocar en vez de tres rellenos peleándose. */
header{padding-top:7.4rem !important;padding-bottom:3.6rem !important}
/* Las tres cabeceras miden lo mismo, aunque su titular ocupe una línea o dos.
   Sin esto, al saltar de Crece a Conecta el bloque cambiaba de altura y parecía
   otra web. El tope por altura de pantalla evita que en un portátil pequeño
   la cabecera se coma todo antes de ver el prototipo. */
header{min-height:min(820px, 100svh - 120px) !important}
header .hero-inner,
header > .wrap{padding-top:0 !important;padding-bottom:0 !important}

header .kicker{
  margin-bottom:.9rem;
  letter-spacing:.14em;
}

header .lead{
  font-size:clamp(1.05rem,1.5vw,1.24rem) !important;
  line-height:1.6;
  max-width:52ch;
  margin:0 auto 2.4rem !important;
  text-wrap:balance;
}

header .cta-row{
  justify-content:center;
  gap:.9rem;
}
header .micro{
  justify-content:center;
  margin-top:1.3rem;
}

/* --- 3. La maqueta, en su propia sección ----------------
   Ya no vive en la cabecera. El titular se queda solo con su
   subtítulo y sus botones, y la maqueta empieza la sección
   siguiente — con aire suficiente para que el ojo cambie de
   tarea en vez de intentar leer y mirar a la vez. */
.proto-solo{
  padding:5.5rem 0 6rem;
  text-align:center;
}
.proto-solo .proto-k{
  color:var(--coral,#D16E72);
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:.7rem;
}
.proto-solo .proto-l{
  font-size:1.02rem;
  color:var(--muted,#C9B8CC);
  max-width:44ch;
  margin:0 auto 2.8rem;
  text-wrap:balance;
}
.proto-solo .pframe{
  max-width:620px;
  margin:0 auto;
  text-align:left;
}

/* --- Leyenda de la maqueta -------------------------------
   La pantalla sola no se explica. Alguien que llega de fuera
   ve «Encaje 91 %», «Equilibrado» y «350 €» y no sabe qué
   miden ni por qué debería importarle: se queda con que es
   bonito, que es justo lo contrario de lo que necesitamos.

   Esto lee la pantalla por él. Cada bloque arranca con la
   misma etiqueta que acaba de ver arriba —y con el mismo
   color— para que el ojo ate una cosa con la otra sin
   flechas ni instrucciones. */
.proto-lee{
  max-width:900px;margin:2.6rem auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.9rem;
  text-align:left;
}
.proto-lee > div{position:relative;padding-top:1.1rem}
.proto-lee > div::before{
  content:"";position:absolute;top:0;left:0;width:26px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.22);
}
.proto-lee .ll-chip{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.02em;
  border-radius:999px;padding:.2rem .6rem;margin-bottom:.55rem;white-space:nowrap;
}
.proto-lee .ll-chip.g{background:#E7FAF3;color:#0E7A62}
.proto-lee .ll-chip.p{background:#EDE7FA;color:#5B3EC8}
.proto-lee p{
  font-size:.92rem;line-height:1.62;color:var(--muted,#C9B8CC);margin:0;
}
.proto-lee p b{color:var(--fg,#F7F3F8);font-weight:700}

/* El cierre: la frase que quita el miedo a que algo pase solo. */
.proto-cierre{
  max-width:52ch;margin:2.4rem auto 0;
  font-size:.95rem;line-height:1.6;color:var(--muted,#C9B8CC);
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;
}
.proto-cierre b{color:var(--fg,#F7F3F8)}

@media (max-width:900px){
  .proto-lee{grid-template-columns:1fr;gap:1.4rem;max-width:34rem}
  .proto-lee > div{padding-top:.95rem}
}
@media (max-width:760px){
  .proto-solo{padding:3.8rem 0 4.2rem}
  .proto-solo .proto-l{margin-bottom:2rem;max-width:34ch}
  .proto-lee{margin-top:2rem}
  .proto-lee p{font-size:.9rem}
  .proto-cierre{margin-top:2rem;padding-top:1.2rem;font-size:.92rem}
}

/* --- 4. Móvil ------------------------------------------ */
@media (max-width:760px){
  header h1{
    font-size:clamp(2.05rem,8.6vw,2.9rem) !important;
    max-width:16ch;
    margin-bottom:1.2rem !important;
  }
  header .lead{max-width:38ch;margin-bottom:2rem !important}
  header .hgrid > .pframe,
  header .hgrid > div:not(:first-child){margin-top:3.2rem}
  header .cta-row{flex-direction:column;align-items:stretch}
  header .cta-row .btn,header .cta-row .btnh{width:100%;text-align:center;justify-content:center}
}