/* Tipo «descarga»: se carga después de assets/styles.css (núcleo).
   Diseño: _ds/ui_kits/landing/GuideScreen.jsx */

/* Portada: textos a la izquierda, tarjeta blanca con el formulario a la derecha */
.guia-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* Opción: columnas alineadas arriba (contenido.php → portada.alinear) */
.guia-hero-arriba { align-items: start; }
.guia-intro { gap: 18px; align-items: flex-start; }
.guia-intro .eyebrow { color: var(--bd-orange); }
.guia-intro h1 { font-size: var(--text-display); line-height: 1.12; color: #fff; text-transform: uppercase; }
.guia-subtitulo { font: 700 22px/1.3 var(--font-heading); color: var(--bd-orange); text-wrap: balance; }
.guia-texto { font-size: var(--text-lead); color: rgba(255, 255, 255, .88); }
.guia-intro .arrow-list { font-size: var(--text-lead); }

.guia-card { background: #fff; color: var(--bd-ink); padding: 32px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; }
.guia-portada { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 60%; }
.guia-card-head { gap: 6px; }
.guia-card-head h2 { font-size: var(--text-h4); text-transform: uppercase; color: var(--bd-blue-dark); }
.guia-card-head p { font-size: var(--text-small); color: var(--bd-ink-2); }

/* Para quién es: frase final */
.guia-cierre { text-align: center; font-weight: 600; color: var(--bd-blue-dark); }

@media (max-width: 860px) {
  .guia-hero { grid-template-columns: 1fr; gap: 36px; }
  .guia-card { padding: 24px 20px; }
}

/* /confirmado */
.btn-descarga::after { content: "↓"; }