/* =============================================
   MPPEU — Utilidades globales
   Todas las clases usan variables de style.css
   ============================================= */

/* ─── CONTENEDOR ─────────────────────────────── */
.mppeu-wrap {
    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--padding-lateral);
}

/* ─── SECCIONES ──────────────────────────────── */
.mppeu-seccion    { padding: var(--espacio-2xl) 0; }
.mppeu-seccion-sm { padding: var(--espacio-xl) 0; }

/* ─── FONDOS ─────────────────────────────────── */
.bg-blanco      { background-color: var(--color-blanco); }
.bg-gris        { background-color: var(--color-gris-claro); }
.bg-azul        { background-color: var(--color-azul); }
.bg-azul-oscuro { background-color: var(--color-azul-oscuro); }
.bg-oscuro      { background-color: #0d1117; }

/* ─── TIPOGRAFÍA ─────────────────────────────── */
.text-azul     { color: var(--color-azul); }
.text-rojo     { color: var(--color-rojo); }
.text-amarillo { color: var(--color-amarillo); }
.text-blanco   { color: var(--color-blanco); }
.text-suave    { color: var(--color-gris-medio); }
.text-xs       { font-size: var(--texto-xs); }
.text-sm       { font-size: var(--texto-sm); }
.text-base     { font-size: var(--texto-base); }
.text-lg       { font-size: var(--texto-lg); }
.text-xl       { font-size: var(--texto-xl); }
.text-2xl      { font-size: var(--texto-2xl); }
.text-bold     { font-weight: 700; }
.text-medium   { font-weight: 500; }
.text-upper    { text-transform: uppercase; letter-spacing: 0.6px; }
.text-center   { text-align: center; }

/* ─── GRIDS ──────────────────────────────────── */
.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-lg); }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-lg); }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-lg); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-lg); }

/* ─── FLEX ───────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm       { gap: var(--espacio-sm); }
.gap-md       { gap: var(--espacio-md); }
.gap-lg       { gap: var(--espacio-lg); }
.gap-xl       { gap: var(--espacio-xl); }

/* ─── ESPACIADO ──────────────────────────────── */
.mt-sm { margin-top: var(--espacio-sm); }
.mt-md { margin-top: var(--espacio-md); }
.mt-lg { margin-top: var(--espacio-lg); }
.mt-xl { margin-top: var(--espacio-xl); }
.mb-sm { margin-bottom: var(--espacio-sm); }
.mb-md { margin-bottom: var(--espacio-md); }
.mb-lg { margin-bottom: var(--espacio-lg); }
.mb-xl { margin-bottom: var(--espacio-xl); }

/* ─── ENCABEZADO DE SECCIÓN ──────────────────── */
.sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-xl);
}

.sec-eyebrow {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--color-azul);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--espacio-xs);
}

.sec-eyebrow-claro {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: rgba(252,209,22,0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--espacio-xs);
}

.sec-titulo {
    font-size: var(--texto-xl);
    font-weight: 700;
    color: var(--color-texto);
    margin: 0;
}

.sec-titulo-claro {
    font-size: var(--texto-xl);
    font-weight: 700;
    color: var(--color-blanco);
    margin: 0;
}

/* ─── VER MÁS ────────────────────────────────── */
.ver-mas {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-azul);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-xs);
    transition: var(--transicion-rapida);
}
.ver-mas:hover        { color: var(--color-rojo); gap: var(--espacio-sm); }
.ver-mas-claro        { color: rgba(255,255,255,0.6); }
.ver-mas-claro:hover  { color: var(--color-blanco); }

/* ─── BADGES ─────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--espacio-sm);
    border-radius: var(--radio-sm);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-azul     { background: rgba(0,56,147,0.1);  color: var(--color-azul); }
.badge-rojo     { background: rgba(207,9,33,0.1);  color: var(--color-rojo); }
.badge-amarillo { background: rgba(252,209,22,0.2); color: #7a6200; }
.badge-aviso    { background: #FCD116; color: #412402; }

/* ─── BOTONES ────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-sm);
    padding: var(--espacio-sm) var(--espacio-lg);
    border-radius: var(--radio-md);
    font-size: var(--texto-sm);
    font-weight: 600;
    font-family: var(--fuente-principal);
    border: none;
    cursor: pointer;
    transition: var(--transicion-rapida);
    text-decoration: none;
}

.btn-primario        { background: var(--color-azul);    color: var(--color-blanco); }
.btn-primario:hover  { background: var(--color-azul-claro); color: var(--color-blanco); transform: translateY(-1px); box-shadow: var(--sombra-media); }

.btn-secundario       { background: transparent; color: var(--color-azul); border: 1.5px solid var(--color-azul); }
.btn-secundario:hover { background: var(--color-azul); color: var(--color-blanco); }

.btn-amarillo       { background: var(--color-amarillo); color: var(--color-azul-oscuro); }
.btn-amarillo:hover { background: #e8be00; }

.btn-blanco       { background: var(--color-blanco); color: var(--color-azul); }
.btn-blanco:hover { background: var(--color-gris-claro); }

.btn-outline-blanco       { background: transparent; color: var(--color-blanco); border: 1.5px solid rgba(255,255,255,0.4); }
.btn-outline-blanco:hover { background: rgba(255,255,255,0.1); }

.btn-sm    { padding: var(--espacio-xs) var(--espacio-md); font-size: var(--texto-xs); }
.btn-icono { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* ─── SEPARADOR ──────────────────────────────── */
.sep-azul {
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-azul), var(--color-rojo));
    border-radius: var(--radio-sm);
    margin-bottom: var(--espacio-lg);
}

/* ─── IMÁGENES ───────────────────────────────── */
.img-cover   { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }
.rounded     { border-radius: var(--radio-md); }
.rounded-lg  { border-radius: var(--radio-lg); }

/* ─── CARDS ──────────────────────────────────── */
.card {
    background: var(--color-blanco);
    border-radius: var(--radio-lg);
    border: 1px solid var(--color-gris-borde);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    transition: var(--transicion-media);
}
.card:hover  { box-shadow: var(--sombra-media); transform: translateY(-2px); }
.card-body   { padding: var(--espacio-lg); }
.card-oscura {
    background: rgba(255,255,255,0.05);
    border-radius: var(--radio-lg);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

/* ─── ÍCONOS ─────────────────────────────────── */
.icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radio-lg);
    background: rgba(0,56,147,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-wrap svg { width: 22px; height: 22px; stroke: var(--color-azul); }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid-auto { grid-template-columns: 1fr; }
    .sec-header { flex-direction: column; align-items: flex-start; gap: var(--espacio-sm); }
    .mppeu-seccion { padding: var(--espacio-xl) 0; }
}

@media (max-width: 480px) {
    .mppeu-wrap { padding-inline: var(--espacio-md); }
}