: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}}

/* La barra de accesos tiene dos versiones. En escritorio es una fila fina.
   En cuanto la fila no cabe deja de deslizarse y se reparte en varias: un
   acceso que hay que descubrir arrastrando el dedo, para la familia no existe
   —y el primero que se perdía era Escolarización—. */
@media (max-width:64rem){
  .utilidades ul{flex-wrap:wrap; justify-content:center; overflow-x:visible;
    gap:.2rem .15rem}
  .utilidades .separa{display:none}
}

/* Versión de móvil: rejilla de tres, con el icono encima del texto. */
@media (max-width:40rem){
  .utilidades{padding:.5rem .6rem}
  .utilidades ul{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.4rem}
  .utilidades li{display:flex; grid-column:span 2}
  .utilidades li:nth-last-child(-n+2){grid-column:span 1}
  .utilidades a{flex-direction:column; justify-content:center; gap:.25rem;
    width:100%; min-height:50px; padding:.45rem .25rem; text-align:center;
    white-space:normal; font-size:.7rem; line-height:1.15;
    background:rgba(255,255,255,.08)}
  .utilidades a:hover,.utilidades a:focus-visible{background:rgba(255,255,255,.2)}
  .utilidades svg{width:1.15rem; height:1.15rem; opacity:.95}
}

.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}
/* Sobre una foto no se puede contar con el fondo: el cielo claro se comía este
   rótulo. La sombra lo sostiene sea cual sea la imagen. */
.hero .kicker{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.55)}
.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}

/* Los textos largos van justificados, como en un documento impreso. La
   partición de palabras es obligatoria aquí: sin ella, justificar en una
   columna estrecha abre calles blancas entre las palabras. Se quedan en
   bandera los textos cortos —rótulos, pies de foto, tarjetas y avisos—, donde
   justificar no aporta nada y descuadra. */
main p{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
main .rotulo,main .kicker,main .nota,main .aviso,main figcaption,
main .tras-galeria,main .hero__cita,main .hero__firma,main .lema__autor,
main .lema__acciones,main .pieza__texto p,main .tarjeta p,main .tarjeta__texto p,
main .datos p,main .bloque p.nota{text-align:left; hyphens:manual}
.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; text-align:left}
.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}}

/* --- Menú llevado por el guion ---
   Safari no repinta bien un <details> que se cierra desde el guion: quedaban
   varios desplegables abiertos y un recuadro blanco colgando. Con guion, las
   ramas se quedan abiertas de forma permanente y lo que manda es la clase
   «abierta». Sin guion no se añade «menu-guiado» y el menú sigue siendo un
   <details> nativo corriente. */
.menu-guiado .raiz .submenu{display:none}
.menu-guiado .raiz.abierta .submenu{display:block}
.menu-guiado .raiz[open] .flecha{transform:rotate(45deg) translate(-2px,-2px)}
.menu-guiado .raiz.abierta .flecha{transform:rotate(-135deg) translate(-1px,-1px)}
.menu-guiado .raiz[open] > summary::after{content:none}
.menu-guiado .raiz.abierta > summary::after{content:""; position:absolute;
  left:0; right:0; top:100%; height:.55rem}

/* --- Formularios (contacto y petición de copias de pruebas) ---
   El sitio no tenía ninguno: hasta septiembre de 2026 los servía WordPress.
   Los campos van apilados y a una sola columna, que es lo que mejor se
   rellena en el móvil y lo que menos errores da. */
.formulario{max-width:38rem; margin-top:1.5rem}
.formulario h3{margin:2.25rem 0 .75rem; font-size:1.05rem; color:var(--granate-vivo);
  letter-spacing:.02em; text-transform:uppercase}
.formulario h3:first-of-type{margin-top:1.25rem}

.campo{display:block; margin:0 0 1.15rem}
.campo label{display:block; margin-bottom:.35rem; font-weight:600; font-size:.95rem;
  color:var(--tinta)}
.obligatorio{color:var(--granate-vivo)}

.campo input[type=text],.campo input[type=email],.campo input[type=date],.campo textarea{
  width:100%; box-sizing:border-box; padding:.7rem .85rem;
  font:400 1rem/1.4 var(--fuente); color:var(--tinta);
  background:var(--papel); border:1px solid var(--linea); border-radius:10px;
  transition:border-color .15s, box-shadow .15s}
.campo textarea{resize:vertical; min-height:6rem}
.campo input:hover,.campo textarea:hover{border-color:var(--tenue)}
.campo input:focus,.campo textarea:focus{outline:none; border-color:var(--granate-vivo);
  box-shadow:0 0 0 3px rgba(160,25,22,.18)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue); opacity:.75}

.ayuda{display:block; margin-top:.3rem; font-size:.85rem; color:var(--tenue)}

.campo--acepta{margin-top:1.75rem}
.campo--acepta label{display:flex; align-items:flex-start; gap:.6rem;
  font-weight:400; font-size:.95rem; color:var(--texto)}
.campo--acepta input{flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.15rem;
  accent-color:var(--granate-vivo)}

/* El campo trampa lo rellenan los robots, no las personas: fuera de la
   pantalla, pero sin display:none, que algunos programas detectan. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.formulario button[type=submit]{margin-top:.5rem; cursor:pointer; border:0;
  font:600 .95rem/1 var(--fuente)}

.recuadro{padding:1rem 1.25rem; margin:1.25rem 0; max-width:44rem;
  background:var(--hueso); border:1px solid var(--linea);
  border-left:4px solid var(--oro); border-radius:0 var(--radio) var(--radio) 0}

@media (max-width:40rem){
  .formulario{max-width:none}
}
/* --- Bandas alternas ---
   En una página larga, una sección se confunde con la siguiente. Con esto, las
   pares llevan fondo hueso y ocupan todo el ancho, como en la portada. Se
   activa poniendo class="bandas" en el <main> de la página.

   Las secciones normales llevan su contenido dentro, así que basta con
   centrarlo; las de rejilla son un grid y no admiten un hijo que las centre,
   de modo que ahí el centrado se hace con el relleno lateral. */
.bandas > section:nth-of-type(even){
  width:100%; max-width:none; background:var(--hueso);
  padding-inline:1.5rem}
.bandas > section:nth-of-type(even):not(.rejilla) > *{
  width:min(100%, var(--ancho)); margin-inline:auto}
.bandas > section.rejilla:nth-of-type(even){
  padding-inline:max(1.5rem, calc((100% - var(--ancho)) / 2))}

/* --- Longitud de línea ---
   El texto que venía de la web antigua ocupaba todo el ancho: 130 o 140
   caracteres por línea. A esa medida el ojo pierde el renglón al saltar y
   leer cansa. Se limita a la medida del sitio (40rem, unos 75 caracteres),
   que es la que ya usaban las páginas escritas de nuevo.

   Va por el elemento, no por la estructura, porque el texto importado cuelga
   a profundidades distintas en cada página. No hace falta exceptuar las
   tarjetas, las tablas ni las rejillas: su texto lleva clase propia, que pesa
   más que esta regla, y además ya son más estrechas que la medida.

   Las listas solo se limitan si no llevan clase: las que la llevan son
   galerías, tarjetas o parrillas, y necesitan todo el ancho. */
main p{max-width:var(--medida)}
main ul:not([class]),
main ol:not([class]),
main blockquote{max-width:var(--medida)}

.entradilla{max-width:var(--medida)}

/* --- Accesos de la página de contacto ---
   Cada gestión tiene su propia página para poder mandar el enlace exacto.
   Antes estaban una debajo de otra en la misma página y había que bajar
   mucho para encontrar la petición de copias; mucha gente no llegaba. */
.acciones{list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:1rem}
.acciones a{position:relative; display:flex; flex-direction:column; gap:.4rem;
  padding:1.6rem 3.5rem 1.6rem 1.6rem; background:var(--papel);
  border:1px solid var(--linea); border-left:5px solid var(--granate-vivo);
  border-radius:var(--radio); text-decoration:none; box-shadow:var(--sombra);
  transition:transform .15s, box-shadow .15s}
.acciones a:hover,.acciones a:focus-visible{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(23,26,31,.07), 0 18px 40px -16px rgba(23,26,31,.28)}
.acciones a::after{content:""; position:absolute; right:1.7rem; top:50%;
  width:.62rem; height:.62rem; border-right:2px solid var(--granate-vivo);
  border-bottom:2px solid var(--granate-vivo);
  transform:translateY(-50%) rotate(-45deg); transition:right .15s}
.acciones a:hover::after{right:1.3rem}
.acciones__titulo{font:700 clamp(1.15rem,1rem + .6vw,1.4rem)/1.25 var(--fuente);
  color:var(--granate-vivo)}
.acciones__texto{font-size:.95rem; line-height:1.5; color:var(--texto); max-width:52ch}