/* ==========================================================================
   HOME — específico de front-page.php.
   Las tarjetas y componentes reutilizables (.vcard, .s, .libro, .entregables,
   .pr, .rec, .cta, .sec-hd2, .libros, reseñas) viven en components.css
   porque los usa más de una plantilla; aquí solo lo que es exclusivo de la
   home: las rejillas propias (verticales, servicios, proyectos, recursos)
   y el ajuste del hero (más grande que en las demás plantillas).
   ========================================================================== */

.hero {
  padding: 76px 0 84px;
}

.hero-in {
  max-width: 100%;
}

.hero h1 {
  /* -10% (2026-08-18): antes clamp(36px, 4.6vw, 58px) */
  font-size: clamp(32.5px, 4.14vw, 52px);
}

.logos-in {
  margin-top: 34px;
}

/* El naranja pleno aquí es intencional (a diferencia del resto de
   plantillas, que usan el tono texto var(--acento-texto) para el em de
   .sec-hd) — así lo trae la maqueta de home específicamente. */
.sec-hd h2 em {
  color: var(--acento);
}

.cta p {
  margin-top: 14px;
  font-size: 18px;
  max-width: 48ch;
}

/* ---------- Dos verticales ---------- */
.verticales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ---------- Servicios editoriales ---------- */
.srv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---------- Proyectos de contenidos en curso ---------- */
.proy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---------- Recursos gratuitos ---------- */
.recursos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

@media (max-width: 1000px) {
  .verticales { grid-template-columns: 1fr; }
  .srv { grid-template-columns: 1fr 1fr; }
  .proy { grid-template-columns: 1fr 1fr; }
  .recursos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .sec { padding: 64px 0; }
  .hero { padding: 60px 0 56px; }
  .srv, .recursos { grid-template-columns: 1fr; }
  .proy { grid-template-columns: 1fr; }
  .vcard { padding: 30px 24px; }
  .cta { padding: 32px 26px; }
}

/* El titular del hero va SIEMPRE en dos líneas, con la parte en cursiva en la
   segunda: es como está diseñado, no como caiga el plegado según el ancho de
   la ventana. Decisión de Nicolás (23-08-2026). Solo en la portada: en los
   pilares y las guías el <em> del H1 sigue fluyendo con el texto. */
body.home .hero h1 em {
  display: block;
}