:root{
  --granate:#7d1512; --granate-vivo:#a01916; --oro:#c9a227;
  /* El granate vale como fondo, pero como color de texto sobre fondo
     oscuro solo da 1,77 de contraste. Para texto se usa --acento. */
  --acento:#7d1512;
  /* El oro base sobre granate da 4,37: insuficiente para letra pequeña. */
  --oro-claro:#e0b94a;
  /* Fondo de los botones: el texto va en blanco, así que este color no
     puede aclararse en modo oscuro. */
  --boton:#a01916;
  --balonmano:#3a4486; --voley:#0f0086; --futbol:#860000;
  --tinta:#171a1f; --texto:#3d434d; --tenue:#666e7a;
  --papel:#ffffff; --hueso:#f6f4f1; --linea:#e6e2dc;
  --medida:40rem; --ancho:78rem; --radio:14px;
  --sombra:0 1px 2px rgba(23,26,31,.05), 0 12px 32px -12px rgba(23,26,31,.18);
  /* Una sola familia para todo. Plus Jakarta Sans tiene una altura de x generosa,
     así que el cuerpo va algo más pequeño con más interlineado, y los titulares
     aguantan pesos altos con el espaciado muy cerrado. */
  --fuente:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font:400 1.03125rem/1.78 var(--fuente);
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--granate-vivo); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{color:var(--acento)}
:focus-visible{outline:3px solid var(--granate-vivo); outline-offset:3px; border-radius:4px}
.utilidades :focus-visible,.cabecera :focus-visible,.hero :focus-visible,
.club :focus-visible{outline-color:var(--oro)}
.pie :focus-visible{outline-color:#8fb8dd}

.salta{position:absolute; left:-9999px; top:0; background:var(--granate); color:#fff;
  padding:.75rem 1.25rem; z-index:100; border-radius:0 0 8px 0}
.salta:focus{left:0}

/* --- Aviso de prueba --- */
/* Franja fija oscura: no puede seguir al tema, porque --tinta se aclara en
   modo oscuro y quedaba texto blanco sobre fondo blanco. */
.aviso{background:#171a1f; color:#e9e6e1; font-size:.85rem; letter-spacing:.01em;
  padding:.7rem 1.25rem; text-align:center}
.aviso a{color:#e0b94a}

/* --- Cabecera del sitio ---
   Logo a un lado y menú al otro, sobre el granate de la marca: el logotipo del
   colegio es blanco y sobre fondo claro no se vería. La barra fina de arriba
   recoge los accesos de uso diario sin robar protagonismo al menú. */
.utilidades{background:#5a0f0d; padding:.3rem 1.25rem}
.utilidades ul{display:flex; justify-content:flex-end; gap:.1rem; list-style:none;
  margin:0 auto; padding:0; width:min(100%,var(--ancho));
  overflow-x:auto; scrollbar-width:none}
.utilidades ul::-webkit-scrollbar{display:none}
.utilidades a{display:flex; align-items:center; gap:.4rem; padding:.45rem .65rem;
  border-radius:6px; color:#e6d3cd; font:500 .8rem/1.3 var(--fuente);
  text-decoration:none; white-space:nowrap}
.utilidades a:hover{background:rgba(255,255,255,.13); color:#fff}
.utilidades svg{width:1rem; height:1rem; flex:0 0 auto; opacity:.85}
.utilidades a:hover svg{opacity:1}
.utilidades .separa{width:1px; align-self:center; height:1.1rem;
  background:rgba(255,255,255,.22); margin:0 .35rem; flex:0 0 auto}
@media (max-width:62rem){.utilidades ul{justify-content:flex-start}}

.cabecera{background:var(--granate); position:relative; z-index:30; padding:0 1.25rem}
.cabecera__interior{width:min(100%,var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.cabecera__logo{display:block; padding:1.05rem 0; flex:0 0 auto}
.cabecera__logo img{width:auto; height:clamp(3.5rem,2.5rem + 3vw,5.4rem)}

.principal ul{list-style:none; margin:0; padding:0}
.principal > div,.principal{display:flex; align-items:center; gap:.1rem}
.raiz{position:relative}
.raiz > a,.raiz > summary{display:flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:1.85rem .8rem; list-style:none; white-space:nowrap;
  font:600 .92rem/1.2 var(--fuente); color:#f3e7e2; text-decoration:none}
.raiz > summary::-webkit-details-marker{display:none}
.raiz > a:hover,.raiz > summary:hover{color:#fff; background:rgba(255,255,255,.09)}
.raiz.activa > summary{color:#fff; box-shadow:inset 0 -3px 0 var(--oro)}
.flecha{width:.45rem; height:.45rem; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s; opacity:.75}
.raiz[open] .flecha{transform:rotate(-135deg) translate(-1px,-1px)}
.submenu{position:absolute; top:100%; left:0; min-width:16rem; padding:.4rem;
  background:var(--papel); border:1px solid var(--linea); border-radius:0 0 12px 12px;
  box-shadow:var(--sombra)}
.submenu a{display:block; padding:.62rem .8rem; border-radius:8px; color:var(--texto);
  font:500 .9rem/1.35 var(--fuente); text-decoration:none}
.submenu a:hover{background:var(--hueso); color:var(--granate-vivo)}
.submenu a[aria-current]{background:var(--hueso); color:var(--granate-vivo); font-weight:700}
.raiz:not([open]) .submenu{display:none}

.abrir-menu{display:none; background:transparent; border:0; cursor:pointer; color:#fff;
  padding:.75rem; font:600 .9rem/1 var(--fuente); align-items:center; gap:.5rem}
.abrir-menu span{display:block; width:1.35rem; height:2px; background:#fff;
  box-shadow:0 6px 0 #fff, 0 -6px 0 #fff}

@media (max-width:62rem){
  .abrir-menu{display:flex}
  .principal{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--granate);
    padding:.5rem 1.25rem 1.25rem; box-shadow:var(--sombra)}
  .principal.abierto{display:flex}
  .raiz > a,.raiz > summary{padding:.9rem .5rem; justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.15)}
  .submenu{position:static; border:0; box-shadow:none; border-radius:0;
    background:transparent; padding:.25rem 0 .5rem .9rem}
  .submenu a{color:#e8d9d4}
  .submenu a:hover,.submenu a[aria-current]{background:rgba(255,255,255,.1); color:#fff}
}

/* --- Hero --- */
.hero{position:relative; min-height:clamp(16rem,42svh,25rem); display:grid; align-items:end;
  overflow:hidden; isolation:isolate; background:var(--tinta)}
.hero__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 38%; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(15,17,20,.45) 0%, rgba(15,17,20,.22) 30%, rgba(15,17,20,.88) 100%)}
.hero__interior{width:min(100% - 3rem, var(--ancho)); margin-inline:auto; padding:3rem 0 2.25rem; color:#fff}
.kicker{font:700 .72rem/1.3 var(--fuente); letter-spacing:.18em; text-transform:uppercase;
  color:#f0e6d2; display:flex; align-items:center; gap:.7rem; margin:0 0 .8rem}
.kicker::after{content:""; height:1px; flex:1 1 auto; max-width:7rem;
  background:var(--oro); opacity:.8}
@media (max-width:40rem){
  .kicker{font-size:.66rem; letter-spacing:.14em}
  .kicker::after{display:none}
}
.hero h1{font:800 clamp(2.3rem,1.5rem + 3.4vw,4.25rem)/0.95 var(--fuente);
  letter-spacing:-.04em; margin:0 0 .85rem; color:#fff}
.hero__cita{font:500 clamp(1rem,.9rem + .5vw,1.3rem)/1.45 var(--fuente);
  letter-spacing:-.01em; color:#f4efe7; max-width:38ch; margin:0}
.hero__firma{display:block; font:600 .74rem/1 var(--fuente); letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro); margin-top:.7rem}

/* --- Navegación de secciones --- */
.indice{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--linea)}
.indice ul{display:flex; gap:.25rem; list-style:none; margin:0 auto; padding:0 1.25rem;
  width:min(100%,var(--ancho)); overflow-x:auto; scrollbar-width:none}
.indice ul::-webkit-scrollbar{display:none}
.indice a{display:block; padding:.95rem .85rem; font:500 .875rem/1 var(--fuente);
  color:var(--tenue); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent}
.indice a:hover{color:var(--acento); border-bottom-color:var(--linea)}

/* --- Estructura --- */
main{display:block}
.franja{width:min(100% - 3rem, var(--ancho)); margin-inline:auto; padding:clamp(3.5rem,7vw,6rem) 0}
.franja--hueso{background:var(--hueso); width:100%; padding-inline:1.5rem}
.franja--hueso > *{width:min(100%, var(--ancho)); margin-inline:auto}
.medida{max-width:var(--medida)}
.rotulo{font:700 .74rem/1 var(--fuente); letter-spacing:.18em; text-transform:uppercase;
  color:var(--granate-vivo); margin:0 0 .85rem}
/* Sobre el granate del bloque del club, el oro sí tiene contraste suficiente. */
.club .rotulo{color:var(--oro)}
h2{font:800 clamp(1.8rem,1.35rem + 1.9vw,2.85rem)/1.08 var(--fuente); letter-spacing:-.035em;
  color:var(--tinta); margin:0 0 1.4rem; text-wrap:balance}
h3{font:700 1.2rem/1.35 var(--fuente); letter-spacing:-.015em; color:var(--tinta); margin:2rem 0 .6rem}
p{margin:0 0 1.15rem}
.entradilla{font-size:1.15rem; line-height:1.72; letter-spacing:-.005em; color:var(--tinta)}

/* --- Cita destacada --- */
.destacado{margin:3rem 0 0; padding:0 0 0 1.75rem; border-left:3px solid var(--granate-vivo);
  max-width:44rem}
.destacado p{font:600 clamp(1.25rem,1rem + 1vw,1.75rem)/1.4 var(--fuente);
  letter-spacing:-.025em; color:var(--acento); margin:0}

/* --- Galería --- */
.galeria{display:grid; gap:.85rem; margin:2.5rem 0 0; padding:0; list-style:none;
  grid-template-columns:repeat(4,1fr)}
.galeria li:nth-child(1){grid-column:span 2; grid-row:span 2}
.galeria li:nth-child(4){grid-row:span 2}
.galeria button{display:block; width:100%; height:100%; padding:0; border:0; cursor:zoom-in;
  background:var(--hueso); border-radius:var(--radio); overflow:hidden}
.galeria img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.galeria li:nth-child(1) img,.galeria li:nth-child(4) img{aspect-ratio:auto; height:100%}
.galeria button:hover img{transform:scale(1.04)}
@media (max-width:52rem){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria li:nth-child(1),.galeria li:nth-child(4){grid-column:auto; grid-row:auto}
  .galeria li:nth-child(1) img,.galeria li:nth-child(4) img{aspect-ratio:4/3}
}

/* --- Dos columnas --- */
.dupla{display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.lista-limpia{list-style:none; margin:0; padding:0}
.lista-limpia li{padding:.85rem 0 .85rem 1.9rem; border-bottom:1px solid var(--linea);
  position:relative; color:var(--tinta)}
.lista-limpia li::before{content:""; position:absolute; left:0; top:1.45rem;
  width:.55rem; height:.55rem; background:var(--granate-vivo); border-radius:50%}

/* --- Deportes --- */
.deportes{display:grid; gap:2.5rem; margin-top:3rem}
.deporte{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.deporte:nth-child(even) .deporte__media{order:-1}
.deporte__media{display:grid; gap:.85rem; grid-template-columns:1fr}
.deporte__media.doble{grid-template-columns:1fr 1fr}
.deporte__media img{border-radius:var(--radio); box-shadow:var(--sombra);
  aspect-ratio:4/3; object-fit:cover; width:100%}
.deporte h3{font:800 clamp(1.55rem,1.25rem + 1.2vw,2.2rem)/1.12 var(--fuente);
  margin:0 0 .9rem; color:var(--acento); letter-spacing:-.035em}
.deporte__marca{display:inline-block; font:600 .72rem/1 var(--fuente); letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--acento);
  padding:.4rem .7rem; border-radius:99px; margin-bottom:1rem}
.deporte p{margin-bottom:.9rem}
.deporte__pie{font-size:.9rem; color:var(--tenue); margin:.5rem 0 0}

/* --- Club --- */
.club{background:var(--granate); color:#f6efe6; border-radius:var(--radio);
  padding:clamp(2rem,5vw,3.5rem); margin-top:1rem}
.club h2{color:#fff; margin-bottom:1rem}
.club p{color:#eadfd2}
.club a{color:var(--oro)}
.datos{display:grid; gap:1.25rem 2.5rem; margin:2rem 0 0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.datos div{border-top:1px solid rgba(255,255,255,.22); padding-top:.9rem}
.datos dt{font:600 .72rem/1 var(--fuente); letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.4rem}
.datos dd{margin:0; color:#fff; font-size:1.02rem}

/* --- Visor de imagen --- */
dialog.visor{border:0; padding:0; max-width:100vw; max-height:100vh; width:100%; height:100%;
  background:rgba(10,11,13,.94)}
dialog.visor::backdrop{background:rgba(10,11,13,.9)}
dialog.visor img{max-width:min(94vw,80rem); max-height:88vh; margin:auto; object-fit:contain;
  border-radius:8px}
dialog.visor form{position:absolute; inset:0; display:grid; place-items:center; margin:0}
.visor__cerrar{position:fixed; top:1rem; right:1rem; z-index:2; background:rgba(255,255,255,.12);
  color:#fff; border:0; width:2.75rem; height:2.75rem; border-radius:50%; font-size:1.4rem;
  cursor:pointer; line-height:1}
.visor__cerrar:hover{background:rgba(255,255,255,.24)}

@media print{.aviso{display:none}}

/* --- Pie ---
   Oscuro profundo en vez de granate: la cabecera ya es granate y repetirlo dejaría
   la página encajada entre dos bloques iguales. El filete dorado superior cierra
   la página y enlaza con el resto de la identidad. */
.pie{position:relative; background:var(--granate); color:#e0cec8;
  padding:clamp(2.25rem,4vw,3rem) 1.5rem 1.5rem; font-size:.92rem; line-height:1.55}
.pie::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--oro)}
.pie__interior{width:min(100%,var(--ancho)); margin-inline:auto}

.pie__principal{display:grid; gap:clamp(1.75rem,3vw,2.75rem); align-items:start;
  grid-template-columns:minmax(15rem,1.35fr) repeat(3,minmax(9rem,1fr))}

.pie__logo{width:auto; height:2.2rem; margin-bottom:.8rem}
.pie__lema{margin:0 0 1.1rem; max-width:40ch; color:#e8d9d4; font-size:.9rem}

.pie__datos{list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.55rem}
.pie__datos li{display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start}
.pie__datos svg{width:1.05rem; height:1.05rem; margin-top:.2rem; color:var(--oro); flex:0 0 auto}

.pie__redes{list-style:none; margin:0; padding:0; display:flex; gap:.6rem}
.pie__redes a{display:grid; place-items:center; width:2.2rem; height:2.2rem;
  border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#f3e7e2;
  transition:background .2s ease, border-color .2s ease, color .2s ease}
.pie__redes svg{width:1.05rem; height:1.05rem}
.pie__redes a:hover{background:var(--oro); border-color:var(--oro); color:var(--acento)}

.pie h2{font:700 .7rem/1 var(--fuente); letter-spacing:.16em; text-transform:uppercase;
  /* El oro base sobre granate da 4,37 y esto es letra pequeña: se aclara. */
  color:#e0b94a; margin:.2rem 0 .85rem}
.pie__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.pie a{color:#f3e7e2; text-decoration:none}
.pie__col a{position:relative; display:inline-block}
.pie__col a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--oro); transition:right .25s ease}
.pie__col a:hover{color:#fff}
.pie__col a:hover::after{right:0}
.pie__datos a:hover{color:#fff; text-decoration:underline}

.pie__cierre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem 2rem; margin-top:clamp(1.5rem,3vw,2.25rem); padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.18)}
.pie__legal{margin:0; font-size:.84rem; color:#c9b2ac}

/* Accesos internos a la vista: están protegidos por contraseña, así que no hay
   motivo para esconderlos. Van en tono discreto para no competir con el resto. */
.pie__internos{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.25rem}
.pie__internos p{display:flex; align-items:center; gap:.45rem; margin:0;
  font-size:.84rem; color:#c9b2ac}
.pie__internos svg{width:.95rem; height:.95rem; color:var(--oro)}
.pie__internos ul{list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem}
.pie__internos a{font-size:.84rem; color:#e8d9d4}
.pie__internos a:hover{color:#fff; text-decoration:underline}

.pie :focus-visible{outline-color:var(--oro)}

@media (max-width:64rem){
  .pie__principal{grid-template-columns:repeat(2,1fr)}
  .pie__marca{grid-column:1/-1}
}
@media (max-width:40rem){
  .pie__principal{grid-template-columns:1fr; gap:2.25rem}
  .pie__cierre{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .pie__col a::after,.pie__redes a{transition:none}
}

/* --- Entrada suave ---
   El contenido es visible por defecto. Solo se oculta cuando el script ha
   confirmado que puede animarlo: así, si el JavaScript falla o no llega a
   ejecutarse, la página se lee igual en lugar de quedarse en blanco. */
html.anima .aparece{opacity:0; transform:translateY(18px)}
html.anima .aparece.visible{opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  html.anima .aparece{opacity:1; transform:none}
}

@media (prefers-color-scheme:dark){
  :root{--papel:#101216; --hueso:#171a1f; --linea:#282d35; --tinta:#f0eeea;
        --texto:#b8bec8; --tenue:#8c94a0; --granate-vivo:#e8918d; --acento:#e8918d; --boton:#a01916;
        --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7)}
  .indice{background:rgba(16,18,22,.9)}
  .club{background:#5d0f0d}
}

/* --- Añadidos para el resto de páginas --- */
.hero--liso{min-height:auto; background:var(--granate)}
.hero--liso::after{display:none}
.hero--liso .hero__interior{padding:2.75rem 0 2.25rem}
.nota{padding:1rem 1.25rem; background:var(--hueso); border-left:3px solid var(--granate-vivo);
  border-radius:0 var(--radio) var(--radio) 0; color:var(--tenue); font-size:.95rem; max-width:44rem}
.listado{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.15rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.listado a{display:block; padding:.7rem .85rem; border-radius:8px; text-decoration:none;
  color:var(--tinta); font-weight:500}
.listado a:hover{background:var(--hueso); color:var(--granate-vivo)}
section.rejilla{display:grid; gap:2rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
main > section{width:min(100% - 3rem, var(--ancho)); margin-inline:auto;
  padding:clamp(2.5rem,5vw,4rem) 0}
main > section + section{padding-top:0}
table{border-collapse:collapse; width:100%; margin:1.5rem 0; font-size:.95rem}
th,td{border:1px solid var(--linea); padding:.6rem .75rem; text-align:left}
th{background:var(--hueso); font-weight:700; color:var(--tinta)}
iframe{max-width:100%}
/* Texto preformateado heredado del contenido antiguo: sin esto desborda en móvil. */
pre{max-width:100%; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere;
  font:inherit; margin:0 0 1.15rem}
/* Red de seguridad para palabras y direcciones muy largas. */
main p,main li,main td,main th,main h1,main h2,main h3{overflow-wrap:break-word}
.plegables{margin:1.5rem 0; border-top:1px solid var(--linea); max-width:52rem}
.plegable{border-bottom:1px solid var(--linea)}
.plegable summary{cursor:pointer; padding:1rem .25rem; font:700 1rem/1.4 var(--fuente);
  color:var(--tinta); list-style:none; display:flex; justify-content:space-between; gap:1rem}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary::after{content:"+"; color:var(--granate-vivo); font-weight:700; flex:0 0 auto}
.plegable[open] summary::after{content:"3"}
.plegable summary:hover{color:var(--granate-vivo)}
.plegable > div{padding:0 .25rem 1.25rem}
.tarjetas{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column}
.tarjeta img{aspect-ratio:16/10; object-fit:cover; width:100%}
.tarjeta__texto{padding:1.25rem}
.tarjeta h3{margin:0 0 .5rem; font-size:1.15rem; color:var(--acento)}
.tarjeta p{margin:0; font-size:.95rem}
blockquote{margin:1.5rem 0; padding:1.25rem 1.5rem; background:var(--hueso);
  border-left:3px solid var(--granate-vivo); border-radius:0 var(--radio) var(--radio) 0;
  max-width:48rem}
blockquote footer{margin-top:.6rem; font-weight:700; color:var(--acento); font-size:.9rem}
.nota ul{margin:.6rem 0 0; padding-left:1.2rem}
.testimonios{display:grid; gap:1.25rem; margin:2rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.testimonios blockquote{margin:0; height:100%}
.testimonios blockquote p{margin:0; font-size:1rem}
.tabla-ancha{overflow-x:auto; margin:1.5rem 0}
table th[scope="row"]{font-weight:600; color:var(--tinta); width:38%}
.plegable .cuenta{font-weight:400; font-size:.85rem; color:var(--tenue)}
table.libros td:first-child{font-weight:600; color:var(--tinta)}
table.libros code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem;
  background:var(--hueso); padding:.15rem .4rem; border-radius:5px; white-space:nowrap}
@media (max-width:46rem){
  table.libros,table.libros tbody,table.libros tr,table.libros td{display:block; width:100%}
  table.libros thead{position:absolute; left:-9999px}
  table.libros tr{border:1px solid var(--linea); border-radius:var(--radio);
    margin-bottom:.75rem; padding:.85rem 1rem}
  table.libros td{border:0; padding:.15rem 0}
  table.libros td:nth-child(2){color:var(--tenue); font-size:.9rem}
}

/* --- Calendario ---
   Un color por tipo de fecha, y los meses en tarjetas: se consulta "qué hay en
   noviembre", no "cuándo son las evaluaciones". */
:root{
  --cal-hito:#7d1512; --cal-libre:#2e7d5b; --cal-boletines:#356b9b;
  --cal-evento:#a01916; --cal-reunion:#b08421;
}
.resumen{list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.resumen li{background:var(--granate); color:#f6efe6; border-radius:var(--radio);
  padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:.2rem}
.resumen__etiqueta{font:700 .68rem/1.3 var(--fuente); letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro-claro)}
.resumen strong{font:800 1.5rem/1.15 var(--fuente); letter-spacing:-.03em; color:#fff}
.resumen__pie{font-size:.86rem; opacity:.85}

.leyenda{list-style:none; margin:0 0 2.25rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem}
.leyenda li{display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--tenue)}
.marca{width:.7rem; height:.7rem; border-radius:3px; flex:0 0 auto}
.marca--hito{background:var(--cal-hito)}
.marca--libre{background:var(--cal-libre)}
.marca--boletines{background:var(--cal-boletines)}
.marca--evento{background:var(--cal-evento)}
.marca--reunion{background:var(--cal-reunion)}

.meses{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.mes{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.35rem 1.5rem 1.5rem; box-shadow:var(--sombra)}
.mes h3{margin:0 0 1rem; padding-bottom:.7rem; border-bottom:2px solid var(--linea);
  font:800 1.25rem/1 var(--fuente); letter-spacing:-.02em; color:var(--acento)}
.mes h3 span{font-weight:500; color:var(--tenue); font-size:.85rem; letter-spacing:0}
.citas{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.cita{display:grid; grid-template-columns:auto 1fr; gap:.15rem .85rem;
  padding-left:.85rem; border-left:3px solid var(--linea)}
.cita__dia{grid-column:1/-1; font:700 .72rem/1.3 var(--fuente); letter-spacing:.08em;
  text-transform:uppercase; color:var(--tenue)}
.cita__texto{grid-column:1/-1; font-size:.95rem; line-height:1.45; color:var(--tinta)}
.cita__hora{grid-column:1/-1; margin-top:.2rem; font-size:.84rem; line-height:1.4;
  color:var(--tenue); font-variant-numeric:tabular-nums}
.cita__horas{grid-column:1/-1; list-style:none; margin:.4rem 0 0; padding:0;
  display:grid; gap:.2rem}
.cita__horas li{font-size:.84rem; line-height:1.4; color:var(--tenue);
  font-variant-numeric:tabular-nums}
.cita--hito{border-left-color:var(--cal-hito)}
.cita--libre{border-left-color:var(--cal-libre)}
.cita--boletines{border-left-color:var(--cal-boletines)}
.cita--evento{border-left-color:var(--cal-evento)}
.cita--reunion{border-left-color:var(--cal-reunion)}
.cita--destacada .cita__texto{font-weight:700}
@media (prefers-color-scheme:dark){
  :root{--cal-libre:#4fae83; --cal-boletines:#6fa3d0; --cal-evento:#e8918d;
        --cal-reunion:#d4a94a; --cal-hito:#e08d8a}
}

/* --- Atajos a los tipos de actividad --- */
.atajos ul{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0 0 2.5rem; padding:0}
.atajos a{display:block; padding:.6rem 1.1rem; border:1px solid var(--linea);
  border-radius:99px; text-decoration:none; color:var(--tinta);
  font:600 .9rem/1.2 var(--fuente); background:var(--papel)}
.atajos a:hover{border-color:var(--granate-vivo); color:var(--granate-vivo); background:var(--hueso)}

/* --- Bloques de actividades ---
   Cada tipo se cierra con su propia caja de inscripción, para que no se confunda
   el contacto de la academia de inglés con el del resto. */
.bloque{margin:0 0 3.5rem; padding:0 0 3.5rem; border-bottom:1px solid var(--linea)}
.bloque:last-of-type{border-bottom:0}
.bloque > h2{margin-top:0}
table.horarios td:first-child{font-weight:700; color:var(--tinta)}
table.horarios td:nth-child(2){color:var(--tenue); font-size:.92rem}
table.horarios td:last-child{white-space:nowrap; font-variant-numeric:tabular-nums}
.apuntarse{margin-top:2rem; padding:1.5rem 1.75rem; background:var(--hueso);
  border-radius:var(--radio); max-width:52rem}
.apuntarse h3{margin:0 0 .75rem; font-size:1.1rem; color:var(--tinta)}
.apuntarse h4{margin:1.5rem 0 .5rem; font:700 .78rem/1 var(--fuente);
  letter-spacing:.14em; text-transform:uppercase; color:var(--granate-vivo)}
.apuntarse p:last-child{margin-bottom:0}
/* Fondo fijo claro: hay que fijar también el texto, o en modo oscuro
   queda gris claro sobre crema y no se lee. */
.apuntarse--abierta{background:#f4efe4; color:#2a2f38; border-color:#e0d6c2}
.apuntarse--abierta h3,.apuntarse--abierta h4{color:#171a1f}
.apuntarse--abierta a:not(.boton){color:#7d1512}
.apuntarse--abierta .nota{color:#5a616c}
.contacto{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.contacto li{padding-left:0}
.correo{font-variant-numeric:tabular-nums}
@media (max-width:46rem){
  table.horarios,table.horarios tbody,table.horarios tr,table.horarios td{display:block; width:100%}
  table.horarios thead{position:absolute; left:-9999px}
  table.horarios tr{border:1px solid var(--linea); border-radius:var(--radio);
    margin-bottom:.75rem; padding:.85rem 1rem}
  table.horarios td{border:0; padding:.1rem 0}
  table.horarios td:nth-child(3)::before{content:"· "}
  .apuntarse{padding:1.25rem 1.35rem}
}

/* --- Parrilla de extraescolares --- */
.parrilla{margin:2rem 0 0; display:grid; gap:2rem}
.parrilla .franja > h3{margin:0 0 1rem; padding:.5rem .9rem; border-radius:8px;
  background:var(--granate); color:#fff; display:inline-block; font-size:1rem}
.parrilla .dias{display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.parrilla .dia{background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1rem 1.1rem}
.parrilla .dia h4{margin:0 0 .6rem; font:700 .78rem/1 var(--fuente); letter-spacing:.14em;
  text-transform:uppercase; color:var(--granate-vivo)}
.parrilla .dia ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.parrilla .dia li{font-size:.9rem; line-height:1.45; padding-left:.85rem; position:relative}
.parrilla .dia li::before{content:""; position:absolute; left:0; top:.55rem;
  width:.35rem; height:.35rem; border-radius:50%; background:var(--oro)}

/* --- Lema del curso ---
   Fondo claro, no granate: el logotipo del lema es granate y rojo, y sobre granate
   la mitad de las letras desaparecería. Además da un respiro entre dos secciones
   con mucho contenido. */
.franja-lema{background:var(--hueso); width:100%;
  padding:clamp(3rem,6vw,4.5rem) 1.5rem; text-align:center}
.lema{max-width:52rem; margin-inline:auto}
.franja-lema .rotulo{margin-top:0}
.lema__logo{width:min(100%,36rem); height:auto; margin:0 auto .9rem}
.lema__autor{margin:0 0 1.5rem; font:600 .95rem/1 var(--fuente); color:var(--tenue)}
.lema__pie{max-width:52ch; margin:0 auto 1.75rem}
.lema__acciones{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.5rem; margin:0}
.lema__etiqueta{font:700 .95rem/1 var(--fuente); color:var(--oro)}
.lema__etiqueta--oscuro{color:var(--granate-vivo)}
.lema-pastoral{padding-bottom:0 !important}
.uniforme-foto{margin:2rem 0 0; max-width:22rem}
.uniforme-foto img{width:100%; height:auto; border-radius:var(--radio); box-shadow:var(--sombra)}
.uniforme-foto figcaption{margin-top:.6rem; font-size:.9rem; color:var(--tenue)}

/* Galería de fotos en columnas: se usa en el uniforme, y sirve para cualquier
   otra sección que quiera enseñar tres o cuatro imágenes en fila. */
.galeria-fotos{list-style:none; display:grid; gap:1.5rem; margin:2rem 0 0; padding:0;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.galeria-fotos--1{grid-template-columns:minmax(0,26rem)}
.tras-galeria{margin:2rem 0 0; text-align:center}

/* Hay gente a la que el movimiento le sienta mal: si lo ha pedido en su
   sistema, se lo quitamos todo. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
/* Secciones que en la web viva son un listado del blog. */
.aviso-seccion{background:var(--hueso); border:1px solid var(--linea);
  border-radius:var(--radio); padding:clamp(1.5rem,4vw,2.5rem); margin:1.5rem 0;
  max-width:46rem}
.aviso-seccion h2{margin-top:0}
.aviso-seccion .boton{margin-top:.5rem}
.tras-galeria--izq{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  text-align:left}
/* El 50 aniversario, bajo la portada. El logotipo lleva fondo blanco propio,
   así que la franja va en blanco: sobre granate destiñe. */
/* El logotipo del 50 aniversario trae fondo blanco propio, así que la franja va
   en blanco también en modo oscuro. Y si el fondo es fijo, el texto también: si
   sigue al tema, en oscuro sale casi blanco sobre blanco. */
.franja-aniversario{background:#fff; color:#2a2f38; width:100%;
  padding:clamp(3rem,6vw,4.5rem) 1.5rem}
.franja-aniversario h2{color:#171a1f}
.franja-aniversario .rotulo{color:#7d1512}
.franja-aniversario .lista-limpia li{color:#2a2f38; border-bottom-color:#e6e2dc}
.franja-aniversario a:not(.boton){color:#7d1512}
.franja-aniversario .boton{background:#7d1512; color:#fff}
.aniversario{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.aniversario__logo img{width:100%; height:auto; max-width:26rem; margin-inline:auto;
  display:block}
.aniversario h2{margin:.2rem 0 .8rem}
@media (max-width:52rem){.aniversario{grid-template-columns:1fr}}
/* Llamada a la acción en banda granate: lo primero de Escolarización. */
.llamada{background:var(--granate); color:#fff; width:100%;
  padding:clamp(2.5rem,5vw,3.5rem) 1.5rem !important}
.llamada h2{color:#fff; margin:.2rem 0 .6rem}
.llamada__texto{max-width:46ch; color:rgba(255,255,255,.92)}
.llamada__acciones{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem;
  margin:1.5rem 0 0; color:rgba(255,255,255,.92)}
.llamada__acciones a:not(.boton){color:#fff; text-decoration:underline}
/* El número de fotos que trae cada tema, al lado de su título. */
.cuenta{font:600 .8em/1 var(--fuente); color:var(--tenue); vertical-align:.15em}
/* Una foto suelta dentro del texto, sin pie. */
.foto-suelta{display:block; width:100%; max-width:26rem; height:auto; margin:1.5rem 0;
  border-radius:var(--radio); box-shadow:var(--sombra)}
.foto-suelta--ancha{max-width:40rem}
.galeria-fotos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:34rem){.galeria-fotos{grid-template-columns:1fr; max-width:22rem}}
.galeria-fotos figure{margin:0}
.galeria-fotos button{display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:var(--radio)}
.galeria-fotos button:focus-visible{outline:3px solid var(--granate); outline-offset:3px}
/* Todas las fotos de una fila al mismo alto: si no, los pies quedan a
   distinta altura y la fila se ve desordenada. El recorte es centrado. */
.galeria-fotos img{width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radio); box-shadow:var(--sombra)}
.galeria-fotos--retrato img{aspect-ratio:4/5}
.galeria-fotos--entera img{aspect-ratio:auto; height:auto}
.galeria-fotos figcaption{margin-top:.6rem; font-size:.9rem; color:var(--tenue)}

/* El cartel del lema, en Pastoral. */
.cartel{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; margin:2.5rem 0 0;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.cartel img{width:100%; height:auto; border-radius:var(--radio); box-shadow:var(--sombra)}
.cartel__frase{font:800 clamp(1.5rem,1.1rem + 1.8vw,2.4rem)/1.15 var(--fuente);
  letter-spacing:-.035em; color:var(--acento); margin:0 0 .5rem}
@media (max-width:52rem){
  .cartel{grid-template-columns:1fr}
  .cartel > figure{max-width:20rem; margin-inline:auto}
}

/* --- Portada --- */
.hero--portada{min-height:clamp(19rem,48svh,32rem)}
@media (max-width:46rem){.hero--portada{min-height:clamp(17rem,42svh,24rem)}}
.hero--portada h1{max-width:14ch}
.hero__acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.75rem 0 0}
.boton{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; min-height:48px; background:var(--boton); color:#fff;
  border:1px solid transparent; border-radius:10px; text-decoration:none;
  font:700 .95rem/1.2 var(--fuente); letter-spacing:-.01em;
  transition:background .2s ease, transform .2s ease}
.boton:hover{background:#7d1512; color:#fff; transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.boton{transition:none} .boton:hover{transform:none}}
.boton--claro{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px)}
.boton--claro{color:#fff}
.boton--claro:hover{background:#fff; color:var(--acento)}
.contenedor{width:min(100% - 3rem,var(--ancho)); margin-inline:auto}
main > section{padding-block:clamp(3.5rem,7vw,6rem)}
main > section + section{padding-top:clamp(3.5rem,7vw,6rem)}
main > section + .franja-hueso,main > section + .franja-oscura{margin-top:0}
/* Ritmo vertical de los títulos. La plantilla base deja los h2 sin margen
   superior, y por eso un título se pegaba al bloque anterior. */
* + h2{margin-top:3.25rem}
h2:first-child,section > h2:first-child,div > h2:first-child{margin-top:0}
.rotulo + h2{margin-top:.2rem}
/* Puente invisible entre el título del menú y su panel: sin él, al cruzar el
   hueco el ratón "sale" del menú y se cierra a mitad de camino. */
.raiz[open] > summary::after{content:""; position:absolute; left:0; right:0;
  top:100%; height:.55rem}
.raiz > summary{position:relative}
* + .rotulo{margin-top:2.75rem}
.rotulo:first-child,section > .rotulo:first-child,div > .rotulo:first-child{margin-top:0}
* + h3{margin-top:2.5rem}
h2 + h3,.rotulo + h3{margin-top:1.25rem}
section > h2:first-child{margin-top:0}
.franja-oscura{background:var(--tinta); color:#c9cfd8; width:100%; padding:clamp(3rem,6vw,5rem) 1.5rem}
.franja-oscura h2{color:#fff}
.rotulo--claro{color:var(--oro-claro)}
.franja-hueso{background:var(--hueso); width:100%; padding:clamp(3rem,6vw,5rem) 1.5rem}
.piezas{list-style:none; margin:2.75rem 0 0; padding:0; display:grid; gap:1.75rem;
  grid-template-columns:repeat(3,1fr)}
@media (max-width:64rem){.piezas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:46rem){.piezas{grid-template-columns:1fr; gap:1.25rem}}


.pieza{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); display:flex}
.pieza > a,.pieza.pieza--quieta{display:flex; flex-direction:column; width:100%;
  text-decoration:none; color:inherit}
.pieza img{aspect-ratio:16/10; object-fit:cover; width:100%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pieza > a:hover img{transform:scale(1.05)}
.pieza__texto{padding:1.35rem 1.4rem 1.6rem; flex:1 1 auto}
@media (max-width:46rem){.pieza img{aspect-ratio:2/1} .pieza__texto{padding:1.1rem 1.2rem 1.3rem}}
.pieza h3{margin:0 0 .45rem; font-size:1.15rem; letter-spacing:-.02em; color:var(--acento)}
.pieza > a:hover h3{color:var(--granate-vivo)}
.pieza p{margin:0; font-size:.94rem; color:var(--texto)}

@media (prefers-reduced-motion:reduce){.pieza img{transition:none}}