/* ============================================================
   ESTILOS ESPECÍFICOS DE TRÁMITES
   Archivo: tramites.css
   ------------------------------------------------------------
   Este archivo controla:
   - Contenedor principal de trámites
   - Grid de 2 columnas
   - Tarjetas de trámite tipo acordeón
   - Animaciones de apertura/cierre
   👉 Reutilizable para cualquier dependencia
============================================================ */


/* ============================================================
   CONTENEDOR PRINCIPAL DE LA SECCIÓN
   ------------------------------------------------------------
   Ajusta aquí:
   - Ancho máximo
   - Espaciados
   - Sombra y bordes
============================================================ */
section#tramites {
    padding: 2rem 1rem;                 /* Espacio interno del contenedor */
    background-color: white;            /* Fondo blanco institucional */
    margin: 1rem auto;                  /* Centrado horizontal */
    max-width: 1100px;                  /* Ancho máximo del contenido */
    border-radius: 14px;                /* Bordes redondeados */
    box-shadow: 0 10px 28px rgba(0,0,0,0.15); /* Sombra elegante */
    text-align: center;                 /* Centra títulos y descripción */
}


/* ============================================================
   TÍTULO PRINCIPAL
============================================================ */
section#tramites h1 {
    font-size: 2.4rem;                  /* Tamaño del título */
    font-weight: 800;                   /* Peso fuerte institucional */
    color: #001f3f;                     /* Azul institucional */
    margin-bottom: 1.2rem;
}


/* ============================================================
   TEXTO DESCRIPTIVO
============================================================ */
section#tramites .descripcion {
    color: #555;                        /* Gris suave */
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}


/* ============================================================
   GRID DE TRÁMITES
   ------------------------------------------------------------
   Cambia columnas aquí:
   - 2 columnas → repeat(2, 1fr)
   - 3 columnas → repeat(3, 1fr)
============================================================ */
.tramites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas escritorio */
    gap: 1.8rem;                           /* Separación entre tarjetas */
}


/* ============================================================
   TARJETA DE TRÁMITE (ACORDEÓN)
============================================================ */
.tramite-card {
    background: white;
    border-left: 6px solid #001f3f;     /* Línea institucional */
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    cursor: pointer;                   /* Indica interacción */

    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition:
        transform .25s ease,
        box-shadow .25s ease;

    text-align: left;                  /* Mejora lectura del contenido */
}


/* Hover visual */
.tramite-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.15);
}


/* ============================================================
   ENCABEZADO DEL TRÁMITE
   ------------------------------------------------------------
   Contiene:
   - Título
   - Flecha indicadora
============================================================ */
.tramite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Título del trámite */
.tramite-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #001f3f;
    margin: 0;
}


/* Flecha indicadora */
.tramite-header span {
    font-size: 1.4rem;
    font-weight: bold;
    color: #001f3f;
    transition: transform .3s ease;   /* Animación de giro */
}


/* Flecha girada cuando está activo */
.tramite-card.activo .tramite-header span {
    transform: rotate(90deg);
}


/* ============================================================
   DESCRIPCIÓN CORTA DEL TRÁMITE
============================================================ */
.tramite-card p {
    margin-top: .6rem;
    font-size: .95rem;
    color: #444;
}


/* ============================================================
   CONTENIDO DESPLEGABLE (REQUISITOS)
   ------------------------------------------------------------
   Controlado por la clase .activo (JS)
============================================================ */
.tramite-detalle {
    max-height: 0;                     /* Oculto por defecto */
    overflow: hidden;
    opacity: 0;

    margin-top: 1rem;
    border-top: 1px solid #e6ecf3;
    padding-top: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding-top .25s ease;
}


/* Cuando el trámite está activo */
.tramite-card.activo .tramite-detalle {
    max-height: 500px;                 /* Ajustar si el contenido es mayor */
    opacity: 1;
    padding-top: 1rem;
}


/* Título "Requisitos" */
.tramite-detalle strong {
    color: #001f3f;
    font-size: .95rem;
}


/* Lista de requisitos */
.tramite-detalle ul {
    margin-top: .5rem;
    padding-left: 1.2rem;
}

.tramite-detalle li {
    font-size: .9rem;
    color: #333;
    margin-bottom: .3rem;
}


/* ============================================================
   RESPONSIVE – MÓVILES
   ------------------------------------------------------------
   Ajustes automáticos en pantallas pequeñas
============================================================ */
@media (max-width: 768px) {

    /* Una sola columna */
    .tramites-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce tamaño del título */
    section#tramites h1 {
        font-size: 2rem;
    }
}