html { scroll-behavior: smooth; }
    body { background:#f4f6f9; }
    .texto-justificado{ text-align: justify; }
    .navbar { box-shadow: 0 6px 24px rgba(0,0,0,.06); }

    /* ====== Navbar color ====== */
    :root{
      --infop-cyan: #39d5ed;
      --infop-text: #083c4a;
      --infop-text-hover: #022a36;
    }
    .navbar-infop{ background-color: var(--infop-cyan) !important; }
    .navbar-infop .navbar-brand,
    .navbar-infop .nav-link{
      color: var(--infop-text) !important;
      font-weight: 600;
    }
    .navbar-infop .nav-link:hover,
    .navbar-infop .nav-link:focus{
      color: var(--infop-text-hover) !important;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .navbar-infop .nav-link.active{ color: var(--infop-text-hover) !important; }
    .navbar-infop .navbar-toggler{ border-color: rgba(0,0,0,.35); }

    /* ====== Layout / cards ====== */
    .hero h1 { font-weight: 800; letter-spacing:.3px; }
    .section-pad { padding: 80px 0; }
    .divider { height: 1px; background: rgba(0,0,0,.08); margin: 24px 0; }

    .stat-card {
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      transition: transform .2s ease, box-shadow .2s ease;
      background:#fff;
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

    /* Pill general */
    .pill {
      display:inline-block; padding:.35rem .75rem; border-radius:999px;
      background:#e9f7fb; color:#0ea5e9; font-weight:600; font-size:.85rem;
    }

    /* ====== KPI cards ====== */
    .kpi-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.08);
      border-radius:18px;
      padding:28px 24px;
      text-align:center;
      box-shadow:0 10px 24px rgba(0,0,0,.05);
      transform: translateY(12px);
      opacity:0;
      transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s;
    }
    .kpi-card.is-visible{ transform: translateY(0); opacity:1; }
    .kpi-number{ font-weight:800; font-size: clamp(28px, 4vw, 44px); line-height:1; letter-spacing:.5px; }
    .kpi-label{ margin-top:10px; color:#222; font-size: clamp(14px, 1.8vw, 18px); }
    .kpi-green{ color:#16a34a; } .kpi-blue{ color:#0ea5e9; }
    .kpi-yellow{ color:#f59e0b; } .kpi-purple{ color:#a855f7; }

    /* ====== PowerBI iframe ====== */
    .embed-wrap {
      height: 80vh;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.08);
      background: #fff;
    }
    .embed-wrap iframe { width:100%; height:100%; border:0; }

    footer { background:#0f172a; color:#cbd5e1; }
    .footer-link { color:#cbd5e1; text-decoration:none; }
    .footer-link:hover { color:#fff; text-decoration:underline; }

    /* ====== Hero con imagen ====== */
    .hero{
      position: relative;
      min-height: 70vh;
      display: grid;
      place-items: center;
      text-align: center;
      color: #ffffff;
      padding: 4rem 1rem;
      overflow: hidden;
    }
    .hero .container{ position: relative; z-index: 1; }
    .hero-photo::before {
        content:"";
        position:absolute; inset:0;
        background: url('/img/inicio.png') center/cover no-repeat;
        filter: none;
        transform: none;
        image-rendering: auto;
        z-index: 0;
    }


  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.35) 0%,
      rgba(14,165,233,.12) 40%,
      rgba(0,0,0,.35) 100%
    );
    pointer-events:none;
    z-index: 1;
  }

    #inicio h1 { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
    #inicio p  { text-shadow: 0 1px 8px rgba(0,0,0,.35); }

    /* Pill SOLO para el hero */
    .pill-hero{
      background: rgba(255,255,255,.14);
      color:#fff;
      border:1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      padding:.4rem .85rem;
      font-weight:600; font-size:.9rem;
      backdrop-filter: blur(2px);
    }
    .btn-hero{
      color:#0b2136;
      background: linear-gradient(135deg, #5CD0E1, #0ea5e9);
      border: none;
      box-shadow: 0 10px 24px rgba(14,165,233,.35);
    }
    .btn-hero:hover{ filter: brightness(1.06); transform: translateY(-1px); }

    @keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
    .a1,.a2,.a3,.a4 { opacity:0; animation: fadeUp .7s ease forwards; }
    .a1{ animation-delay: 0ms; } .a2{ animation-delay: 120ms; }
    .a3{ animation-delay: 220ms; } .a4{ animation-delay: 320ms; }
    @media (max-width: 576px){ .hero{ min-height: 60vh; padding: 3rem 1rem; } }
    @media (prefers-reduced-motion: reduce){ .a1,.a2,.a3,.a4{ animation:none; opacity:1; transform:none; } }

    /* ====== SIDE efectos reveal ====== */
    .side-img-wrap {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,.08);
      display: inline-block; /* se ajusta al tamaño de la imagen */
    }

    .side-img {
      display: block;
      max-width: 100%;
      height: auto;       /* mantiene proporción original */
    }

    #side .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease;}
    #side .reveal.is-visible{opacity:1; transform:none;}

    /* ====== Sobre INFOP reveal ====== */
    #sobre .duration{ font-weight:600; }
    #sobre .reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
    #sobre .reveal.is-visible{ opacity:1; transform:none; }

    /* ====== Misión/Visión/Valores (clases genéricas) ====== */
    .mv-card{
      position: relative; background:#fff; border:1px solid rgba(0,0,0,.08);
      border-radius:16px; padding:24px; box-shadow:0 10px 24px rgba(0,0,0,.05);
      overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
    }
    .mv-card:hover{ transform: translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.08); }
    .mv-accent{ position:absolute; inset:0 0 auto 0; height:6px; }
    .mv-accent-mision{ background: linear-gradient(90deg, #0ea5e9, #5CD0E1); }
    .mv-accent-vision{ background: linear-gradient(90deg, #a855f7, #6366f1); }
    .mv-value{
      background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:16px;
      padding:18px 16px; height:100%; transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
    }
    .mv-value:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.07); border-color: rgba(14,165,233,.35); }
    .mv-icon{
      width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
      background:#e9f7fb; color:#0ea5e9; margin-bottom:8px; font-size:20px;
    }
    .mv-reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
    .mv-reveal.is-visible{ opacity:1; transform:none; }

    /* ====== Acordeones por sección (más bonito) ====== */
    .section-acc .accordion-item{
      position: relative;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      margin-bottom: 1rem;
    }
    .section-acc .accordion-item::before{
      content:""; position:absolute; inset:0 0 auto 0; height:4px;
      background: linear-gradient(90deg, #39d5ed, #0ea5e9);
      opacity:.9;
    }
    .section-acc .accordion-button{
      background: #e9f7fb;
      color: #0b2136;
      font-weight: 700;
      padding: 1rem 1.25rem;
      border:0;
    }
    .section-acc .accordion-button:focus{
      box-shadow: 0 0 0 .2rem rgba(57,213,237,.25);
    }
    .section-acc .accordion-button:not(.collapsed){
      background: var(--infop-cyan);
      color: var(--infop-text);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .section-acc .accordion-button::after{ transition: transform .25s ease; }
    .section-acc .accordion-button:not(.collapsed)::after{ transform: rotate(180deg); }
    .section-acc .accordion-body{ background:#fff; padding: 1.25rem 1.25rem 1.5rem; }
    .section-pad + .section-pad{ padding-top:1px; }