/* =========================

ESTILOS GENERALES

========================= */

html{

scroll-behavior:smooth;

}

body{

background:#ffffff;

}

/* Las siguientes secciones se irán agregando aquí */

/*=========================================
=             HERO SCHOOL                 =
=========================================*/

.hero-school{

    padding:40px 0 110px;
    background:
    radial-gradient(circle at top right,#eef8ff 0%,#ffffff 55%),
    linear-gradient(180deg,#ffffff,#f9fbfd);

    overflow:hidden;

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(237,118,21,.12);

    color:#ed7615;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:2.5rem;

    font-weight:800;

    color:#005b81;

    line-height:1.15;

    margin-bottom:30px;

}

.hero-content p{

    font-size:1.15rem;

    color:#5f6d78;

    line-height:1.5;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.btn-primary-school{

    background:#ed7615;

    color:#fff;

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    transition:.30s;

}

.btn-primary-school:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(237,118,21,.30);

}

.btn-secondary-school{

    border:2px solid #005b81;

    color:#005b81;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

}

.btn-secondary-school:hover{

    background:#005b81;

    color:#fff;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    font-weight:600;

    color:#005b81;

}

.hero-features i{

    color:#ed7615;

    margin-right:8px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:35px;

    box-shadow:0 35px 70px rgba(0,91,129,.12);

}

.floating-card{

    position:absolute;

    background:#fff;

    padding:14px 22px;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    font-weight:600;

    color:#005b81;

}

.card-three{

    top:8%;

    left:-30px;

}

.card-two{

    right:-25px;

    top:25%;

}

.card-one{

    bottom:35%;

    left:20px;

}

@media(max-width:991px){

.hero-school{

padding:140px 0 80px;

text-align:center;

}

.hero-content h1{

font-size:2.6rem;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

margin-bottom:45px;

}

.floating-card{

display:none;

}

}

/*=========================================
=      LA SEGURIDAD COMIENZA AQUÍ         =
=========================================*/

.peace-section{

    padding:40px 0;
    background:#ffffff;

}

.peace-image{

    position:relative;

}

.main-image{

    border-radius:28px;
    box-shadow:0 25px 60px rgba(0,91,129,.15);

}

.floating-box{

    position:absolute;
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    padding:18px;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    max-width:260px;

}

.floating-box i{

    width:55px;
    height:55px;
    border-radius:50%;
    background:#edf7fd;
    color:#005b81;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.3rem;

}

.floating-box h6{

    color:#005b81;
    margin-bottom:5px;
    font-weight:700;

}

.floating-box p{

    margin:0;
    font-size:.92rem;
    color:#6d7b88;

}

.box-1{

    top:270px;
    left:-30px;

}

.box-2{

    bottom:390px;
    right:-20px;

}

.peace-section h2{

    color:#005b81;
    font-size:3rem;
    font-weight:800;
    margin:20px 0;

}

.section-text{

    color:#667483;
    font-size:1.1rem;
    line-height:1.9;
    margin-bottom:40px;

}

.benefit-item{

    display:flex;
    gap:20px;
    margin-bottom:30px;

}

.benefit-icon{

    width:70px;
    height:70px;
    background:#fff6ef;
    color:#ed7615;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.6rem;
    flex-shrink:0;

}

.benefit-item h5{

    color:#005b81;
    font-weight:700;

}

.benefit-item p{

    color:#6d7b88;
    margin:0;

}

@media(max-width:991px){

    .peace-section{

        padding:90px 0;

    }

    .peace-section h2{

        font-size:2.3rem;
        text-align:center;

    }

    .section-text{

        text-align:center;

    }

    .floating-box{

        position:static;
        margin-top:20px;
        max-width:100%;

    }

    .benefit-item{

        margin-top:25px;

    }

}


/*=====================================
SMART ROUTE
======================================*/

.smart-route{

padding:130px 0;

background:#F4FAFD;

position:relative;

overflow:hidden;

}

.smart-route::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

background:

radial-gradient(circle at left,#d9eef7 0%,transparent 45%),
radial-gradient(circle at right,#eef8fd 0%,transparent 45%);

opacity:.8;

}

.smart-route .container{

position:relative;
z-index:2;

}

.smart-route h2{

font-size:3rem;

font-weight:800;

color:#005b81;

margin:25px 0;

}

.route-wrapper{

position:relative;

margin-top:80px;

}

.route-image{

border-radius:35px;

box-shadow:0 30px 70px rgba(0,91,129,.12);

}

.route-point{

position:absolute;

width:220px;

background:white;

padding:25px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.point-icon{

width:65px;

height:65px;

background:#ed7615;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:1.7rem;

margin-bottom:15px;

}

.point-1{

top:20px;

left:-60px;

}

.point-2{

top:80px;

right:-60px;

}

.point-3{

bottom:180px;

left:230px;

}

.point-4{

bottom:20px;

right:330px;

}

.route-point h5{

font-weight:700;

color:#005b81;

}

.route-point p{

margin:0;

color:#6c7a88;

}

@media(max-width:991px){

.route-point{

position:static;

width:100%;

margin-top:20px;

}

.smart-route h2{

font-size:2.2rem;

}

}

/*=====================================
CENTRO DE CONTROL
======================================*/

.control-center{

    padding:130px 0;

    background:#ffffff;

}

.dashboard-image{

    overflow:hidden;

    border-radius:28px;

    box-shadow:0 30px 60px rgba(0,91,129,.10);

}

.dashboard-image img{

    width:100%;

    transition:.4s;

}

.dashboard-image:hover img{

    transform:scale(1.02);

}

.control-center h2{

    font-size:3rem;

    font-weight:800;

    color:#005b81;

    margin:20px 0;

    line-height:1.2;

}

.section-description{

    font-size:1.1rem;

    color:#6c7b88;

    line-height:1.9;

    margin-bottom:45px;

}

.feature-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.feature-icon{

    width:62px;

    height:62px;

    background:#fff5ef;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.feature-icon i{

    color:#ed7615;

    font-size:1.4rem;

}

.feature-item h5{

    color:#005b81;

    font-weight:700;

    margin-bottom:8px;

}

.feature-item p{

    margin:0;

    color:#6f7f8d;

    line-height:1.7;

}

@media(max-width:991px){

.control-center{

padding:90px 0;

}

.control-center h2{

font-size:2.3rem;

text-align:center;

}

.section-description{

text-align:center;

}

.feature-item{

align-items:flex-start;

}

}

/*=====================================
PADRES INFORMADOS
======================================*/

.parents-section{

padding:120px 0;

background:linear-gradient(135deg,#005b81 0%,#0b7ba8 100%);

overflow:hidden;

}

.parents-section h2{

color:white;

font-size:3rem;

font-weight:800;

margin:25px 0;

line-height:1.2;

}

.parents-section p{

color:rgba(255,255,255,.92);

font-size:1.1rem;

line-height:1.9;

margin-bottom:40px;

}

.section-tag-white{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.12);

color:#fff;

font-weight:700;

letter-spacing:1px;

}

.parents-list{

display:flex;

flex-direction:column;

gap:18px;

}

.parents-list div{

display:flex;

align-items:center;

gap:15px;

color:white;

font-size:1.05rem;

font-weight:600;

}

.parents-list i{

color:#ed7615;

font-size:1.25rem;

}

.phone-app{

max-width:430px;

filter:drop-shadow(0 30px 45px rgba(0,0,0,.30));

transition:.4s;

}

.phone-app:hover{

transform:translateY(-8px);

}

@media(max-width:991px){

.parents-section{

text-align:center;

padding:90px 0;

}

.parents-section h2{

font-size:2.3rem;

}

.parents-list{

margin-bottom:50px;

align-items:center;

}

.phone-app{

max-width:320px;

}

}

/*=====================================
PLATFORM FEATURES
======================================*/

.platform-features{

    padding:130px 0;

    background:#f7fbfd;

}

.platform-features h2{

    color:#005b81;

    font-size:3rem;

    font-weight:800;

    margin:25px 0;

}

.platform-features p{

    color:#667482;

}

.feature-card{

    background:#ffffff;

    border-radius:24px;

    padding:40px 35px;

    height:100%;

    transition:.35s;

    border:1px solid #edf2f6;

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,91,129,.10);

    border-color:#ed7615;

}

.feature-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff4eb;

    color:#ed7615;

    border-radius:18px;

    font-size:1.8rem;

    margin-bottom:25px;

}

.feature-card h4{

    color:#005b81;

    font-weight:700;

    margin-bottom:15px;

}

.feature-card p{

    line-height:1.8;

    margin:0;

}

@media(max-width:991px){

.platform-features{

padding:90px 0;

}

.platform-features h2{

font-size:2.2rem;

}

.feature-card{

padding:30px;

}

}

/*=====================================
CENTRO DE ALERTAS
======================================*/

.alerts-section{

    padding:130px 0;

    background:#ffffff;

}

.alert-console{

    background:#ffffff;

    border-radius:28px;

    padding:35px;

    box-shadow:0 30px 60px rgba(0,91,129,.08);

    border:1px solid #edf2f6;

}

.alert-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 20px;

    border-radius:18px;

    margin-bottom:18px;

    transition:.3s;

}

.alert-item:hover{

    transform:translateX(8px);

}

.alert-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.3rem;

    flex-shrink:0;

}

.success .alert-icon{

    background:#2ecc71;

}

.warning .alert-icon{

    background:#f39c12;

}

.info .alert-icon{

    background:#3498db;

}

.danger .alert-icon{

    background:#e74c3c;

}

.primary .alert-icon{

    background:#cb1e15;

}

.alert-item h5{

    margin:0;

    color:#005b81;

    font-weight:700;

}

.alert-item span{

    color:#6f7f8d;

    font-size:.92rem;

}

.alerts-content h3{

    color:#005b81;

    font-size:2.4rem;

    font-weight:800;

    margin-bottom:25px;

}

.alerts-content p{

    color:#687887;

    line-height:1.9;

    margin-bottom:35px;

}

.alerts-benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.alerts-benefits div{

    background:#f7fbfd;

    border-radius:18px;

    padding:18px;

    font-weight:600;

    color:#005b81;

}

.alerts-benefits i{

    color:#ed7615;

    margin-right:10px;

}

@media(max-width:991px){

.alerts-section{

padding:90px 0;

}

.alerts-content{

margin-top:50px;

}

.alerts-content h3{

font-size:2rem;

text-align:center;

}

.alerts-benefits{

grid-template-columns:1fr;

}

}

/*=====================================
STAKEHOLDERS
======================================*/

.stakeholders-section{

    padding:130px 0;

    background:#f7fafc;

}

.stakeholders-section h2{

    font-size:3rem;

    font-weight:800;

    color:#005b81;

    margin:20px 0;

}

.stakeholder-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    height:100%;

    transition:.35s;

    border:1px solid #edf2f5;

}

.stakeholder-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,91,129,.08);

}

.stakeholder-icon{

    width:75px;

    height:75px;

    border-radius:22px;

    background:#fff5ed;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.stakeholder-icon i{

    font-size:2rem;

    color:#ed7615;

}

.stakeholder-card h3{

    color:#005b81;

    font-weight:700;

    margin-bottom:18px;

}

.stakeholder-card p{

    color:#6b7b88;

    line-height:1.8;

}

.stakeholder-card ul{

    margin-top:25px;

    padding-left:18px;

}

.stakeholder-card li{

    margin-bottom:10px;

    color:#005b81;

    font-weight:500;

}

@media(max-width:991px){

.stakeholders-section{

padding:90px 0;

}

.stakeholders-section h2{

font-size:2.2rem;

}

.stakeholder-card{

padding:30px;

}

}

/*=====================================
MÉTRICAS
======================================*/

.metrics-section{

    padding:120px 0;

    background:#0e3552;

    color:#fff;

}

.section-tag-dark{

    display:inline-block;

    background:rgba(255,255,255,.12);

    padding:10px 22px;

    border-radius:40px;

    color:#fff;

    font-weight:700;

    letter-spacing:1px;

}

.metrics-section h2{

    font-size:3rem;

    font-weight:800;

    margin:25px 0;

}

.metrics-section p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

}

.metrics-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.metric-card{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:40px;

    transition:.35s;

}

.metric-card:hover{

    transform:translateY(-8px);

    border-color:#ed7615;

}

.metric-card h3{

    color:#ed7615;

    font-size:2.6rem;

    font-weight:800;

    margin-bottom:10px;

}

.metric-card span{

    color:#fff;

    font-weight:600;

}

@media(max-width:991px){

.metrics-section{

padding:90px 0;

text-align:center;

}

.metrics-section h2{

font-size:2.2rem;

}

.metrics-grid{

grid-template-columns:1fr;

margin-top:40px;

}

}

/*=====================================
CTA PREMIUM
======================================*/

.cta-premium{

padding:140px 0;

background:linear-gradient(135deg,#005b81 0%,#0e3b5f 100%);

position:relative;

overflow:hidden;

}

.cta-premium::before{

content:"";

position:absolute;

top:-250px;

right:-200px;

width:500px;

height:500px;

background:rgba(255,255,255,.05);

border-radius:50%;

}

.cta-premium::after{

content:"";

position:absolute;

bottom:-180px;

left:-120px;

width:350px;

height:350px;

background:rgba(237,118,21,.12);

border-radius:50%;

}

.cta-premium .container{

position:relative;

z-index:2;

}

.cta-image{

overflow:hidden;

border-radius:30px;

box-shadow:0 35px 70px rgba(0,0,0,.25);

}

.cta-image img{

transition:.45s;

}

.cta-image:hover img{

transform:scale(1.03);

}

.cta-premium h2{

font-size:3rem;

font-weight:800;

color:#fff;

margin:25px 0;

line-height:1.2;

}

.cta-premium p{

color:rgba(255,255,255,.90);

font-size:1.1rem;

line-height:1.9;

margin-bottom:35px;

}

.cta-benefits{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:40px;

}

.cta-benefits div{

color:#fff;

font-weight:600;

display:flex;

align-items:center;

gap:12px;

}

.cta-benefits i{

color:#ed7615;

font-size:1.2rem;

}

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-demo{

background:#ed7615;

color:#fff;

padding:16px 34px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.btn-demo:hover{

background:#ff8d30;

color:#fff;

transform:translateY(-4px);

}

.btn-whatsapp{

background:rgba(255,255,255,.12);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.2);

color:#fff;

padding:16px 34px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.btn-whatsapp:hover{

background:#fff;

color:#005b81;

}

@media(max-width:991px){

.cta-premium{

padding:90px 0;

text-align:center;

}

.cta-premium h2{

font-size:2.3rem;

}

.cta-benefits{

grid-template-columns:1fr;

}

.cta-buttons{

justify-content:center;

}

}