/**
 * ISPS Theme — global.css
 * Utilidades globales: wrapper, grids, animaciones, colores utilitarios.
 * Tomadas de isps-page-fixes.php (mu-plugin) y migradas aquí.
 */

/* ============================================================
   UTILIDADES DE COLOR
============================================================ */
.text-white  { color: #ffffff !important; }
.text-blue   { color: var(--isps-blue) !important; }
.text-navy   { color: var(--isps-navy) !important; }
.text-yellow { color: var(--isps-yellow) !important; }
.text-slate  { color: var(--isps-slate-dark) !important; }
.text-muted  { color: var(--isps-slate) !important; }
.text-green  { color: var(--isps-green) !important; }
.text-center { text-align: center; }

/* ============================================================
   WRAPPER / CONTAINER
============================================================ */
.isps-wrapper {
    max-width: var(--isps-max-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--isps-padding-x);
    padding-right: var(--isps-padding-x);
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

@media (max-width: 768px) {
    .isps-wrapper { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   GRIDS UTILITARIOS
============================================================ */
.isps-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.isps-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.isps-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-2x2-fix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
@media (max-width: 768px) {
    .isps-grid-2, .isps-grid-3, .isps-grid-4, .grid-2x2-fix {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .isps-grid-3, .isps-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   REVEAL ANIMATION (SCROLL)
============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================================
   SECTION TAG
============================================================ */
.section-tag, .isps-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--isps-blue);
    margin-bottom: 12px;
}

/* ============================================================
   OVERFLOW GENERAL
============================================================ */
body { overflow-x: hidden; }
section { overflow-x: hidden; }

/* ============================================================
   KEYFRAMES GENERALES
============================================================ */
@keyframes girar_infinito {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes promoPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
@keyframes ispsBadgePulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(245,158,11,0.3); transform: translateY(0); }
    50%       { box-shadow: 0 6px 28px rgba(245,158,11,0.55); transform: translateY(-2px); }
}