/* Páginas de aterrizaje (/videoclip-con-ia, /corridos-con-ia…): reusan el hero de la portada v3 (portada-v3.css) con
   la caja de la idea y el abanico de tomas, y agregan pasos, bloques cortos, preguntas frecuentes y enlaces entre ellas.
   Va después de estilo.css y portada-v3.css. */

/* Hero: la idea viene escrita; la caja crece para que se lea completa. */
.hero-at .compositor textarea { min-height: 96px; }
.hero-at .hero-titulo .texto-oro { font-size: 1.2em; }

/* Abanico de tomas: aquí las cartas no abren visor; al pasar el mouse se endereza la carta. */
.abanico-at .carta { margin: 0; cursor: default; }
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
	.abanico-at .carta:hover {
		--r: 0deg; --s: 1.12; --y: -8px; z-index: 5; border-color: var(--ambar-2);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 34px 80px rgba(0, 0, 0, .7), 0 0 44px rgb(var(--acento-rgb) / .45);
	}
}

/* Pasos */
.pasos-at { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pasos-at li {
	display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: 10px;
	background: linear-gradient(180deg, #17141b, #100e13); border: 1px solid rgb(var(--acento-rgb) / .22);
}
.pasos-at h3 { margin: 2px 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.pasos-at p { margin: 0; color: var(--suave); font-size: .92rem; line-height: 1.5; }
@media (max-width: 1100px) { .pasos-at { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos-at { grid-template-columns: minmax(0, 1fr); } }

/* Bloques cortos */
.bloques-at { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bloque-at { padding: clamp(18px, 2.4vw, 26px); border-radius: 10px; background: var(--panel); border: 1px solid var(--borde-suave); min-width: 0; }
.bloque-at h2 { margin: 0 0 10px; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.15; }
.bloque-at p { margin: 0 0 10px; color: var(--suave); }
.bloque-at p:last-child { margin-bottom: 0; }
.bloque-at ul { margin: 0 0 10px; padding-left: 1.2em; color: var(--suave); display: grid; gap: 6px; }
.bloque-at ul:last-child { margin-bottom: 0; }
.bloque-at .hoja-letra { position: static; z-index: auto; margin: 4px 0 12px; padding: 16px 18px; border-radius: 10px; border: 1px solid rgb(var(--acento-rgb) / .2); }
.bloque-at:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .bloques-at { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas frecuentes */
.preguntas { display: grid; gap: 10px; max-width: 920px; }
.pregunta { border-radius: 10px; background: var(--panel); border: 1px solid var(--borde-suave); }
.pregunta[open] { border-color: rgb(var(--acento-rgb) / .35); }
.pregunta summary {
	display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px;
	cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; color: var(--ambar); font-size: 1.4rem; font-weight: 600; line-height: 1; }
.pregunta[open] summary::after { content: "−"; }
.pregunta summary:hover { color: var(--ambar-2); }
.pregunta p { margin: 0; padding: 0 18px 18px; color: var(--suave); max-width: 760px; }

/* Enlaces a las otras páginas */
.relacionadas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.relacionadas a {
	display: block; height: 100%; padding: 14px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--borde-suave);
	color: var(--texto); text-decoration: none; font-weight: 700;
}
.relacionadas a small { display: block; margin-top: 2px; color: var(--suave); font-weight: 500; font-size: .85rem; }
.relacionadas a:hover { border-color: var(--ambar); }

/* Secciones más juntas que en la portada: son textos cortos. */
.hero-at ~ .seccion { padding: clamp(36px, 5vw, 64px) 0; }
.hero-at ~ .seccion + .seccion { padding-top: 0; }