/* ============================================================
   Conecta2 — hoja de estilos única
   Paleta clara por defecto, oscura automática según el sistema.
   ============================================================ */

/* Las fuentes, servidas desde la propia web (antes venían de Google Fonts y eso
   retrasaba lo primero que se pinta en el móvil). Solo el juego «latin», que ya
   trae todo lo del español: á é í ó ú ñ ü ¿ ¡. Son fuentes variables: un fichero
   vale para todos los grosores. «swap»: mientras llega, se ve la letra del
   sistema en vez de un hueco en blanco. */
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('../fuentes/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fuentes/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* colores tomados del logo: cian → azul → morado → magenta */
  --cian:          #1BCBFB;
  --azul:          #0E7CEC;
  --azul-hondo:    #0A62C0;
  --azul-suave:    #e7f2fe;
  --morado:        #7551DA;
  --magenta:       #E0249E;
  --magenta-hondo: #B9137F;
  --magenta-suave: #fdeaf6;
  --acento-texto:  var(--magenta-hondo);   /* el magenta vivo no llega a contraste en texto pequeño */
  --degradado: linear-gradient(115deg, #1BCBFB 0%, #0E7CEC 30%, #7551DA 66%, #E0249E 100%);

  --fondo:       #f6f8fd;
  --fondo-alt:   #ffffff;
  --superficie:  #ffffff;
  --borde:       #e4e8f2;
  --texto:       #101b33;
  --texto-suave: #545f7c;

  --sombra:      0 1px 2px rgba(16,32,58,.05), 0 8px 24px rgba(16,32,58,.06);
  --sombra-alta: 0 2px 6px rgba(16,32,58,.06), 0 18px 48px rgba(16,32,58,.12);

  --radio:   16px;
  --radio-s: 10px;
  --ancho:   1120px;

  --tipo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --tipo-titulos: "Bricolage Grotesque", "Figtree", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --azul-suave:    #0d2b47;
    --magenta-suave: #3a1230;
    --acento-texto:  var(--magenta);       /* sobre fondo oscuro sí se lee el vivo */
    --fondo:         #0c1220;
    --fondo-alt:     #111a2b;
    --superficie:    #152034;
    --borde:         #253150;
    --texto:         #e9eefa;
    --texto-suave:   #9daac6;
    --sombra:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --sombra-alta: 0 2px 6px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.45);
  }
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* si no, .chip{display:inline-flex} gana */
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--tipo); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--azul-hondo)}
h1,h2,h3{font-family:var(--tipo-titulos); line-height:1.14; letter-spacing:-.025em;
  text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:700}
h3{font-size:1.12rem; font-weight:700}
p{margin:0 0 1em}

.contenedor{width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto}
.contenedor--estrecho{width:min(100% - 2.5rem, 760px)}
/* Secciones de texto que van a lo ancho de la web —empiezan a la altura del
   logo, como la portada y quedadas— pero con los párrafos y las listas a una
   medida cómoda: más de 70 caracteres por línea cansa leer. */
/* (descendientes y no hijos directos: si el texto va dentro de un .lateral-marco,
   con «>» perdía el límite y los párrafos se metían por debajo de la columna) */
.texto p, .texto ul:not(.normas):not(.lateral__cifras), .texto .lista-marcada, .texto .nota{max-width:68ch}
/* Las cuatro normas cortas: a lo ancho quedaban tres en fila y una colgando.
   Así van de dos en dos. */
.texto > .normas{max-width:760px}
/* En los artículos el texto va dentro de .prosa: misma medida para todo lo que
   lleva dentro, y la caja del final no se estira a lo ancho de la web. */
.prosa .lista-marcada, .prosa .lista-pasos, .prosa .cita{max-width:68ch}
.texto .articulo__cierre{max-width:760px}
/* El índice de artículos, a lo ancho: las fichas se reparten en columnas
   en vez de ir una debajo de otra ocupando 1.100 px cada una. */
.fichas{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.centro{text-align:center}

.saltar{
  position:absolute; left:-999px; top:0; background:var(--azul); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 var(--radio-s) 0; z-index:100;
}
.saltar:focus{left:0}

:focus-visible{outline:3px solid var(--magenta); outline-offset:3px; border-radius:6px}

/* ── botones ────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--azul); color:#fff; text-decoration:none; font-weight:600;
  padding:.72rem 1.25rem; border-radius:999px; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(14,124,236,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
/* En móviles muy estrechos un botón largo («Entrar en «Gente de Ciudad Real»»)
   no cabe en una línea y se salía de la pantalla: ahí puede partirse en dos. */
@media (max-width:380px){ .boton{white-space:normal; text-align:center} }
.boton:hover{background:var(--azul-hondo); transform:translateY(-2px); box-shadow:0 10px 26px rgba(14,124,236,.34)}
.boton:active{transform:translateY(0)}
.boton--grande{
  font-size:1.06rem; padding:.95rem 1.7rem;
  background:var(--degradado); background-size:160% 100%; background-position:0 0;
  box-shadow:0 8px 24px rgba(14,124,236,.3);
  transition:background-position .4s ease, transform .15s ease, box-shadow .15s ease;
}
.boton--grande:hover{background-position:100% 0; box-shadow:0 12px 30px rgba(224,36,158,.32)}
.boton--peque{padding:.5rem 1rem; font-size:.95rem}
.boton--fantasma{
  background:transparent; color:var(--texto); border-color:var(--borde); box-shadow:none;
}
.boton--fantasma:hover{background:var(--superficie); border-color:var(--azul); color:var(--azul-hondo)}
.boton--claro{background:#fff; color:#0d3a6b; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.boton--claro:hover{background:#f2f7ff; color:#0a2b52}
.icono-tg{width:1.15em; height:1.15em; flex:none}

/* ── cabecera ───────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
}
.cabecera__fila{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px}
.marca{font-family:var(--tipo-titulos); display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--texto); font-weight:800; font-size:1.2rem; letter-spacing:-.02em}
.marca__logo{width:42px; height:42px; flex:none}
.marca__dos{color:var(--magenta)}
.menu{display:flex; align-items:center; gap:1.4rem}
.menu a{color:var(--texto-suave); text-decoration:none; font-weight:500; font-size:.98rem}

/* ── buscador de la cabecera ─────────────────────────────────
   En ordenador va en la barra, entre los enlaces y el botón. En móvil sube
   al principio del menú desplegable (order:-1), que es donde la gente entra
   a navegar. La lista de sugerencias cuelga del campo. */
.buscar-menu{position:relative}
.buscar-menu input{
  font:inherit; font-size:.92rem; color:var(--texto); width:190px;
  background:var(--superficie); border:1px solid var(--borde); border-radius:999px;
  padding:.5rem .95rem;
}
.buscar-menu input::placeholder{color:var(--texto-suave)}
.buscar-menu input:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 4px var(--azul-suave)}
.sugerencias{
  position:absolute; z-index:60; top:calc(100% + .5rem); right:0; width:min(280px, 80vw);
  list-style:none; margin:0; padding:.35rem; max-height:320px; overflow:auto;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-s);
  box-shadow:var(--sombra-alta);
}
.sugerencias__op{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .6rem; border-radius:var(--radio-s); border:0;
  color:var(--texto); text-decoration:none; font-size:.95rem;
}
.sugerencias__op:hover, .sugerencias__op.es-activa{background:var(--azul-suave); color:var(--texto)}
.sugerencias__n{color:var(--texto-suave); font-size:.82rem; font-variant-numeric:tabular-nums}
.sugerencias__vacio{padding:.6rem; color:var(--texto-suave); font-size:.9rem}
@media (max-width:860px){
  .buscar-menu{order:-1; margin:.35rem 0 .6rem}
  .buscar-menu input{width:100%}
  .sugerencias{position:static; width:auto; box-shadow:none; margin-top:.4rem; max-height:260px}
}
.menu a:hover{color:var(--texto)}
.menu .boton{color:#fff}
.menu-boton{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:10px; margin-right:-10px;
}
.menu-boton span{display:block; width:24px; height:2px; background:var(--texto); border-radius:2px; transition:.2s}
.menu-boton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-boton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .menu-boton{display:flex}
  .menu{
    position:absolute; inset:68px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--fondo-alt); border-bottom:1px solid var(--borde);
    padding:.5rem 1.25rem 1.25rem; box-shadow:var(--sombra); display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:.85rem .25rem; border-bottom:1px solid var(--borde); font-size:1.05rem}
  .menu .boton{margin-top:.9rem; border-bottom:0; justify-content:center; padding:.8rem 1rem}
}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
.hero__fondo{
  position:absolute; inset:-30% -10% auto; height:150%;
  background:
    radial-gradient(46rem 26rem at 12% 8%, rgba(27,203,251,.24), transparent 62%),
    radial-gradient(38rem 24rem at 88% 6%, rgba(224,36,158,.18), transparent 60%),
    radial-gradient(30rem 20rem at 62% 46%, rgba(117,81,218,.12), transparent 65%);
  pointer-events:none;
}
.hero__caja{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,330px); gap:clamp(2rem,5vw,4rem);
}
.hero__col > *{max-width:660px}   /* limita el texto sin descentrar el bloque */
.hero__logo{
  width:100%; height:auto; justify-self:center;
  filter:drop-shadow(0 20px 44px rgba(14,124,236,.22));
  animation:flotar 7s ease-in-out infinite;
}
@keyframes flotar{50%{transform:translateY(-10px)}}
@media (max-width:900px){
  .hero__caja{grid-template-columns:1fr}
  .hero__logo{order:-1; width:min(60%,230px); justify-self:start; margin-bottom:.4rem}
  /* Portada en móvil: el logo va integrado en la primera línea, al lado de la
     pastilla («Grupos abiertos · Moderados · Gratis»), como una firma. Suelto
     encima del texto, grande se comía la primera pantalla y el botón «Buscar mi
     grupo» quedaba fuera; pequeño y solo parecía perdido.
     El truco es display:contents: la columna de texto «desaparece» como caja y
     sus hijos pasan a ser celdas de la rejilla, así el logo puede ir en la misma
     fila que la pastilla sin tocar el HTML. */
  .hero:not(.hero--interior) .hero__caja{grid-template-columns:auto 1fr; column-gap:.85rem; row-gap:0}
  .hero:not(.hero--interior) .hero__col{display:contents}
  .hero:not(.hero--interior) .hero__col > *{grid-column:1 / -1}
  .hero:not(.hero--interior) .hero__logo{
    grid-column:1; grid-row:1; order:0; width:clamp(60px,17vw,76px); margin:0;
    align-self:center; animation:none; filter:drop-shadow(0 6px 14px rgba(14,124,236,.22));
  }
  .hero:not(.hero--interior) .hero__col > .pastilla{
    grid-column:2; grid-row:1; justify-self:start; align-self:center; margin:0;
    /* si no cabe en una línea, que se parta en dos iguales y no deje «Gratis»
       colgando; con dos líneas, esquinas de bocadillo en vez de píldora */
    text-wrap:balance; border-radius:16px 16px 16px 4px; padding:.45rem .85rem; line-height:1.4;
  }
  .hero:not(.hero--interior) .hero__col > h1{margin-top:1.1rem}
  /* Los dos botones en la misma línea: se reparten el ancho a partes iguales.
     Si el móvil es tan estrecho que no caben (menos de ~340 px), vuelven a
     ponerse uno debajo de otro solos, porque la fila sigue con flex-wrap. */
  .hero:not(.hero--interior) .hero__botones{gap:.55rem}
  .hero:not(.hero--interior) .hero__botones .boton{
    flex:1 1 0; min-width:max-content; white-space:nowrap;
    font-size:.95rem; padding:.85rem .9rem; gap:.4em;
  }
}
.hero h1{margin-bottom:.55em}
/* Portada: sin el hueco grande de arriba, para que al entrar se vea entera la
   cabecera, del título a los botones de edad, también en portátiles. */
.hero:not(.hero--interior){padding-top:clamp(1.5rem,3vw,2.25rem)}
.hero:not(.hero--interior) .pastilla{margin-bottom:.9rem}
.hero:not(.hero--interior) h1{margin-bottom:.4em}
.hero h1 em{font-style:normal; color:var(--azul-hondo)}
.hero__texto{font-size:clamp(1.05rem,2.1vw,1.22rem); color:var(--texto-suave); max-width:60ch}
.hero__botones{display:flex; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0 1rem}
.hero__pie{font-size:.92rem; color:var(--texto-suave); margin:0}

/* Portada: lo primero que se puede hacer es escribir la provincia. Es el mismo
   buscador de la cabecera (js/main.js, apartado 7), pero grande y con la lista
   de sugerencias colgando debajo, a todo el ancho del campo. */
.hero__buscar{position:relative; margin:1.3rem 0 .9rem}
.hero__buscar label{display:block; font-weight:700; font-size:1rem; margin:0 0 .5rem; color:var(--texto)}
.hero__buscar-fila{position:relative}
.hero__buscar-fila svg{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  width:1.3rem; height:1.3rem; color:var(--azul-hondo); pointer-events:none;
}
.hero__buscar input{
  font:inherit; font-size:1.08rem; color:var(--texto); width:100%; box-sizing:border-box;
  background:var(--superficie); border:2px solid var(--borde); border-radius:999px;
  padding:1rem 1.3rem 1rem 3.1rem; box-shadow:var(--sombra);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hero__buscar input::placeholder{color:var(--texto-suave)}
.hero__buscar input:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 5px var(--azul-suave), var(--sombra)}
.hero__buscar .sugerencias{
  position:absolute; left:0; right:0; width:auto; top:calc(100% + .4rem);
  box-shadow:var(--sombra-alta); margin:0; max-height:300px;
}
.hero__buscar .sugerencias__op{padding:.65rem .8rem; font-size:1rem}
.hero__edades{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin:0; font-size:.93rem; color:var(--texto-suave);
}
.hero__edades span{margin-right:.2rem}
.hero__edades a{
  font-weight:700; color:var(--azul-hondo); text-decoration:none;
  background:var(--superficie); border:1px solid var(--borde); border-radius:999px;
  padding:.3rem .8rem; transition:border-color .15s ease, transform .15s ease;
}
.hero__edades a:hover{border-color:var(--azul); transform:translateY(-2px)}
.hero__edades a.hero__todos{background:none; border-color:transparent; padding-inline:.4rem}
@media (prefers-color-scheme:dark){ .hero__edades a{color:var(--azul)} }
@media (max-width:560px){
  .hero__buscar{margin-top:1.4rem}
  .hero__edades{gap:.4rem}
  .hero__edades span{flex-basis:100%; margin:0 0 .1rem}
  .hero__edades a{padding:.3rem .7rem}
}

/* ── La banda de datos de la primera pantalla ──────────────
   Cuatro cifras a la vista de quien acaba de llegar de Google. Los dos
   primeros números salen del bot; los otros dos son hechos que no cambian.
   En móvil se parten en dos columnas, que a cuatro no caben. */
.datos{
  list-style:none; margin:clamp(2rem,5vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem;
}
.datos li{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:1.1rem 1rem; text-align:center;
}
.datos strong{
  display:block; font-family:var(--tipo-titulos); font-weight:800;
  font-size:clamp(1.7rem,4.5vw,2.3rem); line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--degradado); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.datos span{
  display:block; margin-top:.3rem; font-size:.88rem; line-height:1.35;
  color:var(--texto-suave);
}
.datos__pie{
  margin:.9rem 0 0; font-size:.85rem; color:var(--texto-suave); text-align:center;
}
@media (min-width:720px){
  .datos{grid-template-columns:repeat(4,1fr)}
}
.pastilla{
  display:inline-block; background:var(--azul-suave); color:var(--azul-hondo);
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .85rem; border-radius:999px; margin:0 0 1.2rem;
}

/* ── secciones ──────────────────────────────────────────── */
/* Antes clamp(3rem,7vw,5.5rem): entre dos secciones se sumaban el padding
   inferior de una y el superior de la otra, hasta 176px de hueco muerto,
   y lo mismo con fondo igual que con fondo distinto. Más ajustado. */
.seccion{padding:clamp(2.2rem,5vw,4rem) 0}
.seccion--alt{background:var(--fondo-alt); border-block:1px solid var(--borde)}
.antetitulo{
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700;
  color:var(--acento-texto); margin:0 0 .6rem;
}
.entradilla{color:var(--texto-suave); max-width:62ch; font-size:1.06rem; margin-bottom:2.4rem}

.rejilla{display:grid; gap:1.1rem}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.tarjeta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.5rem 1.4rem; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.tarjeta__icono{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:.95rem;
  border-radius:13px; background:var(--azul-suave); color:var(--azul-hondo);
}
.tarjeta__icono svg{width:23px; height:23px}
.tarjeta:nth-child(2) .tarjeta__icono,
.tarjeta:nth-child(4) .tarjeta__icono{background:var(--magenta-suave); color:var(--magenta)}
.tarjeta h3{margin-bottom:.35em}
.tarjeta p{color:var(--texto-suave); margin:0; font-size:.98rem}
/* Móvil: las cuatro de «Quiénes somos» de la portada (charla, aficiones,
   planes, apoyo) ocupaban casi 900 px una debajo de otra. Aquí el icono va a
   la izquierda, al lado del título y el texto, y con menos relleno. */
@media (max-width:559px){
  .rejilla--4{gap:.65rem}
  .rejilla--4 .tarjeta{
    display:grid; grid-template-columns:38px 1fr; column-gap:.85rem; align-items:start;
    padding:.95rem 1rem;
  }
  .rejilla--4 .tarjeta__icono{grid-row:1 / span 2; width:38px; height:38px; margin:0; border-radius:11px}
  .rejilla--4 .tarjeta__icono svg{width:20px; height:20px}
  .rejilla--4 .tarjeta h3{margin:0 0 .15em; font-size:1.05rem}
  .rejilla--4 .tarjeta p{font-size:.92rem; line-height:1.5}
}

/* ── grupos ─────────────────────────────────────────────── */
.grupos{
  display:grid; gap:1rem; margin:0;
  grid-template-columns:1fr;                  /* móvil: una debajo de otra */
}
/* Son cuatro fijas, así que se fijan las columnas: con auto-fit se partían
   3+1 y quedaba un hueco raro en la portada. */
@media (min-width:560px){ .grupos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grupos{grid-template-columns:repeat(4,1fr)} }
.grupo{
  --acento:var(--azul); --acento-txt:var(--azul-hondo);
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.5rem;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.55rem 1.4rem 1.35rem; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grupo::before{
  content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--acento);
}
.grupo:nth-child(4n+2){--acento:var(--magenta); --acento-txt:var(--magenta-hondo)}
.grupo:nth-child(4n+3){--acento:var(--morado);  --acento-txt:#5b3bc4}
.grupo:nth-child(4n+4){--acento:var(--cian);    --acento-txt:#0a7ba0}
@media (prefers-color-scheme:dark){
  /* sobre fondo oscuro el color vivo ya contrasta; se iguala la especificidad */
  .grupo, .grupo:nth-child(4n+2), .grupo:nth-child(4n+3), .grupo:nth-child(4n+4){
    --acento-txt:var(--acento);
  }
}
.grupo:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--acento)}
.grupo__tipo{
  margin:0; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--acento-txt);
}
.grupo__nombre{margin:0; font-size:1.16rem}
.grupo__desc{margin:0; flex:1; color:var(--texto-suave); font-size:.97rem}
.grupo__entrar{
  margin-top:.5rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; color:var(--acento-txt); text-decoration:none;
}
/* Foto, «Toda España» y nombre en la misma franja: la foto a la izquierda y
   las dos líneas de texto a su lado, en vez de todo apilado. Ahorra una
   buena altura en cada tarjeta. La descripción y el enlace van debajo, a lo
   ancho; la fila de la descripción se estira para que los enlaces de las
   cuatro tarjetas queden a la misma altura. */
.grupo{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto 1fr;
  column-gap:.85rem; row-gap:.05rem;
}
/* a la izquierda la foto; a su lado, «Toda España», el nombre y la edad */
.grupo__foto{grid-column:1; grid-row:1 / span 3; width:58px; height:58px; margin:0; align-self:center}
.grupo__tipo{grid-column:2; grid-row:1; align-self:end}
.grupo__nombre{grid-column:2; grid-row:2}
.grupo__desc{grid-column:2; grid-row:3; flex:none; font-size:.9rem; align-self:start}
.grupo__entrar{grid-column:1 / -1; grid-row:4; justify-self:start; align-self:end; margin-top:.9rem}
/* la gente que hay dentro, en la esquina de arriba: número e icono, sin la
   palabra «personas» (va oculta para lectores de pantalla), para que quepa
   sin pisar el texto cuando las cuatro tarjetas van en fila y son estrechas */
.grupo__n{
  position:absolute; top:.55rem; right:.6rem; margin:0;
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;
  color:var(--acento-txt); background:color-mix(in srgb, var(--acento) 12%, transparent);
  padding:.28rem .55rem; border-radius:999px;
}
.grupo__n svg{width:1.05em; height:1.05em}
/* Cuando las tarjetas van de dos en dos o de cuatro en cuatro son estrechas y
   «TODA ESPAÑA» llega hasta la esquina: se baja el contenido lo justo para que
   el número de arriba no lo pise. En móvil (una por fila) hay sitio de sobra. */
@media (min-width:560px){ .grupo{padding-top:2.6rem} }
.grupo__entrar::after{content:""; position:absolute; inset:0}  /* toda la tarjeta es el enlace */
.grupo__entrar span{transition:transform .15s ease}
.grupo:hover .grupo__entrar span{transform:translateX(4px)}

/* ── directorio de grupos ───────────────────────────────── */
.grupos__titulo{
  font-family:var(--tipo-titulos); font-size:1.3rem; margin:2.8rem 0 1.2rem;
  color:var(--texto); font-weight:700; letter-spacing:-.01em;
}
.grupos__titulo:first-of-type{margin-top:0}
.grupos__pie{color:var(--texto-suave); margin:-.7rem 0 1.2rem; max-width:60ch; font-size:.98rem}

.buscador{margin:0 0 1.6rem}
.buscador input{
  width:min(100%, 420px); font:inherit; font-size:1rem; color:var(--texto);
  background:var(--superficie); border:1px solid var(--borde); border-radius:999px;
  padding:.75rem 1.15rem; box-shadow:var(--sombra);
}
.buscador input::placeholder{color:var(--texto-suave)}
.buscador input:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 4px var(--azul-suave)}

.zonas{display:grid; gap:1.5rem}
.zona__nombre{
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-suave); margin:0 0 .85rem;
}

/* En las páginas de cada grupo las zonas van sueltas, sin la rejilla .zonas
   de la portada, así que se separan aquí. Sin esto salen pegadas. */
.contenedor > .zona{margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--borde)}
.contenedor > .zona:first-of-type{margin-top:1.6rem; padding-top:0; border-top:0}
/* Las listas y los títulos ya traen su propio margen abajo, pero un div no:
   detrás de una rejilla de tarjetas o de una fila de chips, la nota se quedaba
   pegada al bloque de arriba. */
div + .nota{margin-top:2rem}
.contenedor > .zona + .nota,
.contenedor > .zona ~ .nota{margin-top:2rem}
/* Rejilla de tarjetitas: se apilan solas según el ancho que haya.
   Cada una enseña la ilustración del grupo, que a 30 px no se veía. */
.zona__chips{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(122px, 1fr));
}
.chip{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.45rem;
  text-decoration:none; text-align:center;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:.85rem .45rem .7rem; color:var(--texto); font-weight:600; font-size:.93rem;
  box-shadow:var(--sombra); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip:hover{transform:translateY(-3px); border-color:var(--azul); box-shadow:var(--sombra-alta)}
.chip__sitio{line-height:1.25}
.chip__n{
  font-size:.82rem; font-weight:600; color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}
.chip__n::after{content:" personas"; font-weight:500}
.chip__nuevo{
  width:7px; height:7px; border-radius:50%; background:var(--magenta); flex:none;
}
/* Solo dentro de la tarjeta va a la esquina. Suelto —en la leyenda de abajo—
   tiene que quedarse en línea con el texto, que si no desaparece. */
.chip .chip__nuevo{position:absolute; top:.55rem; right:.55rem}
/* la ilustración de cada grupo, con los monumentos de su ciudad */
.chip__foto{
  width:62px; height:62px; border-radius:50%; object-fit:cover; flex:none;
}

/* ── El directorio de la portada, compacto ──
   Con una tarjeta grande por provincia la sección medía unas nueve pantallas
   de móvil. Aquí cada provincia es una fila baja (foto pequeña, nombre y gente
   al lado) y, en pantallas anchas, las comunidades se reparten en columnas en
   vez de empezar cada una su fila. Solo en .zonas: en las páginas de cada
   grupo los «otros grupos» siguen como tarjetitas. */
.zonas{display:block; columns:2; column-gap:.6rem}     /* móvil: dos columnas */
@media (min-width:600px){ .zonas{columns:250px auto; column-gap:1.6rem} }
.zonas .zona{break-inside:avoid; margin:0 0 1.2rem}
.zonas .zona__nombre{margin-bottom:.5rem; font-size:.72rem; letter-spacing:.1em}
.zonas .zona__chips{grid-template-columns:1fr; gap:.45rem}
.zonas .chip{
  display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:.6rem; align-items:center; text-align:left;
  padding:.45rem .7rem .45rem .45rem; border-radius:14px;
}
.zonas .chip:hover{transform:translateY(-2px)}
.zonas .chip__foto{grid-row:1 / span 2; width:38px; height:38px}
.zonas .chip__sitio{align-self:end; font-size:.93rem; line-height:1.2; padding-right:.6rem}
.zonas .chip__n{align-self:start; font-size:.78rem; font-weight:500; line-height:1.3; white-space:nowrap}
/* móviles estrechos (320 px): foto y letra un punto más pequeñas para que
   «11 personas» quepa en una línea y la foto no se aplaste */
@media (max-width:359px){
  .zonas .chip{grid-template-columns:30px minmax(0,1fr); column-gap:.45rem; padding-left:.35rem; padding-right:.5rem}
  .zonas .chip__foto{width:30px; height:30px}
  .zonas .chip__sitio{font-size:.86rem}
  .zonas .chip__n{font-size:.72rem}
}
.zonas .chip .chip__nuevo{top:50%; right:.7rem; transform:translateY(-50%)}
/* Respaldo sin JavaScript: si un grupo todavía no tiene foto en Telegram,
   se ve el logo por debajo en vez de un hueco roto. */
.chip__foto, .grupo__foto, .grupo-foto{
  background:var(--azul-suave);   /* antes llevaba el logo de 40 KB de fondo, que se
                                    descargaba en cada página aunque no se viera */
}
.grupo__foto{
  width:76px; height:76px; border-radius:50%; object-fit:cover; display:block;
  margin:0 0 .9rem;
}
/* Móvil: los cuatro grupos por edades de dos en dos (+30 y +40 arriba, +50 y
   +60 abajo) en vez de uno debajo de otro. A media pantalla no cabe la foto al
   lado del nombre, así que dentro de cada tarjeta va todo apilado. */
@media (max-width:559px){
  .grupos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem}
  .grupo{
    grid-template-columns:1fr; grid-template-rows:auto auto auto auto 1fr;
    padding:1.1rem .9rem 1rem;
  }
  .grupo__foto{grid-column:1; grid-row:1; width:52px; height:52px; margin:0 0 .55rem; align-self:start}
  .grupo__tipo{grid-column:1; grid-row:2; font-size:.64rem; letter-spacing:.08em}
  .grupo__nombre{grid-column:1; grid-row:3; font-size:1.05rem}
  .grupo__desc{grid-column:1; grid-row:4; font-size:.84rem}
  .grupo__entrar{grid-column:1; grid-row:5; margin-top:.6rem; font-size:.92rem}
  .grupo__n{top:.7rem; right:.7rem; font-size:.78rem}
}
.grupo-foto{
  width:clamp(76px,13vw,104px); height:auto; aspect-ratio:1; border-radius:50%;
  object-fit:cover; display:block; margin:0 0 1.1rem;
  box-shadow:0 10px 26px rgba(14,124,236,.18);
}
.sin-resultados{
  background:var(--azul-suave); border-radius:var(--radio-s); padding:1rem 1.15rem;
  color:var(--texto-suave); font-size:.96rem; margin:1.4rem 0 0;
}
.leyenda{
  display:flex; align-items:center; gap:.5rem;
  margin:1.6rem 0 0; font-size:.88rem; color:var(--texto-suave);
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── páginas de cada grupo ──────────────────────────────── */
.hero--interior{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.4rem,5vw,3.4rem)}
.hero--interior h1{font-size:clamp(1.9rem,4.2vw,2.9rem); max-width:20ch}

/* La foto del grupo, a la derecha del texto y más grande (antes iba encima,
   pequeña y dejaba la fila coja). En móvil vuelve arriba, que al lado no cabe. */
.hero__caja--grupo{grid-template-columns:minmax(0,1fr) minmax(0,230px); align-items:center}
.hero__caja--grupo .grupo-foto{width:clamp(160px,18vw,230px); margin:0; justify-self:center}
/* La zona y la gente dentro, en la misma línea. En ordenador van juntas encima
   del título; en móvil la gente se va a la esquina de la derecha. */
.hero__cabeza{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 0 1.2rem}
.hero__cabeza .pastilla{margin:0}
.hero__gente{
  margin:0; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;
  color:var(--acento-texto); background:var(--magenta-suave);
  padding:.42rem .7rem; border-radius:999px;
}
.hero__gente svg{width:1.1em; height:1.1em}
/* Móvil: igual que la portada. La foto va en la primera línea, a la izquierda,
   con la zona a su lado y la gente en la esquina; el título, debajo a lo ancho.
   (display:contents hace que los hijos de la columna de texto se coloquen
   directamente en la rejilla, así la foto puede ir en su misma fila.) */
@media (max-width:860px){
  .hero__caja--grupo{grid-template-columns:auto 1fr; column-gap:.85rem; row-gap:0}
  .hero__caja--grupo .hero__col{display:contents}
  .hero__caja--grupo .hero__col > *{grid-column:1 / -1}
  .hero__caja--grupo .grupo-foto{
    grid-column:1; grid-row:1; width:clamp(60px,17vw,76px); margin:0; align-self:center;
    justify-self:start;
  }
  .hero__caja--grupo .hero__col > .hero__cabeza{
    grid-column:2; grid-row:1; margin:0; justify-content:space-between; align-self:center;
    flex-wrap:nowrap;
  }
  /* con nombres largos («Comunidad Valenciana») se parte la pastilla en dos
     renglones, y no el número, que se queda siempre en su esquina */
  .hero__caja--grupo .hero__cabeza .pastilla{min-width:0; text-wrap:balance; line-height:1.3}
  .hero__caja--grupo .hero__gente{flex:none}
  .hero__caja--grupo .hero__col > h1{margin-top:1rem}
}
.hero--interior .hero__texto{max-width:64ch}
.migas{font-size:.88rem; color:var(--texto-suave); margin-bottom:1.1rem}
.migas a{color:var(--texto-suave); text-decoration:none}
.migas a:hover{color:var(--azul-hondo); text-decoration:underline}
.migas span[aria-hidden]{margin:0 .35rem; opacity:.6}

.lista-marcada{list-style:none; padding:0; margin:1.4rem 0 2.2rem; display:grid; gap:.6rem}
.lista-marcada li{
  position:relative; padding-left:1.6rem; color:var(--texto-suave);
}
.lista-marcada li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--azul);
}
.lista-marcada li:nth-child(even)::before{background:var(--magenta)}
.lista-marcada strong{color:var(--texto)}

.lista-pasos{margin:1.4rem 0 0; padding-left:1.3rem; color:var(--texto-suave); display:grid; gap:.6rem}
.lista-pasos::marker{color:var(--azul)}
.lista-pasos strong{color:var(--texto)}

.pie__marca span{display:inline}

/* ── botón de volver arriba ─────────────────────────────────
   El anillo exterior marca cuánto llevas de página; dentro va el
   avión de papel del logo, apuntando hacia arriba. */
.subir{
  --avance:0;
  position:fixed; z-index:40;
  right:clamp(.9rem, 3vw, 1.6rem);
  bottom:calc(clamp(.9rem, 3vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; padding:3px; border:0; cursor:pointer;
  border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--magenta) calc(var(--avance) * 1%), var(--borde) 0);
  box-shadow:0 8px 24px rgba(16,27,51,.18);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}
.subir--visible{opacity:1; transform:none; pointer-events:auto}
.subir:hover{box-shadow:0 12px 30px rgba(224,36,158,.3)}
.subir:hover .subir__nucleo{transform:translateY(-2px)}
.subir:active .subir__nucleo{transform:translateY(0) scale(.94)}
.subir__nucleo{
  width:100%; height:100%; border-radius:50%; display:grid; place-items:center;
  background:var(--degradado); color:#fff; transition:transform .15s ease;
}
.subir__nucleo svg{width:22px; height:22px; transform:rotate(-45deg) translateX(1px)}

@media (max-width:600px){
  .subir{width:50px; height:50px}
  .subir__nucleo svg{width:20px; height:20px}
}
@media (prefers-reduced-motion:reduce){
  .subir{transition:opacity .01s}
}

/* ── artículos ──────────────────────────────────────────── */
.articulo{padding:clamp(2rem,5vw,3.4rem) 0 0}
.articulo h1{font-size:clamp(1.9rem,4.4vw,2.8rem); margin-bottom:.5em}
.articulo__entradilla{
  font-size:1.12rem; color:var(--texto-suave); margin:0 0 .8rem; max-width:60ch;
}
.articulo__datos{
  font-size:.85rem; color:var(--texto-suave); letter-spacing:.04em;
  border-top:1px solid var(--borde); padding-top:1rem; margin:0 0 2.2rem;
}
.prosa{font-size:1.05rem}
.prosa p{margin:0 0 1.15em; max-width:68ch}
.prosa h2{font-size:clamp(1.35rem,2.6vw,1.7rem); margin:2.4rem 0 .8rem}
.prosa a{color:var(--azul-hondo)}
.prosa .lista-marcada, .prosa .lista-pasos{margin-bottom:1.8rem}
.cita{
  margin:1.6rem 0; padding:1.1rem 1.3rem; border-left:4px solid var(--magenta);
  background:var(--magenta-suave); border-radius:0 var(--radio-s) var(--radio-s) 0;
  color:var(--texto); font-size:1.02rem;
}
.articulo__cierre{
  margin:3rem 0 0; padding:1.8rem; border-radius:var(--radio);
  background:var(--azul-suave); border:1px solid var(--borde);
}
.articulo__cierre h2{margin:0 0 .5em; font-size:1.3rem}
.articulo__cierre p{color:var(--texto-suave); max-width:60ch}

.fichas{display:grid; gap:1rem; margin-top:2rem}
.ficha{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.5rem 1.5rem 1.2rem; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ficha:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--azul)}
.ficha__titulo{font-size:1.25rem; margin:0 0 .45em}
.ficha__titulo a{color:var(--texto); text-decoration:none}
.ficha__titulo a:hover{color:var(--azul-hondo)}
.ficha__resumen{color:var(--texto-suave); margin:0 0 .7rem}
.ficha__datos{font-size:.85rem; color:var(--texto-suave); margin:0}
.zona__chips--textos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.zona__chips--textos .chip{flex-direction:row; text-align:left; padding:.9rem 1.1rem; font-size:.95rem}

/* ── quedadas ───────────────────────────────────────────── */
.quedadas{display:grid; gap:1rem; margin-top:2.2rem}
.quedada{
  display:flex; gap:1.2rem; align-items:flex-start;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.3rem 1.4rem; box-shadow:var(--sombra);
}
.quedada__dia{
  flex:none; width:76px; text-align:center; border-radius:var(--radio-s);
  background:var(--degradado); color:#fff; padding:.55rem .3rem .45rem;
}
.quedada__num{display:block; font-family:var(--tipo-titulos); font-size:1.7rem; font-weight:800; line-height:1}
/* el rango («18–20») no ensancha el recuadro: solo encoge un poco el número */
.quedada__dia--rango{padding-inline:.4rem}
.quedada__dia--rango .quedada__num{font-size:1.25rem; white-space:nowrap}
.quedada__mes{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; opacity:.9}
.quedada__cuerpo{min-width:0; flex:1}
.quedada__cuando{
  font-size:.86rem; color:var(--texto-suave); margin:0 0 .25rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.quedada__falta{
  background:var(--magenta-suave); color:var(--magenta-hondo); font-weight:700;
  border-radius:999px; padding:.12rem .6rem; font-size:.76rem;
}
.quedada__cabecera{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
  margin:0 0 .3rem;
}
/* el número de apuntados va pegado al título: así la tarjeta es una línea más baja */
.quedada__titulo-fila{display:flex; align-items:center; flex-wrap:wrap; gap:.55rem}
.quedada__apuntados{
  background:var(--azul-suave); color:var(--azul-hondo); font-size:.8rem; font-weight:700;
  border-radius:999px; padding:.16rem .6rem; white-space:nowrap;
}
/* Quedada Live (por el videochat del grupo): etiqueta magenta para que se
   distinga de un vistazo de las presenciales */
.quedada__online{
  background:var(--magenta-suave); color:var(--acento-texto); font-size:.8rem; font-weight:700;
  border-radius:999px; padding:.16rem .6rem; white-space:nowrap;
}
/* El punto rojo de "en directo" delante del título de una Live, latiendo
   como en las retransmisiones. Rojo y no magenta a propósito: es el código que
   todo el mundo reconoce como "en vivo". Quieto si se piden menos animaciones. */
.quedada__en-vivo{
  display:inline-block; width:.62em; height:.62em; border-radius:50%;
  background:#e5322d; margin-right:.45em; vertical-align:.06em;
  animation:en-vivo 1.6s ease-out infinite;
}
@keyframes en-vivo{
  0%  {box-shadow:0 0 0 0 rgba(229,50,45,.55)}
  70% {box-shadow:0 0 0 .55em rgba(229,50,45,0)}
  100%{box-shadow:0 0 0 0 rgba(229,50,45,0)}
}
@media (prefers-reduced-motion: reduce){ .quedada__en-vivo{animation:none} }
.quedada__titulo{font-size:1.25rem; margin:0}
.quedada__donde{color:var(--texto); font-weight:600; margin:0 0 .5rem; font-size:.98rem}
.quedada__texto{color:var(--texto-suave); margin:0 0 .8rem; font-size:.97rem}
.quedada__donde a{color:var(--texto); text-decoration:none; border-bottom:1px dashed var(--borde)}
.quedada__donde a:hover{color:var(--azul-hondo); border-bottom-color:var(--azul)}
.quedada__extras{display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .8rem}
.quedada__extras span{
  background:var(--azul-suave); color:var(--azul-hondo); font-size:.82rem; font-weight:600;
  border-radius:999px; padding:.2rem .7rem;
}
.quedada__acciones{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 .9rem}
/* botón solo con icono: para acciones secundarias que no merecen una frase */
.boton--icono{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--borde); border-radius:50%; background:var(--superficie);
  color:var(--texto-suave); text-decoration:none;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.boton--icono svg{width:19px; height:19px}
.boton--icono:hover{border-color:var(--azul); color:var(--azul-hondo); transform:translateY(-2px)}
.quedada__grupo{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--texto-suave); font-size:.9rem;
  border:1px solid var(--borde); border-radius:999px; padding:.35rem .9rem .35rem .35rem;
  transition:border-color .15s ease, color .15s ease;
}
.quedada__grupo img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.quedada__grupo strong{color:var(--texto)}
.quedada__grupo:hover{border-color:var(--azul); color:var(--texto)}
/* «align-items:start» dejaba cada tarjeta con la altura de su texto, y como unas
   fechas ocupan una línea y otras dos, la fila salía descuadrada. Con «stretch»
   (que es lo de serie) todas las de una fila miden lo mismo. */
.quedadas--breve{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch}
.quedadas--breve .quedada{padding:1.1rem 1.2rem}
.quedadas--breve .quedada__titulo{font-size:1.1rem}
/* La línea de la fecha ocupa un renglón en unas tarjetas («sábado 12 de
   septiembre») y dos o tres en otras («del viernes 18 al domingo 20 de
   septiembre»), y los títulos quedaban a distinta altura dentro de la misma
   fila. Cuando la tarjeta es estrecha se le reserva sitio para el caso largo y
   así todos los títulos arrancan a la vez. Se mide la tarjeta y no la ventana
   porque lo que manda es lo ancha que sea ella: con dos columnas la fecha cabe
   de sobra en un renglón y reservar hueco dejaría un agujero. */
.quedadas--breve .quedada{container-type:inline-size}
@media (min-width:620px){          /* solo si van en fila; en móvil van apiladas */
  @container (max-width:420px){    /* y solo si la tarjeta es estrecha */
    .quedada__cuando{min-height:4.9rem; align-content:start}
  }
}
.quedada__cabecera .boton--icono{margin-top:-.15rem}
.chip--pasada{cursor:default; box-shadow:none; opacity:.85}
.chip--pasada:hover{transform:none; border-color:var(--borde)}
.aviso-vacio{
  background:var(--azul-suave); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.8rem; margin-top:2rem;
}
.aviso-vacio p{color:var(--texto-suave); max-width:62ch}
.aviso-vacio p:first-child{color:var(--texto)}
/* El enlace al grupo de cada quedada de la portada: abajo del todo, y toda la
   tarjeta pulsable (el ::after la cubre entera). */
.quedadas--breve .quedada{position:relative; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.quedadas--breve .quedada:hover{transform:translateY(-3px); border-color:var(--azul); box-shadow:var(--sombra-alta)}
.quedada__entrar{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.2rem;
  font-weight:600; font-size:.95rem; color:var(--azul-hondo); text-decoration:none;
}
.quedada__entrar::after{content:""; position:absolute; inset:0; border-radius:inherit}
.quedada__entrar span{transition:transform .15s ease}
.quedada:hover .quedada__entrar span{transform:translateX(4px)}
.quedada__cuerpo--con-reloj .quedada__entrar{flex:1 1 100%}
/* las tarjetas de una fila miden lo mismo: el enlace, siempre al pie */
.quedadas--breve .quedada__cuerpo:not(.quedada__cuerpo--con-reloj){display:flex; flex-direction:column; align-self:stretch}
.quedadas--breve .quedada__cuerpo:not(.quedada__cuerpo--con-reloj) .quedada__entrar{margin-top:auto; align-self:flex-start}
@media (prefers-color-scheme:dark){ .quedada__entrar{color:var(--azul)} }

@media (max-width:560px){
  .quedada{flex-direction:column; gap:.9rem}
  .quedada__dia{display:flex; width:auto; align-self:flex-start; gap:.5rem; align-items:baseline; padding:.4rem .8rem}
  .quedada__num{font-size:1.3rem}
}

/* ── cuenta atrás a la próxima quedada ───────────────────────
   Siempre pegada a la quedada de la que habla, nunca suelta por su cuenta:
   en la portada, dentro de su tarjeta y a la derecha del texto; en
   /quedadas, en una franja que toca la tarjeta por arriba (ahí la tarjeta
   ocupa todo el ancho y a la derecha quedaría descolgada). Los números
   cambian cada segundo, así que van con aria-hidden: lo que lee un lector
   de pantalla es la etiqueta de al lado, que no se repite sola. El fondo
   de los bloques es el azul suave de las demás píldoras de la web (como
   «apuntados»): el degradado de la fecha puesto dos veces en la misma
   tarjeta quedaba cargado. */
.cuenta-atras{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.cuenta-atras__etiqueta{font-size:.8rem; font-weight:600; color:var(--texto-suave); white-space:nowrap}
.cuenta-atras__reloj{display:flex; gap:.4rem}
.cuenta-atras__bloque{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:2.7rem; padding:.35rem 0 .3rem; border-radius:var(--radio-s);
  background:var(--azul-suave);
}
.cuenta-atras__num{font-family:var(--tipo-titulos); font-size:1.1rem; font-weight:800; line-height:1; color:var(--azul-hondo); font-variant-numeric:tabular-nums}
.cuenta-atras__und{font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; color:var(--azul-hondo); opacity:.8}
.cuenta-atras.es-hoy{display:none}   /* ya está aquí: la fecha y el «hoy» del badge lo dicen de sobra */
/* Página de un grupo: su próxima quedada ocupa todo el ancho y el reloj, a la
   derecha, tiene sitio de sobra; ahí va más grande y con «Faltan» encima. (En
   móvil pasa debajo, como en la portada: ver más abajo.) */
@media (min-width:561px){
  [data-grupo] .quedada__cuerpo--con-reloj .cuenta-atras{flex-direction:column; align-items:center; gap:.45rem}
  [data-grupo] .quedada__cuerpo--con-reloj .cuenta-atras__bloque{width:3.6rem; padding:.55rem 0 .45rem}
  [data-grupo] .quedada__cuerpo--con-reloj .cuenta-atras__num{font-size:1.6rem}
  [data-grupo] .quedada__cuerpo--con-reloj .cuenta-atras__und{font-size:.66rem}
}

/* La tarjeta que lleva el reloj se distingue un poco de las demás: no por
   vanidad, sino para que se entienda de un vistazo que ESA es la que tiene
   cuenta atrás y no una tarjeta más de la lista. */
.quedada--destacada{border-color:var(--azul); box-shadow:var(--sombra-alta)}

/* Portada: el reloj cuelga a la derecha del texto, no debajo del título.
   Si la tarjeta comparte fila y se queda estrecha, se apila como todo lo
   demás: min-width en «info» fuerza el salto antes de que se apriete. */
.quedada__cuerpo--con-reloj{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.quedada__cuerpo--con-reloj .quedada__info{flex:1 1 220px; min-width:220px}
.quedada__cuerpo--con-reloj .cuenta-atras{flex:none}
/* Si la tarjeta de la portada comparte fila con otras dos, el texto y el reloj
   no caben uno al lado del otro (ni el reloj solo, con su ancho fijo): el reloj
   pasa debajo y sus cuatro bloques se reparten el ancho que haya. */
@container (max-width:420px){
  .quedada__cuerpo--con-reloj .quedada__info{min-width:0; flex-basis:100%}
  .quedada__cuerpo--con-reloj .cuenta-atras{flex:1 1 100%}
  .quedada__cuerpo--con-reloj .cuenta-atras__reloj{width:100%}
  .quedada__cuerpo--con-reloj .cuenta-atras__bloque{flex:1; width:auto; min-width:0}
}

/* /quedadas: el reloj va debajo de todo, centrado y en grande, separado del
   resto con una línea fina. Antes era un hijo flex más de la tarjeta, con
   flex-wrap y flex-basis haciendo malabares para que ocupara su propia
   fila — eso dependía de combinar «fila» y «columna» en el mismo
   contenedor según el ancho, y en algunos móviles (Safari sobre todo, con
   el eje principal en vertical) se veía pequeño y pegado a la izquierda en
   vez de ocupar toda la tarjeta. Ahora la fecha y el cuerpo van juntos
   dentro de «quedada__fila» (su propia fila, aparte) y la tarjeta deja de
   ser flex: el reloj es un bloque normal a todo lo ancho, sin ningún
   truco de flexbox del que depender.

   «quedada--conteo» (no «quedada--destacada»: esa también la lleva la
   tarjeta de la portada, que NO tiene «quedada__fila» y necesita seguir
   siendo flex directamente) es la que marca esta tarjeta en concreto. */
.quedada--conteo{display:block}
.quedada__fila{display:flex; gap:1.2rem; align-items:flex-start}
.cuenta-atras--grande{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box;
  gap:.6rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed var(--borde);
  text-align:center;
}
.cuenta-atras--grande .cuenta-atras__reloj{justify-content:center; gap:.8rem}
.cuenta-atras--grande .cuenta-atras__bloque{width:4.2rem; padding:.6rem 0 .5rem}
.cuenta-atras--grande .cuenta-atras__num{font-size:1.9rem}
.cuenta-atras--grande .cuenta-atras__und{font-size:.7rem}

/* Por debajo de 560px (móvil): la fecha y el cuerpo se apilan, como en
   cualquier otra tarjeta, y el reloj se hace más grande todavía, con sus
   cuatro bloques repartiéndose todo el ancho (flex:1 en vez de un ancho
   fijo); en la portada, el que iba compacto «a la derecha» del texto pasa
   al mismo formato grande y centrado, porque a ese tamaño ya no hay sitio
   para tenerlo al lado sin apretar. */
@media (max-width:560px){
  .quedada__fila{flex-direction:column; gap:.9rem}

  .cuenta-atras--grande .cuenta-atras__reloj,
  .quedada__cuerpo--con-reloj .cuenta-atras__reloj{width:100%}
  .cuenta-atras--grande .cuenta-atras__bloque,
  .quedada__cuerpo--con-reloj .cuenta-atras__bloque{flex:1; width:auto; padding:.7rem 0 .6rem}
  .cuenta-atras--grande .cuenta-atras__num,
  .quedada__cuerpo--con-reloj .cuenta-atras__num{font-size:2.1rem}
  .cuenta-atras--grande .cuenta-atras__und,
  .quedada__cuerpo--con-reloj .cuenta-atras__und{font-size:.72rem}

  /* La portada: de compacto y pegado al texto a grande y centrado, como en
     /quedadas (ocupando toda la tarjeta, con «empieza en» encima y el
     reloj debajo). */
  .quedada__cuerpo--con-reloj .cuenta-atras{
    flex:1 1 100%; flex-direction:column; justify-content:center; text-align:center;
    margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--borde);
  }

  /* Portada en móvil: la fecha a la izquierda, como en el ordenador, en vez de
     encima (ahorra una fila por tarjeta), y el reloj algo más pequeño. */
  .quedadas--breve .quedada{flex-direction:row; gap:.9rem; padding:1rem}
  .quedadas--breve .quedada__dia{display:block; width:58px; padding:.45rem .2rem .4rem}
  .quedadas--breve .quedada__num{font-size:1.45rem}
  .quedadas--breve .quedada__texto{margin-bottom:.5rem}
  .quedadas--breve .quedada__cuerpo--con-reloj{row-gap:.7rem}
  .quedadas--breve .quedada__cuerpo--con-reloj .cuenta-atras{margin-top:0; padding-top:.7rem}
  .quedadas--breve .quedada__cuerpo--con-reloj .cuenta-atras__reloj{gap:.3rem}
  .quedadas--breve .quedada__cuerpo--con-reloj .cuenta-atras__bloque{padding:.5rem 0 .4rem}
  .quedadas--breve .quedada__cuerpo--con-reloj .cuenta-atras__num{font-size:1.45rem}
  .quedadas--breve .quedada__cuerpo--con-reloj .cuenta-atras__und{font-size:.62rem}
}

/* ── columna lateral ─────────────────────────────────────────
   Una tarjeta a la derecha que acompaña al bajar: el botón de entrar en las
   páginas de grupo, el índice en artículos y privacidad, las cifras en quiénes
   somos. Solo desde 1160 px: por debajo no cabe al lado del texto y se oculta
   (en móvil el botón de entrar ya está arriba).

   Truco: el carril va en absoluto sobre las secciones, así estas siguen
   pintando su fondo de lado a lado; dentro, la tarjeta es «sticky». */
.lateral{display:none}
.lateral-marco{position:relative}
@media (min-width:1160px){
  .lateral{
    display:block; position:absolute; top:0; bottom:0; width:300px; z-index:2;
    pointer-events:none;
  }
  /* cuando abarca varias secciones: a la altura del borde derecho de la web */
  .lateral-marco--secciones > .lateral{
    right:calc((100% - min(100% - 2.5rem, var(--ancho))) / 2);
    padding:clamp(3rem,7vw,5.5rem) 0;
  }
  /* cuando va dentro de un contenedor: pegada a su borde derecho */
  .lateral-marco--dentro > .lateral{right:0}
  .lateral__caja{
    position:sticky; top:6.5rem; pointer-events:auto;
    background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
    box-shadow:var(--sombra); padding:1.4rem 1.4rem 1.2rem;
  }
}
.lateral__foto{width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; margin:0 0 .8rem}
.lateral__titulo{font-family:var(--tipo-titulos); font-weight:800; font-size:1.15rem; margin:0 0 .35rem; color:var(--texto)}
.lateral__dato{margin:0 0 1rem; color:var(--texto-suave)}
.lateral__dato strong{color:var(--texto)}
.lateral__pie{margin:.8rem 0 0; font-size:.82rem; color:var(--texto-suave); line-height:1.45}
.boton--bloque{display:flex; width:100%; white-space:normal; text-align:center; margin-top:1rem}
.lateral__indice{list-style:none; margin:.6rem 0 0; padding:0; counter-reset:ap; display:grid; gap:.15rem}
.lateral__indice li{counter-increment:ap}
.lateral__indice a{
  display:flex; gap:.55rem; padding:.35rem .5rem; margin:0 -.5rem; border-radius:var(--radio-s);
  color:var(--texto-suave); text-decoration:none; font-size:.92rem; line-height:1.35;
}
.lateral__indice a::before{content:counter(ap); color:var(--azul); font-weight:700; min-width:1ch}
.lateral__indice a:hover{background:var(--azul-suave); color:var(--texto)}
.lateral__cifras{list-style:none; margin:.8rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem .8rem}
.lateral__cifras li{font-size:.84rem; color:var(--texto-suave); line-height:1.3}
.lateral__cifras strong{
  display:block; font-family:var(--tipo-titulos); font-weight:800; font-size:1.5rem; line-height:1.1;
  background:var(--degradado); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* al saltar desde el índice, que el título no quede tapado por el menú fijo */
.prosa h2, .legal h2{scroll-margin-top:6.5rem}

/* ── lo que dice la gente ───────────────────────────────────────────
   Una tira que se desplaza (con las flechas, arrastrando o con el dedo),
   siempre en una sola fila por mucho que crezca el número de testimonios.
   .voces__envoltorio solo existe para colocar las flechas encima; la que
   de verdad se desplaza es .voces__pista. */
.voces__envoltorio{position:relative; margin-top:2.2rem}
.voces__pista{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
  scroll-padding-inline:.2rem; padding-block:.2rem; margin:0 -.2rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.voces__pista::-webkit-scrollbar{display:none}
/* En el ordenador la tira es una cinta que pasa sola (js/main.js): sin
   «imán» (pelearía con el movimiento) y con los bordes difuminados en vez
   de tarjetas cortadas a tijera. */
.voces__pista--cinta{
  scroll-snap-type:none; scroll-behavior:auto;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.voz{
  flex:0 0 min(340px,85vw); scroll-snap-align:start;
  margin:0; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra); padding:1.5rem 1.4rem 1.3rem;
  display:flex; flex-direction:column; position:relative;
}
.voces__flecha{
  position:absolute; top:50%; translate:0 -50%; z-index:1;
  width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--borde);
  background:var(--superficie); color:var(--texto); box-shadow:var(--sombra);
  display:grid; place-items:center; cursor:pointer;
}
.voces__flecha svg{width:1.2rem; height:1.2rem}
.voces__flecha--izq{left:-.9rem}
.voces__flecha--der{right:-.9rem}
.voces__flecha:disabled{opacity:.35; cursor:default}
.voces__flecha:not(:disabled):hover{border-color:var(--azul)}
@media (max-width:640px){
  /* en móvil las flechas tapan tarjeta; mejor dejar solo el deslizar */
  .voces__flecha{display:none}
}
/* la comilla de apertura, en grande y de adorno */
.voz::before{
  content:"\201C"; position:absolute; top:.1rem; left:.9rem;
  font-family:var(--tipo-titulos); font-size:3.4rem; line-height:1;
  color:var(--azul-suave); pointer-events:none;
}
.voz blockquote{
  margin:0 0 1rem; position:relative; font-size:1rem; line-height:1.6; color:var(--texto);
}
.voz figcaption{
  margin-top:auto; font-weight:700; color:var(--texto); font-size:.95rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.voz figcaption span{font-weight:500; color:var(--texto-suave); font-size:.88rem}
.voz figcaption span:not(:empty)::before{content:"·"; margin-right:.35rem}

/* ── franja ─────────────────────────────────────────────── */
.franja{background:var(--degradado); color:#fff; padding:2.2rem 0}
.franja__rejilla{gap:1.6rem; text-align:center}
.franja__rejilla > div{max-width:22rem; margin-inline:auto}
.franja strong{display:block; font-size:1.08rem}
.franja span{color:rgba(255,255,255,.85); font-size:.95rem; display:block; text-wrap:balance}

/* ── pasos ──────────────────────────────────────────────── */
.pasos{list-style:none; padding:0; margin:0 0 2.6rem; display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.paso{
  position:relative; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:1.6rem 1.4rem 1.4rem; box-shadow:var(--sombra);
}
.paso__num{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--magenta); color:#fff; font-weight:700; margin-bottom:.9rem;
}
.paso p{color:var(--texto-suave); margin:0; font-size:.98rem}

/* ── normas ─────────────────────────────────────────────── */
.normas{
  list-style:none; padding:0; margin:0 0 1.6rem;
  display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.normas li{
  background:var(--superficie); border:1px solid var(--borde); border-left:4px solid var(--azul);
  border-radius:var(--radio-s); padding:.95rem 1.1rem; color:var(--texto-suave); font-size:.98rem;
}
.normas li:nth-child(even){border-left-color:var(--magenta)}
.normas strong{color:var(--texto); display:block}
.nota{font-size:.95rem; color:var(--texto-suave); background:var(--magenta-suave);
  border-radius:var(--radio-s); padding:1rem 1.15rem; margin:0}

/* ── faq ────────────────────────────────────────────────── */
.faq{display:grid; gap:.6rem}
.faq details{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio-s); padding:0 1.15rem;
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 2rem 1.05rem 0; font-weight:600;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.25rem; top:1.45rem; width:9px; height:9px;
  border-right:2px solid var(--texto-suave); border-bottom:2px solid var(--texto-suave);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{color:var(--texto-suave); margin:0 0 1.05rem; font-size:.98rem}

/* ── cierre ─────────────────────────────────────────────── */
.cierre{
  background:linear-gradient(125deg, #0E7CEC 0%, #5B5AE0 45%, #C31F92 100%);
  color:#fff; padding:clamp(3rem,7vw,4.6rem) 0; text-align:center;
}
.cierre h2{margin-bottom:.3em}
.cierre p{color:rgba(255,255,255,.9); margin-bottom:1.8rem}

/* Portada: la sección entera, de borde a borde, con el botón que lleva a la
   lista, los grupos por edad y lo que hay que saber antes de entrar (sin
   buscador: ya hay dos, el de la cabecera y el de arriba de la portada).
   Las manchas de luz van en el propio fondo, sin elementos de más. */
.cierre--portada{
  color:#fff; padding:clamp(2.2rem,5vw,3.2rem) 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(27,203,251,.55), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(255,140,214,.5), transparent 38%),
    linear-gradient(125deg, #0E7CEC 0%, #5B5AE0 48%, #C31F92 100%);
}
.cierre__panel{max-width:760px; margin:0 auto; text-align:center}

/* Portada: preguntas frecuentes a la izquierda y «La puerta está abierta» a la
   derecha, como tarjeta que acompaña al bajar por las preguntas. Por debajo
   de 900px, una columna: la tarjeta queda debajo de las preguntas. */
.faq-cierre{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(2rem,4vw,3.5rem); align-items:start}
.cierre--lateral{
  position:sticky; top:calc(var(--alto-cabecera, 70px) + 1.2rem);
  text-align:center; border-radius:24px; padding:2rem 1.5rem 1.6rem;
  box-shadow:0 26px 50px -22px rgba(91,90,224,.55);
}
.cierre--lateral h2{font-size:clamp(1.4rem,2.4vw,1.7rem)}
.cierre--lateral .cierre__boton{width:100%; justify-content:center}
.cierre--lateral .cierre__edades span{flex-basis:100%}
.cierre--lateral .cierre__sellos{display:grid; grid-template-columns:1fr 1fr; gap:.5rem .6rem; justify-items:start; text-align:left; font-size:.86rem}
@media (max-width:900px){
  .faq-cierre{grid-template-columns:1fr}
  .cierre--lateral{position:static}
  .cierre--lateral .cierre__sellos{display:flex; justify-content:center; text-align:center}
}
.cierre__logo{
  width:52px; height:52px; border-radius:50%; background:#fff; padding:4px;
  box-shadow:0 8px 18px rgba(0,0,0,.18); margin:0 auto .7rem; display:block;
}
.cierre--portada h2{color:#fff; font-size:clamp(1.55rem,3.4vw,2.1rem); margin:0 0 .3em}
.cierre--portada .cierre__texto{color:rgba(255,255,255,.92); font-size:clamp(1.02rem,2vw,1.15rem);
  max-width:46ch; margin:0 auto 1.2rem; text-wrap:balance}
/* el botón, blanco y con sombra para que destaque sobre el degradado */
.cierre__boton{margin:0 0 1.1rem; box-shadow:0 14px 30px -12px rgba(20,20,60,.5)}
.cierre__edades{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.45rem;
  margin:0 0 1.2rem; font-size:.9rem; color:rgba(255,255,255,.88)
}
.cierre__edades span{margin-right:.2rem}
.cierre__edades a{
  font-weight:700; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.38); border-radius:999px;
  padding:.3rem .85rem; transition:background .15s ease, transform .15s ease;
}
.cierre__edades a:hover{background:rgba(255,255,255,.3); transform:translateY(-2px)}
.cierre__sellos{
  list-style:none; margin:0; padding:.9rem 0 0; border-top:1px solid rgba(255,255,255,.22);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.4rem;
  font-size:.9rem; font-weight:600; color:rgba(255,255,255,.95)
}
.cierre__sellos li{display:inline-flex; align-items:center; gap:.45rem}
.cierre__sellos li::before{
  content:"✓"; display:inline-grid; place-items:center; width:1.25rem; height:1.25rem;
  border-radius:50%; background:rgba(255,255,255,.22); font-size:.72rem; font-weight:800
}
@media (max-width:560px){
  .cierre__edades span{flex-basis:100%}
  .cierre__sellos{gap:.55rem 1rem; font-size:.86rem}
}

/* ── pie ────────────────────────────────────────────────── */
.pie{background:var(--fondo-alt); border-top:1px solid var(--borde); padding:3rem 0 1.4rem}
/* cuatro columnas: la marca (más ancha) y tres de enlaces con su título; en
   tableta, la marca arriba a todo lo ancho; en móvil, enlaces de dos en dos */
.pie__fila{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:2rem 2.4rem; align-items:start}
.pie__titulo{
  font-family:var(--tipo-titulos); font-weight:800; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto); margin:.35rem 0 .9rem;
}
.pie__col{display:flex; flex-direction:column; gap:.55rem}
.pie__col a{color:var(--texto-suave); text-decoration:none; font-size:.94rem; width:fit-content}
.pie__col a:hover{color:var(--azul-hondo); text-decoration:underline}
@media (max-width:900px){
  .pie__fila{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pie__marca-col{grid-column:1 / -1}
}
.pie__marca{
  font-family:var(--tipo-titulos); font-weight:800; font-size:1.15rem; margin:0 0 .5rem;
  display:flex; align-items:center; gap:.5rem;
}
.pie__marca img{width:30px; height:30px}
.pie__lema{
  font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 .6rem; background:var(--degradado); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.pie__nota{color:var(--texto-suave); font-size:.93rem; max-width:44ch; margin:0}
.redes{display:flex; flex-wrap:wrap; gap:.55rem; margin:1.1rem 0 0}
.redes a{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  border:1px solid var(--borde); border-radius:999px; padding:.4rem .85rem;
  color:var(--texto-suave); font-size:.9rem; font-weight:600; background:var(--superficie);
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.redes a:hover{border-color:var(--azul); color:var(--azul-hondo); transform:translateY(-2px)}
.redes svg{width:17px; height:17px; flex:none}
.pie__legal{
  border-top:1px solid var(--borde); margin-top:2.4rem; padding-top:1.2rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.5rem;
}
.pie__legal p{color:var(--texto-suave); font-size:.85rem; margin:0}
.pie__firma{color:var(--texto); font-weight:700; text-decoration:none}
.pie__firma:hover{color:var(--azul-hondo); text-decoration:underline}
/* móvil: va después de todas las reglas del pie para poder ajustarlas */
@media (max-width:560px){
  .pie{padding-top:2.2rem}
  .pie__fila{grid-template-columns:1fr 1fr; gap:1.4rem 1.2rem}
  .pie__titulo{margin:0 0 .55rem}
  .pie__col{gap:.35rem}
  .pie__col a{font-size:.9rem}
  .redes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin-top:.9rem}
  .redes a{justify-content:center; gap:.35rem; padding:.4rem .3rem; font-size:.84rem}
  .redes svg{width:15px; height:15px}
  .pie__legal{margin-top:1.6rem}
}

/* ── contenido legal ────────────────────────────────────── */
.legal{padding:clamp(2.5rem,6vw,4rem) 0}
.legal h2{margin-top:2rem}
.legal ul{color:var(--texto-suave); padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal .actualizado{color:var(--texto-suave); font-size:.92rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* /grupos/: la tabla de todos los grupos */
.tabla-grupos__caja{overflow-x:auto; margin:.6rem 0 1.4rem; border:1px solid var(--borde);
  border-radius:var(--radio); background:var(--superficie)}
.tabla-grupos{border-collapse:collapse; width:100%; font-size:.95rem}
.tabla-grupos th,.tabla-grupos td{padding:.6rem .8rem; text-align:left}
.tabla-grupos th{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-suave); border-bottom:1px solid var(--borde)}
.tabla-grupos td:last-child,.tabla-grupos th:last-child{text-align:right; font-variant-numeric:tabular-nums}
.tabla-grupos tbody tr+tr{border-top:1px solid var(--borde)}
.tabla-grupos td:nth-child(2){color:var(--texto-suave)}
@media (max-width:480px){ .tabla-grupos td:nth-child(2),.tabla-grupos th:nth-child(2){display:none} }