/* ═══════════════════════════════════════════════════════════════════════════
   inicio.css — La portada de la plataforma
   ═══════════════════════════════════════════════════════════════════════════

   POR QUÉ ESTE ARCHIVO EXISTE APARTE
   Las otras hojas son por tipo de pieza —tokens, base, componentes, espacio de
   la emprendedora, panel—. Esto no es un componente reutilizable: es la
   portada, y va a cambiar más que ninguna otra pantalla porque es la que IELCO
   va a mirar cada vez. Tenerla aparte permite rehacerla sin tocar nada más.

   LOS COLORES NO SE ELIGIERON A OJO
   El verde y el terracota están medidos contra blanco, porque `verify.js` mide
   el contraste en vivo y publica el resultado en la propia página. El naranja
   vivo del diseño daba 4.56:1 —apenas pasaba— y se cambió por uno de 5.92:1.
   Ver `tokens.css`.

   LAS ILUSTRACIONES SON UNA APROXIMACIÓN
   El diseño traía una imagen de una señora con sombrero y tablet, y unas
   ilustraciones dentro de cada tarjeta. Todavía no tenemos esos archivos, así
   que están dibujados en SVG con las formas mínimas que se reconocen: la
   figura, el sombrero, la tablet, las hojas. Ocupan el mismo sitio que
   ocuparán las de verdad, de modo que sustituirlas no mueva la maqueta. */
/* ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════ El héroe ═══════════ */

.heroe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-8) var(--s-8) var(--s-6);
  margin-bottom: var(--s-10);
  background: linear-gradient(160deg, #FFFFFF 0%, #F7FAFF 52%, var(--c-crema) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.heroe__antetitulo {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-brand-700);
  margin: 0 0 var(--s-3);
}

.heroe__titulo {
  /* clamp: en un celular no puede ocupar media pantalla, y en un monitor
     grande tiene que seguir siendo el protagonista. */
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #14315F;
  margin: 0 0 var(--s-4);
  /* El titular se lee de un tirón; partir las palabras lo afea. */
  text-wrap: balance;
}

/* La segunda mitad del titular, en azul: separa lo que la plataforma ES de lo
   que ella consigue con ella. */
.heroe__destacado { color: var(--c-brand-800); }

.heroe .lead { margin-bottom: var(--s-6); }

/* ── El recuadro del escudo ──
   Responde la pregunta que más frena a una emprendedora antes de escribir sus
   datos: «¿dónde queda esto?». Va pegada al titular porque es ahí donde surge. */
.heroe__aviso {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  background: #EEF3FB;
  border-left: 4px solid var(--c-brand-500);
  border-radius: var(--r-md);
  max-width: 52ch;
}

.heroe__aviso strong {
  display: block;
  color: var(--c-brand-900);
  margin-bottom: 2px;
}

.heroe__aviso p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-700);
}

.heroe__escudo {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--c-brand-800);
}

.heroe__ilustracion { display: flex; justify-content: center; }
.heroe__ilustracion svg { width: 100%; max-width: 460px; height: auto; }

/* El texto escrito a mano del diseño. Se resuelve en cursiva porque no tenemos
   tipografía manuscrita y no puedo descargarla: cuando llegue, se cambia solo
   la familia aquí y el resto de la maqueta no se mueve. */
.heroe__manuscrito {
  font-family: var(--font);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  fill: var(--c-terracota-800);
  letter-spacing: -0.01em;
}


/* ═══════════ Títulos de sección ═══════════ */

.sec__titulo {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  color: #14315F;
  margin: 0 0 var(--s-2);
}

.sec__bajada {
  font-size: var(--t-base);
  color: var(--c-ink-500);
  margin: 0 0 var(--s-6);
  max-width: 70ch;
}


/* ═══════════ Las tres tarjetas de módulos ═══════════ */

.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(20, 49, 95, 0.05);
}

.modulo__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.modulo__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
}

/* Un tinte por módulo, del mismo color que su botón: así el conjunto se lee
   como tres caminos distintos y no como tres cajas iguales. */
.modulo__icono--azul      { background: #EEF3FB; color: var(--c-brand-800); }
.modulo__icono--verde     { background: var(--c-ok-100); color: var(--c-ok-700); }
.modulo__icono--terracota { background: var(--c-terracota-100); color: var(--c-terracota-800); }

.modulo__titulo { font-size: var(--t-lg); color: #14315F; margin: 0; }

.modulo__texto {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink-700);
  margin: 0;
}

/* El pie empuja el botón abajo: con textos de distinto largo, los tres botones
   quedan a la misma altura. Sin esto, las tarjetas parecen desalineadas. */
.modulo__pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-3);
}

.modulo__dibujo { width: 96px; height: 72px; }


/* ═══════════ Botones con color ═══════════
   Solo los modificadores: la forma —píldora, mayúsculas, 48px de alto— la pone
   `.btn` en components.css. Aquí solo cambia el color. */

.btn--azul      { background: var(--c-brand-800); color: #FFFFFF; }
.btn--azul:hover      { background: var(--c-brand-700); }

.btn--verde     { background: var(--c-ok-700); color: #FFFFFF; }
.btn--verde:hover     { background: var(--c-ok-900); }

.btn--terracota { background: var(--c-terracota-700); color: #FFFFFF; }
.btn--terracota:hover { background: var(--c-terracota-800); }

/* El de «Abrir verificador» no compite con los tres anteriores: es una acción
   secundaria y por eso va perfilado en vez de relleno. */
.btn--contorno {
  background: transparent;
  color: var(--c-brand-800);
  border-color: var(--c-brand-800);
}
.btn--contorno:hover { background: #EEF3FB; }

.icono-barras { display: inline-flex; }


/* ═══════════ El panel de resultados ═══════════ */

.resultados {
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: #F7FAFF;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

/* ── Los resultados son del equipo ──
   Los llena el verificador, y el verificador ya no arranca para el público. Si
   se dejaran a la vista, un visitante vería cuatro guiones: «— · — · — · —».
   Un marcador vacío es peor que no enseñarlo.

   Cuando hay sesión de equipo, el bloque vuelve y con los números puestos. Así
   IELCO ve la portada completa y el público ve la portada limpia, con la misma
   página y el mismo código. */
.resultados { display: none; }
html.es-equipo .resultados { display: block; }

.resultados__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
}

.resultados__cabeza .sec__bajada { margin-bottom: var(--s-4); }

.resultados .kpi {
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.kpi__icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-sm);
  background: #EEF3FB;
  color: var(--c-brand-700);
}


/* ═══════════ En pantallas estrechas ═══════════ */

@media (max-width: 900px) {
  .heroe {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-6) var(--s-5);
  }

  /* La ilustración pasa debajo del texto. En un celular, la imagen empujaría
     el titular fuera de la pantalla, y lo primero que hay que leer es qué es
     esto y qué gana ella. */
  .heroe__ilustracion { order: 2; }
  .heroe__ilustracion svg { max-width: 320px; }

  .resultados { padding: var(--s-5); }
  .resultados__cabeza { flex-direction: column; gap: var(--s-4); }
}

@media (max-width: 620px) {
  .heroe { padding: var(--s-5) var(--s-4); }
  .modulo__pie { grid-template-columns: minmax(0, 1fr); }
  .modulo__dibujo { display: none; }   /* el botón manda; el dibujo estorba */
}