:root{
    --ink:#0e2a52;          /* azul institucional profundo */
    --navy:#123a73;
    --paper:#ffffff;        /* blanco institucional */
    --paper-deep:#eef3fa;   /* azul muy tenue para fondos */
    --accent:#c8102e;       /* rojo institucional */
    --accent-deep:#9c0c23;
    --blue:#1d4e9c;         /* azul medio para acentos */
    --muted:#5c6b82;
    --line:rgba(14,42,82,.14);
    --display:"Fraunces",Georgia,serif;
    --body:"Newsreader",Georgia,serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:18px;
    line-height:1.7;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* paper grain */
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:1;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

  /* ---------- top bar ---------- */
  header.topbar{
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(8px);
  }
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em}
  .brand .full{color:var(--muted);font-weight:400;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
  nav > ul{display:flex;gap:30px;list-style:none}
  
  nav a:hover,nav a.active{opacity:1}
  nav a.active{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:4px}
  @media(max-width:820px){nav{display:none}}

  /* ---------- hero ---------- */
  .hero{padding:90px 0 70px;border-bottom:1px solid var(--line);position:relative}
  .kicker{
    font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
    font-weight:500;margin-bottom:26px;display:flex;align-items:center;gap:14px;
  }
  .kicker::before{content:"";width:42px;height:3px;background:linear-gradient(90deg,var(--accent) 0 50%,var(--blue) 50% 100%)}
  .hero h1{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(2.8rem,7vw,5.6rem);
    line-height:.98;
    letter-spacing:-.025em;
    max-width:14ch;
  }
  .hero h1 em{font-style:italic;color:var(--accent)}
  .hero .lede{
    margin-top:34px;max-width:60ch;font-size:1.32rem;line-height:1.62;color:#2a3b54;
    font-weight:300;
  }
  .hero .lede strong{font-weight:500;color:var(--ink)}

  .reveal{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}

  /* ---------- mission / vision ---------- */
  .mv{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .mv > div{padding:64px 56px}
  .mv > div:first-child{border-right:1px solid var(--line)}
  @media(max-width:780px){.mv{grid-template-columns:1fr}.mv>div{padding:48px 8px}.mv>div:first-child{border-right:none;border-bottom:1px solid var(--line)}}
  .mv h2{
    font-family:var(--display);font-weight:500;font-size:1.7rem;letter-spacing:-.01em;
    margin-bottom:20px;display:flex;align-items:baseline;gap:12px;
  }
  .mv h2 span{font-family:var(--body);font-size:.8rem;color:var(--accent);letter-spacing:.1em}
  .mv p{color:#2e3f57;font-size:1.06rem}

  /* ---------- section header ---------- */
  .sec{padding:80px 0;border-bottom:1px solid var(--line)}
  .sec-head{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin-bottom:8px}
  .sec-sub{color:var(--muted);font-size:.95rem;margin-bottom:50px;font-style:italic}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  @media(max-width:880px){.cards{grid-template-columns:1fr}}
  .card{
    padding:40px 34px 46px;border-bottom:1px solid var(--line);position:relative;
    transition:background .35s;
  }
  .card:not(:last-child){border-right:1px solid var(--line)}
  @media(max-width:880px){.card:not(:last-child){border-right:none}}
  .card:hover{background:var(--paper-deep)}
  .card .num{font-family:var(--display);font-size:.9rem;color:var(--accent);letter-spacing:.05em}
  .card h3{font-family:var(--display);font-weight:600;font-size:1.34rem;line-height:1.15;margin:18px 0 16px;letter-spacing:-.01em}
  .card p{font-size:1rem;color:#34465e}

  /* ---------- principles ---------- */
  .principles{background:var(--ink);color:var(--paper);padding:84px 0}
  .principles .sec-head{color:var(--paper)}
  .principles .sec-sub{color:rgba(255,255,255,.6)}
  .plist{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.18)}
  @media(max-width:720px){.plist{grid-template-columns:1fr}}
  .plist li{
    list-style:none;padding:24px 4px;border-bottom:1px solid rgba(255,255,255,.18);
    display:flex;gap:18px;align-items:flex-start;font-size:1.05rem;line-height:1.4;
  }
  .plist li:nth-child(odd){padding-right:40px}
  .plist .dot{color:var(--accent);font-family:var(--display);font-weight:600;flex-shrink:0;font-size:.95rem;padding-top:.18em}

  /* ---------- commitment ---------- */
  .commit{padding:96px 0}
  .commit .wrap{max-width:820px}
  .commit blockquote{
    font-family:var(--display);font-weight:400;font-style:italic;
    font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.32;letter-spacing:-.015em;
    border-left:3px solid var(--accent);padding-left:34px;color:#13294d;
  }
  .commit p{margin-top:30px;color:#34465e;font-size:1.1rem}

  /* ---------- footer ---------- */
  footer{background:var(--paper-deep);border-top:1px solid var(--line);padding:54px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
  footer .brand{font-size:1.1rem}
  .motto{font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.05rem}
  footer small{color:var(--muted);font-size:.8rem;letter-spacing:.04em}