/*
Theme Name: Municipalidad Digital 2.0 (Modern UI)
Author: Tu Nombre
Description: Diseño Institucional Moderno, elegante y 100% Responsive.
Version: 2.1
*/

/* =========================================
   1. RESET Y VARIABLES MODERNAS
   ========================================= */
:root {
    --primary: #1E3A8A; /* Azul Marino Institucional */
    --secondary: #0EA5E9; /* Celeste vibrante para acentos */
    --accent: #F59E0B; /* Dorado para destacar */
    --bg-light: #F8FAFC; /* Fondo muy suave, casi azulado */
    --texto-oscuro: #1E293B;
    --texto-gris: #64748B;
    --borde: #E2E8F0;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01);
    --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --radius: 12px;
    --fuente: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--texto-oscuro);
    line-height: 1.7;
    background-color: #ffffff;
    overflow-x: hidden;
}

.container {
    max-width: 1200px; /* O el ancho que use gob.pe */
    margin: 0 auto;
    padding: 0 20px; /* Espacio para que el texto no pegue en bordes en móvil */
    width: 100%;
    /* Asegúrate de que NO tenga background-image aquí */
}

/* =========================================
   2. HEADER (Cabecera Principal)
   ========================================= */
.header-gob {
    background: linear-gradient(135deg, var(--primary) 0%, #2b4c99 100%);
    color: white;
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.15);
    position: relative;
    z-index: 10;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-peru {
    height: 35px;
    filter: brightness(0) invert(1);
}

.tagline {
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 2px solid rgba(255,255,255,0.2);
    padding-left: 20px;
    letter-spacing: 0.5px;
}

/* =========================================
   3. NAVEGACIÓN MODERNA Y BUSCADOR
   ========================================= */
.nav-principal {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--borde) !important;
    box-shadow: var(--shadow-sm);
    width: 100% !important;
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ==========================================================================
   MENÚ DESPLEGABLE (SUBMENÚS DE WORDPRESS)
   ========================================================================== */

/* 1. Preparamos al botón padre (Nosotros) para que sostenga al submenú */
.nav-principal li {
    position: relative; /* ¡Clave! Esto ancla el submenú a su padre */
}

/* 2. Escondemos el submenú y le damos formato de caja flotante */
.nav-principal ul.sub-menu {
    position: absolute;
    top: 100%; /* Lo ubica justo debajo del menú principal */
    left: 0;
    background-color: #ffffff;
    min-width: 220px; /* Ancho de la cajita */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    border-radius: 8px; /* Bordes redondeados */
    border: 1px solid #e2e8f0;
    padding: 10px 0;
    
    /* Variables para la animación (invisible por defecto) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* Lo baja un poquito */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 9999; /* Para que flote por encima de TODO tu banner azul */
    
    /* Quitamos el comportamiento de fila (flex-row) que hereda del menú principal */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 3. ¡Magia! Mostrar el submenú al pasar el mouse por "Nosotros" */
.nav-principal li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Sube suavemente a su posición original */
}

/* 4. Estilos para los enlaces de adentro (Organigrama, Directorio) */
.nav-principal ul.sub-menu li {
    width: 100%;
}

.nav-principal ul.sub-menu li a {
    display: block;
    padding: 10px 25px;
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

/* 5. Hover sobre los enlaces del submenú */
.nav-principal ul.sub-menu li a:hover {
    background-color: #f0f9ff; /* Celestesito de fondo */
    color: #0ea5e9; /* Texto azul institucional */
    padding-left: 30px; /* Pequeño empujón a la derecha al hacer hover */
}

.container-nav {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-principal ul, 
.nav-principal #menu-menu-principal {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.nav-principal ul li,
.nav-principal #menu-menu-principal li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.nav-principal ul li a {
    display: block !important;
    padding: 20px 20px !important;
    text-decoration: none !important;
    color: var(--texto-oscuro) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: var(--transicion) !important;
    position: relative;
}

.nav-principal ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--secondary);
    transition: var(--transicion);
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
}

.nav-principal ul li a:hover {
    color: var(--secondary) !important;
    background-color: transparent !important;
}

.nav-principal ul li a:hover::after {
    width: 80%;
}

.search-form-gob {
    display: flex;
    align-items: center;
    margin-left: auto; 
}

.search-form-gob input[type="search"] {
    padding: 10px 20px;
    border: 1px solid var(--borde);
    border-right: none;
    border-radius: 50px 0 0 50px;
    font-size: 13px;
    outline: none;
    width: 220px; 
    background-color: var(--bg-light);
    transition: var(--transicion);
}

.search-form-gob input[type="search"]:focus {
    background-color: #ffffff;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.search-form-gob button {
    background-color: var(--secondary);
    color: #ffffff;
    border: 1px solid var(--secondary);
    padding: 10px 20px;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    transition: var(--transicion);
}

.search-form-gob button:hover {
    background-color: #0284c7;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

/* =========================================
   4. HERO Y SECCIONES
   ========================================= */
.hero {
    width: 100%; /* Importante: Fuerza el ancho completo */
    background-size: cover; /* Estira la imagen para cubrir todo el ancho */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px; /* Ajusta la altura mínima según tu banner */
    color: white;
    padding: 60px 0; /* Espaciado vertical interno */
}

.badge {
    background: rgba(14, 165, 233, 0.1);
    color: var(--secondary);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 3rem;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    color: var(--texto-gris);
    max-width: 700px;
    margin: 0 auto;
}

.seccion-categorias, .seccion-tramites, .seccion-noticias {
    padding: 80px 0;
    background-color: #ffffff;
}

.bg-gris { background-color: var(--bg-light); }

.titulo-seccion {
    font-size: 28px;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 15px;
}

.subtitulo-seccion {
    font-size: 16px;
    color: var(--texto-gris);
    margin-bottom: 30px;
}

.text-center { text-align: center; }
.mt-30 { margin-top: 30px; }

/* =========================================
   5. SECCIÓN CATEGORÍAS (Actualizado)
   ========================================= */
.lista-categorias ul {
    list-style: none !important;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.lista-categorias li {
    padding: 0;
}

.lista-categorias li::before {
    display: none; /* Quitamos las viñetas negras cuadradas antiguas */
}

/* Diseño tipo "Píldora" para las categorías */
.lista-categorias a {
    display: block;
    background: #ffffff;
    color: var(--primary);
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--borde);
    box-shadow: var(--shadow-sm);
    transition: var(--transicion);
}

.lista-categorias a:hover {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

/* Botón "Ver todas" */
.btn-outline-azul {
    display: inline-block;
    padding: 12px 35px;
    color: var(--secondary);
    border: 2px solid var(--secondary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: var(--transicion);
}

.btn-outline-azul:hover {
    background: var(--secondary);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

/* =========================================
   6. TARJETAS ELEVADAS Y ENLACES
   ========================================= */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.muni-card, .tarjeta-norma, .tarjeta-imagen, .enlace-directo {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-md);
    transition: var(--transicion);
    display: flex;
    flex-direction: column;
}

.muni-card:hover, .tarjeta-norma:hover, .tarjeta-imagen:hover, .enlace-directo:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(14, 165, 233, 0.3);
}

.muni-card h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.btn-link, .titulo-enlace {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 700;
    transition: var(--transicion);
    line-height: 1.4;
}

.btn-link:hover, .titulo-enlace:hover {
    color: var(--primary);
}

.subtitulo-grupo {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 25px;
    font-weight: 700;
}

.grid-enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.enlace-directo {
    flex-direction: row;
    align-items: center;
    padding: 20px;
    border-left: 4px solid var(--secondary);
    text-decoration: none;
}

.enlace-directo .icono {
    font-size: 24px;
    margin-right: 15px;
}

.enlace-directo .texto {
    font-weight: 600;
    color: var(--texto-oscuro);
    flex-grow: 1;
}

.enlace-directo .flecha {
    font-size: 20px;
    color: var(--secondary);
    font-weight: bold;
}

/* =========================================
   7. SCROLL HORIZONTAL Y BOTONES
   ========================================= */
.cabecera-bloque {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.contenedor-scroll {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 10px 10px 30px 10px;
    margin: 0 -10px;
}

.contenedor-scroll::-webkit-scrollbar { height: 6px; }
.contenedor-scroll::-webkit-scrollbar-track { background: var(--borde); border-radius: 10px; }
.contenedor-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
.contenedor-scroll::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

.tarjeta-norma, .tarjeta-imagen {
    min-width: 340px;
    max-width: 340px;
    padding: 0;
    overflow: hidden;
}

.tarjeta-norma { padding: 30px; }
.tarjeta-norma .etiqueta { font-size: 12px; font-weight: bold; color: var(--secondary); margin-bottom: 5px; }
.tarjeta-norma .fecha { font-size: 12px; color: var(--texto-gris); margin-bottom: 15px; }
.tarjeta-norma .resumen { font-size: 14px; color: var(--texto-gris); margin-top: 10px; }

.tarjeta-imagen .contenido-tarjeta { padding: 25px; }
.tarjeta-imagen img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    border-bottom: 1px solid var(--borde);
    transition: var(--transicion);
}
.tarjeta-imagen:hover img { transform: scale(1.05); }

.btn-ver-mas {
    background-color: var(--bg-light);
    color: var(--primary);
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: var(--transicion);
}

.btn-ver-mas .flecha { margin-left: 8px; font-size: 18px; }
.btn-ver-mas:hover { background-color: var(--primary); color: white; }

/* =========================================
   8. FOOTER ELEGANTE
   ========================================= */
.footer-gob { background-color: #0F172A; color: #94A3B8; }
.footer-top { padding: 80px 0 60px 0; }
.footer-bottom { background-color: #0B1120; padding: 50px 0; }

.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }

.footer-col h3 {
    color: #F8FAFC;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--secondary);
    border-radius: 3px;
}

.footer-gob a { color: #94A3B8; text-decoration: none; transition: var(--transicion); }
.footer-gob a:hover { color: var(--secondary); padding-left: 5px; }

.footer-borde-decorativo {
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
}

.footer-lista-vineta, .footer-lista-simple { list-style: none !important; padding: 0; margin: 0; }
.footer-lista-vineta li, .footer-lista-simple li { margin-bottom: 15px; }

.footer-redes { margin-top: 40px; }
.redes-iconos { display: flex; gap: 15px; }
.redes-iconos a {
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 50px;
    color: white;
}
.redes-iconos a:hover {
    background: var(--secondary);
    transform: translateY(-3px);
}

/* =========================================
   9. MEDIA QUERIES (TABLETS Y CELULARES)
   ========================================= */

/* Tablets y Celulares (hasta 992px) */
@media (max-width: 992px) {
    /* Contenedor principal del nav */
    .container-nav {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
        align-items: stretch; /* Para que el buscador tome todo el ancho */
    }
    
    /* 1. EL MENÚ DESLIZABLE (SWIPE) TIPO APP */
    .nav-principal ul, 
    .nav-principal #menu-menu-principal {
        flex-wrap: nowrap !important; /* Prohíbe que salten a la siguiente línea */
        justify-content: flex-start !important;
        overflow-x: auto !important; /* Activa el scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iPhones */
        padding-bottom: 5px !important;
        gap: 5px !important;
        
        /* Oculta la barra de scroll visualmente pero mantiene la función */
        scrollbar-width: none; 
    }
    
    .nav-principal ul::-webkit-scrollbar,
    .nav-principal #menu-menu-principal::-webkit-scrollbar {
        display: none;
    }
    
    .nav-principal ul li,
    .nav-principal #menu-menu-principal li {
        flex: 0 0 auto; /* Evita que los botones se aplasten */
    }
    
    .nav-principal ul li a {
        padding: 10px 18px !important;
        font-size: 14px !important;
        white-space: nowrap; /* Evita que textos largos como "Normas y documentos" se rompan en dos líneas */
        background: var(--bg-light);
        border-radius: 50px; /* Convertimos los botones en "píldoras" en el móvil */
    }

    /* 2. EL BUSCADOR 100% RESPONSIVO */
    .search-form-gob {
        margin: 0;
        width: 100%;
    }
    
    .search-form-gob input[type="search"] {
        width: 100%; /* Toma todo el espacio disponible */
    }

    .footer-grid {
        gap: 40px;
    }
}

/* Teléfonos (hasta 768px) */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .tagline {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-left: 0;
        padding-top: 10px;
    }
    .hero {
        padding: 50px 0;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .seccion-categorias, .seccion-tramites, .seccion-noticias {
        padding: 50px 0;
    }
    .cabecera-bloque {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-ver-mas {
        width: 100%;
        justify-content: center;
    }
    .tarjeta-norma, .tarjeta-imagen {
        min-width: 280px;
        max-width: 280px;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Una sola columna en el footer */
    }
}

/* Teléfonos pequeños (hasta 480px) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }
    .lista-categorias ul {
        flex-direction: column;
        align-items: stretch;
    }
    .lista-categorias a {
        text-align: center;
    }
}



/* =========================================
   SECCIÓN INSTITUCIONAL (NOSOTROS)
   ========================================= */
.seccion-institucional {
    padding: 80px 0;
}

.institucional-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: start;
}

.institucional-desc {
    font-size: 1.05rem;
    color: var(--texto-gris);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Tarjetas de Misión y Visión */
.mision-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mv-card {
    background: #ffffff;
    border: 1px solid var(--borde);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow-sm);
    transition: var(--transicion);
    position: relative;
    overflow: hidden;
}

.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(14, 165, 233, 0.3);
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--secondary); /* Línea celeste arriba */
}

.mv-icon-box {
    width: 45px; height: 45px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--secondary);
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    margin-bottom: 15px;
}

.mv-card h3 {
    color: var(--primary);
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.mv-card p {
    color: var(--texto-gris);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

/* Lista de Unidades Orgánicas */
.unidades-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unidad-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 15px 20px;
    text-decoration: none;
    transition: var(--transicion);
}

.unidad-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    background-color: #f8fafc;
}

.unidad-icon {
    width: 35px; height: 35px;
    background: var(--bg-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

.unidad-text {
    flex-grow: 1;
    color: var(--texto-oscuro);
    font-weight: 600;
    font-size: 0.95rem;
}

.unidad-item .arrow {
    color: var(--secondary);
    transition: transform 0.2s;
}

.unidad-item:hover .arrow {
    transform: translateX(4px);
}

.mt-15 { margin-top: 15px; }

/* Responsive para la sección institucional */
@media (max-width: 992px) {
    .institucional-grid {
        grid-template-columns: 1fr; /* Se apilan una sobre otra */
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .mision-vision-grid {
        grid-template-columns: 1fr; /* Misión arriba, visión abajo en celulares */
    }
}

/* =========================================
   1. CABECERA OFICIAL (HEADER)
   ========================================= */
.header-oficial {
    background-color: #0ea5e9; /* Azul institucional */
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio perfecto entre logo y texto */
    padding: 0 50px; /* Margen lateral */
}

.logo-muni {
    height: 55px; /* Un poco más grande */
    width: 55px;
    object-fit: contain; /* Evita que se aplaste */
    background-color: #ffffff;
    border-radius: 50%; /* Lo hace un círculo perfecto */
    padding: 2px; /* Pequeño borde blanco interior */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.portal-titulo {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* =========================================
   2. BANNER PRINCIPAL (HERO)
   ========================================= */
/* =========================================
   2. BANNER PRINCIPAL (HERO) - AJUSTE PERFECTO
   ========================================= */
.hero-institucional {
    position: relative;
    width: 100%;
    /* Fijamos el color de fondo oscuro de gob.pe */
    background-color: #0f172a; 
    
    /* TRUCO MÁGICO: El padding-bottom responsivo fija la altura proporcional.
       Para banners panorámicos anchos, un valor entre 25% y 35% es ideal.
       He calculado 30.5% basándome en la imagen que me mostraste. */
    height: 0;
    padding-bottom: 30.5%; 
    
    background-size: contain; /* Encaja la imagen completa sin recortar */
    background-position: center center; /* Centrado perfecto */
    background-repeat: no-repeat; /* No duplicar la imagen */
    overflow: hidden;
}

/* El Hero Overlay es lo que sostiene el texto por encima */
.hero-overlay {
    /* Mantenemos el gradiente oscuro pero lo hacemos sutil en el medio */
    background: linear-gradient(to right, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.8) 100%),
                linear-gradient(to bottom, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    
    position: absolute; /* Lo sacamos del flujo */
    top: 0; left: 0; width: 100%; height: 100%;
    
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; /* Padding interior controlado para el texto */
    z-index: 10;
}

/* ... (Mantén tus estilos de hero-badge, hero-title, hero-subtitle como estaban) ... */

.text-center {
    text-align: center;
}

/* La píldora (Badge) */
.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 25px;
    backdrop-filter: blur(4px); /* Efecto vidrio moderno */
}

/* El título principal */
.hero-title {
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 auto 20px auto;
    max-width: 900px;
    /* Le quitamos la sombra sucia y confiamos en el contraste del overlay */
}

/* El subtítulo */
.hero-subtitle {
    color: #e2e8f0; /* Un gris muy clarito, casi blanco */
    font-size: 1.25rem;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Ajustes para celulares */
@media (max-width: 768px) {
    .header-container { padding: 0 20px; }
    .hero-title { font-size: 2.2rem; }
    .hero-overlay { padding: 80px 20px; }
}

.hero-content {
    text-align: center;
}

.hero-content .badge {
    background-color: rgba(255,255,255,0.1);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra suave para leer mejor */
}

.hero-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* =========================================
   NUEVO HERO (DISEÑO DIVIDIDO / SPLIT)
   ========================================= */
.hero-split {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); /* Azul institucional moderno */
    padding: 60px 0;
    overflow: hidden;
}

.hero-split-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* Le damos bastante aire entre el texto y la foto */
}

/* Lado del Texto */
.hero-text {
    flex: 1.2; /* Le damos un poco más de peso a la columna del texto */
    max-width: none; /* ¡MAGIA! Le quitamos el límite que lo estaba encogiendo */
    color: #ffffff;
}

.hero-text .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-text h1 {
    font-size: 3.2rem; /* Lo hacemos un poquito más grande ya que ahora tiene espacio */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Lado del Texto */
.hero-text {
    flex: 1; /* Toma 1 parte del espacio */
    max-width: 480px; /* Acortamos un poco el texto para darle más espacio a la imagen */
    color: #ffffff;
}

/* ... (mantén los estilos de hero-badge, h1 y p igual que antes) ... */

/* Lado de la Imagen */
.hero-image {
    flex: 1; /* Toma el espacio restante con naturalidad */
    display: flex;
    justify-content: flex-end;
}

.hero-image img {
    width: 100%; /* Que llene su caja */
    max-width: 750px; /* Un tope razonable para que se vea gigante pero no reviente la pantalla */
    height: auto;
    border-radius: 12px; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 
    border: 4px solid rgba(255, 255, 255, 0.1);
}

/* Adaptación para celulares (Responsive) */
@media (max-width: 992px) {
    .hero-split-container {
        flex-direction: column; /* Se apilan en pantallas pequeñas */
        text-align: center;
    }
    
    .hero-text {
        max-width: 100%;
    }
    
    .hero-text h1 {
        font-size: 2.2rem;
    }
    
    .hero-image {
        justify-content: center;
        margin-top: 20px;
    }
}


/* ==========================================================================
   EFECTOS "WAOO" - SOLO TRANSICIONES Y ANIMACIONES (SIN ALTERAR DISEÑO BASE)
   ========================================================================== */

/* 1. Animaciones de entrada (Cuando carga la página) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Aplicamos la entrada al texto y foto principal */
.hero-text {
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-image {
    opacity: 0; /* Empieza invisible */
    animation: fadeInUp 1s ease-out 0.3s forwards; /* Entra con un ligero retraso */
}

/* 2. Efecto de FLOTACIÓN para la imagen del Banner (Le da muchísima vida) */
.hero-image img {
    animation: float 6s ease-in-out infinite; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-image img:hover {
    transform: scale(1.02) !important; /* Pequeño zoom al poner el mouse */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    animation-play-state: paused; /* Pausa la flotación si le pones el mouse */
}

/* 3. Tarjetas (Resoluciones, Funcionarios, Noticias, Misión/Visión) */
/* Hacemos que se levanten suavemente al pasar el mouse */
.muni-card, .tarjeta-norma, .mv-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.muni-card:hover, .tarjeta-norma:hover, .mv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 4. Tarjetas con Imagen (Campañas y Noticias) */
.tarjeta-imagen {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Evita que la foto se salga al hacer zoom */
}

.tarjeta-imagen:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Efecto de Zoom SUAVE solo en la foto al poner el mouse sobre la tarjeta */
.tarjeta-imagen img {
    transition: transform 0.5s ease;
}

.tarjeta-imagen:hover img {
    transform: scale(1.08); 
}

/* 5. Enlaces Directos (Mesa de partes, libro de reclamaciones, etc.) */
.enlace-directo {
    transition: all 0.3s ease;
}

.enlace-directo:hover {
    transform: translateX(10px); /* Se desliza ligeramente a la derecha */
    background-color: #f8fafc;
    border-color: #0ea5e9;
}

/* La flechita (›) se anima por separado para un toque extra */
.enlace-directo .flecha {
    transition: transform 0.3s ease;
}

.enlace-directo:hover .flecha {
    transform: translateX(5px);
    color: #0ea5e9;
    font-weight: bold;
}

/* 6. Animación de los Botones */
.btn-outline-azul, .btn-ver-mas, .btn-link {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-outline-azul:hover, .btn-ver-mas:hover, .btn-link:hover {
    transform: scale(1.05); /* El botón crece un 5% */
}

/* 7. Unidades Orgánicas (Gerencias) */
.unidad-item {
    transition: all 0.3s ease;
}

.unidad-item:hover {
    transform: translateX(8px);
}

/* ==========================================================================
   PÁGINAS INTERNAS (NOSOTROS Y NORMAS)
   ========================================================================== */

/* Cabecera genérica para páginas internas */
.page-hero {
    background: #0ea5e9;
    color: white;
    padding: 60px 20px;
    border-bottom: 5px solid #0284c7;
}

.page-hero.bg-azul-oscuro {
    background: #0f172a;
    border-bottom: 5px solid #0ea5e9;
}

.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.page-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.seccion-interna {
    padding: 60px 0;
}

.bg-blanco { background: #ffffff; }

/* === PÁGINA NOSOTROS === */
.nosotros-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: center;
}

.nosotros-texto p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 20px;
}

.alcalde-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.alcalde-foto {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto;
    border: 5px solid #f1f5f9;
}

.alcalde-card h3 { color: #0ea5e9; font-size: 1.5rem; margin-bottom: 5px; }
.alcalde-cargo { font-weight: bold; color: #1e293b; margin-bottom: 5px; }
.alcalde-gestion { color: #64748b; font-size: 0.9rem; }

/* === PÁGINA NORMAS === */
.filtro-normas-caja {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.filtro-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    gap: 15px;
    align-items: end;
}

.form-grupo label {
    display: block; font-size: 0.85rem; font-weight: bold; color: #475569; margin-bottom: 8px;
}

.form-grupo input, .form-grupo select {
    width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none;
}

.form-grupo input:focus, .form-grupo select:focus { border-color: #0ea5e9; }

/* Tarjetas de Documentos */
.doc-card {
    display: flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.doc-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #0ea5e9;
}

.doc-icono {
    background: #f0f9ff; color: #0ea5e9; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 20px;
}

.doc-info { flex: 1; }
.doc-fecha { font-size: 0.8rem; color: #64748b; font-weight: bold; text-transform: uppercase; }
.doc-titulo { font-size: 1.1rem; color: #1e293b; margin: 5px 0; }
.doc-desc { font-size: 0.9rem; color: #475569; margin: 0; }

.doc-accion { margin-left: 20px; }
.btn-descarga {
    display: flex; align-items: center; gap: 5px; background: #ef4444; color: white; padding: 10px 15px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: background 0.2s;
}
.btn-descarga:hover { background: #dc2626; color: white; }

@media (max-width: 992px) {
    .nosotros-grid { grid-template-columns: 1fr; }
    .filtro-grid { grid-template-columns: 1fr; }
    .doc-card { flex-direction: column; align-items: flex-start; }
    .doc-accion { margin-left: 0; margin-top: 15px; width: 100%; }
    .btn-descarga { justify-content: center; width: 100%; }
}


.btn-primary {
    background-color: #0ea5e9; /* Azul institucional */
    color: #ffffff;
    border: none;
    padding: 12px 20px; /* Misma altura que los inputs */
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-primary:hover {
    background-color: #0284c7; /* Azul más oscuro al pasar el mouse */
    color: #ffffff;
    transform: translateY(-2px); /* Pequeño salto animado */
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.btn-primary span.material-icons {
    font-size: 1.2rem;
}

/* Ajuste específico para que el botón "Buscar" se alinee perfecto con las cajas de texto */
.boton-buscar {
    height: 45px; /* Altura que coincide con tus inputs */
}
/* ==========================================================================
   ENLACE DE LA CABECERA (LOGO + TÍTULO)
   ========================================================================== */
.enlace-inicio {
    display: flex;
    align-items: center;
    gap: 15px; /* Mantiene el espacio entre el logo y el texto */
    text-decoration: none; /* Evita que el texto se subraye */
    transition: opacity 0.2s ease;
}

.enlace-inicio:hover {
    opacity: 0.8; /* Un efecto súper sutil al pasar el mouse */
}

/* ==========================================================================
   PÁGINAS: ORGANIGRAMA Y DIRECTORIO
   ========================================================================== */

/* --- ORGANIGRAMA --- */
.organigrama-contenedor {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.organigrama-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.organigrama-cabecera h2 {
    color: #1e293b;
    margin: 0;
}

.organigrama-imagen img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px dashed #cbd5e1; /* Borde punteado hasta que pongas la foto real */
}

/* --- DIRECTORIO --- */
.directorio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.funcionario-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.funcionario-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #0ea5e9;
}

.func-foto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 4px solid #f0f9ff;
}

.func-nombre {
    color: #0ea5e9;
    font-size: 1.25rem;
    margin-bottom: 5px;
}

.func-cargo {
    color: #1e293b;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.func-contacto {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.8;
}

.func-contacto span.material-icons {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 5px;
    color: #94a3b8;
}

/* Responsivo para celulares */
@media (max-width: 768px) {
    .organigrama-cabecera {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* ==========================================================================
   CUADRÍCULA PARA NOTICIAS Y CAMPAÑAS
   ========================================================================== */
.grid-articulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.tarjeta-imagen img {
    width: 100%;
    height: 220px; /* Altura fija para que todas las tarjetas se vean alineadas */
    object-fit: cover; /* Evita que las fotos se deformen o estiren */
    display: block;
}

.contenido-tarjeta {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.tarjeta-imagen .fecha {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.tarjeta-imagen .titulo-enlace {
    color: #0ea5e9;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.tarjeta-imagen .titulo-enlace:hover {
    text-decoration: underline;
}

/* ==========================================================================
   VICUÑA "GUÍA VIRTUAL" CON GLOBO DE CHAT
   ========================================================================== */

.guia-virtual-container {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea todo a la derecha */
    pointer-events: none; /* Para que no estorbe si alguien hace clic ahí */
    animation: flotarGuia 4s ease-in-out infinite;
}

/* 1. El Globo de Chat */
.globo-mensaje {
    background-color: #ffffff;
    color: #1e293b;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: 15px 15px 0 15px; /* Forma de globo de chat (esquina recta abajo) */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    margin-bottom: 10px;
    max-width: 220px;
    text-align: right;
    line-height: 1.4;
    position: relative;
    border: 1px solid #e2e8f0;
}

/* El triangulito del globo de chat que apunta a la vicuña */
.globo-mensaje::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 0;
    border-width: 10px 15px 0 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Colorcito azul para el "¡Hola!" */
.globo-mensaje strong {
    color: #0ea5e9;
    font-size: 1rem;
}

/* 2. La imagen de la vicuña */
.img-vicuna-guia {
    width: 120px; /* Un tamaño amigable, no muy invasivo */
    height: auto;
    margin-right: 15px; /* Para que quede alineada con la colita del globo */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); /* Sombra bonita solo en la silueta */
}

/* 3. Animación de flotación suave */
@keyframes flotarGuia {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* En celulares la hacemos un poco más pequeña para que no estorbe la lectura */
@media (max-width: 768px) {
    .img-vicuna-guia { width: 90px; }
    .globo-mensaje { font-size: 0.8rem; padding: 10px; max-width: 180px; }
}





/* ==========================================================================
   NUEVOS ESTILOS PARA LAS 4 IMÁGENES ESTRELLA
   ========================================================================== */

/* 1. PANORAMA EN HERO NOSOTROS */
.hero-panorama {
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Efecto Parallax (se mueve diferente al hacer scroll) */
    padding: 100px 20px !important;
}

/* 2. FOOTER CON ESCUDO OFICIAL */
.footer-oficial {
    background-color: #0f172a;
    color: #cbd5e1;
    padding: 60px 0 20px 0;
    margin-top: 50px;
    border-top: 5px solid #0ea5e9;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-escudo {
    width: 130px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.1));
}
.footer-marca h3 { color: #ffffff; font-size: 1.5rem; margin-bottom: 10px; }
.footer-contacto h4, .footer-enlaces h4 { color: #0ea5e9; margin-bottom: 20px; font-size: 1.2rem; }
.footer-contacto p { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.footer-enlaces ul { list-style: none; padding: 0; }
.footer-enlaces li a { color: #cbd5e1; text-decoration: none; display: block; margin-bottom: 10px; transition: color 0.3s; }
.footer-enlaces li a:hover { color: #0ea5e9; padding-left: 5px; }
.footer-bottom { border-top: 1px solid #1e293b; padding-top: 20px; font-size: 0.85rem; }

/* 3. SECCIÓN CULTURA (NIÑA DE GALA) */
.seccion-cultura {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 60px 0 0 0; /* Sin padding abajo para que la niña "pise" el borde */
    overflow: hidden;
    margin-top: 60px;
}
.cultura-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.cultura-texto { flex: 1; padding-bottom: 60px; }
.badge-cultura { background: #0ea5e9; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }
.cultura-texto h2 { color: #0f172a; font-size: 2.5rem; margin: 20px 0; }
.cultura-texto p { font-size: 1.1rem; line-height: 1.8; color: #475569; margin-bottom: 30px; }
.cultura-imagen {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.cultura-imagen img {
    max-height: 500px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.15)); /* Sombra para dar volumen 3D */
    margin-bottom: -10px; /* Hace que salga un poquito del borde inferior */
}

/* 4. MARCA DE AGUA EN NORMAS Y TRÁMITES (SELLO CIRCULAR) */
.page-template-page-normas .main-page,
.page-template-page-tramites .main-page {
    position: relative;
}
.page-template-page-normas .main-page::before,
.page-template-page-tramites .main-page::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background-image: url('../img/IMG_6751.png'); /* Sello Circular */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.04; /* Súper transparente, casi invisible */
    z-index: 0;
    pointer-events: none;
}
.seccion-interna .container { position: relative; z-index: 1; }

/* Móviles */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-contacto p { justify-content: center; }
    .cultura-flex { flex-direction: column; text-align: center; }
    .cultura-imagen { justify-content: center; }
}



/* ==========================================================================
   PÁGINA: MESA DE PARTES VIRTUAL
   ========================================================================== */

/* Textos de cabecera */
.info-horarios {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}
.info-horarios ul {
    margin-left: 20px;
    margin-bottom: 15px;
}
.nota-legal {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 10px;
}

/* Contenedor del Formulario */
.formulario-caja {
    background-color: #f1f5f9; /* El fondo gris clarito de la imagen */
    padding: 40px;
    border-radius: 8px;
}

.form-seccion {
    margin-bottom: 40px;
}

.form-titulo-seccion {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Grupos y Etiquetas */
.form-grupo {
    margin-bottom: 25px;
}
.form-grupo label {
    display: block;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 8px;
}
.opcional {
    color: #64748b;
    font-weight: normal;
}
.form-ayuda {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 10px;
}

/* Inputs y Textareas */
.input-text {
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.3s;
}
.input-text:focus {
    border-color: #0ea5e9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
textarea.input-text {
    max-width: 100%;
    resize: vertical;
}

/* Radios */
/* ==========================================================================
   CORRECCIÓN PARA BOTONES DE RADIO (MESA DE PARTES)
   ========================================================================== */

.radio-grupo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start !important; /* Fuerza la alineación a la izquierda */
    width: 100%;
}

.radio-grupo label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Evita que el texto se vaya a la derecha */
    gap: 10px !important; /* Espacio exacto entre el botón y el texto */
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important; /* Evita que el label se estire al 100% */
    text-align: left !important;
}

.radio-grupo input[type="radio"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 18px !important; /* Tamaño fijo para el botoncito */
    height: 18px !important;
    flex-shrink: 0; /* Evita que el botón se deforme */
    appearance: auto !important; /* Restaura la forma original del botón de radio */
}

/* Contador */
.contador-caracteres {
    text-align: right;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 5px;
}

/* Caja de subida de archivos (Drag & Drop) */
.caja-subida-archivo {
    border: 2px dashed #94a3b8;
    background-color: #ffffff;
    padding: 30px;
    text-align: center;
    border-radius: 6px;
    position: relative;
    transition: background-color 0.3s;
}
.caja-subida-archivo:hover {
    background-color: #f8fafc;
}
.icono-subida {
    font-size: 2rem;
    color: #475569;
    margin-bottom: 10px;
}
.link-subida {
    color: #0284c7;
    font-weight: 600;
    text-decoration: none;
}
.input-file-oculto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Checkbox términos */
.checkbox-label {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-label a {
    color: #0284c7;
}

/* Móviles */
@media (max-width: 768px) {
    .formulario-caja { padding: 20px; }
    .input-text { max-width: 100%; }
}


/* ==========================================================================
   PÁGINA: LIBRO DE RECLAMACIONES (PASOS Y CHECKBOXES)
   ========================================================================== */

/* Stepper (Indicador de pasos) */
.stepper-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.step-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #cbd5e1;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}
.step-circle.active {
    background-color: #0284c7; /* Azul encendido */
}
.step-text {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}
.step-text.active {
    color: #0284c7;
}
.step-line {
    height: 3px;
    width: 60px;
    background-color: #cbd5e1;
    margin-bottom: 25px; /* Para alinearlo con los círculos */
    transition: background-color 0.3s;
}
.step-line.active {
    background-color: #0284c7;
}

/* Arreglo para grupos de Checkbox (Similar al de Radios) */
.checkbox-grupo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkbox-grupo label {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.5;
    color: #334155;
}
.checkbox-grupo input[type="checkbox"] {
    margin-top: 3px !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    appearance: auto !important;
}

/* Espaciados utilitarios */
.mt-15 { margin-top: 15px; }