/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --primary:
        #00509b;

    --primary-dark:
        #003f79;

    --primary-soft:
        #eef6fc;

    --background:
        #f5f7fa;

    --surface:
        #ffffff;

    --border:
        #e1e7ee;

    --text:
        #263238;

    --muted:
        #718096;

    --success:
        #3d7c59;

    --danger:
        #8d4a4a;

    --shadow:
        0 10px 30px rgba(
            31,
            52,
            73,
            0.07
        );

}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.5;
}


button,
input {
    font: inherit;
}


/* ============================================================
   CONTENEDOR
   ============================================================ */

.consulta-container {

    width:
        min(
            1100px,
            92%
        );

    margin:
        0 auto;

    padding:
        28px 0 50px;
}


/* ============================================================
   CABECERA
   ============================================================ */

.consulta-header {

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        55px;
}


.marca {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--text);

    text-decoration:
        none;
}


.marca-icono {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        19px;

    font-weight:
        bold;

    box-shadow:
        0 5px 15px
        rgba(
            0,
            80,
            155,
            0.2
        );
}


.marca strong {

    display:
        block;

    font-size:
        16px;
}


.marca small {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        12px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {

    max-width:
        780px;

    margin:
        0 auto 35px;

    text-align:
        center;
}


.hero-etiqueta {

    display:
        inline-block;

    margin-bottom:
        13px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1.8px;
}


.hero h1 {

    margin:
        0;

    font-size:
        clamp(
            32px,
            5vw,
            48px
        );

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


.hero p {

    max-width:
        650px;

    margin:
        18px auto 0;

    color:
        var(--muted);

    font-size:
        17px;
}


/* ============================================================
   BUSCADOR
   ============================================================ */

.buscador-panel {

    position:
        relative;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        16px;

    padding:
        27px;

    box-shadow:
        var(--shadow);
}


.campo-label {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        13px;

    font-weight:
        bold;

    color:
        #4a5568;
}


.campo-busqueda {

    display:
        flex;

    gap:
        10px;
}


.campo-busqueda input {

    flex:
        1;

    min-width:
        0;

    padding:
        15px 17px;

    border:
        1px solid #d4dce5;

    border-radius:
        9px;

    background:
        #fbfcfd;

    color:
        var(--text);

    font-size:
        16px;

    outline:
        none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.campo-busqueda input:focus {

    background:
        white;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(
            0,
            80,
            155,
            0.09
        );
}


.boton-buscar {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 23px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}


.boton-buscar:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-1px);
}


.icono-buscar {

    font-size:
        21px;

    line-height:
        1;
}


/* ============================================================
   FILTROS
   ============================================================ */

.filtros {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        22px;

    padding-top:
        20px;

    border-top:
        1px solid #edf0f3;
}


.filtros-label {

    flex:
        0 0 auto;

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        bold;
}


.filtros-opciones {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.filtro {

    cursor:
        pointer;
}


.filtro input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.filtro span {

    display:
        block;

    padding:
        7px 13px;

    border:
        1px solid #d9e1e9;

    border-radius:
        20px;

    background:
        white;

    color:
        #596979;

    font-size:
        13px;

    transition:
        all .15s ease;
}


.filtro:hover span {

    border-color:
        #b7c8d8;

    background:
        #f7fafc;
}


.filtro.activo span {

    border-color:
        var(--primary);

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-weight:
        bold;
}


/* ============================================================
   RESULTADOS
   ============================================================ */

.resultados-panel {

    margin-top:
        42px;
}


.resultados-cabecera {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.resultados-cabecera h2 {

    margin:
        3px 0 0;

    font-size:
        24px;
}


.resultados-cabecera p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;
}


.resultados-etiqueta {

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1.4px;
}


.resultados {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


/* ============================================================
   TARJETA RESULTADO
   ============================================================ */

.resultado-card {

    overflow:
        hidden;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    box-shadow:
        0 5px 18px
        rgba(
            31,
            52,
            73,
            0.045
        );

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.resultado-card:hover {

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 10px 25px
        rgba(
            31,
            52,
            73,
            0.08
        );
}


.resultado-card-top {

    padding:
        10px 18px;

    border-bottom:
        1px solid #edf0f3;

    background:
        #fafcfe;
}


.resultado-tipo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        .4px;

    text-transform:
        uppercase;
}


.tipo-nacimiento
.resultado-tipo {

    color:
        var(--primary);
}


.tipo-defuncion
.resultado-tipo {

    color:
        var(--danger);
}


.tipo-cementerio
.resultado-tipo {

    color:
        #6b5a8c;
}


.resultado-card-contenido {

    padding:
        19px;
}


.resultado-card h3 {

    margin:
        0 0 15px;

    font-size:
        20px;

    line-height:
        1.25;
}


/* ============================================================
   DATOS PRINCIPALES
   ============================================================ */

.datos-principales {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    padding-bottom:
        15px;

    margin-bottom:
        14px;

    border-bottom:
        1px solid #edf0f3;
}


.dato {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.dato-icono {

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        bold;
}


.dato-label {

    display:
        block;

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}


.dato strong {

    display:
        block;

    margin-top:
        1px;

    font-size:
        15px;
}


/* ============================================================
   RELACIONES
   ============================================================ */

.relacion {

    display:
        grid;

    grid-template-columns:
        82px minmax(
            0,
            1fr
        );

    gap:
        10px;

    padding:
        6px 0;

    font-size:
        13px;
}


.relacion-label {

    color:
        var(--muted);

    font-weight:
        bold;
}


.relacion-valor {

    color:
        #3d4a57;
}


.inscripcion {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        14px;

    padding-top:
        13px;

    border-top:
        1px solid #edf0f3;

    color:
        var(--muted);

    font-size:
        12px;
}


.inscripcion-icono {

    color:
        var(--primary);

    font-size:
        16px;
}


/* ============================================================
   ESTADOS
   ============================================================ */

.estado-cargando {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        150px;

    color:
        var(--muted);
}


.spinner {

    width:
        20px;

    height:
        20px;

    border:
        2px solid #dce5ed;

    border-top-color:
        var(--primary);

    border-radius:
        50%;

    animation:
        girar .7s linear infinite;
}


@keyframes girar {

    to {
        transform:
            rotate(
                360deg
            );
    }
}


.sin-resultados {

    padding:
        60px 20px;

    text-align:
        center;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        13px;
}


.sin-resultados-icono {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        #f1f4f7;

    color:
        var(--muted);

    font-size:
        24px;
}


.sin-resultados h2 {

    margin:
        0;

    font-size:
        20px;
}


.sin-resultados p {

    margin:
        7px 0 0;

    color:
        var(--muted);
}


.estado-error {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    padding:
        20px;

    background:
        #fff8f8;

    border:
        1px solid #efd8d8;

    border-radius:
        12px;

    color:
        var(--danger);
}


.estado-error-icono {

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f5dddd;

    font-weight:
        bold;
}


.estado-error strong {

    display:
        block;
}


.estado-error p {

    margin:
        3px 0 0;

    font-size:
        13px;
}


/* ============================================================
   INFORMACIÓN
   ============================================================ */

.informacion {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    margin-top:
        42px;

    padding:
        22px;

    background:
        #f8fafc;

    border:
        1px solid var(--border);

    border-radius:
        12px;
}


.informacion-icono {

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-weight:
        bold;
}


.informacion h2 {

    margin:
        0 0 5px;

    font-size:
        15px;
}


.informacion p {

    margin:
        4px 0;

    color:
        var(--muted);

    font-size:
        13px;
}


/* ============================================================
   PIE
   ============================================================ */

.consulta-footer {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        55px;

    color:
        #98a4af;

    font-size:
        12px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
    max-width: 850px
) {

    .resultados {

        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 650px
) {

    .consulta-container {

        width:
            min(
                94%,
                550px
            );

        padding-top:
            20px;
    }


    .consulta-header {

        margin-bottom:
            38px;
    }


    .hero {

        margin-bottom:
            25px;
    }


    .hero h1 {

        font-size:
            32px;
    }


    .hero p {

        font-size:
            15px;
    }


    .buscador-panel {

        padding:
            19px;
    }


    .campo-busqueda {

        flex-direction:
            column;
    }


    .campo-busqueda input {

        width:
            100%;
    }


    .boton-buscar {

        min-height:
            48px;

        width:
            100%;
    }


    .filtros {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .resultados-cabecera {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }


    .relacion {

        grid-template-columns:
            70px minmax(
                0,
                1fr
            );
    }


    .informacion {

        padding:
            18px;
    }

}

.logo-publico {
    display: block;
    width: auto;
    max-width: 280px;
    max-height: 130px;
    margin: 0 auto 24px;
    object-fit: contain;
}