@layer pages {

/**
 * G-Certi — País Landing Pages Styles
 * ====================================
 * Styles for /paises (index) and /paises/{slug} (detail).
 * Pattern mirrors sectores.css; uses Quantum Design system.
 *
 * @version 1.0.0
 * @updated 2026-03-15
 */


/* ═══════════════════════════════════════════════════════
   PAÍS INDEX PAGE — index.php
   ═══════════════════════════════════════════════════════ */

/* ── COUNTRY CARD ── */
.pais-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pais-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

.pais-card .pais-flag {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pais-card:hover .pais-flag {
    transform: scale(1.15);
}

/* ── STAT NUMBER PULSE ── */
@keyframes pais-stat-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.pais-stat-number {
    animation: pais-stat-pulse 3s ease-in-out infinite;
}

/* ── MAP BACKGROUND (hero) ── */
.gc-hero-map {
    background-image: radial-gradient(
        circle at 30% 60%,
        rgba(166, 33, 38, 0.08) 0%,
        transparent 50%
    );
}


/* ═══════════════════════════════════════════════════════
   PAÍS DETAIL PAGE — show.php
   ═══════════════════════════════════════════════════════ */

/* ── WRAPPER ── */
.pais-detail {
    --pais-accent: #a62126;
}

/* ── HERO ACCENT ORB ── */
.pais-detail section:first-child {
    position: relative;
    overflow: hidden;
}

/* ── STATS FLOATING CARD ── */
.pais-detail .pais-stats-card {
    transition: box-shadow 0.3s ease;
}

.pais-detail .pais-stats-card:hover {
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* ── NORMA CARD HOVER ── */
.pais-detail .pais-norma-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.pais-detail .pais-norma-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.12);
}

/* ── SECTOR CARD HOVER ── */
.pais-detail .pais-sector-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.pais-detail .pais-sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.1);
}

/* ── FAQ ACCORDION TRANSITIONS ── */
.pais-detail .pais-faq-item {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pais-detail .pais-faq-item:hover {
    border-color: var(--pais-accent, #a62126);
}

.pais-detail .pais-faq-item button:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ── BADGE STYLING ── */
.pais-badge {
    letter-spacing: 0.05em;
    line-height: 1;
}

/* ── CITY TAG PILLS ── */
.pais-city-tag {
    transition: all 0.2s ease;
}

.pais-city-tag:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

/* ── CTA SECTION ── */
.pais-detail section:last-of-type {
    position: relative;
    overflow: hidden;
}

.pais-detail section:last-of-type::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}


/* ═══ FOCUS-VISIBLE FOR KEYBOARD NAV ═══ */
.pais-card:focus-visible,
.pais-detail .pais-norma-card:focus-visible,
.pais-detail .pais-sector-card:focus-visible,
.pais-detail .pais-faq-item:focus-visible {
    outline: 2px solid #a62126;
    outline-offset: 2px;
}

/* LATAM regional layer */
.pais-hero-regional {
    background: #0F172A;
}

.pais-country-image {
    min-height: 18rem;
    background-size: cover;
    background-position: center;
}

.pais-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pais-status-pill--active {
    background: rgba(166, 33, 38, .1);
    color: #a62126;
    border: 1px solid rgba(166, 33, 38, .2);
}

.pais-status-pill--consultive {
    background: rgba(100, 116, 139, .12);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, .25);
}

.pais-city {
    background: #fff;
}

.pais-city-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--gc-navy, #0F172A);
}

.pais-city-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.pais-city-btn {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    padding: .85rem 1.15rem;
    font-weight: 800;
    text-align: center;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.pais-city-btn:hover {
    transform: translateY(-1px);
}

.pais-city-btn--primary {
    background: var(--gc-red, #a62126);
    color: #fff;
    box-shadow: 0 14px 30px rgba(166, 33, 38, .25);
}

.pais-city-btn--secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
}

.pais-city-path {
    display: grid;
    gap: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    color: #0F172A;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.pais-city-path:hover {
    border-color: rgba(166, 33, 38, .35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.pais-city-path__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(166, 33, 38, .1);
    color: var(--gc-red, #a62126);
}

.pais-city-path span:last-child,
.pais-city-norma span {
    color: #64748b;
    font-size: .92rem;
    line-height: 1.55;
}

.pais-city-sector {
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: .7rem 1rem;
    color: #334155;
    font-size: .92rem;
    font-weight: 700;
}

.pais-city-norma {
    min-height: 8.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}

.pais-city-norma:hover {
    border-color: rgba(166, 33, 38, .35);
}

.pais-city-norma strong {
    color: var(--gc-red, #a62126);
    font-size: 1.15rem;
}

.pais-city-cta {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, .06);
    display: grid;
    gap: .75rem;
}

.pais-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}


/* ═══ REDUCED MOTION PREFERENCES ═══ */
@media (prefers-reduced-motion: reduce) {
    .pais-stat-number {
        animation: none !important;
    }

    .pais-card,
    .pais-card .pais-flag,
    .pais-detail .pais-norma-card,
    .pais-detail .pais-sector-card,
    .pais-detail .pais-faq-item,
    .pais-city-tag {
        transition-duration: 0.01ms !important;
    }

    .pais-card:hover,
    .pais-detail .pais-norma-card:hover,
    .pais-detail .pais-sector-card:hover {
        transform: none !important;
    }
}


} /* end @layer pages */