/* =======================================================
   ZERO OFFLINE® DESIGN SYSTEM
   Versión 1.0
======================================================= */

/* =======================================================
   VARIABLES GLOBALES
======================================================= */

:root{

    /* Colores corporativos */

    --primary:#21A1F1;
    --primary-dark:#1976D2;

    --secondary:#00C853;

    --dark:#1F2D3D;

    --text:#607487;

    --background:#F8FBFE;

    --white:#FFFFFF;

    --border:#DDEAF5;

    /* Espaciado */

    --section-space:64px;

    --section-title-space:32px;

    --grid-gap:64px;

    --card-gap:32px;

    /* Bordes */

    --radius-small:12px;

    --radius-medium:18px;

    --radius-large:24px;

    /* Sombras */

    --shadow-soft:
        0 18px 45px rgba(0,0,0,.05);

    --shadow-medium:
        0 25px 70px rgba(0,0,0,.08);

    /* Animaciones */

    --transition:.30s ease;

}
/* =======================================================
   LAYOUT
======================================================= */

.container{

    width:min(1280px,92%);

    margin:0 auto;

}

/* =======================================================
   SECCIONES
======================================================= */

.section{

    padding:var(--section-space) 0;

}

/* =======================================================
   TITULOS
======================================================= */

.section-title{

    max-width:920px;

    margin:0 auto var(--section-title-space);

    text-align:center;

}

.section-title h2{

    margin:12px 0 18px;

    color:var(--dark);

    line-height:1.12;

}

.section-title p{

    max-width:820px;

    margin:0 auto;

    color:var(--text);

    line-height:1.8;

}

/* =======================================================
   BADGES
======================================================= */

.section-badge,
.intro-badge{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}
/* =======================================================
   CARD COMPONENT
======================================================= */

.card{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-large);

    box-shadow:var(--shadow-soft);

    padding:40px;

    transition:all var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-medium);

}

/* ===================================================== */
/* Enterprise Sector Cards                               */
/* Fase 3 - Capítulo 3.5.9                               */
/* ===================================================== */

.sector-card{

    background:#FFFFFF;

    border:1px solid #E5EEF6;

    border-radius:24px;

    padding:36px 30px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,40,70,.05);

}

.sector-card:hover{

    transform:translateY(-8px);

    border-color:#21A1F1;

    box-shadow:0 24px 50px rgba(33,161,241,.14);

}

.sector-icon{

    width:78px;

    height:78px;

    margin:0 auto 24px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #21A1F1,
        #1565C0);

    box-shadow:
        0 12px 25px rgba(33,161,241,.28);

}

.sector-icon span{

    font-size:34px;

    color:#FFFFFF;

    font-weight:700;

}

.sector-card h3{

    margin-top:10px;

    margin-bottom:16px;

    font-size:24px;

    color:var(--dark);

}

.sector-card p{

    color:#607487;

    line-height:1.8;

}

/* ===================================================== */
/* Enterprise Sector Colors                              */
/* Fase 3 - Capítulo 3.5.10                              */
/* ===================================================== */

/* Salud */

.sector-card:nth-child(1) .sector-icon{

    background:linear-gradient(
        180deg,
        #2ED573,
        #00B050);

}

/* Financiero */

.sector-card:nth-child(2) .sector-icon{

    background:linear-gradient(
        180deg,
        #2979FF,
        #1565C0);

}

/* Industria */

.sector-card:nth-child(3) .sector-icon{

    background:linear-gradient(
        180deg,
        #607D8B,
        #37474F);

}

/* Comercio */

.sector-card:nth-child(4) .sector-icon{

    background:linear-gradient(
        180deg,
        #FF9800,
        #F57C00);

}

/* Educación */

.sector-card:nth-child(5) .sector-icon{

    background:linear-gradient(
        180deg,
        #7E57C2,
        #5E35B1);

}

/* Gobierno */

.sector-card:nth-child(6) .sector-icon{

    background:linear-gradient(
        180deg,
        #0091EA,
        #0069C0);

}