* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f5f7fa;
    color: #172d42;
    font-family: Arial, Helvetica, sans-serif;
}

/* Encabezado */

.vj-encabezado {
    max-width: 808px;
    margin: auto;
    padding: 36px 24px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vj-encabezado .logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 110px;
    object-fit: contain;
}

/* Contenido y presentación */

.vj-portada {
    background: #f5f7fa;
    color: #172d42;
    padding: 36px 24px 56px;
    border-radius: 18px;
}

.vj-portada .presentacion {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.etiqueta {
    color: #63768b;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 12px;
}

h1 {
    font-size: 32px;
    line-height: 1.15;
    margin: 12px 0;
    font-weight: 600;
}

.intro {
    color: #63768b;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* Tarjetas */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 760px;
    margin: auto;
    align-items: start;
}

.tarjeta {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 132px;
    background: #fff;
    padding: 24px 20px;
    border-radius: 16px;
    color: inherit;
    border: 1px solid #e4e9ef;
    box-shadow: 0 4px 14px #19385206;
}

a.tarjeta {
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}

a.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #19385212;
}

a.tarjeta:focus-visible {
    outline: 3px solid #365c87;
    outline-offset: 4px;
}

.icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    height: 54px;
    background: #eef3f9;
    border-radius: 15px;
    color: #365c87;
}

.verde {
    background: #eaf3ec;
    color: #44815a;
}

.dorado {
    background: #faf1e1;
    color: #a77929;
}

.violeta {
    background: #f0edf8;
    color: #77629e;
}

.coral {
    background: #f9eeeb;
    color: #b57560;
}

.icono svg {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.texto-tarjeta {
    min-width: 0;
    align-self: center;
    overflow-wrap: anywhere;
}

h2 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
}

.descripcion {
    font-size: 13px;
    line-height: 1.5;
    color: #63768b;
    margin: 7px 0 0;
}

.tarjeta .flecha {
    margin-left: auto;
    color: #8393a3;
    align-self: center;
}

/* Subniveles */

.subsecciones {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    color: #63768b;
    font-size: 13px;
    line-height: 1.5;
}

.subsecciones > li + li {
    margin-top: 8px;
}

.grupo {
    color: #172d42;
    font-weight: 600;
}

.subniveles {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 1px solid #e4e9ef;
}

.subniveles li + li {
    margin-top: 6px;
}

/* Regresar */

.regresar {
    display: inline-block;
    color: #365c87;
    text-decoration: none;
    padding: 12px 0;
    margin-bottom: 12px;
    min-height: 44px;
}

.regresar:hover {
    text-decoration: underline;
}

.regresar:focus-visible {
    outline: 3px solid #365c87;
    outline-offset: 4px;
}

/* Footer transparente */

.portada-footer {
    background: transparent;
    color: inherit;
    border-top: 1px solid #e4e9ef;
    padding: 0 24px;
}

.portada-footer__contenido {
    max-width: 760px;
    margin: auto;
    padding: 26px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.portada-footer__nombre {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.portada-footer__lugar {
    font-size: 14px;
    color: inherit;
    margin: 0 0 4px;
}

.portada-footer__contacto {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

.portada-footer__contacto:hover {
    text-decoration: underline;
}

.portada-footer a:focus-visible {
    outline: 3px solid #365c87;
    outline-offset: 4px;
}

.portada-footer__marca {
    display: block;
    flex-shrink: 0;
    max-width: 115px;
}

.portada-footer__logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 85px;
    object-fit: contain;
}

/* Teléfonos */

@media (max-width: 520px) {
    .vj-portada {
        padding: 24px 16px 40px;
    }

    .vj-encabezado {
        padding: 24px 16px 8px;
    }

    .tarjetas {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 28px;
    }

    .tarjeta {
        min-height: 110px;
        padding: 20px 16px;
    }

    .vj-encabezado .logo {
        max-width: 180px;
        max-height: 95px;
    }

    .portada-footer {
        padding: 0 16px;
    }

    .portada-footer__contenido {
        gap: 16px;
    }

    .portada-footer__marca {
        max-width: 85px;
    }

    .portada-footer__nombre {
        font-size: 16px;
    }
}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {
    a.tarjeta {
        transition: none;
    }

    a.tarjeta:hover {
        transform: none;
    }
}