:root{
    --navy:#0A2A4E;
    --blue:#1B4F91;
    --sky:#3E92CC;
    --sky-light:#EAF4FB;
    --paper:#F7FAFC;
    --white:#FFFFFF;
    --ink:#12233A;
    --line: rgba(10,42,78,0.12);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Sora',sans-serif;
    margin:0;
    color:var(--navy);
  }
  p{margin:0;line-height:1.65;}
  a{color:inherit;text-decoration:none;}
  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:0.72rem;
  }
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .reveal{ opacity:1 !important; transform:none !important; }
  }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
    transition-delay:var(--reveal-delay, 0s);
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:none;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(247,250,252,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 32px;
    max-width:1120px;
    margin:0 auto;
    height:56px;
    box-sizing:content-box;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--navy);
  }
  .brand .logo-slot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 80px;
    height:80px;
    flex-shrink:0;
    overflow:hidden;
    line-height:0;
  }
  /* Paste your <svg>...</svg> inside .logo-slot in the HTML.
     !important forces the slot's size to win even if the pasted
     SVG carries its own width="100" height="100" attributes,
     so the nav bar height never grows no matter the source size. */
  .brand .logo-slot svg{
    width:100% !important;
    height:100% !important;
    display:block;
  }
  .navlinks{
    display:flex;
    gap:28px;
    font-size:0.88rem;
    font-weight:500;
    color:var(--blue);
  }
  .navlinks a{opacity:0.85;transition:opacity .2s;}
  .navlinks a:hover{opacity:1;}
  .navlinks a:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid var(--sky);
    outline-offset:3px;
    border-radius:3px;
  }
  @media (max-width:760px){ .navlinks{display:none;} }

  /* ---------- HERO with network signature ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, var(--navy) 0%, #0E3B6B 60%, var(--blue) 100%);
    color:var(--white);
  }
  .hero-inner{
    max-width:1120px;
    margin:0 auto;
    padding:110px 32px 90px;
    position:relative;
    z-index:2;
  }
  #network{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:0.55;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#BFE0F5;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:'';
    width:22px;height:1px;
    background:#BFE0F5;
    display:inline-block;
  }
  .hero h1{
    color:var(--white);
    font-size:clamp(2.3rem, 5.2vw, 4.1rem);
    line-height:1.06;
    font-weight:800;
    max-width:820px;
    letter-spacing:-0.01em;
  }
  .hero h1 em{
    font-style:normal;
    color:#8FD1FF;
  }
  .hero .lede{
    margin-top:26px;
    max-width:600px;
    font-size:1.08rem;
    color:#D7E9F7;
    line-height:1.7;
  }
  .hero-cta{
    margin-top:40px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    padding:14px 26px;
    border-radius:8px;
    font-weight:600;
    font-size:0.92rem;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-primary{
    background:var(--white);
    color:var(--navy);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.18); }
  .btn-ghost{
    color:var(--white);
    border-color:rgba(255,255,255,0.4);
  }
  .btn-ghost:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }

  .hero-stats{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:12px;
    overflow:hidden;
  }
  .hero-stats div{
    background:rgba(255,255,255,0.03);
    padding:22px 20px;
  }
  .hero-stats .num{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:1.7rem;
    color:var(--white);
  }
  .hero-stats .label{
    margin-top:6px;
    font-size:0.8rem;
    color:#B9D6EC;
  }
  @media (max-width:700px){
    .hero-stats{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- SECTION SCAFFOLD ---------- */
  section{
    padding:96px 0;
  }
  .section-head{
    max-width:680px;
    margin-bottom:52px;
  }
  .section-head .mono{ color:var(--sky); }
  .section-head h2{
    font-size:clamp(1.7rem,3vw,2.4rem);
    margin-top:12px;
    line-height:1.15;
  }
  .section-head p{
    margin-top:16px;
    color:#3B5978;
    font-size:1.02rem;
  }
  .divider{
    height:1px;
    background:var(--line);
    max-width:1120px;
    margin:0 auto;
  }

  /* ---------- JUSTIFICACION ---------- */
  .justif{
    background:var(--white);
  }
  .justif-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:56px;
    align-items:start;
  }
  .justif-grid p{ color:#31445B; font-size:1.02rem; }
  .justif-grid p + p{ margin-top:18px; }
  .pull{
    background:var(--sky-light);
    border-radius:16px;
    padding:32px 30px;
  }
  .pull .mono{
    color:var(--blue);
    background:rgba(27,79,145,0.08);
    display:inline-block;
    padding:5px 12px;
    border-radius:20px;
    margin-bottom:16px;
  }
  .pull p{ color:var(--navy); font-weight:600; font-size:1.08rem; line-height:1.5; font-family:'Sora',sans-serif;}
  @media (max-width:800px){ .justif-grid{grid-template-columns:1fr;} }

  /* ---------- OBJETIVOS ---------- */
  .objetivos{ background:var(--paper); }
  .obj-row{
    display:flex;
    border-top:1px solid var(--line);
    padding:26px 0;
    gap:28px;
    align-items:baseline;
  }
  .obj-row:last-child{ border-bottom:1px solid var(--line); }
  .obj-tag{
    font-family:'Sora',sans-serif;
    font-weight:700;
    color:var(--sky);
    font-size:0.85rem;
    width:110px;
    flex-shrink:0;
  }
  .obj-row p{ color:#31445B; font-size:1rem; }
  .obj-general{
    background:var(--navy);
    color:var(--white);
    border-radius:12px;
    padding:36px 38px;
    margin-bottom:8px;
  }
  .obj-general .mono{ color:#8FD1FF; }
  .obj-general h3{ color:var(--white); font-size:1.35rem; margin-top:10px; line-height:1.4; font-weight:600;}

  /* ---------- NECESIDADES cards ---------- */
  .necesidades{ background:var(--white); }
  .need-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  @media (max-width:900px){ .need-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .need-grid{grid-template-columns:1fr;} }
  .need-card{
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px 26px;
    background:var(--paper);
    transition:border-color .2s ease, transform .2s ease;
  }
  .need-card:hover{ border-color:var(--sky); transform:translateY(-3px); }
  .need-card .n{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:1.6rem;
    color:var(--sky);
    line-height:1;
  }
  .need-card h4{
    margin-top:14px;
    font-size:1.05rem;
    font-weight:700;
  }
  .need-card .need-lbl{
    margin-top:8px;
    color:#5B7591;
    font-size:0.9rem;
  }
  .need-card ul{
    margin:16px 0 0;
    padding-left:0;
    list-style:none;
  }
  .need-card li{
    font-size:0.9rem;
    color:#31445B;
    padding:7px 0 7px 18px;
    border-top:1px solid var(--line);
    position:relative;
  }
  .need-card li:first-child{ border-top:none; }
  .need-card li::before{
    content:'';
    position:absolute;
    left:0; top:15px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--sky);
  }

  /* ---------- EXPO ---------- */
  .expo{
    background:linear-gradient(180deg, var(--navy), #0E3B6B);
    color:var(--white);
  }
  .expo .section-head p{ color:#C6DFF0; }
  .expo .section-head .mono{ color:#8FD1FF; }
  .expo-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }
  @media (max-width:760px){ .expo-grid{grid-template-columns:1fr;} }
  .expo-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:30px 28px;
  }
  .expo-card .letter{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:0.85rem;
    color:#8FD1FF;
    border:1px solid rgba(143,209,255,0.4);
    border-radius:50%;
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .expo-card h4{ color:var(--white); font-size:1.12rem; font-weight:700; }
  .expo-card p.desc{ margin-top:10px; color:#C6DFF0; font-size:0.92rem; line-height:1.6;}
  .expo-card ul{ margin:16px 0 0; padding-left:18px; }
  .expo-card li{ color:#DCEBF7; font-size:0.88rem; padding:4px 0; }

  /* ---------- PROPUESTA VALOR ---------- */
  .valor{ background:var(--white); }
  .valor-box{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
  .valor-top{
    padding:44px 44px 30px;
    background:var(--sky-light);
  }
  .valor-top p{ color:#1E3A57; font-size:1.08rem; max-width:760px; }
  .valor-quote{
    padding:34px 44px;
    background:var(--navy);
  }
  .valor-quote p{
    font-family:'Sora',sans-serif;
    color:var(--white);
    font-size:1.3rem;
    font-weight:600;
    line-height:1.5;
    max-width:700px;
  }
  @media (max-width:640px){
    .valor-top, .valor-quote{ padding:30px 26px; }
  }

  /* ---------- CTA / FOOTER ---------- */
  .cta{
    background:var(--paper);
    padding:100px 0 60px;
    text-align:center;
  }
  .cta h2{
    font-size:clamp(1.7rem,3.4vw,2.5rem);
    max-width:640px;
    margin:0 auto;
    line-height:1.2;
  }
  .cta p{
    margin-top:18px;
    color:#3B5978;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .cta .hero-cta{ justify-content:center; margin-top:34px; }
  .cta .btn-primary{ background:var(--blue); color:var(--white); }
  .cta .btn-ghost{ color:var(--blue); border-color:var(--blue); }
  .cta .btn-ghost:hover{ background:rgba(27,79,145,0.06); }

  footer{
    border-top:1px solid var(--line);
    padding:32px 0 40px;
  }
  .foot-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  .foot-row .mono{ color:#7A93AC; }

  /* ---------- CONTACT BUTTON ---------- */
  .btn-contact{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.86rem;
    padding:10px 20px;
    border-radius:8px;
    border:1px solid var(--blue);
    background:var(--blue);
    color:var(--white);
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
  }
  .btn-contact:hover{ background:var(--navy); transform:translateY(-1px); }
  .btn-contact-footer{
    border-color:var(--blue);
    background:transparent;
    color:var(--blue);
  }
  .btn-contact-footer:hover{ background:rgba(27,79,145,0.08); color:var(--blue); }

  /* ---------- CONTACT MODAL ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,26,46,0.55);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:100;
  }
  .modal-overlay[hidden]{ display:none; }
  .modal-box{
    position:relative;
    background:var(--white);
    border-radius:18px;
    max-width:440px;
    width:100%;
    padding:40px 36px 34px;
    box-shadow:0 30px 70px rgba(10,26,46,0.35);
    animation:modalIn .25s ease;
  }
  @keyframes modalIn{
    from{ opacity:0; transform:translateY(14px) scale(0.98); }
    to{ opacity:1; transform:none; }
  }
  .modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:var(--sky-light);
    color:var(--navy);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
  }
  .modal-close:hover{ background:#DCEEFA; }
  .modal-eyebrow{ color:var(--sky); }
  .modal-box h3{
    margin-top:12px;
    font-size:1.5rem;
  }
  .modal-sub{
    margin-top:10px;
    color:#5B7591;
    font-size:0.92rem;
    line-height:1.6;
  }
  .contact-list{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .contact-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper);
  }
  .contact-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--navy);
    color:var(--white);
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:0.85rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .contact-info{ min-width:0; }
  .contact-name{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:0.98rem;
    color:var(--navy);
  }
  .contact-role{
    font-size:0.82rem;
    color:#5B7591;
    margin-top:2px;
  }
  .contact-phone{
    display:inline-block;
    margin-top:6px;
    font-size:0.95rem;
    font-weight:600;
    color:var(--blue);
  }
  .contact-phone:hover{ text-decoration:underline; }

  .contact-phone{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:6px;
    font-size:0.95rem;
    font-weight:600;
    color:var(--blue);
  }
  .contact-phone:hover{ text-decoration:underline; }
  .wa-icon{
    width:16px;
    height:16px;
    color:#25D366;
    flex-shrink:0;
  }

  p {
  text-align: justify;
}

/*=================================================
            EVENTO DESTACADO
==================================================*/

.event-highlight{

    padding:90px 0;

    background:
    radial-gradient(circle at top right,#eef8ff 0%,#ffffff 45%);

    overflow:hidden;

}

.event-container{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:70px;

    align-items:center;

}

.event-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:#EAF4FB;

    color:var(--blue);

    font-weight:600;

    margin-bottom:22px;

}

.event-badge i{

    color:var(--sky);

}

.event-info h2{

    font-size:2.4rem;

    line-height:1.15;

    margin-bottom:22px;

}

.event-info p{

    font-size:1.05rem;

    line-height:1.8;

    color:#516B85;

    max-width:620px;

}

.event-details{

    margin:40px 0;

    display:grid;

    gap:18px;

}

.detail{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:white;

    border:1px solid rgba(0,0,0,.06);

    border-radius:16px;

    transition:.35s;

}

.detail:hover{

    transform:translateX(8px);

    border-color:var(--sky);

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:linear-gradient(
        135deg,
        var(--blue),
        var(--sky)
    );

    color:white;

    font-size:22px;

    box-shadow:0 12px 25px rgba(27,79,145,.25);

}

.detail strong{

    display:block;

    font-size:1rem;

    color:var(--navy);

}

.detail small{

    color:#73869B;

    font-size:.9rem;

}

.event-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.event-buttons i{

    margin-right:8px;

}


/*======================
     INVITACIÓN
======================*/

.event-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.invitation-card{

    background:white;

    padding:12px;

    border-radius:22px;

    transform:rotate(-4deg);

    box-shadow:
    0 30px 80px rgba(0,0,0,.22);

    transition:
    transform .45s,
    box-shadow .45s;

    animation:floatCard 6s ease-in-out infinite;

}

.invitation-card:hover{

    transform:
    rotate(0deg)
    scale(1.04);

    box-shadow:
    0 40px 90px rgba(0,0,0,.28);

}

.invitation-card img{

    display:block;

    width:100%;

    max-width:370px;

    border-radius:14px;

}


/* efecto flotante */

@keyframes floatCard{

    0%{

        transform:
        rotate(-4deg)
        translateY(0px);

    }

    50%{

        transform:
        rotate(-4deg)
        translateY(-10px);

    }

    100%{

        transform:
        rotate(-4deg)
        translateY(0px);

    }

}


@media(max-width:900px){

    .event-container{

        grid-template-columns:1fr;

    }

    .event-image{

        order:-1;

        margin-bottom:30px;

    }

    .event-info{

        text-align:center;

    }

    .event-info p{

        margin:auto;

    }

    .event-buttons{

        justify-content:center;

    }

}