*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(253deg, #1B3F8C 0%, #142c61 100%);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Cabecera: identidad y contexto */
.page-header {
    padding: 0.75rem clamp(0.75rem, 3vw, 1.5rem) 0.5rem;
    text-align: center;
    color: #fff;
    flex-shrink: 0;
}
.page-header-inner {
    max-width: 1400px;
    margin: 0 auto;
}
.page-header-logo {
    display: block;
    margin: 0 auto 0.5rem;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.page-header-title {
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 0.15rem 0;
    letter-spacing: -0.02em;
}
.page-header-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
}

.main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(0.5rem, 2vw, 1.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Footer: barra recta pequeña con logo */
.page-footer {
    flex-shrink: 0;
    width: 100%;
}
.page-footer__bar {
    display: flex;
    border-radius: 10px 10px 0px 0px;  
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 70px;
    padding: 0.75rem 1.5rem;
    background: #000; /* barra negra */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.page-footer__logo-box {
    background: #fff; /* caja blanca para el logo */
    border-radius: 20px 20px 0px 0px;  
    padding: 20px 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -28px; /* sobresale hacia arriba de la barra negra */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1;
    text-decoration: none;
    color: inherit;
    transform-origin: center bottom; /* zoom anclado al borde inferior */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                margin-top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease-out,
                background-color 0.25s ease;
}
.page-footer__logo-box:hover {
    transform: scale(1.03); /* mismo zoom que antes */
    padding-top: 28px;     /* estira hacia arriba */
    margin-top: -36px;     /* ancla el borde inferior */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22),
                0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f8f9fa;
}
.page-footer__logo-box:active {
    transform: scale(1.01);
    padding-top: 24px;
    margin-top: -32px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.page-footer__logo-box:focus-visible {
    outline: 2px solid #1B3F8C;
    outline-offset: 3px;
}
.page-footer__logo {
    height: 65px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-footer__logo-box:hover .page-footer__logo {
    transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
    .page-footer__logo-box {
        transition: box-shadow 0.2s ease, background-color 0.25s ease;
    }
    .page-footer__logo-box:hover {
        transform: none;
        padding-top: 20px;
        margin-top: -28px;
    }
    .page-footer__logo-box:active {
        transform: none;
        padding-top: 20px;
        margin-top: -28px;
    }
    .page-footer__logo {
        transition: none;
    }
    .page-footer__logo-box:hover .page-footer__logo {
        transform: none;
    }
}

/* ─── Grid de cards: ajusta aquí el tamaño del menú ─────────────────────
   TAMAÑO DEL WRAPPER (bloque completo):
   --wrapper-max-width   Ancho máximo de todo el wrapper (ej: 900px, 1200px, 85vw)
   --wrapper-width       Ancho base (por defecto 100% hasta el máximo)
   --wrapper-zoom        Escala visual del bloque (1 = 100%, 0.9 = 90%, 1.1 = 110%)

   GRID:
   --grid-cols           Nº de columnas en pantallas grandes (1, 2, 3, 4...)
   --grid-col-min        Ancho mínimo de cada columna en pantallas pequeñas
   --grid-gap            Espacio entre cards (ej: 1rem, 1.5rem)
   --grid-padding        Margen interno del contenedor del grid
──────────────────────────────────────────────────────────────────────── */
.cards-wrapper {
    /* Tamaño de todo el wrapper */
    --wrapper-max-width: 1100px;
    --wrapper-width: 100%;
    --wrapper-zoom: 0.9;
    /* Grid */
    --grid-cols: 3;
    --grid-col-min: 260px;
    --grid-gap: clamp(1.75rem, 1.5vw, 1.25rem);
    --grid-padding: clamp(0.75rem, 1.5vw, 1.25rem);
    width: var(--wrapper-width);
    max-width: var(--wrapper-max-width);
    margin: auto;
    transform: scale(var(--wrapper-zoom));
    transform-origin: center center;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col-min), 100%), 1fr));
    gap: var(--grid-gap);
    padding: var(--grid-padding);
    margin: 0;
    align-items: stretch;
    justify-content: center;
    justify-items: stretch;
}

/* Pantallas grandes: solo cambia columnas y wrapper; gap/padding los tomas de .cards-wrapper */
@media (min-width: 1024px) {
    .cards-wrapper {
        --wrapper-max-width: min(1400px, 96vw);
        /* Opcional: descomenta para otro gap/padding solo en desktop:
        --grid-gap: clamp(1rem, 1.5vw, 1.75rem);
        --grid-padding: clamp(1rem, 1.5vw, 1.75rem);
        */
    }
    .card-container {
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        gap: var(--grid-gap);
        padding: var(--grid-padding);
        align-items: stretch;
        justify-items: stretch;
    }
    .card {
        min-height: clamp(320px, 42vh, 450px);
        max-height: none;
        height: auto;
        padding: clamp(1.5rem, 2vw, 2.5rem);
        border-radius: clamp(20px, 2vw, 26px);
    }
    .card img {
        width: clamp(72px, 8vw, 96px);
        height: clamp(72px, 8vw, 96px);
        margin-bottom: clamp(0.5rem, 1vw, 1rem);
        min-height: 0;
    }
    .card .app-title,
    .card h2,
    .card h3 {
        font-size: clamp(1.2rem, 1.2vw, 1.5rem);
        margin-bottom: 0.5rem;
    }
    .card p {
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        margin-bottom: clamp(0.5rem, 1vw, 1.1rem);
        line-height: 1.45;
    }
    .double-card {
        min-height: clamp(320px, 42vh, 450px);
        gap: clamp(1rem, 1.2vw, 1.5rem);
    }
    .sub-card {
        min-height: 0;
        flex: 1;
        padding: clamp(1rem, 1.5vw, 1.75rem);
        border-radius: clamp(20px, 2vw, 26px);
    }
    .sub-card .app-title,
    .sub-card h2 {
        font-size: clamp(1rem, 1vw, 1.2rem);
    }
    .sub-card-content img {
        width: clamp(48px, 5vw, 60px);
        height: clamp(48px, 5vw, 60px);
    }
}

.app-description {
    color: black;
    margin: 0 0 0.35rem 0;
}
.app-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.2rem 0;
}

.card {
    background-color: white;
    border-radius: clamp(16px, 2vw, 20px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1), inset 0 0 12px 0 rgba(0, 58, 183, 0.096);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    min-height: clamp(240px, 35vh, 330px);
    max-height: none;
    color: inherit;
}
.card-external {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    opacity: 0.4;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card-external--small {
    top: 0.5rem;
    right: 0.5rem;
    width: 0.875rem;
    height: 0.875rem;
}

.card-transparent {
    /* Clase reservada para variantes transparentes */
    background: transparent;
}

.double-card {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-content: space-between;
    align-self: stretch;
}

.sub-card {
    background-color: white;
    border-radius: clamp(16px, 2vw, 20px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1), inset 0 0 12px 0 rgba(0, 58, 183, 0.436);
    padding: clamp(0.75rem, 1.5vw, 1.5rem);
    margin: 0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    min-height: clamp(100px, 18vh, 150px);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    color: inherit;
}

.sub-card-content{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.card:active {
    transform: translateY(-2px) scale(1.01);
}
.sub-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), inset 0 0 12px 0 rgba(0, 58, 183, 0.25);
}
.sub-card:active {
    transform: translateY(-2px) scale(1.01);
}
/* Focus visible para teclado y accesibilidad */
.card:focus-visible,
.sub-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .card:hover,
    .card:active,
    .sub-card:hover,
    .sub-card:active {
        transform: none;
    }
    .card:focus-visible,
    .sub-card:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }
}

.card img {
    width: clamp(64px, 12vw, 80px);
    height: clamp(64px, 12vw, 80px);
    margin: 0 auto clamp(0.5rem, 1vw, 1rem);
    object-fit: contain;
}

.card .app-title,
.card h2,
.card h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: #333;
    margin: 0 0 0.35rem 0;
}

.card p {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    color: #666;
    margin: 0 0 clamp(0.5rem, 1vw, 1.25rem) 0;
    line-height: 1.4;
}

.card button {
    background-color: #184289;
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    margin-top: 0.25rem;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.card button:hover {
    background-color: #1d4e8a;
}


.btn-link {
    display: inline-block;
    background-color: #2464ad;
    color: white;
    text-align: center;
    padding: 0.75rem 1.25rem;
    margin: 0.25rem 0;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
}

    .btn-link:hover {
        background-color: #073368;
        color: white;
    }

.small-card {
    width: 100%;
    max-width: 360px;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    font-size: 0.95rem;
}

.small-card img {
    width: 50px;
    margin: 0 auto 0.75rem;
}

.small-card .app-title,
.small-card h2,
.small-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}

.small-card p {
    font-size: 0.9rem;
    margin: 0;
}


.logo-wrapper {
    position: relative;
    width: 161px; /* 70% de 230px */
    height: 161px;
}

.logo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 161px;
    height: 161px;
    object-fit: contain;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.azul {
    animation: girar-inverso 10s infinite linear;
    z-index: 1;
}

.blanco {
    animation: girar 10s infinite linear;
    z-index: 2;
}

.central {
    width: 40%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    position: absolute;
}

/* Animaciones */
@keyframes girar {
    from {
        transform: rotate(0deg);
    }

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

@keyframes girar-inverso {
    from {
        transform: rotate(0deg);
    }

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

/* Tablet: todo fluido, sin recortes */
@media (max-width: 1023px) {
    .cards-wrapper {
        --cards-max-width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 0.5rem 0.75rem 0.25rem;
    }
    .main-content {
        padding: clamp(0.5rem, 2vw, 1rem);
    }
    .card-container {
        padding: clamp(0.75rem, 2vw, 1rem);
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }
    .card {
        padding: clamp(0.75rem, 2vw, 1rem);
        min-height: clamp(200px, 32vh, 280px);
    }
    .sub-card {
        min-height: clamp(90px, 16vh, 130px);
        padding: clamp(0.75rem, 1.5vw, 1rem);
    }
}

/* Móvil */
@media (max-width: 480px) {
    .page-header {
        padding: 0.5rem 0.5rem 0.25rem;
    }
    .page-header-title {
        font-size: 1.25rem;
    }
    .main-content {
        padding: 0.75rem;
    }
    .card-container {
        padding: 0.75rem;
        gap: 0.85rem;
    }
    .card {
        padding: 0.85rem 1rem;
        min-height: clamp(180px, 30vh, 260px);
    }
    .sub-card {
        padding: 0.85rem;
        min-height: clamp(80px, 14vh, 110px);
    }
}