/* Layout del canal público y del panel (CTI-5 / CTI-11).
   Skin web de BLC Global — ver `Panel de Gestion - BLC Web.dc.html` en Claude Design. */
html, body { height: 100%; }

/* ── Público ── */
/* `.public-wrap` es la columna angosta de las páginas públicas que NO son la
   landing: las legales, la confirmación, el 404 y el 403 de CSRF. La landing pide
   `$fullBleed` y se centra franja por franja con `.band-inner`. */
.public-wrap { max-width: 920px; margin: 0 auto; padding: 32px 20px 64px; }
/* Lo usa el login del panel, no el canal público. */
.brand-logo { width: 40px; height: 40px; border: 2px solid var(--color-accent); border-radius: 50%; display: grid; place-items: center; color: var(--color-accent); font-family: var(--font-heading); font-weight: 700; }
.principles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 32px; }
.principle { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 14px; background: var(--color-surface); }
.principle-title { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-accent); }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-q { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 600; font-family: var(--font-body); color: var(--color-text); }
.faq-q .num { font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); width: 22px; }
.faq-a { padding: 0 0 14px 32px; font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); }
.selector-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-divider); margin: 24px 0 20px; flex-wrap: wrap; }
.tab-btn { padding: 10px 16px; font-size: 14px; font-family: var(--font-heading); font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--color-neutral-600); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.confirm-code { font-family: var(--font-heading); font-weight: 700; font-size: 34px; color: var(--color-accent); letter-spacing: 1px; }
.alert { padding: 10px 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); font-size: 14px; margin-bottom: 14px; }
.alert-err { border-color: var(--color-accent-300); color: var(--color-accent-800); background: var(--color-accent-100); }
.alert-ok { background: var(--color-neutral-100); }

/* ── Panel ── */
.panel { display: flex; height: 100vh; width: 100%; overflow: hidden; }
.sidebar { width: 256px; flex: none; background: #1c1c1e; color: #f4f4f5; display: flex; flex-direction: column; }
.sidebar-head { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-logo { display: flex; align-items: center; gap: 10px; }
.sidebar-logo img { height: 26px; width: auto; }
.sidebar-logo .mark { width: 30px; height: 30px; border: 2px solid var(--color-accent); border-radius: 50%; color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 12px; }
.sidebar-logo .name { font-family: var(--font-heading); font-weight: 700; }
.sidebar-kicker { margin-top: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-400); }
.sidebar-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.sidebar-nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.side-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 14px; font-family: var(--font-heading); font-weight: 500;
  text-decoration: none; color: rgba(255,255,255,.72); border-radius: var(--radius-md); transition: background-color .15s ease, color .15s ease; }
.side-link svg { flex: none; opacity: .85; }
.side-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.side-link.active { background: var(--color-accent); color: #fff; }
.side-link.active svg { opacity: 1; }
.side-sep { height: 1px; background: rgba(255,255,255,.1); margin: 10px 8px; }
.side-badge { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); }
.side-link.active .side-badge { background: rgba(0,0,0,.22); }
.sidebar-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 10px; }
.sidebar-foot .avatar { width: 34px; height: 34px; flex: none; background: var(--color-accent); color: #fff; display: grid; place-items: center; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.panel-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { flex: none; min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.topbar-crumb { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.topbar-title { margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `position: relative` no es decorativo: hace que los descendientes en absoluto
   se resuelvan contra esta caja y no contra el documento.
   Sin eso, un `.sr-only` —que es `position:absolute` por definición— se sale del
   contenedor con scroll, el navegador lo cuenta en el alto del documento, y la
   ventana entera empieza a scrollear por detrás de la cáscara de `100vh`. El
   síntoma es una franja blanca abajo, con la barra lateral cortada, al llegar al
   final de una pantalla larga. */
.content { flex: 1; overflow: auto; padding: 28px; position: relative; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi-value { font-family: var(--font-heading); font-weight: 700; font-size: 38px; line-height: 1; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.card-alert { border-top: 3px solid var(--color-accent); }
.bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-divider); }
.bar-track { flex: 1; height: 12px; background: var(--color-neutral-200); border-radius: var(--radius-pill); overflow: hidden; }
.bar-track > div { border-radius: var(--radius-pill); }
/* Filtros del listado de casos. Son ocho campos y tres botones en una sola
   barra: con 10px de separación se leían como un bloque continuo y costaba ver
   dónde terminaba un campo y empezaba el siguiente. */
.filters { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: flex-end; }

/* Las fechas van en su propia fila junto a las acciones, y no sueltas al final
   de la primera: "Desde" quedaba arriba y "Hasta" caía solo al renglón de abajo,
   partiendo un rango que se lee de a dos. */
.filters-fechas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
/* Los botones se agrupan para que la separación de 18px entre campos no los
   despegue entre sí, y para que al envolverse bajen los tres juntos. */
.filters-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.kv { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-neutral-600); }
.timeline-dot { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--radius-pill); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1c1c1e; color: #fff; padding: 12px 20px; border-radius: var(--radius-pill); font-size: 14px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; z-index: 50; }
.toast-err { background: var(--color-accent); }

/* Campana de notificaciones del topbar */
.bell { position: relative; }
.bell-count { position: absolute; top: -4px; right: -4px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; border-radius: var(--radius-pill); }

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .form-grid, .kpi-grid, .two-col, .detail-grid, .grid-2 { grid-template-columns: 1fr; }
  .sidebar { width: 68px; }
  .sidebar-logo img { display: none; }
  .sidebar .name, .sidebar-kicker, .sidebar-sub, .side-link span, .side-badge, .sidebar-foot > div { display: none; }
  .side-link { justify-content: center; }
  .content, .topbar { padding-inline: 16px; }
}

/* ── Accesibilidad y antispam (iteración 2) ── */

/* Honeypot: fuera de pantalla, no oculto con display:none (algunos bots lo detectan). */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text, #1c1c1e); color: #fff; padding: 10px 16px; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ── El error como componente (CTI-21) ──
   Antes el error era `color: rojo` y un borde de 1px del mismo rojo. No se
   distinguía de nada: el acento de marca ES rojo — el foco, los títulos y el
   botón de enviar ya lo usan. Un error no puede señalarse solo por color acá.
   De ahí las cuatro señales que ningún otro estado del sitio combina: borde de
   2px, fondo teñido, ícono y negrita. */

.input[aria-invalid="true"],
.field.is-invalid .input {
  border-width: 2px;
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
}
/* El foco tiene que seguir ganándole al error: quien está corrigiendo el campo
   necesita ver dónde está parado. */
.input[aria-invalid="true"]:focus-visible,
.field.is-invalid .input:focus-visible { background: var(--color-surface); }

/* La distancia es asimétrica a propósito. El mensaje quedaba a la misma altura
   de su campo que de la etiqueta siguiente, y no se sabía a cuál correspondía
   (es exactamente lo que reportó la clienta). Ahora: 6px de lo suyo, 20px de lo
   que viene, más la barra vertical que lo ata hacia arriba. */
.field-error {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 6px 0 0; padding: 5px 0 5px 9px;
  border-left: 3px solid var(--color-accent-600);
  color: var(--color-accent-800); font-size: 13px; font-weight: 600; line-height: 1.4;
}
.field-error svg { flex: none; margin-top: 1px; }

/* El aire de abajo lo da el contenedor, no el error: así el campo sin error
   conserva su ritmo y solo el que falló empuja al siguiente. */
.field.is-invalid, .cat-block.is-invalid { margin-bottom: 14px; }
.form-grid { row-gap: 20px; }

/* Resumen al inicio del formulario. Es el destino del ancla, el panorama de
   cuánto falta y lo que anuncia el lector de pantalla, todo en la misma pieza. */
.form-error-summary {
  border: 2px solid var(--color-accent-600); border-radius: var(--radius-md);
  background: var(--color-accent-100); padding: 14px 16px; margin-bottom: 4px;
}
.form-error-summary:focus { outline: none; }
.form-error-summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-error-summary .titulo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--color-accent-800);
}
.form-error-summary ul { margin: 0; padding-left: 26px; }
.form-error-summary li { font-size: 14px; margin-bottom: 3px; }
.form-error-summary li:last-child { margin-bottom: 0; }
.form-error-summary a { color: var(--color-accent-800); text-decoration: underline; }
.form-error-summary a:hover { color: var(--color-accent); }
/* Un error sin campo al que saltar (el antispam) se lee igual, sin enlace. */
.form-error-summary .sin-ancla { color: var(--color-accent-800); }

/* Marca de obligatoriedad. Gris y de menor tamaño: acompaña a la etiqueta, no
   compite con ella. */
.field-mark { font-weight: 400; font-size: 12px; color: var(--color-neutral-600); }

/* Un grupo de radios recibe el foco del ancla en el <fieldset> para que se
   anuncie la pregunta entera, no una opción suelta. No debe verse el foco del
   contenedor además del de la opción. */
fieldset[tabindex="-1"]:focus { outline: none; }

/* Un grupo de radios no tiene recuadro que engrosar, así que lo que marca el
   error es su enunciado. */
fieldset.is-invalid > legend { color: var(--color-accent-800); font-weight: 700; }

/* FAQs con <details>: mantienen el aspecto del acordeón anterior. */
details.faq-item > summary.faq-q { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
details.faq-item > summary.faq-q::-webkit-details-marker { display: none; }
details.faq-item[open] > summary.faq-q > span:last-child { transform: rotate(180deg); }

/* Filas de tabla que llevan al detalle. El cursor y el realce son la única
   pista visual de que la fila entera es clicable. */
.row-link { cursor: pointer; }
.row-link:hover { background: var(--color-neutral-100); }
.row-link:focus-within { background: var(--color-accent-100); }

/* Reordenar catálogos (CTI-23). El asa solo aparece con JavaScript activo — sin
   él quedan las flechas, que hacen lo mismo con un clic más. */
.drag-handle { cursor: grab; color: var(--color-neutral-400); margin-right: 6px; user-select: none; }
.drag-handle:active { cursor: grabbing; }
tr.arrastrando { opacity: .45; background: var(--color-accent-100); }
tr[data-id] { transition: background-color .12s ease; }

/* Casillas del diálogo de vínculos. Con catorce países la lista no entra en
   pantalla: se hace scrollable en vez de estirar el diálogo. */
.check-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 10px 12px;
}
.check-list .radio { padding: 3px 0; font-size: 14px; }

/* Capa de espera del envío (CTI-25). Tapa el formulario entero mientras la
   denuncia viaja, para que nadie apriete Enviar dos veces ni siga escribiendo en
   campos que ya se mandaron. */
.cargando {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(28, 28, 30, .45);
  /* Recibe los clics en lugar del formulario: es lo que hace de barrera. */
  cursor: progress;
}
.cargando-caja {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 28px 36px; box-shadow: var(--shadow-lg); max-width: 320px; text-align: center;
}
.cargando-rueda {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-accent);
  animation: cargando-gira .8s linear infinite;
}
.cargando-texto {
  margin: 0; font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; color: var(--color-text);
}
@keyframes cargando-gira { to { transform: rotate(360deg); } }

/* Sin movimiento la rueda sería un círculo inerte que no dice nada: se
   reemplaza por un latido, que comunica "trabajando" sin girar. */
@media (prefers-reduced-motion: reduce) {
  .cargando-rueda { animation: cargando-late 1.4s ease-in-out infinite; border-top-color: var(--color-accent); }
  @keyframes cargando-late { 50% { opacity: .35; } }
}

/* Paginación del panel. */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px 0 4px; flex-wrap: wrap; }
.pagination .current { font-size: 13px; color: var(--color-neutral-600); }

/* Categorías de denuncia: bloque numerado 01–08 con descripción bajo cada opción.
   Es un radio group y no un <select> porque cada opción necesita su texto de ayuda. */
.cat-block { border: 0; padding: 0; margin: 0 0 14px; }
.cat-block > legend { font-size: 12px; margin-bottom: 6px; color: var(--color-neutral-600); padding: 0; }
.cat-opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.cat-opt:hover { border-color: var(--color-neutral-400); background: var(--color-neutral-100); }
.cat-opt:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.cat-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cat-opt input { margin-top: 3px; flex: none; accent-color: var(--color-accent); }
.cat-num { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-accent); flex: none; min-width: 22px; }
.cat-body { display: block; min-width: 0; }
.cat-name { display: block; font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.cat-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); margin-top: 2px; }

/* Etiqueta solo para lectores de pantalla. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* §4.1 — quiénes pueden usar el canal. Los ítems son frases largas, así que la
   lista respira más que una <ul> por defecto. */
.who-list { max-width: 720px; margin: 0 0 8px; padding-left: 20px; }
.who-list li { margin-bottom: 6px; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }

/* Campos progresivos (CTI-19). Los bloques aparecen a medida que se completan los
   anteriores; la transición evita que el formulario "salte" de golpe.
   Ojo: el ocultamiento lo hace `hidden` desde app.js, no una regla de acá — si
   naciera oculto por CSS, sin JavaScript no se podría denunciar. */
[data-block]:not([hidden]) { animation: bloque-aparece .22s ease-out; }
@keyframes bloque-aparece {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-block]:not([hidden]) { animation: none; }
}

/* Aviso de reCAPTCHA. Va junto al botón de envío y no al pie de la página: es ahí
   donde el visitante decide si manda la denuncia, y es ahí donde tiene que saber
   que el envío pasa por un tercero. Tono discreto a propósito — informa, no compite
   con el botón. */
.recaptcha-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 9px 12px; font-size: 12px; line-height: 1.5;
  color: var(--color-neutral-600); background: var(--color-neutral-100);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.recaptcha-note svg { flex: none; margin-top: 2px; color: var(--color-accent); }
.recaptcha-note a { color: var(--color-accent-700); }

/* ══ Rediseño de la landing al estilo BLC Global ══
   Referencia: el pie y la piel de blcglobal.net, y el diseño aprobado por la
   clienta ("Canal de transparencia e integridad.pdf").

   Los tokens salen todos de design-system.css, que ya está calibrado contra el
   sitio real: Poppins y el rojo #f01400 (--color-accent). Acá no se define ni un
   color de marca nuevo.

   La landing pide `$fullBleed` al layout, así que cada franja ocupa el ancho de
   la ventana y centra su contenido con `.band-inner`. Se hace así y no con el
   truco de `margin: 0 calc(50% - 50vw)` porque ese cálculo usa `vw`, que incluye
   el ancho de la barra de scroll: con la barra visible, cada franja sobresalía
   unos píxeles y aparecía scroll horizontal en toda la página. */

.band-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Encabezado ──
   Sobre el hero va transparente (el logo es blanco y la foto está oscurecida);
   en el resto de las páginas públicas no hay foto detrás, así que va sólido o el
   logo blanco quedaría invisible sobre el fondo claro. */
.site-header { position: relative; z-index: 3; }
.site-header.is-over-hero { position: absolute; inset: 0 0 auto; background: transparent; }
.site-header.is-solid { background: var(--color-neutral-900); }
.site-header-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px;
}
.site-brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; text-decoration: none; min-width: 0; }
.site-brand img { height: 28px; width: auto; flex: none; }
.site-nav { display: flex; gap: 22px; }
.site-nav a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 14px; font-weight: 500; }
.site-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* El conmutador de idioma comparte `.seg`/`.seg-opt` con el panel, donde vive
   sobre fondo claro. Acá se repinta para fondo oscuro sin tocar la regla base. */
.site-header .seg { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
.site-header .seg-opt { color: rgba(255,255,255,.8); }
.site-header .seg-opt:hover { color: #fff; }
.site-header .seg-opt.active { background: var(--color-accent); color: #fff; }

.site-panel-link {
  flex: none; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: #fff; border: 1px solid rgba(255,255,255,.45);
  padding: 7px 14px; border-radius: var(--radius-pill);
  transition: background-color .15s ease, border-color .15s ease;
}
.site-panel-link:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

/* ── Hero ──
   El degradado cumple dos funciones: baja el contraste de la foto para que el
   título blanco se lea (la foto tiene zonas claras) y oscurece la franja de
   arriba, que es donde se apoya el encabezado transparente.

   La foto lleva el nombre del contenido y no uno genérico ("hero-canal") a
   propósito. `asset()` versiona lo que se enlaza desde el HTML, pero esta URL
   vive dentro del CSS y no pasa por ahí: si mañana se reemplaza la imagen
   conservando el nombre, quien ya visitó el canal sigue viendo la vieja. Es el
   mismo problema que documenta `asset()` en helpers.php, y acá la única defensa
   es cambiar el nombre del archivo cuando cambia la foto. */
.hero {
  position: relative;
  padding: 150px 0 88px;
  background:
    linear-gradient(180deg, rgba(10,18,10,.74) 0%, rgba(10,18,10,.34) 45%, rgba(10,18,10,.52) 100%),
    url('../img/hero-brote.jpg') center center / cover no-repeat;
  color: #fff;
}
.hero h1 {
  color: #fff; margin: 0;
  font-size: clamp(34px, 6vw, 62px); font-weight: 700; line-height: 1.05;
  max-width: 14ch; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

/* ── Franja roja "Cuidar lo que somos" ── */
.values { background: var(--color-accent); color: #fff; padding: 56px 0 60px; }
.values h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 20px; }
.values-lead { max-width: 78ch; color: rgba(255,255,255,.94); font-size: 15px; line-height: 1.65; }
.values-lead a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.values-lead a:hover { color: var(--color-accent-100); }

.values-grid {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 20px;
}
.value { text-align: center; }
.value-icon { display: block; margin: 0 auto 10px; width: 56px; height: 56px; object-fit: contain; }
.value-title { font-family: var(--font-heading); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.value-text { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.85); }

/* ── Garantías del canal ──
   Los cinco vienen de la tabla `principles`, que el Comité edita desde el panel.
   Se listan en vertical y no en tarjetas: son frases, no etiquetas, y en una
   grilla de cinco columnas quedaban dos renglones sueltos abajo. */
.guarantees { background: var(--color-surface); padding: 54px 0 56px; }
.guarantees-lead { max-width: 84ch; font-size: 15px; line-height: 1.65; color: var(--color-neutral-700); }
.guarantees .who-list { max-width: 84ch; margin: 0 0 30px; }

.guarantees .principles-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; max-width: 84ch; }
.guarantees .principle {
  display: flex; align-items: flex-start; gap: 14px;
  border: 0; border-radius: 0; padding: 0; background: none;
}
.guarantees .principle-icon { flex: none; width: 32px; height: 32px; object-fit: contain; margin-top: 1px; }
.guarantees .principle-body { min-width: 0; }
.guarantees .principle-title { font-size: 15px; color: var(--color-accent); margin-bottom: 2px; }
.guarantees .principle-text { font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); }

/* ── Formulario ──
   Es la pieza a la que la página entera lleva, así que arranca con el título en
   grande y en rojo, como en el diseño. */
.form-section { background: var(--color-bg); padding: 60px 0 64px; }
.form-title {
  text-align: center; color: var(--color-accent); margin: 0;
  font-size: clamp(36px, 6vw, 62px); font-weight: 700; letter-spacing: -0.02em;
}
.form-subtitle { text-align: center; color: var(--color-neutral-600); font-size: 15px; margin: 6px 0 0; }
/* `.selector-tabs`/`.tab-btn` los comparte el panel: se centran solo acá. */
.form-section .selector-tabs { justify-content: center; border-bottom: 0; margin: 22px 0 24px; gap: 8px; }
.form-section .tab-btn {
  border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
  background: var(--color-surface); margin-bottom: 0;
}
.form-section .tab-btn:hover { border-color: var(--color-neutral-400); }
.form-section .tab-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.form-section [data-panel] > form { max-width: 760px; margin: 0 auto; padding: 26px 28px; }
.form-section [data-panel="follow"] > form { max-width: 520px; }

/* ── FAQs ──
   Cada pregunta es una píldora con el borde de marca, como en el diseño. La
   respuesta cuelga debajo, ya fuera de la píldora. */
.faqs { background: var(--color-surface); padding: 10px 0 64px; }
.faqs h2 { font-size: 20px; color: var(--color-accent); margin-bottom: 18px; }
.faqs .band-inner { max-width: 900px; }
.faqs .faq-item { border-bottom: 0; margin-bottom: 12px; }
.faqs .faq-q {
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 12px 18px; color: var(--color-accent); font-weight: 600;
  transition: background-color .15s ease;
}
.faqs .faq-q:hover { background: var(--color-accent-100); }
.faqs .faq-q .num { color: var(--color-accent); }
.faqs .faq-caret { display: flex; color: var(--color-accent); transition: transform .18s ease; }
.faqs details[open] > .faq-q { background: var(--color-accent-100); }
.faqs .faq-a { padding: 12px 18px 4px 40px; }
@media (prefers-reduced-motion: reduce) { .faqs .faq-caret { transition: none; } }

/* ── Pie ──
   Rojo y no oscuro: es el pie de blcglobal.net, y es también lo que cierra la
   página después de una franja blanca larga (FAQs). */
.site-footer { background: var(--color-accent); color: rgba(255,255,255,.85); font-size: 13px; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer-top,
.site-footer-cols,
.site-footer-bottom { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

.site-footer-top {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding-block: 26px 20px;
}
.site-footer-logo { height: 32px; width: auto; flex: none; }
.site-footer-units { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.site-footer-units li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #fff; white-space: nowrap; }
.site-footer-units img { flex: none; height: 18px; width: auto; display: block; }

.site-footer-cols {
  display: grid; grid-template-columns: 180px 1fr; gap: 28px 40px;
  padding-block: 22px 26px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.site-footer-nav { display: flex; flex-direction: column; gap: 7px; }
.site-footer-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 32px; }
.site-footer-office-country { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.site-footer-office-address { color: rgba(255,255,255,.8); line-height: 1.5; font-size: 12.5px; }

.site-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 14px 18px; border-top: 1px solid rgba(255,255,255,.22);
  font-size: 12px; color: rgba(255,255,255,.8);
}
.site-footer-social { display: inline-flex; padding: 6px; border-radius: var(--radius-pill); }
.site-footer-social:hover { background: rgba(255,255,255,.16); }

/* ── Adaptación a pantallas chicas ── */
@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  /* Las secciones del sitio corporativo salen del encabezado antes que el
     conmutador de idioma o el acceso al panel: son enlaces a otro sitio y acá
     son lo menos importante. Siguen estando en el pie. */
  .site-nav { display: none; }
  .site-header-inner { gap: 12px; padding-inline: 20px; }
  .hero { padding: 120px 0 60px; }
  .band-inner { padding-inline: 20px; }
  .site-footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .values, .guarantees, .form-section { padding-block: 40px; }
  .form-section [data-panel] > form { padding: 20px 18px; }
  .site-footer-top { gap: 18px; }
}

/* ── Edición del template (TPL-PANEL-2 / TPL-PANEL-3) ──
   Una fila por unidad/enlace, con los campos de idioma alineados al lado en vez
   de abajo: quince y veintiún campos parecidos se pierden si se leen como una
   lista plana. `auto-fit`/`minmax` reparte los idiomas disponibles (hoy tres,
   mañana capaz cuatro) sin que la vista tenga que saber cuántos son. */
.tpl-unit-row, .tpl-link-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
}
.tpl-unit-row:last-child, .tpl-link-row:last-child { border-bottom: none; padding-bottom: 0; }
.tpl-unit-row:first-child, .tpl-link-row:first-child { padding-top: 0; }

.tpl-unit-head, .tpl-link-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
/* Los logos de unidad son blancos (van sobre el pie oscuro del sitio): sin este
   fondo serían invisibles en la tarjeta blanca del panel. */
.tpl-unit-logo {
  display: inline-flex; align-items: center; background: #1c1c1e;
  padding: 7px 10px; border-radius: var(--radius-md); flex: none;
}
.tpl-unit-logo img { display: block; height: 18px; width: auto; }
.tpl-unit-name { font-weight: 600; font-size: 14px; }
.tpl-link-text { font-weight: 600; font-size: 14px; }

.tpl-unit-fields, .tpl-link-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px;
}
.tpl-note { font-size: 13px; }
@media (max-width: 560px) {
  .tpl-unit-fields, .tpl-link-fields { grid-template-columns: 1fr; }
}