/* ============================================================ pages/home.css — Fundación 20 de Enero · Corazón Sabanero Estilos exclusivos de la home (rediseño 2026). Requiere: tokens.css, layout.css, components.css, animations.css ============================================================ */ /* ════════════════════════════════════════ 01 · HERO CON VIDEO (.hero, .hero__content, .hero__title, .hero__lead ya reciben su base crítica inline en ; aquí va todo lo que no es crítico para el primer pintado: capa de video, overlay, estados, scroll cue) ════════════════════════════════════════ */ .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Capa de oscurecimiento: garantiza contraste AA para el texto y los botones sin importar el fotograma real del video que suba el cliente */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(42,24,16,0.55) 0%, rgba(42,24,16,0.30) 45%, rgba(42,24,16,0.75) 100%); pointer-events: none; } .hero__title em { font-style: italic; color: var(--color-dorado-claro); } .hero__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ── Scroll cue: affordance funcional hacia el bloque de descubrimiento, no decoración — resuelve el hallazgo de 0 enlaces internos desde el primer viewport ── */ .hero__scroll-cue { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(250,246,238,0.85); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: color var(--transition-fast), transform var(--transition-fast); } .hero__scroll-cue:hover, .hero__scroll-cue:focus-visible { color: var(--c-text-inverse); transform: translateX(-50%) translateY(2px); } @media (max-width: 680px) { .hero__scroll-cue { display: none; } /* prioriza espacio de contenido en móvil */ } /* ════════════════════════════════════════ 02 · TARJETAS DE DESCUBRIMIENTO (usa .grid.grid--4 de layout.css para la retícula responsive) ════════════════════════════════════════ */ .discover-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--color-blanco); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-soft); border: 1px solid var(--c-border-card); text-decoration: none; color: inherit; } .discover-card__icon { width: 56px; height: 56px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .discover-card--musica .discover-card__icon { background: rgba(122,20,36,0.10); color: var(--c-brand-primary); } .discover-card--sabores .discover-card__icon { background: rgba(200,148,31,0.14); color: var(--color-dorado); } .discover-card--tradiciones .discover-card__icon { background: rgba(31,77,44,0.12); color: var(--c-brand-secondary); } .discover-card--corazon .discover-card__icon { background: rgba(42,24,16,0.10); color: var(--c-text-primary); } .discover-card__title { font-size: 1.15rem; margin: 0; } .discover-card__text { color: var(--c-text-secondary); font-size: 0.95rem; margin: 0; } .discover-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--c-brand-primary); } .discover-card__cta svg { transition: transform var(--transition-fast); } .discover-card:hover .discover-card__cta svg, .discover-card:focus-visible .discover-card__cta svg { transform: translateX(3px); } /* ════════════════════════════════════════ 03 · PROYECTO BANDERA — FESTIVAL ════════════════════════════════════════ */ .festival-band { text-align: center; max-width: 760px; margin: 0 auto; } /* h2 hereda line-height:1.1 de typography.css, pensado para títulos de una línea. Estos dos títulos son intencionalmente más largos y suelen envolver a 2-3 líneas, así que se sueltan un poco para que se lean bien. */ .festival-band__title { margin-bottom: var(--space-4); line-height: 1.25; } .festival-band__title span { color: var(--c-brand-primary); } .festival-band__meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--c-brand-primary); margin: 0 0 var(--space-4); } .festival-band__lead { font-size: var(--text-lg); margin: 0 auto var(--space-6); max-width: 520px; } .festival-band__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* .tag-pill / .tag-pill-list: componentes compartidos, viven en components.css desde que aliados.html también los usa. */ /* ════════════════════════════════════════ 04 · IDENTIDAD ════════════════════════════════════════ */ .identity-block__inner { max-width: 680px; margin: 0 auto; text-align: center; } .identity-block__inner h2 { margin-bottom: var(--space-5); line-height: 1.25; } .identity-block__inner p { margin: 0 auto var(--space-8); font-size: 1.05rem; } /* ════════════════════════════════════════ 05 · SELECTOR DE DEPARTAMENTOS ════════════════════════════════════════ */ .dept-tabs { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-8); } .dept-tab { min-width: 150px; min-height: 56px; padding: 14px var(--space-6); border-radius: var(--radius-lg); border: 2px solid var(--c-border); background: var(--color-blanco); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--c-text-primary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .dept-tab:hover { transform: translateY(-2px); } .dept-tab[aria-selected="true"] { background: var(--c-brand-primary); border-color: var(--c-brand-primary); color: var(--c-text-inverse); } .dept-panel { background: var(--color-blanco); border-radius: var(--radius); padding: var(--space-8); box-shadow: var(--shadow-soft); } .dept-panel__title { margin-bottom: var(--space-6); } .dept-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-6); } .dept-panel__col p { margin: var(--space-2) 0 0; font-size: 0.95rem; } .dept-panel__label { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-brand-accent); } .dept-panel__municipios { padding-top: var(--space-5); border-top: 1px solid var(--c-border); } .dept-panel__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; padding: 0; margin: var(--space-3) 0 0; } .dept-panel__tags li { padding: 5px 14px; border-radius: var(--radius-full); background: var(--c-surface-alt); color: var(--c-text-secondary); font-size: 0.82rem; font-weight: 600; } /* ════════════════════════════════════════ 06 · CURIOSIDAD — TICKER ROTATIVO ════════════════════════════════════════ */ .curiosity__stage { max-width: 720px; margin: var(--space-10) auto 0; /* Altura reservada en rem (no em: no depende del font-size heredado) para cubrir la frase más larga en el ancho más angosto sin saltar entre rotaciones */ min-height: 21rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-10) var(--space-8); border-radius: var(--radius-lg); background: var(--c-surface-alt); box-shadow: var(--shadow-soft); } .curiosity__icon { width: 56px; height: 56px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: rgba(200,148,31,0.14); color: var(--color-dorado); flex-shrink: 0; } .curiosity__text { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.45; color: var(--c-text-primary); text-align: center; max-width: 34ch; margin: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .curiosity__text.is-swapping { opacity: 0; transform: translateY(6px); } /* ── Indicador de rotación: deja explícito que las frases cambian solas ── */ .curiosity__dots { display: flex; gap: 10px; } .curiosity__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: rgba(122,20,36,0.25); transition: background var(--transition-fast), transform var(--transition-fast); } .curiosity__dot.is-active { background: var(--c-brand-primary); transform: scale(1.35); } /* ════════════════════════════════════════ 07 · HISTORIAS QUE LATEN ════════════════════════════════════════ */ .story-card { display: flex; flex-direction: column; background: var(--color-blanco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; } .story-card__media { aspect-ratio: 4 / 3; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-surface-alt); color: var(--c-brand-primary); } .story-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; } .story-card__body h3 { font-size: 1.1rem; margin: 0; } .story-card__body p { margin: 0; font-size: 0.92rem; color: var(--c-text-secondary); /* Recorte a 3 líneas para mantener tarjetas parejas */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .story-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--c-brand-primary); } .story-card__link svg { transition: transform var(--transition-fast); } .story-card:hover .story-card__link svg, .story-card:focus-visible .story-card__link svg { transform: translateX(3px); } /* Cierre emocional (.closing-block): componente compartido, vive en components.css desde que aliados.html también lo usa. */ /* ════════════════════════════════════════ RESPONSIVE — sigue los breakpoints ya establecidos por el sistema (900 / 680 / 390 / 320). No se introducen nuevos puntos de corte. ════════════════════════════════════════ */ /* 900px — tablet */ @media (max-width: 900px) { .dept-panel__grid { grid-template-columns: 1fr 1fr; } } /* 680px — móvil */ @media (max-width: 680px) { .hero__content { padding: 0 var(--container-px-sm); } .hero__actions .btn { width: 100%; justify-content: center; } .festival-band__actions, .identity-block__inner .btn { width: 100%; } .festival-band__actions { flex-direction: column; align-items: stretch; } .festival-band__actions .btn { width: 100%; justify-content: center; } .identity-block__inner .btn { display: block; } .dept-tabs { flex-direction: column; } .dept-tab { width: 100%; } .dept-panel { padding: var(--space-5); } .dept-panel__grid { grid-template-columns: 1fr; gap: var(--space-5); } .curiosity__stage { padding: var(--space-8) var(--space-5); margin-top: var(--space-8); } .curiosity__text { max-width: none; } .story-card__body p { -webkit-line-clamp: 4; } } /* 390px — teléfonos compactos */ @media (max-width: 390px) { .discover-card { padding: var(--space-5); } .dept-tab { min-width: 0; font-size: 1rem; padding: 12px var(--space-4); } }