/* Estilos globales del sitio del foro. Componentes segun DESIGN.md. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--azul-noche);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--azul-profundo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Fraunces era una variable en 560 y ese peso no existe en Montserrat, que va
   de cien en cien. 700 es el del logotipo; la geométrica también pide cerrar
   un poco el tracking en tamaños grandes, o el título se desarma. */
h1, h2, h3 { font-family: var(--font-titulo); font-weight: 700; line-height: 1.16; margin: 0 0 var(--sp-4); letter-spacing: -0.022em; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-4); }
:focus-visible { outline: 2px solid var(--azul-acero); outline-offset: 2px; border-radius: 2px; }

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--sp-5); }
.seccion { padding: var(--sp-10) 0; }
.etiqueta {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--azul-acero); margin-bottom: var(--sp-2); display: block;
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(245 249 250 / 0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-medio) var(--ease-inout);
}
.header.con-scroll { border-bottom-color: var(--linea); }
.header-inner { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) var(--sp-5); max-width: var(--ancho-max); margin: 0 auto; }
/* El logotipo entra como una pieza: isotipo y tipografía juntos, tal como los
   entregó el diseñador. Antes el nombre se recomponía en HTML con Fraunces,
   que no es la tipografía de la marca. */
.marca { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.marca img { display: block; width: 168px; height: auto; }
@media (max-width: 400px) { .marca img { width: 140px; } }

.nav { display: flex; gap: var(--sp-5); }
.nav a {
  position: relative; text-decoration: none; color: var(--azul-noche);
  font-weight: 500; font-size: var(--fs-small); padding: var(--sp-1) 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--azul-medio); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--t-rapido) var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--azul-profundo); }

.menu-btn { display: none; background: none; border: none; padding: var(--sp-2); cursor: pointer; color: var(--azul-noche); }

@media (max-width: 720px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--superficie); border-bottom: 1px solid var(--linea);
    max-height: 0; overflow: hidden; transition: max-height var(--t-medio) var(--ease-inout);
  }
  /* Un tope en pixeles se queda corto en cuanto entra un enlace o el texto se
     alarga al traducirlo, y lo que sobra se recorta en silencio. Con vh el
     menu cabe siempre, y si algun dia no cupiera, se desplaza. */
  .nav.abierto { max-height: 80vh; overflow-y: auto; }
  .nav a { padding: var(--sp-3) var(--sp-5); }
  .nav a::after { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--sp-11) 0 var(--sp-10); }
.hero-red { position: absolute; inset: 0; pointer-events: none; }
/* Entero y dentro del cuadro, no cortado por el borde: a 380px y sangrando por
   la derecha se leía como una mancha pálida y no como el isotipo. */
.hero-red svg, .hero-red img { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: min(210px, 24vw); height: auto; }
/* Sin máscara radial: la heredó del emblema anterior, que era una ilustración
   circular y se fundía bien con el fondo. Sobre el isotipo, que tiene bordes
   duros, la máscara solo lo dejaba borroso. Ahora es la forma limpia. */
/* A 0.14 no estaba ni dejaba de estar: se veía descolorido. Más pequeño sí
   aguanta color, y ahí se lee como el isotipo y no como una mancha. */
.hero-red img { opacity: 0.9; }
.hero-contenido { position: relative; max-width: 640px; }
.hero h1 { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 2px; }
.hero .sub { font-size: 1.125rem; color: var(--tinta-suave); max-width: 520px; }
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

.boton {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 22px; border-radius: var(--r-full); border: 1px solid transparent;
  font: 600 var(--fs-small) var(--font-texto); text-decoration: none; cursor: pointer;
  transition: transform var(--t-rapido) var(--ease-out), box-shadow var(--t-rapido) var(--ease-out), background-color var(--t-rapido);
}
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-1); }
.boton:active { transform: translateY(0) scale(0.98); }
.boton-primario { background: var(--azul-profundo); color: #fff; }
.boton-primario:hover { background: var(--azul-medio); }
.boton-secundario { background: var(--superficie); color: var(--azul-profundo); border-color: var(--linea); }

/* Contadores */
.contadores { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-8); }
.contador strong { display: block; font: 600 2rem var(--font-titulo); color: var(--azul-profundo); font-variant-numeric: tabular-nums; }
.contador span { font-size: var(--fs-small); color: var(--tinta-suave); }

/* ---------- Tarjetas ---------- */
.grilla { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (min-width: 900px) { .grilla-3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  position: relative; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: var(--sp-5); box-shadow: var(--sombra-1);
  transition: transform var(--t-rapido) var(--ease-out), box-shadow var(--t-rapido) var(--ease-out);
}
.tarjeta::before {
  content: ""; position: absolute; top: 0; left: var(--r-m); right: var(--r-m); height: 3px;
  background: var(--gradiente-marca); border-radius: 0 0 3px 3px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-medio) var(--ease-out);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tarjeta:hover::before { transform: scaleX(1); }
a.tarjeta { display: block; text-decoration: none; color: inherit; }

.tarjeta-novedad::before { background: var(--dorado); transform: scaleX(1); }
.tarjeta-novedad .etiqueta { color: var(--dorado-tinta); }

/* Comunidades con monasticos residentes: barra ocre azafran, sin etiqueta */
.tarjeta-monastica::before { background: var(--ocre-monastico); transform: scaleX(1); }

.tarjeta h3 { margin-bottom: var(--sp-2); }
.tarjeta .meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--tinta-suave); flex-wrap: wrap; }
.punto-pais { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.recorte-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Avatares de grupo (logo con respaldo a la inicial) */
.avatar-inicial {
  position: relative; display: inline-grid; place-items: center; flex: none;
  border-radius: var(--r-s); color: #fff; overflow: hidden;
  font-family: var(--font-titulo); font-weight: 600;
}
.avatar-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--superficie);
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.02em;
}
.badge-online { background: rgb(84 132 156 / 0.13); color: var(--azul-acero); }
.badge-tipo { background: transparent; border: 1px solid var(--linea); color: var(--tinta-suave); }
/* el icono de categoria toma el color del chip activo */
.chip svg { flex: none; opacity: 0.75; transition: opacity var(--t-rapido); }
.chip[aria-pressed="true"] svg { opacity: 1; }
.badge svg { flex: none; opacity: 0.8; }
.badge-idioma { background: rgb(119 206 215 / 0.2); color: #2E7E86; }
.badge-presencial { background: rgb(132 180 156 / 0.18); color: #47755E; }
.badge-hibrido { background: rgb(119 206 215 / 0.18); color: #2E7E86; }

/* ---------- Chips de filtro ---------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: flex-end;
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m);
}
.filtro-bloque { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filtro-ancho { flex: 1 1 100%; }
.filtro-label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--tinta-suave);
}
.filtros-grupo { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.limpiar-enlace {
  border: none; background: none; color: var(--azul-profundo); cursor: pointer;
  font: 600 var(--fs-small) var(--font-texto); text-decoration: underline;
  text-underline-offset: 3px; padding: 8px 0; margin-left: auto;
}
@media (max-width: 720px) {
  .filtros { gap: var(--sp-4); }
  .filtros-grupo { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); -webkit-overflow-scrolling: touch; }
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-full); border: 1px solid var(--linea);
  background: var(--fondo); color: var(--azul-noche); font: 500 0.83rem var(--font-texto);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-rapido) var(--ease-inout), color var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido) var(--ease-out);
}
.chip:hover { border-color: var(--azul-acero); background: var(--superficie); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] {
  background: var(--azul-medio); border-color: var(--azul-medio); color: #fff;
  box-shadow: 0 1px 4px rgb(60 84 132 / 0.3);
}
/* contador de resultados dentro del chip */
.chip-n {
  display: inline-block; margin-left: 7px; padding: 0 5px; min-width: 17px;
  border-radius: var(--r-full); background: rgb(45 48 81 / 0.07);
  font-size: 0.68rem; font-weight: 600; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; transition: background-color var(--t-rapido), color var(--t-rapido);
}
.chip[aria-pressed="true"] .chip-n { background: rgb(255 255 255 / 0.22); color: #fff; }
/* sin resultados con los filtros actuales: se apaga, pero sigue clickeable */
.chip-vacio { opacity: 0.38; }
.chip-vacio:hover { opacity: 0.6; }
/* el panel se resalta cuando hay filtros activos */
.filtros.con-filtros { border-color: var(--azul-acero); box-shadow: var(--sombra-1); }
.select {
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--linea);
  background: var(--superficie); font: 500 var(--fs-small) var(--font-texto); color: var(--azul-noche);
}
.buscador {
  padding: 10px 16px; border-radius: var(--r-full); border: 1px solid var(--linea);
  background: var(--superficie); font: var(--fs-body) var(--font-texto); width: min(380px, 100%);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.buscador:focus { border-color: var(--azul-acero); box-shadow: 0 0 0 3px rgb(119 206 215 / 0.25); outline: none; }

/* ---------- Barra de navegación del calendario (DESIGN-V2 §5) ----------
   Días y modalidad siempre a la vista. La modalidad vive aquí y no en el panel
   de filtros porque es la pregunta que más se hace: ¿puedo entrar desde casa? */
.barra-nav {
  position: sticky; top: 60px; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: rgb(245 249 250 / 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
}
.barra-dias { flex: 1 1 auto; min-width: 0; }
.barra-dias-scroll {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-bottom: 2px;
}
.barra-dias-scroll::-webkit-scrollbar { display: none; }
.barra-sep { width: 1px; background: var(--linea); flex: none; margin: 4px var(--sp-2); }

.pastilla-dia {
  display: inline-flex; align-items: center; gap: 5px; flex: none; scroll-snap-align: start;
  min-height: 34px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  border: 1px solid transparent; background: none; cursor: pointer;
  font: 600 var(--fs-small) var(--font-texto); color: var(--tinta-suave);
  transition: background var(--t-rapido), color var(--t-rapido);
}
.pastilla-dia:hover:not([disabled]) { background: var(--superficie); color: var(--azul-profundo); border-color: var(--linea); }
.pastilla-dia:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }
.pastilla-dia[disabled] { opacity: 0.32; cursor: default; }
.pastilla-n {
  font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--linea); color: var(--tinta-suave); border-radius: var(--r-full); padding: 0 5px; min-width: 17px; text-align: center;
}
/* Hoy: punto dorado a la izquierda, la única marca temporal de la barra */
.pastilla-dia.es-hoy { color: var(--azul-profundo); }
.pastilla-dia.es-hoy::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dorado); flex: none; }
/* En la vista horario la pastilla no navega: elige el día que se dibuja.
   Va con doble clase para ganarle a `.pastilla-dia.es-hoy`, que si no deja el
   texto del mismo azul que este fondo. */
.pastilla-dia.pastilla-activa { background: var(--azul-profundo); color: #fff; }
.pastilla-dia.pastilla-activa:hover:not([disabled]) { background: var(--azul-medio); color: #fff; border-color: transparent; }
.pastilla-dia.pastilla-activa .pastilla-n { background: rgb(255 255 255 / 0.22); color: #fff; }
.pastilla-otra { color: var(--tinta-suave); font-weight: 500; }

/* ---------- Filtros como menús de selección múltiple ----------
   Cinco menús en una fila, en vez de cinco bloques de chips apilados que
   ocupaban media pantalla antes de la primera actividad. */
.barra-filtros {
  position: sticky; top: 104px; z-index: 19;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: rgb(245 249 250 / 0.92); backdrop-filter: blur(10px);
  padding: var(--sp-2) 0 var(--sp-3); margin-bottom: var(--sp-3);
}
.menu { position: relative; }
.menu-btn-f {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--linea); background: var(--superficie); cursor: pointer;
  font: 500 var(--fs-small) var(--font-texto); color: var(--azul-noche);
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.menu-btn-f:hover { border-color: var(--azul-acero); }
.menu-btn-f:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }
.menu-btn-f svg { opacity: 0.55; transition: transform var(--t-rapido) var(--ease-out); }
.menu-btn-f[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-btn-f[aria-expanded="true"] { border-color: var(--azul-acero); }
.menu-activo { border-color: var(--azul-profundo); background: rgb(60 60 108 / 0.06); font-weight: 600; }
.menu-n {
  background: var(--azul-profundo); color: #fff; border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: 600; padding: 0 6px; min-width: 18px; text-align: center;
}

.menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 232px; max-height: 320px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); box-shadow: var(--sombra-2); padding: 6px;
}
/* Todos / Ninguno: sin selección ya significa todos, pero marcarlos de golpe
   es lo que la gente busca cuando quiere quitar uno o dos de la lista. */
.menu-cab {
  display: flex; gap: var(--sp-2); padding: 2px 4px 7px;
  border-bottom: 1px solid var(--linea); margin-bottom: 5px;
}
.menu-cab button {
  flex: 1; padding: 5px 8px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--superficie); cursor: pointer;
  font: 600 var(--fs-micro) var(--font-texto); color: var(--azul-profundo);
}
.menu-cab button:hover:not(:disabled) { border-color: var(--azul-acero); background: var(--fondo); }
.menu-cab button:disabled { opacity: 0.4; cursor: default; }
.menu-cab button:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }

.menu-op {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px 9px; border-radius: var(--r-s); cursor: pointer;
  font-size: var(--fs-small); line-height: 1.3;
}
.menu-op:hover { background: var(--fondo); }
.menu-op input { accent-color: var(--azul-profundo); width: 15px; height: 15px; flex: none; margin: 0; cursor: pointer; }
.menu-op > span:nth-of-type(1) { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.menu-op svg { flex: none; opacity: 0.7; }
.menu-op-n { font-size: var(--fs-micro); color: var(--tinta-suave); font-variant-numeric: tabular-nums; flex: none; }
/* una opción sin resultados con los filtros puestos se atenúa, no se esconde:
   esconderla haría creer que el valor no existe */
.menu-op-vacia { opacity: 0.4; }

/* Filtros activos: el estado del filtrado nunca queda invisible */
.filtros-activos { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip-activo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full); border: none; cursor: pointer;
  background: var(--azul-profundo); color: #fff;
  font: 500 var(--fs-micro) var(--font-texto);
}
.chip-activo:hover { background: var(--azul-medio); }
.chip-activo:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }

@media (max-width: 720px) {
  .barra-nav { top: 56px; gap: var(--sp-2); }
  /* objetivo táctil mínimo de 44px en táctil */
  .pastilla-dia { min-height: 44px; padding: 0 var(--sp-4); }

  /* Los cinco menús envueltos ocupaban tres filas: con la barra de vistas
     encima eran 273px de cabecera fija sobre una pantalla de 812. En una sola
     fila con desplazamiento lateral son 48. */
  .barra-filtros {
    position: static; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: var(--sp-2);
    /* sin backdrop-filter aquí: un ancestro que lo tenga se vuelve el bloque
       contenedor de los `position: fixed` de adentro, y entonces el panel del
       menú vuelve a quedar preso del overflow de esta misma barra */
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .barra-filtros::-webkit-scrollbar { display: none; }

  /* El panel salía como caja flotante dentro de la barra, y la barra
     desplaza en horizontal: el overflow lo recortaba y al tocar un filtro no
     pasaba nada visible. Bhante lo reportó como "los botones están pero hay
     que activarlos". En un teléfono va como hoja desde abajo, que además es
     donde llega el pulgar. */
  .menu-panel {
    /* 100vw y no left:0/right:0: dentro de la barra que desplaza en horizontal
       el par left/right no resolvía contra el viewport y la hoja salía de 285px
       en una pantalla de 375. El ancho de ventana no depende de nada de eso. */
    position: fixed; left: 0; right: auto; bottom: 0; top: auto;
    width: 100vw; min-width: 0; max-width: none; max-height: 62vh; overflow-y: auto;
    border-radius: var(--r-m) var(--r-m) 0 0; z-index: 80;
    box-shadow: 0 -6px 30px rgb(45 48 81 / 0.22);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }
  .menu-op { min-height: 44px; }
  .menu-cab button { min-height: 40px; }
  .menu { flex: none; }
  .menu-btn-f { min-height: 40px; }
}

/* ---------- Vista de día con eje de horas (DESIGN-V2 §6) ---------- */
.horario { position: relative; margin-top: var(--sp-4); }
.hr-reglas { position: absolute; inset: 0; }
.hr-hora {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--linea);
}
.hr-hora span {
  position: absolute; top: -8px; left: 0; width: 52px;
  font-size: var(--fs-micro); color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; background: var(--fondo); padding-right: 6px;
}
/* tramo sin nada: la línea se vuelve punteada para que se lea como un salto */
.hr-hora-muerta { border-top-style: dashed; border-top-color: var(--linea); }
.hr-hora-muerta span { opacity: 0.55; }
/* la pista arranca donde termina la columna de horas */
.hr-pista { position: relative; margin-left: 56px; height: 100%; }

.hr-bloque {
  position: absolute; overflow: hidden;
  /* lado a lado: cada solapado toma su fracción del ancho */
  left: calc(var(--col) * 100% / var(--cols));
  width: calc(100% / var(--cols) - 4px);
  background: var(--superficie); border: 1px solid var(--linea);
  /* el riel va como pseudo-elemento: border-image pintaría los cuatro bordes */
  padding-left: 6px;
  border-radius: var(--r-s);
  transition: box-shadow var(--t-rapido) var(--ease-out), border-color var(--t-rapido);
}
.hr-bloque::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--ev-riel, var(--ev-color, var(--azul-acero)));
}
.hr-bloque:hover { box-shadow: var(--sombra-1); border-color: var(--azul-acero); z-index: 3; }
/* duración supuesta: el borde punteado lo dice sin texto */
.hr-estimado { border-bottom-style: dashed; }

.hr-btn {
  display: block; width: 100%; height: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 5px 8px;
  font: inherit; color: inherit; overflow: hidden;
}
.hr-btn:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: -2px; }
.hr-hora-txt { font-size: var(--fs-micro); font-weight: 700; color: var(--azul-profundo); font-variant-numeric: tabular-nums; }
.hr-titulo {
  display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--azul-noche);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35;
}
.hr-titulo svg { vertical-align: -2px; margin-right: 3px; opacity: 0.7; }
.hr-grupo {
  display: block; font-size: var(--fs-micro); color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Al abrirse, el bloque deja de estar atado a la rejilla y muestra todo */
.hr-bloque.ev-abierto {
  height: auto !important; min-height: 0; z-index: 25;
  width: calc(100% - 4px) !important; left: 0 !important;
  box-shadow: var(--sombra-2); border-color: var(--azul-acero);
}

/* Con uno abierto, los demás se retiran a un segundo plano. El abierto crece
   por encima de la rejilla y sin esto se lee como si dos actividades fueran
   una sola, sobre todo en un teléfono, donde ocupa casi todo el ancho. */
.horario.hay-abierto .hr-bloque:not(.ev-abierto),
.horario.hay-abierto .hr-suelto:not(.ev-abierto) {
  opacity: 0.28; transition: opacity var(--t-rapido) var(--ease-out);
}

/* "+N" en el carril de las horas: no le quita ancho a los bloques, que es lo
   que escasea en un teléfono, y queda a la altura exacta de la hora llena. */
/* z-index propio: vive en `.hr-reglas`, que va antes que `.hr-pista` en el
   DOM, así que sin esto los bloques del horario se lo comen. Se veía dibujado
   pero el toque lo recibía el bloque de abajo, y el "+N" no abría nada. */
.hr-mas-eje {
  position: relative; z-index: 12;
  display: block; margin-top: 2px; margin-left: auto; margin-right: 6px;
  border: 1px dashed var(--linea); background: var(--superficie);
  border-radius: var(--r-full); padding: 1px 7px; cursor: pointer;
  font: 600 var(--fs-micro) var(--font-texto); color: var(--tinta-suave);
}
.hr-mas-eje:hover, .hr-mas-eje[aria-expanded="true"] {
  border-style: solid; border-color: var(--azul-acero);
  color: var(--azul-profundo); background: var(--fondo);
}
/* Con `.hr-mas-panel` a secas pierde contra el `.ev-detalle { position:
   relative }` de más abajo, que tiene la misma especificidad y gana por venir
   después: el panel caía al pie de la página. */
.horario .hr-mas-panel {
  position: absolute; left: 56px; right: 0; z-index: 30;
  background: var(--superficie); border: 1px solid var(--azul-acero);
  border-radius: var(--r-s); box-shadow: var(--sombra-2);
  padding: var(--sp-3); max-height: 320px; overflow-y: auto;
}
.horario .hr-mas-panel { padding: var(--sp-2); }
.hr-mas-panel .ev { margin-bottom: 4px; }
.hr-mas-panel .ev:last-child { margin-bottom: 0; }
/* Sin esto el nombre de la actividad desaparece entero y la ficha dice solo
   "Meditación ·", que no distingue una de otra */
.hr-mas-panel .ev-nombre {
  white-space: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Dos clases y no una: `.ev-detalle` se declara más abajo con un sangrado
   izquierdo de 84px, que es el ancho de la columna de horas de la vista de
   lista. Sobre el panel flotante del horario ese sangrado no tiene nada que
   alinear y dejaba el texto en una columna de 130px, con todo partido en dos
   líneas. */
.hr-detalle.ev-detalle { padding: var(--sp-3) var(--sp-4); border-radius: 0; }
.hr-nota { font-size: var(--fs-micro); color: var(--tinta-suave); margin-top: var(--sp-4); }

.segmentado-chico button { padding: 5px 12px; font-size: var(--fs-micro); }

/* ---------- Semana: siete columnas sobre el mismo eje de horas ---------- */
.semana { margin-top: var(--sp-4); }
.sem-cabs {
  display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 0;
  border-bottom: 1px solid var(--linea); margin-bottom: 2px;
}
.sem-cab {
  text-align: center; padding: 6px 2px;
  font: 600 var(--fs-micro) var(--font-texto); color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sem-cab span {
  display: block; font-size: var(--fs-micro); font-weight: 500;
  color: var(--tinta-suave); opacity: 0.75; text-transform: none; letter-spacing: 0;
}
.sem-cab.sem-hoy { color: var(--azul-profundo); }
.sem-cab.sem-hoy::after {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--dorado); margin: 2px auto 0;
}
/* Banda de lo que aún no tiene hora, sobre la rejilla */
.sem-banda { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); margin-bottom: 2px; }
/* min-width y overflow: sin ellos una pastilla de título largo empujaba su
   columna y se desbordaba sobre la del día siguiente. El grid reparte en
   séptimos, pero una celda con contenido ancho crece igual salvo que se le
   diga explícitamente que puede encogerse. */
.sem-banda-col {
  padding: 3px 2px; display: grid; gap: 2px; align-content: start;
  border-left: 1px solid var(--linea); min-width: 0;
}
/* Sin overflow:hidden en la columna: recortaba también el detalle, que es un
   panel absoluto y tiene que poder salirse de ella. Lo que se recorta es el
   TEXTO de la pastilla, que es lo que empujaba la columna. Cada eslabón de la
   cadena necesita su min-width:0, o el contenido gana igual. */
.sem-banda-col .hr-suelto { min-width: 0; }
.sem-banda-col .hr-suelto-btn { min-width: 0; overflow: hidden; }
.sem-banda-col .hr-suelto-btn > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* y el detalle por encima de las pastillas vecinas */
.sem-banda-col .hr-suelto.ev-abierto { z-index: 40; }
.hr-banda { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--linea); margin-bottom: var(--sp-3); }
.hr-banda-lista { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1; }
.hr-banda-tit {
  font-size: var(--fs-micro); color: var(--tinta-suave); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 0; width: 56px; flex: none;
}
.hr-suelto { position: relative; }
.hr-suelto-btn {
  display: flex; align-items: center; gap: 4px; width: 100%; text-align: left;
  background: var(--fondo); border: 1px solid var(--linea);
  border-left: 6px solid transparent; background-clip: padding-box;
  border-radius: 3px; padding: 3px 5px; cursor: pointer;
  font: 500 var(--fs-micro) var(--font-texto); color: var(--azul-noche);
}
/* Las jornadas llevan su franja horaria delante: sí tienen hora, lo que no
   tienen es un rato acotado. Sin esto se leerían igual que las que el grupo
   todavía no ha publicado, que es lo contrario. */
.hr-suelto-hora {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--tinta-suave); letter-spacing: -0.01em;
}
/* Las que el grupo no ha publicado lo dicen: en la misma banda que una jornada
   con su franja, sin esto parecían empezar a la misma hora que ella. */
.hr-sin-hora { font-weight: 500; font-style: italic; opacity: 0.75; }
.ev-dato-suave { color: var(--tinta-suave); font-style: italic; }
.hr-jornada .hr-suelto-btn { background: var(--superficie); }

.hr-suelto::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--ev-riel, var(--azul-acero)); border-radius: 3px 0 0 3px; pointer-events: none;
}
.hr-suelto-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-suelto-btn:hover { border-color: var(--azul-acero); }
/* El detalle del suelto flota sobre la rejilla: sin techo de alto tapaba media
   pantalla. Ancho fijo y scroll propio. */
.hr-suelto .ev-detalle {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 3px);
  width: 280px; max-width: 78vw; max-height: 260px; overflow-y: auto;
  box-shadow: var(--sombra-2); border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--superficie);
  padding: var(--sp-3) var(--sp-4);
}
/* los últimos dos días no tienen espacio a la derecha: el panel se ancla al otro lado */
.sem-banda-col:nth-last-child(-n+2) .hr-suelto .ev-detalle { left: auto; right: 0; }

.sem-pista { position: relative; margin-left: 56px; height: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sem-col { position: relative; border-left: 1px solid var(--linea); }
.sem-col.sem-hoy { background: rgb(210 193 147 / 0.07); }
/* Dos solapados como máximo por columna, lado a lado. La cascada anterior
   apilaba los rieles hasta que ninguna bandera se distinguía, que es
   exactamente lo que hacía ilegible el domingo. El resto va al "+N". */
.sem-col .hr-bloque {
  left: calc(var(--col) * 100% / var(--cols) + 1px);
  width: calc(100% / var(--cols) - 3px);
}
/* el grupo solo cuando el bloque da la altura, si no roba la línea al título */
.sem-col .hr-grupo { display: none; }
.sem-col .hr-amplio .hr-grupo { display: block; margin-top: 1px; }
.sem-col .hr-amplio .hr-titulo { -webkit-line-clamp: 2; }
.sem-col .hr-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sem-col .hr-btn { padding: 3px 4px; }
.sem-col .hr-bloque.ev-abierto { width: 260px !important; left: 0 !important; z-index: 20; }

/* El resto del solapamiento: un botón que lleva al día completo */
.hr-mas {
  position: absolute; right: 2px; width: 26px;
  border: 1px dashed var(--linea); border-radius: 3px;
  background: var(--fondo); cursor: pointer; padding: 0;
  font: 600 var(--fs-micro) var(--font-texto); color: var(--tinta-suave);
  display: grid; place-items: center; z-index: 4;
}
.hr-mas:hover { border-color: var(--azul-acero); color: var(--azul-profundo); background: var(--superficie); }
.hr-mas:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }

/* ---------- Mes: solo lo que cae en un día concreto ---------- */
.mes-cabecera { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.mes-cabecera h3 { margin: 0; min-width: 190px; }
.mes-nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--superficie); cursor: pointer; color: var(--azul-profundo);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.mes-nav:hover { border-color: var(--azul-acero); }

.mes {
  /* minmax(0,1fr) y no 1fr: en grid el minimo por defecto es el del
     contenido, y un titulo largo empujaba la septima columna fuera del ancho */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-s); overflow: hidden;
}
.mes-dow {
  background: var(--fondo); text-align: center; padding: 6px 2px;
  font: 600 var(--fs-micro) var(--font-texto); color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* La celda entera es el botón: el objetivo de toque es el día completo, no un
   texto de 12px dentro de él. */
.mes-celda {
  background: var(--superficie); min-height: 108px; padding: 6px 7px;
  display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  border: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-rapido) var(--ease-out);
}
button.mes-celda:hover { background: rgb(84 132 156 / 0.07); }
.mes-celda:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: -2px; }
.mes-fuera { background: var(--fondo); cursor: default; }
.mes-vacia { cursor: default; }
.mes-num { font-size: var(--fs-small); font-weight: 600; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.mes-hoy { background: rgb(210 193 147 / 0.14); }
.mes-hoy .mes-num { color: var(--azul-profundo); font-weight: 700; }
/* el día abierto abajo se marca con el azul de marca, no con un borde: en una
   rejilla de un pixel de separación un borde desplaza toda la fila */
.mes-abierta, button.mes-abierta:hover { background: rgb(4 193 217 / 0.14); box-shadow: inset 0 0 0 2px var(--azul-acero); }
.mes-abierta .mes-num { color: var(--azul-noche); font-weight: 700; }

/* Los puntos de país solo aparecen en el teléfono, donde no cabe el texto */
.mes-puntos { display: none; gap: 3px; min-height: 5px; }
.mes-puntos i { width: 5px; height: 5px; border-radius: 50%; }
/* La cuenta del día solo se muestra en el teléfono: en escritorio los
   nombres ya están escritos en la celda. */
.mes-retiros { display: none; }

.mes-ev {
  display: flex; align-items: center; gap: 5px;
  background: var(--fondo); border-radius: 3px; padding: 3px 5px;
  font-size: var(--fs-small); line-height: 1.3; color: var(--azul-noche);
  overflow: hidden;
}
.mes-ev i { width: 3px; align-self: stretch; min-height: 13px; background: var(--ev-riel, var(--azul-acero)); border-radius: 2px; flex: none; }
.mes-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-ev b { font-weight: 700; color: var(--azul-medio); font-variant-numeric: tabular-nums; flex: none; }
.mes-mas { font-size: var(--fs-micro); font-weight: 600; color: var(--azul-medio); padding: 1px 5px; }

/* Agenda del día bajo la rejilla: el mismo componente en escritorio y teléfono */
.mes-agenda { margin-top: var(--sp-6); }
.mes-agenda-bloque { margin-bottom: var(--sp-4); }
.mes-agenda-bloque .hr-banda-tit { display: block; margin-bottom: var(--sp-2); }

@media (max-width: 860px) {
  /* En el teléfono la rejilla deja de intentar contar la historia: solo dice
     qué días tienen algo. La agenda de abajo es la que se lee. */
  .mes-celda {
    min-height: 0; aspect-ratio: 1; padding: 4px 2px; gap: 2px;
    align-items: center; justify-content: center;
  }
  .mes-num { font-size: var(--fs-small); }
  .mes-puntos { display: flex; }
  .mes-ev, .mes-mas { display: none; }
  .mes-retiros {
    display: block; font-size: 9px; font-weight: 700; line-height: 1.1;
    color: var(--azul-medio); letter-spacing: -0.01em; text-align: center;
    max-width: 100%; overflow: hidden; white-space: nowrap;
  }
  .mes-agenda { margin-top: var(--sp-5); }
}

@media (max-width: 640px) {
  .hr-pista { margin-left: 46px; }
  .hr-hora span { width: 42px; }
  /* Antes iban en cascada, cada solapado asomando 13% por la izquierda del
     siguiente. Con dos actividades se leía; con cinco a la misma hora, que es
     lo que pasa un miércoles, quedaban unas encima de otras sin poder leer
     ninguna. Ahora la vista de día recorta a dos por franja (MAX_DIA_ANGOSTO)
     y ofrece el resto como "+N" en el carril de las horas, así que dos
     columnas de ~160px alcanzan y no hay que encimar nada. */
  .hr-bloque {
    left: calc(var(--col) * 100% / var(--cols));
    width: calc(100% / var(--cols) - 4px);
  }
  /* Con dos columnas de ~160px el título necesita una segunda línea o se corta
     en la primera palabra */
  .hr-titulo {
    white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}

/* ---------- Agenda ---------- */
.dia-grupo { margin-bottom: var(--sp-7); scroll-margin-top: 116px; }
.dia-titulo {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-bottom: 1px solid var(--linea); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
}
.dia-titulo h3 { margin: 0; }
.dia-titulo span { font-size: var(--fs-small); color: var(--tinta-suave); }

/* ---------- Tarjeta compacta de evento (DESIGN-V2 §4) ----------
   52px por fila en vez de ~110px: el scroll se reduce a la mitad, que era la
   queja de fondo. El detalle no se pierde, se pide. */
.ev {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-s); margin-bottom: 6px; overflow: hidden;
  transition: border-color var(--t-rapido) var(--ease-out), box-shadow var(--t-rapido) var(--ease-out);
}
.ev:hover { border-color: var(--azul-acero); box-shadow: var(--sombra-1); }
.ev-abierto { border-color: var(--azul-acero); box-shadow: var(--sombra-1); }

.ev-fila {
  display: grid; grid-template-columns: 6px 64px 1fr auto auto;
  align-items: center; gap: var(--sp-4);
  width: 100%; min-height: 52px; padding: 0 var(--sp-4) 0 0;
  background: none; border: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.ev-fila:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: -2px; }

/* El riel es el canal de país: 5px con las franjas de su bandera, siempre en
   el mismo sitio. La bandera se reconoce sin memorizar ninguna clave de color,
   que era el límite de asignar tonos arbitrarios a doce países. */
.ev-riel {
  align-self: stretch;
  background: var(--ev-riel, var(--ev-color, var(--azul-acero)));
  box-shadow: inset -1px 0 0 rgb(45 48 81 / 0.10);
}

/* Columna de hora fija: el eje vertical de escaneo de toda la agenda */
.ev-guia {
  font-size: 1.05rem; font-weight: 650; color: var(--azul-profundo);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* Una fecha larga ("primer domingo de cada mes hasta diciembre de 2026") no
   puede reventar la fila: se recorta a dos líneas y el texto íntegro vive en
   el detalle. */
.ev-guia-fecha {
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.ev-guia-suave { font-size: var(--fs-micro); font-weight: 500; color: var(--tinta-suave); }

/* Logo de la comunidad (solo en el home). El riel dice el país y el logo dice
   quién: dos señales distintas, no dos veces la misma. Va después de la hora
   para no romper el eje vertical de escaneo. */
.ev-fila-avatar { grid-template-columns: 6px 64px auto 1fr auto auto; }
.ev-avatar { display: flex; flex: none; }
.ev-avatar .avatar-inicial { border-radius: 7px; }
/* el 42 es el ancho del logo de la comunidad: si cambia alli, cambia aqui */
.ev-fila-avatar + .ev-detalle { padding-left: calc(6px + 64px + var(--sp-4) + 42px + var(--sp-4)); }

.ev-titulo { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-small); }
.ev-tipo { display: inline-flex; align-items: center; gap: 5px; color: var(--azul-medio); font-weight: 600; flex: none; }
.ev-tipo svg { flex: none; opacity: 0.85; }
.ev-sep { color: var(--linea); flex: none; }
.ev-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--azul-noche); }

.ev-chips { display: flex; align-items: center; gap: 5px; flex: none; }
.ev-chip {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 600; white-space: nowrap;
}
.ev-chip-online { background: rgb(119 206 215 / 0.18); color: #2E7E86; }
.ev-chip-presencial { background: rgb(132 180 156 / 0.2); color: #47755E; }
.ev-chip-hibrido { background: rgb(84 132 156 / 0.16); color: var(--azul-acero); }
.ev-chip-idioma { background: rgb(210 193 147 / 0.32); color: var(--dorado-tinta); letter-spacing: 0.04em; }
.ev-chip-cruce { background: rgb(179 111 36 / 0.13); color: var(--ocre-monastico); }

.ev-chevron { display: flex; color: var(--tinta-suave); transition: transform var(--t-medio) var(--ease-out); }
.ev-abierto .ev-chevron { transform: rotate(180deg); }

.ev-detalle {
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(6px + 64px + var(--sp-4));
  border-top: 1px solid var(--linea); background: var(--fondo);
  display: grid; gap: var(--sp-3);
}
/* display:grid gana sobre el display:none implícito de [hidden]: hay que
   declararlo explícitamente o todas las tarjetas nacen abiertas. */
.ev-detalle[hidden] { display: none; }
/* La X vive en la esquina del detalle. En la lista el detalle es parte de la
   fila y la X es una cortesía; en las rejillas flota sobre el calendario y es
   la forma natural de salir. */
.ev-detalle { position: relative; }
.ev-cerrar {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: none; cursor: pointer;
  color: var(--tinta-suave);
  transition: background var(--t-rapido), color var(--t-rapido);
}
.ev-cerrar:hover { background: rgb(45 48 81 / 0.07); color: var(--azul-profundo); }
.ev-cerrar:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }
/* el contenido no se mete debajo de la X */
.ev-detalle > .ev-grupo { padding-right: 30px; }

.ev-grupo { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 600; color: var(--azul-profundo); text-decoration: none; width: fit-content; }
.ev-grupo:hover { text-decoration: underline; }
.ev-grupo .avatar-inicial { border-radius: 6px; }
.ev-datos { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); font-size: var(--fs-small); }
.ev-dato .etiqueta { display: block; margin-bottom: 1px; }
.ev-nota { font-size: var(--fs-small); color: var(--tinta-suave); margin: 0; max-width: 62ch; line-height: 1.6; }
.ev-acciones { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 640px) {
  /* Dos líneas: título arriba, hora y chips abajo.

     El título ocupa las dos columnas centrales y solo el chevron le hace
     sombra. Antes vivía en la columna de la hora, y esa columna la fijaban
     los chips de la fila de abajo (Brasil / PT / En línea): con 390px de
     ancho el título se quedaba en 143px y las 14 actividades del home salían
     cortadas ("Vass…", "Preg…"). Al extenderlo hasta el chevron pasa a 240px.
     La columna del chevron se declara en 16px para que el ancho lo mande la
     fila de arriba, no los chips. */
  .ev-fila {
    grid-template-columns: 6px 1fr auto 16px; grid-template-rows: auto auto;
    gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; min-height: 64px;
  }
  /* hora y chips en columnas distintas: en la misma celda se solapan cuando la
     fecha es larga */
  .ev-riel { grid-row: 1 / -1; }
  .ev-titulo { grid-column: 2 / 4; grid-row: 1; }
  .ev-guia { grid-column: 2; grid-row: 2; font-size: var(--fs-small); align-self: center; }
  .ev-guia-fecha { -webkit-line-clamp: 1; }
  .ev-chips { grid-column: 3 / -1; grid-row: 2; justify-self: end; }
  .ev-chevron { grid-column: 4; grid-row: 1; justify-self: end; }
  .ev-detalle { padding-left: calc(6px + var(--sp-3)); }

  /* Con logo el teléfono gana una columna más: el logo ocupa las dos filas a
     la izquierda y todo lo demás se corre uno. */
  .ev-fila-avatar { grid-template-columns: 6px auto 1fr auto 16px; }
  .ev-fila-avatar .ev-avatar { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .ev-fila-avatar .ev-titulo { grid-column: 3 / 5; grid-row: 1; }
  .ev-fila-avatar .ev-guia { grid-column: 3; grid-row: 2; }
  .ev-fila-avatar .ev-chips { grid-column: 4 / -1; grid-row: 2; justify-self: end; }
  .ev-fila-avatar .ev-chevron { grid-column: 5; grid-row: 1; }
  .ev-fila-avatar + .ev-detalle { padding-left: calc(6px + var(--sp-3)); }
  .ev-datos { gap: var(--sp-3); }
}

.zona-aviso {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgb(119 206 215 / 0.14); color: var(--azul-medio);
  border-radius: var(--r-full); padding: 6px 16px; font-size: var(--fs-small);
  opacity: 0; transition: opacity var(--t-lento) var(--ease-out);
}
.zona-aviso.visible { opacity: 1; }

/* Aviso de resultados en la otra pestaña */
.cruce {
  background: rgb(119 206 215 / 0.14); border: 1px solid rgb(119 206 215 / 0.4);
  border-radius: var(--r-s); padding: 10px var(--sp-4); margin: 0 0 var(--sp-5);
  font-size: var(--fs-small); color: var(--azul-medio);
}
.enlace-cruce {
  border: none; background: none; padding: 0; cursor: pointer;
  font: 600 var(--fs-small) var(--font-texto); color: var(--azul-profundo);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Tabs */
.tabs { display: inline-flex; background: rgb(226 234 238 / 0.6); border-radius: var(--r-full); padding: 4px; gap: 2px; margin-bottom: var(--sp-5); }
.tab {
  border: none; background: transparent; padding: 8px 20px; border-radius: var(--r-full);
  font: 600 var(--fs-small) var(--font-texto); color: var(--tinta-suave); cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease-inout), color var(--t-rapido);
}
.tab[aria-selected="true"] { background: var(--superficie); color: var(--azul-profundo); box-shadow: var(--sombra-1); }

/* ---------- Estado vacio ---------- */
.vacio { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--tinta-suave); }
.vacio svg { width: 56px; height: 56px; margin-bottom: var(--sp-4); color: var(--verde-bodhi); }

/* ---------- Mapa de la región ---------- */
.mapa-bloque {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6); align-items: start; margin-top: var(--sp-5);
}
.mapa-lienzo svg { width: 100%; height: auto; max-height: 560px; display: block; }

.pais {
  fill: var(--mapa-vacio); stroke: var(--fondo); stroke-width: 0.8;
  /* --t-medio y no --t-rapido: al cambiar de lente el color cambia de
     significado, y la transición más lenta hace legible el cambio */
  transition: fill var(--t-medio) var(--ease-inout), opacity var(--t-rapido);
}
/* Cuatro escalones, no un degradado: con pocos datos un degradado continuo
   sugiere una precisión que no existe (DESIGN-V2 §7).

   Los pasos son parejos en L*, que es la escala en que el ojo compara claros
   y oscuros: 16 puntos entre cada uno. La versión anterior saltaba 12, 25 y
   32, y ese último salto pintaba a México casi negro al lado de Brasil, lo
   que Bhante leyó como "una prominencia inexistente" (12-ago). Con siete
   comunidades contra cuatro, la diferencia es real pero no es esa.

   Los valores viven en tokens.css: el mock de los recuadros satélite tiene
   que pintar con exactamente los mismos. */
.pais.nivel-1 { fill: var(--mapa-1); }
.pais.nivel-2 { fill: var(--mapa-2); }
.pais.nivel-3 { fill: var(--mapa-3); }
.pais.nivel-4 { fill: var(--mapa-4); }

/* Dos lentes sobre el mismo mapa: comunidades o actividades (DESIGN-V2 §8) */
.mapa-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.segmentado {
  display: inline-flex; background: rgb(226 234 238 / 0.6);
  border-radius: var(--r-full); padding: 3px; gap: 2px;
}
.segmentado button {
  border: none; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: var(--r-full);
  font: 600 var(--fs-small) var(--font-texto); color: var(--tinta-suave);
  transition: background var(--t-rapido), color var(--t-rapido);
}
.segmentado button:hover { color: var(--azul-profundo); }
.segmentado button[aria-pressed="true"] {
  background: var(--superficie); color: var(--azul-profundo); box-shadow: var(--sombra-1);
}
.segmentado button:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }
@media (max-width: 720px) {
  .segmentado { width: 100%; }
  .segmentado button { flex: 1; min-height: 44px; }
}

/* El filtro de monásticos lleva el ocre que ya distingue a esas comunidades en
   la barra superior de su tarjeta: es la misma señal, dicha dos veces. */
.chip-monastica { border-color: rgb(179 111 36 / 0.4); }
.chip-monastica:hover { border-color: var(--ocre-monastico); }
.chip-monastica[aria-pressed="true"] {
  background: var(--ocre-monastico); border-color: var(--ocre-monastico); color: #fff;
}

/* Mapa como selector, en la página de grupos (H2). Más bajo que el de la home
   porque aquí no es el protagonista: es un filtro con forma de región. */
.mapa-selector {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-6); align-items: center;
  margin: var(--sp-5) 0 var(--sp-6);
}
.mapa-selector .mapa-lienzo svg { max-height: 320px; width: 100%; height: auto; }
.mapa-selector .pais:not(.sin-datos) { cursor: pointer; }
.mapa-selector .pais:not(.sin-datos):hover { opacity: 0.78; }
.mapa-selector-lado { display: grid; gap: var(--sp-3); align-content: center; }
.mapa-selector-lado .filtro-label { margin: 0; }
@media (max-width: 760px) {
  /* En un teléfono el mapa se lleva la pantalla entera antes del buscador:
     va debajo, y más pequeño. */
  .mapa-selector { grid-template-columns: 1fr; gap: var(--sp-4); }
  .mapa-selector .mapa-lienzo { order: 2; }
  .mapa-selector .mapa-lienzo svg { max-height: 240px; }
}

/* Recuadros de los países que no caben en el mapa (F8/G7, opción A del mock).
   Cada uno llena su recuadro: se reconocen de inmediato y pesan lo mismo que
   los del mapa, que es el mensaje. El tamaño relativo se pierde a propósito;
   a escala real España queda de 33px al lado de Estados Unidos. */
.satelites { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.satelites-bloque {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--linea); display: grid; gap: var(--sp-2);
}
.satelites-bloque .filtro-label { margin: 0; }

/* ---------- Hero con la marca aplicada ----------
   El asterisco enorme entrando por la esquina y cortado por el borde, que es
   el recurso de la lámina de aplicaciones. Se sale del cuadro a propósito: así
   se lee como forma y no como el logotipo puesto de adorno. */
.hero-marca {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  color: var(--marca-turquesa);
}
/* Cuánto se sale del cuadro. El asterisco ocupa el 62% del viewBox, así que
   con el centro muy afuera solo asoman tres brazos y deja de leerse como
   rueda de ocho radios. */
.hero-marca svg {
  /* La rueda nueva ocupa el 61% de su caja y el asterisco viejo ocupaba el 75%,
     asi que al mismo ancho de SVG se veia mas chica. Con 900 vuelve al tamano
     que tenia, y baja para salirse por la esquina de abajo como en la lamina. */
  position: absolute; right: -6%; top: auto; bottom: -52%; transform: none;
  width: min(980px, 78vw); height: auto; opacity: 0.9;
}
/* Muy cortado: como en la bolsa del manual, solo un pedazo */
.hero.recorte-alto .hero-marca svg {
  right: -7%; top: auto; bottom: -46%; transform: none; width: min(600px, 55vw);
}
/* Sin cortar: la rueda entera, como el sello circular de la lámina */
.hero.recorte-nulo .hero-marca svg { right: 3%; width: min(400px, 34vw); }

/* El asterisco grande necesita aire, o el hero queda estrangulado a su
   alrededor. Con más alto, además, la portada se parece más a las piezas del
   manual, que son todas de formato amplio. */
.hero-amplio { padding: var(--sp-12) 0; min-height: 480px; display: flex; align-items: center; }
.hero-amplio > .contenedor { width: 100%; }

@media (max-width: 720px) {
  /* En un teléfono el hero medía 737px de 812: se comía la pantalla entera y
     no quedaba ninguna señal de que abajo hubiera algo. Sin min-height y con
     menos aire vertical baja a la mitad. */
  .hero-amplio { min-height: 0; padding: var(--sp-6) 0 var(--sp-8); }

  /* Y el asterisco pasaba por encima del botón "Conocer los grupos", que
     quedaba ilegible. Va a la esquina inferior derecha, detrás de las cifras,
     que son cortas y dejan ese lado libre. */
  .hero-marca svg {
    width: 250px; right: -95px; top: auto; bottom: -85px;
    transform: none; opacity: 0.4;
  }

  /* Con el gap de escritorio, tres cifras se partían en dos filas dejando un
     hueco muerto en el medio. */
  .contadores { gap: var(--sp-5); margin-top: var(--sp-6); }
  .contador strong { font-size: 1.7rem; }

  /* 31px es poco para el dedo: el mínimo cómodo son 40 */
  .chip { min-height: 40px; }
}

/* Las dos versiones sobre color que trae el manual */
.hero-menta { background: var(--marca-menta); }
.hero-menta h1 { background: none; color: var(--marca-azul); }
.hero-menta .sub, .hero-menta .contador span { color: rgb(0 37 128 / 0.72); }
.hero-menta .contador strong { color: var(--marca-azul); }
.hero-menta .hero-marca { color: #fff; }
.hero-menta .hero-marca svg { opacity: 0.5; }
.hero-menta .boton-secundario { border-color: rgb(0 37 128 / 0.22); }

/* Sugerencia de Bhante: el claro se siente más ligero, pero en crema en vez de
   en blanco. Es el crema de la lámina, y aquí sí funciona porque es un bloque
   y no el lienzo entero: sobre 480px de hero entibia, sobre toda la página
   amarilleaba. El asterisco va en menta, que es lo más suave de la paleta. */
.hero-crema { background: var(--marca-crema); }
.hero-crema .hero-marca { color: var(--marca-menta); }
.hero-crema .hero-marca svg { opacity: 0.85; }
.hero-crema .boton-secundario { background: transparent; border-color: rgb(0 37 128 / 0.18); }

/* El mismo crema con el asterisco azulado. Va en turquesa claro, que es el
   cuarto color de la paleta: el azul marino a este tamaño pesaría como una
   mancha, y bajarle la opacidad para compensar lo dejaría descolorido, que es
   justo el problema del que venimos. */
.hero-crema-azul { background: var(--marca-crema); }
.hero-crema-azul .hero-marca { color: var(--marca-turquesa-claro); }
.hero-crema-azul .hero-marca svg { opacity: 0.8; }
.hero-crema-azul .boton-secundario { background: transparent; border-color: rgb(0 37 128 / 0.18); }

.hero-marino { background: var(--marca-azul); }
.hero-marino h1 { background: none; color: #fff; }
.hero-marino .sub, .hero-marino .contador span { color: rgb(255 255 255 / 0.7); }
.hero-marino .contador strong { color: var(--marca-turquesa); }
.hero-marino .boton-primario { background: #fff; color: var(--marca-azul); }
.hero-marino .boton-primario:hover { background: var(--marca-turquesa); color: #fff; }
.hero-marino .boton-secundario { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.35); }
.hero-marino .etiqueta { color: var(--marca-turquesa); }

/* Conmutador del mock: solo existe en las páginas de decisión */
.conmutador {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90;
  display: flex; align-items: center; gap: 4px; padding: 5px 6px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-full); box-shadow: var(--sombra-2);
  font-size: var(--fs-micro);
}
.conmutador span { color: var(--tinta-suave); font-weight: 600; padding: 0 6px; }
.conmutador-sep { width: 1px; align-self: stretch; background: var(--linea); padding: 0 !important; margin: 2px 3px; }
.conmutador button {
  border: none; background: none; cursor: pointer; padding: 5px 11px;
  border-radius: var(--r-full); font: 600 var(--fs-micro) var(--font-texto);
  color: var(--tinta-suave);
}
.conmutador button[aria-pressed="true"] { background: var(--marca-azul); color: #fff; }

/* Aviso de las páginas que son variantes para decidir, no el sitio */
.variante-aviso {
  background: rgb(210 193 147 / 0.2); border: 1px solid var(--dorado);
  border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5); font-size: var(--fs-small); line-height: 1.55;
}
.satelite {
  display: grid; gap: 1px; justify-items: center; width: 104px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: var(--sp-2) 6px; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.satelite:hover:not([disabled]) { border-color: var(--azul-acero); box-shadow: var(--sombra-1); }
.satelite.activo { border-color: var(--dorado); box-shadow: var(--sombra-1); }
.satelite[disabled] { cursor: default; opacity: 0.6; }
.satelite svg { display: block; }
.sat-nombre { font-size: var(--fs-micro); font-weight: 600; line-height: 1.25; }
.sat-cifra { font-size: var(--fs-micro); color: var(--tinta-suave); }

.mapa-columna { display: grid; gap: var(--sp-2); align-content: start; }
.mapa-leyenda {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-micro); color: var(--tinta-suave);
}
.mapa-leyenda-titulo { font-weight: 600; }
.mapa-leyenda-paso { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.mapa-leyenda-paso i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.mapa-leyenda-paso i.nivel-1 { background: var(--mapa-1); }
.mapa-leyenda-paso i.nivel-2 { background: var(--mapa-2); }
.mapa-leyenda-paso i.nivel-3 { background: var(--mapa-3); }
.mapa-leyenda-paso i.nivel-4 { background: var(--mapa-4); }
.pais:not(.sin-datos) { cursor: pointer; }
.pais:not(.sin-datos):hover { fill: var(--cian); }
.pais.activo { fill: var(--dorado); stroke: var(--azul-noche); stroke-width: 1.2; }
.pais:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }

.mapa-panel {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: var(--sp-5); box-shadow: var(--sombra-1);
  position: sticky; top: 90px;
}
.mapa-panel h3 { font-size: 1.15rem; margin-bottom: var(--sp-4); }
.mapa-tipos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mapa-tipos .chip { text-decoration: none; }
.mapa-fuera { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.mapa-acciones { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.mapa-acciones .limpiar-enlace { margin-left: 0; }
.mapa-lista { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 2px; }
.mapa-lista a {
  display: flex; align-items: center; gap: var(--sp-3); padding: 7px 8px;
  border-radius: var(--r-s); text-decoration: none; color: var(--azul-noche);
  font-size: var(--fs-small); transition: background-color var(--t-rapido);
}
.mapa-lista a:hover { background: var(--fondo); }

@media (max-width: 820px) {
  .mapa-bloque { grid-template-columns: 1fr; }
  .mapa-lienzo svg { max-height: 400px; margin: 0 auto; }
  .mapa-panel { position: static; }
}

/* ---------- Biblioteca ---------- */
.libro { display: flex; flex-direction: column; }
.libro-cab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.libro h3 { font-size: 1.05rem; line-height: 1.3; }
.libro-autor { font-size: var(--fs-small); color: var(--tinta-suave); margin: 0 0 var(--sp-4); }
.libro-acciones { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.libro-fuente { font-size: var(--fs-micro); color: var(--tinta-suave); }
.libro-ofrece {
  display: flex; align-items: center; gap: var(--sp-2); text-decoration: none;
  font-size: var(--fs-micro); color: var(--tinta-suave); margin-bottom: var(--sp-4);
  padding: 6px 8px; border-radius: var(--r-s); background: var(--fondo);
  transition: color var(--t-rapido);
}
.libro-ofrece:hover { color: var(--azul-profundo); }
.badge-nivel { background: rgb(210 193 147 / 0.28); color: var(--dorado-tinta); }
.badge-venta { background: rgb(179 111 36 / 0.14); color: var(--ocre-monastico); }
.esenciales { margin: var(--sp-6) 0 var(--sp-8); }
.tarjeta-esencial::before { background: var(--dorado); transform: scaleX(1); }
.esencial-logos { display: flex; gap: var(--sp-2); }

/* ---------- Carriles de destacados (F10) ----------
   Scroll horizontal nativo con anclaje: en un teléfono se arrastra con el
   dedo sin que haya que programar nada, y en escritorio las flechas empujan
   el ancho visible. Sin librería. */
.carril { margin: var(--sp-6) 0 var(--sp-7); }
.carril-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.carril-cab h2 { margin: 0; }
/* La nota del carril de primeros pasos: explica de donde sale la seleccion,
   para que no se lea como una recomendacion nuestra. */
.carril-nota {
  margin: -6px 0 var(--sp-3); font-size: var(--fs-small); color: var(--tinta-suave);
  max-width: 560px;
}
.carril-empezar { margin-top: var(--sp-5); }

.carril-flechas { display: flex; gap: 6px; flex: none; }
.carril-flechas button {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  /* El borde de linea da 1.15 de contraste sobre el fondo: el boton estaba ahi
     pero no se veia, justo en escritorio, que es donde hace falta. */
  border: 1px solid var(--azul-acero); background: var(--superficie); cursor: pointer;
  color: var(--azul-profundo);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.carril-flechas button:hover { border-color: var(--azul-profundo); box-shadow: var(--sombra-1); }
/* En el telefono el carril se arrastra con el dedo: las flechas solo ocupan
   espacio y compiten con el gesto. Se muestran donde no hay dedo. */
@media (max-width: 720px) { .carril-flechas { display: none; } }

.carril-pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  /* el padding deja respirar la sombra al hacer scroll; el margen negativo
     compensa para que la primera tarjeta siga alineada con el resto */
  padding: 4px 4px var(--sp-3); margin: -4px -4px 0;
  scrollbar-width: thin;
}
/* El mínimo tiene que ser un ancho real y no 0: con minmax(0, 25%) el grid
   deja que las columnas se encojan hasta caber todas, y dieciséis tarjetas se
   comprimían a tiras de cincuenta píxeles en vez de desbordar y hacer scroll.
   El cálculo deja exactamente cuatro a la vista, descontando los tres huecos. */
@media (min-width: 900px) {
  .carril-pista { grid-auto-columns: minmax(232px, calc((100% - var(--sp-4) * 3) / 4)); }
}
.carril-pista > * { scroll-snap-align: start; }

.destacado {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: var(--sp-4); box-shadow: var(--sombra-1);
  transition: transform var(--t-rapido) var(--ease-out), box-shadow var(--t-rapido) var(--ease-out);
}
.destacado:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.destacado h3 {
  font-size: 1rem; margin: 0 0 var(--sp-2); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.destacado .libro-autor { margin: 0; font-size: var(--fs-small); color: var(--tinta-suave); }
.destacado-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4);
}
.destacado-ir {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: var(--fs-micro); font-weight: 600; text-decoration: none;
  color: var(--azul-profundo);
}
.destacado-ir:hover { text-decoration: underline; }
.destacado-ir svg { width: 13px; height: 13px; }

/* Contador del Canon en español */
.contador-total { max-width: 560px; margin: var(--sp-5) 0; }
.contador-cifra { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.contador-cifra strong { font: 600 2.5rem var(--font-titulo); color: var(--azul-profundo); font-variant-numeric: tabular-nums; }
.contador-cifra span { color: var(--tinta-suave); font-size: var(--fs-small); }
.barra { background: var(--linea); border-radius: var(--r-full); height: 10px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--gradiente-marca); border-radius: var(--r-full); }
.barra-fina { height: 6px; min-width: 90px; }
.contador-detalle { margin-top: var(--sp-5); }
.contador-detalle summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-small);
  color: var(--azul-profundo); padding: var(--sp-2) 0;
}
.tabla-nikayas { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); font-size: var(--fs-small); }
.tabla-nikayas th {
  text-align: left; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--tinta-suave); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linea);
}
.tabla-nikayas td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-nikayas small { display: block; color: var(--tinta-suave); font-size: var(--fs-micro); font-weight: 400; }
.tabla-nikayas .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta-suave); }
.num-pct { font-size: var(--fs-micro); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.nota-metodo { font-size: var(--fs-micro); color: var(--tinta-suave); line-height: 1.6; margin-top: var(--sp-4); max-width: 680px; }
@media (max-width: 640px) { .tabla-nikayas, .tabla-nikayas tbody, .tabla-nikayas tr, .tabla-nikayas td { display: block; }
  .tabla-nikayas thead { display: none; } .tabla-nikayas tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea); }
  .tabla-nikayas td { border: none; padding: 2px 0; } }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-lento) var(--ease-out), transform var(--t-lento) var(--ease-out); }
.reveal.visto { opacity: 1; transform: none; }

/* ---------- Micro interacciones ----------
   Cada una confirma una accion o revela jerarquia; ninguna es decorativa.
   Todas se apagan con prefers-reduced-motion (al final del archivo). */

/* 1. El logo del grupo crece apenas al pasar sobre su tarjeta */
.tarjeta .avatar-inicial { transition: transform var(--t-medio) var(--ease-out); }
.tarjeta:hover .avatar-inicial { transform: scale(1.06); }

/* 2. El titulo de la tarjeta vira al azul de marca */
.tarjeta h3 { transition: color var(--t-rapido) var(--ease-inout); }
a.tarjeta:hover h3 { color: var(--azul-profundo); }

/* 3. La hora del evento se afirma al pasar por encima */
.ev-guia { transition: color var(--t-rapido) var(--ease-out); }
.ev:hover .ev-guia { color: var(--azul-medio); }

/* 4. El boton de acceso desliza su flecha */
.boton svg { transition: transform var(--t-rapido) var(--ease-out); }
.boton:hover svg { transform: translate(2px, -2px); }

/* 5. Enlaces de texto: subrayado que crece desde la izquierda */
.footer a, .enlaces-sociales a { transition: color var(--t-rapido); }
.footer a:hover { color: var(--azul-profundo); }

/* 6. La rueda gira. Es la única cosa ambiental del sitio y es muy lenta: 45°
   en 40 segundos, o sea una vuelta entera en algo más de cinco minutos. No se
   ve moverse, se nota que se movió.

   45° no es un número cualquiera: es el paso de simetría del asterisco de ocho
   brazos, así que al terminar el ciclo la figura queda idéntica a como empezó
   y el bucle no tiene costura. Con 360° habría que esperar ocho veces más para
   el mismo efecto.

   Gira el grupo dentro del SVG y no el SVG mismo, que ya usa transform para
   colocarse. Antes el selector era `svg path` porque el asterisco viejo era un
   unico trazo; la rueda nueva son ocho lineas y nueve circulos dentro de un
   grupo, asi que el selector viejo no encontraba nada y la rueda se quedo
   quieta sin que nada fallara. El origen va en unidades del viewBox (el centro
   de la rueda es 50,50) y no en la caja del trazo. */
.hero-marca svg > g {
  transform-box: view-box; transform-origin: 50% 50%;
  animation: girar-rueda 40s linear infinite;
}
@keyframes girar-rueda {
  from { transform: rotate(0deg); }
  to   { transform: rotate(45deg); }
}

.hero-red img { animation: respirar 14s var(--ease-inout) infinite alternate; }
@keyframes respirar {
  from { transform: translateY(-50%) scale(1); opacity: 0.86; }
  to   { transform: translateY(-50%) scale(1.04); opacity: 1; }
}

/* 7. Las tarjetas nuevas del "ver mas" entran escalonadas (usa .reveal) */
.mas-grupos { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-6); }

/* 8. Feedback tactil en cualquier control */
.chip, .boton, .tab, .limpiar-enlace { -webkit-tap-highlight-color: transparent; }

/* ---------- Detalle de grupo ---------- */
/* Riel del país también en la ficha: en cualquier página, el color dice el país */
.perfil-cabecera {
  display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap;
  border-top: 4px solid var(--ev-color, var(--azul-acero));
  padding-top: var(--sp-5);
}
.grupo-subtitulo {
  font: 600 var(--fs-small) var(--font-texto); color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--sp-5) 0 var(--sp-3);
}
.grupo-subtitulo:first-of-type { margin-top: var(--sp-3); }
.perfil-cabecera .avatar-inicial { border-radius: var(--r-m); box-shadow: var(--sombra-1); }

/* Una foto por comunidad: un retiro, el salon, la sangha reunida. Le da cara
   al grupo, que un logo solo no alcanza. */
.perfil-foto { margin: var(--sp-6) 0 var(--sp-7); max-width: 760px; }
.perfil-foto img {
  width: 100%; border-radius: var(--r-m); display: block;
  box-shadow: var(--sombra-1); aspect-ratio: 16 / 9; object-fit: cover;
}
.perfil-foto figcaption {
  font-size: var(--fs-small); color: var(--tinta-suave); margin-top: var(--sp-3);
}
.perfil-datos { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: var(--sp-6) 0; }
.dato { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--sp-4); }
.dato .etiqueta { margin-bottom: var(--sp-1); }
.enlaces-sociales { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.enlaces-sociales a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--r-full);
  padding: 7px 16px; font-size: var(--fs-small); font-weight: 500;
  transition: border-color var(--t-rapido), transform var(--t-rapido) var(--ease-out);
}
.enlaces-sociales a:hover { border-color: var(--azul-acero); transform: translateY(-1px); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--linea); background: var(--superficie); margin-top: var(--sp-10); }
.footer-inner {
  max-width: var(--ancho-max); margin: 0 auto; padding: var(--sp-8) var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--tinta-suave);
}
.footer a { color: var(--tinta-suave); }
.footer-marca img { display: block; width: 191px; height: auto; }

/* Pulso ambiental de la red (unico movimiento ambiental permitido) */
@media (prefers-reduced-motion: no-preference) {
  .nodo-pulso { animation: pulso 6s var(--ease-inout) infinite alternate; }
  .nodo-pulso:nth-child(2n) { animation-delay: 1.6s; }
  .nodo-pulso:nth-child(3n) { animation-delay: 3.1s; }
}
@keyframes pulso { from { opacity: 0.35; } to { opacity: 0.9; } }

/* Nada esencial depende del movimiento: se apaga por completo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .hero-red img { animation: none; transform: translateY(-50%); }
  .hero-marca svg > g { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Conversor de horarios (spec-conversion-horario.md) ---------- */
.conv-form {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-5);
}
.conv-form .conv-campo { width: 170px; }
/* La hora en dos menús: el de horas carga "11 p. m." y el de minutos solo
   ":15", así que no tienen por qué medir lo mismo */
.conv-campo-hora { width: 130px; }
.conv-campo-minutos { width: 100px; }
.conv-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.conv-campo-ancho { grid-column: 1 / -1; }
.conv-campo label {
  font-size: var(--fs-micro); font-weight: 600; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.conv-campo select, .conv-campo input {
  font: inherit; color: var(--azul-noche); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: 9px 11px; min-height: 44px; width: 100%;
}
.conv-campo select:focus-visible, .conv-campo input:focus-visible {
  outline: 2px solid var(--azul-noche); outline-offset: 1px;
}

.conv-espera { color: var(--tinta-suave); }
.conv-encabezado {
  font-weight: 700; color: var(--azul-profundo); margin: 0;
  font-size: var(--fs-small);
}
/* La fecha encabeza la tabla en vez de pedirse arriba: es el pie de foto de
   las horas, y cambiarla es la excepción */
.conv-fecha-barra {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin: 0 0 var(--sp-3); min-height: 30px;
}
.conv-fecha-barra input[type="date"] {
  font: inherit; font-size: var(--fs-small); color: var(--azul-noche);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: 5px 9px;
}
.conv-mini {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); color: var(--azul-medio);
  text-decoration: underline; text-underline-offset: 3px;
}
.conv-mini:hover { color: var(--azul-profundo); }

/* La ficha de la actividad y el resto de la página. En el teléfono la ficha va
   arriba (es el orden del documento) y en pantalla ancha ocupa una columna
   propia desde la primera línea, pegada al scroll: así está a la vista
   mientras se mueve la hora, y de paso llena el hueco que quedaba al lado del
   formulario. 660 de contenido + 290 de ficha: sin tope, la columna elástica
   abría entre las dos un vacío que las hacía parecer de páginas distintas. */
.conv-columnas { display: grid; gap: var(--sp-5); align-items: start; max-width: 1000px; }
@media (min-width: 900px) {
  .conv-columnas { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--sp-6); }
  .conv-principal { grid-column: 1; grid-row: 1; }
  .conv-panel-col { grid-column: 2; grid-row: 1; align-self: stretch; }
  .conv-panel { position: sticky; top: 0; }
  .conv-form { margin-top: 0; }
  .conv-panel-plegar { display: none; }
}
/* En el teléfono no hay columna donde flotar y una barra fija se comería la
   pantalla: la ficha va entera arriba y se pliega a una línea cuando estorba. */
@media (max-width: 899px) {
  .conv-plegada .conv-panel-cuerpo { display: none; }
  .conv-plegada { padding-bottom: var(--sp-3); }
}
.conv-panel {
  position: relative; padding: var(--sp-4) var(--sp-5);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m);
}
.conv-panel-titulo {
  font-size: 1.1rem; line-height: 1.3; margin: var(--sp-3) 0 var(--sp-3);
  color: var(--azul-profundo);
}
.conv-panel-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.conv-panel-quitar {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: none; cursor: pointer;
  color: var(--tinta-suave);
}
.conv-panel-quitar:hover { background: var(--crema); color: var(--azul-profundo); }
.conv-panel .ev-grupo { padding-right: 30px; }
.conv-panel-plegar {
  background: none; border: none; padding: 4px 0 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); color: var(--azul-medio);
  text-decoration: underline; text-underline-offset: 3px;
}
/* en una columna angosta los datos se leen apilados, no en dos por renglón */
.conv-panel .ev-datos { flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.conv-panel .ev-nota { margin-bottom: var(--sp-4); }
.conv-tabla { list-style: none; margin: 0; padding: 0; max-width: 660px; }
/* Una fila por HORA, no por país: cuatro renglones con "10:00 p. m." repetido
   no son cuatro datos, son uno. */
.conv-fila {
  display: grid; grid-template-columns: 104px 1fr auto;
  align-items: baseline; gap: var(--sp-3) var(--sp-4);
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.conv-hora {
  font-size: 1.05rem; font-weight: 650; color: var(--azul-profundo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.conv-paises { display: flex; flex-wrap: wrap; gap: 5px var(--sp-3); align-items: center; min-width: 0; }
.conv-pais {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); color: var(--azul-noche); white-space: nowrap;
}
.conv-pais i { width: 13px; height: 13px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(45 48 81 / 0.18); }
.conv-es-origen { font-weight: 700; color: var(--azul-profundo); }
.conv-es-origen i, .conv-es-mia i { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3.5px var(--azul-acero); }
.conv-es-mia { font-weight: 600; }

/* Elegir el origen por bandera: reconocer antes que leer, igual que el riel */
.conv-origen-bloque { margin: var(--sp-5) 0; }
.conv-label {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 600; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.conv-banderas { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 660px; }
.conv-bandera {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 78px; padding: 6px 2px; border: none; border-radius: var(--r-s);
  background: none; font: inherit; cursor: pointer;
  font-size: var(--fs-micro); color: var(--tinta-suave); line-height: 1.2;
  text-align: center;
  transition: color var(--t-rapido) var(--ease-out);
}
.conv-disco {
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(45 48 81 / 0.18);
  transition: box-shadow var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out);
}
.conv-bandera:hover .conv-disco { transform: scale(1.07); }
.conv-bandera:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 1px; }
.conv-elegida { color: var(--azul-profundo); font-weight: 700; }
.conv-elegida .conv-disco { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--azul-acero); }

/* El atajo va en tono menor: es la vía rápida, no la principal */
.conv-atajo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-5); }
.conv-atajo label { font-size: var(--fs-small); color: var(--tinta-suave); }
.conv-atajo select {
  font: inherit; font-size: var(--fs-small); color: var(--azul-medio);
  background: none; border: none; border-bottom: 1px solid var(--linea);
  padding: 4px 2px; max-width: 320px; cursor: pointer;
}
.conv-atajo select:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }

.conv-acciones {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-8);
}
.conv-aviso { font-size: var(--fs-small); font-weight: 600; color: var(--verde-salvia, var(--azul-medio)); }

@media (max-width: 640px) {
  .conv-form .conv-campo { width: calc(50% - var(--sp-3)); }
  /* en el teléfono la hora manda su propio renglón y los países van debajo */
  .conv-fila { grid-template-columns: 1fr auto; gap: 4px var(--sp-3); }
  .conv-hora { grid-row: 1; grid-column: 1; }
  /* el aviso de día se acompaña a la hora: suelto al auto-placement caía en un
     renglón propio y se estiraba de lado a lado como una banda */
  .conv-fila .ev-chip-cruce { grid-row: 1; grid-column: 2; justify-self: end; }
  .conv-paises { grid-row: 2; grid-column: 1 / -1; }
  .conv-bandera { width: 64px; }
  .conv-disco { width: 34px; height: 34px; }
}
.enlace-herramienta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: 600; color: var(--azul-medio);
  text-decoration: none;
}
.enlace-herramienta:hover { text-decoration: underline; }

/* ---------- Biblioteca: arbol plegable de materiales (F11) ----------
   Reemplaza la grilla de tarjetas. Una tarjeta media 281px de alto y los 104
   materiales daban 38 pantallas de telefono; en filas dentro de bloques
   cerrados, el catalogo entero cabe en una pantalla. */

.bib-controles {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  align-items: center; margin-bottom: var(--sp-4);
}
.bib-buscar {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1 1 240px; min-width: 0;
  padding: 0 var(--sp-3); height: 42px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m);
}
.bib-buscar svg { flex: none; color: var(--tinta-suave); }
.bib-buscar input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-small); color: inherit;
}
.bib-buscar:focus-within { border-color: var(--azul-acero); box-shadow: var(--sombra-1); }
.bib-buscar input::-webkit-search-cancel-button { cursor: pointer; }

.bib-agrupar { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.bib-agrupar label { font-size: var(--fs-micro); color: var(--tinta-suave); }
.bib-agrupar select {
  height: 42px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-small);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); color: inherit; cursor: pointer;
}

.bib-arbol { border-top: 1px solid var(--linea); }
.bib-bloque { border-bottom: 1px solid var(--linea); }
.bib-bloque > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); cursor: pointer; list-style: none;
  font-family: var(--font-titulo); font-weight: 600;
}
.bib-bloque > summary::-webkit-details-marker { display: none; }
.bib-bloque > summary:hover { color: var(--azul-profundo); }
.bib-bloque > summary:focus-visible { outline: 2px solid var(--azul-acero); outline-offset: -2px; }
.bib-bloque-flecha { display: flex; flex: none; color: var(--tinta-suave); transition: transform 0.18s ease; }
.bib-bloque[open] > summary .bib-bloque-flecha { transform: rotate(90deg); }
.bib-bloque-nombre { flex: 1; min-width: 0; }
.bib-bloque-conteo {
  flex: none; font-family: var(--font-texto); font-weight: 500;
  font-size: var(--fs-micro); color: var(--tinta-suave);
  background: rgb(84 132 156 / 0.1); border-radius: 999px; padding: 2px 9px;
}

.bib-lista { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.bib-fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border-radius: var(--r-s);
}
.bib-fila:hover { background: rgb(84 132 156 / 0.06); }
.bib-fila .bib-ofrece { display: flex; flex: none; }
.bib-datos { min-width: 0; }
.bib-titulo {
  display: block; font-weight: 600; line-height: 1.35; color: inherit; text-decoration: none;
}
.bib-titulo:hover { color: var(--azul-profundo); text-decoration: underline; }
.bib-meta {
  margin: 2px 0 0; font-size: var(--fs-micro); color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bib-formato { display: flex; flex: none; color: var(--tinta-suave); }
.bib-fila:hover .bib-formato { color: var(--azul-profundo); }

@media (max-width: 600px) {
  .bib-fila { padding-left: var(--sp-4); gap: var(--sp-2); }
  .bib-agrupar { flex: 1 1 100%; }
  .bib-agrupar select { flex: 1; }
}

/* ---------- Biblioteca v2: mapa de temas canonicos (experimental) ---------- */

.mapa-caja {
  margin: var(--sp-5) calc(var(--sp-4) * -1) 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* El SVG se escala junto con su viewBox, asi que un lienzo angosto encoge
   tambien la tipografia: a 620px de ancho las etiquetas quedaban en 6,5px
   reales. El minimo se fija por legibilidad del texto, no por el dibujo, y en
   telefono el mapa se arrastra. */
.mapa-caja svg { display: block; width: 100%; min-width: 1000px; height: auto; }
.mapa-arrastra { display: none; }
@media (max-width: 1040px) {
  .mapa-arrastra {
    display: block; margin: var(--sp-2) 0 0;
    font-size: var(--fs-micro); color: var(--tinta-suave);
  }
}

.mapa-rama { fill: none; stroke: var(--linea); stroke-width: 1.5; }
.mapa-rama-vacia { stroke-dasharray: 3 5; opacity: 0.7; }

.mapa-centro circle { fill: var(--azul-profundo); }
.mapa-centro text {
  fill: #fff; font-family: var(--font-titulo); font-weight: 600;
  font-size: 15px; text-anchor: middle;
}

.mapa-nodo { cursor: pointer; }
.mapa-nodo circle {
  fill: var(--marca-turquesa); stroke: var(--superficie); stroke-width: 2.5;
  transition: fill 0.15s ease, r 0.15s ease;
}
.mapa-nodo-vacio circle { fill: none; stroke: var(--linea); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mapa-nodo:hover circle, .mapa-nodo:focus-visible circle { fill: var(--azul-profundo); }
.mapa-nodo-activo circle { fill: var(--azul-profundo); }
.mapa-nodo:focus-visible { outline: none; }
.mapa-nodo:focus-visible .mapa-etiqueta { text-decoration: underline; }

.mapa-cifra { fill: #fff; font-size: 12px; font-weight: 600; text-anchor: middle; }
.mapa-etiqueta {
  fill: currentColor; font-family: var(--font-titulo); font-weight: 600; font-size: 14px;
}
.mapa-nodo-vacio .mapa-etiqueta { fill: var(--tinta-suave); font-weight: 500; }
.mapa-pali { fill: var(--tinta-suave); font-size: 11.5px; font-style: italic; }

.mapa-nota {
  max-width: 640px; margin-top: var(--sp-4);
  font-size: var(--fs-micro); color: var(--tinta-suave); line-height: 1.55;
}

.mapa-panel {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m);
}
.mapa-panel[hidden] { display: none; }
.mapa-panel-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.mapa-panel-cab h2 { margin: 0; font-size: var(--fs-h3); }
.mapa-panel-pali { margin: 2px 0 0; font-size: var(--fs-small); font-style: italic; color: var(--tinta-suave); }
.mapa-cerrar {
  flex: none; display: flex; padding: 6px; border: 1px solid var(--linea);
  border-radius: 50%; background: none; color: var(--tinta-suave); cursor: pointer;
}
.mapa-cerrar:hover { border-color: var(--azul-acero); color: var(--azul-profundo); }
.mapa-vacio { margin: 0; color: var(--tinta-suave); font-size: var(--fs-small); }

/* ---------- Conmutador entre las dos vistas de la biblioteca ---------- */

.switch-vista {
  display: inline-flex; gap: 4px; margin: var(--sp-5) 0 var(--sp-4);
  padding: 4px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 999px;
}
.switch-vista button {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-4); border: 0; border-radius: 999px;
  background: none; color: var(--tinta-suave); cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.switch-vista button:hover { color: var(--azul-profundo); }
.switch-vista button[aria-pressed="true"] {
  background: var(--azul-profundo); color: #fff;
}
.switch-vista button:focus-visible { outline: 2px solid var(--azul-acero); outline-offset: 2px; }
.switch-vista svg { flex: none; }

@media (max-width: 480px) {
  .switch-vista { display: flex; width: 100%; }
  .switch-vista button { flex: 1; justify-content: center; padding: 8px var(--sp-2); }
  .switch-vista button span { font-size: var(--fs-micro); }
}

/* ---------- Formulario de contacto ---------- */

.contacto-form { max-width: 640px; margin-top: var(--sp-6); }
.contacto-campo { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.contacto-campo label { font-size: var(--fs-small); font-weight: 600; }
.contacto-campo label span[aria-hidden] { color: var(--ocre-monastico); }
.contacto-opcional { font-weight: 400; color: var(--tinta-suave); }

.contacto-campo input,
.contacto-campo select,
.contacto-campo textarea {
  width: 100%; padding: 11px var(--sp-3); font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-m); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contacto-campo textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.contacto-campo input:focus,
.contacto-campo select:focus,
.contacto-campo textarea:focus {
  outline: none; border-color: var(--azul-acero); box-shadow: var(--sombra-1);
}

/* Dos columnas solo cuando hay ancho: en el telefono apilados se llenan mejor. */
@media (min-width: 620px) {
  .contacto-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

.contacto-acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4); margin-top: var(--sp-5);
}
.contacto-aviso { font-size: var(--fs-small); color: var(--tinta-suave); }
.contacto-aviso.exito { color: #2F7A57; font-weight: 600; }
.contacto-aviso.error { color: var(--ocre-monastico); font-weight: 600; }
.contacto-nota {
  margin-top: var(--sp-5); font-size: var(--fs-micro); color: var(--tinta-suave);
}

/* ---------- Selector de idioma ---------- */

.idiomas { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-3); }
.idiomas a {
  padding: 4px 7px; border-radius: var(--r-s);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .3px;
  color: var(--tinta-suave); text-decoration: none;
}
.idiomas a:hover { color: var(--azul-profundo); background: rgb(84 132 156 / 0.1); }
.idiomas a[aria-current] { color: var(--azul-profundo); background: rgb(84 132 156 / 0.14); }

/* En el telefono el selector NO vive dentro del menu desplegable: queda en la
   barra, a la izquierda del boton de menu. Adentro se perdia por dos razones a
   la vez, el recorte del desplegable y el toque de mas que exigia, y cambiar de
   idioma es justo lo primero que necesita quien no lee español.
   El breakpoint es el mismo del boton de menu (720px): cuando estaban
   desalineados (860 contra 720) el selector se estiraba a lo ancho dentro de un
   nav todavia horizontal. */
@media (max-width: 720px) {
  .idiomas { margin-left: 0; gap: 0; }
  .idiomas a { padding: 6px 6px; }
}
@media (max-width: 360px) {
  /* Ultimo recurso en pantallas muy estrechas: el idioma activo ya lo dice la
     pagina entera, asi que solo se ofrecen los otros dos. */
  .idiomas a[aria-current] { display: none; }
}