:root{
  --tinta:#191621; --tinta-2:#4b4458; --tinta-3:#736c85;
  --papel:#fbfaf8; --papel-2:#ffffff; --papel-3:#f4f1f8;
  --linea:#e4e0e9; --linea-2:#d3cddd;
  --acento:#5b3fa8; --acento-2:#a8317d; --acento-suave:#f0ecfa;
  /* Bandera no binaria: amarillo (fuera del binario), blanco (todos los géneros),
     morado (mezcla) y negro (agénero). El blanco se ajusta para que se vea sobre
     fondo claro; en oscuro sí es blanco puro. */
  --nb-amarillo:#fcf434; --nb-blanco:#e6e0f0; --nb-morado:#9c59d1; --nb-negro:#2c2c2c;
  --nb-franja:linear-gradient(180deg,
      var(--nb-amarillo) 0 25%, var(--nb-blanco) 25% 50%,
      var(--nb-morado) 50% 75%, var(--nb-negro) 75% 100%);
  --nb-regla:linear-gradient(90deg,
      var(--nb-amarillo) 0 25%, var(--nb-blanco) 25% 50%,
      var(--nb-morado) 50% 75%, var(--nb-negro) 75% 100%);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:70rem; --radio:.7rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --tinta:#eeebf3; --tinta-2:#b9b3c7; --tinta-3:#8e889d;
    --papel:#131118; --papel-2:#1b1823; --papel-3:#221e2d;
    --linea:#2e2939; --linea-2:#3c3550;
    --acento:#b6a0ff; --acento-2:#ff92cb; --acento-suave:#241f33;
    --nb-blanco:#ffffff; --nb-negro:#4a4a4a;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--papel); color:var(--tinta);
     font-family:var(--sans); font-size:16.5px; line-height:1.62;
     display:flex; flex-direction:column; min-height:100vh}
/* Franja de la bandera no binaria, en el borde superior de cada página. */
body::before{content:""; flex:none; height:8px; background:var(--nb-franja);
             -webkit-print-color-adjust:exact; print-color-adjust:exact}
img{max-width:100%; display:block}
a{color:var(--acento); text-decoration-thickness:.06em; text-underline-offset:.18em}
a:hover{color:var(--acento-2)}
.env{width:100%; max-width:var(--max); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)}
.saltar{position:absolute; left:-9999px}
.saltar:focus{left:1rem; top:1rem; z-index:99; background:var(--acento); color:#fff;
              padding:.6rem 1rem; border-radius:.4rem}

/* ---------- Barra de navegación ---------- */
.barra{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--papel) 92%,transparent);
       backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--linea)}
.barra-int{display:flex; align-items:center; gap:1rem; justify-content:space-between;
           flex-wrap:wrap; padding:.55rem 0}
.marca{font-family:var(--serif); font-size:1.06rem; font-weight:600; text-decoration:none;
       color:var(--tinta); white-space:nowrap; letter-spacing:-.01em}
.marca span{color:var(--acento)}
.menu{display:flex; flex-wrap:wrap; gap:.1rem; list-style:none; margin:0; padding:0}
.menu a{display:block; padding:.34rem .62rem; border-radius:.4rem; font-size:.885rem;
        color:var(--tinta-2); text-decoration:none; white-space:nowrap}
.menu a:hover{background:var(--acento-suave); color:var(--acento)}
.menu a[aria-current="page"]{background:var(--acento); color:#fff}
.idiomas{display:flex; align-items:center; gap:.1rem; font-size:.83rem; margin-left:auto;
         border:1px solid var(--linea); border-radius:999px; padding:.1rem; background:var(--papel-2)}
.idiomas a, .idiomas span{padding:.22rem .62rem; border-radius:999px; text-decoration:none;
                          color:var(--tinta-3); white-space:nowrap}
.idiomas a:hover{color:var(--acento); background:var(--acento-suave)}
.idiomas [aria-current]{background:var(--acento); color:#fff; font-weight:600}
@media (max-width:56rem){.idiomas{margin-left:0; order:3}}

/* ---------- Encabezado de página ---------- */
.cabecera{padding:clamp(2.2rem,6vw,3.6rem) 0 1.6rem; border-bottom:1px solid var(--linea);
          background:linear-gradient(180deg,var(--acento-suave),transparent 90%)}
.antetitulo{font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
            color:var(--acento); margin:0 0 .5rem}
.cabecera h1{font-family:var(--serif); font-weight:600; letter-spacing:-.018em; line-height:1.1;
             font-size:clamp(1.85rem,4.6vw,2.75rem); margin:0 0 .7rem; max-width:22ch}
.cabecera .bajada{font-size:clamp(1rem,2.2vw,1.12rem); color:var(--tinta-2); margin:0; max-width:60ch}

/* ---------- Contenido ---------- */
main{flex:1; padding:2.4rem 0 4rem}
.bloque{margin:0 0 3rem}
.bloque > h2{font-family:var(--serif); font-weight:600; font-size:1.42rem; letter-spacing:-.012em;
             margin:0 0 1.1rem; padding-bottom:.45rem;
             border-width:0 0 3px; border-style:solid; border-image:var(--nb-regla) 1}
.bloque > h3{font-size:.79rem; text-transform:uppercase; letter-spacing:.11em; font-weight:700;
             color:var(--tinta-3); margin:2rem 0 .9rem}
.prosa p{margin:0 0 1rem; max-width:66ch}
.prosa p:last-child{margin-bottom:0}
.destacado{font-size:1.12rem; color:var(--tinta);
           border-width:0 0 0 4px; border-style:solid;
           border-image:linear-gradient(180deg, var(--nb-amarillo) 0 25%, var(--nb-blanco) 25% 50%,
                        var(--nb-morado) 50% 75%, var(--nb-negro) 75% 100%) 1;
           padding:.1rem 0 .1rem 1.1rem; margin:0 0 1.4rem; max-width:60ch}

/* ---------- Portada ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
      gap:clamp(1.5rem,4vw,3rem); align-items:center;
      padding:clamp(2rem,5vw,3.4rem) 0 clamp(1.6rem,4vw,2.6rem)}
.hero-retrato{border-radius:var(--radio); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.16);
              aspect-ratio:4/5; background:var(--papel-3)}
.hero-retrato img{width:100%; height:100%; object-fit:cover}
.hero h1{font-family:var(--serif); font-weight:600; letter-spacing:-.022em; line-height:1.06;
         font-size:clamp(2rem,5.2vw,3.15rem); margin:.4rem 0 .9rem}
.hero .entrada{font-size:clamp(1.05rem,2.4vw,1.22rem); color:var(--tinta-2); margin:0 0 1.4rem; max-width:48ch}
.chapa{display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:700;
       letter-spacing:.06em; text-transform:uppercase; color:#2c2c2c;
       background:var(--nb-amarillo); border:1px solid rgba(0,0,0,.22);
       padding:.2rem .68rem; border-radius:999px;
       -webkit-print-color-adjust:exact; print-color-adjust:exact}
@media (max-width:52rem){
  .hero{grid-template-columns:1fr}
  .hero-retrato{max-width:19rem; aspect-ratio:1/1}
}

/* ---------- Tarjetas ---------- */
.rejilla{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))}
.tarjeta{background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio);
         overflow:hidden; display:flex; flex-direction:column; transition:.18s}
.tarjeta:hover{border-color:var(--acento); transform:translateY(-2px);
               box-shadow:0 8px 26px rgba(0,0,0,.09)}
.tarjeta .foto{aspect-ratio:16/9; overflow:hidden; background:var(--papel-3)}
.tarjeta .foto img{width:100%; height:100%; object-fit:cover}
.tarjeta .cuerpo{padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.tarjeta h3{font-size:1.03rem; font-weight:650; margin:0; line-height:1.32}
.tarjeta h3 a{color:var(--tinta); text-decoration:none}
.tarjeta:hover h3 a{color:var(--acento)}
.tarjeta p{margin:0; font-size:.93rem; color:var(--tinta-2)}
.tarjeta .flecha{margin-top:auto; padding-top:.5rem; font-size:.86rem; font-weight:600; color:var(--acento)}

/* curso / servicio: tarjeta sin foto */
.ficha{background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio);
       padding:1rem 1.15rem; display:flex; flex-direction:column; gap:.35rem}
.ficha h4{font-size:1rem; font-weight:650; margin:0; line-height:1.32}
.ficha p{margin:0; font-size:.92rem; color:var(--tinta-2)}
.ficha .nivel{font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
              color:var(--tinta-3); margin-top:.15rem}

/* ---------- Etiquetas de eje ---------- */
.ejes{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 0; padding:0; list-style:none}
.eje{font-size:.75rem; font-weight:600; letter-spacing:.02em; padding:.16rem .55rem;
     border-radius:999px; background:var(--acento-suave); color:var(--acento);
     border:1px solid color-mix(in srgb,var(--acento) 20%,transparent); text-decoration:none}
a.eje:hover{background:var(--acento); color:#fff}

/* ---------- Línea de tiempo ---------- */
.linea{border-left:2px solid var(--linea-2); padding-left:1.3rem; margin:0}
.hito{position:relative; padding-bottom:1.6rem}
.hito:last-child{padding-bottom:0}
.hito::before{content:""; position:absolute; left:-1.72rem; top:.5rem; width:9px; height:9px;
              border-radius:50%; background:var(--acento); box-shadow:0 0 0 3.5px var(--papel)}
.hito h4{font-size:1.05rem; font-weight:650; margin:0 0 .12rem; line-height:1.35}
.hito .donde{font-size:.92rem; color:var(--tinta-2); margin:0}
.hito .cuando{font-size:.81rem; color:var(--tinta-3); font-variant-numeric:tabular-nums; margin:.1rem 0 .45rem}
.hito p.que{margin:.3rem 0 .4rem; font-size:.94rem; color:var(--tinta-2); max-width:62ch}
.hito ul{margin:.4rem 0 0; padding-left:1.05rem; font-size:.9rem; color:var(--tinta-2)}
.hito li{margin:.2rem 0}

/* ---------- Lista compacta ---------- */
.compacta{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.compacta > li{display:grid; grid-template-columns:9rem 1fr; gap:.15rem 1.1rem;
               padding-bottom:.65rem; border-bottom:1px dashed var(--linea)}
.compacta > li:last-child{border-bottom:0; padding-bottom:0}
.compacta .cuando{font-size:.81rem; color:var(--tinta-3); font-variant-numeric:tabular-nums; padding-top:.15rem}
.compacta .que b{display:block; font-weight:600; font-size:.97rem; line-height:1.35}
.compacta .que span{color:var(--tinta-2); font-size:.89rem}
@media (max-width:40rem){
  .compacta > li{grid-template-columns:1fr}
  .compacta .cuando{order:2}
}

/* ---------- Franja de fotos ---------- */
.franja{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); margin:1.5rem 0}
.franja figure{margin:0; border-radius:var(--radio); overflow:hidden; background:var(--papel-3)}
.franja img{width:100%; aspect-ratio:16/9; object-fit:cover}
.franja figcaption{font-size:.8rem; color:var(--tinta-3); padding:.45rem .1rem 0}

/* ---------- Llamada a la acción ---------- */
.llamada{background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--radio);
         padding:1.3rem 1.5rem; margin:2.5rem 0 0; position:relative; overflow:hidden}
.llamada::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
                 background:var(--nb-franja);
                 -webkit-print-color-adjust:exact; print-color-adjust:exact}
.llamada h2{font-family:var(--serif); font-size:1.25rem; margin:0 0 .5rem; border:0; padding:0}
.llamada p{margin:0 0 .9rem; color:var(--tinta-2); max-width:56ch}
.boton{display:inline-block; background:var(--acento); color:#fff; text-decoration:none;
       font-weight:600; font-size:.94rem; padding:.55rem 1.1rem; border-radius:.45rem; margin-right:.5rem}
.boton:hover{background:var(--acento-2); color:#fff}
.boton.fantasma{background:transparent; color:var(--acento); border:1px solid var(--acento)}
.boton.fantasma:hover{background:var(--acento-suave); color:var(--acento)}

/* ---------- Pie ---------- */
.pie{border-top:1px solid var(--linea); background:var(--papel-2); padding:2rem 0 2.5rem;
     font-size:.88rem; color:var(--tinta-3)}
.pie-int{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.pie h4{font-size:.75rem; text-transform:uppercase; letter-spacing:.11em; color:var(--tinta-2); margin:0 0 .5rem}
.pie ul{list-style:none; margin:0; padding:0}
.pie li{margin:.2rem 0}
.pie a{color:var(--tinta-2); text-decoration:none}
.pie a:hover{color:var(--acento)}
.pie .nota{grid-column:1/-1; border-top:1px solid var(--linea); padding-top:1rem; margin-top:.4rem}

@media print{
  .barra,.pie,.llamada,.saltar{display:none}
  body::before{height:5px}
  body{background:#fff; color:#000; font-size:10pt}
  a{color:#000}
}