:root{
  --turquesa:#5FB9AC;
  --turquesa-hondo:#17756B;
  --terracota:#D2422A;
  --terracota-hondo:#A6321E;
  --purpura:#593656;
  --purpura-noche:#241826;
  --cardon:#96B450;
  --durazno:#F4C3A3;

  --fondo:#FBFAF8;
  --fondo-alt:#F1F6F4;
  --superficie:#FFFFFF;
  --borde:#E2DDD9;
  --borde-fuerte:#CFC7C2;
  --tinta:#2B2130;
  --tinta-suave:#5F5567;
  --sombra:0 1px 2px rgba(36,24,38,.05), 0 8px 24px -18px rgba(36,24,38,.35);
  --chip-bg:#593656; --chip-fg:#FFFFFF;
  --dato-a:#17756B; --dato-b:#D2422A; --dato-c:#593656; --dato-d:#5E7A2E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#1B1220;
    --fondo-alt:#221729;
    --superficie:#271B2E;
    --borde:#3B2C44;
    --borde-fuerte:#54405F;
    --tinta:#F3ECEF;
    --tinta-suave:#C0AFC6;
    --turquesa-hondo:#79CFC1;
    --terracota-hondo:#F08163;
    --purpura:#D3B8CE;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.9);
    --chip-bg:#D3B8CE; --chip-fg:#241826;
  }
}
:root[data-theme="dark"]{
  --fondo:#1B1220; --fondo-alt:#221729; --superficie:#271B2E;
  --borde:#3B2C44; --borde-fuerte:#54405F;
  --tinta:#F3ECEF; --tinta-suave:#C0AFC6;
  --turquesa-hondo:#79CFC1; --terracota-hondo:#F08163; --purpura:#D3B8CE;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.9);
  --chip-bg:#D3B8CE; --chip-fg:#241826;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Quicksand,"Trebuchet MS",sans-serif; font-weight:700; line-height:1.16; margin:0; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--turquesa-hondo)}
img{max-width:100%; display:block; height:auto}
:focus-visible{outline:3px solid var(--terracota); outline-offset:3px; border-radius:3px}

.env{width:min(1120px,100% - 2.6rem); margin-inline:auto}
.cenefa{height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M7 0 L14 6 L7 12 L0 6 Z' fill='%23D2422A'/%3E%3Cpath d='M21 1.7 L25.3 6 L21 10.3 L16.7 6 Z' fill='none' stroke='%235FB9AC' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:auto 12px;
}

/* ---------- barra ---------- */
.barra{position:sticky; top:0; z-index:40; background:var(--fondo); background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--borde)}
.barra .env{display:flex; align-items:center; gap:1.4rem; min-height:64px}
.marca{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; margin-right:auto}
.marca img{width:40px; height:auto}
.marca .txt{display:block}
.marca b{font-family:Quicksand; font-weight:700; font-size:.98rem; line-height:1.1; display:block; color:var(--tinta)}
.marca .sub{font-size:.72rem; color:var(--tinta-suave); letter-spacing:.06em}
.barra nav{display:flex; gap:1.35rem}
.barra nav a{font-size:.94rem; text-decoration:none; color:var(--tinta-suave); font-weight:600; padding:.25rem 0; border-bottom:2px solid transparent}
.barra nav a:hover{color:var(--tinta); border-bottom-color:var(--turquesa)}
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:Quicksand; font-weight:700; font-size:.95rem;
  text-decoration:none; padding:.62rem 1.15rem; border-radius:999px; border:2px solid transparent; cursor:pointer}
.btn-lleno{background:var(--terracota); color:#fff}
.btn-lleno:hover{background:var(--terracota-hondo)}
.btn-borde{border-color:currentColor; color:var(--turquesa-hondo); background:transparent}
.btn-borde:hover{background:color-mix(in srgb, var(--turquesa) 16%, transparent)}
.btn-claro{border-color:rgba(255,255,255,.65); color:#fff}
.btn-claro:hover{background:rgba(255,255,255,.14)}
.menu-btn{display:none}

/* ---------- portada ---------- */
.portada{position:relative; color:#fff; overflow:hidden; padding:0;
  display:flex; align-items:center; min-height:clamp(560px, 86vh, 880px); background:var(--purpura-noche)}
.portada .foto{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0}
.portada .foto picture{display:block; width:100%; height:100%}
.portada .foto img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
.portada .velo{position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
  background:linear-gradient(188deg, rgba(28,18,30,.86) 0%, rgba(36,24,38,.72) 45%, rgba(89,54,86,.9) 100%)}
.portada .env{position:relative; z-index:2; padding:4.2rem 0 3.4rem; text-align:center;
  display:flex; flex-direction:column; align-items:center}
.portada-logo{width:224px; width:min(224px,46vw); max-width:46vw; margin-bottom:1.5rem; filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
.portada h1{font-size:clamp(2.5rem,7.4vw,4.4rem); letter-spacing:-.025em; margin-bottom:.85rem}
.portada .lema{font-size:clamp(1.02rem,2.3vw,1.2rem); max-width:56ch; color:rgba(255,255,255,.9); margin-bottom:1.9rem}
.portada .lema em{font-style:normal; color:var(--durazno)}
.acciones{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center}
.ficha-portada{display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:2.6rem;
  border-top:1px solid rgba(255,255,255,.22); padding-top:1.4rem; width:min(760px,100%)}
.ficha-portada div{flex:1 1 170px; padding:.2rem 1rem; border-left:1px solid rgba(255,255,255,.18)}
.ficha-portada div:first-child{border-left:0}
.ficha-portada dt{font-size:.74rem; color:rgba(255,255,255,.62); letter-spacing:.05em; margin-bottom:.15rem}
.ficha-portada dd{margin:0; font-family:Quicksand; font-weight:600; font-size:1rem}

/* ---------- secciones ---------- */
section{padding:4.6rem 0; scroll-margin-top:74px}
.alterna{background:var(--fondo-alt)}
.titulo-sec{max-width:62ch; margin-bottom:2.6rem}
.titulo-sec h2{font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.7rem}
.titulo-sec p{color:var(--tinta-suave); font-size:1.05rem; margin:0}
.rayita{width:56px; height:4px; border-radius:2px; background:var(--turquesa); margin-bottom:1.1rem}

/* quiénes somos */
.dos{display:grid; grid-template-columns:1.35fr .95fr; gap:3rem; align-items:start}
.dos .texto p:first-of-type{font-size:1.16rem; color:var(--tinta)}
.tarjeta-datos{background:var(--superficie); border:1px solid var(--borde); border-radius:14px; box-shadow:var(--sombra); overflow:hidden}
.tarjeta-datos h3{font-size:1.02rem; padding:1.05rem 1.3rem; background:var(--purpura-noche); color:#fff; font-weight:600}
.tarjeta-datos dl{margin:0; padding:.4rem 1.3rem 1.15rem}
.tarjeta-datos dt{font-size:.78rem; color:var(--tinta-suave); margin-top:.95rem}
.tarjeta-datos dd{margin:.1rem 0 0; font-family:Quicksand; font-weight:600; font-size:1rem}
.hito{border-left:3px solid var(--durazno); padding:.35rem 0 .35rem 1rem; margin:1.6rem 0; color:var(--tinta-suave); font-size:.97rem}
.hito b{color:var(--tinta); font-family:Quicksand}

/* programas */
.filtros{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem}
.chip{font-family:Quicksand; font-weight:600; font-size:.9rem; padding:.44rem .95rem; border-radius:999px;
  border:1px solid var(--borde-fuerte); background:var(--superficie); color:var(--tinta-suave); cursor:pointer}
.chip:hover{border-color:var(--turquesa); color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--chip-bg); border-color:var(--chip-bg); color:var(--chip-fg)}
.programas{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1px;
  background:var(--borde); border:1px solid var(--borde); border-radius:14px; overflow:hidden}
.prog{background:var(--superficie); padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column}
.prog .prefijo{font-size:.8rem; color:var(--tinta-suave); font-style:italic; margin-bottom:.1rem}
.prog h3{font-size:1.24rem; margin-bottom:.6rem; color:var(--purpura)}
.prog p{font-size:.96rem; color:var(--tinta-suave); margin:0}
.prog .eje{margin-top:1rem; font-size:.76rem; font-family:Quicksand; font-weight:600; color:var(--turquesa-hondo)}
.prog .eje::before{content:""; display:inline-block; width:8px; height:8px; margin-right:.45rem;
  background:var(--turquesa); transform:rotate(45deg)}
.prog[hidden]{display:none}
.vacio{padding:2rem; text-align:center; color:var(--tinta-suave)}

/* terreno */
.galeria{display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; gap:1.2rem}
.galeria figure{margin:0; border-radius:14px; overflow:hidden; background:var(--superficie); border:1px solid var(--borde); display:flex; flex-direction:column}
.galeria picture{display:flex; flex:1; min-height:0}
.galeria img{width:100%; height:100%; object-fit:cover; flex:1}
.galeria figcaption{font-size:.88rem; color:var(--tinta-suave); padding:.85rem 1rem}
.g1{grid-row:span 2}
.g1 img{min-height:340px}
.g2 img,.g3 img{min-height:190px}
.cita{margin:3rem auto 0; max-width:52ch; text-align:center}
.cita blockquote{margin:0; font-family:Quicksand; font-weight:600; font-size:clamp(1.25rem,3vw,1.6rem); line-height:1.35; color:var(--purpura)}
.cita cite{display:block; margin-top:.8rem; font-style:normal; font-size:.86rem; color:var(--tinta-suave)}

/* apoyar */
.vias{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem}
.via{border-top:4px solid var(--via, var(--turquesa)); padding-top:1.1rem}
.via h3{font-size:1.1rem; margin-bottom:.45rem}
.via p{font-size:.95rem; color:var(--tinta-suave); margin:0}

/* transparencia */
.tabla-legal{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--superficie);
  border:1px solid var(--borde); border-radius:14px; overflow:hidden}
.tabla-legal th,.tabla-legal td{text-align:left; padding:.8rem 1.15rem; border-bottom:1px solid var(--borde); vertical-align:top}
.tabla-legal th{width:15rem; font-family:Quicksand; font-weight:600; color:var(--tinta-suave); font-size:.88rem; background:var(--fondo-alt)}
.tabla-legal tr:last-child th,.tabla-legal tr:last-child td{border-bottom:0}
.reparto{margin-top:2.4rem}
.barra-reparto{display:flex; height:36px; border-radius:8px; overflow:hidden; margin:1rem 0 .9rem; border:1px solid var(--borde)}
.barra-reparto span{display:grid; place-items:center; font-family:Quicksand; font-weight:700; font-size:.85rem; color:#fff}
.leyenda{display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.9rem; color:var(--tinta-suave)}
.leyenda i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:.45rem}
.equipo{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.2rem; margin-top:2.4rem}
.persona{background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:1.05rem 1.2rem}
.persona b{font-family:Quicksand; font-size:1rem; display:block}
.persona span{font-size:.85rem; color:var(--tinta-suave)}

/* contacto */
.contacto{background:var(--purpura-noche); color:#fff}
.contacto .dos{grid-template-columns:1.1fr 1fr; align-items:center; gap:3.4rem}
.contacto h2{font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:.8rem}
.contacto p{color:rgba(255,255,255,.82)}
.contacto .rayita{background:var(--durazno)}
.lista-contacto{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.lista-contacto li{display:flex; gap:.9rem; align-items:flex-start; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.16)}
.lista-contacto li:last-child{border-bottom:0}
.lista-contacto .et{font-size:.76rem; color:rgba(255,255,255,.6); display:block}
.lista-contacto a{color:#fff; text-decoration:none; font-family:Quicksand; font-weight:600; font-size:1.05rem}
.lista-contacto a:hover{text-decoration:underline}
.lista-contacto .ico{width:34px; height:34px; flex:none; border-radius:9px; background:rgba(255,255,255,.12); display:grid; place-items:center}
.lista-contacto .ico svg{width:18px; height:18px; fill:none; stroke:var(--durazno); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* pie */
footer{background:#150d19; color:rgba(255,255,255,.62); font-size:.88rem; padding:2.8rem 0 2.2rem}
footer .env{display:flex; gap:2.4rem; flex-wrap:wrap; align-items:flex-start}
footer img{width:96px; opacity:.92}
footer .legal{max-width:52ch}
footer b{color:#fff; font-family:Quicksand; font-weight:600}
.tema-btn{margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.75);
  border-radius:999px; padding:.45rem 1rem; font-family:Quicksand; font-weight:600; font-size:.85rem; cursor:pointer}
.tema-btn:hover{border-color:rgba(255,255,255,.6); color:#fff}

@media (max-width:900px){
  .dos,.contacto .dos{grid-template-columns:1fr; gap:2.2rem}
  .galeria{grid-template-columns:1fr}
  .g1{grid-row:auto}
  .barra nav{display:none}
  .barra nav.abierto{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--fondo); border-bottom:1px solid var(--borde); padding:.5rem 1.3rem 1rem}
  .barra nav.abierto a{padding:.7rem 0; border-bottom:1px solid var(--borde)}
  .menu-btn{display:inline-flex; background:transparent; border:1px solid var(--borde-fuerte); border-radius:9px;
    padding:.45rem .6rem; cursor:pointer; color:var(--tinta)}
  .menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
  .barra .btn-lleno{display:none}
  section{padding:3.4rem 0}
  .tabla-legal th{width:auto; display:block; border-bottom:0; padding-bottom:.15rem}
  .tabla-legal td{display:block; padding-top:.1rem}
}