/* Canal Vecinal · página de presentación y encuesta.
   Todo valor sale de css/clotitec.css (Clotitec Design OS). Lo que falta está en FALTAN-TOKENS.md. */

:root {
  --pg-hueco-3: calc(var(--ct-reticula) * 3);
  --pg-hueco-4: calc(var(--ct-reticula) * 4);
  --pg-hueco-5: calc(var(--ct-reticula) * 5);
  --pg-medida-formulario: calc(var(--ct-medida-hoja) * 1.5);
  --pg-medida-lectura: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-cuerpo-tamano);
  font-weight: var(--ct-tipo-cuerpo-peso);
  line-height: var(--ct-tipo-cuerpo-interlinea);
  color: var(--ct-texto);
  background: var(--ct-fondo-suave);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ct-fuente-titular);
  font-weight: var(--ct-peso-titular);
  line-height: var(--ct-tipo-web-titular-interlinea);
  letter-spacing: var(--ct-tipo-web-titular-tracking);
  text-wrap: balance;
}
h1 { font-size: var(--ct-tipo-web-h1-tamano); line-height: var(--ct-tipo-web-h1-interlinea); letter-spacing: var(--ct-tipo-web-h1-tracking); }
h2 { font-size: var(--ct-tipo-web-h2-tamano); }
h3 { font-size: var(--ct-tipo-web-h4-tamano); font-weight: var(--ct-peso-titular-suave); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-foco);
  outline-offset: var(--ct-foco-separacion);
}
.ct-superficie-verde :focus-visible { outline-color: var(--ct-superficie-verde-titular); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.contenedor {
  width: 100%;
  max-width: var(--ct-medida-contenedor);
  margin-inline: auto;
  padding-inline: var(--ct-espacio-2);
}

.icono {
  width: var(--pg-hueco-3); height: var(--pg-hueco-3);
  flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Cabecera ── */
.cabecera { background: var(--ct-fondo); border-bottom: 1px solid var(--ct-linea); }
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ct-espacio-2);
  min-height: var(--ct-espacio-8);
}
.cabecera__marca { display: inline-flex; align-items: center; min-height: var(--ct-toque-minimo); }
.cabecera__marca img { height: var(--pg-hueco-4); width: auto; }
.cabecera .boton { white-space: nowrap; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ct-espacio-1);
  min-height: var(--ct-toque-fila);
  padding: var(--ct-espacio-interfaz-4) var(--pg-hueco-3);
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-cuerpo-tamano);
  font-weight: var(--ct-peso-texto-fuerte);
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--ct-radio-boton);
  cursor: pointer;
  transition: background-color var(--ct-dur-rapida) var(--ct-curva-estado), transform var(--ct-dur-pulsacion) var(--ct-curva-estado);
}
.boton:active { transform: scale(var(--ct-pulsacion-escala)); }
.boton--primario { background: var(--ct-primario-relleno); color: var(--ct-sobre-primario); }
.boton--primario:hover { background: var(--ct-primario-relleno-hover); }
.boton--invertido { background: var(--ct-superficie-verde-tarjeta-fondo); color: var(--ct-superficie-verde-tarjeta-texto); }
.boton--invertido:hover { background: var(--ct-fondo-alterno); }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: var(--ct-opacidad-deshabilitado); cursor: default; }

.enlace { color: var(--ct-primario-texto); font-weight: var(--ct-peso-texto-fuerte); text-underline-offset: .2em; }
.enlace--claro { color: var(--ct-superficie-verde-titular); display: inline-flex; align-items: center; min-height: var(--ct-toque-minimo); }

/* ── Portada ── */
.portada { padding-block: var(--ct-espacio-8) var(--ct-espacio-12); }
.portada__texto { max-width: var(--pg-medida-lectura); }
.portada h1 { margin-top: var(--ct-espacio-2); }
.portada__entrada {
  margin-top: var(--pg-hueco-3);
  font-size: var(--ct-tipo-web-h4-tamano);
  line-height: 1.5;
}
.portada__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ct-espacio-2) var(--pg-hueco-3);
  margin-top: var(--pg-hueco-4);
}

/* ── Tira de canales: tarjeta clara montada sobre el borde de la portada ── */
.canales { margin-top: calc(var(--ct-espacio-8) * -1); position: relative; }
.canales__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ct-espacio-1);
  padding: var(--ct-espacio-2);
}
.canales__lista li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--ct-espacio-1);
  padding: var(--ct-espacio-2) var(--ct-espacio-1);
  font-weight: var(--ct-peso-texto-fuerte);
  line-height: 1.3;
}
.canales__lista .icono { color: var(--ct-primario); width: var(--pg-hueco-4); height: var(--pg-hueco-4); }

/* ── Secciones ── */
.seccion { padding-block: var(--ct-espacio-10); }
.seccion--alterna { background: var(--ct-fondo-alterno); }
.seccion--blanca { background: var(--ct-fondo); }
.seccion__cabeza { max-width: var(--pg-medida-lectura); }
.seccion__cabeza h2 { margin-top: var(--ct-espacio-2); }
.seccion__cabeza p { margin-top: var(--ct-espacio-2); color: var(--ct-texto-suave); font-size: var(--ct-tipo-web-h4-tamano); line-height: 1.5; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pg-hueco-3);
  margin-top: var(--pg-hueco-5);
}
.rejilla--dos { grid-template-columns: repeat(2, 1fr); }

.tarjeta {
  background: var(--ct-superficie);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-tarjeta);
  padding: var(--pg-hueco-3);
}
.tarjeta h3 { margin-top: var(--ct-espacio-2); }
.tarjeta p { margin-top: var(--ct-espacio-1); color: var(--ct-texto-suave); }
.tarjeta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ct-toque-fila); height: var(--ct-toque-fila);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-primario-suave);
  color: var(--ct-primario-texto);
}

/* ── Pasos de la cámara ── */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pg-hueco-3);
  margin-top: var(--pg-hueco-5);
  counter-reset: paso;
}
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ct-toque-minimo); height: var(--ct-toque-minimo);
  border-radius: var(--ct-radio-pildora);
  background: var(--ct-primario-relleno);
  color: var(--ct-sobre-primario);
  font-family: var(--ct-fuente-titular);
  font-size: var(--ct-tipo-titulo-3-tamano);
  font-weight: var(--ct-peso-titular);
}
.pasos h3 { margin-top: var(--ct-espacio-2); }
.pasos p { margin-top: var(--ct-espacio-1); color: var(--ct-texto-suave); }

.lista-marcas { display: grid; gap: var(--ct-espacio-interfaz-4); margin-top: var(--ct-espacio-2); }
.lista-marcas li { display: flex; gap: var(--ct-espacio-interfaz-4); align-items: flex-start; }
.lista-marcas .icono { color: var(--ct-primario); margin-top: var(--ct-espacio-interfaz-1); }
.lista-marcas--neutra .icono { color: var(--ct-texto-suave); }

/* ── Aviso ── */
.aviso {
  display: flex; gap: var(--ct-espacio-2); align-items: flex-start;
  margin-top: var(--pg-hueco-5);
  padding: var(--pg-hueco-3);
  border-radius: var(--ct-radio-tarjeta);
  background: var(--ct-primario-suave);
  color: var(--ct-texto);
}
.aviso .icono { color: var(--ct-primario-texto); margin-top: var(--ct-espacio-interfaz-1); }
.aviso strong { display: block; font-family: var(--ct-fuente-titular); font-size: var(--ct-tipo-web-h4-tamano); line-height: 1.3; }

/* ── Encuesta ── */
.encuesta { max-width: var(--pg-medida-formulario); margin-inline: auto; }
.encuesta__cabeza { text-align: center; }
.encuesta__cabeza h2 { margin-top: var(--ct-espacio-2); }
.encuesta__cabeza p { margin-top: var(--ct-espacio-2); color: var(--ct-texto-suave); }
.encuesta__cabeza .ct-rotulo, .encuesta__cabeza .ct-pastilla { margin-inline: auto; }

.bloque {
  margin-top: var(--pg-hueco-4);
  padding: var(--pg-hueco-3);
  background: var(--ct-superficie);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-hoja);
}
.bloque__titulo {
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-etiqueta-tamano);
  font-weight: var(--ct-tipo-etiqueta-peso);
  letter-spacing: var(--ct-tipo-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--ct-primario-texto);
}

.pregunta { margin: var(--pg-hueco-3) 0 0; padding: 0; border: 0; min-width: 0; }
.pregunta + .pregunta { margin-top: var(--pg-hueco-4); padding-top: var(--pg-hueco-4); border-top: 1px solid var(--ct-linea); }
.pregunta legend, .pregunta__titulo {
  display: block; padding: 0;
  font-family: var(--ct-fuente-titular);
  font-size: var(--ct-tipo-web-h4-tamano);
  font-weight: var(--ct-peso-titular-suave);
  line-height: 1.3;
}
/* La leyenda flota para quedar dentro del fieldset: si no, el filete superior la atraviesa. */
.pregunta > legend { float: left; width: 100%; }
.pregunta > legend + * { clear: both; }
.pregunta__ayuda { display: block; padding-top: var(--ct-espacio-interfaz-1); color: var(--ct-texto-suave); }

.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ct-espacio-1); margin-top: var(--ct-espacio-2); }
.opcion {
  display: flex; align-items: center; gap: var(--ct-espacio-interfaz-4);
  min-height: var(--ct-toque-fila);
  padding: var(--ct-espacio-1) var(--ct-espacio-2);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-fondo);
  line-height: 1.35;
  cursor: pointer;
  transition: background-color var(--ct-dur-rapida) var(--ct-curva-estado), border-color var(--ct-dur-rapida) var(--ct-curva-estado);
}
.opcion:hover { border-color: var(--ct-primario); }
.opcion:has(input:checked) { background: var(--ct-primario-suave); border-color: var(--ct-primario); }
.opcion:has(input:disabled) { opacity: var(--ct-opacidad-deshabilitado); cursor: default; }
.opcion:has(input:focus-visible) { outline: var(--ct-foco-grosor) solid var(--ct-foco); outline-offset: var(--ct-foco-separacion); }
.opcion input { flex: none; width: var(--ct-espacio-interfaz-6); height: var(--ct-espacio-interfaz-6); margin: 0; accent-color: var(--ct-primario-relleno); }
.opcion input:focus-visible { outline: none; }

/* Pregunta 10: una fila por pieza con cuatro grados */
.grados { display: grid; gap: var(--ct-espacio-2); margin-top: var(--ct-espacio-2); }
.grado { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ct-espacio-1) var(--ct-espacio-2); }
.grado legend { float: left; padding: 0; font-weight: var(--ct-peso-texto-medio); line-height: 1.35; }
.grado__escala { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ct-espacio-interfaz-1); }
.grado__escala .opcion { justify-content: center; padding-inline: var(--ct-espacio-interfaz-4); min-height: var(--ct-toque-minimo); }
.grado__escala .opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.grado__escala .opcion:has(input:checked) { background: var(--ct-primario-relleno); border-color: var(--ct-primario-relleno); color: var(--ct-sobre-primario); font-weight: var(--ct-peso-texto-fuerte); }

.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ct-espacio-2); margin-top: var(--ct-espacio-2); }
.campo { display: grid; gap: var(--ct-espacio-interfaz-2); }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-weight: var(--ct-peso-texto-fuerte); }
.campo input, .campo textarea {
  width: 100%;
  min-height: var(--ct-toque-fila);
  padding: var(--ct-espacio-interfaz-4) var(--ct-espacio-2);
  font: inherit;
  color: var(--ct-texto);
  background: var(--ct-fondo);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-fila);
}
.campo textarea { min-height: calc(var(--ct-toque-fila) * 2.5); resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--ct-primario); }

.casillas { display: grid; gap: var(--ct-espacio-1); margin-top: var(--ct-espacio-2); }
.legal { margin-top: var(--ct-espacio-2); color: var(--ct-texto-suave); }
.trampa { position: absolute; left: -200vw; }

.envio { margin-top: var(--pg-hueco-4); }
.estado {
  margin-top: var(--ct-espacio-2);
  padding: var(--ct-espacio-2);
  border-radius: var(--ct-radio-fila);
}
.estado[hidden] { display: none; }
.estado--ok { background: var(--ct-estado-ok-fondo); color: var(--ct-estado-ok-texto); }
.estado--critico { background: var(--ct-estado-critico-fondo); color: var(--ct-estado-critico-texto); }
.estado--neutro { background: var(--ct-estado-neutro-fondo); color: var(--ct-estado-neutro-texto); }
.estado strong { display: block; }

/* ── Pie ── */
.pie { padding-block: var(--ct-espacio-7); background: var(--ct-fondo); border-top: 1px solid var(--ct-linea); color: var(--ct-texto-suave); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ct-espacio-2); }
.pie img { height: var(--pg-hueco-3); width: auto; }

/* ── Pantallas estrechas ── */
@media (max-width: 900px) {
  .rejilla, .pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .portada { padding-block: var(--ct-espacio-7) var(--ct-espacio-11); }
  .seccion { padding-block: var(--ct-espacio-8); }
  .rejilla, .rejilla--dos, .pasos, .opciones, .campos { grid-template-columns: 1fr; }
  .canales__lista { grid-template-columns: repeat(2, 1fr); }
  .canales__lista li:last-child { grid-column: 1 / -1; }
  .grado { grid-template-columns: 1fr; }
  .bloque { padding: var(--ct-espacio-2); }
  .portada__acciones .boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .opcion { transition: none; }
  .boton:active { transform: none; }
}