/* Home: hero con dos acciones, parrilla de historias y bloque de encuesta. Se carga tras landing.css. */

.hero--home h1 { max-width: 16ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.btn--outline-light { background: transparent; color: var(--color-white); border-color: rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }
.hero--home .frame--photo { height: 440px; }
@media (max-width: 40rem) { .hero--home .frame--photo { height: 300px; } }

/* ---------- Historias ---------- */
.stories__head { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-7); }
.stories__head h2 { margin: 0; }
.stories__head .lead { margin: 0; max-width: 46ch; }

.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }
.story { background: var(--color-white); border: 1px solid var(--line); border-top: 0; padding-top: 6px; position: relative; border-radius: var(--radius); overflow: hidden; display: flex; }
.story__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--c); z-index: 2; }
.story__link { display: flex; flex-direction: column; width: 100%; color: var(--color-navy); text-decoration: none; }
.story__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--c) 20%, var(--color-cream)); position: relative; }
.story__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.story__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 6.5rem; line-height: 1; color: var(--c); }
.story__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-3); flex: 1; }
.story__kicker { font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-muted); }
.story__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; }
.story__blurb { color: var(--fg-muted); font-size: var(--fs-small); }
.story__more, .story__chip { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-5) var(--space-5); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; }
.story__more svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; transition: transform .25s; }
.story__chip { align-self: flex-start; padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--fg-muted); }
a.story__link:hover .story__more svg { transform: translateX(5px); }
a.story__link:hover .story__media img { transform: scale(1.04); }
a.story__link:hover .story__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--c); }
.story--soon { background: transparent; border-style: dashed; border-top: 0; }
.story--soon .story__link { opacity: .72; cursor: default; }

/* ---------- Encuesta ---------- */
.feedback { padding-block: var(--space-8); }
.feedback__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.feedback h2 { margin: 0 0 var(--space-3); }
.feedback .lead { margin: 0; }
.feedback .btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.story__media--dark { background: var(--bg-dark); }
.story__media--dark img { object-fit: contain; padding: 14%; }