/* ══════════════════════════════════════════════════════════════════════════
   pibiMemo · hoja de estilo de la web pública
   ──────────────────────────────────────────────────────────────────────────
   Vanilla CSS, sin framework, sin build, sin CDN. Se abre desde file://.

   La landing no usa el degradado azul del shell de aplicación de pibiCo: una
   página que habla de lo que dejas cuando ya no estás no puede tener el mismo
   fondo que un panel de administración. Hereda la tipografía y la escala de la
   guía —Montserrat titulares, Inter cuerpo, JetBrains Mono datos— y cambia el
   lienzo por tinta y ámbar, que es el par que ya usa toda la imagen generada.
   ══════════════════════════════════════════════════════════════════════════ */

/* La paleta, la escala y las tipografías se han ido a `tokens.css`, que
   cargan también las pantallas de la aplicación: era la única forma de que
   la web y el producto no se separaran a la primera vez que alguien tocara
   un hex en un sitio y se olvidara del otro. */

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

/* La cabecera fija mide unos 79 px y `.seccion--ajustada` sólo reserva 64:
   sin este margen de anclaje, cada salto de la espina dejaba el dorsal de la
   sección debajo de la cabecera. */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--font-cuerpo);
  font-size: var(--t-4);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--ambar); color: var(--tinta); }

/* Foco visible: la página se puede recorrer entera con el teclado */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ambar); color: var(--tinta);
  padding: 0.75rem 1.25rem; font-weight: 600; font-size: var(--t-3);
  border-radius: 0 0 8px 0;
}
.salta-al-contenido:focus { left: 0; }

/* ── Rejilla ─────────────────────────────────────────────────────────────── */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* El aire entre secciones se midió en pantalla, no se eligió sobre el papel:
   con 11vw quedaban 280 px muertos entre el árbol y la sección siguiente en
   un portátil de 900 px de alto, y la página parecía rota, no respirada. */
.seccion { padding-block: clamp(3.25rem, 6.5vw, 6rem); position: relative; }
.seccion--ajustada { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.lectura { max-width: var(--lectura); }

/* ── Tipografía ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-titular);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

/* El titular llenaba cinco líneas en un portátil y empujaba los botones fuera
   de pantalla. Un héroe cuya llamada a la acción no se ve no es un héroe. */
h1 { font-size: clamp(2.1rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, var(--t-7)); font-weight: 600; }
h3 { font-size: var(--t-6); font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: var(--t-4); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.entradilla {
  font-size: clamp(var(--t-4), 2.1vw, var(--t-5));
  line-height: 1.55;
  color: var(--hueso-medio);
}

.nota {
  font-size: var(--t-3);
  color: var(--hueso-tenue);
  line-height: 1.6;
}

strong { color: var(--hueso); font-weight: 600; }

/* `.dorsal` vive en `tokens.css`: la aplicación rotula sus zonas igual. */

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(7, 11, 18, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion),
              backdrop-filter var(--transicion);
}
.cabecera.posada {
  background: rgba(7, 11, 18, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--linea);
}

.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-marca);
  font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none; color: var(--hueso);
}
.marca img { width: 22px; height: 22px; }
.marca b { color: var(--ambar); font-weight: 700; }

.menu { display: flex; align-items: center; gap: 0.35rem; }

.menu a {
  font-size: var(--t-3); font-weight: 500;
  color: var(--hueso-medio); text-decoration: none;
  padding: 0.5rem 0.8rem; border-radius: 8px;
  transition: color var(--transicion), background var(--transicion);
}
.menu a:hover { color: var(--hueso); background: rgba(242,237,228,0.06); }
.menu a[aria-current="page"] { color: var(--ambar); }

.menu-movil {
  display: none;
  background: none; border: 1px solid var(--linea-fuerte);
  color: var(--hueso); border-radius: 8px;
  padding: 0.45rem 0.55rem; cursor: pointer;
}

@media (max-width: 880px) {
  .menu {
    /* Anclado a la derecha y con ancho propio, no de borde a borde.
       De 560 a 880 px —una tableta, o una ventana a media pantalla— el panel
       ocupaba los 834 px enteros para pintar seis enlaces de una palabra: un
       telón negro sobre la página en vez de un menú. Cuelga de la hamburguesa,
       que está arriba a la derecha, así que ahí es donde tiene que aparecer.
       Por debajo de 560 px sí va a todo el ancho — ver el bloque de abajo. */
    position: fixed; inset: 56px 0 auto auto;
    width: min(20rem, calc(100vw - 2rem));
    margin-right: clamp(0.75rem, 3vw, 1.5rem);
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: rgba(7,11,18,0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.45);
    padding: 0.5rem;
    transform: translateY(-8px);
    /* `opacity: 0` esconde a la vista pero no al tabulador: sin `visibility`
       los seis enlaces del menú seguían en el orden de foco, invisibles. */
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  }
  .menu.abierto {
    opacity: 1; transform: none; pointer-events: auto;
    visibility: visible; transition-delay: 0s;
  }
  /* Aire de verdad. `pibimemo-componentes.css` aplana los controles a 38 px sin
     relleno vertical para que la barra horizontal cuadre, y eso aquí dejaba
     seis renglones pegados con el texto tocando el filete. Dentro del panel
     mandan estas reglas: alto cómodo de dedo y sangría a los lados para que la
     palabra no arranque en el borde. */
  .menu a,
  .menu > .boton,
  .menu .pibico-lang-btn {
    min-height: 2.75rem;                 /* 44 px, el mínimo táctil */
    padding: 0.7rem 0.85rem;
    font-size: var(--t-4);
    border-radius: 10px;
    justify-content: flex-start;
    width: 100%;
  }
  /* Sin filetes entre renglones: con separación y fondo al pasar por encima ya
     se leen como lista, y seis rayas en un panel de 20 rem lo llenaban de ruido.
     La única raya que queda es la que separa navegar de actuar. */
  .menu-movil { display: block; }
  .menu .boton {
    margin-top: 0.35rem;
    text-align: left;
  }
  .menu > a + .boton { margin-top: 0.6rem; }
  .menu > a:last-of-type { margin-bottom: 0.35rem; border-bottom: 1px solid var(--linea); border-radius: 10px 10px 0 0; padding-bottom: 0.9rem; }
  .menu .pibico-lang-btn { margin-top: 0.35rem; }

}

/* En un teléfono el panel sí va de borde a borde: un cuadro de 20 rem flotando
   sobre 375 px de ancho deja un margen que no sirve para nada y roba sitio a lo
   que se lee. El corte no es el de la hamburguesa —ésa aparece a 880— sino el
   ancho a partir del cual un panel con margen deja de tener sentido. */
@media (max-width: 560px) {
  .menu {
    inset: 56px 0 auto 0;
    width: auto; margin-right: 0;
    border-radius: 0; border-left: 0; border-right: 0;
    box-shadow: none;
    padding: 0.5rem clamp(0.75rem, 4vw, 1.25rem) 1rem;
  }
}

@media (max-width: 880px) {
  /* Aquí vivía `.menu--hoja`, la excepción para /soporte, /guia y /privacidad
     mientras fueron páginas sin menú. Desde el 25/08/2026 las seis páginas
     llevan la cabecera entera —y su hamburguesa—, así que la excepción se ha
     ido con ellas. Lo que enseñó no se tira: una página que se salta el menú
     tiene que pintar igualmente el botón que lo abre, o por debajo de 880 px
     deja «Entrar» y el idioma fuera de la pantalla sin manera de sacarlos. */
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-cuerpo);
  font-size: var(--t-3); font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radio-boton);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform var(--transicion), background var(--transicion),
              border-color var(--transicion), color var(--transicion);
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--ambar); color: #241503; border-color: var(--ambar);
}
.boton--primario:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); }

.boton--fantasma {
  background: transparent; color: var(--hueso);
  border-color: var(--linea-fuerte);
}
.boton--fantasma:hover { border-color: var(--hueso-tenue); background: rgba(242,237,228,0.05); }

.boton--grande { padding: 1rem 2rem; font-size: var(--t-4); }

.fila-botones { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ── Héroe ───────────────────────────────────────────────────────────────── */

.heroe {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}

.heroe__medio {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* El texto cae sobre el tercio vacío de la imagen (izquierda). El velo es
   direccional para no apagar el ámbar de la derecha, que es el sujeto. */
.heroe__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(7,11,18,0.96) 0%, rgba(7,11,18,0.88) 34%,
                            rgba(7,11,18,0.42) 60%, rgba(7,11,18,0.28) 100%),
    linear-gradient(to top, rgba(7,11,18,0.92) 0%, rgba(7,11,18,0) 42%);
}

.heroe__cuerpo { position: relative; z-index: 2; max-width: 36rem; padding-block: 6rem 5rem; }

.heroe h1 { margin-bottom: 1.1rem; }
.heroe h1 em {
  font-style: normal; color: var(--ambar);
  /* El subrayado es una onda de voz, no una línea: el mismo motivo del vídeo */
  background: linear-gradient(transparent 78%, var(--ambar-vidrio) 78%);
}

.heroe__credito {
  position: absolute; right: clamp(1.25rem, 4vw, 2.5rem); bottom: 1.1rem; z-index: 2;
  font-family: var(--font-mono); font-size: var(--t-1);
  /* Iba sobre el vídeo justo donde el velo se aclara y caía a 3,17:1 */
  color: var(--hueso-tenue);
  max-width: 22rem; text-align: right; margin: 0;
}

/* Control de vídeo: quien no quiera movimiento lo para, y se le nota */
.heroe__control {
  position: absolute; left: clamp(1.25rem, 4vw, 2.5rem); bottom: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(7,11,18,0.6); backdrop-filter: blur(10px);
  border: 1px solid var(--linea-fuerte); color: var(--hueso-medio);
  border-radius: var(--radio-boton); padding: 0.45rem 0.9rem;
  font-size: var(--t-1); font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.heroe__control:hover { color: var(--hueso); border-color: var(--hueso-tenue); }

.bajar {
  position: absolute; left: 50%; bottom: 1.25rem; z-index: 2;
  transform: translateX(-50%);
  color: var(--hueso-tenue);
  animation: respirar 2.6s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.45; }
  50%      { transform: translateX(-50%) translateY(7px); opacity: 0.9; }
}

@media (max-width: 880px) {
  .heroe__velo {
    background:
      linear-gradient(180deg, rgba(7,11,18,0.82) 0%, rgba(7,11,18,0.62) 40%,
                              rgba(7,11,18,0.95) 100%);
  }
  .heroe__cuerpo { max-width: none; padding-block: 7rem 7rem; }
  .heroe__credito { display: none; }
  .bajar { display: none; }
}

/* ── Espina dorsal: la onda de voz que es también la navegación ──────────── */

/* Estaba centrada abajo y se comía el texto: en la demo tapaba literalmente la
   última línea de la conversación. Una barra fija en el centro inferior choca
   con cualquier contenido que llegue al borde, así que se va al canto derecho,
   donde sólo hay margen. La onda gira: las barras varían de ancho, no de alto. */
.espina {
  position: fixed; z-index: 40;
  right: 0.9rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 0.55rem 0.4rem;
  background: rgba(7,11,18,0.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linea);
  border-radius: 999px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.espina.visible {
  opacity: 1; pointer-events: auto;
  visibility: visible; transition-delay: 0s;
}

.espina__nodo {
  position: relative;
  background: none; border: 0; padding: 0.3rem 0.45rem;
  cursor: pointer; line-height: 0;
  display: flex; justify-content: flex-end; width: 100%;
}
.espina__barra {
  display: block; height: 3px; border-radius: 2px;
  background: var(--hueso-tenue);
  transition: width var(--transicion), background var(--transicion);
}
.espina__nodo:hover .espina__barra { background: var(--hueso); }
.espina__nodo[aria-current="true"] .espina__barra { background: var(--ambar); }

.espina__etiqueta {
  position: absolute; right: calc(100% + 0.55rem); top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-1);
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tinta-3); color: var(--hueso);
  border: 1px solid var(--linea);
  padding: 0.35rem 0.6rem; border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.espina__nodo:hover .espina__etiqueta,
.espina__nodo:focus-visible .espina__etiqueta {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

@media (max-width: 880px) { .espina { display: none; } }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
/* La guía de pibiCo es explícita: una tarjeta nunca lleva filete decorativo.
   Se apoya en fondo, sombra y redondeo. El ámbar entra sólo al enfocar. */

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

.tarjeta {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
  transition: transform var(--transicion), border-color var(--transicion),
              background var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--linea-fuerte);
  background: var(--tinta-3);
}
.tarjeta h3 { font-size: var(--t-4); margin-bottom: 0.5rem; }
.tarjeta p  { font-size: var(--t-3); color: var(--hueso-medio); margin: 0; }

.tarjeta__icono {
  width: 40px; height: 40px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--ambar-vidrio);
  color: var(--ambar);
}
.tarjeta__icono svg { width: 21px; height: 21px; }

/* ── Figuras ─────────────────────────────────────────────────────────────── */

figure { margin: 0; }

.figura img {
  width: 100%; height: auto;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
}
.figura figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--hueso-tenue);
  margin-top: 0.7rem;
  line-height: 1.5;
}

/* Dos columnas: texto y figura, alternables */
/* Las dos columnas arrancan juntas, igual que los titulares de las tarjetas.
   Centrado, la figura flotaba entre 34 y 130px por debajo del titular —y por
   una cantidad distinta en cada sección, que es lo que se nota—: la página
   parecía cuatro maquetaciones en vez de una. */
.dueto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* La excepción, con nombre y no por descuido. Cuando la figura es un retrato
   más alto que su texto —la bóveda, 1050x1400—, arrancar arriba deja al texto
   colgando y un palmo de vacío debajo del botón. Ahí el centrado equilibra, y
   por eso es una clase que se pone a mano y no una regla que adivine. */
.dueto--centrado { align-items: center; }
.dueto--invertido .dueto__texto { order: 2; }
@media (max-width: 880px) {
  .dueto { grid-template-columns: 1fr; gap: 2rem; }
  .dueto--invertido .dueto__texto { order: 0; }
}

/* `.anima` vive en `tokens.css`; la aplicación la usa más corta. */

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--linea);
  padding-block: 3.5rem 2.5rem;
  background: var(--tinta-2);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 880px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}

.pie h4 {
  font-family: var(--font-mono);
  font-size: var(--t-1); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hueso-tenue);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.6rem; }
.pie li a {
  font-size: var(--t-3); color: var(--hueso-medio);
  text-decoration: none;
  transition: color var(--transicion);
}
.pie li a:hover { color: var(--ambar); }

.pie__legal {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  align-items: center;
  border-top: 1px solid var(--linea);
  padding-top: 1.75rem;
  font-size: var(--t-2);
  color: var(--hueso-tenue);
}
.pie__legal a { color: var(--hueso-tenue); text-decoration: none; }
.pie__legal a:hover { color: var(--hueso); }

/* ── Aviso honesto sobre los medios generados ────────────────────────────── */

.aviso-medios {
  display: flex; gap: 0.9rem; align-items: flex-start;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tinta-2);
  padding: 1.1rem 1.3rem;
  font-size: var(--t-2);
  color: var(--hueso-tenue);
  line-height: 1.6;
}
.aviso-medios svg { flex: 0 0 auto; color: var(--ambar); margin-top: 2px; }

/* ── Toast (nunca alert/confirm: lo prohíbe la guía) ─────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 5.5rem; z-index: 200;
  transform: translateX(-50%) translateY(14px);
  background: var(--tinta-3); color: var(--hueso);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  font-size: var(--t-3); font-weight: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
  max-width: calc(100vw - 2.5rem);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error { border-color: rgba(239,68,68,0.5); }
.toast--bien  { border-color: rgba(240,163,60,0.5); }

/* ── Panel lateral (la guía prohíbe modales: se desliza desde la derecha) ── */

.telon {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,6,11,0.72);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
.telon.abierto { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(30rem, 100vw);
  background: var(--tinta-2);
  border-left: 1px solid var(--linea);
  transform: translateX(100%);
  /* Sin esto el panel cerrado conservaba seis controles enfocables dentro de
     un `aria-hidden="true"`, que es justo la combinación que Chrome denuncia. */
  visibility: hidden;
  transition: transform 380ms cubic-bezier(0.22,0.61,0.36,1),
              visibility 0s linear 380ms;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.panel.abierto { transform: none; visibility: visible; transition-delay: 0s; }

.panel__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0;
  background: var(--tinta-2);
  z-index: 2;
}
.panel__cabeza h2 { margin: 0; font-size: var(--t-5); }
.panel__cerrar {
  background: none; border: 1px solid var(--linea);
  color: var(--hueso-medio);
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; display: grid; place-items: center;
  transition: color var(--transicion), border-color var(--transicion);
}
.panel__cerrar:hover { color: var(--hueso); border-color: var(--hueso-tenue); }
.panel__cuerpo { padding: 1.6rem; }

.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block;
  font-size: var(--t-1); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hueso-tenue);
  margin-bottom: 0.45rem;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  background: var(--tinta);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
  color: var(--hueso);
  font-family: var(--font-cuerpo);
  font-size: var(--t-3);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transicion);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--ambar);
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
/* ── Rejilla de intereses ────────────────────────────────────────────────
   Al portar el formulario a la web nueva vinieron las clases de la hoja
   antigua pero no la hoja, así que estas casillas se pintaban en crudo: el
   único trozo del panel sin estilar. Aquí van en el lenguaje de esta hoja —
   la casilla entera es la superficie pulsable, no un cuadrito de 13 px al
   lado de un texto. */

.interests-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 400px) { .interests-grid { grid-template-columns: 1fr; } }

.interest-check {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  background: var(--tinta);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
  font-size: var(--t-3);
  line-height: 1.25;
  color: var(--hueso-medio);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion),
              background var(--transicion);
}
.interest-check:hover { border-color: var(--hueso-tenue); color: var(--hueso); }

.interest-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--borde-control);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--transicion), border-color var(--transicion);
}
.interest-check input[type="checkbox"]::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 160ms cubic-bezier(0.22,0.61,0.36,1);
}
.interest-check input[type="checkbox"]:checked {
  background: var(--ambar); border-color: var(--ambar);
}
.interest-check input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.interest-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* La casilla marcada tiñe la tarjeta entera: se ve de un vistazo qué eligió */
.interest-check:has(input:checked) {
  border-color: rgba(240,163,60,0.5);
  background: var(--ambar-vidrio);
  color: var(--hueso);
}

.campo--error input, .campo--error textarea { border-color: #ef4444; }
.campo__error {
  display: none;
  font-size: var(--t-2); color: #f87171; margin-top: 0.35rem;
}
.campo--error .campo__error { display: block; }

/* ── Utilidades ──────────────────────────────────────────────────────────── */

.centrado { text-align: center; }
.centrado .dorsal { justify-content: center; }
.centrado .lectura { margin-inline: auto; }
.oculto { display: none !important; }

.solo-lector {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.separador { height: 1px; background: var(--linea); border: 0; margin: 0; }

/* `.interest-check` es un <label>, así que heredaba el `text-transform:
   uppercase` de `.campo label` y los intereses salían gritando en mayúsculas
   dentro de un formulario que en todo lo demás habla en voz baja. */
.campo .interest-check {
  /* `.campo label` (0,1,1) gana a `.interest-check` (0,1,0) y le imponía
     `display: block`, así que la casilla se apilaba encima del rótulo en vez
     de ponerse a su lado. Hay que repetir el display con más especificidad. */
  display: flex; align-items: center; gap: 0.55rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--hueso-medio);
  margin-bottom: 0;
}
.campo .interest-check:has(input:checked) { color: var(--hueso); }

/* ── El compás de tres columnas ──────────────────────────────────────────────
   Las secciones de sólo texto ocupaban la mitad izquierda del lienzo y dejaban
   la otra mitad vacía: no era aire, era un hueco. Aquí el dorsal se va al
   margen —y se queda pegado mientras dura la sección, que además dice dónde
   estás— y la columna de lectura se corre al centro óptico. Lo que sobra a la
   derecha deja de sobrar en cuanto hay una apostilla que poner; y cuando no la
   hay, la página sigue leyéndose compuesta y no descolgada.

   La medida de lectura no cambia: 62 caracteres siguen siendo 62. Lo que
   cambia es dónde empiezan. */
.seccion--compas > .envoltura {
  display: grid;
  /* El raíl de la izquierda sólo tiene que sostener un dorsal en mono: darle
     tres partes le robaba caracteres a la lectura, que bajó a 55 y se notaba.
     2,2 / 7,5 / 3 deja la columna de lectura en sus 62 y la apostilla con
     sitio para una cifra grande. */
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 7.5fr) minmax(0, 3fr);
  column-gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
}
.seccion--compas > .envoltura > * { grid-column: 2; }
.seccion--compas > .envoltura > .dorsal {
  grid-column: 1; grid-row: 1;
  position: sticky; top: 5.5rem;
  margin-bottom: 0;
  align-self: start;
}
/* Lo que es ancho de verdad usa las dos columnas: una rejilla de tarjetas
   encajada en la del medio sería más estrecha que antes, que es lo contrario
   de lo que se venía a arreglar. */
.seccion--compas > .envoltura > .rejilla,
.seccion--compas > .envoltura > .pasos,
.seccion--compas > .envoltura > .planes,
.seccion--compas > .envoltura > .dueto,
.seccion--compas > .envoltura > .faq,
.seccion--compas > .envoltura > figure,
.seccion--compas > .envoltura > .tabla-envoltura,
/* Las piezas de autor —la consola de la demostración, el árbol de decisiones,
   el telar, el spot, las objeciones, la tabla de consumo— son justo lo que hay
   que enseñar ancho: encajarlas en la columna de lectura las encogía y dejaba
   el raíl derecho vacío al lado de la única cosa que merecía ocuparlo. */
.seccion--compas > .envoltura > .interrogatorio,
.seccion--compas > .envoltura > .arbol,
.seccion--compas > .envoltura > .telar,
.seccion--compas > .envoltura > .contradiccion,
.seccion--compas > .envoltura > .spot,
.seccion--compas > .envoltura > .objeciones,
.seccion--compas > .envoltura > .cifras,
.seccion--compas > .envoltura > .tiendas,
.seccion--compas > .envoltura > .plan,
.seccion--compas > .envoltura > .aviso-medios,
.seccion--compas > .envoltura > .nota { grid-column: 2 / -1; }

/* La apostilla del margen: una cifra, una cita o un aviso corto. No es
   decoración de relleno —si no tiene nada que decir, no se pone—.

   El selector va con la sección delante a propósito: `.seccion--compas >
   .envoltura > *` manda a todo el mundo a la columna del medio con más
   especificidad que un `.margen` suelto, y la apostilla se colaba debajo del
   texto en vez de ponerse al lado. */
.seccion--compas > .envoltura > .margen { grid-column: 3; }
.margen {
  border-left: 1px solid var(--linea);
  padding-left: 1.15rem;
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--hueso-tenue);
}
.margen strong { color: var(--hueso); font-weight: 600; }
.margen__cifra {
  display: block;
  font-family: var(--font-titular);
  font-size: clamp(var(--t-6), 4.5vw, var(--t-7));
  font-weight: 700;
  line-height: 1;
  color: var(--ambar);
  margin-bottom: 0.5rem;
}
.margen__rotulo {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-texto);
  margin-bottom: 0.6rem;
}

@media (max-width: 980px) {
  .seccion--compas > .envoltura { display: block; }
  .seccion--compas > .envoltura > .dorsal { position: static; margin-bottom: 1.6rem; }
  .margen {
    border-left: 0; border-top: 1px solid var(--linea);
    padding-left: 0; padding-top: 1.1rem; margin-top: 2rem;
  }
}

/* ── Los pasos, en fila ──────────────────────────────────────────────────────
   Tres pasos apilados son tres pantallas de móvil de alto en un escritorio de
   1440: se lee uno, se pierde el hilo, y el que mira ya está haciendo scroll.
   En fila se ven los tres a la vez, que es lo que un proceso de tres pasos
   tiene que enseñar —que son tres y que se acaban—. El hilo horizontal los
   cose; en móvil vuelve el hilo vertical de siempre. */
.pasos--fila { display: grid; gap: 0; margin-top: 2.5rem; }
@media (min-width: 981px) {
  .pasos--fila { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 3vw, 2.75rem); }
  .pasos--fila li {
    display: block; padding: 1.9rem 0 0; border-top: 1px solid var(--linea);
    border-bottom: 0; position: relative;
  }
  .pasos--fila li:last-child { border-bottom: 0; }
  .pasos--fila .paso__n {
    display: block; padding: 0; margin-bottom: 0.9rem;
    font-size: var(--t-4); letter-spacing: 0.12em;
  }
  .pasos--fila .paso__t { margin-bottom: 0.5rem; }
  /* El hilo que los cose: el mismo trazo del borde, en ámbar, sobre el paso
     que se está mirando. */
  .pasos--fila li::before {
    content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
    background: var(--ambar); transition: width 0.5s ease;
  }
  .pasos--fila li:hover::before { width: 100%; }
}


/* El titular no cabe en la medida de lectura: un h1 de cuatro renglones en una
   columna estrecha no es una portada, es una nota. Con `--ancha` el bloque de
   apertura cruza las dos columnas de la derecha y la apostilla baja a la fila
   siguiente, alineada al margen. */
.seccion--compas > .envoltura > .lectura--ancha {
  grid-column: 2 / -1;
  /* `.lectura` capa a 62ch: sin soltarlo, el bloque cruza las dos columnas y
     el titular se sigue partiendo dentro de una caja de 626 px. La medida se
     mantiene donde importa, que es en los párrafos. */
  max-width: none;
}
.seccion--compas > .envoltura > .lectura--ancha > p { max-width: var(--lectura); }

/* Cuatro tarjetas en tres columnas dejan una huérfana en la segunda fila. Dos
   por dos se lee como un bloque; tres y una, como un descuido. */
@media (min-width: 981px) {
  .rejilla--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}