/* Marca COLME 100X100 (aprobada el 28 oct 2026): solo colores del logo y una sola letra, Lexend.
   Rojo para la acción principal, y «Afíliate» en rojo en la cabecera (decisión de Marce, 2 nov 2026). Azul nunca para texto. */
:root {
  --marino: #022544;
  --marino-70: #4E6178;   /* texto secundario */
  --marino-15: #D9DEE4;   /* líneas */
  --marino-5: #F2F4F6;    /* fondos suaves */
  --en-marino: #9FB0C2;   /* texto secundario sobre marino */
  --rojo: #DA1D21;
  --rojo-oscuro: #B5161A;
  --rojo-claro: #F0464A;  /* trazo de pluma sobre marino */
  --azul: #3DA1CB;
  --blanco: #FFFFFF;
  --letra: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radio: 10px;
  --relleno-tarjeta: clamp(22px, 3vw, 32px);  /* mismo relleno en todas las tarjetas, para que las líneas casen */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--blanco); color: var(--marino); font-family: var(--letra); font-weight: 300; font-size: 17px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--letra); color: var(--marino); text-wrap: balance; margin: 0; }
h1 { font-weight: 700; font-size: clamp(42px, 7.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-weight: 700; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
h3 { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
p, li { text-wrap: pretty; }
b, strong { font-weight: 600; }
a { color: var(--marino); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .zona:focus-visible {
  outline: 3px solid var(--azul); outline-offset: 3px;
}

.ancho { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.etiqueta { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-70); margin-bottom: 14px; }

.nota { font-size: 14px; color: var(--marino-70); margin-top: 20px; }

/* Botones: el rojo es la acción principal; el resto, con borde marino */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 28px; border-radius: var(--radio); border: 2px solid var(--rojo);
  background: var(--rojo); color: var(--blanco); font: 600 17px/1.2 var(--letra);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.boton:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }
.boton--borde { background: transparent; border-color: var(--marino); color: var(--marino); }
.boton--borde:hover { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.boton--claro { background: transparent; border-color: var(--blanco); color: var(--blanco); }
.boton--claro:hover { background: var(--blanco); border-color: var(--blanco); color: var(--marino); }
.boton--pequeno { min-height: 44px; padding: 10px 20px; font-size: 16px; }
.boton[disabled] { cursor: default; }
.boton--hecho[disabled], .boton--hecho[disabled]:hover { background: var(--marino-5); border-color: var(--marino-5); color: var(--marino); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Cabecera */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--blanco); }
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--marino-15); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 16px; }
/* El logo siempre entero (regla de marca): lo bastante alto para que «100X100» se lea */
.cabecera__logo, .firma { display: inline-flex; align-items: center; text-decoration: none; color: var(--marino); }
.cabecera__logo img { --alto-logo: 60px; }
.firma img { --alto-logo: 64px; }
@media (max-width: 599px) { .cabecera__fila { min-height: 72px; } .cabecera__logo img { --alto-logo: 56px; } }
/* El dibujo del logo trae un poco de aire: 2,3 % a la izquierda y 2,1 % abajo.
   Se compensa para que la tinta caiga en el borde de la página y en la línea base del texto. */
.cabecera__logo img, .firma img { height: var(--alto-logo); width: auto; display: block; margin-left: calc(var(--alto-logo) * -0.023); }
.firma img { position: relative; top: calc(var(--alto-logo) * 0.021); }
/* Con el menú a la vista, el pie de «100X100» se apoya en la línea base de los enlaces.
   La cabecera sigue midiendo 80 px: 60 de logo, 7 de letra bajo la línea base y el resto de aire.
   En el móvil (botón «Menú», sin texto al lado) el logo va centrado. */
@media (min-width: 1001px) {
  .cabecera__fila { align-items: last baseline; min-height: 0; padding-block: 8.7px 4.2px; }
  .cabecera__logo img { position: relative; top: calc(var(--alto-logo) * 0.021); }
}
.firma { color: var(--blanco); }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { text-decoration: none; font-weight: 500; font-size: 16px; color: var(--marino); }
.menu a:hover { text-decoration: underline; }
.menu .menu__destacado { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; }
.menu-boton { display: none; }

@media (max-width: 1000px) {
  .menu-boton { display: block; background: none; border: 2px solid var(--marino); border-radius: var(--radio); padding: 8px 16px; font: 600 15px var(--letra); color: var(--marino); cursor: pointer; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blanco); border-bottom: 1px solid var(--marino-15); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--marino-15); }
  .menu .menu__destacado { padding-bottom: 14px; }
}

/* Portada: una sola idea y una sola acción roja, sobre una banda muy suave que la enmarca */
.portada { padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px); background: var(--blanco); }
.portada .entradilla { color: var(--marino-70); }
/* Sobre blanco, el cuadro del pulso se separa con un borde finísimo */
.portada .pulso { border: 1px solid var(--marino-15); }
.portada__rejilla { display: grid; gap: 56px; align-items: start; }
@media (min-width: 900px) { .portada__rejilla > div:first-child { padding-top: calc(var(--relleno-tarjeta) + 1px); } } /* +1 px: el borde del pulso */
/* Acento aprobado: la palabra clave en marino con un trazo rojo fino tipo pluma debajo.
   Solo en titulares grandes y en una sola palabra o expresión por pantalla. */
.pluma { color: inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23DA1D21' d='M1 10.5C40 7.2 120 4.6 200 4.2C240 4 275 4.6 299 5.6C276 6.4 242 7.2 200 7.9C120 9.2 50 11 4 12.4C1.5 12.5 0.4 11.2 1 10.5Z'/%3E%3C/svg%3E") no-repeat 0 86% / 104% .28em; padding-bottom: .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bloque--marino .pluma { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23F0464A' d='M1 10.5C40 7.2 120 4.6 200 4.2C240 4 275 4.6 299 5.6C276 6.4 242 7.2 200 7.9C120 9.2 50 11 4 12.4C1.5 12.5 0.4 11.2 1 10.5Z'/%3E%3C/svg%3E"); }
/* Titular: «El vecino manda» en una línea que llena el ancho de su columna (lo calcula app.js). */
.portada__titular { font-size: clamp(40px, 11.5vw, 64px); line-height: .95; }
.portada__titular .linea { white-space: nowrap; }
.entradilla { font-size: clamp(19px, 2.2vw, 23px); color: var(--marino-70); max-width: 36ch; margin-top: 24px; }
/* En pantallas grandes la entradilla llega hasta el mismo borde que el titular: un bloque */
@media (min-width: 900px) { .entradilla { max-width: none; text-wrap: pretty; } }
@media (min-width: 900px) { .portada__rejilla { grid-template-columns: 1.6fr 1fr; } }

/* El pulso del pueblo: encuesta de un toque en la portada */
.pulso { display: grid; gap: 18px; background: var(--blanco); border-radius: var(--radio); padding: var(--relleno-tarjeta); min-width: 0; }
.pulso__cabeza { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-70); }
.pulso__pregunta { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }
.pulso__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pulso__opcion { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; background: var(--blanco); border: 1.5px solid var(--marino-15); border-radius: var(--radio); font: 500 16px/1.3 var(--letra); color: var(--marino); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.pulso__opcion:hover:not([disabled]) { border-color: var(--marino); transform: translateX(3px); }
.pulso__opcion[disabled] { cursor: default; }
.pulso__barra { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(61, 161, 203, .18); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.pulso__opcion.es-lider .pulso__barra { background: rgba(61, 161, 203, .32); }
.pulso__texto, .pulso__dato { position: relative; }
.pulso__dato { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulso__opcion.es-mio { border-color: var(--marino); }
.pulso__opcion.es-mio .pulso__texto::after { content: " ✓"; font-weight: 600; }
.pulso__pie { font-size: 15px; color: var(--marino-70); }
.pulso__pie b { color: var(--marino); }
.pulso__pie a { font-weight: 500; }

/* Aclaración pequeña bajo las encuestas: no son oficiales */
.aclaracion { font-size: 13px; color: var(--marino-70); }

/* Bloques */
.bloque { padding-block: clamp(56px, 7vw, 96px); }
.bloque--suave { background: var(--marino-5); }
/* Dos secciones blancas seguidas: una línea fina arriba, del mismo ancho que el contenido (bordes 69/1197 en escritorio) */
.bloque--linea { padding-top: 0; }
.bloque--linea::before { content: ""; display: block; height: 1px; background: var(--marino-15); width: calc(min(1160px, 100%) - 2 * max(16px, env(safe-area-inset-left, 0px))); margin: 0 auto clamp(56px, 7vw, 96px); }
.bloque--marino { background: var(--marino); color: var(--blanco); }
.bloque--marino h2 { color: var(--blanco); }
.bloque--marino .etiqueta { color: var(--en-marino); }
.bloque__intro { color: var(--marino-70); max-width: 60ch; margin-top: 16px; font-size: 18px; }

/* Proyectos */
.proyectos { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.proyecto { display: flex; flex-direction: column; gap: 12px; background: var(--blanco); border: 1px solid var(--marino-15); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.proyecto__tema { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-70); }
.proyecto p { color: var(--marino-70); font-size: 16px; flex: 1; }
.proyecto p.proyecto__fuente { flex: none; font-size: 13px; }
.proyecto__fuente a { color: inherit; text-underline-offset: 2px; }
.proyecto__pie { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 14px; }
.proyecto__pie .boton { width: 100%; }
.proyecto__votos { color: var(--marino-70); font-size: 15px; font-variant-numeric: tabular-nums; }
.proyecto__votos b { color: var(--marino); font-weight: 700; font-size: 20px; }
.proyecto__barra { height: 4px; background: var(--marino-5); border-radius: 2px; overflow: hidden; }
.proyecto__barra span { display: block; height: 100%; background: var(--azul); transition: width .4s; }

/* Mapa vecinal: silueta real (INE) con cuatro secciones en tonos suaves de marino y un punto por urbanización */
.mapa { display: grid; gap: 24px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) { .mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mapa__marco { position: relative; background: var(--blanco); border-radius: var(--radio); padding: var(--relleno-tarjeta); display: grid; justify-items: center; }
.mapa__dibujo { width: 100%; max-width: 380px; height: auto; max-height: 640px; overflow: hidden; }
.seccion { stroke: var(--blanco); stroke-width: 2; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
/* Las cuatro secciones, en tonos del azul de las llamas */
.seccion--1 { fill: #8BC6DF; }
.seccion--2 { fill: #C5E3F0; }
.seccion--3 { fill: #A8D4E7; }
.seccion--4 { fill: #E2F1F8; }
.seccion:hover { fill: #6FB8D7; }
.seccion.activa { fill: var(--azul); }
.seccion__num { font-family: var(--letra); font-weight: 600; fill: var(--marino); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.punto { cursor: pointer; }
.punto__toque { fill: transparent; }
.punto__marca { fill: var(--marino); stroke: var(--blanco); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .15s; }
/* Punto elegido: blanco con borde marino (nunca un punto rojo) */
.punto:hover .punto__marca, .punto.activo .punto__marca { fill: var(--blanco); stroke: var(--marino); stroke-width: 3; }
.punto__nombre { font-family: var(--letra); font-weight: 500; fill: var(--marino); paint-order: stroke; stroke: var(--blanco); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
/* Lejos, los nombres del casco se pisarían: solo se ven al acercar */
.mapa__dibujo:not(.cerca) .punto--casco .punto__nombre { display: none; }
.punto.activo .punto__nombre { font-weight: 700; }
.mapa__marco { gap: 16px; }
.mapa__zoom { justify-self: start; min-height: 40px; padding: 8px 16px; background: var(--blanco); border: 1.5px solid var(--marino); border-radius: var(--radio); font: 600 14px var(--letra); color: var(--marino); cursor: pointer; }
.mapa__zoom:hover { background: var(--marino); color: var(--blanco); }
.mapa__lado { position: relative; display: grid; gap: 16px; align-content: start; }
.mapa__ficha { background: var(--marino); color: var(--blanco); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.mapa__ficha h3 { margin-bottom: 14px; font-size: 24px; color: var(--blanco); }
.mapa__ficha .etiqueta, .mapa__ficha .mapa__dentro { color: var(--en-marino); }
/* El barrio elegido aparece dentro de la ficha como su botón, en blanco */
.mapa__ficha h3.mapa__elegido { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 20px; padding: 10px 16px; background: var(--blanco); border-radius: var(--radio); font-size: 18px; line-height: 1.25; color: var(--marino); }
.mapa__cifra { font-size: 21px; font-weight: 600; margin-bottom: 14px; }
.mapa__ficha a, .mapa__ficha .mapa__enlaces button { color: var(--blanco); }
.mapa__ficha ul { margin: 0; padding-left: 20px; }
.mapa__ficha li { margin-bottom: 6px; }
.mapa__falta { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
.mapa__falta a, .mapa__ficha p a { font-weight: 600; }
.mapa__dentro { font-size: 14px; color: var(--marino-70); margin-bottom: 8px; }
.mapa__ficha .mapa__enlaces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mapa__enlaces button { background: none; border: 0; padding: 0; font: 500 16px var(--letra); color: var(--marino); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mapa__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-lista, 160px)), 1fr)); gap: 8px; }
.mapa__lista button { width: 100%; min-height: 44px; padding: 10px 14px; background: var(--blanco); border: 1.5px solid var(--marino-15); border-radius: var(--radio); font: 500 15px/1.25 var(--letra); color: var(--marino); text-align: left; white-space: nowrap; cursor: pointer; }
.mapa__lista button:hover { border-color: var(--marino-70); }
.mapa__lista button[aria-pressed="true"] { border-color: var(--marino); background: var(--marino); color: var(--blanco); }

/* Ponle nota al pueblo */
.nota-pueblo { display: grid; gap: 24px; margin-top: 40px; align-items: start; }
.nota-pueblo[hidden] { display: none; }
@media (min-width: 900px) { .nota-pueblo { grid-template-columns: 1.7fr 1fr; } }
.notas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--marino-15); }
.nota-fila { display: grid; gap: 10px; padding: 18px 0 30px; border-bottom: 1px solid var(--marino-15); }
/* La primera fila arranca a la misma altura que el texto de la tarjeta de al lado (resta el grosor de la línea de arriba) */
.nota-fila:first-child { padding-top: calc(var(--relleno-tarjeta) - 1px); }
.nota-fila__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.nota-fila__cabeza label { font-weight: 500; }
.nota-fila__mia { font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--marino-15); min-width: 2ch; text-align: right; }
.nota-fila.tocada .nota-fila__mia { color: var(--marino); }
.nota-fila__pista { position: relative; }
/* Barra clara y fina; el relleno solo aparece (en azul) cuando la tocas */
.nota-fila input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; padding: 0; border: 0; height: 22px; cursor: pointer; background: transparent; --relleno: 0%; }
.nota-fila input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--azul) var(--relleno), var(--marino-15) var(--relleno)); }
.nota-fila input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--azul) var(--relleno), var(--marino-15) var(--relleno)); }
.nota-fila input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--marino-15); box-shadow: 0 1px 3px rgba(2,37,68,.12); }
.nota-fila input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--marino-15); box-shadow: 0 1px 3px rgba(2,37,68,.12); }
.nota-fila.tocada input[type="range"]::-webkit-slider-thumb { border-color: var(--marino); }
.nota-fila.tocada input[type="range"]::-moz-range-thumb { border-color: var(--marino); }
.nota-fila__pueblo { position: absolute; top: 24px; transform: translateX(-50%); font-size: 12px; font-weight: 500; color: var(--marino-70); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nota-fila__pueblo::before { content: ""; position: absolute; left: 50%; top: -10px; width: 2px; height: 8px; background: var(--azul); transform: translateX(-50%); }
.notas__resumen { display: grid; gap: 12px; background: var(--marino-5); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.notas__resumen .etiqueta { margin-bottom: 0; }
.notas__media { display: flex; align-items: baseline; gap: 4px; }
.notas__media b { color: var(--marino); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.notas__media span { font-size: 18px; color: var(--marino-70); }
.notas__comparada { color: var(--marino-70); }
.notas__comparada b { color: var(--marino); }
.notas__resumen .boton { justify-self: start; }
.notas__media b.vacio { color: var(--marino-15); }

/* Contador de promesas: cada promesa es «Dijo» frente a «Hoy», con el tiempo pasado en medio */
.contador { display: grid; gap: 0; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); border-top: 1px solid var(--marino-15); }
.contador__cifra { padding: 22px 20px 22px 0; }
.contador__cifra b { display: block; font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--marino); }
.contador__cifra span { display: block; margin-top: 8px; font-size: 15px; color: var(--marino-70); line-height: 1.35; }
.filtros { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 24px; border-bottom: 1px solid var(--marino-15); }
.filtros button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; font: 500 15px var(--letra); color: var(--marino-70); cursor: pointer; }
.filtros button:hover { color: var(--marino); }
.filtros button[aria-pressed="true"] { color: var(--marino); border-bottom-color: var(--marino); font-weight: 600; }
.promesas { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.promesa { display: grid; gap: 18px; padding: var(--relleno-tarjeta); border: 1px solid var(--marino-15); border-radius: var(--radio); background: var(--blanco); }
@media (min-width: 900px) { .promesa { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 28px; align-items: stretch; } }
/* «Hoy» va sobre un fondo suave que llega hasta los bordes de la tarjeta: a la derecha en el ordenador, abajo en el móvil */
.promesa__lado--hay { background: var(--marino-5); margin: calc(var(--relleno-tarjeta) * -1); margin-left: 0; padding: var(--relleno-tarjeta); border-radius: 0 var(--radio) var(--radio) 0; }
@media (max-width: 899px) { .promesa__lado--hay { margin: 0 calc(var(--relleno-tarjeta) * -1) calc(var(--relleno-tarjeta) * -1); border-radius: 0 0 var(--radio) var(--radio); } }
.promesa__cuando { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-70); margin-bottom: 10px; }
.promesa__frase { font-size: 19px; line-height: 1.4; color: var(--marino); }
.promesa__lado--dijo .promesa__frase { font-weight: 300; }
.promesa__lado--hay .promesa__frase { font-weight: 600; }
.promesa__fuente { margin-top: 10px; font-size: 13px; color: var(--marino-70); }
/* El tiempo que ha pasado: una línea fina con el número de años encima */
.promesa__tiempo { display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 22px; text-align: center; }
.promesa__linea { width: 100%; height: 1px; background: var(--marino-15); position: relative; margin-bottom: 12px; }
.promesa__linea::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--marino-70); border-right: 0; }
.promesa__tiempo b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--marino); line-height: 1.1; }
.promesa__tiempo b.promesa__espera { color: var(--rojo); } /* lo que lleva esperando, en el rojo del logo: que se vea */
.promesa__tiempo small { font-size: 13px; color: var(--marino-70); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .promesa__tiempo { grid-template-columns: auto 1fr auto; align-items: center; padding-top: 0; gap: 12px; } .promesa__linea { order: 2; margin: 0; } .promesa__tiempo small { order: 3; } }
.promesa__ejemplo { margin-top: 14px; font-size: 12px; color: var(--marino-70); }
/* Estado: texto con una marca fina en marino (lleno, a medias o vacío). Nunca rojo. */
.sello { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--marino); white-space: nowrap; }
.sello::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--marino); }
.sello--a-medias::before { background: linear-gradient(180deg, var(--marino-15) 50%, var(--marino) 50%); }
.sello--sin-cumplir::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--marino); }

/* La pregunta del pleno sobre marino: las tarjetas siguen blancas; la nota y los textos sueltos, en claro */
.bloque--marino .bloque__intro { color: var(--en-marino); }
.bloque--marino .pleno__camino .etiqueta { color: var(--marino-70); }
.bloque--marino .pleno__camino .nota { color: var(--marino-70); }
.bloque--marino .pleno__camino a:not(.boton) { color: var(--marino); }
.bloque--marino .pregunta { border-color: transparent; color: var(--marino); }
.bloque--marino .pleno__camino { color: var(--marino); }
.bloque--marino .pregunta--primera { box-shadow: inset 0 0 0 2px var(--marino); }
.bloque--marino .boton--borde { color: var(--marino); }

/* El dado de las promesas: tiras el dado y sale una tarjeta que se gira («Dijo» delante, «Hoy» detrás) */
.dado-juego { display: grid; gap: 20px; margin-top: 32px; align-items: stretch; }
@media (min-width: 760px) { .dado-juego { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; } }
.dado-juego__mando { display: grid; gap: 16px; align-content: start; justify-items: start; background: var(--marino); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.dado-juego__texto { font-size: 15px; color: var(--en-marino); }
.dado-juego__texto b { color: var(--blanco); }
.dado { width: 88px; height: 88px; padding: 12px; background: var(--blanco); border: 1.5px solid var(--blanco); border-radius: 18px; box-shadow: 0 4px 0 var(--en-marino); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.dado:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--en-marino); }
.dado:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--en-marino); }
.dado.rodando { animation: rodar .6s cubic-bezier(.3,.7,.3,1); }
@keyframes rodar { 0% { transform: rotate(0); } 35% { transform: rotate(-200deg) scale(.9); } 70% { transform: rotate(-330deg) translateY(-6px); } 100% { transform: rotate(-360deg); } }
.dado__cara { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; place-items: center; }
.dado__cara i { width: 12px; height: 12px; border-radius: 50%; }
.dado__cara i.lleno { background: var(--marino); }
.tarjeta-giro { perspective: 1400px; min-height: 240px; display: grid; }
.tarjeta-giro__interior { position: relative; display: grid; width: 100%; cursor: pointer; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .2s; }
.tarjeta-giro.girada .tarjeta-giro__interior { transform: rotateY(180deg); }
.tarjeta-giro.cambiando .tarjeta-giro__interior { opacity: .25; }
.tarjeta-giro__cara { grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; padding: var(--relleno-tarjeta); border: 1px solid var(--marino-15); border-radius: var(--radio); background: var(--blanco); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tarjeta-giro__cara--hay { background: var(--marino-5); border-color: var(--marino-5); transform: rotateY(180deg); }
.tarjeta-giro__frase { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -0.015em; color: var(--marino); margin-top: 4px; }
.tarjeta-giro__cara--dijo .tarjeta-giro__frase { font-weight: 300; }
.tarjeta-giro__cara--hay .tarjeta-giro__frase { font-weight: 600; }
.tarjeta-giro__pista { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--marino); text-decoration: underline; text-underline-offset: 3px; }

/* La pregunta del pleno */
.pleno { display: grid; gap: 24px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) { .pleno { grid-template-columns: 1.7fr 1fr; } }
.pleno__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pregunta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; background: var(--blanco); border: 1.5px solid var(--marino-15); border-radius: var(--radio); padding: 20px 22px; }
.pregunta .boton { grid-column: 2; justify-self: start; margin-top: 10px; }
@media (min-width: 640px) { .pregunta { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .pregunta .boton { grid-column: auto; margin-top: 0; } }
.pregunta--primera { border-color: var(--marino); }
.pregunta__puesto { font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--marino-15); font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.pregunta--primera .pregunta__puesto { color: var(--marino); }
.pregunta__aviso { display: block; font-size: 13px; line-height: 1.6; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-70); margin-bottom: 4px; }
.pregunta__texto { font-weight: 500; font-size: 17px; line-height: 1.4; }
.pregunta__apoyos { font-size: 14px; color: var(--marino-70); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pregunta__apoyos b { color: var(--marino); font-weight: 700; }
.pregunta--sube .pregunta__apoyos b { display: inline-block; animation: salto .5s ease; }
@keyframes salto { 40% { transform: translateY(-4px) scale(1.25); } }
.pleno__camino { display: grid; gap: 14px; background: var(--blanco); border: 1.5px solid transparent; border-radius: var(--radio); padding: 20px 22px; }
.pleno__camino .etiqueta { margin-bottom: 0; }
.pleno__elegida { font-weight: 500; font-size: 17px; line-height: 1.4; }
.pleno__camino .boton { justify-self: start; }
.pleno__camino .nota { margin-top: 0; }
/* Pasos: un cuadradito por paso unido por una línea fina, todo en marino (nunca en rojo) */
.pleno__pasos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.pleno__pasos li { position: relative; padding: 0 0 18px 26px; color: var(--marino-70); font-size: 15px; }
.pleno__pasos li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--marino-15); background: var(--blanco); }
.pleno__pasos li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 2px; width: 1.5px; background: var(--marino-15); }
.pleno__pasos li.hecho::before { background: var(--marino); border-color: var(--marino); }
.pleno__pasos li.ahora { color: var(--marino); font-weight: 600; }
.pleno__pasos li.ahora::before { border-color: var(--marino); background: var(--marino); }

/* Café con COLME */
.cafe { display: grid; gap: 40px; align-items: start; }
.cafe p:not(.etiqueta) { max-width: 52ch; margin-top: 16px; color: var(--marino-70); font-size: 18px; }
.cafe p b { color: var(--marino); }
.cafe__tarjeta { border-top: 1px solid var(--marino-15); padding-top: 28px; }
.cafe__tarjeta p:not(.etiqueta) { color: var(--marino); margin-top: 0; }
.cafe__tarjeta .boton { margin-top: 24px; }
@media (min-width: 900px) { .cafe { grid-template-columns: 1.4fr 1fr; } .cafe__tarjeta { border-top: 0; border-left: 1px solid var(--marino-15); padding: 0 0 0 40px; align-self: stretch; } }

/* Quiénes somos */
.quienes { display: grid; gap: 24px; }
.quienes__texto { display: grid; gap: 18px; align-content: start; max-width: 62ch; font-size: 19px; }
@media (min-width: 900px) { .quienes { grid-template-columns: 1fr 1.6fr; } }
.pendiente-caja { border: 1.5px dashed var(--marino-15); border-radius: var(--radio); padding: 20px; color: var(--marino-70); font-size: 16px; }

/* Noticias */
.noticias { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--marino-15); }
.noticias li { display: grid; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--marino-15); }
.noticias time { font-size: 14px; font-weight: 500; color: var(--marino-70); font-variant-numeric: tabular-nums; }
.noticias a { font-weight: 500; font-size: 19px; text-decoration: none; color: var(--marino); }
.noticias a[href]:hover { text-decoration: underline; }
@media (min-width: 760px) { .noticias li { grid-template-columns: 200px 1fr; align-items: baseline; } }

/* Equipo */
.quienes__sub { margin-top: 16px; }
.quienes__lado { display: grid; gap: 32px; align-content: start; }
.caras__fotos { list-style: none; margin: 0 0 0 -5px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cara { width: 84px; height: 84px; padding: 3px; border: 2px solid transparent; border-radius: 50%; background: none; font: inherit; cursor: pointer; transition: border-color .15s; }
.cara:hover, .cara[aria-pressed="true"] { border-color: var(--marino); }
@media (max-width: 599px) { .cara { width: 72px; height: 72px; } .cara img, .cara span { font-size: 19px; } }
.cara img, .cara span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--blanco); border: 1px solid var(--marino-15); color: var(--marino); font-size: 22px; font-weight: 600; }
.caras__ficha { display: grid; margin-top: 20px; }
.caras__ficha > * { grid-area: 1 / 1; visibility: hidden; }
.caras__ficha > .activa { visibility: visible; }
.caras__pista { color: var(--marino-70); font-size: 15px; }
.caras__persona { display: grid; gap: 4px; align-content: start; }
.caras__persona b { font-size: 19px; }
.caras__persona span { color: var(--marino-70); font-size: 15px; }
.caras__persona small { color: var(--marino-70); font-size: 14px; }
.caras__persona q { margin-top: 8px; font-size: 16px; font-weight: 300; color: var(--marino); quotes: "«" "»"; }
.caras__persona p { margin-top: 10px; font-size: 16px; color: var(--marino); max-width: 40ch; }
.caras__persona p.caras__revisar { margin-top: 6px; font-size: 12px; color: var(--marino-70); }
.hueco { background: var(--marino-5); border-radius: 4px; padding: 0 4px; color: var(--marino-70); font-style: italic; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.promesa__fuente a { color: inherit; text-underline-offset: 2px; }
.quienes__parte { font-weight: 600; font-size: 17px; margin: 4px 0 -10px; }

/* Te escuchamos */
.escuchamos { display: grid; gap: 40px; }
.escuchamos > div p:not(.etiqueta) { color: var(--marino-70); margin-top: 16px; max-width: 40ch; font-size: 18px; }
/* Buzón sobre marino: texto en claro y el formulario en tarjeta blanca */
.bloque--marino .escuchamos > div p:not(.etiqueta) { color: var(--en-marino); }
.bloque--marino .formulario { background: var(--blanco); color: var(--marino); }
.bloque--marino .formulario a { color: var(--marino); }
@media (min-width: 900px) { .escuchamos { grid-template-columns: 1fr 1.3fr; align-items: start; } .escuchamos > div { padding-top: var(--relleno-tarjeta); } }
.formulario { display: grid; gap: 20px; background: var(--marino-5); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
label { display: grid; gap: 6px; font-weight: 500; color: var(--marino); }
.opcional { font-weight: 300; color: var(--marino-70); }
input, select, textarea { width: 100%; font: 300 16px var(--letra); color: var(--marino); background: var(--blanco); border: 1.5px solid var(--marino-15); border-radius: var(--radio); padding: 12px 14px; }
input:hover, select:hover, textarea:hover { border-color: var(--marino-70); }
textarea { resize: vertical; }
textarea::placeholder { color: var(--marino-70); opacity: .8; }
.formulario .boton { justify-self: start; }
.casilla[hidden] { display: none; }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-weight: 300; }
.casilla input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--marino); }
.casilla a { font-weight: 500; }
/* Mensajes: siempre en marino; los avisos de error llevan icono, nunca rojo */
.formulario__respuesta { font-weight: 500; color: var(--marino); min-height: 1.6em; }
.formulario__respuesta.error { display: flex; gap: 10px; align-items: flex-start; }
.formulario__respuesta.error::before { content: "!"; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--marino); color: var(--blanco); font-size: 14px; font-weight: 700; line-height: 22px; text-align: center; }

/* Cómo cuidamos tus datos */
.datos dl { display: grid; gap: 4px 0; margin: 32px 0 0; }
.datos dt { font-weight: 600; margin-top: 14px; }
.datos dd { margin: 0; color: var(--marino-70); }
/* A todo el ancho de la página, con la línea de separación seguida de lado a lado */
@media (min-width: 760px) { .datos dl { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; border-top: 1px solid var(--marino-15); } .datos dt { margin-top: 0; } .datos dt, .datos dd { padding: 18px 0; border-bottom: 1px solid var(--marino-15); } .datos dd { padding-left: 32px; } }

/* Ventana para apoyar */
.dialogo { border: none; border-radius: var(--radio); padding: 32px; max-width: min(460px, calc(100% - 32px)); width: 100%; color: var(--marino); font-family: var(--letra); }
.dialogo::backdrop { background: rgba(2, 37, 68, .6); }
.dialogo form { display: grid; gap: 16px; }
.dialogo p { color: var(--marino-70); }
.dialogo .botones { margin-top: 4px; }
.dialogo__enlace { font-size: 14px; color: var(--marino-70); }

/* Pie */
.pie { background: var(--marino); color: var(--en-marino); padding-block: 48px; font-size: 15px; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: last baseline; gap: 24px 48px; } /* el logo se apoya en la última línea del texto */
.pie__texto { display: grid; gap: 4px; }
.pie a { color: var(--blanco); }

/* Datos aún por confirmar */
.pendiente { background: var(--marino-5); color: var(--marino-70); padding: 1px 6px; border-radius: 4px; }
.pie .pendiente { background: rgba(255,255,255,.1); color: var(--en-marino); }

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

/* ---------- Portada en recuadro con foto, y el pulso al lado ----------
   La foto es PROVISIONAL y está hecha con IA (decisión de Marce, 2 nov 2026): cambiarla por una real de Colmenarejo. */
.portada__rejilla--cartel { align-items: stretch; gap: 24px; }
@media (min-width: 900px) { .portada__rejilla--cartel > .cartel { padding-top: var(--relleno-tarjeta); } }
.cartel { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 32px;
  background: var(--blanco); border: 1px solid var(--marino-15); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
/* La foto ocupa la parte derecha del recuadro y se funde con el blanco en una curva suave */
.cartel__foto { position: absolute; inset: 0 0 0 auto; width: 60%; background: url("img/portada-provisional.jpg") center 45% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 95% 115% at 100% 40%, #000 38%, transparent 82%);
  mask-image: radial-gradient(ellipse 95% 115% at 100% 40%, #000 38%, transparent 82%); }
.cartel__texto { position: relative; container-type: inline-size; }
/* «Aquí, el vecino» casi llena el ancho del recuadro; «manda» debajo, con la pluma */
.cartel .portada__titular { font-size: min(72px, 13.5cqi); line-height: .95; margin-top: 4px; }
.cartel .portada__titular .linea { white-space: nowrap; }
.cartel .entradilla { max-width: 30ch !important; position: relative; }
.cartel .botones { margin-top: 28px; }
.cartel .boton--borde { background: var(--blanco); } /* sobre la foto, el botón de borde lleva fondo blanco para leerse */
.cartel .boton--borde:hover { background: var(--marino); }
.boton__flecha { width: 18px; height: 18px; margin-left: 10px; flex: none; }
.boton:has(.boton__flecha) { display: inline-flex; align-items: center; }
/* Cifras abajo, dentro del recuadro, sobre una banda blanca para que se lean encima de la foto */
.sellos-portada { position: relative; list-style: none; margin: 0; padding: 18px 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 0;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--marino-15); border-radius: var(--radio); }
.sellos-portada li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 0 14px; }
.sellos-portada svg { grid-row: 1 / 3; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--marino-5); color: var(--marino); }
.sellos-portada b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; align-self: end; }
.sellos-portada span { font-size: 11px; font-weight: 500; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; color: var(--marino-70); align-self: start; }
.sellos-portada li:nth-child(even) { border-left: 1px solid var(--marino-15); }
/* En el móvil la foto va arriba dentro del recuadro y se funde hacia abajo */
@media (max-width: 599px) {
  .cartel { padding-top: 0; }
  .cartel__foto { position: relative; inset: auto; width: calc(100% + 2 * var(--relleno-tarjeta)); height: 200px; margin: 0 calc(var(--relleno-tarjeta) * -1) -40px; background-position: center 40%;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .sellos-portada { grid-template-columns: 1fr; }
  .sellos-portada li:nth-child(even) { border-left: 0; }
}

/* ---------- Página «Quiénes somos» ---------- */
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.pagina-cabeza { padding-bottom: clamp(40px, 5vw, 64px); }
.pagina__titulo { font-size: clamp(36px, 7vw, 56px); max-width: 24ch; }
.pagina__entradilla { max-width: 52ch; }
@media (min-width: 900px) { .pagina__entradilla { max-width: 52ch; } }
.indice { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; }
.indice a { color: var(--marino); font-weight: 500; text-underline-offset: 4px; }

.historia { display: grid; gap: 32px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.historia h3 { margin-bottom: 10px; }
.historia p { color: var(--marino-70); font-size: 17px; }

.creemos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.creemos li { display: grid; gap: 8px; align-content: start; background: var(--blanco); border: 1px solid var(--marino-15); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.creemos b { font-size: 21px; font-weight: 600; color: var(--marino); letter-spacing: -0.01em; }
.creemos span { color: var(--marino-70); font-size: 16px; }

.preguntas { margin-top: 32px; border-top: 1px solid var(--marino-15); max-width: 760px; }
.preguntas details { border-bottom: 1px solid var(--marino-15); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 19px; color: var(--marino); cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; color: var(--marino); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { color: var(--marino-70); font-size: 17px; padding-bottom: 20px; max-width: 62ch; }
.preguntas small { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--marino-70); }

.equipo-largo { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 48px 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.persona { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
.persona__foto { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--marino-5); border: 1px solid var(--marino-15); color: var(--marino); font-size: 30px; font-weight: 600; }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__texto { display: grid; gap: 4px; }
.persona__cargo { color: var(--marino-70); font-size: 16px; }
.persona__rol { color: var(--marino-70); font-size: 14px; }
.persona__historia { margin-top: 12px; font-size: 17px; color: var(--marino); }
.persona q { margin-top: 10px; font-size: 16px; font-weight: 300; color: var(--marino); quotes: "«" "»"; }
.persona__revisar { margin-top: 6px; font-size: 12px; color: var(--marino-70); }
@media (max-width: 599px) { .persona { grid-template-columns: 1fr; gap: 16px; } .persona__foto { width: 88px; height: 88px; font-size: 24px; } }

.cierre .botones { align-items: center; gap: 16px 28px; }
.cierre__enlace { color: var(--blanco); font-weight: 500; text-underline-offset: 4px; }
/* El cierre en marino va pegado al pie, también marino: una línea fina los separa */
body:has(.cierre) .pie { border-top: 1px solid rgba(255, 255, 255, .15); }

/* ---------- Acceso y panel del equipo (acceso.html, equipo.html) ---------- */
/* Herramienta interna: misma marca, sin adornos. Un solo botón rojo por pantalla. */
.interna { background: var(--blanco); }
.interna [hidden] { display: none !important; }
.interna__volver { background: none; border: 0; padding: 0; font: 500 16px var(--letra); color: var(--marino); text-decoration: none; cursor: pointer; }
.interna__volver:hover { text-decoration: underline; text-underline-offset: 3px; }
.interna__usuario { display: flex; align-items: baseline; gap: 20px; color: var(--marino-70); font-size: 15px; }
.interna__titulo { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }

.acceso { display: grid; gap: 40px; align-items: start; }
.acceso__texto { color: var(--marino-70); margin-top: 16px; max-width: 46ch; }
.acceso__caja { display: grid; gap: 0; max-width: 520px; }
.acceso__caja .formulario { border-top-left-radius: 0; }
.interna .formulario__respuesta:empty { display: none; }
/* El texto de la pestaña cae en la misma línea que los campos de su caja */
.acceso .pestana { padding-inline: var(--relleno-tarjeta); }
@media (min-width: 900px) { .acceso { grid-template-columns: 1fr 1fr; } }

/* Pestañas: texto marino, la elegida con fondo suave pegado a su caja */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; }
.pestanas[hidden] { display: none; }
.pestana { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border: 0; border-radius: var(--radio) var(--radio) 0 0; background: transparent; font: 500 16px var(--letra); color: var(--marino-70); cursor: pointer; }
.pestana:hover { color: var(--marino); }
.pestana[aria-selected="true"] { background: var(--marino-5); color: var(--marino); }
.pestana__cuenta:empty { display: none; }
.pestana__cuenta { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--marino); color: var(--blanco); font-size: 13px; font-weight: 600; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }

/* En el panel, pestañas subrayadas: la primera empieza en el borde de la página, como el título */
.panel__pestanas { margin-top: 40px; gap: 32px; border-bottom: 1px solid var(--marino-15); }
.panel__pestanas .pestana { padding-inline: 0; border-radius: 0; box-shadow: inset 0 -3px 0 transparent; }
.panel__pestanas .pestana[aria-selected="true"] { background: transparent; box-shadow: inset 0 -3px 0 var(--marino); }
.panel__seccion { padding-top: 40px; }
.panel__seccion h2 { font-size: clamp(26px, 3.4vw, 34px); }
.panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.panel__vacio { margin-top: 24px; color: var(--marino-70); }
.panel__vacio.error { color: var(--marino); font-weight: 500; }

.filtro { display: inline-flex; border: 1.5px solid var(--marino-15); border-radius: var(--radio); padding: 3px; gap: 3px; }
.filtro__boton { border: 0; border-radius: 7px; padding: 8px 16px; background: transparent; font: 500 15px var(--letra); color: var(--marino-70); cursor: pointer; }
.filtro__boton[aria-pressed="true"] { background: var(--marino); color: var(--blanco); }

/* Buzón */
.mensajes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.mensaje { display: grid; gap: 12px; padding: var(--relleno-tarjeta); border-radius: var(--radio); background: var(--marino-5); }
.mensaje--leido { background: transparent; box-shadow: inset 0 0 0 1px var(--marino-15); }
.mensaje__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--marino-70); }
.mensaje__datos b { color: var(--marino); font-weight: 600; }
.mensaje__texto { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.mensaje__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 12px; border-top: 1px solid var(--marino-15); }
.mensaje__correo { font-size: 15px; color: var(--marino-70); overflow-wrap: anywhere; min-width: 0; }
.mensaje__correo a { font-weight: 500; }

/* Resultados */
.resultados { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 900px) { .resultados { grid-template-columns: 1fr 1fr; } }
.resultado { display: grid; gap: 16px; align-content: start; padding: var(--relleno-tarjeta); border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--marino-15); min-width: 0; }
.resultado__pregunta { color: var(--marino-70); margin-top: -8px; }
.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.fila__nombre { font-size: 15px; }
.fila__dato { font-size: 14px; font-weight: 500; color: var(--marino); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila__barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--marino-5); overflow: hidden; }
.fila__barra span { display: block; height: 100%; background: var(--azul); border-radius: 3px; }

/* Equipo y permisos */
.personas { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--marino-15); }
.persona-panel { display: grid; gap: 12px 32px; padding: 20px 0; border-bottom: 1px solid var(--marino-15); }
.persona-panel__quien { display: grid; gap: 2px; min-width: 0; }
.persona-panel__quien span { font-size: 14px; color: var(--marino-70); overflow-wrap: anywhere; }
.persona-panel__permisos { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 24px; } /* 2 × 2: las casillas caen en columna fila a fila */
.persona-panel__permisos .casilla input[disabled] { opacity: .5; }
.persona-panel__acciones { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.persona-panel__aviso { grid-column: 1 / -1; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.persona-panel__aviso:empty { display: none; }
@media (min-width: 900px) { .persona-panel { grid-template-columns: minmax(0, 1fr) 300px 280px; align-items: center; } .persona-panel__acciones { justify-content: end; } }
.enlace-boton { background: none; border: 0; padding: 0; font: 500 15px var(--letra); color: var(--marino); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace-boton:hover { color: var(--marino-70); }

.invitar { margin-top: 40px; max-width: 640px; }
.permisos { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.permisos legend { font-weight: 500; padding: 0; margin-bottom: 10px; }
.invitacion { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--marino-15); }
.invitacion[hidden] { display: none; }
.invitacion__texto { padding: 16px; border-radius: var(--radio); background: var(--blanco); font-weight: 500; user-select: all; overflow-wrap: anywhere; }
.invitacion .boton { justify-self: start; }

/* ---------- Página «Afíliate» ---------- */
.afiliate { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .afiliate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; } .afiliate__info { padding-top: var(--relleno-tarjeta); } }
.afiliate__info { display: grid; gap: 32px; }
.afiliate__info h2, .afiliate__form h2 { font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -0.02em; margin-bottom: 10px; }
.afiliate__info small { font-size: 13px; color: var(--marino-70); }
.afiliate__info .nota { margin-top: 0; }
.afiliate__lista { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.afiliate__form h2 { margin-bottom: 0; }
/* Dos campos por fila en pantallas anchas */
.formulario__pareja { display: grid; gap: 20px; }
@media (min-width: 600px) { .formulario__pareja { grid-template-columns: 1fr 1fr; } }
/* Panel: solicitudes de afiliación */
.estado-af { font-weight: 500; color: var(--marino); }
.ficha-af { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; margin: 0; font-size: 15px; }
.ficha-af dt { color: var(--marino-70); }
.ficha-af dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ficha-af a { font-weight: 500; }
.af-notas { font-size: 15px; max-width: 520px; }
.af-botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- «Afíliate» en la cabecera: botón rojo (decisión de Marce, 2 nov 2026) ---------- */
/* En el ordenador va el último del menú; en el móvil, al lado de «Menú», siempre a la vista. */
.menu .menu__afiliate, .cabecera__afiliate {
  display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--radio);
  background: var(--rojo); color: var(--blanco); font: 600 16px/1.2 var(--letra); text-decoration: none;
  transition: background .15s;
}
/* En el menú del ordenador el botón se apoya en la línea base de los enlaces; la cabecera crece 8 px para dejarle aire debajo */
@media (min-width: 1001px) { .menu .menu__afiliate { margin-block: -8px; } .cabecera__fila { padding-bottom: 12.2px; } } /* 8 px de aire bajo el botón */
.menu .menu__afiliate:hover, .cabecera__afiliate:hover { background: var(--rojo-oscuro); text-decoration: none; }
.cabecera__afiliate { display: none; }
@media (max-width: 1000px) {
  /* Misma caja que «Menú»: mismo alto, borde y letra */
  .cabecera__afiliate { display: inline-flex; margin-left: auto; border: 2px solid var(--rojo); padding: 8px 16px; font: 600 15px var(--letra); }
  .cabecera__afiliate:hover { border-color: var(--rojo-oscuro); }
  .menu .menu__afiliate { display: none; }
}


/* ---------- Menú del ordenador: al pasar el ratón, el mismo trazo rojo de pluma que subraya «manda» ----------
   También marca la página en la que estás. Va dibujado aparte (::after) para no mover el texto. En el móvil, subrayado normal. */
@media (min-width: 1001px) {
  .menu a:not(.menu__afiliate) { position: relative; }
  .menu a:not(.menu__afiliate)::after {
    content: ""; position: absolute; left: -3%; right: -3%; bottom: -7px; height: 6px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23DA1D21' d='M1 10.5C40 7.2 120 4.6 200 4.2C240 4 275 4.6 299 5.6C276 6.4 242 7.2 200 7.9C120 9.2 50 11 4 12.4C1.5 12.5 0.4 11.2 1 10.5Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    opacity: 0; transition: opacity .15s;
  }
  .menu a:not(.menu__afiliate):hover, .menu a:not(.menu__afiliate)[aria-current="page"] { text-decoration: none; }
  .menu a:not(.menu__afiliate):hover::after, .menu a:not(.menu__afiliate)[aria-current="page"]::after { opacity: 1; }
}