/*
 * CSS del sistema modular de secciones (rediseño Fase 3+).
 *
 * Contiene los estilos mínimos NUEVOS que introducen los templates portados,
 * complementarios al style.css existente. Se carga desde el layout público
 * de landing (appData/view/template/layout.html.twig).
 *
 * Convención — dónde va cada regla:
 *   - EN ESTE FICHERO: clases NUEVAS que introducen los templates modulares
 *     (ej. .hero--split, .hero-split-grid, o cualquier variante nueva que
 *     no exista en el CSS legacy). También overrides puntuales de clases
 *     legacy que necesita un template concreto (ej. .hero-split-content
 *     .slide-title { color: dark }).
 *   - EN style.css: las clases originales del legacy (.slide-*, .hero-*,
 *     .about-grid, .process-*, .why-*, .who-*, .faq-*, .gallery-*,
 *     .contact-*, etc.) — no se duplican aquí ni se editan salvo por bug.
 *
 * Cómo extender: cuando se cree una variante nueva de un tipo o un template
 * necesite CSS específico que no existe en el legacy, se añade en la sección
 * correspondiente de este fichero (agrupar por tipo con un banner de comment).
 * Ver los bloques HERO como referencia. No hace falta tocar el layout ni
 * declarar nada nuevo — el fichero ya se carga siempre.
 */

/* ============================================================================
   HERO — variante 'split' (imagen a un lado + contenido al otro)
   ============================================================================ */

/* Cancela el height:100vh / min-height:600px que #hero-sec (default)
   fuerza en style.css — split se adapta a su contenido. Usamos el ID
   #hero-sec en el selector para igualar especificidad y ganar. */
#hero-sec.hero--split {
    height: auto;
    min-height: 0;
    padding: 80px 20px;
    background: var(--white);
}
.hero--split .container {
    max-width: 1200px;
    margin: 0 auto;
}
.hero-split-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}
.hero--ratio-50-50 .hero-split-grid { grid-template-columns: 1fr 1fr; }
.hero--ratio-60-40 .hero-split-grid { grid-template-columns: 3fr 2fr; }
.hero--ratio-40-60 .hero-split-grid { grid-template-columns: 2fr 3fr; }

.hero-split-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Sobre fondo claro los textos legacy (.slide-title, .slide-text) —
   pensados para el overlay oscuro del hero default — son ilegibles.
   Aquí los reasignamos a colores oscuros. */
.hero-split-content .slide-title {
    margin-top: 0;
    color: var(--dark);
}
.hero-split-content .slide-text {
    color: var(--gray);
}
/* Botón outline: el legacy lo pinta blanco sobre transparente (para
   overlay oscuro). En split lo cambiamos a oscuro. */
.hero-split-content .btn-outline {
    color: var(--dark);
    border-color: rgba(15, 23, 42, .35);
}
.hero-split-content .btn-outline:hover {
    background: rgba(15, 23, 42, .06);
    border-color: var(--dark);
}

@media (max-width: 768px) {
    .hero-split-grid { grid-template-columns: 1fr !important; }
    #hero-sec.hero--split { padding: 48px 20px; }
}

/* ============================================================================
   HERO — variante 'con-video' (misma base que default, ajustes menores)
   ============================================================================ */

.hero--video .video-play-btn {
    /* El botón de play se pinta en línea con el resto de botones dentro de
       .slide-actions, no en overlay como en el video-sec normal. */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ============================================================================
   Espacio reservado para nuevas variantes que se añadan en futuras iteraciones.
   Convención: agrupar por tipo de sección (HERO, ABOUT, PROCESS, etc.) y
   comentar qué variante estilizan las reglas.
   ============================================================================ */