/* Estilo compartido de la portada y del panel de Automaton Nebula. Sin dependencias y en un solo
   fichero, como antes; lo que cambia el 6 de septiembre de 2026 es la cara: papel y tinta en vez de
   la bóveda oscura, con un rojo de sello para lo que hay que decidir.

   La cara la decide el producto y no el ajuste del sistema de quien entra: `color-scheme: light`
   fija también lo que dibuja el navegador por su cuenta —campos, desplegables, barras de
   desplazamiento, casillas—, que sin esto se pintan en oscuro cuando el sistema lo está y dejan
   trozos negros dentro de una tarjeta de papel. Es la misma regla de antes con el signo cambiado.

   Cuatro tonos y no dos, porque hacen falta cuatro cosas distintas: `--papel` es la página,
   `--alzado` es lo que se levanta sobre ella (una tarjeta), `--hundido` es lo que se mete dentro de
   una tarjeta (un bloque de código, un recorte) y `--linea` es lo que las separa. Con dos tonos, un
   bloque de código dentro de una tarjeta acaba del mismo color que la tarjeta y deja de leerse. */

/* Las dos fuentes van servidas desde aquí y no traídas de Google. Traerlas de fuera contaría a
   Google quién entra en su memoria y desde dónde, que es justo lo que este producto promete que no
   pasa; y además las pantallas de permiso van con `default-src 'none'`, donde una hoja de fuera se
   bloquea sin dar error y la página se queda con la fuente del sistema sin que nadie se entere.
   Cada archivo trae su `unicode-range`: el navegador se baja el trozo del alfabeto que va a pintar
   y ni toca los demás, así que quien entra en español no descarga el cirílico. Las dos son fuentes
   variables, así que un solo archivo por alfabeto cubre todos los pesos.
   Licencias, al lado de los archivos: `fuentes/LICENCIA-IBM-Plex.txt` y `LICENCIA-Newsreader.txt`. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fuentes/plex-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Newsreader; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/fuentes/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Newsreader; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/fuentes/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Newsreader; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/fuentes/newsreader-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  color-scheme: light;
  --tinta: #1c1916; --acero: #6a645b; --linea: #d9d0c2;
  --papel: #f1ece3; --alzado: #fffdfa; --hundido: #e7dfd2;
  --acento: #c23020; --acento-tinta: #ffffff; --ok: #2a7a4a;
  /* El mismo rojo en texto sobre papel se queda en 4,41 a 1 y el mínimo legible es 4,5. Este otro,
     un punto más oscuro, sube a 5,55 y al lado del relleno no se distingue: el rojo de rellenar y
     el rojo de escribir no tienen por qué ser el mismo número para parecer el mismo color. */
  --acento-texto: #a82818;
  --curva: cubic-bezier(.2, 0, 0, 1);
  /* Nombres de antes, apuntados al color nuevo. No son adorno: si mañana queda una regla, un guion
     o una prueba pidiendo `--fondo`, sigue pintando lo que toca en vez de quedarse en blanco. */
  --fondo: var(--papel); --tarjeta: var(--alzado); --panel: var(--hundido);
  --gris: var(--acero); --aviso: var(--acento-texto);
}
* { box-sizing: border-box; }
/* `text-size-adjust` apagado: en iPhone, al girar a horizontal, Safari agranda por su cuenta el
   texto de los bloques anchos y deja la pantalla con tres tamaños de letra distintos. */
html {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px;
  color: var(--tinta); background: var(--papel); line-height: 1.55;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Un hecho puede traer una dirección web o una referencia sin espacios más ancha que un teléfono.
   Sin esto, esa sola palabra empuja la página entera y aparece el desplazamiento lateral, que es
   el defecto de móvil que más se nota y del que nadie sabe decir de dónde sale. */
body { margin: 0; background: var(--papel); overflow-wrap: break-word; }
/* El recuadro azul que pinta el móvil al tocar cualquier cosa, cambiado por uno de la casa. */
* { -webkit-tap-highlight-color: rgb(28 25 22 / .08); }

/* Los titulares en la serif y con el interletrado cerrado; el texto corrido en la de palo. La
   diferencia entre los dos no es decorativa: en una pantalla llena de hechos, lo que separa un
   título de un dato es la forma de la letra antes que el tamaño. */
/* Los titulares crecen con la pantalla en vez de dar un salto en un punto concreto: `clamp` los deja
   en 2 rem en un teléfono y en 3,2 rem en un monitor, pasando por todo lo de en medio. */
h1, h2, h3 { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-weight: 500; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; margin: 1.2rem 0 .8rem; overflow-wrap: break-word; }
h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); line-height: 1.2; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.22rem; line-height: 1.3; margin: 1.3rem 0 .4rem; }
p { margin: .6rem 0; }
.destacado { font-size: 1.15rem; }
/* La frase de apoyo del titular: gris acero y sin cursiva. En cursiva parecía una cita de otro;
   es la misma voz, dicha más bajo. */
.frase { color: var(--acero); font-size: 1.05rem; max-width: 30rem; margin-top: -.2rem; }
.nota { color: var(--acero); font-size: .92rem; }
.aviso { color: var(--acento-texto); }
.ok { color: var(--ok); }
a { color: var(--acento-texto); text-underline-offset: .15em; }
a:hover { color: var(--tinta); }
ul.pasos, ul.planes { padding-left: 1.2rem; }
ul.pasos li, ul.planes li { margin: .4rem 0; }

/* El ancho del panel es el del monitor, no el de un teléfono estirado. 72rem son unos 1150 puntos:
   caben las dos columnas de ajustes y la lista de clientes al lado de los hechos, y sigue habiendo
   margen a los lados para que no parezca que el texto se cae por el borde. Lo que NO crece con el
   ancho es la medida de lectura: un párrafo de mil puntos de ancho se lee mal aunque quepa, así que
   los párrafos de dentro de las tarjetas se quedan en unos setenta caracteres, más abajo.

   El hueco de los lados sube al del recorte de la pantalla cuando lo hay: en un móvil con muesca,
   girado, el sistema se come una franja lateral y el texto acaba debajo del borde redondeado. */
/* El hueco de abajo cuenta con lo que hay pegado a la pantalla: la barra de lo que ve la IA y, si
   está abierto, el recorrido. Las dos alturas las mide el panel al pintar, porque un número escrito
   a mano deja de ser verdad en cuanto un texto ocupa dos renglones y entonces la última sección se
   queda debajo de la barra sin que nadie lo note. */
.envoltura {
  max-width: 72rem; margin: 0 auto;
  padding: 2rem max(1.25rem, env(safe-area-inset-right)) 4rem max(1.25rem, env(safe-area-inset-left));
  padding-bottom: calc(2.5rem + var(--alto-barra, 0px) + var(--alto-recorrido, 0px) + env(safe-area-inset-bottom));
}
/* La portada es prosa, y la prosa tiene su propia medida. Aquí lo ancho no se gana estirando el
   renglón, sino poniendo las dos secciones del final una al lado de otra. */
.lectura { max-width: 64rem; }
.tarjeta p, .tarjeta li, .tarjeta label, .lectura > p, .lectura > .frase { max-width: 72ch; }

/* La marca, en versalitas pequeñas y muy separadas. Ocupa poco y no compite con el titular, que en
   esta pantalla es el nombre del cliente: lo que la persona viene a mirar. */
/* La cabecera va pegada arriba y baja contigo. En una página legal de doce apartados, o en las
   preguntas frecuentes, la salida queda a un pantallazo de distancia desde cualquier punto; antes
   había que subir hasta el principio para volver.
   La banda es de ancho completo y el contenido va dentro, en `.cabecera-dentro`: con el `max-width`
   puesto en la banda, al desplazar se veía el texto de la página pasando por los lados de la
   cabecera, que es lo que hace que una cabecera pegada parezca rota. */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabecera-dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 64rem; margin: 0 auto; padding: 1rem max(1.25rem, env(safe-area-inset-right)) .5rem max(1.25rem, env(safe-area-inset-left)); flex-wrap: wrap; }
/* El escudo de la casa y, al lado, solo «Nebula»: es como se presenta Scorpio, y las tres cosas de
   Colony tienen que reconocerse entre ellas de un vistazo. El nombre entero no desaparece, se va
   abajo, al pie, donde dice de quién es esto. */
.marca { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--tinta); }
/* El mismo hueco de siempre, 1,6 rem de alto. El escudo es un poco más alto que ancho (96×104), así
   que se fija el ALTO y el ancho sale solo: con los dos puestos al mismo número salía aplastado. */
.marca img { height: 1.6rem; width: auto; display: block; flex: none; }
/* El escudo no se selecciona ni se arrastra. Al marcar el nombre con el ratón —o al pulsarlo dos
   veces— el dibujo se quedaba resaltado en azul junto a la palabra, que es la marca de la casa con
   una mancha encima. Y arrastrarlo sacaba la imagen del navegador sin querer. */
.marca img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; }
.marca:hover { color: var(--acento-texto); }
/* El botón de volver: contorno gris para que no compita con «Entrar al panel», que es la acción de
   verdad. La flecha va en SVG y no como carácter «←»: la fuente de la casa no trae ese signo en su
   trozo latino, así que caía a la letra del sistema y se veía de otra forma en cada aparato. */
.atras .flecha { width: 1em; height: 1em; flex: none; margin-inline-start: -.15em; }
h1.marca-titulo { font-size: .8rem; margin: 0; font-family: inherit; letter-spacing: .18em; }
.acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cabecera-panel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linea); }
/* El desplegable de idioma es un `select`, y los `select` van al 100 % porque están pensados para
   los formularios. En la cabecera eso le hacía ocupar la fila entera; aquí se le da forma de
   pastilla, como a todo lo demás de esa fila. */
.cabecera-panel .acciones select { width: auto; min-height: 2.75rem; border-radius: 999px; padding: 0 1rem; color: var(--acero); }
.cabecera-panel .acciones select:hover { color: var(--tinta); border-color: var(--acero); }
.pie { max-width: 64rem; margin: 0 auto; padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--linea); color: var(--acero); font-size: .9rem; }

/* El pie de la web, con la misma estructura que el de Colony: cuatro columnas y un colofón. En un
   teléfono cae a una sola columna sin más, que es lo que hace `auto-fit` con un mínimo: no hace
   falta una regla de móvil aparte para esto. */
.pie-web { border-top: 1px solid var(--linea); background: var(--alzado); margin-top: 3rem; }
/* Las columnas se dicen a mano en tres tramos y no con `auto-fit`, porque con `auto-fit` el número
   de columnas depende del ancho disponible y la de la marca, que vale por dos, unas veces cabía en
   la primera fila y otras empujaba la de contacto a una segunda con medio pie en blanco al lado. */
.pie-rejilla {
  max-width: 64rem; margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr);
  padding: 2.5rem max(1.25rem, env(safe-area-inset-right)) 2rem max(1.25rem, env(safe-area-inset-left));
}
@media (min-width: 34rem) { .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Y en un monitor, las cuatro en fila con la marca al doble: lleva el lema y una frase entera, y en
   una columna del mismo ancho que las de enlaces esa frase sale en ocho renglones. */
@media (min-width: 60rem) { .pie-rejilla { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.pie-rotulo { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); margin: 0 0 .7rem; }
.pie-col p + .pie-rotulo { margin-top: 1.6rem; }
.pie-lema { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-size: 1.15rem; line-height: 1.25; margin: 0 0 .6rem; max-width: 24ch; }
.pie-web .nota { margin: 0; max-width: 44ch; }
.pie-lista { list-style: none; padding: 0; margin: 0; }
.pie-lista li { padding: .2rem 0; }
.enlace-pie { color: var(--acero); text-decoration: none; font-size: .92rem; }
.enlace-pie:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: .15em; }
/* Los perfiles van separados por un punto que dibuja la hoja, no por un carácter escrito: así el
   lector de pantalla lee tres enlaces y no «GitHub punto X punto Farcaster». */
.pie-perfiles { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.pie-perfiles a + a { position: relative; }
.pie-perfiles a + a::before { content: "·"; position: absolute; left: -.55rem; color: var(--linea); }
.pie-colofon { border-top: 1px solid var(--linea); }
.pie-colofon p { max-width: 64rem; margin: 0 auto; padding: 1rem max(1.25rem, env(safe-area-inset-right)) 2rem max(1.25rem, env(safe-area-inset-left)); }

/* Las preguntas frecuentes: cada una con su hueco, y la pregunta en la serif para que se distinga
   de la respuesta de un vistazo al recorrer la página buscando la propia. */
.pregunta { padding: 1.4rem 0; border-bottom: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: none; }
.pregunta h2 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.pregunta p { margin: 0; max-width: 72ch; }

/* Los textos legales no llevan estilo propio. Lo llevaron: número colgado del margen, renglón más
   corto y más aire entre líneas, con el argumento de que una lectura larga se sostiene así. El
   argumento no era falso, pero el resultado sí: eran las únicas cinco páginas de la web que se
   leían distintas de las demás, y una política de privacidad que parece de otro sitio es
   exactamente lo que no conviene en la página donde se pide confianza. Se pintan con las mismas
   reglas que «Quiénes somos» y las preguntas frecuentes. */

/* La página de precios es la única sección que no es prosa: pide más ancho que el renglón de
   lectura, porque las cuatro tarjetas del ámbito personal no caben en 64rem. Los párrafos de dentro
   siguen acotados por la regla de `.lectura > p`, así que la caja crece y el renglón no. */
.envoltura.ancha { max-width: 76rem; }

/* Las dos pestañas (Personal y Business) SIN JAVASCRIPT: dos botones de radio escondidos y sus
   etiquetas. Estas páginas van con `script-src` cerrado, así que unas pestañas de guion se
   quedarían mudas y la mitad de los planes no se vería nunca. Aquí el cambio lo hace el navegador,
   y de paso se recorren con las flechas del teclado. */
.ambitos { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.6rem 0 0; }
/* El radio no se puede quitar con `display: none`: dejaría de recibir el foco y las pestañas no se
   podrían recorrer con el teclado. Se aparta de la vista sin sacarlo del orden de tabulación. */
.ambito-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* `margin: 0` por lo mismo que en `.elegir-plan`: la regla general de las etiquetas del panel le
   metía casi un renglón por arriba y otro poco por abajo a cada pestaña. */
.pestana {
  margin: 0; font-size: .95rem; font-weight: 500; min-height: 2.75rem; padding: .5rem 1.4rem;
  border-radius: 999px; border: 1px solid var(--linea); color: var(--acero); background: none;
  display: inline-flex; align-items: center; cursor: pointer; touch-action: manipulation;
  transition: background .18s var(--curva), color .18s var(--curva), border-color .18s var(--curva);
}
.pestana:hover { color: var(--tinta); border-color: var(--acero); }
.ambito-radio:checked + .pestana { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600; }
/* El anillo de foco va en la etiqueta, porque el radio no se ve. Sin esto, quien navega con el
   teclado no sabría en qué pestaña está. */
.ambito-radio:focus-visible + .pestana { outline: 2px solid var(--acento); outline-offset: 3px; }
/* Cada grupo ocupa una fila entera debajo de las pestañas, y solo se enseña el marcado. Si la hoja
   de estilos no llegara a cargarse, se verían los dos seguidos: no se pierde ningún plan. */
.ambitos > .ambito { flex: 1 0 100%; display: none; }
#ambito-personal:checked ~ .ambito-personal, #ambito-negocio:checked ~ .ambito-negocio { display: block; }

/* Texto que solo existe para quien no ve la pantalla. Se aparta con `clip-path` y no con
   `display: none` ni `visibility: hidden`, que lo sacarían también del lector. */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Las tarjetas: una por fila en un teléfono, dos en tableta y cuatro en monitor.

   Va en flexbox y no en rejilla, y el motivo se midió: con `repeat(auto-fit, minmax(15rem, 19rem))`
   el navegador cuenta las columnas con el MÁXIMO de la pista, no con el mínimo, así que en un
   monitor de 1280 salían tres columnas y la cuarta tarjeta se quedaba sola debajo. Con flexbox las
   tarjetas se reparten por cuántas hay, que es lo que hace falta cuando una pestaña trae cuatro y la
   otra dos: las dos de negocio salen centradas y con su tamaño, no estiradas a media pantalla.

   El tope de 19rem es lo que impide que dos tarjetas se coman el ancho entero; el 40 % de la banda
   de en medio es lo que fuerza dos por fila, porque con el mínimo de 15rem entraban tres y volvía a
   quedarse una suelta. Una tarjeta sola debajo de las otras parece un descarte. */
.precios { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1rem; margin: 1.4rem 0 0; }
/* La envoltura es la que hace de tarjeta dentro de la fila, y va POSICIONADA para que el radio que
   lleva dentro se apoye en ella y no en la fila entera. Sin envoltura, los seis radios se apilaban
   en la esquina superior izquierda de la fila: el foco del teclado se iba allí mientras el anillo
   se pintaba en la tarjeta, que en pantalla estrecha estaba más de mil píxeles por debajo. Va en
   columna para que la tarjeta siga estirándose hasta el fondo y los botones queden a la misma
   altura. */
.precios > .plan-envoltura { position: relative; display: flex; flex-direction: column; flex: 1 1 15rem; max-width: 19rem; }
.precios > .plan-envoltura > .precio-tarjeta { flex: 1 1 auto; max-width: none; }
/* Elegir un plan: un radio escondido delante de cada tarjeta y una etiqueta que la tapa entera, con
   el mismo truco que las pestañas y por el mismo motivo —aquí no se ejecuta JavaScript—. El radio
   sale del flujo, así que no ocupa sitio en la fila de tarjetas; se aparta con `position` y no con
   `display: none`, que le quitaría el foco del teclado. */
.plan-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* La etiqueta cubre la tarjeta para que se pueda pulsar en cualquier punto. Va por debajo del botón
   de comprar, que tiene que seguir siendo un enlace: si quedara tapado, pulsar «Empezar» elegiría el
   plan en vez de llevar al panel, que es lo contrario de lo que dice el botón. */
/* Dos cosas que parecen de adorno y no lo son, las dos cazadas usando la página:

   `margin: 0` porque más abajo hay una regla general para los formularios del panel,
   `label { margin: .9rem 0 .3rem }`, que también le cae a esta. Un margen en algo colocado con
   `inset: 0` NO lo desplaza: lo encoge. Con ella puesta, la etiqueta empezaba trece puntos por
   debajo del borde de la tarjeta y acababa cinco por encima, así que había una franja muerta arriba
   y otra abajo donde pulsar no elegía nada.

   Y sin `border-radius`, porque la etiqueta no se ve y redondearla no pinta nada, pero sí recorta
   dónde recoge el clic: dejaba las cuatro esquinas muertas. */
.elegir-plan { position: absolute; inset: 0; margin: 0; z-index: 1; cursor: pointer; }
.precio-tarjeta > .boton { position: relative; z-index: 2; }
/* Lo que se ve al elegir: el contorno en rojo, doblado con un anillo del mismo color, y un halo
   suave alrededor. Es contorno y halo, y no un fondo distinto, porque el fondo cambia el contraste
   de las cifras de dentro, y estas tarjetas están para comparar cifras de una a otra.

   El anillo se pinta con `box-shadow` y no engordando el borde: un borde de dos puntos movería la
   caja un punto por cada lado, y la tarjeta daría un salto al elegirla.

   La marca es UNA. Antes el plan sugerido llevaba además un contorno fijo, y al pulsar otra tarjeta
   quedaban dos marcadas: parecía que el borde no se movía. Ahora el sugerido solo arranca elegido. */
.precio-tarjeta:hover { border-color: var(--acero); }
.plan-radio:checked + .precio-tarjeta { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 0 0 5px rgb(194 48 32 / .15); }
.plan-radio:checked + .precio-tarjeta:hover { border-color: var(--acento); }
/* Y el anillo de foco en la tarjeta, porque el radio no se ve: sin esto, quien recorre los planes
   con las flechas del teclado no sabría en cuál está. */
.plan-radio:focus-visible + .precio-tarjeta { outline: 2px solid var(--acento); outline-offset: 4px; }
@media (max-width: 39.99rem) { .precios > .plan-envoltura { flex-basis: 100%; max-width: none; } }
@media (min-width: 40rem) and (max-width: 71.99rem) { .precios > .plan-envoltura { flex-basis: 40%; } }
/* La tarjeta es una columna: nombre, para quién, precio, botón y la lista de topes al final. El
   botón lleva `margin-top: auto` para que quede a la misma altura en toda la fila aunque el texto de
   «para quién» ocupe uno o dos renglones; sin eso, la fila de botones sale escalonada y parece que
   unos planes valen más que otros por dónde cae el botón. */
/* `position: relative` NO es decorativo y no se puede quitar: es lo que hace que la etiqueta que
   elige la tarjeta —absoluta, con `inset: 0`— se estire sobre ESTA tarjeta y no sobre la fila
   entera. Sin él, el ancestro posicionado más cercano es `.precios`, las seis etiquetas se
   superponen sobre toda la fila y la última tapa a las demás: se pulse donde se pulse, se elige
   siempre el último plan. Pasó, y no dio ningún error; lo vio el dueño usándolo. */
.precio-tarjeta { position: relative; display: flex; flex-direction: column; background: var(--alzado); border: 1px solid var(--linea); border-radius: 1rem; padding: 1.35rem; box-shadow: 0 1px 0 rgb(28 25 22 / .04); transition: border-color .18s var(--curva), box-shadow .18s var(--curva); }
.precio-tarjeta h2 { margin: 0; font-size: 1.35rem; }
.precio-para { color: var(--acero); font-size: .92rem; margin: .35rem 0 .9rem; }
/* La cifra en la serif y grande: es lo que se compara de un vistazo entre seis tarjetas, y en la de
   palo, al mismo tamaño, se leía como un dato más de la lista de abajo. */
.precio-cifra { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-size: 2rem; line-height: 1.1; margin: 0; letter-spacing: -.02em; }
.precio-ciclo { font-family: inherit; font-size: .95rem; color: var(--acero); letter-spacing: 0; }
.precio-tarjeta .nota { margin: .3rem 0 0; }
/* El botón va DEBAJO de la lista de topes y pegado al fondo de la tarjeta con `margin-top: auto`.
   Antes iba encima de la lista, y ahí su altura dependía de cuánto midiera la lista: en la tarjeta
   gratuita los rótulos caben en un renglón y en las demás «Conversaciones archivadas» se parte en
   dos, así que la lista era más alta y el botón del gratuito quedaba desalineado con los otros
   tres. Abajo del todo quedan a la misma altura los seis, midan lo que midan las listas, porque las
   tarjetas de una fila ya tienen todas la misma altura. */
.precio-tarjeta .boton { margin-top: auto; }
/* Los topes, en dos columnas dentro de la tarjeta: el nombre de la fila a la izquierda y el número
   a la derecha, alineados entre sí. Es lo que permite recorrer la columna de números de una tarjeta
   a otra sin leer los rótulos. */
.precio-filas { list-style: none; padding: 0; margin: 1.1rem 0; border-top: 1px solid var(--linea); }
.precio-filas li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .45rem 0; font-size: .92rem; border-bottom: 1px solid var(--linea); }
.precio-filas li:last-child { border-bottom: none; }
.precio-filas span { color: var(--acero); min-width: 0; }
/* El número no se parte nunca: con cuatro tarjetas en fila la caja se estrecha y «Sin límite» se
   quedaba en dos renglones, que es justo lo que hay que poder comparar de un vistazo de una tarjeta
   a la siguiente. Lo que cede es el rótulo de la izquierda, que se lee una vez. */
.precio-filas strong { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Lo que va en todos los planes, debajo de las tarjetas. Va en dos columnas cuando cabe, porque son
   nueve líneas cortas y en una sola columna la lista es más alta que las propias tarjetas. */
.precio-comun { margin-top: 2.4rem; }
.lista-marcada { list-style: none; padding: 0; margin: .8rem 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
@media (min-width: 46rem) { .lista-marcada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; } }
/* La marca de cada línea es un signo dibujado con el borde de un cuadrado girado, no un carácter de
   texto: un «✓» de fuente sale de un tipo distinto en cada sistema y en algunos ni existe. */
.lista-marcada li { position: relative; padding: .35rem 0 .35rem 1.6rem; max-width: 46ch; }
.lista-marcada li::before {
  content: ""; position: absolute; left: .25rem; top: .75rem; width: .4rem; height: .72rem;
  border: solid var(--acento); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Dentro del panel el pie ya está en la envoltura, que le pone el hueco de los lados y el ancho:
   volver a centrarlo aquí lo dejaría desplazado respecto al texto que tiene encima. */
.envoltura > .pie { max-width: none; padding-left: 0; padding-right: 0; margin-top: 2rem; }

/* Los botones son pastillas con alto de dedo. El de tinta es el que hace la acción normal; el rojo
   es el que decide algo que después cuesta deshacer, y por eso son de colores distintos y no del
   mismo con más o menos brillo: al lado del otro tiene que verse cuál es cuál sin leerlo. */
.boton, button {
  font: inherit; font-size: .95rem; font-weight: 500; min-height: 2.75rem; padding: .5rem 1.15rem;
  border-radius: 999px; border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel);
  text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .18s var(--curva), color .18s var(--curva), border-color .18s var(--curva);
  /* Quita la espera de un tercio de segundo que algunos móviles dejan por si el toque era un doble
     toque para acercar. En una pantalla de botones, esa espera se siente como que no responde. */
  touch-action: manipulation;
}
.boton:hover, button:hover { background: #302b26; border-color: #302b26; }
button.principal, .boton.principal { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }
button.principal:hover, .boton.principal:hover { background: #a82818; border-color: #a82818; }
/* El secundario lleva contorno y no solo texto gris. Sin contorno, una fila de cuatro acciones
   («Copiar», «Exportar JSON», «Exportar Markdown», «Archivar») parece cuatro etiquetas sueltas y no
   se ve dónde empieza y acaba cada botón hasta que se pasa el ratón por encima. */
button.secundario, .boton.secundario { background: none; border-color: var(--linea); color: var(--acero); }
button.secundario:hover, .boton.secundario:hover { background: none; color: var(--tinta); border-color: var(--acero); }
button.peligro { background: none; border-color: var(--linea); color: var(--acento-texto); }
button.peligro:hover { background: none; border-color: var(--acento); color: var(--acento-texto); }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { background: var(--tinta); border-color: var(--tinta); }
button.secundario:disabled:hover { background: none; border-color: var(--linea); color: var(--acero); }
/* El botón que se pulsa se hunde un poco. Es lo único que confirma que se ha pulsado en una
   pantalla que tarda en responder porque está hablando con el servidor. */
button:active:not(:disabled) { transform: scale(.96); }
/* El botón-enlace no es una pastilla: es texto que se pulsa, dentro de una frase. Aun así lleva
   alto de dedo, porque en el móvil un enlace sin relleno es un objetivo de dos milímetros.
   Va en gris acero y no en rojo: debajo de cada hecho hay cuatro de estos, y en rojo la pantalla se
   llena de un color que aquí significa «esto decide algo». El rojo se guarda para lo que decide. */
button.enlace, .boton.enlace {
  background: none; border: none; color: var(--acero); padding: .25rem 0; text-decoration: underline;
  text-underline-offset: .15em; min-height: 2rem; font-weight: 400; border-radius: 4px; display: inline;
}
button.enlace:hover { background: none; color: var(--tinta); }

/* El foco del teclado, visible siempre y con su propio color. El anillo del navegador desaparece
   sobre un botón de color, y quien navega con el tabulador se queda sin saber dónde está.
   `:focus-visible` y no `:focus`: al ratón no se le pinta nada. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .boton:focus-visible { border-radius: 999px; }

label { display: block; margin: .9rem 0 .3rem; font-size: .9rem; color: var(--acero); }
/* El campo se levanta sobre el papel, con la línea marcando dónde empieza. Al revés —campo del
   color de la página— dentro de una tarjeta del mismo tono no se ve que sea un campo. */
/* 16 píxeles clavados, y no `font: inherit`. Es la regla que más se nota en un iPhone: si un campo
   tiene la letra por debajo de 16, Safari ACERCA la página entera al tocarlo, y quien escribe se
   queda con la pantalla desencuadrada y sin manera obvia de volver. La interfaz va a 15 para que
   quepa más; los campos suben a 16 por esto y solo por esto. */
/* Y con techo de ancho: en un monitor, un campo de texto de mil puntos de largo para escribir «Acme
   paga a 30 días» parece un error de la página. El 100 % sigue mandando en pantalla estrecha, que es
   donde hace falta. */
input, textarea, select {
  font-family: inherit; font-size: 16px; width: 100%; max-width: 36rem; min-height: 3rem; padding: .65rem .8rem;
  border: 1px solid var(--linea); border-radius: .5rem; background: var(--alzado); color: var(--tinta);
}
input::placeholder, textarea::placeholder { color: var(--acero); opacity: .75; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--acento); outline-offset: 0; }
/* Las casillas, no: el 100 % de ancho las estiraba de lado a lado del formulario y empujaba su
   propio texto fuera del renglón. Se ven en las once lenguas, así que se veía once veces. */
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: 0 .45rem 0 0; vertical-align: -.15rem; accent-color: var(--acento); }
/* El de fichero lo dibuja el sistema y lleva su propio botón dentro; con el fondo de un campo de
   texto parecía un campo donde se escribe. Hundido se lee como lo que es: una caja para soltar algo. */
input[type="file"] { background: var(--hundido); padding: .55rem .6rem; cursor: pointer; }
textarea { min-height: 7rem; resize: vertical; }
form.fila { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
form.fila > div { flex: 1 1 10rem; }
form.fila label { margin-top: 0; }

.tarjeta { background: var(--alzado); border: 1px solid var(--linea); border-radius: 1rem; padding: 1.35rem; margin: 1.1rem 0; box-shadow: 0 1px 0 rgb(28 25 22 / .04); }
/* El primer y el último hijo pierden su margen: el relleno de la tarjeta ya separa del borde, y
   sumarle el margen del título hacía que unas tarjetas empezaran a 30 puntos del borde de arriba,
   otras a 41 y otras a 54, según con qué empezaran. Puestas una debajo de otra, eso se ve. */
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
/* Una tarjeta dentro de otra no puede ser del mismo color, o el borde es lo único que la separa y
   con el borde suave no se ve. La de dentro se hunde. */
.tarjeta .tarjeta { background: var(--hundido); box-shadow: none; }
/* El recorrido guiado, marcado en el lado para que se lea como lo que es: algo que está de paso y
   se cierra, no una sección más del panel. */
/* El recorrido va fijo abajo, encima de la barra, y no en una tarjeta arriba del todo. La razón se
   ve usándolo: si la explicación se queda arriba y la parte explicada está a media página, al bajar
   a mirarla se pierden de vista el texto que la explica y el botón de seguir, que es justo lo que
   hace falta tener delante mientras uno mira. Ahora la página va hasta la sección, la sección se
   subraya un momento y la explicación sigue ahí.
   `--alto-barra` la mide el panel al pintar: es la única forma de apoyar una barra encima de otra
   sin escribir a mano una altura que dejaría de ser verdad en cuanto el texto ocupe dos renglones. */
.recorrido {
  position: fixed; left: 0; right: 0; bottom: var(--alto-barra, 0px); z-index: 20;
  background: var(--alzado); border-top: 3px solid var(--acento);
  box-shadow: 0 -14px 36px rgb(28 25 22 / .13);
  padding: .9rem 0;
}
.recorrido-dentro {
  max-width: 72rem; margin: 0 auto; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
}
.recorrido-texto { flex: 1 1 18rem; }
.recorrido-texto p { margin: 0; max-width: 60ch; }
.recorrido h2 { font-size: 1.35rem; margin: .05rem 0 .25rem; }
.recorrido .acciones { flex: 0 0 auto; margin: 0; }
/* La parte que se está explicando, subrayada un momento. Sin esto, la página se mueve y quien mira
   no sabe cuál de las tres tarjetas que ve es la del texto que está leyendo. */
.senalado { outline: 2px solid var(--acento); outline-offset: 6px; border-radius: 1rem; transition: outline-color .4s var(--curva); }
main > *, .tarjeta { scroll-margin-top: 1rem; }

/* `overflow-wrap: anywhere` y no `word-break: break-all`. La diferencia se ve en el bloque de la
   instrucción de arranque: con `break-all` el navegador parte donde le toca el renglón y salen
   «Au / tomaton» y «gu / ess»; con `anywhere` solo parte las palabras que NO caben enteras, que es
   lo que hace falta para una dirección larga o un token, sin destrozar el texto normal. */
code, .direccion { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--hundido); padding: .15rem .4rem; border-radius: 4px; overflow-wrap: anywhere; font-size: .92em; }
.recorte { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; background: var(--hundido); border: 1px solid var(--linea); border-radius: .5rem; padding: .8rem; overflow-wrap: anywhere; }
.token { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--hundido); border: 1px dashed var(--acento); padding: .6rem; border-radius: .5rem; overflow-wrap: anywhere; }
.estadistica { display: inline-block; margin: .2rem 1.2rem .2rem 0; }
.estadistica strong { font-family: Newsreader, Georgia, serif; font-size: 1.5rem; font-weight: 500; }

/* Las insignias dicen de quién es el dato y en qué estado está. Van en versalitas pequeñas, como la
   marca: se leen sin robarle el sitio al hecho, que es lo que de verdad hay que leer. */
.insignia { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--acero); margin-right: .35rem; vertical-align: middle; }
.insignia.ia { border-color: var(--acento); color: var(--acento-texto); }
.insignia.disputa { border-color: var(--acento); background: var(--acento); color: var(--acento-tinta); }
/* Estimación, preferencia, hipótesis: rellena, para que se lea antes que el texto del hecho. */
.insignia.clase { background: var(--hundido); color: var(--tinta); border-color: var(--hundido); }
.etiqueta { display: inline-block; background: var(--hundido); border: 1px solid var(--linea); border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; margin-right: .3rem; }

/* Un conflicto son dos frases que no pueden ser verdad a la vez, y la pantalla las pone una al lado
   de la otra como dos tarjetas: enfrentadas, del mismo tamaño, para compararlas de un vistazo antes
   de elegir. Mientras no se elige, la IA no recibe ninguna de las dos. */
.conflicto { margin: 1.2rem 0; padding: 0; border: 0; }
.conflicto .opcion { background: var(--alzado); border: 1px solid var(--linea); border-radius: 1rem; padding: 1.1rem; margin: .6rem 0; }
.conflicto .opcion strong { font-family: Newsreader, Georgia, serif; font-size: 1.1rem; color: var(--acento-texto); }
@media (min-width: 34rem) {
  .conflicto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
  .conflicto .opcion { margin: 0; }
  .conflicto > :not(.opcion) { grid-column: 1 / -1; }
}

.lista { list-style: none; padding: 0; margin: .5rem 0; }
.lista li { padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: none; }
.lista .activo { font-weight: 600; }
/* El texto de un hecho puede traer un identificador, un hash o un trozo de dirección sin un solo
   espacio. Aquí sí hace falta `anywhere` y no `break-word`: es el único que cuenta cuando lo de
   fuera es una rejilla, y una rejilla es lo que hay encima. */
.hecho, .conflicto .opcion { overflow-wrap: anywhere; }
.hecho h3 { margin-top: 0; }
.hecho .meta { color: var(--acero); font-size: .82rem; }
.hecho .acciones-hecho { margin-top: .4rem; display: flex; gap: .8rem; flex-wrap: wrap; }
/* Un hecho sustituido se ve apagado, pero sigue siendo texto que hay que poder leer: al 60 % se
   quedaba por debajo del contraste mínimo y en una pantalla al sol no se leía. */
.sustituido { opacity: .7; text-decoration: line-through; }
/* La línea de tiempo de un hecho: lo que valió, lo que vale y lo que valdrá, en ese orden. Lo de
   hoy en negrita y lo de después en gris, para que se lea de un vistazo dónde está el presente. */
.linea-tiempo { list-style: none; padding: 0 0 0 .9rem; margin: .5rem 0; border-left: 2px solid var(--linea); }
.linea-tiempo li { padding: .3rem 0; font-size: .92rem; }
.linea-tiempo .cuando-ahora { font-weight: 600; }
.linea-tiempo .cuando-despues { color: var(--acero); }

/* Los cajones: un cliente por pastilla, en fila y a lo ancho, con el abierto en tinta. Antes eran
   una columna estrecha a la izquierda; puestos en fila se ve de golpe cuántos clientes hay y en
   cuál se está, que es lo primero que se mira al entrar. */
/* `minmax(0, 1fr)` y no `1fr` a secas. `1fr` es `minmax(auto, 1fr)`, y ese `auto` se resuelve al
   ancho de lo más ancho que no se pueda partir: una referencia seguida de cuarenta y tantos
   caracteres sin un espacio ni un guion —un hash, un identificador, un trozo de dirección— ensancha
   la columna por encima de la página y devuelve el desplazamiento lateral en el móvil. El
   `overflow-wrap: break-word` del `body` NO lo evita: por norma no cuenta al calcular ese mínimo.
   Medido: a 375 puntos de ancho, 45 caracteres seguidos pasan y 50 ya desbordan. */
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
#cajones .lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
#cajones .lista li { padding: 0; border: 0; }
#cajones .lista li button.enlace {
  min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--alzado); color: var(--acero); text-decoration: none; display: inline-flex; align-items: center;
}
#cajones .lista li button.enlace:hover { color: var(--tinta); border-color: var(--acero); }
#cajones .lista .activo button.enlace { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 500; }
/* Dar de alta un cliente se pliega detrás de un «+ …»: es lo que menos se hace de esta parte y
   desplegado empujaba los hechos media pantalla hacia abajo. */
.nuevo-cajon { margin-top: 1rem; }
.nuevo-cajon > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--acero); font-size: .9rem; list-style: none; }
.nuevo-cajon > summary::-webkit-details-marker { display: none; }
.nuevo-cajon > summary:hover { color: var(--tinta); }
/* Los cajones archivados: plegados y en gris, pero con su número en el título. Que se vean
   apagados es lo que dice de un vistazo que siguen enteros y que no están en juego. */
.archivados { margin: .8rem 0; }
.archivados summary { cursor: pointer; color: var(--acero); font-size: .9rem; }
.archivados .lista button.enlace { color: var(--acero); }

/* La barra de abajo dice, sin moverse de la pantalla, lo único que hay que saber en todo momento:
   cuántas líneas está viendo la IA ahora mismo y cuántas se están quedando fuera porque hay algo
   sin decidir. Estaba escrito en una tarjeta a mitad de página, y una promesa que hay que ir a
   buscar se comprueba una vez y ya no se vuelve a mirar. */
/* El relleno de abajo sube al del recorte del sistema cuando lo hay: en los móviles con gesto de
   inicio, la franja de abajo se la queda el sistema y la barra quedaba partida por esa raya. */
/* El hueco de los lados va DENTRO, en la caja centrada, y con la misma medida que la envoltura: así
   el texto de la barra empieza justo debajo del texto de la página. Puesto en la barra de fuera, la
   caja de dentro se centraba sobre otro ancho y quedaba un renglón desplazado del resto. */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  border-top: 1px solid var(--linea); background: rgb(255 253 250 / .96); backdrop-filter: blur(8px);
  padding: .6rem 0 max(.6rem, env(safe-area-inset-bottom));
}
.barra-dentro {
  max-width: 72rem; margin: 0 auto; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
}
.barra p { flex: 1 1 12rem; margin: 0; color: var(--acero); font-size: .9rem; }
.barra strong { color: var(--tinta); font-weight: 600; }
.barra .en-duda { color: var(--acento-texto); }

/* La interrogación de ayuda. Pequeña y gris al lado del título: quien ya sabe la ignora, y quien no
   sabe la encuentra donde está la duda. Se abre al pasar el cursor, al llegar con el tabulador
   (`:focus-within`) y al pulsarla (`aria-expanded`), que son las tres formas de llegar a ella y no
   una: sin la última, en un móvil la ayuda no existe. */
.con-ayuda { position: relative; display: inline-block; margin-left: .4rem; vertical-align: middle; }
button.ayuda { position: relative; width: 1.4rem; height: 1.4rem; min-height: 0; padding: 0; border-radius: 50%; font-size: .78rem; font-weight: 600; line-height: 1; background: var(--alzado); color: var(--acero); border: 1px solid var(--linea); font-family: "IBM Plex Sans", system-ui, sans-serif; }
/* El círculo mide veintiún píxeles porque tiene que estorbar poco, y un dedo necesita cuarenta y
   cuatro. Esta capa invisible agranda LO QUE SE PUEDE TOCAR sin agrandar lo que se ve, que es la
   manera de tener las dos cosas. */
button.ayuda::after { content: ''; position: absolute; inset: -.65rem; border-radius: 50%; }
button.ayuda:hover { background: var(--alzado); color: var(--acento-texto); border-color: var(--acento); }
/* El globo se levanta sobre el papel con su sombra y su borde: sin ellos, sobre una página clara,
   el texto del globo parece parte de la página de debajo. */
.globo { display: none; position: absolute; z-index: 30; left: 0; top: 2rem; width: min(24rem, 78vw); background: var(--alzado); color: var(--tinta); border: 1px solid var(--linea); padding: .8rem .9rem; border-radius: .75rem; font-size: .88rem; font-weight: 400; font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: normal; line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 12px 30px rgb(28 25 22 / .14); }
.con-ayuda:hover .globo, .con-ayuda:focus-within .globo, button.ayuda[aria-expanded="true"] + .globo { display: block; }
/* Cerca del borde derecho, el globo se sale de la pantalla; anclado a la derecha, no. */
h2 .con-ayuda .globo { left: auto; right: 0; }

.banderas-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bandera { width: 1.25rem; height: .85rem; vertical-align: -.1rem; border: 1px solid var(--linea); }
.idiomas { position: relative; }
.idiomas summary { cursor: pointer; list-style: none; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--alzado); color: var(--acero); font-size: .9rem; }
.idiomas summary:hover { color: var(--tinta); }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas ul { position: absolute; right: 0; z-index: 20; margin: .35rem 0 0; padding: .35rem 0; list-style: none; background: var(--alzado); border: 1px solid var(--linea); border-radius: .75rem; min-width: 12rem; box-shadow: 0 12px 30px rgb(28 25 22 / .14); }
.idiomas li a { display: flex; gap: .5rem; align-items: center; padding: .45rem .9rem; text-decoration: none; color: var(--tinta); white-space: nowrap; }
.idiomas li a:hover { background: var(--hundido); color: var(--tinta); }

/* ---------- pantalla ancha ----------
   A partir de un monitor normal la página deja de ser una tira central y se reparte. Tres cosas:
   la lista de clientes se va a una columna propia a la izquierda y se queda quieta mientras se baja
   por los hechos; los ajustes del final se ponen en dos columnas; y en la portada, las dos secciones
   largas se ponen una al lado de otra en vez de una debajo de otra.

   El punto de corte es 64rem (unos 1024 puntos) porque es donde caben de verdad dos columnas de
   lectura. Por debajo, todo sigue en una sola, que es lo que funciona en una tableta de pie. */
@media (min-width: 64rem) {
  .rejilla { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
  /* La lista de clientes se queda a la vista mientras se baja por los hechos: cambiar de cliente es
     lo que más se hace, y tener que subir hasta arriba para hacerlo es lo que convierte una lista
     de ocho clientes en una lista de dos. */
  #cajones { position: sticky; top: 1rem; align-self: start; }
  #cajones .lista { flex-direction: column; align-items: stretch; }
  #cajones .lista li button.enlace { width: 100%; justify-content: flex-start; text-align: left; }
  /* Columnas de verdad y no una rejilla: en una rejilla, las tarjetas van por filas, y una alta al
     lado de una baja deja un palmo en blanco debajo de la baja hasta que empieza la fila siguiente.
     Con `columns` las tarjetas se apilan y llenan, que es lo que se espera de una zona de ajustes.
     `break-inside: avoid` impide que una tarjeta se parta por la mitad entre dos columnas. */
  .ajustes { columns: 2; column-gap: 2rem; }
  .ajustes > * { break-inside: avoid; margin: 0 0 1.1rem; }

  main.lectura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  /* Todo lo que no sean esas dos secciones ocupa el ancho entero y conserva su medida de lectura:
     el titular y los párrafos de arriba se leen en renglones cortos aunque la página sea ancha. */
  main.lectura > :not(#conectar):not(#planes) { grid-column: 1 / -1; }
  main.lectura > h1 { max-width: 20ch; }
}

/* Nada de movimiento para quien ha pedido que no lo haya. La pantalla tiene que quedarse igual de
   usable sin una sola animación, así que aquí se apagan todas de una vez. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  button:active:not(:disabled) { transform: none; }
}

/* Móvil. Lo que falta ahí es poder tocarlo con el dedo: botones a lo ancho en las filas de
   acciones, y separación suficiente para no darle al de al lado. Un panel que solo se usa bien con
   ratón deja fuera a quien consulta la ficha del cliente desde el metro, que es justo el momento en
   que hace falta. */
@media (max-width: 40rem) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; }
  .envoltura { padding: 1.25rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left)); }
  .cabecera-dentro, .pie { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  /* En un teléfono la cabecera pegada tiene que caber en UN renglón: con la marca, volver, el
     idioma y «Entrar al panel» se iba a dos, y dos renglones fijos arriba en una pantalla de 812
     puntos se comen la lectura. Se encogen los dos que pueden perder su palabra sin perder su
     significado: el de volver se queda en la flecha y el del idioma en la bandera. Los dos
     conservan su nombre accesible, que es lo que lee en voz alta un lector de pantalla.
     El `wrap` se queda de red: antes que desbordar a lo ancho —que en este proyecto es fallo, no
     detalle— la fila baja a dos renglones en una pantalla muy estrecha. */
  .cabecera-dentro { gap: .4rem; padding-top: .5rem; padding-bottom: .5rem; }
  .cabecera-dentro .marca { letter-spacing: .12em; }
  .cabecera-dentro .acciones { gap: .35rem; }
  .atras .texto, .idiomas summary > span[lang] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .atras, .idiomas summary { padding-left: .7rem; padding-right: .7rem; }
  .atras .flecha { margin-inline-start: 0; }
  .tarjeta { padding: 1.1rem; }

  /* La cabecera del panel, en dos renglones y no en tres: el desplegable de idioma ocupa el suyo
     entero (es el que más crece en alemán y en ruso) y los dos botones se reparten el siguiente.
     Antes «Salir» caía solo a lo ancho de la pantalla y parecía la acción principal de la página. */
  .cabecera-panel .acciones { width: 100%; }
  .cabecera-panel .acciones select { flex: 1 1 100%; width: 100%; }
  .cabecera-panel .acciones > button { flex: 1 1 8rem; }

  .hecho .acciones-hecho { gap: 1rem; }
  .hecho .acciones-hecho button.enlace { min-height: 2.4rem; }
  form.fila > div { flex: 1 1 100%; }
  form.fila button { width: 100%; }

  /* Elegir entre dos hechos que chocan es la decisión que más cuesta deshacer del panel, y con los
     botones repartidos de dos en dos se da al de al lado sin querer. Cada uno a lo ancho, uno
     debajo de otro: se tarda un segundo más y no se falla. */
  .conflicto .acciones { display: block; }
  .conflicto .acciones button { width: 100%; margin-bottom: .5rem; }

  /* La ayuda deja de colgar del título y se pone abajo, a lo ancho: colgando de un título que esté
     a la derecha, el globo se salía de la pantalla y la mitad del texto no se podía leer. */
  /* El selector repite el de arriba (`h2 .con-ayuda .globo`) porque si no, el anclaje a la derecha
     que ese lleva para las pantallas anchas gana por ser más concreto y deja el globo medio fuera. */
  .globo, h2 .con-ayuda .globo { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: calc(5.5rem + env(safe-area-inset-bottom)); width: auto; box-shadow: 0 -8px 30px rgb(28 25 22 / .18); }

  /* La barra, más apretada. El texto se queda en su columna y parte de renglón dentro si hace
     falta; el botón no se baja nunca, para que la barra no crezca de golpe al cambiar de cajón. */
  /* Los botones del recorrido, en su propio renglón y partiendo si hace falta. Con `flex: 0 0 auto`
     la fila se negaba a encoger y en una pantalla de 375 puntos los dos últimos —«Siguiente» y
     «Cerrar el recorrido»— se salían por la derecha de una barra fija, o sea que no se podían
     pulsar y no había manera de salir del recorrido. */
  .recorrido .acciones { flex: 1 1 100%; }
  .barra { padding-top: .5rem; }
  .barra-dentro { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .barra p { flex: 1 1 6rem; font-size: .85rem; line-height: 1.35; }
  .barra button { flex: 0 0 auto; min-height: 2.5rem; padding: 0 .9rem; font-size: .85rem; }
  /* Un dedo más de hueco por debajo de lo que midan las barras: en un móvil se acaba de leer con el
     pulgar tapando el último renglón, y ese margen es lo que deja despegarlo. */
  .envoltura { padding-bottom: calc(3.5rem + var(--alto-barra, 0px) + var(--alto-recorrido, 0px) + env(safe-area-inset-bottom)); }
}

/* Y esta la ÚLTIMA de todas, a propósito. Un móvil girado cumple las dos consultas a la vez —640
   por 360 puntos entra en «como mucho 40rem de ancho» y en «como mucho 26rem de alto»—, y las dos
   reglas tienen la misma fuerza, así que gana la que esté más abajo. Estando antes, la de móvil le
   devolvía el hueco de dos barras que aquí acaban de dejar de ser fijas, y quedaba media pantalla
   en blanco al final justo donde menos sitio hay.
   En horizontal la pantalla mide cuatro dedos de alto y dos barras fijas se llevarían un tercio:
   ahí se van al final de la página, que sigue diciendo lo mismo. */
@media (max-height: 26rem) and (orientation: landscape) {
  .barra, .recorrido { position: static; backdrop-filter: none; }
  .envoltura { padding-bottom: 2rem; }
}

/* Portada comercial: conserva el papel, la tinta y la tipografía del producto, pero enseña el
   producto en el primer pantallazo. Todos los nombres llevan `portada-` para que esta composición
   no cambie por accidente una pantalla del panel ni las páginas legales. */
.portada-ancho { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.portada-cabecera .cabecera-dentro { padding-top: .7rem; padding-bottom: .7rem; }
.portada-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.portada-nav a { color: var(--acero); font-size: .86rem; text-decoration: none; }
.portada-nav a:hover { color: var(--tinta); }
.portada-nueva h1 { font-size: clamp(3rem, 6.2vw, 5.8rem); line-height: .95; letter-spacing: -.055em; margin: .65rem 0 1.35rem; max-width: 10.5ch; text-wrap: balance; }
.portada-nueva h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.portada-sobrelinea { margin: 0 0 .8rem; color: var(--acento-texto); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portada-hero { min-height: 47rem; padding-block: clamp(3rem, 7vw, 7rem); display: grid; grid-template-columns: minmax(0, .92fr) minmax(31rem, 1.08fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.portada-entradilla { max-width: 44rem; color: #4e4942; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.62; }
.portada-acciones { margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.portada-enlace-flecha { color: var(--tinta); font-size: .92rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linea); padding-block: .45rem; }
.portada-enlace-flecha span { color: var(--acento-texto); margin-left: .3rem; transition: margin .18s var(--curva); }
.portada-enlace-flecha:hover span { margin-left: .55rem; }
.portada-micro { color: var(--acero); font-size: .78rem; margin-top: .75rem; }

/* Una miniatura fiel del panel, dibujada con los mismos componentes y colores. No es una captura:
   el conflicto se puede resolver y por eso la demostración sigue siendo legible en cada lengua. */
.portada-producto { position: relative; background: var(--alzado); border: 1px solid #c9bfb1; border-radius: 1.05rem; overflow: hidden; box-shadow: 0 25px 70px rgb(43 34 25 / .15), 0 2px 0 rgb(28 25 22 / .04); transform: rotate(.3deg); }
.portada-producto::before { content: ""; position: absolute; inset: .45rem -.55rem -.55rem .45rem; z-index: -1; border: 1px solid var(--linea); border-radius: 1.05rem; background: var(--hundido); }
.portada-producto-barra { min-height: 2.3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--linea); color: var(--acero); font-size: .6rem; }
.portada-puntos { display: flex; gap: .3rem; }
.portada-puntos i { display: block; width: .48rem; height: .48rem; border: 1px solid var(--linea); border-radius: 50%; background: var(--papel); }
.portada-conectado { justify-self: end; display: inline-flex; align-items: center; gap: .3rem; }
.portada-conectado i { width: .42rem; height: .42rem; background: var(--ok); border-radius: 50%; }
.portada-producto-cuerpo { min-height: 33rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); }
.portada-lateral { padding: 1rem .65rem; background: var(--papel); border-right: 1px solid var(--linea); display: flex; flex-direction: column; }
.portada-mini-marca { display: flex; align-items: center; gap: .35rem; margin: 0 0 1.4rem; font-size: .6rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.portada-mini-marca img { width: .85rem; height: auto; }
.portada-lateral-titulo { margin: 0 .35rem .45rem; color: var(--acero); font-size: .58rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.portada-cajon { width: 100%; min-width: 0; min-height: 2.65rem; padding: .4rem; display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .4rem; align-items: center; color: var(--acero); border: 0; border-radius: .5rem; background: transparent; text-align: left; cursor: pointer; }
.portada-cajon:hover { color: var(--tinta); border-color: transparent; background: rgb(28 25 22 / .04); }
.portada-cajon span { grid-row: 1 / 3; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: .35rem; background: var(--alzado); font-size: .52rem; }
.portada-cajon strong { color: inherit; font-size: .66rem; font-weight: 500; line-height: 1.2; }
.portada-cajon small { font-size: .52rem; line-height: 1; }
.portada-cajon.activo { background: var(--hundido); color: var(--tinta); }
.portada-lateral-pie { margin-top: auto; padding: .8rem .25rem 0; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: .45rem; font-size: .61rem; line-height: 1.2; }
.portada-lateral-pie small { color: var(--acero); }
.portada-avatar { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: .5rem; }
.portada-producto-principal { min-width: 0; padding: 1.2rem; }
.portada-producto-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.portada-producto-titulo h2 { font-size: 1.85rem; margin: 0; }
.portada-miga { margin: 0 0 .15rem; color: var(--acero); font-size: .5rem; letter-spacing: .13em; text-transform: uppercase; }
.portada-pequeno { min-height: 2.25rem; padding: .35rem .75rem; font-size: .7rem; }
.portada-barra-contexto { margin: 1rem 0; padding: .65rem .75rem; background: var(--hundido); border-radius: .55rem; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.portada-medidor { height: .24rem; border-radius: 999px; background: var(--linea); overflow: hidden; }
.portada-medidor span { display: block; width: 72%; height: 100%; background: var(--acento); transition: width .3s var(--curva), background .3s var(--curva); }
.portada-medidor span.completo { width: 84%; background: var(--ok); }
.portada-barra-contexto p { min-width: 0; margin: 0; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portada-barra-contexto p span:last-child { color: var(--acento-texto); }
.portada-barra-contexto p span.resuelta { color: var(--ok); }
.portada-texto-boton { min-height: 0; padding: 0; color: var(--acero); border: 0; background: transparent; font-size: .54rem; font-weight: 400; text-decoration: underline; cursor: pointer; }
.portada-texto-boton:hover { color: var(--tinta); border: 0; background: transparent; }
.portada-hechos { border: 1px solid var(--linea); border-radius: .65rem; overflow: hidden; }
.portada-hecho { padding: .65rem .75rem; display: grid; grid-template-columns: .75rem minmax(0, 1fr); gap: .5rem; align-items: start; border-bottom: 1px solid var(--linea); transition: background .25s var(--curva); }
.portada-hecho:last-child { border: 0; }
.portada-hecho p { margin: 0; font-size: .67rem; }
.portada-hecho small { display: block; margin-top: .12rem; color: var(--acero); font-size: .52rem; }
.portada-punto-ok { width: .43rem; height: .43rem; margin-top: .27rem; border-radius: 50%; background: var(--ok); }
.portada-punto-duda { width: .75rem; height: .75rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: white; font-size: .48rem; font-weight: 600; }
.portada-hecho.en-duda { background: rgb(194 48 32 / .04); }
.portada-conflicto { margin-top: .8rem; border: 1px solid rgb(194 48 32 / .45); border-radius: .65rem; overflow: hidden; background: var(--alzado); }
.portada-conflicto[hidden] { display: none; }
.portada-conflicto-cabecera { padding: .55rem .7rem; background: rgb(194 48 32 / .06); border-bottom: 1px solid rgb(194 48 32 / .2); }
.portada-conflicto-cabecera p { margin: 0; font-size: .58rem; }
.portada-sello { margin-right: .35rem; padding: .1rem .26rem; border: 1px solid var(--acento); border-radius: .2rem; color: var(--acento-texto); font-size: .45rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.portada-opciones-conflicto { padding: .65rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.portada-opciones-conflicto > div { min-width: 0; padding: .58rem; background: var(--papel); border: 1px solid var(--linea); border-radius: .45rem; }
.portada-opciones-conflicto small { color: var(--acero); font-size: .49rem; }
.portada-opciones-conflicto p { min-height: 2.1rem; margin: .22rem 0 .5rem; font-size: .59rem; line-height: 1.35; }
.portada-opciones-conflicto button { width: 100%; min-height: 1.85rem; padding: .25rem .4rem; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta); font-size: .5rem; cursor: pointer; }
.portada-opciones-conflicto button:hover { border-color: var(--acero); background: transparent; }
.portada-opciones-conflicto button.principal { background: var(--acento); border-color: var(--acento); color: white; }
.portada-opciones-conflicto button.principal:hover { background: var(--acento-texto); border-color: var(--acento-texto); }
.portada-conflicto-nota { margin: 0; padding: 0 .7rem .65rem; color: var(--acento-texto); font-size: .51rem; }
.portada-resuelto { margin-top: .8rem; padding: .7rem; display: grid; grid-template-columns: 1.45rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; background: rgb(42 122 74 / .08); border: 1px solid rgb(42 122 74 / .35); border-radius: .65rem; font-size: .6rem; }
.portada-resuelto[hidden] { display: none; }
.portada-resuelto-marca { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; background: var(--ok); color: white; border-radius: 50%; }
.portada-resuelto p { margin: .08rem 0 0; color: var(--acero); }
.portada-resuelto button { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--acero); font-size: .52rem; font-weight: 400; text-decoration: underline; }
.portada-resuelto button:hover { background: transparent; color: var(--tinta); }

.portada-franja { border-block: 1px solid var(--linea); background: var(--alzado); }
.portada-franja-dentro { width: min(100% - 2.5rem, 76rem); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portada-franja article { position: relative; min-width: 0; padding: 2rem 2rem 2rem 3.4rem; }
.portada-franja article + article { border-left: 1px solid var(--linea); }
.portada-franja article > span { position: absolute; left: 1.15rem; top: 2.15rem; color: var(--acento-texto); font-size: .62rem; font-weight: 600; letter-spacing: .1em; }
.portada-franja h2 { margin: 0 0 .35rem; font-size: 1.2rem; letter-spacing: -.02em; }
.portada-franja p { margin: 0; color: var(--acero); font-size: .82rem; }
.portada-franja code { display: inline-block; max-width: 100%; margin-top: .6rem; overflow: hidden; text-overflow: ellipsis; color: var(--acento-texto); font-size: .67rem; }

.portada-contexto { padding-block: clamp(4.5rem, 9vw, 8rem); border-bottom: 1px solid var(--linea); background: var(--hundido); }
.portada-contexto-rejilla { display: grid; grid-template-columns: minmax(0, .88fr) minmax(27rem, 1.12fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.portada-entradilla-pequena { max-width: 38rem; color: var(--acero); font-size: 1rem; }
.portada-contexto .lista-marcada { margin-top: 1.5rem; }
.portada-contexto .lista-marcada li { font-size: .86rem; }
.portada-bloque-contexto { background: var(--tinta); color: #eee8df; border-radius: .8rem; overflow: hidden; box-shadow: 0 24px 55px rgb(28 25 22 / .14); }
.portada-bloque-titulo { padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #403b35; color: #aaa39b; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.portada-bloque-titulo button { min-height: 0; padding: 0; border: 0; background: transparent; color: #d8d0c6; font-size: .67rem; font-weight: 400; text-decoration: underline; cursor: pointer; }
.portada-bloque-titulo button:hover { background: transparent; color: white; }
.portada-bloque-contexto pre { margin: 0; min-height: 13rem; padding: 1.45rem; white-space: pre-wrap; font: 400 .8rem/1.75 "IBM Plex Sans", monospace; }
.portada-bloque-pie { margin: 0; padding: .7rem 1rem; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; border-top: 1px solid #403b35; color: #aaa39b; font-size: .62rem; }
.portada-bloque-pie span:first-child { color: #b7d4c1; }
.portada-bloque-pie i { display: inline-block; width: .43rem; height: .43rem; margin-right: .25rem; background: #5fa779; border-radius: 50%; }

.portada-conectar { padding-block: clamp(5rem, 10vw, 8.5rem); }
.portada-seccion-encabezado { max-width: 47rem; margin-bottom: 3rem; }
.portada-seccion-encabezado > p:last-child { color: var(--acero); }
.portada-seccion-encabezado .direccion { margin-left: .35rem; }
/* Tres columnas, y las líneas por POSICIÓN EN LA FILA y no por número de tarjeta. Antes eran cuatro
   columnas con los bordes puestos a mano en `nth-child(3)` y `nth-child(4)`: al añadir una IA más,
   la tarjeta nueva caía a una fila sin línea arriba y con una línea a la izquierda que no le tocaba.
   No daba ningún error, solo salía torcido. Con `3n+1` y `n+4` esto vale para tres tarjetas o para
   nueve, que es lo que hace falta cuando cada mes se conecta una IA nueva. */
.portada-matriz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: .85rem; overflow: hidden; background: var(--alzado); }
.portada-compat { min-width: 0; min-height: 18rem; padding: 1.4rem; display: flex; flex-direction: column; border-left: 1px solid var(--linea); }
.portada-compat:nth-child(3n+1) { border-left: 0; }
.portada-compat:nth-child(n+4) { border-top: 1px solid var(--linea); }
.portada-compat.destacada { box-shadow: inset 0 3px 0 var(--ok); }
.portada-compat h3 { margin-top: 1rem; }
.portada-compat > p:not(.portada-estado) { color: var(--acero); font-size: .8rem; }
.portada-estado { min-height: 1.8rem; margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--acero); font-size: .63rem; font-weight: 600; }
.portada-estado i { width: .48rem; height: .48rem; flex: none; border-radius: 50%; background: var(--acero); }
.portada-estado.probado { color: var(--ok); }
.portada-estado.probado i { background: var(--ok); }
.portada-estado.estandar i { background: #3e6c8b; }
.portada-estado.limitado i { background: #ad7629; }

.portada-precios { padding-block: clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--linea); background: var(--alzado); }
.portada-precios-cabecera { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: end; margin-bottom: 2rem; }
.portada-precios-cabecera h2 { margin-bottom: 0; }
.portada-precios-cabecera > p { max-width: 34rem; color: var(--acero); }
.portada-paddle { margin-bottom: 1.2rem; padding: 1rem 1.15rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; border: 1px solid var(--linea); border-radius: .75rem; background: var(--papel); }
.portada-paddle > span { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .4rem; background: var(--tinta); color: white; font-family: Newsreader, serif; font-size: 1.1rem; }
.portada-paddle p { margin: 0; color: var(--acero); font-size: .78rem; }
.portada-paddle a { color: var(--acento-texto); font-size: .78rem; font-weight: 600; }
.portada-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.portada-plan { position: relative; min-width: 0; padding: 1.45rem; display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: .85rem; background: var(--papel); }
.portada-plan.recomendado { border-color: var(--tinta); background: var(--alzado); }
.portada-plan-bandera { position: absolute; right: 1rem; top: 1rem; margin: 0; padding: .22rem .5rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: .61rem; }
.portada-plan-nombre { margin: 0 0 1.2rem; color: var(--acero); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.portada-plan > p:not(.portada-plan-nombre, .portada-plan-bandera) { flex: 1; color: var(--acero); font-size: .86rem; }
.portada-plan .boton { align-self: flex-start; margin-top: 1rem; }
.portada-fundador { margin: 1rem 0 0; padding: .85rem 1rem; border-bottom: 1px solid var(--linea); color: var(--acero); font-size: .82rem; text-align: center; }
.portada-fundador a { color: var(--acento-texto); }
.portada-privacidad { padding-block: 2.5rem; color: var(--acero); font-size: .82rem; }
.portada-privacidad p { max-width: 88ch; }
.portada-privacidad p + p { margin-top: 1rem; }
.portada-cta { padding-block: clamp(4.5rem, 8vw, 7rem); background: var(--tinta); color: var(--papel); }
.portada-cta-dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
.portada-cta h2 { max-width: 13ch; margin-bottom: 0; }
.portada-cta .portada-sobrelinea { color: #e07568; }
.portada-cta-dentro > div:last-child { text-align: right; }
.portada-cta-dentro > div:last-child p { color: #aaa39b; font-size: .7rem; }

@media (max-width: 68rem) {
  .portada-nav { display: none; }
  .portada-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .portada-hero-texto { max-width: 46rem; }
  .portada-producto { width: min(100%, 42rem); margin-inline: auto; transform: none; }
  /* A dos columnas la fila cambia, así que hay que DESHACER la regla de tres y poner la de dos. El
     orden importa: `3n+1` y `odd` tienen la misma especificidad, así que manda la última escrita. */
  .portada-matriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada-compat:nth-child(3n+1) { border-left: 1px solid var(--linea); }
  .portada-compat:nth-child(odd) { border-left: 0; }
  .portada-compat:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

@media (max-width: 48rem) {
  .portada-nueva h1 { font-size: clamp(2.65rem, 13vw, 4.5rem); }
  .portada-hero { padding-top: 3.5rem; }
  .portada-producto-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .portada-lateral { display: none; }
  .portada-producto-principal { padding: 1rem; }
  .portada-producto-barra { grid-template-columns: minmax(0, 1fr) auto; }
  .portada-producto-barra > span:first-of-type { display: none; }
  .portada-producto-titulo .boton { display: none; }
  .portada-opciones-conflicto { grid-template-columns: minmax(0, 1fr); }
  .portada-franja-dentro, .portada-contexto-rejilla, .portada-precios-cabecera, .portada-planes, .portada-cta-dentro { grid-template-columns: minmax(0, 1fr); }
  .portada-franja article + article { border-left: 0; border-top: 1px solid var(--linea); }
  .portada-contexto-rejilla { gap: 3rem; }
  .portada-precios-cabecera { gap: .5rem; }
  .portada-paddle { grid-template-columns: auto minmax(0, 1fr); }
  .portada-paddle a { grid-column: 2; }
  .portada-cta-dentro { gap: 1.5rem; }
  .portada-cta-dentro > div:last-child { text-align: left; }
}

@media (max-width: 34rem) {
  .portada-ancho, .portada-franja-dentro { width: min(100% - 2rem, 76rem); }
  .portada-cabecera .idiomas summary span { display: none; }
  .portada-producto-principal { padding: .8rem; }
  .portada-barra-contexto { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .portada-texto-boton { display: none; }
  .portada-matriz { grid-template-columns: minmax(0, 1fr); }
  .portada-compat + .portada-compat { border-left: 0; border-top: 1px solid var(--linea); }
  .portada-compat { min-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada-enlace-flecha span, .portada-medidor span { transition: none; }
}

/* Panel de producto. La portada cuenta qué hace Nebula; aquí la prioridad es saber en cinco
   segundos qué contexto está activo, qué necesita una decisión y dónde se administra cada cosa. */
.envoltura.panel-aplicacion {
  max-width: none; min-height: 100dvh; margin: 0; padding: 0 0 calc(3rem + var(--alto-barra, 0px));
}
.panel-aplicacion > .cabecera-panel {
  position: sticky; top: 0; z-index: 25; min-height: 4.4rem; margin: 0; padding: .8rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--linea); background: rgb(241 236 227 / .94); backdrop-filter: blur(12px);
}
.panel-aplicacion > .cabecera-panel .marca { font-size: .76rem; }
.panel-aplicacion > .cabecera-panel .acciones { gap: .45rem; }
.panel-aplicacion > .cabecera-panel .acciones select,
.panel-aplicacion > .cabecera-panel .acciones button { min-height: 2.5rem; font-size: .84rem; }
.panel-shell {
  width: min(100%, 88rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr);
}
.panel-menu { padding: 1.35rem 1rem; border-bottom: 1px solid var(--linea); min-width: 0; }
.panel-menu-rotulo, .panel-sobrelinea {
  margin: 0 0 .7rem; color: var(--acento-texto); font-size: .66rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
}
.panel-menu nav { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; }
.panel-menu-enlace {
  min-height: 2.7rem; padding: 0 .85rem; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid transparent; border-radius: .65rem; background: transparent; color: var(--acero);
  font-size: .86rem; font-weight: 500; text-align: left;
}
.panel-menu-enlace:hover { background: var(--alzado); border-color: var(--linea); color: var(--tinta); transform: none; }
.panel-menu-enlace.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.panel-menu-numero { color: inherit; opacity: .56; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.panel-menu-estado, .panel-menu-plan { display: none; }
.panel-contenido { min-width: 0; padding: clamp(1.35rem, 3.5vw, 3rem); }
.panel-avisos:empty { display: none; }
.panel-avisos > *:first-child { margin-top: 0; }
.panel-vista { min-width: 0; }
.panel-vista-cabecera { margin: 0 0 1.65rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--linea); }
.panel-vista-cabecera h2 { margin: 0; max-width: 18ch; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1; }
.panel-vista-entradilla { max-width: 58ch; margin: .75rem 0 0; color: var(--acero); font-size: 1rem; }
.panel-bloque {
  min-width: 0; margin: 0; padding: clamp(1.2rem, 2.4vw, 1.75rem); border: 1px solid var(--linea);
  border-radius: 1rem; background: var(--alzado); box-shadow: 0 1px 0 rgb(28 25 22 / .04);
}
.panel-resumen-principal, .panel-resumen-secundario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.panel-resumen-secundario { margin-top: 1rem; }
.panel-bloque-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-bloque-cabecera .panel-sobrelinea { margin: 0; }
.panel-bloque h3 { margin: 1.8rem 0 .5rem; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1; }
.panel-bloque-contexto { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.panel-bloque-contexto .panel-sobrelinea { color: #e07568; }
.panel-bloque-contexto .nota { color: #bdb5aa; }
.panel-bloque-contexto .secundario { border-color: #6f685f; background: transparent; color: var(--papel); }
.panel-bloque-contexto .secundario:hover { border-color: var(--papel); background: rgb(255 255 255 / .06); }
.panel-contexto-cifra { margin: .5rem 0; color: #d6cfc5; }
.panel-contexto-cifra strong { color: var(--papel); font-family: Newsreader, Georgia, serif; font-size: 2rem; font-weight: 500; }
.panel-estado {
  display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 .65rem; border-radius: 999px;
  background: rgb(42 122 74 / .18); color: #8fd0a8; font-size: .68rem; font-weight: 600;
}
.panel-estado.alerta { background: rgb(194 48 32 / .2); color: #f09a90; }
.panel-bloque-atencion { position: relative; overflow: hidden; }
.panel-bloque-atencion::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ok); }
.panel-bloque-atencion.con-alerta::after { background: var(--acento); }
.panel-atencion-numero, .panel-conexiones-numero {
  margin: .15rem 0; font-family: Newsreader, Georgia, serif; font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: .95;
}
.panel-lista-resumen { list-style: none; padding: 0; margin: .8rem 0 1.1rem; color: var(--acero); }
.panel-lista-resumen li { padding: .25rem 0; border-bottom: 1px solid var(--linea); }
.panel-lista-resumen li:last-child { border-bottom: 0; }
.panel-lista-resumen strong { color: var(--acento-texto); }
.panel-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel-metrica { min-width: 0; padding-top: .8rem; border-top: 1px solid var(--linea); }
.panel-metrica strong { display: block; font-family: Newsreader, Georgia, serif; font-size: 2rem; font-weight: 500; line-height: 1; }
.panel-metrica span { display: block; margin-top: .35rem; color: var(--acero); font-size: .76rem; line-height: 1.35; }
.panel-bloque-conexiones { background: var(--hundido); }
.panel-bloque-conexiones .panel-conexiones-numero { font-size: 3.6rem; }
.panel-bloque-conexiones .nota { min-height: 2.8rem; }
.panel-vista > #perfil { margin-top: 0; }
.panel-desplegable { overflow: clip; }
.panel-desplegable > summary {
  min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; list-style: none;
  color: var(--acento-texto); font-size: .86rem; font-weight: 600;
}
.panel-desplegable > summary::-webkit-details-marker { display: none; }
.panel-desplegable > summary::after { content: '+'; margin-left: auto; color: var(--acero); font-size: 1.25rem; font-weight: 400; }
.panel-desplegable[open] > summary::after { content: '−'; }
.panel-desplegable[open] > summary { padding-bottom: .75rem; border-bottom: 1px solid var(--linea); }
.panel-desplegable-cuerpo, .panel-desplegable > form { padding-top: .65rem; }
.panel-alta-hecho { background: var(--hundido); box-shadow: none; }
.panel-tarjetas { columns: 1; column-gap: 1rem; }
.panel-tarjetas > * { break-inside: avoid; margin: 0 0 1rem; }
.panel-rejilla-memoria { align-items: start; }
.panel-aplicacion > .pie { max-width: 88rem; padding-left: clamp(1rem, 3vw, 2.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); }
.panel-aplicacion .barra-dentro { max-width: 88rem; }

@media (min-width: 50rem) {
  .panel-shell { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .panel-menu {
    position: sticky; top: 4.4rem; align-self: start; min-height: calc(100dvh - 4.4rem - var(--alto-barra, 0px));
    padding: 2.25rem 1.2rem 1.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--linea); border-bottom: 0;
  }
  .panel-menu nav { display: grid; overflow: visible; }
  .panel-menu-enlace { width: 100%; }
  .panel-menu-estado {
    margin-top: auto; padding: 1rem 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem;
    align-items: start; border-top: 1px solid var(--linea);
  }
  .panel-menu-estado strong, .panel-menu-estado span { display: block; min-width: 0; overflow-wrap: anywhere; }
  .panel-menu-estado strong { font-size: .82rem; }
  .panel-menu-estado span { color: var(--acero); font-size: .72rem; }
  .panel-punto { width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(42 122 74 / .1); }
  .panel-punto.alerta { background: var(--acento); box-shadow: 0 0 0 4px rgb(194 48 32 / .1); }
  .panel-menu-plan { display: block; margin: 0; color: var(--acero); font-size: .68rem; text-transform: capitalize; }
  .panel-resumen-principal { grid-template-columns: minmax(0, 1.65fr) minmax(15rem, .75fr); }
  .panel-resumen-secundario { grid-template-columns: minmax(0, 1.35fr) minmax(14rem, .65fr); }
}

@media (min-width: 72rem) {
  .panel-tarjetas { columns: 2; }
}

@media (max-width: 49.99rem) {
  .panel-menu-rotulo { display: none; }
  .panel-menu { position: sticky; top: 4.4rem; z-index: 18; padding: .65rem 1rem; background: rgb(241 236 227 / .96); backdrop-filter: blur(10px); }
  .panel-menu-enlace { min-height: 2.45rem; }
  .panel-contenido { padding-top: 1.5rem; }
}

@media (max-width: 40rem) {
  .panel-aplicacion > .cabecera-panel { min-height: 0; padding: .55rem 1rem; }
  .panel-aplicacion > .cabecera-panel .acciones { width: auto; }
  .panel-aplicacion > .cabecera-panel .acciones select { width: auto; flex: 0 1 7rem; }
  .panel-menu { position: static; padding-inline: 1rem; }
  .panel-menu-numero { display: none; }
  .panel-menu-enlace { padding-inline: .75rem; }
  .panel-contenido { padding: 1.2rem 1rem 2rem; }
  .panel-vista-cabecera h2 { font-size: 2.25rem; }
  .panel-metricas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel-bloque-cabecera { align-items: flex-start; flex-direction: column; gap: .5rem; }
}

/* Acceso al panel. La primera pantalla explica qué se abre antes de pedir el correo: a la izquierda
   queda la promesa del producto y a la derecha el único paso que hay que completar. */
.envoltura.panel-acceso {
  max-width: none; min-height: 100dvh; margin: 0; padding: 0; display: flex; flex-direction: column;
}
.panel-acceso > .cabecera-panel {
  min-height: 4.4rem; margin: 0; padding: .8rem clamp(1rem, 3vw, 2.5rem); background: var(--papel);
}
.panel-acceso > .cabecera-panel .acciones select { width: auto; min-width: 10rem; }
.acceso-contenido { width: min(100%, 76rem); margin: auto; padding: clamp(1.25rem, 4vw, 3.5rem); }
.acceso-avisos { max-width: 34rem; margin: 0 auto 1rem; }
.acceso-avisos:empty { display: none; }
.acceso-shell {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); min-height: 35rem;
  border: 1px solid var(--linea); border-radius: 1.4rem; overflow: hidden; background: var(--alzado);
  box-shadow: 0 18px 60px rgb(28 25 22 / .08);
}
.acceso-presentacion {
  min-width: 0; padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column;
  background: var(--tinta); color: var(--papel);
}
.acceso-sobrelinea { margin: 0 0 1.5rem; color: #e07568; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.acceso-titulo { max-width: 12ch; margin: 0; color: var(--papel); font-size: clamp(2.35rem, 4.2vw, 4rem); line-height: .98; }
.acceso-lema { max-width: 46ch; margin: 1.2rem 0 2rem; color: #c9c1b7; }
.acceso-principios { margin-top: auto; border-top: 1px solid #4b4640; }
.acceso-principio { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; padding: .85rem 0; border-bottom: 1px solid #4b4640; }
.acceso-principio span { color: #e07568; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }
.acceso-principio strong { font-size: .86rem; font-weight: 500; }
.acceso-privacidad { max-width: 56ch; margin: 1.4rem 0 0; color: #9f978d; font-size: .72rem; }
.acceso-formulario.tarjeta {
  align-self: center; width: min(100% - 3rem, 27rem); margin: 1.5rem auto; padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 0; box-shadow: none; background: transparent;
}
.acceso-formulario .panel-sobrelinea { margin-bottom: .8rem; }
.acceso-formulario h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.acceso-formulario-entradilla { margin: .65rem 0 1.8rem; color: var(--acero); }
.acceso-formulario label { margin-top: 0; }
.acceso-formulario input { max-width: none; background: #fff; }
.acceso-formulario input[name="codigo"] { text-align: center; letter-spacing: .38em; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.acceso-continuar { width: 100%; margin-top: 1rem; }
.acceso-botones { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: .6rem; }
.acceso-botones button { width: 100%; }
.panel-acceso > .pie { width: min(100%, 76rem); padding-inline: clamp(1.25rem, 4vw, 3.5rem); }

@media (max-width: 48rem) {
  .acceso-shell { grid-template-columns: minmax(0, 1fr); }
  .acceso-presentacion { padding: 2rem; }
  .acceso-titulo { max-width: 16ch; font-size: clamp(2.15rem, 9vw, 3.2rem); }
  .acceso-lema { margin-bottom: 1.2rem; }
  .acceso-principios { margin-top: 1rem; }
  .acceso-privacidad { display: none; }
  .acceso-formulario.tarjeta { width: min(100% - 1.5rem, 30rem); margin: .75rem auto; padding: 1.5rem 1rem 2rem; }
}

@media (max-width: 34rem) {
  .panel-acceso > .cabecera-panel { min-height: 0; padding: .65rem 1rem; }
  .panel-acceso > .cabecera-panel .acciones select { min-width: 0; max-width: 8rem; }
  .acceso-contenido { padding: .8rem; }
  .acceso-shell { border-radius: 1rem; }
  .acceso-presentacion { padding: 1.5rem; }
  .acceso-lema, .acceso-principios { display: none; }
  .acceso-titulo { font-size: 2.25rem; }
  .acceso-botones { grid-template-columns: minmax(0, 1fr); }
}

/* Páginas públicas. Comparten una cabecera editorial, un índice que acompaña la lectura y bloques
   con la misma geometría del panel. El texto sigue teniendo una medida corta aunque la página use
   el ancho del monitor para orientarse. */
.seccion-nav { display: none; align-items: center; gap: 1.2rem; margin-left: auto; }
.seccion-nav a { color: var(--acero); text-decoration: none; font-size: .84rem; }
.seccion-nav a:hover { color: var(--tinta); }
.seccion-publica.lectura { max-width: 72rem; padding-top: clamp(2.5rem, 6vw, 5.5rem); }
.seccion-publica.ancha { max-width: 76rem; }
.seccion-hero { position: relative; margin-bottom: clamp(2rem, 5vw, 4rem); padding: 0 0 clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--linea); }
.seccion-hero::after { content: ''; position: absolute; left: 0; bottom: -1px; width: clamp(3rem, 8vw, 6rem); height: 3px; background: var(--acento); }
.seccion-sobrelinea, .seccion-indice-rotulo {
  margin: 0 0 1rem; color: var(--acento-texto); font-size: .68rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
}
.seccion-hero h1 { max-width: 16ch; margin: 0; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .94; }
.seccion-hero-ancho h1 { max-width: 18ch; }
.seccion-entradilla { max-width: 66ch; margin: 1.4rem 0 0; color: var(--acero); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.seccion-actualizado { margin: 1.1rem 0 0; color: var(--acero); font-size: .78rem; }
.seccion-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.seccion-indice { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--linea); }
.seccion-indice-rotulo { color: var(--acero); margin-bottom: .55rem; }
.seccion-indice ol { list-style: none; padding: 0; margin: 0; }
.seccion-indice li { border-bottom: 1px solid var(--linea); }
.seccion-indice a { min-height: 2.8rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .4rem; align-items: center; padding: .55rem 0; color: var(--acero); text-decoration: none; font-size: .78rem; line-height: 1.3; }
.seccion-indice a:hover { color: var(--tinta); }
.seccion-indice a span { color: var(--acento-texto); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; }
.seccion-contenido { min-width: 0; }
.seccion-bloque { scroll-margin-top: 6rem; margin: 0 0 1rem; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--linea); border-radius: 1rem; background: var(--alzado); box-shadow: 0 1px 0 rgb(28 25 22 / .04); }
.seccion-bloque h2 { margin: 0 0 .7rem; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.seccion-bloque p { max-width: 68ch; }
.seccion-bloque-numero { display: block; margin-bottom: 1.1rem; color: var(--acento-texto); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.faq-lista { display: grid; gap: 1rem; }
.pregunta {
  scroll-margin-top: 6rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem;
  margin: 0; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--linea); border-radius: 1rem;
  background: var(--alzado); box-shadow: 0 1px 0 rgb(28 25 22 / .04);
}
.pregunta:last-child { border-bottom: 1px solid var(--linea); }
.pregunta-numero { padding-top: .32rem; color: var(--acento-texto); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.pregunta h2 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.pregunta p { color: #4f4942; line-height: 1.7; }
.legal .legal-apartado { margin: 0 0 1rem; }
.legal .legal-apartado p { margin-bottom: 0; }
.seccion-cta {
  margin-top: 1rem; padding: clamp(1.4rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-radius: 1rem; background: var(--tinta); color: var(--papel);
}
.seccion-cta .seccion-sobrelinea { margin-bottom: .35rem; color: #e07568; }
.seccion-cta p:last-child { max-width: 52ch; margin: 0; color: #c9c1b7; font-size: .9rem; }
.seccion-cta .boton { flex: none; }
.seccion-precios-cuerpo { min-width: 0; }

@media (min-width: 54rem) {
  .seccion-nav { display: flex; }
  .seccion-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .seccion-indice { position: sticky; top: 6.2rem; }
}

@media (max-width: 44rem) {
  .seccion-publica.lectura { padding-top: 2.5rem; }
  .seccion-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .seccion-indice { display: none; }
  .pregunta { grid-template-columns: 2rem minmax(0, 1fr); padding: 1.2rem; }
  .seccion-cta { align-items: flex-start; flex-direction: column; }
}