/* =====================================================================
 *  ARAANT — hoja de estilos
 * =====================================================================
 *
 *  Escrita desde cero contra la ficha de OFF+BRAND publicada en Refero
 *  Styles. Los valores no son una interpretacion: son los de la ficha.
 *  Ver DESIGN.md en la raiz del repositorio.
 *
 *  Las cinco reglas que gobiernan todo lo de abajo:
 *
 *    1. Cinco neutros y un gradiente. El gradiente SOLO en la esfera y en
 *       la marca. No hay color de accion primaria.
 *    2. Cero sombras. Lo elevado se distingue por ser mas claro.
 *    3. Superficies a escuadra. Lo unico curvo son los controles, 10px.
 *    4. Tracking POSITIVO, tambien en los titulares. Un peso 400 a 103px
 *       con el tracking abierto se lee como autoridad editorial.
 *    5. El boton relleno no existe: lo sustituye un enlace con flecha.
 *
 *  Orden del fichero:
 *    01 tokens · 02 base · 03 composicion · 04 tipografia
 *    05 enlaces y controles · 06 cabecera y pie · 07 hero
 *    08 superficies · 09 catalogo · 10 ficha · 11 panel · 12 formularios
 *    13 contenido · 14 administracion · 15 utilidades
 * ===================================================================== */

/* ===== 01 · TOKENS ================================================== */

:root {
  /*
   * --- Color ---
   *
   * Pergamino calido en TODA la pagina: nunca blanco puro. Es la firma
   * del sistema y lo que lo separa de una plantilla de SaaS.
   *
   * Un solo color de accion, el azul lago, y una por pantalla. Repartido
   * pierde el sentido.
   */
  --canvas: #f6f3f1;   /* Parchment. Lienzo de toda la pagina */
  --papel: #ffffff;    /* Blanco. Solo dentro de tarjetas, muy contado */
  --piedra: #cfdaf5;   /* Periwinkle Mist. Superficie apagada */
  --lago: #2b59d1;     /* Lake Blue. LA accion principal, una por pantalla */

  /* Decorativos: lavados de degradado, nunca relleno de interfaz. */
  --cielo: #a0b5eb;
  --menta: #a7fccd;
  --coral: #ff9473;
  --oro: #ecda98;
  --tinta: #242424;    /* Off-black. Todo el texto */
  /*
   * Dos filetes, no uno.
   *
   * Los continuos de la referencia son translucidos —20 usos de
   * `rgba(111,111,111,0.2)`, que sobre pergamino compone a #cdcdcb— y los
   * punteados de los anillos son opacos, `rgb(191,190,190)`. Con un solo
   * token, los continuos salian mas oscuros de la cuenta.
   */
  --filete: rgba(36, 36, 36, 0.2);
  --filete-flojo: rgba(36, 36, 36, 0.1);
  --ceniza: #cecac8;   /* Ash */
  /* Segunda voz de texto. No esta en la ficha, que usa tinta para todo,
     pero un catalogo necesita distinguir dato de comentario. Elegido para
     pasar AA sobre pergamino: 6,76:1. */
  /*
   * La referencia usa el 60% de opacidad para el texto secundario. Medido
   * sobre su propio pergamino da 4,0:1, por debajo del 4,5 que pide AA
   * para texto de 16px. Se sube al 70%, que da 5,3:1 y a ojo es el mismo
   * gris. Es la unica desviacion de la ficha, y es por legibilidad.
   */
  --apagado: rgba(36, 36, 36, 0.7);
  --medio: rgba(36, 36, 36, 0.8);

  /* --- El unico acontecimiento cromatico --- */
  --iridiscente: linear-gradient(255deg, #facb0e 0%, #f06ba8 30%, #78bae6 65%, #ffffff 100%);

  /* --- Tipografia --- */
  /* La ficha usa Ataero Retina OB Edition, de encargo. Space Grotesk es
     geometrica, de altura de x alta y ya esta autoalojada. La mono es
     adicion nuestra: la ficha es de una agencia y no tiene tablas de
     cifras; un catalogo de financiacion, si. */
  /*
   * Serif para titulares, monoespaciada para TODO lo demas. El par es el
   * gesto que define el sistema: cuerpo, navegacion, botones, etiquetas y
   * cualquier cadena de interfaz van en mono, y eso le da la textura de
   * manual tecnico compuesto para una revista literaria.
   */
  --display-tipo: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --texto-tipo: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --dato-tipo: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /*
   * Escala fija, no proporcional.
   *
   * La referencia anterior escalaba todo con el ancho de la ventana; esta
   * no: usa tamaños fijos y un tope de 1432px. Medidos en la pagina:
   * display 80/48/40/32/24, mono 20/18/16/14/12.
   */
  --t-caption: 0.75rem;      /* 12 */
  --t-body-sm: 0.875rem;     /* 14 */
  --t-body: 1rem;            /* 16 */
  --t-body-lg: 1.125rem;     /* 18 */
  --t-lead: 1.25rem;         /* 20 */
  --t-subheading: 1.5rem;    /* 24 */
  --t-heading-sm: 2rem;      /* 32 */
  --t-heading: 2.5rem;       /* 40 */
  --t-heading-lg: 3rem;      /* 48 */
  --t-display: 5rem;         /* 80 */

  /*
   * Interlineado: 1.2 en display, 1.35 en cuerpo. Y el peso del display
   * se queda en 400 SIEMPRE — el contraste del serif y el tracking
   * negativo hacen el trabajo que en otros sistemas hace la negrita.
   */
  --lh-apretado: 1.2;
  --lh-medio: 1.2;
  --lh-suelto: 1.35;

  /*
   * Tracking NEGATIVO en display, -0.02em. Y positivo solo en las cadenas
   * de interfaz en mayusculas, que es donde la mono lo necesita.
   */
  --track: -0.02em;
  --track-cartela: 0.05em;

  /* --- Formas --- */
  /*
   * Pildoras y tarjetas redondas. Es el lenguaje de contenedor de este
   * sistema: cualquier boton o etiqueta va a 100px, y las tarjetas a 40.
   */
  --radio-superficie: 40px;
  --radio-control: 100px;
  --radio-menor: 16px;

  /*
   * Las curvas de la referencia, contadas por numero de usos: 1,2s con
   * `cubic-bezier(0.165, 0.84, 0.44, 1)` para las entradas grandes, 0,6s
   * `ease` para todo lo pequeño y 0,4s con rebote para los estados que
   * saltan.
   */
  --mov-grande: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  --mov-corto: 0.6s ease;
  --mov-rebote: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* --- Espacio --- */
  /* Base de 8px. Medido: separacion entre elementos 16, relleno de
     tarjeta 40, separacion entre secciones 64, ancho maximo 1432. */
  --gap-elemento: 1rem;         /* 16 */
  --pad-tarjeta: 2.5rem;        /* 40 */
  --gap-seccion: 4rem;          /* 64 */
  --gap-seccion-min: 3rem;      /* 48 */
  --ancho-pagina: 89.5rem;      /* 1432 */
  --ancho-texto: 42rem;
}

/*
 * La referencia usa Untitled Serif y ABC Diatype Mono, las dos de pago.
 * Space Grotesk en display y JetBrains Mono en todo lo demas. Las dos
 * autoalojadas, como el resto: aqui no entra ningun CDN.
 *
 * Hubo un serif de display (Source Serif 4) mientras la pagina fue clara
 * y editorial. Con el fondo oscuro y el lenguaje de panel no pinta nada,
 * asi que se ha quitado la declaracion y el fichero en vez de dejarlo
 * cargando 48 KB que no usa nadie.
 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/spacegrotesk-variable.woff2') format('woff2');
}


/* La mono lleva las cifras tabulares. Subconjunto latin-ext: hace falta
   la ñ y las tildes, que en un catalogo espanol salen en cada linea. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-500.woff2') format('woff2');
}

/* ===== 02 · BASE ==================================================== */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: var(--t-body);
  line-height: var(--lh-suelto);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  /* Cifras del mismo ancho en toda la pagina: una columna de importes que
     baila es ilegible. */
  font-variant-numeric: tabular-nums;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Un solo peso en todo el sistema. La jerarquia la da el tamano. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-tipo);
  font-weight: 400;
  letter-spacing: var(--track);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Sin vinetas por defecto: casi todas las listas del sitio son
   estructura, no enumeraciones. Las que si lo son las recuperan en el
   texto de los articulos. */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

/* El foco siempre visible. Quitarlo es el fallo de accesibilidad mas
   repetido del sector y el mas facil de evitar. */
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

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

/* Salto al contenido: obligatorio para teclado y lector de pantalla. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: var(--radio-control);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
}

/* Texto que solo leen los lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 03 · COMPOSICION ============================================= */

/*
 * El contenedor ocupa la ventana entera y su relleno es la separacion de
 * la rejilla, igual que en la referencia. Antes topaba en 1400 y a partir
 * de ese ancho la pagina se quedaba quieta en el centro mientras la
 * referencia seguia creciendo.
 */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: max(1rem, var(--gap-elemento));
}

/* La ficha separa secciones con 76-119px de aire, nunca con lineas. */
.section {
  padding-block: var(--gap-seccion-min);
}

@media (min-width: 900px) {
  .section { padding-block: var(--gap-seccion); }
}

.section--tight { padding-block: 3rem; }
.section--cta { padding-block: 3rem var(--gap-seccion-min); }

/*
 * Alternancia pergamino / papel. Es lo unico que separa una seccion de la
 * siguiente: sin ella, doce secciones seguidas son una sola mancha.
 *
 * Sin filete: la ficha separa con aire, nunca con lineas, y el cambio de
 * superficie ya marca el corte el solo. Dos secciones del mismo fondo se
 * separan con `.ornamento`, no con un borde.
 */
.section--subtle { background: var(--papel); }

/* Una seccion en tinta, para romper el ritmo. Repetida deja de romper. */
.section--tinta {
  background: var(--tinta);
  color: var(--canvas);
}

.section--tinta h1,
.section--tinta h2,
.section--tinta h3 { color: var(--canvas); }

.section--tinta .section__eyebrow,
.section--tinta p { color: var(--piedra); }

/*
 * Cabecera de seccion.
 *
 * Alineada a la izquierda: doce cabeceras centradas seguidas hacen que
 * todo caiga en el mismo eje y nada tire del ojo. Y la etiqueta lleva
 * 76px de aire por debajo, que es lo que pide la ficha y la mitad de lo
 * que hace que la pagina respire.
 */
.section__header {
  max-width: 52rem;
  margin: 0 0 var(--gap-seccion-min);
}

/*
 * La cartela va pegada al titular, no a 76px.
 *
 * La ficha pide 76px "debajo de la etiqueta, antes de que empiece el
 * contenido". Aqui la etiqueta no flota sola: hace de antetitulo del
 * titular que viene justo debajo, y los 76px son los que separan la
 * cabecera entera del contenido (ver .section__header). Poner los 76px
 * en los dos sitios abre un agujero en medio de la cabecera.
 */
.section__eyebrow {
  display: block;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  margin: 0 0 0.5rem;
}

.section__header h1,
.section__header h2 {
  font-size: var(--t-heading-sm);
  line-height: var(--lh-medio);
  text-transform: uppercase;
  margin: 0;
}

@media (min-width: 900px) {
  .section__header h1,
  .section__header h2 { font-size: var(--t-heading); line-height: var(--lh-apretado); }
}

.section__header p:not(.section__eyebrow) {
  margin: 1.75rem 0 0;
  max-width: var(--ancho-texto);
  color: var(--apagado);
  font-size: var(--t-body);
}

/* El centrado solo tiene sentido en un cierre: no hay nada debajo con lo
   que alinearse. */
.section--cta .section__header {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.section--cta .section__header p:not(.section__eyebrow) { margin-inline: auto; }

/* Rejillas. Todas con la misma separacion de 19px de la ficha. */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap-elemento);
}

@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Peso asimetrico: texto grande a la izquierda, apoyo a la derecha. Es la
   composicion que usa la ficha en todos sus bloques. */
.asimetrico {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .asimetrico {
    grid-template-columns: 1fr 22rem;
    align-items: end;
  }
}

/* ===== 04 · TIPOGRAFIA ============================================== */

/*
 * Escala de la ficha. Lo que hay que respetar aunque cueste creerlo:
 * el tracking es POSITIVO tambien a 103px, y el interlineado de los
 * titulares grandes es 0,80 — las lineas se apilan hasta formar un solo
 * bloque tipografico.
 */
.display,
.t-display {
  font-family: var(--display-tipo);
  font-size: var(--t-heading-sm);
  line-height: var(--lh-apretado);
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin: 0;
}

@media (min-width: 700px) { .display, .t-display { font-size: var(--t-heading); } }
@media (min-width: 1100px) { .display, .t-display { font-size: var(--t-display); } }

.t-heading   { font-size: var(--t-heading); line-height: var(--lh-apretado); }
.t-heading-sm{ font-size: var(--t-heading-sm); line-height: var(--lh-medio); }
.t-sub       { font-size: var(--t-subheading); line-height: var(--lh-medio); }
.t-body      { font-size: var(--t-body); line-height: var(--lh-suelto); }
.t-body-sm   { font-size: var(--t-body-sm); line-height: var(--lh-suelto); }

/* Cartela: 11px en mayusculas, tracking abierto, en monoespaciada. Es lo
   que le da al conjunto aire de documento tecnico y no de folleto. */
.cartela,
.t-caption {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

/* Todo lo que es dato va en monoespaciada: importes, plazos, codigos
   NUTS, puntuaciones, porcentajes. */
.dato {
  font-family: var(--dato-tipo);
  font-variant-numeric: tabular-nums;
}

h1 { font-size: var(--t-heading-sm); line-height: var(--lh-medio); }
h2 { font-size: var(--t-subheading); line-height: var(--lh-medio); }
h3 { font-size: 1.3125rem; line-height: 1.2; }
h4 { font-size: var(--t-body); line-height: 1.3; }

@media (min-width: 900px) {
  h1 { font-size: var(--t-heading); line-height: var(--lh-apretado); }
}

.lead {
  font-size: var(--t-body);
  color: var(--apagado);
  max-width: var(--ancho-texto);
}

.muted,
.adminmuted { color: var(--apagado); }

/* ===== 05 · ENLACES Y CONTROLES ===================================== */

/*
 * En este sistema NO hay color de accion primaria. La ficha lo dice
 * literalmente, y el componente que sustituye al boton es un enlace
 * fantasma: 15px, peso 400, sin relleno, 10px de radio en el area de
 * pulsacion, 5px de relleno vertical y una flecha detras.
 *
 * El motivo no es estetico: el unico elemento con color de la pagina
 * tiene que ser la esfera. Un boton relleno de tinta seria la unica
 * mancha solida en pantalla y se la comeria.
 *
 * Se conservan los nombres .btn, .btn--primary y demas porque estan en
 * sesenta y siete plantillas. Lo que cambia es lo que significan.
 */
.btn,
.btn--primary,
.btn--ghost,
.btn--filled,
.btn--lg,
.savebtn,
.srv__link,
.teaser-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;      /* area de pulsacion accesible */
  padding: 5px 0;           /* lo que pide la ficha */
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--tinta);
  font-family: var(--display-tipo);
  font-size: var(--t-body-sm);
  font-weight: 400;
  line-height: var(--lh-suelto);
  letter-spacing: var(--track);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn::after,
.savebtn::after,
.srv__link::after,
.teaser-link a::after {
  content: '\2192';
  transition: transform 0.2s ease;
}

.btn:hover,
.savebtn:hover,
.srv__link:hover,
.teaser-link a:hover { text-decoration: underline; }

.btn:hover::after,
.savebtn:hover::after,
.srv__link:hover::after,
.teaser-link a:hover::after { transform: translateX(3px); }

/* Sin flecha: dentro de una lista o de un parrafo estorba. */
.btn--liso::after,
.btn--sin-flecha::after { content: none; }

.btn[disabled],
.btn:disabled { color: var(--apagado); cursor: not-allowed; }

.btn--block { width: 100%; }

/* Sobre tinta el enlace se invierte. Sigue sin tener relleno. */
.section--tinta .btn,
.adminbar .btn { color: var(--canvas); }

/* La unica accion que si lleva filete: borrar. No es color, es un borde,
   y lleva su palabra al lado. */
.btn--peligro {
  border: 1px solid var(--tinta);
  padding-inline: 1rem;
}

.btn--peligro::after { content: none; }

/* ===== 06 · CABECERA Y PIE ========================================== */

/*
 * Barra superior minima, como pide la ficha: una regla de un pixel, sin
 * fondo propio, sin posicion pegajosa. La capsula flotante que habia
 * antes era el reflejo automatico del sector y peleaba con un sistema
 * donde las superficies van a escuadra.
 */
/*
 * La barra flota sobre el contenido.
 *
 * En la referencia es `absolute`, 48px de alto, a 19 del borde, sin fondo
 * y sin filete: el hero ocupa la ventana entera y pasa por debajo. La
 * nuestra iba en el flujo con fondo y filete, y partia la pantalla con
 * una linea justo donde la referencia no tiene nada.
 *
 * `absolute` y no `fixed`: la referencia la deja marchar al bajar.
 */
.cabecera {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  background: none;
  border: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* 48px de alto a 19 del borde, como la referencia. */
  min-height: max(2.75rem, 3.3333vw);
  padding-block: max(0.75rem, 1.32275vw) 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display-tipo);
  font-size: 1.0625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  white-space: nowrap;
}

/* El buscador va a la vista: con miles de convocatorias, buscar no es una
   accion secundaria que se esconda tras una lupa. */
.nav__buscar {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22rem;
}

.nav__buscar input {
  width: 100%;
  height: 2.5rem;
  border: 0;
  border-bottom: 1px solid var(--filete);
  background: transparent;
  font-family: var(--texto-tipo);
  font-size: var(--t-body-sm);
  color: var(--tinta);
}

.nav__buscar input::placeholder { color: var(--apagado); }
/* El anillo se quita solo cuando el foco NO viene del teclado. Con
   `:focus` a secas se lo quitabamos tambien a quien navega tabulando,
   que es justo a quien sirve — y contradecia la regla de mas arriba. */
.nav__buscar input:focus { border-bottom-color: var(--tinta); }
.nav__buscar input:focus:not(:focus-visible) { outline: none; }

.nav__links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin-inline-start: auto;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--display-tipo);
  font-size: var(--t-body-sm);
  letter-spacing: var(--track);
  text-decoration: none;
  color: var(--apagado);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav__links a:hover { color: var(--tinta); }

/* La pagina activa se marca con un filete, no con relleno. */
.nav__links a.is-active {
  color: var(--tinta);
  border-bottom: 1px solid var(--tinta);
}

.nav__actions { display: flex; align-items: center; gap: 1.25rem; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  background: transparent;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-control);
  padding-inline: 0.9rem;
  font-family: var(--display-tipo);
  font-size: var(--t-body-sm);
  letter-spacing: var(--track);
  color: var(--tinta);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; gap: 1rem; }
  .nav__buscar { order: 3; flex-basis: 100%; max-width: none; }
  .nav__toggle { display: inline-flex; margin-inline-start: auto; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { border-bottom: 1px solid var(--filete); width: 100%; }
  .nav__actions { order: 2; }
}

/* --- Pie --- */
.footer {
  background: var(--tinta);
  color: var(--canvas);
  border-top: 1px solid var(--filete);
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: var(--gap-seccion-min);
}

@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.footer__brand .brand { color: var(--canvas); }

.footer__brand p {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: var(--t-body-sm);
  color: var(--piedra);
}

.footer__col-title {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--piedra);
  margin: 0 0 1.25rem;
}

.footer__col ul { list-style: none; display: grid; gap: 0.6rem; }

.footer__col a {
  font-size: var(--t-body-sm);
  text-decoration: none;
  color: var(--canvas);
}

.footer__col a:hover { text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--t-body-sm);
  color: var(--piedra);
}

.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; }

/* ===== 07 · HERO ==================================================== */

/*
 * Reconstruido midiendo el de OFF+BRAND con un navegador. Las medidas de
 * abajo no son aproximadas: rejilla de 12 columnas, 7 filas alternando
 * 119px y 103px, separacion de 19px, y cada linea del titular en celdas
 * concretas. Es lo que produce la diagonal.
 */
.hero {
  position: relative;
  /* La ventana entera: la cabecera flota por encima y no ocupa sitio. */
  min-height: 100svh;
  overflow: hidden;
  /*
   * Aisla la mezcla y le da suelo.
   *
   * `isolation: isolate` evita que `difference` se calcule contra el
   * resto de la pagina. Pero un grupo aislado arranca con el fondo
   * TRANSPARENTE, y mezclar pergamino contra transparente deja el texto
   * en pergamino: invisible. Hay que pintarle el fondo aqui para que la
   * diferencia tenga contra que restar y el titular salga negro.
   */
  isolation: isolate;
  background: var(--canvas);
}

/* --- La escena: esfera y anillos, detras de todo --- */
.hero__escena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero__orbe {
  position: relative;
  width: min(720px, 62vw);
  aspect-ratio: 1;
  /* Respaldo sin WebGL: el mismo degradado, plano. Se ve igual de quieto
     que la escena con movimiento reducido, que es justo lo que se quiere. */
  background: radial-gradient(
      circle at 68% 30%,
      #facb0e 0%,
      #f7a85f 18%,
      #f06ba8 42%,
      #c9a7d8 58%,
      #78bae6 74%,
      #ffffff 100%
    );
  border-radius: 50%;
  filter: blur(0.4px);
  /* Sin la mascara el respaldo es un disco de borde duro, muy lejos de la
     escena WebGL, que se apaga poco a poco contra el fondo. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
  opacity: 0.85;
}

/* Cuando el lienzo arranca, el degradado de respaldo sobra. */
.hero__orbe.is-3d {
  background: none;
  filter: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero__orbe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.hero__orbe.is-3d canvas { display: block; }

/*
 * Anillos punteados. En la referencia estan a una opacidad de 0,02: no se
 * ven, se intuyen. Giran muy despacio y en sentidos opuestos.
 */
.hero__anillo {
  position: absolute;
  width: min(1191px, 96vw);
  aspect-ratio: 1;
  border: 1px dashed var(--ceniza);
  border-radius: 50%;
  opacity: 0.5;
  animation: hero-girar 220s linear infinite;
}

.hero__anillo--2 {
  width: min(1116px, 90vw);
  opacity: 0.35;
  animation-duration: 160s;
  animation-direction: reverse;
}

@keyframes hero-girar {
  to { transform: rotate(360deg); }
}

/* --- La rejilla --- */
/*
 * Sin `z-index`: a proposito.
 *
 * `mix-blend-mode` mezcla contra lo que hay debajo DENTRO del contexto de
 * apilado mas cercano. Poniendole z-index a este contenedor se creaba un
 * contexto propio que dejaba la esfera fuera, asi que el titular se
 * mezclaba contra nada y quedaba pergamino sobre pergamino: invisible.
 * Basta el orden del documento — la escena va antes en el HTML — para que
 * la rejilla se pinte encima y la mezcla vea la esfera.
 */
.hero__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Las filas de la referencia, exactas: 119 y 103 alternandose. Seis
     filas y no siete: 666 + 95 de separacion + 40 de margen = 801, que
     cabe en los 835 que deja la cabecera en una pantalla de 900. Con una
     septima fila para la entradilla se iba a 938 y quedaba fuera. */
  /* Las filas tambien son proporcionales: 8,2639vw y 7,1429vw dan 119 y
     103 a 1440, que es lo que mide la referencia. */
  grid-template-rows:
    max(3.5rem, 8.2639vw) max(3.25rem, 7.14286vw)
    max(3.5rem, 8.2639vw) max(3.25rem, 7.14286vw)
    max(3.5rem, 8.2639vw) max(3.25rem, 7.14286vw);
  gap: var(--gap-elemento);
  margin-inline: auto;
  /* La primera fila tiene que empezar por debajo de la barra, que ahora
     flota encima: sin este hueco la entradilla se le monta al menu. */
  padding:
    calc(max(2.75rem, 3.3333vw) + var(--gap-elemento))
    max(1rem, var(--gap-elemento))
    max(1rem, 1.65vw);
  align-content: center;
}

.hero__cartela {
  grid-column: 2 / 7;
  grid-row: 1;
  align-self: end;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  margin: 0 0 0.5rem;
}

/*
 * El titular.
 *
 * Color pergamino y mezcla por diferencia. Sobre el fondo pergamino la
 * diferencia da negro; sobre la esfera, el color invertido. Es lo que
 * hace que las letras que la cruzan se vuelvan azul marino sin una sola
 * linea de JavaScript.
 */
.hero__titular {
  display: contents;
  margin: 0;
}

.hero__linea {
  /* `will-change` porque el paralaje la mueve en cada cuadro; sin esto
     el navegador la repinta en vez de recomponerla. */
  will-change: transform;
  font-family: var(--display-tipo);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--canvas);
  mix-blend-mode: difference;
}

.hero__linea--1 { grid-column: 2 / 9;  grid-row: 2; justify-self: start; }
.hero__linea--2 { grid-column: 7 / 12; grid-row: 4; justify-self: end; }
.hero__linea--3 { grid-column: 3 / 9; grid-row: 6; justify-self: start; }

/* Entrada: cada letra sube a su turno. */
.hh-letra {
  display: inline-block;
  will-change: transform, opacity;
}

/* Un <span> que solo contiene un espacio se colapsa a cero de ancho en
   cuanto es inline-block. Con `pre` el espacio cuenta. */
.hh-espacio {
  display: inline-block;
  white-space: pre;
}

/* El retardo de cada letra va aqui y no en un `style=` del HTML: la CSP
   de la web es `style-src 'self'`, sin `unsafe-inline`, asi que el
   navegador descarta cualquier atributo style y la entrada escalonada
   simplemente no ocurria. Con nth-child sale lo mismo y pasa la CSP. */
.hh-letra {
  animation: hero-letra 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.hero__linea--1 { --retardo-linea: 0ms; }
.hero__linea--2 { --retardo-linea: 240ms; }
.hero__linea--3 { --retardo-linea: 480ms; }

.hh-letra:nth-child(1) { animation-delay: calc(var(--retardo-linea) + 0ms); }
.hh-letra:nth-child(2) { animation-delay: calc(var(--retardo-linea) + 26ms); }
.hh-letra:nth-child(3) { animation-delay: calc(var(--retardo-linea) + 52ms); }
.hh-letra:nth-child(4) { animation-delay: calc(var(--retardo-linea) + 78ms); }
.hh-letra:nth-child(5) { animation-delay: calc(var(--retardo-linea) + 104ms); }
.hh-letra:nth-child(6) { animation-delay: calc(var(--retardo-linea) + 130ms); }
.hh-letra:nth-child(7) { animation-delay: calc(var(--retardo-linea) + 156ms); }
.hh-letra:nth-child(8) { animation-delay: calc(var(--retardo-linea) + 182ms); }
.hh-letra:nth-child(9) { animation-delay: calc(var(--retardo-linea) + 208ms); }
.hh-letra:nth-child(10) { animation-delay: calc(var(--retardo-linea) + 234ms); }
.hh-letra:nth-child(11) { animation-delay: calc(var(--retardo-linea) + 260ms); }
.hh-letra:nth-child(12) { animation-delay: calc(var(--retardo-linea) + 286ms); }
.hh-letra:nth-child(13) { animation-delay: calc(var(--retardo-linea) + 312ms); }
.hh-letra:nth-child(14) { animation-delay: calc(var(--retardo-linea) + 338ms); }
.hh-letra:nth-child(15) { animation-delay: calc(var(--retardo-linea) + 364ms); }
.hh-letra:nth-child(16) { animation-delay: calc(var(--retardo-linea) + 390ms); }
.hh-letra:nth-child(17) { animation-delay: calc(var(--retardo-linea) + 416ms); }
.hh-letra:nth-child(18) { animation-delay: calc(var(--retardo-linea) + 442ms); }
.hh-letra:nth-child(19) { animation-delay: calc(var(--retardo-linea) + 468ms); }
.hh-letra:nth-child(20) { animation-delay: calc(var(--retardo-linea) + 494ms); }

@keyframes hero-letra {
  from { transform: translateY(0.9em); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* La entradilla y los enlaces van arriba a la derecha, en el hueco que
   deja la cartela en la primera fila. Asi el titular se queda solo con
   su diagonal, como en la referencia. */
.hero__pie {
  grid-column: 8 / 12;
  grid-row: 1;
  align-self: start;
  display: grid;
  gap: 0.875rem;
  justify-items: start;
}

.hero__entrada {
  max-width: 30rem;
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--apagado);
  animation: hero-entrar 900ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  animation: hero-entrar 900ms cubic-bezier(0.16, 1, 0.3, 1) 1050ms both;
}

.hero__desplazar {
  grid-column: 10 / 13;
  grid-row: 6;
  align-self: end;
  justify-self: end;
  margin: 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--canvas);
  mix-blend-mode: difference;
  transition: opacity 200ms linear;
  /* `backwards` y no `both`: con `both` la animacion se queda dueña de la
     opacidad para siempre y gana a cualquier valor posterior, asi que el
     aviso no se podia desvanecer al bajar. */
  animation: hero-entrar 900ms ease 1400ms backwards;
}

@keyframes hero-entrar {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* --- Pantallas medianas y moviles ---
   En estrecho no hay diagonal que valga: la rejilla de doce columnas pasa
   a ser una columna y se ordena a mano. Se usa flex y no grid porque
   mandando todo a `grid-column: 1 / -1` la cartela y la entradilla caian
   en la misma celda de la primera fila y se pisaban. */
@media (max-width: 1000px) {
  .hero { min-height: 0; }

  .hero__rejilla {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-block: 3.5rem 3.25rem;
  }

  /* `align-self: end` del escritorio apunta al eje vertical; en una
     columna flex apunta al horizontal y la mandaba a la derecha. */
  .hero__cartela { order: 1; align-self: flex-start; margin-bottom: 1.75rem; }
  .hero__linea { order: 2; justify-self: auto; align-self: auto; }
  .hero__linea--2 { order: 3; margin-inline-start: auto; }
  .hero__linea--3 { order: 4; }
  .hero__pie { order: 5; margin-top: 2rem; }
  .hero__desplazar { display: none; }

  /* La esfera sube para quedarse detras del titular, que se lee restado
     sobre ella. La entradilla es texto normal: sobre color fuerte pierde
     contraste, asi que se queda fuera. */
  .hero__orbe { width: min(560px, 88vw); transform: translateY(-14%); }
  .hero__anillo { opacity: 0.3; }
}

/* Cursor. Mismo truco que el titular: pergamino restado del fondo da
   negro, y sobre la esfera se invierte. Lo crea assets/js/hero-mov.js
   solo si hay raton de verdad. */
.cursor-punto {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--canvas);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, width 220ms ease, height 220ms ease;
}

.cursor-punto.is-visible { opacity: 1; }
.cursor-punto.is-grande { width: 58px; height: 58px; }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .cursor-punto { display: none; }
}

@media (max-width: 700px) {
  /* A este ancho la esfera compite con el titular en vez de acompanarlo. */
  .hero__orbe { width: 86vw; opacity: 0.75; }
  .hero__linea { white-space: normal; }
}

/* Con movimiento reducido no entra nada: aparece ya puesto. */
@media (prefers-reduced-motion: reduce) {
  .hh-letra,
  .hero__entrada,
  .hero__acciones,
  .hero__desplazar { animation: none; }
  .hero__anillo { animation: none; }
}

/* ===== 07 bis · EL LENGUAJE DEL HERO, EN TODA LA WEB ================ */

/*
 * El hero se rehizo midiendo OFF+BRAND. Esto lleva sus cuatro rasgos al
 * resto de las paginas, para que la web sea una sola cosa:
 *
 *   1. La misma rejilla de 12 columnas, alineada al pixel con la del
 *      hero. Los bloques ocupan tramos concretos y quedan asimetricos.
 *   2. La misma escena de anillos punteados girando detras.
 *   3. La misma resta: el titular en pergamino con `difference`, que da
 *      negro sobre el fondo y se invierte al cruzar la escena.
 *   4. La misma entrada escalonada y el mismo paralaje al bajar.
 */

/* --- 1. La rejilla ------------------------------------------------- */

/*
 * Alineada con la del hero, y eso pide una cuenta.
 *
 * `.hero__rejilla` mide 1400 de caja con 1,25rem de relleno: su contenido
 * va de x=40 a x=1400 y la columna 2 empieza en 155. `.container` mide lo
 * mismo pero con 2,5rem: su contenido va de 60 a 1380 y la columna 2
 * empezaria en 172. Diecisiete pixeles de desfase que se notan cuando un
 * titular de seccion queda debajo del titular del hero. El margen
 * negativo devuelve el relleno del contenedor al del hero.
 */
.rejilla12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-elemento);
}

@media (min-width: 1000px) {
  .container > .rejilla12 { margin-inline: -1.25rem; }
}


/* --- 2. La escena ---------------------------------------------------- */

/*
 * Los anillos concentricos que pide la ficha para dar continuidad entre
 * secciones "sin usar lineas divisorias". Van detras de todo, no reciben
 * puntero y giran tan despacio que no se ven moverse: se nota que la
 * pagina esta viva, no que algo gira.
 *
 * Se pintan con pseudoelementos y se eligen por posicion, no por clase:
 * la primera seccion de cada pagina y el cierre. Asi ninguna de las 25
 * paginas necesita marcado nuevo, y una pagina que se añada mañana lo
 * hereda sola. `::before` lleva dos anillos — borde y contorno con
 * separacion — porque un elemento solo da una forma y hacen falta dos.
 *
 * La esfera iridiscente NO se reparte por todas las secciones: es el
 * unico acontecimiento cromatico del sitio y sale en la apertura de cada
 * pagina y en su cierre. En doce secciones dejaria de ser un
 * acontecimiento.
 */
/* Hueco para la barra, que ahora flota por encima. */
main > section:first-of-type:not(.hero):not(.section--sin-escena) {
  padding-top: calc(var(--gap-seccion) + max(2.75rem, 3.3333vw));
}

/*
 * Salida de la escena.
 *
 * La memoria es un documento, no una pantalla de producto: con la esfera
 * detras, el texto queda sobre un degradado y encima se imprime. Las
 * paginas que son documento se marcan y quedan fuera del reparto
 * automatico por posicion.
 */
main > section:first-of-type:not(.hero):not(.section--sin-escena),
.section--cta,
.section--escena {
  position: relative;
  /*
   * `isolation` para que la resta no se calcule contra el resto de la
   * pagina, y fondo propio porque un grupo aislado arranca TRANSPARENTE:
   * restar pergamino de transparente deja el titular en pergamino, o sea
   * invisible. Es el mismo error que costo tres vueltas en el hero.
   */
  isolation: isolate;
  overflow: hidden;
  background: var(--canvas);
}

main > section:first-of-type.section--subtle,
.section--cta.section--subtle,
.section--escena.section--subtle { background: var(--papel); }

main > section:first-of-type:not(.hero):not(.section--sin-escena)::before,
.section--cta::before,
.section--escena::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1116px, 92vw);
  aspect-ratio: 1;
  margin: calc(min(1116px, 92vw) / -2);
  border: 1px dashed var(--ceniza);
  border-radius: 50%;
  /* El segundo anillo, sin un segundo elemento. */
  outline: 1px dashed var(--ceniza);
  outline-offset: 37px;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
  animation: hero-girar 240s linear infinite;
}

/* La esfera. Plana y no WebGL: una escena de Three.js por seccion es GPU
   tirada, y aqui hace de telon, no de sujeto. */
main > section:first-of-type:not(.hero):not(.section--sin-escena)::after,
.section--cta::after,
.section--escena.section--ancla::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, 52vw);
  aspect-ratio: 1;
  margin: calc(min(620px, 52vw) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle at 66% 32%,
    #fce173 0%,
    #facda2 18%,
    #f6a9cd 42%,
    #e0cce8 58%,
    #b1d7f1 76%,
    #ffffff 100%
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 74%);
  opacity: 0.88;
  pointer-events: none;
  z-index: -1;
}

/*
 * En la apertura la esfera se corre a la izquierda para que la cruce el
 * titular — que se resta y por eso la aguanta — y deje libre la columna
 * derecha, donde va el texto de apoyo. Con la esfera a la derecha el
 * parrafo caia encima y en gris sobre rosa no habia quien lo leyera.
 * En el cierre va centrada detras del titular.
 */
main > section:first-of-type:not(.hero)::after,
.section--cta::after {
  transform: translateX(-34%);
}

/* Sin `z-index` en el contenido: crear un contexto de apilado aqui saca
   la escena del fondo contra el que se resta y el titular desaparece. */
main > section:first-of-type:not(.hero):not(.section--sin-escena) > .container,
.section--cta > .container,
.section--escena > .container { position: relative; }

/* --- 3. La resta ----------------------------------------------------- */

/*
 * Solo en las secciones con escena. En una seccion normal el titular es
 * tinta y punto: restar contra un fondo liso da el mismo negro, pero deja
 * el titular a merced de cualquier fondo que se le ponga detras el dia de
 * manana.
 */
main > section:first-of-type:not(.hero):not(.section--sin-escena) .section__header h1,
main > section:first-of-type:not(.hero):not(.section--sin-escena) .section__header h2,
.section--cta .section__header h1,
.section--cta .section__header h2,
.section--escena .section__header h1,
.section--escena .section__header h2 {
  color: var(--canvas);
  mix-blend-mode: difference;
}

/* --- 4. La pagina entera sobre la rejilla del hero ------------------- */

/*
 * Antes habia dos bordes izquierdos: el titular del hero empezaba en 155
 * (columna 2 de su rejilla) y el contenido de las secciones en 60 (el
 * relleno del contenedor). Noventa y cinco pixeles de diferencia que se
 * leen como descuido.
 *
 * Ahora el contenedor de cada seccion ES la rejilla de 12 columnas, con
 * la misma geometria que la del hero, y todo lo que cuelga de el ocupa de
 * la columna 2 a la 12 por defecto. Un solo borde izquierdo en toda la
 * web, y el mismo que el del hero.
 *
 * La cabecera pasa a `display: contents` para que sus tres piezas
 * (cartela, titular y apoyo) sean items de esa misma rejilla en vez de
 * abrir una segunda rejilla anidada dentro de una celda, que volveria a
 * sangrar el titular una columna mas.
 */
@media (min-width: 1000px) {
  .section > .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gap-elemento);
    /* El relleno ya es el de la rejilla: lo pone `.container`. */
  }

  .section > .container > * { grid-column: 2 / 12; }
  .section > .container > .a-sangre { grid-column: 1 / -1; }

  /*
   * `display: contents` SOLO cuando la cabecera cuelga directamente del
   * contenedor de la seccion.
   *
   * Sin acotar, una cabecera anidada dentro de otra rejilla —el panel del
   * cliente tiene una— disuelve su caja y sus tres piezas se reparten por
   * las columnas de esa otra rejilla. El bloque entero se descuadra. Una
   * cabecera anidada se queda como bloque normal, que es lo correcto.
   */
  .section > .container > .section__header { display: contents; }

  .section > .container > .section__header > .section__eyebrow {
    grid-column: 2 / 8;
    margin-bottom: 0.5rem;
  }

  /*
   * Titular y apoyo comparten fila: 2/9 y 9/12.
   *
   * Con el titular hasta la columna 11 el apoyo no cabia a su lado y
   * caia a la fila siguiente, con lo que bajo el titular quedaban 250px
   * de nada antes del contenido. Asi es el peso asimetrico que pide la
   * ficha —texto grande a la izquierda, apoyo a la derecha— y ademas el
   * contenido sube.
   */
  .section > .container > .section__header > :is(h1, h2) {
    grid-column: 2 / 9;
    font-size: var(--t-heading);
    line-height: var(--lh-apretado);
  }

  .section > .container > .section__header > p:not(.section__eyebrow) {
    grid-column: 9 / 12;
    align-self: end;
    max-width: none;
    margin: 0;
  }

  /* Los 76px que separan la cabecera del contenido. Antes los ponia el
     margen inferior de .section__header, que con `display: contents` ya
     no existe: pasan al primer bloque que viene detras. */
  .section > .container > .section__header + * { margin-top: var(--gap-seccion-min); }

  .section--cta > .container > * { grid-column: 1 / -1; }
}

/*
 * Una seccion de documento no lleva el relleno grande de una apertura: va
 * debajo de una, y ya hay aire de sobra entre las dos.
 */
.section--sin-escena { padding-top: 0; }

/* --- 5. La entrada ---------------------------------------------------- */

/*
 * El estado oculto lo pone `esta-partido`, que anade el JavaScript. Si el
 * script no llega, el titular se ve entero: nunca al reves.
 */
.pal {
  display: inline-block;
  /* Recorta por abajo para que la palabra suba desde detras del borde.
     El relleno de arriba da aire a las tildes de las mayusculas, que con
     interlineado 0,8 se cortarian. */
  overflow: hidden;
  padding: 0.14em 0 0.02em;
  margin: -0.14em 0 -0.02em;
  vertical-align: bottom;
}

/*
 * Sin `will-change`.
 *
 * Promociona el tramo a su propia capa de composicion, y un descendiente
 * en capa aparte deja al titular restandose contra un fondo vacio: sale
 * pergamino sobre pergamino, o sea invisible. Se vio en el ancla de la
 * portada, donde el titular desaparecio entero. En `.hero__linea` si esta
 * puesto, y ahi no molesta porque va en el elemento que mezcla, no dentro.
 */
.pal__i { display: inline-block; }

.esta-partido .pal__i {
  transform: translateY(105%);
  transition: transform var(--mov-grande);
}

.esta-partido.esta-dentro .pal__i { transform: translateY(0); }

/* --- 6. Ornamento entre secciones ------------------------------------- */

/*
 * Cuando dos secciones seguidas comparten fondo, la ficha prohibe la
 * linea divisoria. Este es el recurso que deja: un anillo pequeño
 * centrado, del mismo trazo punteado que la escena.
 */
.ornamento {
  display: grid;
  place-items: center;
  padding-block: var(--gap-seccion-min);
}

.ornamento::before {
  content: '';
  width: 116px;
  aspect-ratio: 1;
  border: 1px dashed var(--ceniza);
  border-radius: 50%;
  animation: hero-girar 180s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .escena__anillo,
  .ornamento::before { animation: none; }
  .esta-partido .pal__i { transform: none; transition: none; }
}

/* ===== 08 · SUPERFICIES ============================================= */

/*
 * Una sola definicion de tarjeta para todo el sitio. Antes habia catorce
 * componentes con el mismo aspecto y cuatro rellenos distintos.
 * Papel, filete de un pixel, esquina recta, 30px de relleno, sin sombra.
 */
.tarjeta,
.cccard,
.orgcard,
.showcard,
.pricing-card,
.capcard,
.leadcard,
.match-card,
.factbox,
.auth-card,
.adminpanel,
.pan,
.sector-intro-card,
.sector-bento__item,
.prefill,
.artcard,
.faq-item,
.empty-state,
.notice-banner,
.panelayuda,
.avisoviejo,
.concnota,
.sourcebar,
.filters,
.kpi,
.dcard,
.factor,
.tipo,
.srv {
  /*
   * Sin relleno y sin marco: celda de rejilla, no caja.
   *
   * El hero no tiene ni un rectangulo. Cada convocatoria iba en uno gris
   * con filete alrededor, y en una parrilla de seis se ven los seis
   * rectangulos antes que el texto. Ahora se separan por un filete
   * arriba, que es como la referencia monta su parrilla de logotipos: la
   * rejilla se ve, la caja no.
   */
  background: none;
  border: 0;
  border-top: 1px solid var(--filete);
  border-radius: 0;
  padding: var(--pad-tarjeta) 0 0;
}

/* El unico filete que hay es el de arriba: es el que responde. */
.tarjeta:hover,
.cccard:hover,
.orgcard:hover,
.showcard:hover,
.match-card:hover,
.artcard:hover { border-top-color: var(--tinta); }

/* --- Distintivos --- */
/*
 * Nunca se usa solo el color para decir algo: en este sistema no hay
 * colores de estado, asi que cada distintivo lleva su palabra y se
 * distingue por el filete.
 */
/*
 * Los datos van como tipografia, no en cajitas.
 *
 * "QUEDAN 1 DIAS" y "14.000 €" iban cada uno en su recuadro con filete y
 * relleno. La referencia no encajona los datos: los pone en
 * monoespaciada, en mayusculas, en gris, y los separa con aire. Un
 * recuadro por dato convierte una tarjeta en un formulario, y en una
 * parrilla de seis se ven treinta rectangulos antes que el texto.
 */
.chip,
.tag {
  display: inline;
  border: 0;
  padding: 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  white-space: nowrap;
  text-decoration: none;
}

/* Lo urgente se distingue por color de texto, no por marco. */
.chip--urgente,
.tag--ok { color: var(--tinta); }

.chip--link:hover { text-decoration: underline; }

/* El aire es el que separaba antes el filete. */
.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
}

/*
 * Lo que si sigue siendo superficie.
 *
 * Un aviso, un panel de filtros o un estado vacio no son contenido en
 * parrilla: son piezas de interfaz que tienen que separarse del texto que
 * las rodea. Conservan su caja.
 */
.notice-banner,
.avisoviejo,
.concnota,
.filters,
.empty-state,
.panelayuda {
  background: var(--papel);
  border: 1px solid var(--filete);
  padding: var(--pad-tarjeta);
}

.section--subtle .notice-banner,
.section--subtle .avisoviejo,
.section--subtle .concnota,
.section--subtle .filters,
.section--subtle .empty-state,
.section--subtle .panelayuda { background: var(--canvas); }

/* --- Paneles de llamada --- */
/*
 * El cierre.
 *
 * Era una caja de tinta maciza centrada, y tapaba entera la escena de la
 * seccion: el ultimo momento ancla de cada pagina se veia como un
 * rectangulo negro. Ahora es lo mismo que el hero — titular grande en
 * pergamino restandose sobre la esfera — y por eso deja de ser una
 * tarjeta.
 *
 * La composicion es asimetrica y no centrada: el titular a la izquierda
 * cruza la esfera y la aguanta porque se resta; el parrafo y los enlaces
 * a la derecha se quedan sobre pergamino limpio. Centrado, el parrafo
 * caia justo en el nucleo de la esfera y en gris sobre rosa no habia
 * quien lo leyera.
 */
.cta-panel {
  display: grid;
  gap: 1.75rem;
}

.cta-panel h2 {
  font-size: var(--t-heading-sm);
  line-height: var(--lh-medio);
  text-transform: uppercase;
  margin: 0;
  color: var(--canvas);
  mix-blend-mode: difference;
}

.cta-panel p { max-width: 34rem; margin: 0; color: var(--apagado); }

.cta-panel__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }

@media (min-width: 1000px) {
  .cta-panel {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-elemento);
    align-items: end;
  }

  .cta-panel h2 {
    grid-column: 2 / 9;
    font-size: var(--t-heading);
    line-height: var(--lh-apretado);
  }

  .cta-panel p { grid-column: 9 / 12; }

  .cta-panel__actions {
    grid-column: 2 / 9;
    margin-top: 1.25rem;
  }
}

/* La variante "vivid" ha desaparecido del marcado y de la hoja: el cierre
   ya no es una tarjeta que pintar. */

/* ===== 09 · CATALOGO ================================================ */

.catalog { display: grid; gap: var(--gap-elemento); }

@media (min-width: 1000px) {
  /*
   * Sobre la rejilla, no en una barra lateral de ancho fijo.
   *
   * `.catalog` lleva tambien la clase `container`, asi que la regla de
   * arriba ya lo ha convertido en la rejilla de 12 columnas de la
   * seccion. Aqui solo se colocan sus dos partes en ella: filtros de la 2
   * a la 5, resultados de la 5 a la 12. Antes eran `17rem 1fr` con 48px
   * de hueco, dos medidas que no caian sobre ninguna linea.
   */
  .catalog { align-items: start; }
  .catalog > :first-child { grid-column: 2 / 5; }
  .catalog > :last-child { grid-column: 5 / 12; }
}

/* Dentro de una seccion en papel, un panel de papel no se ve. Se le da
   la vuelta, como ya se hace con el resto de superficies. */
.section--subtle .filters,
.section--subtle /* Alineado a la izquierda como las filas: centrado rompia el eje del
   indice justo cuando no hay nada con que compararlo. */
.empty-state { background: var(--canvas); }

.filters { display: grid; gap: 1.25rem; }

.filters__title {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.filters__grid { display: grid; gap: 1rem; }
.filters__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.catalog__count {
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  color: var(--apagado);
  margin-bottom: 1.5rem;
}

.catalog__count-nota { display: block; margin-top: 0.35rem; }

.catalog__results,
.match-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filete);
}

/*
 * Cada convocatoria es una fila de indice, no una tarjeta.
 *
 * Con miles de entradas, una rejilla de tarjetas obliga a leer cada una
 * entera para descartarla. Una fila con el titulo grande a la izquierda y
 * la compatibilidad alineada a la derecha se recorre con la vista, que es
 * lo que de verdad hace quien busca.
 *
 * La estructura real del marcado, que hay que respetar:
 *
 *   article.match-card
 *     div.match-card__top       contenido + puntuacion
 *       div                     meta / titulo / descripcion / chips
 *       div.match-card__score   opcional
 *     div.match-card__factors   opcional
 *     div.match-card__actions   opcional
 *
 * La primera version de esta hoja partia .match-card en tres columnas de
 * 7rem / 1fr / 12rem dando por hecho tres hijos en ese orden. Como el
 * primer hijo es __top y lo lleva todo dentro, el contenido entero caia
 * en la columna de 7rem: el listado se leia en una tira de 130px con la
 * pagina vacia al lado. Estilar a ciegas sale caro.
 */
.match-list .match-card {
  display: block;
  border: 0;
  border-bottom: 1px solid var(--filete);
  background: transparent;
  padding: 1.75rem 0.25rem;
}

/* Pintaba de papel, que es justo el fondo que ya tiene la seccion donde
   vive: no se notaba nada. El recurso del sistema es el filete. */
.match-list .match-card:hover { border-top-color: var(--tinta); }

.match-card__top {
  display: grid;
  gap: 0.5rem 2rem;
  align-items: start;
}

@media (min-width: 720px) {
  /* La puntuacion a la derecha, en su propia columna estrecha: es la
     cifra que se recorre en vertical al comparar convocatorias. */
  .match-card__top { grid-template-columns: minmax(0, 1fr) 7rem; }
}

/*
 * Linea de metadatos del listado: tipo y organismo.
 *
 * Ni mayusculas ni monoespaciada. Iba en las dos cosas y un nombre de
 * organismo de sesenta caracteres asi no se lee: es la linea que dice de
 * quien es la convocatoria, no un codigo que se compare en columna.
 */
.match-card__meta {
  font-family: var(--texto-tipo);
  font-size: var(--t-body-sm);
  color: var(--apagado);
  margin: 0;
}

.match-card__title {
  font-family: var(--display-tipo);
  font-size: var(--t-body);
  line-height: 1.25;
  margin: 0.5rem 0 0;
  max-width: 54ch;
}

@media (min-width: 900px) {
  .match-card__title { font-size: 1.375rem; }
}

.match-card__title a { text-decoration: none; }
.match-card__title a:hover { text-decoration: underline; }

.match-card__desc {
  margin: 0.5rem 0 0;
  max-width: 68ch;
  font-size: var(--t-body-sm);
  color: var(--apagado);
  /* Dos lineas y basta: la descripcion orienta, no sustituye a la ficha. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.match-card .chiprow { margin-top: 0.9rem; }

/* La puntuacion: cifra grande en monoespaciada, alineada a la derecha en
   escritorio para que la columna se lea de un vistazo. */
.match-card__score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--dato-tipo);
}

@media (min-width: 720px) {
  .match-card__score {
    display: block;
    text-align: right;
  }
}

.match-card__score strong {
  display: block;
  font-size: var(--t-subheading);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track);
}

.match-card__score span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

/* Los seis factores, en una linea de datos. */
.match-card__factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.match-card__factors b { font-weight: 400; color: var(--tinta); }

.match-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.match-card--vencida { opacity: 0.55; }

/* Paginacion */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete);
}

.pager__nums { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.pager__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  text-decoration: none;
}

.pager__n:hover { border-color: var(--tinta); }
/* Era el unico boton con relleno de todo el sitio, justo lo que el enlace
   fantasma viene a sustituir. Se marca con el filete, como los demas. */
.pager__n--actual { border-color: var(--tinta); color: var(--tinta); }
.pager__hueco { color: var(--apagado); }
.pager__info { font-family: var(--dato-tipo); font-size: var(--t-body-sm); color: var(--apagado); }
.pager__salto--off { opacity: 0.4; pointer-events: none; }

/* Alineado a la izquierda como las filas: centrado rompia el eje del
   indice justo cuando no hay nada con que compararlo. */
.empty-state { text-align: left; }

/* ===== 10 · FICHA DE CONVOCATORIA =================================== */

/* Se queda solo con lo suyo: el tamaño y la resta los hereda de
   .section__header, igual que cualquier otro titular del sitio. Antes se
   quedaba en 46px, sin mayusculas de 70 ni inversion sobre la esfera. */
.detail__title { max-width: 24ch; }

/*
 * Escalones de titular.
 *
 * El display de 70px es para titulares de marca, de cinco palabras. El
 * nombre de una convocatoria puede pasar de 150 caracteres: a 70px son
 * ocho lineas y una pantalla entera. La clase la pone tit_clase_tamano()
 * en PHP contando caracteres. El lenguaje no cambia — mayusculas,
 * tracking positivo, resta sobre la esfera —, solo el cuerpo.
 */
/*
 * Con el mismo alcance que la regla base, o pierde.
 *
 * `.section > .container > .section__header > :is(h1,h2)` son tres clases
 * y un elemento; `.section__header h1.titular--largo` son dos y uno. La
 * base ganaba y un titular de 190 caracteres salia a 70px: diez lineas y
 * media pantalla. Es la misma trampa que con `.detail__main`.
 */
@media (min-width: 1000px) {
  .section > .container > .section__header > h1.titular--medio,
  .section > .container > .section__header > h2.titular--medio {
    font-size: var(--t-heading-sm);
    line-height: var(--lh-medio);
  }

  .section > .container > .section__header > h1.titular--largo,
  .section > .container > .section__header > h2.titular--largo {
    /* Una columna mas que el escalon medio: es el titular que mas texto
       tiene y el que menos cuerpo, asi que le viene bien el ancho. */
    grid-column: 2 / 11;
    font-size: var(--t-subheading);
    line-height: var(--lh-medio);
  }
}

.detail__lead { margin-top: 1.75rem; max-width: var(--ancho-texto); color: var(--apagado); }

.detail__grid {
  display: grid;
  gap: var(--gap-elemento);
  margin-top: var(--gap-seccion-min);
}

@media (min-width: 1000px) {
  /*
   * Igual que el catalogo: `.detail__grid` tambien es `container`, ya es
   * la rejilla de 12, y aqui solo se colocan cuerpo y lateral en ella.
   *
   * Con el selector doble por especificidad: `.section > .container > *`
   * (dos clases) manda a todos los hijos a 2/12, y `.detail__main` a
   * secas (una clase) perdia. Cuerpo y lateral salian uno debajo de otro
   * ocupando el ancho entero.
   */
  .detail__grid { align-items: start; }
  .container.detail__grid > .detail__main { grid-column: 2 / 9; }
  .container.detail__grid > .detail__side { grid-column: 9 / 12; }
}

/* 30px es el relleno de tarjeta del sistema; los 40px de antes no eran
   ninguna medida del sistema. */
.detail__main { display: grid; gap: var(--pad-tarjeta); }
.detail__side { display: grid; gap: var(--gap-elemento); }

.detail__oficial {
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
}

/* Aviso de convocatoria sin fecha o antigua. Filete a la izquierda, no
   fondo de color: en este sistema no hay color de aviso. */
.avisoviejo,
.articulo__aviso,
.aviso-off,
.notice-banner,
.adminnotice,
.form-error,
.adminerr {
  border: 0;
  border-left: 2px solid var(--tinta);
  background: var(--papel);
  padding: 1.1rem 1.4rem;
  font-size: var(--t-body-sm);
}

.avisoviejo__t,
.factbox__title,
.pan__title,
.prefill__title,
.dcard__label,
.sourcebar__caption,
.concnota strong {
  display: block;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 0.9rem;
}

/*
 * Datos de la ficha.
 *
 * El marcado es un <dl> plano: dt, dd, dt, dd... sin envoltorios. Sin
 * regla propia, cada par se apila con el mismo peso y la columna se lee
 * como un muro de veinte lineas iguales. Lo que separa etiqueta de valor
 * no es el espacio: es que la etiqueta va en cartela (11px, mayusculas,
 * apagada) y el valor en el cuerpo normal.
 */
.factbox { display: grid; gap: 1.1rem; }

.minitabla,
.factbox dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.minitabla dt,
.factbox dl dt {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  padding-top: 0.9rem;
}

.minitabla dd,
.factbox dl dd {
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

.minitabla dd:last-child,
.factbox dl dd:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.factbox dl dd small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  color: var(--apagado);
}

/* Cuando el marcado SI envuelve cada par, la fila va en horizontal. */
.minitabla div,
.factbox dl div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

.minitabla div:last-child,
.factbox dl div:last-child { border-bottom: 0; }

.minitabla div dt,
.factbox dl div dt { padding-top: 0; }

.minitabla div dd,
.factbox dl div dd { margin: 0; padding: 0; border-bottom: 0; font-family: var(--dato-tipo); }

.cnaeraw { font-family: var(--dato-tipo); font-size: var(--t-body-sm); color: var(--apagado); }

/* Lectura del encaje: seis factores, cada uno con su peso y su barra de
   un pixel. Veinte barras gruesas en una lista compiten entre si. */
.lectura,
.score-factors,
.factores { display: grid; gap: 0; border-top: 1px solid var(--filete); }

.lectura__row,
.score-factor {
  display: grid;
  gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

@media (min-width: 700px) {
  /*
   * Dos reglas y no una: `.score-factor` tiene tres hijos —nombre, peso y
   * barra— pero `.lectura__row` solo tiene dos, y con tres columnas su
   * explicacion caia en la de 4rem. Con `min-width: 0` encima, el texto
   * se partia letra a letra en una columna de 24px.
   */
  .score-factor { grid-template-columns: 13rem 4rem 1fr; align-items: baseline; }
  .lectura__row { grid-template-columns: 13rem 1fr; align-items: baseline; }
}

.lectura__peso,
.score-factor__weight,
.factor__peso {
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.score-factor--total { border-bottom: 0; border-top: 1px solid var(--tinta); }

.ccbar {
  height: 1px;
  background: var(--piedra);
  flex: 1;
}

/* El relleno lo pinta ahora un SVG: `width` en un <rect> es atributo de
   presentacion y la CSP lo deja pasar, al contrario que un `style=`. */
.barra { display: block; width: 100%; height: 1px; fill: var(--tinta); }

/* Concesiones: lo que de verdad se ha repartido. */
.concgrid { display: grid; gap: var(--gap-elemento); }

@media (min-width: 700px) { .concgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .concgrid { grid-template-columns: repeat(4, 1fr); } }

.concdato { border: 1px solid var(--filete); padding: var(--pad-tarjeta); background: var(--papel); }

.concdato__t {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.concdato__n {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-subheading);
  line-height: 1;
}

.concnota { font-size: var(--t-body-sm); color: var(--apagado); }

/* ===== 11 · PANEL DEL CLIENTE ======================================= */

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--tinta);
}

.dashboard-header h1 {
  font-size: var(--t-heading-sm);
  line-height: var(--lh-medio);
  text-transform: uppercase;
}

.dashboard-header__actions { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.livestats {
  display: grid;
  gap: var(--gap-elemento);
  margin-top: 2.5rem;
}

@media (min-width: 700px) { .livestats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .livestats { grid-template-columns: repeat(4, 1fr); } }

.livestats > div,
.livestats > li,
.kpi { border: 1px solid var(--filete); background: var(--papel); padding: var(--pad-tarjeta); }

.livestats strong,
.kpi strong,
.dstat,
.dcard__score strong,
.orgcard__n,
.cccard__n,
.orglist__n,
.panlist__n,
.pricing-card__price,
.trust-stat strong,
.capcard__num,
.flow__num,
.pipeline__n,
.factor__n,
.srv__num,
.fases__n {
  font-family: var(--dato-tipo);
  font-size: var(--t-subheading);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track);
  display: block;
}

.prioridad { display: grid; gap: 0; border-top: 1px solid var(--filete); }

/* `.prioridad__cab` ya no existe: era una regla de cartela —mono, 11px,
   mayusculas, apagado— aplicada al bloque entero, y dentro habia acabado
   un titular y un parrafo de prosa. Los gritaba los dos. Ahora ese bloque
   usa `.section__header`, que es el componente del sitio. */

.prioridad__item {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--filete);
}

@media (min-width: 800px) {
  .prioridad__item { grid-template-columns: 5rem 1fr 5rem; align-items: baseline; }
}

.prioridad__dias,
.prioridad__score { font-family: var(--dato-tipo); }
.prioridad__org { font-size: var(--t-body-sm); color: var(--apagado); }

/* ===== 12 · FORMULARIOS ============================================= */

/*
 * Los campos son una regla inferior, no una caja.
 *
 * Quince recuadros grises pesan mucho en pantalla y compiten con el
 * resultado, que es lo que la gente ha venido a ver. Con una sola linea
 * debajo, el formulario se lee como una ficha que se rellena a mano.
 */
.form-field { display: grid; gap: 0.5rem; }
.form-field--wide { grid-column: 1 / -1; }

.form-field label,
.filters label {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
input[type='tel'],
input[type='date'],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--filete);
  border-radius: 0;
  background: transparent;
  font-family: var(--texto-tipo);
  font-size: var(--t-body-sm);
  color: var(--tinta);
  transition: border-color 0.2s ease;
}

textarea { min-height: 6rem; resize: vertical; }

input:focus,
select:focus,
textarea:focus { border-bottom-color: var(--tinta); }

/* Ver la nota del buscador: el anillo solo se retira con raton. */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

input::placeholder,
textarea::placeholder { color: var(--apagado); }

/* Dentro de una tarjeta el campo si lleva caja: sin ella no se distingue
   del texto que tiene alrededor. */
.auth-card input,
.auth-card select,
.auth-card textarea,
.adminpanel input,
.adminpanel select,
.adminpanel textarea {
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  padding-inline: 0.75rem;
}

input[type='checkbox'],
input[type='radio'] { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: #1d1d1d; }

.checkline { display: flex; align-items: center; gap: 0.7rem; font-size: var(--t-body-sm); }
.form-nota { font-size: var(--t-body-sm); color: var(--apagado); }
.opt { color: var(--apagado); }

/* --- Acceso --- */

/*
 * Sobre la rejilla, como el resto.
 *
 * Estaba centrado con `place-items: center`, y era el unico sitio de la
 * web con otro eje: el titular arrancaba en 288 y su cartela en 443, sin
 * alinearse ni entre ellas. Ahora es la apertura de cualquier otra
 * pagina: cartela y titular desde la columna 2, formulario debajo a la
 * izquierda y la esfera ocupando la derecha.
 */
.auth-shell {
  display: grid;
  min-height: 70vh;
  padding-block: var(--gap-seccion-min);
  align-content: center;
}

.auth-card { width: min(28rem, 100%); display: grid; gap: 1.25rem; }

@media (min-width: 1000px) {
  .container.auth-shell > .auth-card { grid-column: 2 / 7; }
}
.auth-card--peligro { border-color: var(--tinta); }
.auth-switch { font-size: var(--t-body-sm); color: var(--apagado); }

/* ===== 13 · CONTENIDO =============================================== */

.articulo { display: grid; gap: 3rem; }

@media (min-width: 1000px) {
  .articulo { grid-template-columns: 1fr 17rem; align-items: start; }
}

.articulo__cuerpo { max-width: var(--ancho-texto); }

.articulo__texto > * + * { margin-top: 1.4rem; }

.articulo__texto h2 {
  margin-top: 3rem;
  font-size: var(--t-subheading);
  text-transform: uppercase;
}

.articulo__texto h3 { margin-top: 2rem; }
.articulo__texto ul, .articulo__texto ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.articulo__texto li { list-style: disc; }
.articulo__texto ol li { list-style: decimal; }
.articulo__texto a { text-underline-offset: 3px; }

.articulo__indice { position: sticky; top: 2rem; display: grid; gap: 0.75rem; }

.toc { display: grid; gap: 0.5rem; list-style: none; }
.toc a { font-size: var(--t-body-sm); text-decoration: none; color: var(--apagado); }
.toc a:hover { color: var(--tinta); text-decoration: underline; }

.artmeta {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.fuentes { font-size: var(--t-body-sm); color: var(--apagado); }
.fuentes ul { display: grid; gap: 0.4rem; list-style: none; }

.artlist { display: grid; gap: 0; border-top: 1px solid var(--filete); }

.artcard {
  border: 0;
  border-bottom: 1px solid var(--filete);
  background: transparent;
  padding: 1.6rem 0.25rem;
}

.artcard__titulo { font-size: var(--t-body); margin: 0.4rem 0; }
.artcard__titulo a { text-decoration: none; }
.artcard__titulo a:hover { text-decoration: underline; }
.artcard__resumen, .artcard__para { font-size: var(--t-body-sm); color: var(--apagado); }

/* Preguntas frecuentes */
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--filete); }

.faq-item {
  border: 0;
  border-bottom: 1px solid var(--filete);
  background: transparent;
  padding: 0;
}

.faq summary,
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2rem 1.4rem 0.25rem;
  position: relative;
  font-family: var(--display-tipo);
  font-size: var(--t-body);
}

.faq summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }

.faq summary::after,
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  font-family: var(--dato-tipo);
}

.faq[open] summary::after,
.faq-item[open] summary::after { content: '\2212'; }

.faq-item > div,
.faq > div { padding: 0 2rem 1.4rem 0.25rem; font-size: var(--t-body-sm); color: var(--apagado); }

/* Glosario */
.glosario { display: grid; gap: 0; border-top: 1px solid var(--filete); }

.glosario__item {
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--filete);
  display: grid;
  gap: 0.35rem 2rem;
}

/*
 * La columna de 15rem para el termino, SOLO dentro de `.glosario`.
 *
 * Este item tambien se usa dentro de rejillas de dos y tres columnas
 * (`.tipogrid`). Ahi la celda mide unos 360px: 240 se los llevaba el
 * termino y a la definicion le quedaban 120, con lo que salia una
 * columna altisima de palabras sueltas partidas. Fuera de `.glosario` se
 * apila, que es lo que pide una celda estrecha.
 */
@media (min-width: 800px) {
  .glosario > .glosario__item { grid-template-columns: 15rem 1fr; }
}

/* Colgando del item y no de `.glosario`: el mismo item se usa dentro de
   `.tipogrid`, y alli el <dd> se quedaba con la sangria de 40px que mete
   el navegador por defecto. */
.glosario__item dt { font-family: var(--display-tipo); }
.glosario__item dd { margin: 0; font-size: var(--t-body-sm); color: var(--apagado); }
.glosario__item--warn { border-left: 2px solid var(--tinta); padding-left: 1rem; }

/* --- Rejillas de fichas: sectores, organismos, comunidades, precios --- */

.ccgrid,
.orggrid,
.showcase,
.pricing-grid,
.caplist,
.leadlist,
.tipogrid,
.tipos,
.sector-bento,
.kpigrid,
.admincols,
.sectorinfo,
.steps,
.pasos-lista,
.pipeline,
.flow,
.srv,
.method,
.panorama,
.orglist,
.panlist {
  display: grid;
  gap: var(--gap-elemento);
}

@media (min-width: 700px) {
  .ccgrid, .orggrid, .showcase, .caplist, .tipogrid, .tipos,
  .sector-bento, .kpigrid, .admincols, .sectorinfo, .steps,
  .pasos-lista, .pipeline, .flow, .method, .panorama {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1050px) {
  .ccgrid, .orggrid, .kpigrid { grid-template-columns: repeat(4, 1fr); }
  /* `.method` sale de aqui: solo tiene dos hijos y la tercera columna se
     quedaba en blanco justo en la seccion que deberia llevar el peso
     asimetrico del hero. Se queda en dos. */
  .showcase, .caplist, .tipogrid, .tipos, .steps, .pasos-lista,
  .pipeline, .flow, .panorama, .sectorinfo {
    grid-template-columns: repeat(3, 1fr);
  }
  .showcase--4 { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  /* Sin ancho maximo ni centrado: la rejilla de la seccion ya decide
     donde empieza y donde acaba, y con 56rem centrados las dos tarjetas
     quedaban flotando en medio de la columna, fuera del eje del resto. */
  .pricing-grid--pair { grid-template-columns: repeat(2, 1fr); }
}

.cccard,
.orgcard,
.showcard { display: grid; gap: 0.6rem; text-decoration: none; }

/*
 * Monoespaciada SOLO para lo que es dato o rotulo.
 *
 * En la primera version metí aqui tambien clases que son prosa
 * (.tipo__resumen, .step__desc, .capcard__limite, .cccard__sub). Un
 * parrafo de cuatro lineas en monoespaciada se lee mucho peor y ademas
 * ocupa un tercio mas: en la pagina de producto cada tarjeta era un
 * bloque de texto tecnico ilegible. La mono es para importes, plazos,
 * codigos y rotulos, no para explicar.
 */
.cccard__top,
.showcard__foot,
.orgcard__lvl,
.showcard__type,
.capcard__kicker,
.srv__kicker,
.leadcard__meta,
.artcard__meta,
.sectorcom__t,
.pan__foot {
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

/*
 * Nombres propios: fuente de texto, no monoespaciada.
 *
 * "Fondo de Garantia Agraria y Pesquera de las Islas Baleares" en mono
 * ocupa dos lineas mas y se lee peor. La mono es para lo que se compara
 * en columna — importes, plazos, codigos —, no para nombres.
 */
.showcard__org,
.panlist__name,
.orglist__name,
.orgcard__name,
.cccard__name {
  font-family: var(--display-tipo);
  font-size: var(--t-body-sm);
  line-height: 1.35;
  color: var(--tinta);
}

.catalog__count-nota {
  font-family: var(--texto-tipo);
  color: var(--apagado);
}

/* Prosa: fuente de texto, no mono. */
.cccard__sub,
.tipo__resumen,
.capcard__limite,
.capcard__que,
.step__desc {
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

/*
 * Cuerpos de tarjeta: los parrafos necesitan aire entre si.
 *
 * Sin esto, "que hace", "como lo hace" y "donde deja de ser fiable" se
 * leen como un solo parrafo de doce lineas y no se distingue donde acaba
 * uno y empieza el siguiente.
 */
.capcard,
.capcard__body,
.srv__body,
.tipo,
.showcard,
.pricing-card,
.leadcard,
.cccard {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.capcard__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: baseline;
}

/* El rotulo que abre un parrafo: cartela en linea, no negrita. Es lo que
   deja ver de un vistazo que ese parrafo responde a "como" o a "limite". */
.capcard__tag,
.principle-list strong,
.match-card__factors b {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--tinta);
  margin-right: 0.4rem;
}

.showcard__title,
.srv__head h3,
.capcard__head,
.step__title,
.pricing-card h3,
.pan__title,
.tipo__head,
.factor__head h3,
.leadcard__head {
  font-family: var(--display-tipo);
  font-size: var(--t-body);
  line-height: 1.25;
}

/* Precios: sin tarjeta destacada con color. La que se recomienda lleva
   filete de tinta y su palabra, nada mas. */
.pricing-card { display: grid; gap: 1.1rem; align-content: start; }
.pricing-card--highlight { border-color: var(--tinta); }

.pricing-card--highlight::before {
  content: 'Recomendado';
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.pricing-card__desc, .pricing-card__nota { font-size: var(--t-body-sm); color: var(--apagado); }

/* Listas de filas: organismos, paneles, leads */
.orglist,
.panlist,
.leadlist { gap: 0; border-top: 1px solid var(--filete); }

.orglist > *,
.panlist__row,
.leadcard,
.srv__row,
.pipeline__step,
.prioridad__lista > * {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding-block: 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--filete);
  background: transparent;
}

@media (min-width: 800px) {
  .srv__row { grid-template-columns: 4rem 1fr; align-items: start; }
  .pipeline__step { grid-template-columns: 3rem 1fr; align-items: start; }
}

/*
 * Filas de "nombre ... cifra".
 *
 * En caja flexible y no en rejilla, porque el marcado no es consistente:
 * dos paneles ponen el nombre primero y el tercero la cifra. Con columnas
 * fijas, ese tercero metia el numero en la columna ancha y el nombre en
 * la estrecha, que se partia en tres lineas. Con `order` el resultado es
 * el mismo venga como venga el HTML.
 */
.panlist__row,
.orglist > * a,
.orglist > * {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}

.panlist__name,
.orglist__name { order: 1; flex: 1 1 auto; min-width: 0; }

.panlist__n,
.orglist__n {
  order: 2;
  margin-inline-start: auto;
  text-align: right;
}

/*
 * En los paneles de datos los enlaces no van subrayados de serie.
 *
 * Una columna de veinte cifras y veinte nombres, todos subrayados, es
 * ruido: el subrayado deja de significar "esto es un enlace" cuando lo
 * lleva todo. Aparece al pasar el raton, que es cuando hace falta.
 */
.panlist a,
.orglist a,
.pan a,
.livestats a,
.concgrid a {
  text-decoration: none;
}

.panlist a:hover,
.orglist a:hover,
.pan a:hover,
.livestats a:hover,
.concgrid a:hover {
  text-decoration: underline;
}

/* Manifiesto y principios: texto largo, medida corta. */
.manifesto,
.principle-list,
.method__intro { max-width: var(--ancho-texto); }

.manifesto > p:first-child {
  font-size: var(--t-subheading);
  line-height: var(--lh-medio);
  font-family: var(--display-tipo);
}

.manifesto > p + p { margin-top: 1.4rem; color: var(--apagado); }

.principle-list { display: grid; gap: 1.75rem; list-style: none; }
.principle-list strong { font-family: var(--display-tipo); font-size: var(--t-body); }
.principle-list__prueba { display: block; margin-top: 0.4rem; font-size: var(--t-body-sm); color: var(--apagado); }

/* Barras de fuentes y chispas */
/* Franja horizontal, no lista apilada: son cinco procedencias en una
   linea, y apiladas ocupaban media pantalla dentro de una caja blanca. */
.sourcebar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-body-sm);
}

.sparkbars { display: flex; align-items: flex-end; gap: 2px; height: 2.5rem; }
.sparkbars__col, .sparkbar { flex: 1; background: var(--piedra); min-height: 2px; }

/* Migas */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 2rem;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Indicadores arriba/abajo: nunca solo color, siempre con simbolo. */
.ud { font-family: var(--dato-tipo); font-size: var(--t-body-sm); }
.ud--up::before { content: '\2191 '; }
.ud--down::before { content: '\2193 '; }

/* ===== 14 · ADMINISTRACION ========================================== */

/*
 * El panel interno usa los mismos tokens que la web publica: quien
 * administra tiene que ver lo mismo que ve el visitante. Solo cambia la
 * densidad, porque aqui se trabaja con muchas cosas en la misma pantalla.
 */
.adminbody { background: var(--canvas); }

.adminbar { border-bottom: 1px solid var(--filete); background: var(--papel); }

.adminbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.adminbar__brand {
  font-family: var(--display-tipo);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
}

.adminbar__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }

.adminbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-body-sm);
  text-decoration: none;
  color: var(--apagado);
}

.adminbar__nav a.is-active,
.adminbar__nav a:hover { color: var(--tinta); }

.adminbar__user { margin-inline-start: auto; font-family: var(--dato-tipo); font-size: var(--t-body-sm); }

.adminmain, .adminwrap {
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding: var(--gap-seccion-min) 1.5rem;
}

.adminh1 { font-size: var(--t-heading-sm); line-height: var(--lh-medio); text-transform: uppercase; }
.adminlead { margin-top: 1.25rem; color: var(--apagado); max-width: var(--ancho-texto); }

.adminfilters { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: end; margin-block: 2rem; }
.adminfacts { display: grid; gap: var(--gap-elemento); margin-bottom: 2rem; }

@media (min-width: 800px) { .adminfacts { grid-template-columns: repeat(3, 1fr); } }

.admintable__scroll { overflow-x: auto; }

.admintable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body-sm);
}

.admintable th,
.admintable td {
  text-align: left;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
}

.admintable th {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  white-space: nowrap;
}

.admintable td { font-family: var(--dato-tipo); }

/* ===== 16 · MEMORIAS ================================================ */

/* --- El formulario de datos --- */

.memform { display: grid; gap: var(--gap-seccion-min); }

.memform__grupo {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: var(--pad-tarjeta) 0 0;
  border: 0;
  border-top: 1px solid var(--filete);
}

.memform__grupo legend {
  padding: 0 1rem 0 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.form-opt {
  margin-inline-start: 0.5rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.form-ok {
  padding: 1rem var(--pad-tarjeta);
  border: 1px solid var(--tinta);
  font-size: var(--t-body-sm);
}

/* --- La barra de acciones --- */

.memoria__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--filete);
}

/* --- El aviso de huecos --- */

.memoria__aviso {
  margin-top: var(--gap-seccion-min);
  padding: var(--pad-tarjeta);
  border: 1px solid var(--tinta);
  font-size: var(--t-body-sm);
}

.memoria__aviso-t {
  margin: 0 0 0.5rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
}

.memoria__aviso ul { margin: 1rem 0 0; padding-inline-start: 1.1rem; }
.memoria__aviso li { margin-bottom: 0.35rem; color: var(--apagado); }
.memoria__aviso code { font-family: var(--dato-tipo); font-size: var(--t-caption); }

.memoria__nota {
  margin-top: 1.25rem;
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

/* --- El documento --- */

/*
 * Ancho de lectura, no de rejilla: son varias paginas de texto seguido y
 * a 1130px de ancho no hay quien lo lea.
 */
.memoria {
  max-width: 46rem;
  margin-top: var(--gap-seccion-min);
  padding-top: var(--gap-seccion-min);
  border-top: 1px solid var(--filete);
}

.memoria__titulo {
  font-size: var(--t-subheading);
  line-height: var(--lh-medio);
  text-transform: uppercase;
  margin: 0 0 var(--gap-seccion-min);
}

.memoria__sec { margin-bottom: var(--gap-seccion-min); }

.memoria__sec h3 {
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filete);
}

.memoria__sec p { margin: 0 0 1rem; }

.memoria__datos { display: grid; gap: 0; margin: 0 0 1.25rem; }

@media (min-width: 700px) {
  .memoria__datos { grid-template-columns: 14rem 1fr; }
}

.memoria__datos dt {
  padding-block: 0.7rem;
  border-top: 1px solid var(--filete);
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.memoria__datos dd {
  margin: 0;
  padding-block: 0.7rem;
  border-top: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

@media (max-width: 699px) {
  .memoria__datos dt { border-top: 1px solid var(--filete); padding-bottom: 0; }
  .memoria__datos dd { border-top: 0; padding-top: 0.2rem; }
}

.memoria__sub {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  margin: 1.25rem 0 0.6rem;
}

.memoria__lista { margin: 0 0 1.25rem; padding-inline-start: 1.1rem; }
.memoria__lista li { margin-bottom: 0.4rem; font-size: var(--t-body-sm); }

/* --- La tabla de requisitos --- */

.memoria__req {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: var(--t-body-sm);
}

.memoria__req th,
.memoria__req td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-top: 1px solid var(--filete);
  text-align: left;
  vertical-align: top;
}

.memoria__req thead th {
  border-top: 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
  font-weight: 400;
}

.memoria__req tbody th { font-weight: 400; }

/*
 * El veredicto va con filete, no con color: el sistema no tiene verde ni
 * rojo, y meterlos aqui abriria una paleta nueva por una sola tabla. Se
 * distingue por el trazo y por la palabra, que es la que manda.
 */
/* Sin recuadro, como el resto de los datos. */
.memoria__ver {
  display: inline;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  white-space: nowrap;
}

.memoria__ver--si { color: var(--tinta); }
.memoria__ver--no { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.memoria__ver--na { color: var(--apagado); }

@media (max-width: 760px) {
  .memoria__req thead { display: none; }
  .memoria__req tr { display: grid; gap: 0.2rem; padding-block: 0.7rem;
    border-top: 1px solid var(--filete); }
  .memoria__req th, .memoria__req td { border: 0; padding: 0; }
}

/*
 * La marca de hueco.
 *
 * Es lo unico del documento que lleva relleno, y a proposito: si no se ve
 * a un metro, alguien presentara la memoria con un [COMPLETAR] dentro.
 */
.memoria__hueco {
  background: var(--tinta);
  color: var(--canvas);
  padding: 0.1em 0.35em;
  font-family: var(--dato-tipo);
  font-size: 0.86em;
}

/* --- Impresion --- */

@media print {
  .cabecera,
  .footer,
  .no-print,
  .cursor-punto,
  .hero__escena,
  .escena { display: none !important; }

  .section { padding-block: 0; }
  .container { padding-inline: 0; }

  .memoria {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 10.5pt;
  }

  .memoria__sec { break-inside: avoid-page; }
  .memoria__sec h3 { break-after: avoid-page; }

  /* En papel, el hueco en negativo se come el toner y se lee peor que
     con un filete. */
  .memoria__hueco {
    background: none;
    color: inherit;
    border: 1px solid currentColor;
  }
}

/* ===== 17 · INDICES ================================================= */

/*
 * De parrilla a índice.
 *
 * Las listas de cosas —convocatorias, capacidades, guías, sectores,
 * organismos, comunidades— iban en cuadrículas de bloques iguales. Con
 * caja o sin ella, ese patrón es el de una plantilla: cuatro columnas de
 * lo mismo, cada una con su título, su descripción y su flecha.
 *
 * Un catálogo se enseña en índice, no en cuadrícula. Una fila por cosa,
 * filete de un píxel entre filas, nombre a la izquierda y dato a la
 * derecha. Es lo que hace un anuario y lo que hace la referencia.
 */
.showcase,
.ccgrid,
.orggrid,
.caplist,
.tipos,
.tipogrid,
.leadlist {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--filete);
}

.showcard,
.cccard,
.orgcard,
.capcard,
.tipo,
.artcard {
  display: grid;
  /* Aire de sobra: con el nombre a 34px, 1,5rem lo asfixiaba. */
  gap: 0.6rem 2rem;
  padding: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--filete);
  background: none;
  text-decoration: none;
}

@media (min-width: 900px) {
  .showcard,
  .cccard,
  .orgcard,
  .capcard,
  .tipo,
  .artcard {
    grid-template-columns: 1fr 22rem;
    align-items: baseline;
  }
}

/*
 * En la portada, mas grande todavia.
 *
 * El catalogo entero se lee en el listado, donde 34px es lo correcto para
 * treinta filas. La portada enseña cuatro, y cuatro filas a 34px no
 * destacan: van a 46px, que es el mismo salto que hay entre el titular de
 * seccion y su cartela.
 */
.showcase .showcard__title { font-size: var(--t-heading-sm); }

/*
 * En estrecho, un escalon menos.
 *
 * A 390px de ancho, "propietarios/arrendatarios" a 46px mide 500 y se
 * sale: la barra no es punto de corte y el navegador no tiene por donde
 * partir. Con `anywhere` si puede, y ademas se baja el cuerpo.
 */
@media (max-width: 700px) {
  .showcase .showcard__title { font-size: var(--t-subheading); }
}

/*
 * El nombre manda, y se nota.
 *
 * A 18px al lado de un dato de 11px no hay jerarquia: todo pesa igual y
 * la pagina se lee como una hoja de calculo. El hero funciona porque hay
 * nueve a uno entre el titular y su cartela. Aqui el nombre sube a
 * subtitulo —34px a 1440— y el dato se queda donde estaba.
 */
.showcard__title,
.cccard__name,
.orgcard__name,
.capcard__t,
.tipo__t,
.artcard__t {
  font-size: var(--t-subheading);
  line-height: 1.06;
  color: var(--tinta);
  /* Los nombres de la BDNS traen barras y guiones sin espacios: sin esto
     una sola palabra se sale de la pantalla en movil. */
  overflow-wrap: anywhere;
}

/*
 * Solo lo que es etiqueta va en monoespaciada y en mayusculas. La columna
 * derecha del indice lleva DATOS en unas listas (tipo, plazo, importe) y
 * una DESCRIPCION en otras: en las guias, "El recorrido completo desde
 * que encuentras la convocatoria..." en mayusculas no se lee.
 */
.showcard__org,
.showcard__type,
.showcard__foot,
.orgcard__meta,
.capcard__tag,
.capcard__limite,
.tipo__ojo {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

/* El índice responde con el filete, como las filas del catálogo. */
.cccard__sub {
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.showcard:hover,
.cccard:hover,
.orgcard:hover,
.capcard:hover,
.artcard:hover { border-top-color: var(--tinta); }

.showcard:hover .showcard__title,
.cccard:hover .cccard__name,
.orgcard:hover .orgcard__name,
.artcard:hover .artcard__t { text-decoration: underline; }

/*
 * Las capacidades y los pasos, sin número y en dos columnas.
 *
 * Eran «01 · Buscador del catálogo completo · Subvenciones · Préstamos ·
 * Todo el catálogo público en un sitio · Abrir buscador →», seis veces.
 * Ahora el nombre a la izquierda y lo que hace a la derecha, que es como
 * se lee un sumario.
 */
/* Una columna, y con `!important` porque `.srv` y `.flow` siguen en la
   lista de rejillas de tres columnas de mas abajo: sin esto cada fila
   media un tercio y su reparto interno de 20rem + 1fr desbordaba la
   pagina 51px. */
.srv,
.flow {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--filete);
  background: none;
  border-inline: 0;
  border-top: 0;
}

.srv__row,
.flow > li {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--filete);
}

@media (min-width: 900px) {
  .srv__row,
  .flow > li { grid-template-columns: 26rem 1fr; align-items: baseline; }
}

.srv__head h3,
.flow > li h3 {
  margin: 0;
  font-size: var(--t-subheading);
  line-height: 1.06;
}

.srv__kicker,
.flow__cost {
  display: block;
  margin: 0.2rem 0 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  text-transform: uppercase;
  color: var(--apagado);
}

.srv__row p:not(.srv__kicker),
.flow > li p { margin: 0; font-size: var(--t-body-sm); }

/*
 * Una llamada por sección, no una por fila.
 *
 * Seis flechas seguidas no son seis caminos: son ruido. El enlace de cada
 * fila se queda, pero como texto dentro de la columna derecha y sin la
 * flecha, que es lo que los convertía en seis botones.
 */
.srv__link::after,
.capcard a::after { content: none; }

.srv__link,
.capcard a {
  font-size: var(--t-body-sm);
  color: var(--apagado);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.srv__link:hover,
.capcard a:hover { color: var(--tinta); }

/*
 * Cada pieza en su columna.
 *
 * El orden del HTML no es el de lectura: en una convocatoria viene antes
 * el tipo que el nombre. Colocado a mano, el nombre y el organismo van a
 * la izquierda —que es lo que se lee— y el tipo y el plazo a la derecha,
 * que es lo que se consulta.
 */
@media (min-width: 900px) {
  .showcard__title { grid-column: 1; grid-row: 1; }
  .showcard__org   { grid-column: 1; grid-row: 2; }
  /* Las dos lineas de dato, juntas y arriba: separadas por el alto del
     nombre quedaban una en cada extremo de la fila. */
  .showcard__type  { grid-column: 2; grid-row: 1; align-self: start; }
  .showcard__foot  { grid-column: 2; grid-row: 1; align-self: start;
                     margin-top: 1.5rem; }

  .cccard__top { grid-column: 1; }
  .cccard__sub { grid-column: 2; }

  .srv__head { grid-column: 1; grid-row: 1 / span 2; }
  .srv__body { grid-column: 2; grid-row: 1; }
  .srv__link { grid-column: 2; grid-row: 2; justify-self: start; }

  .flow > li > h3 { grid-column: 1; grid-row: 1; }
  .flow > li > p { grid-column: 2; grid-row: 1; }
  .flow__cost { grid-column: 2; grid-row: 2; }
}

/*
 * Las cifras de cabecera, sin caja.
 *
 * Tenian regla propia y se habian quedado fuera cuando se vacio el grupo
 * de superficies: cuatro rectangulos blancos justo debajo del hero.
 */
/* Las cifras de cabecera son lo primero que se mira: van a tamaño de
   titular, no de subtítulo. */
.livestats strong { font-size: var(--t-heading-sm); line-height: 1; }

.livestats > div,
.livestats > li {
  background: none;
  border: 0;
  border-top: 1px solid var(--filete);
  border-radius: 0;
  padding: 1.25rem 0 0;
}

/*
 * Los sectores, en indice.
 *
 * Iban en cuadricula, cada uno con su ilustracion en naranja dentro de
 * una caja gris. Aparte de ser el patron de plantilla que se ha quitado
 * del resto del sitio, metian un color que no existe en el sistema: la
 * ficha dice cinco neutros y el degradado, y solo en la esfera.
 */
.sector-bento {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--filete);
}

.sector-bento__item {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--filete);
  background: none;
  text-decoration: none;
}

@media (min-width: 900px) {
  .sector-bento__item { grid-template-columns: 26rem 1fr; align-items: baseline; }
}

.sector-bento__body { display: contents; }

.sector-bento__item h3,
.sector-bento__item .sector-bento__t {
  margin: 0;
  font-size: var(--t-subheading);
  line-height: 1.06;
  color: var(--tinta);
}

.sector-bento__item p {
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.sector-bento__item:hover { border-top-color: var(--tinta); }
.sector-bento__item:hover h3 { text-decoration: underline; }

/*
 * El metodo, en una columna.
 *
 * Era dos: intro a la izquierda y tabla de pesos a la derecha. Subido el
 * parrafo a la cabecera de seccion, la izquierda se quedaba con un enlace
 * y medio folio en blanco al lado de la tabla.
 */
.method { display: block; }
.method__intro { margin-bottom: var(--pad-tarjeta); }

/*
 * Picos de escala.
 *
 * Once secciones con el titular al mismo tamaño son coherentes y planas:
 * si todo grita igual, nada destaca. La referencia va de 103 a 76 a 46
 * segun lo que pesa cada cosa.
 *
 * Solo se aplica donde el texto lo aguanta. Un titular de 103px con
 * cincuenta caracteres son cinco lineas y media pantalla, asi que los
 * picos van en los cortos y se marcan a mano en la plantilla, no por
 * regla automatica.
 */
@media (min-width: 1000px) {
  .section > .container > .section__header > h2.seccion--pico {
    grid-column: 2 / 12;
    font-size: var(--t-display);
  }

  .section > .container > .section__header > h2.seccion--medio {
    font-size: var(--t-heading-lg);
  }
}

/* ===== 15 · UTILIDADES ============================================== */

.section__header--left { text-align: left; margin-inline: 0; }
.accent { background: var(--iridiscente); -webkit-background-clip: text; background-clip: text; color: transparent; }

.is-on { border-color: var(--tinta); }
.savef { display: inline-flex; }

/*
 * Ilustraciones y animaciones decorativas.
 *
 * Se conservan las clases porque estan en las plantillas, pero sin
 * movimiento: la ficha no tiene ni una animacion, y un elemento que se
 * mueve compite con la esfera, que es lo unico que debe llamar la
 * atencion.
 */
.illo,
.illo-blink,
.illo-float,
.illo-wheel,
.illo-sway,
.illo-smoke,
.illo-dash,
.illo-takeoff,
.illo-fly,
.illo-spin,
.illo-drivein,
.illo-delay-1,
.illo-delay-2,
.illo-sm { animation: none; }

.editprofile { display: grid; gap: 1.25rem; }
.panelbar { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.sector-bento__media { border: 1px solid var(--filete); background: var(--canvas); }
.sector-bento__body { display: grid; gap: 0.6rem; }
.sectorcom {
  display: grid;
  gap: 0.6rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--filete);
}

/* El nombre del sector es un nombre propio: va en la fuente de texto y a
   tamaño de subtitulo. Solo la cifra se queda en monoespaciada. */
.sectorcom__t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0;
  font-family: var(--texto-tipo);
  font-size: var(--t-body);
  color: var(--tinta);
}

.sectorcom__t > span {
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}
.fases { display: grid; gap: 1rem; }
.tipo__ojo { font-family: var(--dato-tipo); font-size: var(--t-caption); letter-spacing: var(--track-cartela); text-transform: uppercase; color: var(--apagado); }
.flow__cost { font-family: var(--dato-tipo); font-size: var(--t-body-sm); color: var(--apagado); }
.capcard__tag, .capcard__que, .capcard__body { font-size: var(--t-body-sm); }
.leadcard__row { display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--dato-tipo); font-size: var(--t-body-sm); }
.factor__body { display: grid; gap: 0.5rem; font-size: var(--t-body-sm); }
.factor__body dt { font-family: var(--dato-tipo); font-size: var(--t-caption); letter-spacing: var(--track-cartela); text-transform: uppercase; color: var(--apagado); }
.factor__body dd { margin: 0; }
.factor__updown { font-family: var(--dato-tipo); font-size: var(--t-body-sm); }
.sectorinfo__col { display: grid; gap: 0.6rem; }
.detail, .catalog, .panorama, .method, .showcase { margin-top: 0; }
.teaser-link { margin-top: 1.5rem; }
.sector-teaser-row__item span { font-family: var(--dato-tipo); font-size: var(--t-body-sm); }

/* --- Piezas sueltas que quedaban sin definir --- */

.srv__body { display: grid; gap: 0.6rem; font-size: var(--t-body-sm); color: var(--apagado); }

/* Numero de paso: circulo con filete, sin relleno. */
.step__icon,
.pipeline__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--filete);
  border-radius: 50%;
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  line-height: 1;
}

.chip--conc { border-color: var(--tinta); color: var(--tinta); }
.artcard--destacado { border-left: 2px solid var(--tinta); padding-left: 1.25rem; }
.factbox--cta { border-color: var(--tinta); }
.livestats--panel { margin-top: 0; }
.prioridad__texto { display: grid; gap: 0.2rem; }
.prioridad__nombre { font-family: var(--display-tipo); }
.hero3d__text { display: grid; gap: 0; }
.prefill__val { font-family: var(--dato-tipo); font-size: var(--t-body-sm); }

/* La marca: el eclipse. Unica pieza cromatica junto con la esfera. */
.logo { display: block; flex: none; }
.logo__luz { transform-origin: 50% 50%; }
.logo__aro { fill: none; }

.logo--anim .logo__luz { transition: transform 0.6s ease; }
.logo--anim:hover .logo__luz { transform: rotate(24deg); }

@media (prefers-reduced-motion: reduce) {
  .logo--anim .logo__luz { transition: none; }
  .logo--anim:hover .logo__luz { transform: none; }
}

/* --- Correcciones medidas con navegador, no a ojo --------------------
 *
 * La revision automatica (herramientas/revisar-diseno.mjs) encontro
 * catorce sitios donde el texto se salia de su caja. Dos causas:
 *
 *  1. Titulares en mayusculas a 46px sobre una ventana de 390px: una
 *     palabra larga no cabe en una linea y no hay donde partirla.
 *  2. Hijos de rejilla sin `min-width: 0`. Por defecto valen `auto`, que
 *     significa "no encojas por debajo de tu contenido", asi que una
 *     columna 1fr con un nombre de organismo largo desborda en silencio.
 */

/*
 * Los titulares pueden partir una palabra si no cabe, pero NUNCA con
 * guion: 'LA AYUDA EXIS-TIA' partido a la mitad se lee fatal a 70px, y
 * la referencia no separa con guiones en ningun sitio.
 */
h1, h2, h3,
.display, .t-display,
.detail__title, .adminh1,
.section__header h1, .section__header h2,
.hero3d h1, .page-hero h1,
.cta-panel h2 {
  overflow-wrap: break-word;
  hyphens: manual;
}

@media (max-width: 480px) {
  /* A este ancho, 46px en mayusculas deja tres letras por linea. */
  :root { --t-heading-sm: 2.125rem; --t-subheading: 1.625rem; }
}

/* Todo hijo de rejilla o de caja flexible que contenga texto puede
   encoger. Sin esto el desborde es invisible hasta que alguien mide. */
.match-card__top > *,
.lectura__row > *,
.score-factor > *,
.prioridad__item > *,
.glosario__item > *,
.panlist__row > *,
.orglist > * > *,
.srv__row > *,
.pipeline__step > *,
.asimetrico > *,
.detail__grid > *,
.catalog > *,
.nav > *,
.footer__bottom > * {
  min-width: 0;
}

.match-card__meta,
.match-card__desc,
.srv__body,
.showcard__org,
.cccard__sub,
.orgcard__name,
.panlist__name {
  overflow-wrap: break-word;
}

/* Los mismos dos motivos, en las listas de definicion y en los cuerpos de
   texto de las fichas de servicio. */
dl, dt, dd,
.srv__body, .srv__body > *,
.glosario__item, .glosario__item > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/*
 * Fichas numeradas: el numero ocupa la primera columna en todas las
 * filas y el contenido va siempre en la segunda.
 *
 * Sin esto, una rejilla de dos columnas con cuatro hijos coloca el tercer
 * hijo — el parrafo — otra vez en la columna de 4rem, y el texto se sale
 * de su caja sin que se vea que la culpa es de la rejilla.
 */
/*
 * Aqui vivia la colocacion de la columna del numero: `.srv__num` en la
 * primera y todo lo demas en la segunda. Quitados los numeros
 * decorativos, esa regla forzaba las tres piezas de cada fila a la misma
 * celda y se pintaban unas encima de otras. El reparto en dos columnas lo
 * hace ahora el bloque de indices.
 */
@media (min-width: 800px) {
  .pipeline__n { grid-row: 1 / -1; }
  .pipeline__step > *:not(.pipeline__n) { grid-column: 2; }
}

/*
 * El aire entre la cabecera de una pagina y lo primero que viene debajo.
 *
 * La cabecera de seccion lleva 76px por debajo y la seccion lleva otros
 * 119px de relleno: sumados dejaban casi 250px de nada entre el parrafo
 * de entrada y la primera fila de datos. La ficha pide 76-119px ENTRE
 * secciones, no acumulados.
 */
.page-hero .section__header,
.hero3d .section__header { margin-bottom: 0; }

.page-hero + .section--tight,
.hero3d + .section--tight { padding-top: 0; }

.page-hero { padding-bottom: var(--gap-seccion-min); }

@media (min-width: 900px) {
  .page-hero { padding-bottom: var(--gap-seccion-min); }
}

/* Los 76px de aire bajo la etiqueta son para separar la cabecera de una
   seccion de su contenido. Dentro de una tarjeta abren un agujero. */
.tarjeta .section__eyebrow,
.cccard .section__eyebrow,
.sector-intro-card .section__eyebrow,
.cta-panel .section__eyebrow,
.factbox .section__eyebrow,
.pan .section__eyebrow,
.adminpanel .section__eyebrow,
.auth-card .section__eyebrow { margin-bottom: 1.25rem; }

/* Cuando la escena 3D arranca, la version estatica se retira. El lienzo
   es transparente y sin esto se veian las dos figuras superpuestas. */
.hero3d__scene.is-3d .heroflat,
.section3d-wrap.is-3d .heroflat { display: none; }

/* Y al reves: sin WebGL el lienzo no ocupa sitio. */
.hero3d__scene:not(.is-3d) canvas,
.section3d-wrap:not(.is-3d) canvas { display: none; }

/*
 * El manifiesto usa .container y .manifesto a la vez: el ancho de texto
 * de 42rem sumado al margen automatico del contenedor centraba el bloque
 * entero en mitad de la pagina. El ancho de medida va en los hijos; el
 * contenedor mantiene su reticula.
 */
.manifesto.container {
  max-width: var(--ancho-pagina);
}

.manifesto.container > * {
  max-width: var(--ancho-texto);
}

/* La cabecera de la pantalla de acceso se alinea con la tarjeta, no con
   el ancho de una seccion: si no, el titular arranca 150px a la izquierda
   del formulario y parece que no van juntos. */
.auth-shell .section__header {
  max-width: 28rem;
  margin-bottom: 2.5rem;
}

.auth-shell .section__eyebrow { margin-bottom: 1rem; }

.auth-card .form-field + .form-field { margin-top: 0.5rem; }

/* ===== 18 · MONAD ==================================================== */

/*
 * El sistema de https://www.monad.com, medido en el navegador.
 *
 * Va al final y con el peso suficiente para ganar a las quince secciones
 * de arriba: reescribirlas una por una habría sido tres mil líneas de
 * riesgo, y el sistema anterior se conserva debajo por si hubiera que
 * volver. Lo que manda es esto.
 *
 * Las cuatro reglas que lo definen, en orden de importancia:
 *
 *   1. Serif de peso 400 en TODO titular. Nunca negrita: el contraste del
 *      trazo y el tracking negativo hacen el trabajo.
 *   2. Monoespaciada en todo lo demás — cuerpo, navegación, botones,
 *      etiquetas, cualquier cadena de interfaz.
 *   3. Píldoras de 100px en controles y tarjetas de 40px. Filete de 1px,
 *      nunca sombra.
 *   4. Pergamino cálido en toda la página y UN azul para UNA acción.
 */

/* --- Base ------------------------------------------------------------ */

body {
  background: var(--canvas);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: var(--t-body);
  line-height: var(--lh-suelto);
  letter-spacing: -0.025em;
}

/* --- Titulares -------------------------------------------------------- */

/*
 * Caja normal, no mayúsculas.
 *
 * El sistema anterior gritaba todos los titulares. Este los escribe como
 * frases: "Security Data Pipelines, Made Easy". Las mayúsculas se quedan
 * donde este sistema sí las usa, que es la interfaz en mono.
 */
h1, h2, h3, h4, h5, h6,
.hero__linea,
.section__header h1,
.section__header h2,
.detail__title,
.memoria__titulo,
.cta-panel h2,
.showcard__title,
.cccard__name,
.orgcard__name,
.capcard__t,
.tipo__t,
.artcard__t,
.srv__head h3,
.flow > li h3,
.sector-bento__item h3 {
  font-family: var(--display-tipo);
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--track);
  line-height: var(--lh-medio);
  color: var(--tinta);
}

h1 { font-size: var(--t-heading-lg); }
h2 { font-size: var(--t-heading); }
h3 { font-size: var(--t-heading-sm); }
h4, h5, h6 { font-size: var(--t-subheading); }

.section__header h1,
.section__header h2 { font-size: var(--t-heading-lg); }

@media (min-width: 1000px) {
  .section > .container > .section__header > :is(h1, h2) {
    font-size: var(--t-heading-lg);
    line-height: var(--lh-medio);
    letter-spacing: var(--track);
  }
  /* Los picos que se habían marcado a mano siguen valiendo, pero en la
     escala nueva: 80px es el tamaño del titular de portada. */
  .section > .container > .section__header > h2.seccion--pico { font-size: var(--t-display); }
  .section > .container > .section__header > h2.seccion--medio { font-size: var(--t-heading); }
}

/* Los nombres de los índices, en serif y a su escala. */
.showcard__title,
.cccard__name,
.orgcard__name,
.capcard__t,
.tipo__t,
.artcard__t,
.srv__head h3,
.flow > li h3,
.sector-bento__item h3 { font-size: var(--t-subheading); }

.showcase .showcard__title { font-size: var(--t-heading-sm); }

/* --- Interfaz: monoespaciada, mayúsculas, tracking abierto ------------ */

.section__eyebrow,
.chip,
.tag,
.btn,
.savebtn,
.nav__links a,
.nav__actions a,
.memoria__ver,
.showcard__type,
.showcard__foot,
.orgcard__meta,
.capcard__tag,
.tipo__ojo,
.footer__col-title,
.memform__grupo legend,
.memoria__datos dt,
.memoria__sub {
  font-family: var(--dato-tipo);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
}

.nav__links a,
.nav__actions a { font-size: var(--t-body); }

.section__eyebrow { font-size: var(--t-body); color: var(--medio); }

/* --- Controles: píldoras ---------------------------------------------- */

/*
 * Todo control es una píldora. Es el lenguaje de contenedor del sistema,
 * y el que más se nota: el enlace fantasma del sistema anterior aquí no
 * existe.
 */
.btn,
.savebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-control);
  background: none;
  color: var(--tinta);
  font-size: var(--t-body-sm);
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn::after,
.savebtn::after { content: none; }

.btn:hover,
.savebtn:hover {
  background: var(--tinta);
  color: var(--canvas);
  text-decoration: none;
}

/* La acción principal: relleno oscuro. */
.btn--filled,
.btn--primary {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--canvas);
}

.btn--filled:hover,
.btn--primary:hover { background: var(--lago); border-color: var(--lago); color: #fff; }

/*
 * El azul, para UNA acción por pantalla.
 *
 * La ficha es explícita: repartido pierde el sentido. Se reserva para el
 * alta, que es la única acción que el producto pide de verdad.
 */
.btn--destacado,
a.btn[href="/registro.php"] {
  background: var(--lago);
  border-color: var(--lago);
  color: #fff;
}

a.btn[href="/registro.php"]:hover { background: var(--tinta); border-color: var(--tinta); }

/* --- Superficies: tarjetas redondas, filete de 1px, sin sombra -------- */

.notice-banner,
.avisoviejo,
.concnota,
.filters,
.empty-state,
.panelayuda,
.factbox,
.pricing-card,
.memoria__aviso,
.form-ok {
  background: var(--canvas);
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  padding: var(--pad-tarjeta);
}

.section--subtle {
  background: var(--canvas);
  border-block: 0;
}

/* --- Etiquetas: píldora pequeña --------------------------------------- */

.chip,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  font-size: var(--t-caption);
  color: var(--medio);
}

.chip--urgente { border-color: var(--tinta); color: var(--tinta); }

/* --- Rejilla y anchos -------------------------------------------------- */

.container,
.section > .container {
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: var(--gap-seccion); }

@media (min-width: 1000px) {
  .section { padding-block: calc(var(--gap-seccion) * 1.5); }
}

/* --- El hero ----------------------------------------------------------- */

/*
 * Centrado, sin esfera y sin resta.
 *
 * El hero anterior era una diagonal de tres líneas cruzando una esfera
 * WebGL que se restaba del fondo. Este sistema no tiene nada de eso: un
 * titular serif centrado, una entradilla en mono debajo y dos píldoras.
 * Lo que sí conserva son los lavados de degradado pastel, que en la
 * referencia son decoración y aquí también.
 */
.hero {
  min-height: 0;
  isolation: auto;
  background: var(--canvas);
  overflow: hidden;
  padding-block: 7rem 5rem;
}

.hero__escena { display: none; }

.hero__rejilla {
  display: block;
  max-width: 60rem;
  margin-inline: auto;
  padding: 0 1.5rem;
  text-align: center;
}

.hero__cartela {
  display: block;
  margin: 0 0 1.5rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--medio);
}

.hero__titular { display: block; }

/*
 * Cada linea es un bloque: en la referencia el titular ocupa dos renglones
 * y el corte lo decide el diseño, no el ancho de la ventana.
 */
.hero__linea {
  display: block;
  font-size: var(--t-display);
  line-height: var(--lh-medio);
  color: var(--tinta);
  mix-blend-mode: normal;
  white-space: normal;
}

/* La entrada: la linea entera sube y aparece. Con la curva y el tiempo
   medidos en la referencia (opacity 0.5s ease). */
.hero__linea,
.hero__cartela,
.hero__pie {
  animation: monad-entrar 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero__cartela { animation-delay: 0.05s; }
.hero__linea:nth-child(1) { animation-delay: 0.15s; }
.hero__linea:nth-child(2) { animation-delay: 0.28s; }
.hero__pie { animation-delay: 0.42s; }

@keyframes monad-entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__linea,
  .hero__cartela,
  .hero__pie { animation: none; }
}

.hero__pie {
  display: block;
  max-width: 34rem;
  margin: 2rem auto 0;
}

.hero__entrada {
  margin: 0 0 2rem;
  font-size: var(--t-lead);
  line-height: var(--lh-suelto);
  color: var(--medio);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero__desplazar { display: none; }

/* --- El lavado de degradado -------------------------------------------- */

/*
 * En la referencia los degradados pastel son atmósfera: coral, cielo,
 * menta y oro, muy diluidos, detrás del contenido. Sustituyen a la esfera
 * iridiscente del sistema anterior.
 */
main > section:first-of-type:not(.hero)::before,
.section--cta::before,
.section--escena::before { content: none; }

main > section:first-of-type:not(.hero)::after,
.section--cta::after,
.section--escena.section--ancla::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 15% 20%, rgba(255, 148, 115, 0.18), transparent 70%),
    radial-gradient(55% 50% at 80% 25%, rgba(160, 181, 235, 0.20), transparent 70%),
    radial-gradient(50% 45% at 60% 85%, rgba(167, 252, 205, 0.16), transparent 70%),
    radial-gradient(45% 40% at 30% 90%, rgba(236, 218, 152, 0.16), transparent 70%);
  border-radius: 0;
  margin: 0;
  transform: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}

/* Sin resta: en este sistema el titular es tinta sobre pergamino. */
main > section:first-of-type:not(.hero) .section__header h1,
main > section:first-of-type:not(.hero) .section__header h2,
.section--cta .section__header h1,
.section--cta .section__header h2,
.section--escena .section__header h1,
.section--escena .section__header h2,
.cta-panel h2 {
  color: var(--tinta);
  mix-blend-mode: normal;
}

/* --- Cabecera ---------------------------------------------------------- */

/*
 * Pegajosa y con fondo, no flotante y transparente: en la referencia la
 * barra acompaña al scroll con el pergamino detrás.
 */
.cabecera {
  position: sticky;
  top: 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--filete-flojo);
}

.nav { min-height: 5rem; padding-block: 1rem; }

/* --- Pie ---------------------------------------------------------------- */

.footer { background: var(--tinta); color: var(--canvas); }

/* --- Movimiento --------------------------------------------------------- */

/*
 * Las curvas medidas en la referencia, por número de usos:
 *   color 0.2s ease                              29
 *   transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)   9
 *   opacity 0.2s ease                             9
 *   opacity 0.5s ease                             6
 */
a,
.btn,
.savebtn,
.chip,
.showcard,
.cccard,
.orgcard,
.artcard,
.sector-bento__item {
  transition: color 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, opacity 0.2s ease,
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La entrada de titulares, con la curva y el tiempo de la referencia. */
.esta-partido .pal__i { transition: transform 0.5s ease, opacity 0.5s ease; }

/*
 * Dos titulares que seguian en mayusculas.
 *
 * `.pan__title` y `.filters__title` tienen regla propia mas abajo y no
 * entraban en la lista de titulares del bloque de arriba. En este sistema
 * las mayusculas son de interfaz, no de display.
 */
.pan__title,
.filters__title {
  font-family: var(--display-tipo);
  font-weight: 400;
  font-size: var(--t-subheading);
  text-transform: none;
  letter-spacing: var(--track);
  color: var(--tinta);
}

/* --- La marquesina ---------------------------------------------------- */

/*
 * La franja de procedencias, en marcha continua, como la tira de
 * "Trusted by" de la referencia. La lista va duplicada —lo hace
 * sitio.js— para que el bucle no tenga costura.
 */
.sourcebar.marquesina {
  display: flex;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-block: 1px solid var(--filete-flojo);
  border-radius: 0;
  padding: 1.5rem 0;
  /* Se desvanece por los dos lados en vez de cortarse a hueso. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sourcebar.marquesina ul {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 4rem;
  margin: 0;
  padding: 0 2rem 0 0;
  list-style: none;
  white-space: nowrap;
  animation: marquesina 38s linear infinite;
}

.sourcebar.marquesina li {
  font-family: var(--dato-tipo);
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--medio);
}

@keyframes marquesina {
  to { transform: translateX(-100%); }
}

/* Al pasar el raton se para: si no, leer una fuente concreta es una
   carrera contra la animacion. */
.sourcebar.marquesina:hover ul { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sourcebar.marquesina ul { animation: none; }
}

/* El cursor del sistema anterior ya no se dibuja. */
.cursor-punto { display: none !important; }

/* ===== 19 · ESCENA =================================================== */

/*
 * El pergamino se acabó.
 *
 * La versión anterior era un titular serif quieto sobre papel claro y,
 * debajo, media docena de listados del catálogo. Ni se movía, ni había
 * nada que tocar, y la portada acababa siendo el buscador otra vez.
 *
 * Esto es lo contrario: fondo de instrumento, el catálogo entero girando
 * en tres dimensiones detrás de todo el documento, y dos desplegables
 * que lo reorganizan en vivo. El texto se reduce a lo que no se puede
 * enseñar. Ver assets/js/nube.js.
 *
 * Va al final del archivo y por eso gana a los dieciocho bloques de
 * arriba, que se conservan debajo intactos.
 */

:root {
  /* Tinta profunda de fondo y texto claro encima: es la inversión de la
     paleta anterior, no una paleta distinta. */
  --canvas: #08090c;
  --papel: #101319;
  --piedra: #171b23;
  --tinta: #eef1f6;
  --lago: #6f9bff;

  --filete: rgba(238, 241, 246, 0.16);
  --filete-flojo: rgba(238, 241, 246, 0.08);
  --ceniza: #2a2f3a;

  /* .72 y .85 sobre #08090c dan 11:1 y 14:1: sobra para AA incluso en
     el cuerpo a 14px. Bajar de .7 empieza a apretar. */
  --apagado: rgba(238, 241, 246, 0.72);
  --medio: rgba(238, 241, 246, 0.85);

  /* El serif se va con el pergamino. Space Grotesk ya estaba
     autoalojada y es lo que pide un panel: seca, estrecha, técnica. */
  --display-tipo: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  --radio-superficie: 20px;
  --radio-control: 100px;
}

html { background: var(--canvas); }

body {
  background: var(--canvas);
  color: var(--tinta);
}

/* El fondo de la página no es plano: dos lavados muy diluidos que dan
   profundidad sin competir con la nube. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 18% 0%, rgba(111, 155, 255, 0.14), transparent 65%),
    radial-gradient(60% 55% at 88% 12%, rgba(255, 138, 92, 0.09), transparent 62%),
    radial-gradient(80% 70% at 50% 110%, rgba(90, 240, 178, 0.07), transparent 60%);
}

h1, h2, h3, h4, h5, h6,
.escena__titular,
.section__header h1,
.section__header h2,
.detail__title,
.cta-panel h2 {
  font-family: var(--display-tipo);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

/*
 * Fuera la escena del sistema anterior, en TODAS las paginas.
 *
 * Los bloques de arriba pintan un lavado de degradados pastel en la
 * primera seccion de <main>, y encima ponen el titular en
 * `mix-blend-mode: difference` para que se recorte contra el. Con la
 * pagina clara funcionaba. Con la pagina oscura queda un globo rosa de
 * mil pixeles y un titular que se resta contra el hasta desaparecer:
 * medido en /blog, el titular no se leia.
 *
 * Se apaga entero. La atmosfera ahora la pone la nube, y las paginas
 * que no la tienen se quedan con el fondo, que ya no es plano.
 */
main > section:first-of-type::before,
main > section:first-of-type::after,
.section--cta::before,
.section--cta::after,
.section--escena::before,
.section--escena::after {
  content: none !important;
}

/* Sin excluir el hero, este `background: none` —puesto para matar el
   lavado pastel del primer sistema— se llevaba por delante el degradado
   del hero, que es la mitad de la atmosfera de la pagina. */
main > section:first-of-type:not(.hero) {
  background: none !important;
}

/*
 * Y el color, con !important.
 *
 * El titular de la primera seccion iba en el color del fondo para que la
 * mezcla por diferencia lo recortara contra el lavado pastel. Quitada la
 * mezcla, se quedaba en negro sobre negro: en /blog el H1 existia, medía
 * 801x194 y era invisible. El selector original lleva dos :not() y gana
 * por especificidad a cualquier reescritura razonable, asi que aqui se
 * fuerza en vez de encadenar mas clases.
 */
main > section:first-of-type .section__header h1,
main > section:first-of-type .section__header h2,
main > section:first-of-type .section__header p,
main > section:first-of-type .section__header h1 *,
main > section:first-of-type .section__header h2 *,
.section--cta .section__header h1,
.section--cta .section__header h2,
.section--escena .section__header h1,
.section--escena .section__header h2,
.cta-panel h2 {
  mix-blend-mode: normal !important;
  color: var(--tinta) !important;
}

main > section:first-of-type .section__header p { color: var(--apagado) !important; }

main > section:first-of-type.escena { min-height: 100svh; }

.hero__escena,
#orbe { display: none !important; }

/* --- La escena --------------------------------------------------------- */

.escena {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
}

/*
 * El lienzo va fijo y detrás de TODO el documento, no dentro del hero:
 * así la nube sigue ahí cuando se baja, y lo que cambia con el scroll
 * es el punto de vista. Es lo que hace que se mueva la página entera.
 */
.escena__lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.escena__frente {
  position: relative;
  z-index: 2;
  width: min(72rem, 100% - 3rem);
  margin-inline: auto;
}

/*
 * Un velo detras del texto. Por muy medida que este la nube, el titular
 * cae encima de puntos encendidos y el contraste depende de cuantos
 * pasen por debajo en ese momento. Esto lo fija: degradado desde el
 * fondo hacia transparente, ancho, sin borde visible.
 */
.escena__frente::before {
  content: '';
  position: absolute;
  inset: -6rem -8rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 62% at 32% 46%,
    rgba(8, 9, 12, 0.94) 0%,
    rgba(8, 9, 12, 0.78) 42%,
    rgba(8, 9, 12, 0) 78%);
}

.escena__cartela {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 2rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--apagado);
}

/* El punto que late: el catálogo se sincroniza solo, y se nota. */
.escena__vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5af0b2;
  box-shadow: 0 0 0 0 rgba(90, 240, 178, 0.65);
  animation: latido 2.6s ease-out infinite;
}

@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(90, 240, 178, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(90, 240, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 240, 178, 0); }
}

.escena__titular {
  margin: 0 0 2.5rem;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  max-width: 20ch;
}

/* --- El mando ---------------------------------------------------------- */

/*
 * Dos desplegables, un número y un enlace, en una sola barra. Es la
 * demostración entera del producto: se toca, la nube se separa y el
 * recuento cambia. Y sin JavaScript el <form> envía al buscador igual.
 */
.mando {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: rgba(16, 19, 25, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mando__campo { display: flex; flex-direction: column; gap: 0.5rem; }

.mando__campo label {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--apagado);
}

.mando__campo select {
  min-width: 14rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--filete);
  border-radius: 12px;
  background: rgba(8, 9, 12, 0.8);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: var(--t-body-sm);
  transition: border-color 0.2s ease;
}

.mando__campo select:hover { border-color: rgba(238, 241, 246, 0.34); }

.mando__campo select:focus-visible {
  outline: 2px solid var(--lago);
  outline-offset: 2px;
}

.mando__marcador {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-left: auto;
  text-align: right;
}

.mando__marcador strong {
  font-family: var(--display-tipo);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  /* Tabulares: si no, el número baila de ancho mientras cuenta. */
  font-variant-numeric: tabular-nums;
}

.mando__marcador span {
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  color: var(--apagado);
  max-width: 26ch;
}

.mando__ir { align-self: flex-end; }

.escena__pista {
  margin: 1.5rem 0 0;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  /* .45 medía 4,10:1 sobre el fondo y AA pide 4,5 para texto pequeño. */
  color: rgba(238, 241, 246, 0.52);
}

/* --- La etiqueta de cada punto ----------------------------------------- */

.nube-nota {
  position: fixed;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 24rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--filete);
  border-radius: 14px;
  background: rgba(8, 9, 12, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-body-sm);
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translate(1rem, -50%) scale(0.97);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.nube-nota.visible { opacity: 1; transform: translate(1rem, -50%) scale(1); }

.nube-nota b { font-weight: 500; color: var(--tinta); }
.nube-nota span { color: var(--apagado); font-size: var(--t-caption); }

.nube-nota__tipo,
.nube-nota__dato {
  font-family: var(--dato-tipo);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
}

.nube-nota__tipo { color: var(--lago) !important; }
.nube-nota__sector { color: rgba(238, 241, 246, 0.55) !important; }

/* --- Las tres cosas que hace ------------------------------------------- */

.pasos__lista {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .pasos__lista { grid-template-columns: repeat(3, 1fr); }
}

.pasos__lista > li {
  position: relative;
  padding: 2.25rem;
  border: 1px solid var(--filete-flojo);
  border-radius: var(--radio-superficie);
  background: rgba(16, 19, 25, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* El volumen es de verdad: la tarjeta se inclina en 3D con el ratón,
     y el ángulo lo pone sitio.js midiendo dónde está el cursor. */
  transform: perspective(900px)
             rotateX(calc(var(--iny, 0) * -5deg))
             rotateY(calc(var(--inx, 0) * 5deg))
             translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}

.pasos__lista > li:hover { border-color: var(--filete); }

.pasos__n {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  letter-spacing: var(--track-cartela);
  color: var(--lago);
}

.pasos__lista h2 {
  margin: 0 0 0.75rem;
  font-size: var(--t-heading-sm);
}

.pasos__lista p { margin: 0; color: var(--apagado); }

.pasos__mas {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--lago);
}

/* --- El límite de la IA ------------------------------------------------ */

.limite__caja {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.limite__ojo {
  margin: 0 0 1rem;
  font-family: var(--dato-tipo);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--apagado);
}

.limite__frase {
  margin: 0;
  font-family: var(--display-tipo);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* --- Superficies, cabecera y pie sobre fondo oscuro -------------------- */

.section { position: relative; z-index: 1; }

.section--subtle {
  background: rgba(16, 19, 25, 0.55);
  border-block: 1px solid var(--filete-flojo);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.notice-banner,
.avisoviejo,
.concnota,
.filters,
.empty-state,
.panelayuda,
.factbox,
.pricing-card,
.memoria__aviso,
.form-ok,
.cta-panel {
  background: rgba(16, 19, 25, 0.66);
  border-color: var(--filete);
  color: var(--tinta);
}

.cabecera {
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--filete-flojo);
}

/*
 * El pie.
 *
 * Con la pagina clara, el pie era el unico bloque oscuro y su texto iba
 * en --canvas, que entonces era claro. Al invertir la paleta, --canvas
 * paso a ser casi negro y el pie entero quedo en negro sobre negro:
 * 1,08:1 en las tres piezas, en las diecisiete paginas. Se corrigen las
 * piezas de dentro, no solo el fondo.
 */
.footer {
  background: rgba(16, 19, 25, 0.72);
  color: var(--tinta);
  border-top: 1px solid var(--filete-flojo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer a,
.footer p,
.footer li,
.footer__brand .brand,
.footer__col-title { color: var(--tinta); }

.footer p,
.footer a { color: var(--apagado); }

.footer a:hover { color: var(--tinta); }

.footer__col-title,
.footer__brand .brand { color: var(--tinta); }

.footer__legal,
.footer small { color: var(--apagado); }

/* --- Botones ----------------------------------------------------------- */

.btn,
.savebtn {
  border-color: var(--filete);
  color: var(--tinta);
}

.btn:hover,
.savebtn:hover { background: var(--tinta); color: var(--canvas); }

.btn--filled,
.btn--primary {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--canvas);
}

.btn--filled:hover,
.btn--primary:hover { background: var(--lago); border-color: var(--lago); color: #050609; }

a.btn[href="/registro.php"] { background: var(--lago); border-color: var(--lago); color: #050609; }
a.btn[href="/registro.php"]:hover { background: var(--tinta); border-color: var(--tinta); color: var(--canvas); }

/* La marquesina de procedencias, sobre el fondo nuevo. */
.sourcebar.marquesina { border-color: var(--filete-flojo); }
.sourcebar.marquesina li { color: var(--apagado); }

@media (prefers-reduced-motion: reduce) {
  .escena__vivo { animation: none; }
  .pasos__lista > li { transform: none; }
}

/* --- Las guías en la portada ------------------------------------------ */

/*
 * Una lista de enlaces y nada más. Sin tarjeta, sin resumen, sin fecha:
 * el titular de cada guía ya dice de qué va, y la portada no está para
 * repetirlo. Lo que hace falta aquí es el enlace.
 */
.guias__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--filete-flojo);
}

.guias__cab h2 { margin: 0; font-size: var(--t-heading-sm); }

.guias__lista { margin: 0; padding: 0; list-style: none; }

.guias__lista > li { border-bottom: 1px solid var(--filete-flojo); }

.guias__lista a {
  display: block;
  padding: 1.15rem 0;
  color: var(--medio);
  text-decoration: none;
  font-size: var(--t-body-lg);
  transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.guias__lista a:hover {
  color: var(--tinta);
  padding-left: 0.75rem;
}

/* ===== 20 · DOCK ===================================================== */

/*
 * «Sunlit cream paper, cobalt pulse».
 *
 * El sistema de Dock, tal como lo especifica su ficha: papel crema
 * cálido en vez de blanco puro, una sola tipografía para todo, un único
 * azul cobalto que hace de color de acción, filetes de 1px, sombras casi
 * invisibles y el producto como protagonista visual — no ilustraciones,
 * no renders 3D, no fotografía.
 *
 * Va al final y por eso gana a los diecinueve bloques de arriba, que se
 * conservan debajo. La escena WebGL del bloque 19 desaparece de la
 * portada: en este sistema el héroe es la interfaz real del producto.
 *
 * Una nota sobre la ficha: su bloque de referencia rápida dice «no
 * distinct primary action color» y a la vez el resto del documento
 * repite tres veces que el botón principal es #0068f9 relleno con texto
 * blanco. Se sigue lo segundo, que es lo que describen los componentes,
 * los ejemplos y la lista de «Do».
 */

/* --- Tipografía: una sola familia -------------------------------------- */

/*
 * Roobert es de pago. La propia ficha propone Inter como sustituta más
 * cercana, y ya estaba autoalojada. El eje de peso va de 300 a 800
 * (medido en el navegador), así que cubre los cuatro pesos del sistema.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
}

:root {
  /* --- Color --- */
  --canvas: #fafbfc;   /* Canvas Cream. Nunca blanco puro */
  --piedra: #fbfaf7;   /* Surface Ivory */
  --papel: #ffffff;    /* Pure White */
  --lavanda: #f4f0ff;  /* Lavender Mist */
  --azul-polvo: #d6e4f1;

  --tinta: #121722;    /* Ink Charcoal */
  --medio: #121722;
  /*
   * Aqui se corrige la ficha, y es la unica desviacion deliberada.
   *
   * El Slate Gray de Dock (#777c86) mide 3,98:1 sobre el lienzo crema y
   * 4,19:1 sobre blanco: por debajo del 4,5:1 que pide AA para texto
   * pequeno, y esto es texto secundario de cuerpo, no un estado
   * deshabilitado. Un paso mas oscuro en la misma familia fria lo deja
   * en 4,68:1 sin cambiar el caracter del color.
   *
   * Por lo mismo, el Steel Gray (#a5a5a5, 2,6:1) no se usa para texto
   * en ningun sitio.
   */
  --apagado: #6b7079;
  --ceniza: #cccccc;   /* Faint Gray */

  --filete: #efefef;   /* Hairline. Nunca más de 1px */
  --filete-flojo: #efefef;

  --lago: #0068f9;     /* Electric Cobalt. El único color de acción */
  --lago-hondo: #024bb1;
  --cerulean: #0074dd;
  --violeta: #6736eb;  /* Decorativo. Nunca en botones ni enlaces */
  --bosque: #046645;

  /* --- Tipografía --- */
  --display-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dato-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-caption: 0.8125rem;   /* 13 */
  --t-body-sm: 0.875rem;    /* 14 */
  --t-body: 1rem;           /* 16 */
  --t-body-lg: 1.125rem;    /* 18 */
  --t-lead: 1.125rem;       /* 18 */
  --t-subheading: 1.25rem;  /* 20 */
  --t-heading-sm: 1.5rem;   /* 24 */
  --t-heading: 2.5rem;      /* 40 */
  --t-heading-lg: 3rem;     /* 48 */
  --t-display: 5.25rem;     /* 84 */

  /* Interlineado muy apretado en display: es la firma del sistema. */
  --lh-apretado: 1.06;
  --lh-medio: 1.2;
  --lh-suelto: 1.56;

  --track: -0.005em;
  --track-cartela: 0.077em;

  /* --- Forma --- */
  --radio-superficie: 16px;  /* tarjetas e imágenes */
  --radio-control: 48px;     /* botones y pestañas */
  --radio-menor: 8px;        /* etiquetas pequeñas */

  --sombra-sutil:
    rgba(0, 0, 0, 0.07) 0 1px 1px 0,
    rgba(0, 0, 0, 0.04) 0 -1px 1px 0 inset,
    rgba(0, 0, 0, 0.14) 0 0 0 0.5px inset;
  --sombra-grande: rgba(0, 0, 0, 0.04) 0 20px 20px -8px;

  /* --- Espacio --- */
  --gap-elemento: 0.5rem;
  --pad-tarjeta: 1.5rem;
  --gap-seccion: 5rem;      /* 80 */
  --ancho-pagina: 75rem;    /* 1200 */
}

html { background: var(--canvas); }

body {
  background: var(--canvas);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-suelto);
  letter-spacing: normal;
  font-feature-settings: 'ss01' on, 'kern' on;
}

/* Fuera los lavados oscuros del sistema anterior. */
body::before { content: none !important; }

h1, h2, h3, h4, h5, h6,
.section__header h1,
.section__header h2,
.detail__title,
.cta-panel h2 {
  font-family: var(--display-tipo);
  font-weight: 600;
  letter-spacing: var(--track);
  line-height: var(--lh-medio);
  color: var(--tinta);
  text-transform: none;
}

h1 { font-size: var(--t-heading-lg); }
h2 { font-size: var(--t-heading); }
h3 { font-size: var(--t-heading-sm); }
h4, h5, h6 { font-size: var(--t-subheading); }

.container,
.section > .container { max-width: var(--ancho-pagina); }

.section { padding-block: var(--gap-seccion); }

/* --- Botones: cápsulas ------------------------------------------------- */

/*
 * Radio de 48px en todo lo pulsable. Es la decisión más reconocible del
 * sistema: cada acción parece una cápsula física, no un rectángulo.
 */
.btn,
.savebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;   /* 15 */
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.savebtn:hover { background: var(--piedra); color: var(--tinta); border-color: var(--ceniza); }

/* La acción principal, y la única con color. */
.btn--filled,
.btn--primary,
a.btn[href="/registro.php"],
.btn--destacado {
  background: var(--lago);
  border-color: var(--lago);
  color: #ffffff;
}

.btn--filled:hover,
.btn--primary:hover,
a.btn[href="/registro.php"]:hover,
.btn--destacado:hover {
  background: var(--lago-hondo);
  border-color: var(--lago-hondo);
  color: #ffffff;
}

.btn--lg { padding: 0.9rem 1.75rem; font-size: 1rem; }

/* Enlaces de texto: cobalto, subrayado solo al pasar. */
/*
 * Enlaces de prosa, y solo de prosa.
 *
 * Antes esto era `main a:not(...)` con siete exclusiones, que sumaban
 * (0,7,2) de especificidad: le ganaba a cualquier regla posterior
 * razonable, y cada excepcion nueva obligaba a anadir otro :not(). Asi
 * acabaron en cobalto de 22px los treinta titulares del listado.
 *
 * Ahora se acota a los contenedores donde de verdad hay prosa. Un
 * enlace dentro de un titular, de una tarjeta o de la navegacion queda
 * fuera por construccion, sin pelear.
 */
main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia):not(.sector):not(.comunidad) {
  /* Cerulean (#0074dd) se queda en 4,36:1 sobre el crema. El cobalto
     principal llega justo, y ademas es el color de accion del sistema. */
  color: var(--lago);
  text-decoration: none;
  font-weight: 500;
}

main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia):not(.sector):not(.comunidad):hover { text-decoration: underline; }

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  background: var(--papel);
  border-bottom: 1px solid var(--filete);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav__links a,
.nav__actions a:not(.btn) {
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta);
}

.nav__buscar input {
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  color: var(--tinta);
}

/*
 * La barra no cabia. Con el buscador a su ancho anterior, cinco entradas
 * de menu y dos botones, «Precios» acababa debajo del boton de sesion y
 * los dos botones partian en dos lineas. Se aprieta el buscador, se
 * reduce el hueco entre entradas y se prohibe partir los botones.
 */
.nav { gap: 1rem; min-height: 4.5rem; }

.nav__buscar { flex: 0 1 13rem; min-width: 0; }

.nav__links { gap: 0.25rem 1.25rem; }

.nav__actions { gap: 0.5rem; flex: 0 0 auto; }

.nav__actions .btn {
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  /* Seguian en mayusculas: un bloque anterior las pone asi con mas
     especificidad que la regla general de .btn. */
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 1180px) {
  .nav__buscar { display: none; }
}

/* --- El hero ------------------------------------------------------------ */

/*
 * Pila centrada: titular de 84px, entradilla de 18px a 640px de ancho y
 * dos cápsulas. El fondo pasa de crema a un azul muy diluido por abajo,
 * que es donde empieza a flotar la captura del producto.
 */
.hero {
  position: relative;
  min-height: 0;
  padding: 6rem 0 0;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 34%, #eaf4ff 78%, var(--lavanda) 100%);
  overflow: visible;
}

.hero__rejilla {
  display: block;
  width: min(75rem, 100% - 3rem);
  margin-inline: auto;
  text-align: center;
}

/*
 * Bloque en linea, no caja flexible: como flex, el numero era un item
 * suelto y en movil se quedaba solo en el primer renglon con el resto
 * del texto debajo. Como texto normal, envuelve bien.
 */
.hero__cartela {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  background: var(--papel);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--apagado);
  text-wrap: balance;
}

.hero__cartela b { color: var(--tinta); font-weight: 600; }

.hero__titular {
  margin: 0 auto 1.5rem;
  max-width: 16ch;
  font-family: var(--display-tipo);
  font-size: clamp(2.75rem, 6.4vw, var(--t-display));
  font-weight: 600;
  line-height: var(--lh-apretado);
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.hero__entrada {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* --- El marco del producto ---------------------------------------------- */

/*
 * El protagonista visual. No es una ilustración ni un render: es la
 * interfaz de verdad, con datos de verdad, montada en HTML para que no
 * se quede vieja como se queda una captura de pantalla.
 */
.marco {
  width: min(75rem, 100% - 3rem);
  margin: 3rem auto 0;
}

.marco__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.marco__pest {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.marco__pest:hover { background: rgba(18, 23, 34, 0.05); }

/* El fondo en cápsula es el único indicador de pestaña activa: ni
   subrayado ni borde. */
.marco__pest[aria-selected="true"] {
  background: var(--papel);
  box-shadow: var(--sombra-sutil);
}

.marco__ventana {
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: var(--sombra-grande);
  border: 1px solid var(--filete);
  overflow: hidden;
}

.marco__barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--filete);
  background: var(--piedra);
}

.marco__puntos { display: flex; gap: 0.375rem; }
.marco__puntos i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ceniza);
}

.marco__ruta {
  flex: 1;
  text-align: center;
  font-size: var(--t-caption);
  color: var(--apagado);
}

.marco__lienzo { padding: 1.5rem; }

.marco__panel[hidden] { display: none; }

/* Filas del ranking: la pantalla real del producto. */
.rank { display: flex; flex-direction: column; }

.rank__fila {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--filete);
}

.rank__fila:last-child { border-bottom: 0; }

.rank__nota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.3rem 0;
  border-radius: var(--radio-menor);
  background: rgba(0, 104, 249, 0.08);
  /* Cobalto sobre su propio tinte al 8 % mide 4,32:1: por debajo de AA.
     El tono pulsado del sistema, sobre el mismo tinte, da 7,1:1. */
  color: var(--lago-hondo);
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rank__nombre {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank__org {
  display: block;
  font-size: var(--t-caption);
  font-weight: 400;
  color: var(--apagado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank__dato {
  font-size: var(--t-body-sm);
  color: var(--apagado);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank__plazo--apura { color: var(--lago); font-weight: 500; }

/* Desglose de factores: la pantalla que explica la nota. */
.factores { display: grid; gap: 0.75rem; }

.factores__fila {
  display: grid;
  grid-template-columns: 11rem 1fr 3rem;
  align-items: center;
  gap: 1rem;
}

.factores__nombre { font-size: 0.9375rem; color: var(--tinta); }

.factores__barra { display: block; width: 100%; height: 8px; }
.factores__hueco { fill: var(--filete); }
.factores__lleno { fill: var(--lago); }

.factores__valor {
  text-align: right;
  font-size: var(--t-body-sm);
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Índice de la memoria: lo que redacta la IA, sin inventarse el texto. */
.memo { display: grid; gap: 0.5rem; }

.memo__linea {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.memo__tic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--bosque);
  color: var(--bosque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.memo__etiq {
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radio-menor);
  background: var(--lavanda);
  color: var(--violeta);
  font-size: var(--t-caption);
  font-weight: 500;
}

/*
 * En movil la fila del ranking no cabe en cuatro columnas: el nombre y
 * el organismo salian cortados con puntos suspensivos a mitad de
 * palabra. Se apila —nota arriba a la izquierda, texto entero debajo— y
 * se deja de recortar.
 */
@media (max-width: 700px) {
  .rank__fila {
    grid-template-columns: 3.25rem 1fr;
    gap: 0.5rem 0.75rem;
  }

  .rank__nombre,
  .rank__org {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .rank__dato {
    grid-column: 2;
    font-size: var(--t-caption);
  }

  .factores__fila { grid-template-columns: 1fr 3rem; }
  .factores__barra { grid-column: 1 / -1; }
}

.marco__pie {
  margin: 1rem 0 0;
  font-size: var(--t-caption);
  color: var(--apagado);
  text-align: center;
}

/* --- Tarjetas de cifra --------------------------------------------------- */

.cifras {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .cifras { grid-template-columns: repeat(3, 1fr); }
}

.cifra {
  padding: var(--pad-tarjeta);
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--piedra);
  box-shadow: var(--sombra-sutil);
}

.cifra__ojo {
  margin: 0 0 0.75rem;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--apagado);
}

.cifra__n {
  display: block;
  font-family: var(--display-tipo);
  font-size: var(--t-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cifra--azul .cifra__n { color: var(--lago); }
.cifra--violeta .cifra__n { color: var(--violeta); }
.cifra--verde .cifra__n { color: var(--bosque); }

.cifra p { margin: 0.5rem 0 0; font-size: var(--t-body-sm); color: var(--apagado); }

/* --- Las tres cosas que hace --------------------------------------------- */

.pasos__lista {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .pasos__lista { grid-template-columns: repeat(3, 1fr); }
}

.pasos__lista > li {
  padding: var(--pad-tarjeta);
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: var(--sombra-sutil);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.pasos__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  border-radius: 60px;
  background: var(--lavanda);
  color: var(--violeta);
  font-size: var(--t-body-sm);
  font-weight: 600;
  letter-spacing: normal;
}

.pasos__lista h2 { margin: 0 0 0.5rem; font-size: var(--t-subheading); }
.pasos__lista p { margin: 0; font-size: 0.9375rem; color: var(--apagado); }

.pasos__mas {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--lago);
}

/* --- El límite de la IA --------------------------------------------------- */

.limite__caja { max-width: 46rem; margin-inline: auto; text-align: center; }

.limite__ojo {
  margin: 0 0 1rem;
  font-size: var(--t-body-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--apagado);
}

.limite__frase {
  margin: 0;
  font-family: var(--display-tipo);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

/* --- Guías ----------------------------------------------------------------- */

.guias__cab { border-bottom: 1px solid var(--filete); }
.guias__cab h2 { font-size: var(--t-heading-sm); }
.guias__lista > li { border-bottom: 1px solid var(--filete); }

.guias__lista a {
  color: var(--tinta);
  font-size: var(--t-body);
  font-weight: 500;
}

.guias__lista a:hover { color: var(--cerulean); }

/* --- El cierre con degradado ----------------------------------------------- */

/*
 * El único sitio donde el cobalto se derrama. La ficha es explícita: la
 * esquina en degradado es la firma del cierre y no debe repetirse por la
 * página.
 */
.section--cta { max-width: none; padding-inline: 0; }

.cta-panel {
  position: relative;
  max-width: none;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: radial-gradient(120% 150% at 100% 118%, var(--lago) 0%, #7fb2ff 26%, #c8dcf5 52%, var(--canvas) 78%);
  box-shadow: none;
  overflow: hidden;
}

.cta-panel h2 {
  margin: 0 auto 1rem;
  max-width: 20ch;
  font-size: clamp(2rem, 4.6vw, var(--t-heading-lg));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.cta-panel p {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: var(--t-body-lg);
  color: var(--tinta);
}

/* El panel venia con rejilla de dos columnas de un bloque anterior: el
   titular a la izquierda y el parrafo a la derecha, cuando este cierre es
   una pila centrada. */
.cta-panel,
.section--cta .cta-panel {
  display: block;
  grid-template-columns: none;
}

.cta-panel__actions { display: flex; justify-content: center; }

/* La regla generica de enlaces de <main> lleva cuatro :not() y gana por
   especificidad a `.guias__lista a`: la lista salia entera en cobalto y
   pesaba como un bloque de color. */
.guias__lista a { color: var(--tinta); font-weight: 500; }
.guias__lista a:hover { color: var(--lago); }

/* --- Superficies varias ----------------------------------------------------- */

.section--subtle {
  background: var(--piedra);
  border-block: 1px solid var(--filete);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.notice-banner,
.avisoviejo,
.concnota,
.filters,
.empty-state,
.panelayuda,
.factbox,
.pricing-card,
.memoria__aviso,
.form-ok {
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  box-shadow: var(--sombra-sutil);
  color: var(--tinta);
}

.chip,
.tag {
  border: 1px solid var(--filete);
  border-radius: var(--radio-menor);
  background: var(--piedra);
  font-size: var(--t-caption);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--apagado);
}

.section__eyebrow {
  font-size: var(--t-body-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--apagado);
}

/* --- Pie -------------------------------------------------------------------- */

.footer {
  background: var(--papel);
  border-top: 1px solid var(--filete);
  color: var(--tinta);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.footer a,
.footer p,
.footer li { color: var(--apagado); }
.footer a:hover { color: var(--tinta); }

.footer__col-title,
.footer__brand .brand {
  color: var(--tinta);
  font-size: var(--t-body-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.footer__legal,
.footer small { color: var(--apagado); font-size: var(--t-caption); }

/* --- Restos del sistema anterior --------------------------------------------- */

.escena,
.escena__lienzo,
.nube-nota,
.cursor-punto { display: none !important; }

/* La franja de procedencias es contenido real —BDNS, Ministerio de
   Hacienda, boletines autonomicos—, asi que no se esconde: se le quita
   el desplazamiento, que era del sistema anterior, y se queda quieta. */
.sourcebar.marquesina {
  border-block: 1px solid var(--filete);
  mask-image: none;
  -webkit-mask-image: none;
}

.sourcebar.marquesina ul { animation: none !important; }

.sourcebar.marquesina li {
  font-size: var(--t-body-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--apagado);
}

/* --- Secciones de la portada completa --------------------------------- */

/*
 * Cabecera de seccion: rotulo pequeno, titular y, a la derecha, el
 * enlace a la pagina entera. Es el patron que se repite de aqui abajo.
 */
.bloque__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 2rem;
}

.bloque__cab h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, var(--t-heading));
  letter-spacing: -0.02em;
}

.bloque__ojo {
  width: 100%;
  margin: 0 0 0.5rem;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--apagado);
}

/* --- Sectores ----------------------------------------------------------- */

.sectores {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .sectores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .sectores { grid-template-columns: repeat(3, 1fr); } }

.sector {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sector:hover { border-color: var(--azul-polvo); background: var(--piedra); text-decoration: none; }

.sector__n {
  font-family: var(--display-tipo);
  font-size: var(--t-subheading);
  font-weight: 600;
  color: var(--lago);
  font-variant-numeric: tabular-nums;
}

.sector span:first-child {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta);
}

/* --- Comunidades: capsulas ------------------------------------------------ */

.comunidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comunidad {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  background: var(--papel);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta) !important;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.comunidad:hover { border-color: var(--azul-polvo); background: var(--piedra); text-decoration: none !important; }

.comunidad b {
  color: var(--lago);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Precios -------------------------------------------------------------- */

.planes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) { .planes { grid-template-columns: repeat(2, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: var(--sombra-sutil);
}

.plan--destacado { background: var(--piedra); border-color: var(--azul-polvo); }

.plan h3 { margin: 0 0 0.35rem; font-size: var(--t-subheading); }

.plan__quien { margin: 0 0 1.25rem; font-size: 0.9375rem; color: var(--apagado); }

.plan__precio {
  font-family: var(--display-tipo);
  font-size: var(--t-heading);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan__precio span {
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--apagado);
}

.plan ul {
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.plan li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.plan li::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.28rem;
  border-radius: 50%;
  border: 1.5px solid var(--bosque);
}

.plan .btn { align-self: flex-start; margin-top: auto; }

/* --- Preguntas -------------------------------------------------------------- */

.preguntas { margin: 0; }

.pregunta {
  border-bottom: 1px solid var(--filete);
}

.pregunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: var(--t-body-lg);
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}

.pregunta > summary::-webkit-details-marker { display: none; }

/* El signo, girado cuando esta abierta: es todo el indicador que hace
   falta y no mete un icono mas en el sistema. */
.pregunta > summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--lago);
  transition: transform 0.2s ease;
}

.pregunta[open] > summary::after { transform: rotate(45deg); }

.pregunta > p {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-size: var(--t-body);
  color: var(--apagado);
}

/* ===== 21 · PAGINAS INTERIORES ======================================= */

/*
 * La portada ya es Dock. Las demas paginas heredaban los tokens pero
 * seguian maquetadas sobre la rejilla editorial de doce columnas del
 * primer sistema, con la cabecera repartida —titular a la izquierda,
 * apoyo a la derecha— y `display: contents` disolviendo su caja.
 *
 * Eso dejaba bandas de 150-180px vacias entre la cabecera y el contenido
 * en cuanto el apoyo no llenaba su fila, que es casi siempre. Aqui el
 * contenedor vuelve a ser un bloque y la cabecera, una pila a la
 * izquierda. Las tres maquetas que de verdad necesitan columnas se
 * declaran solas, sin depender de la rejilla de doce.
 */

@media (min-width: 1000px) {
  .section > .container { display: block; }

  .section > .container > *,
  .section > .container > .a-sangre,
  .section--cta > .container > * { grid-column: auto; }

  .section > .container > .section__header {
    display: block;
    margin-bottom: 3rem;
  }

  .section > .container > .section__header > * { grid-column: auto; }

  .section > .container > .section__header > .section__eyebrow {
    margin-bottom: 0.75rem;
  }

  .section > .container > .section__header > :is(h1, h2),
  .section > .container > .section__header > h2.seccion--pico,
  .section > .container > .section__header > h2.seccion--medio,
  .section > .container > .section__header > h2.titular--largo {
    max-width: 22ch;
    font-size: clamp(2rem, 4vw, var(--t-heading-lg));
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .section > .container > .section__header > p:not(.section__eyebrow) {
    max-width: 40rem;
    margin: 1rem 0 0;
    align-self: auto;
    font-size: var(--t-body-lg);
    color: var(--apagado);
  }

  /* Ese margen lo pone ahora la cabecera, que vuelve a tener caja. */
  .section > .container > .section__header + * { margin-top: 0; }

  /* --- Las tres maquetas que si llevan columnas --- */

  /* Con `.catalog` a secas perdia por especificidad contra
     `.section > .container` y se quedaba en bloque: las dos columnas
     salian una encima de otra a 1152px cada una. */
  .section > .container.catalog {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }

  .container.detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 3rem;
    align-items: start;
  }

  /* Bloque, no rejilla: la tarjeta lleva `width: min(28rem, 100%)` y
     dentro de una rejilla sin plantilla ese 100% se referia a una
     columna dimensionada por su contenido — se encogia a 100px. */
  .section > .container.auth-shell { display: block; }
}

/*
 * La apertura de una pagina interior no necesita 128px de aire arriba.
 *
 * Esos 128 son `--gap-seccion + max(2.75rem, 3.3333vw)`: hueco reservado
 * para la barra de navegacion cuando flotaba por encima del contenido,
 * en el primer sistema. Ahora la barra es pegajosa y opaca y ocupa su
 * propio sitio, asi que el hueco es aire muerto. El selector repite el
 * original para ganarle por orden, no por especificidad.
 */
main > section:first-of-type:not(.hero):not(.section--sin-escena),
main > article > section:first-of-type,
.page-hero {
  padding-top: var(--gap-seccion);
}

/*
 * Titulares de articulo en mayusculas.
 *
 * Venia del primer sistema, que gritaba todo el display. Aqui un H2 de
 * 20px en mayusculas dentro de un texto largo se lee peor y ademas
 * contradice la regla del sistema, que reserva las mayusculas para
 * cadenas de interfaz.
 */
.articulo__texto h2,
.articulo__texto h3,
.memoria__sec h3 {
  text-transform: none;
  letter-spacing: -0.01em;
}

.articulo__texto h2 { font-size: var(--t-heading-sm); margin-top: 3rem; }
.articulo__texto h3 { font-size: var(--t-subheading); }

/* La miga de pan y la linea de datos del articulo, en caja normal: eran
   mayusculas con tracking abierto del sistema anterior. */
.breadcrumbs,
.breadcrumbs a,
.articulo__meta,
.articulo__datos {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--t-body-sm);
}

/* --- El articulo ------------------------------------------------------ */

/*
 * La cabecera del articulo llevaba la clase `.articulo`, que es una
 * rejilla de `1fr 17rem` pensada para el cuerpo con su indice al lado.
 * Aplicada a la cabecera, la columna de 17rem se quedaba vacia y dejaba
 * una banda muerta a la derecha del titular, y el indice acababa
 * apilado encima del texto en vez de a su lado.
 *
 * La rejilla se mueve a donde tenia que estar: el cuerpo.
 */
@media (min-width: 1000px) {
  .section.page-hero > .container.articulo { display: block; }

  .section > .container.articulo__cuerpo {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.container.articulo > .detail__title { max-width: 22ch; }
.container.articulo > .detail__lead { max-width: 42rem; font-size: var(--t-body-lg); }

/* Medida de lectura. A 1.100px de ancho el ojo pierde el renglon al
   volver, y una guia de mil palabras se abandona a la mitad. */
.articulo__texto { max-width: 68ch; }

/* La miga y la linea de datos, en caja normal: eran mayusculas con
   tracking abierto del primer sistema. */
.artmeta,
.crumbs,
.crumbs a {
  font-family: var(--texto-tipo);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--t-body-sm);
}

/* Los rotulos de caja tambien en caja normal: el sistema tiene una sola
   tipografia y reserva las mayusculas para nada, en realidad — ni la
   navegacion ni las pestanas las usan. */
.factbox__title,
.filters__title {
  font-family: var(--texto-tipo);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--t-body-sm);
  font-weight: 600;
  color: var(--tinta);
}

/*
 * Un enlace que ES un titular toma el color del titular.
 *
 * En los listados el nombre de cada convocatoria es un <a> dentro de un
 * <h3>: con la regla general de enlaces salian treinta titulares en
 * cobalto de 22px y la pagina pesaba como un cartel. La cadena de :not()
 * repite la de esa regla porque, si no, pierde por especificidad.
 */
main :is(h1, h2, h3, h4) > a {
  color: var(--tinta);
  font-weight: inherit;
  text-decoration: none;
}

main :is(h1, h2, h3, h4) > a:hover { color: var(--lago); text-decoration: none; }

/* La miga de pan si va en cobalto: son enlaces de navegacion y con la
   regla acotada a prosa se quedaban sin color. */
.crumbs a { color: var(--lago); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Entre la cabecera de pagina y su cuerpo se sumaban dos rellenos de
   seccion: 80px abajo de una y 80px arriba de la otra. Uno basta. */
.page-hero { padding-bottom: 0; }

/* --- Los restos de la rejilla de doce ---------------------------------- */

/*
 * Declarar la maqueta nueva no basta: las piezas seguian con su
 * `grid-column` de la rejilla anterior, y con solo dos columnas
 * declaradas un `grid-column: 2 / 9` se inventa siete columnas
 * implicitas de 0px. La ficha salia con el cuerpo a 288px y el lateral
 * a 768px, justo al reves de lo que toca.
 *
 * Los selectores llevan una clase mas que los originales porque, si no,
 * pierden por especificidad.
 */
.section > .container.detail__grid > .detail__main,
.section > .container.detail__grid > .detail__side,
.section > .container.catalog > :first-child,
.section > .container.catalog > :last-child,
.section > .container.auth-shell > .auth-card,
.section > .container > .section__header > h2.seccion--pico,
.section > .container > .section__header > h2.titular--largo {
  grid-column: auto;
}

/* Los titulares de seccion dentro del cuerpo de una ficha iban a 40px,
   que en este sistema es tamano de apertura de pagina. Aqui son
   subtitulos de un documento: 24. */
.detail__main h2 { font-size: var(--t-heading-sm); margin-top: 2.5rem; }
.detail__main h3 { font-size: var(--t-subheading); }

/* ===== 22 · ATMOSFERA ================================================ */

/*
 * El fondo estaba plano, y con razon.
 *
 * Dos motivos, los dos medidos. El primero: la regla que borraba el
 * lavado del sistema anterior alcanzaba tambien al hero, asi que su
 * degradado no se pintaba y la pagina abria con crema liso. El segundo:
 * la alternancia entre secciones era #fafbfc contra #fbfaf7 — un punto
 * de diferencia, invisible en cualquier pantalla.
 *
 * La ficha del sistema si pide esto: «feature sections alternate between
 * full-bleed gradient backgrounds and contained card grids», y las
 * capturas de producto van «on a gradient or lavender mist background to
 * make them float». Lo que prohibe es el degradado dentro de tarjetas y
 * paneles, no las bandas.
 */

.hero {
  background:
    radial-gradient(52% 42% at 84% 6%, rgba(103, 54, 235, 0.10), transparent 72%),
    radial-gradient(46% 38% at 10% 14%, rgba(0, 104, 249, 0.09), transparent 72%),
    linear-gradient(180deg,
      var(--canvas) 0%,
      var(--canvas) 22%,
      #eaf2ff 52%,
      #d5ecff 74%,
      #e6ecfb 90%,
      var(--canvas) 100%);
}

/*
 * La banda alterna, ahora visible.
 *
 * Lavender Mist en el centro y crema en los extremos: la seccion se
 * separa de la anterior sin cortes duros y sin salirse de la paleta.
 */
.section--subtle {
  background: linear-gradient(180deg,
    var(--canvas) 0%,
    var(--lavanda) 46%,
    var(--lavanda) 60%,
    var(--canvas) 100%);
  border-block: 0;
}

/* Sobre la banda, las tarjetas van en blanco: contra el lavado violeta
   el marfil desaparecia igual que desaparecia contra la crema. */
.section--subtle .pasos__lista > li,
.section--subtle .plan,
.section--subtle .sector,
.section--subtle .comunidad,
.section--subtle .cifra { background: var(--papel); }

/* Y las cifras, tambien en blanco sobre la crema: el marfil del sistema
   esta a un punto del lienzo y no levantaba la tarjeta del fondo. */
.cifra { background: var(--papel); }

/*
 * El marco del producto, flotando.
 *
 * Tres capas muy suaves en vez de una sombra plana: la del sistema
 * (20px al 4 %), una mas ancha al 6 % que da la altura, y un filete de
 * un pixel que define el borde contra el azul del degradado.
 */
.marco__ventana {
  box-shadow:
    rgba(0, 0, 0, 0.04) 0 20px 20px -8px,
    rgba(0, 0, 0, 0.06) 0 48px 64px -28px,
    rgba(18, 23, 34, 0.08) 0 0 0 1px;
}

/* El cierre: el mismo tratamiento de orbes que el hero, para que las dos
   puntas de la pagina rimen. */
.cta-panel {
  background:
    radial-gradient(40% 60% at 88% 12%, rgba(103, 54, 235, 0.14), transparent 70%),
    radial-gradient(120% 150% at 100% 118%, var(--lago) 0%, #7fb2ff 26%, #c8dcf5 52%, var(--canvas) 78%);
}

/* ===== 23 · RADAR ==================================================== */

/*
 * «Tu radar de financiación pública.»
 *
 * Sistema definitivo: herramienta financiera B2B. Editorial + FinTech.
 * Marfil cálido, carbón, un petróleo y un verde de acción. Bordes finos,
 * casi ninguna sombra, mucho blanco y el producto real como protagonista
 * visual.
 *
 * Lo que este bloque APAGA de los anteriores, porque el encargo lo
 * prohíbe expresamente: degradados de ambiente, orbes radiales,
 * desenfoques de fondo (glassmorphism) y cualquier decoración que no
 * explique algo. Los bloques 1-22 se conservan debajo; manda este.
 *
 * Contraste medido, no estimado:
 *   carbón   #14181a sobre marfil  17,1:1
 *   petróleo #0e3a42 sobre marfil  11,8:1   ·  blanco sobre él  12,3:1
 *   verde    #0a7a50 sobre marfil   5,2:1   ·  blanco sobre él   5,4:1
 *   gris     #5a6166 sobre marfil   6,0:1
 *   rojo     #b3261e sobre marfil   6,3:1
 */

:root {
  /* --- Cuatro colores y sus neutros --- */
  --canvas: #fbfaf8;    /* Marfil cálido. Fondo de página */
  --piedra: #f4f3f0;    /* Gris clarísimo. Superficie alterna */
  --papel: #ffffff;     /* Tarjetas y paneles */

  --tinta: #14181a;     /* Carbón. Todo el texto */
  --apagado: #5a6166;   /* Texto secundario */
  --tenue: #8b9196;     /* Sólo iconografía y estados inactivos */

  --petroleo: #0e3a42;  /* Primario: marca, bandas oscuras, cifras */
  --petroleo-claro: #16535f;
  --verde: #0a7a50;     /* Acción: botón principal y enlaces */
  --verde-hondo: #075c3c;
  --verde-tenue: #eef6f2;
  --rojo: #b3261e;      /* Sólo urgencia y error */
  --rojo-tenue: #fdf1f0;

  --filete: #e3e1dd;    /* Todos los bordes. Nunca más de 1px */
  --filete-firme: #cfccc6;

  /* Compatibilidad con los bloques de abajo. */
  --lago: var(--verde);
  --medio: var(--tinta);
  --ceniza: var(--filete-firme);
  --filete-flojo: var(--filete);

  /* --- Tipografía --- */
  --display-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dato-tipo: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-caption: 0.8125rem;   /* 13 */
  --t-body-sm: 0.875rem;    /* 14 */
  --t-body: 1rem;           /* 16 */
  --t-body-lg: 1.125rem;    /* 18 */
  --t-lead: 1.25rem;        /* 20 */
  --t-subheading: 1.375rem; /* 22 */
  --t-heading-sm: 1.75rem;  /* 28 */
  --t-heading: 2.25rem;     /* 36 */
  --t-heading-lg: 3rem;     /* 48 */
  --t-display: 4rem;        /* 64 */

  --lh-apretado: 1.08;
  --lh-medio: 1.2;
  --lh-suelto: 1.6;

  --track: -0.021em;
  --track-cartela: 0.08em;

  /* --- Forma --- */
  --radio-superficie: 12px;
  --radio-control: 8px;
  --radio-menor: 6px;

  /* Casi ninguna sombra. Sólo el panel de producto se levanta. */
  --sombra-sutil: none;
  --sombra-grande: rgba(20, 24, 26, 0.06) 0 18px 40px -20px;

  /* --- Espacio --- */
  --gap-elemento: 1rem;
  --pad-tarjeta: 1.5rem;
  --gap-seccion: 6rem;      /* 96 */
  --ancho-pagina: 78rem;    /* 1248 */
}

html { background: var(--canvas); }

body {
  background: var(--canvas);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-suelto);
  letter-spacing: normal;
  font-feature-settings: 'ss01' on, 'kern' on, 'tnum' 0;
}

/* Fuera la atmósfera del sistema anterior: el encargo prohíbe
   degradados de ambiente, orbes y desenfoques. */
body::before { content: none !important; }

.hero,
.cta-panel,
.section--subtle,
.cabecera,
.footer,
.marco,
.mando,
.nube-nota {
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --- Tipografía --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-tipo);
  font-weight: 600;
  letter-spacing: var(--track);
  line-height: var(--lh-medio);
  color: var(--tinta);
  text-transform: none;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.4vw, var(--t-heading-lg)); line-height: var(--lh-apretado); }
h2 { font-size: clamp(1.75rem, 3.2vw, var(--t-heading)); line-height: 1.12; }
h3 { font-size: var(--t-subheading); }
h4, h5, h6 { font-size: var(--t-body-lg); }

.ojo {
  display: block;
  margin: 0 0 1rem;
  font-size: var(--t-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--apagado);
}

.dato-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Rejilla y ritmo ----------------------------------------------------- */

.container,
.section > .container {
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: var(--gap-seccion); }

.section--subtle {
  background: var(--piedra);
  border-block: 1px solid var(--filete);
}

.section--oscura {
  background: var(--petroleo);
  color: var(--canvas);
  border-block: 0;
}

.section--oscura :is(h1, h2, h3, h4) { color: var(--canvas); }
.section--oscura p { color: rgba(251, 250, 248, 0.82); }

.bloque__cab {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.bloque__cab h2 { margin: 0; }

.bloque__cab p {
  margin: 1rem 0 0;
  font-size: var(--t-body-lg);
  color: var(--apagado);
}

/* --- Botones: los seis estados ------------------------------------------ */

.btn,
.savebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--filete-firme);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover, .savebtn:hover { background: var(--piedra); border-color: var(--tinta); }
.btn:active, .savebtn:active { background: var(--filete); }

.btn:focus-visible,
.savebtn:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: var(--radio-menor);
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-cargando="1"] { color: transparent; position: relative; pointer-events: none; }

.btn[data-cargando="1"]::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--tinta);
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* La acción. Verde, y sólo una por pantalla. */
.btn--filled,
.btn--primary,
.btn--accion,
a.btn[href="/registro.php"] {
  background: var(--verde);
  border-color: var(--verde);
  color: #ffffff;
}

.btn--filled:hover, .btn--primary:hover, .btn--accion:hover,
a.btn[href="/registro.php"]:hover {
  background: var(--verde-hondo);
  border-color: var(--verde-hondo);
  color: #ffffff;
}

.btn--filled[data-cargando="1"]::after { color: #ffffff; }

.btn--lg { padding: 1rem 1.75rem; font-size: var(--t-body); }
.btn--block { width: 100%; }

.section--oscura .btn {
  background: transparent;
  border-color: rgba(251, 250, 248, 0.45);
  color: var(--canvas);
}

.section--oscura .btn:hover { background: rgba(251, 250, 248, 0.1); border-color: var(--canvas); }

.section--oscura .btn--filled,
.section--oscura .btn--primary {
  background: var(--verde);
  border-color: var(--verde);
  color: #ffffff;
}

/* Enlaces de prosa. Acotados a prosa a propósito: un enlace dentro de un
   titular o de una tarjeta tiene su propio tratamiento. */
main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia) {
  color: var(--verde);
  font-weight: 500;
  text-decoration: none;
}

main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia):hover {
  text-decoration: underline;
}

main :is(h1, h2, h3, h4) > a { color: var(--tinta); text-decoration: none; font-weight: inherit; }
main :is(h1, h2, h3, h4) > a:hover { color: var(--verde); }

/* --- Superficies ---------------------------------------------------------- */

.tarjeta,
.notice-banner,
.avisoviejo,
.concnota,
.filters,
.empty-state,
.panelayuda,
.factbox,
.pricing-card,
.memoria__aviso,
.form-ok {
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  box-shadow: none;
  color: var(--tinta);
}

.chip,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-menor);
  background: var(--papel);
  font-size: var(--t-caption);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--apagado);
}

.chip--urgente { border-color: var(--rojo); background: var(--rojo-tenue); color: var(--rojo); }

/* --- Cabecera ------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas);
  border-bottom: 1px solid var(--filete);
  transition: box-shadow 0.2s ease;
}

/* Compacta al bajar. Lo marca nav.js poniendo la clase en <body>. */
.nav { min-height: 4.75rem; gap: 1.5rem; transition: min-height 0.2s ease; }

.cabecera--compacta { box-shadow: rgba(20, 24, 26, 0.06) 0 1px 0 0; }
.cabecera--compacta .nav { min-height: 3.75rem; }

.nav__links { gap: 0.25rem 1.5rem; }

.nav__links a,
.nav__actions a:not(.btn) {
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta);
}

.nav__links a.is-active { color: var(--verde); }

.nav__actions .btn {
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: normal;
}

/* --- Pie ------------------------------------------------------------------- */

.footer {
  background: var(--petroleo);
  color: var(--canvas);
  border-top: 0;
}

.footer a, .footer p, .footer li { color: rgba(251, 250, 248, 0.78); }
.footer a:hover { color: #ffffff; }
.footer__col-title,
.footer__brand .brand {
  color: #ffffff;
  font-size: var(--t-body-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.footer__legal, .footer small { color: rgba(251, 250, 248, 0.62); font-size: var(--t-caption); }

/* --- HERO ----------------------------------------------------------------- */

/*
 * Mitad y mitad: mensaje a la izquierda, producto real a la derecha. El
 * producto no es una ilustración — es la interfaz, con datos del
 * catálogo, y es el foco visual de la página.
 */
.hero {
  position: relative;
  min-height: 0;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--canvas);
  overflow: visible;
}

.hero__rejilla {
  display: grid;
  gap: 3rem;
  align-items: center;
  width: min(var(--ancho-pagina), 100% - 3rem);
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 1000px) {
  .hero__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; }
}

.hero__titular {
  margin: 0 0 1.25rem;
  max-width: 15ch;
  font-size: clamp(2.4rem, 4.6vw, var(--t-display));
  font-weight: 600;
  line-height: var(--lh-apretado);
  letter-spacing: -0.028em;
}

.hero__entrada {
  max-width: 34rem;
  margin: 0 0 2rem;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--apagado);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__micro {
  margin: 1.25rem 0 0;
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

/* --- EL PANEL DE PRODUCTO -------------------------------------------------- */

.panel {
  position: relative;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: var(--sombra-grande);
  overflow: hidden;
}

.panel__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--filete);
  background: var(--piedra);
  font-size: var(--t-caption);
  color: var(--apagado);
}

.panel__perfil { font-weight: 600; color: var(--tinta); }
.panel__cuenta { margin-left: auto; }
.panel__cuenta b { color: var(--tinta); }

.panel__cuerpo { padding: 1.25rem; display: grid; gap: 0.75rem; }

/* Las dos tarjetas de detrás: profundidad sin adornos. */
.panel__pila { position: relative; }

.panel__pila::before,
.panel__pila::after {
  content: '';
  position: absolute;
  left: 50%;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  z-index: -1;
}

.panel__pila::before { top: -0.75rem; width: 96%; height: 3rem; transform: translateX(-50%); }
.panel__pila::after { top: -1.5rem; width: 90%; height: 3rem; transform: translateX(-50%); opacity: 0.55; }

/* --- TARJETA DE RESULTADO --------------------------------------------------- */

.res {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  transition: border-color 0.15s ease;
}

.res:hover { border-color: var(--filete-firme); }
.res--destacada { border-color: var(--petroleo); }

.res__nota { grid-row: span 2; }

.res__cuerpo { min-width: 0; }

.res__titulo {
  margin: 0 0 0.35rem;
  font-size: var(--t-body-lg);
  font-weight: 600;
  line-height: 1.3;
}

.res__org {
  margin: 0 0 0.75rem;
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.res__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.res__datos b { color: var(--tinta); font-weight: 600; }
.res__datos .apura { color: var(--rojo); font-weight: 600; }

.res__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.res__acciones .btn { padding: 0.5rem 0.9rem; font-size: var(--t-body-sm); }

.res__oficial {
  margin-left: auto;
  font-size: var(--t-caption);
  color: var(--apagado);
}

/* --- SCORE ------------------------------------------------------------------ */

/*
 * El número nunca va solo, y el color nunca es la única señal: cada
 * score lleva su etiqueta escrita. Un daltónico y una impresora en
 * blanco y negro leen lo mismo.
 */
.nota {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 5.25rem;
}

.nota__n {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-control);
  background: var(--piedra);
  font-size: var(--t-heading-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--petroleo);
  font-variant-numeric: tabular-nums;
}

.nota__n span { font-size: var(--t-caption); font-weight: 500; color: var(--apagado); }

.nota__eti {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  text-align: center;
  color: var(--apagado);
}

.nota--alta .nota__n { border-color: var(--verde); background: var(--verde-tenue); color: var(--verde-hondo); }
.nota--alta .nota__eti { color: var(--verde-hondo); }

.nota--media .nota__n { border-color: var(--filete-firme); }

/* Desglose de factores. */
.factores { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }

.factores__fila {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
}

.factores__nombre { font-size: var(--t-body-sm); font-weight: 500; }
.factores__peso { display: block; font-size: var(--t-caption); font-weight: 400; color: var(--apagado); }

.factores__barra { display: block; width: 100%; height: 6px; }
.factores__hueco { fill: var(--filete); }
.factores__lleno { fill: var(--petroleo); }

.factores__valor {
  min-width: 3.5rem;
  text-align: right;
  font-size: var(--t-body-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nota-aviso {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--filete-firme);
  border-left: 3px solid var(--petroleo);
  border-radius: var(--radio-menor);
  background: var(--papel);
  font-size: var(--t-body-sm);
}

.nota-aviso b { color: var(--tinta); }

/* --- BARRA DE CONFIANZA ------------------------------------------------------ */

.confianza {
  border-block: 1px solid var(--filete);
  background: var(--piedra);
  padding-block: 2.5rem;
}

.confianza__cifras {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) { .confianza__cifras { grid-template-columns: repeat(4, 1fr); } }

.confianza__n {
  display: block;
  font-size: var(--t-heading-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--petroleo);
  font-variant-numeric: tabular-nums;
}

.confianza__eti { font-size: var(--t-body-sm); color: var(--apagado); }

.confianza__fuente { margin: 0; font-size: var(--t-body-sm); color: var(--apagado); }

/* --- PROBLEMA ------------------------------------------------------------------ */

.problemas {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0 0 3.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) { .problemas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .problemas { grid-template-columns: repeat(4, 1fr); } }

.problemas li {
  padding: 1.25rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.problemas b { display: block; margin-bottom: 0.35rem; font-size: var(--t-body); color: var(--tinta); }

/* La transición caos → resultado, en cuatro pasos con flecha. */
.flujo {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 860px) { .flujo { grid-template-columns: repeat(4, 1fr); } }

.flujo li {
  position: relative;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.flujo b { display: block; font-size: var(--t-body); color: var(--tinta); }

@media (min-width: 860px) {
  .flujo li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.6rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 1px solid var(--filete-firme);
    border-right: 1px solid var(--filete-firme);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* --- DEMO INTERACTIVA ----------------------------------------------------------- */

.demo {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1000px) { .demo { grid-template-columns: 20rem minmax(0, 1fr); gap: 3rem; } }

.demo__form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
}

.campo { display: grid; gap: 0.4rem; }

.campo label { font-size: var(--t-body-sm); font-weight: 500; }

.campo select,
.campo input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--filete-firme);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
}

.campo select:hover { border-color: var(--tinta); }

.demo__salida { display: grid; gap: 0.75rem; }

.demo__cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: var(--t-body-lg);
}

.demo__cuenta b {
  font-size: var(--t-heading-sm);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--petroleo);
  font-variant-numeric: tabular-nums;
}

/* --- TRANSPARENCIA -------------------------------------------------------------- */

.fuente {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  overflow: hidden;
}

.fuente > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

.fuente > div:last-child { border-bottom: 0; }
.fuente dt { color: var(--apagado); margin: 0; }
.fuente dd { margin: 0; font-weight: 500; }

.fuente__salida {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--verde-tenue);
  border-top: 1px solid var(--filete);
  font-size: var(--t-body-sm);
  font-weight: 600;
  color: var(--verde-hondo);
}

/* --- ALERTA (correo de ejemplo) ---------------------------------------------------- */

.correo {
  max-width: 34rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  overflow: hidden;
}

.correo__cab {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--filete);
  background: var(--piedra);
  font-size: var(--t-caption);
  color: var(--apagado);
}

.correo__asunto { display: block; margin-top: 0.2rem; font-size: var(--t-body); font-weight: 600; color: var(--tinta); }
.correo__cuerpo { padding: 1.25rem; display: grid; gap: 1rem; }

/* --- MEMORIA ----------------------------------------------------------------------- */

.memo { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.memo li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-body-sm);
}

.memo li:last-child { border-bottom: 0; }

.memo__tic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--verde);
  color: var(--verde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* --- CASOS -------------------------------------------------------------------------- */

.casos { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }

@media (min-width: 900px) { .casos { grid-template-columns: repeat(3, 1fr); } }

.caso {
  padding: 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
}

.caso__quien { margin: 0 0 1rem; font-size: var(--t-body-lg); font-weight: 600; }
.caso__perfil { margin: 0 0 1.25rem; font-size: var(--t-body-sm); color: var(--apagado); }

.caso ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: var(--t-body-sm); }
.caso ul b { font-size: var(--t-body-lg); font-weight: 600; color: var(--petroleo); font-variant-numeric: tabular-nums; }

.etiqueta-ejemplo {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--filete-firme);
  border-radius: var(--radio-menor);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-cartela);
  color: var(--apagado);
}

/* --- PRECIOS -------------------------------------------------------------------------- */

.planes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }

@media (min-width: 900px) { .planes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: none;
}

.plan--destacado { border-color: var(--petroleo); }

.plan h3 { margin: 0 0 0.35rem; }
.plan__quien { margin: 0 0 1.5rem; font-size: var(--t-body-sm); color: var(--apagado); }

.plan__precio {
  margin: 0 0 1.5rem;
  font-size: var(--t-heading);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__precio span { font-size: var(--t-body); font-weight: 400; color: var(--apagado); }

.plan ul { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.plan li { display: flex; gap: 0.6rem; font-size: 0.9375rem; }
.plan li::before { content: '✓'; color: var(--verde); font-weight: 700; }
.plan .btn { align-self: stretch; margin-top: auto; }

/* --- LÍMITES -------------------------------------------------------------------------- */

.limites { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }

@media (min-width: 700px) { .limites { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .limites { grid-template-columns: repeat(4, 1fr); } }

.limites li {
  padding: 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  font-size: var(--t-body-sm);
  color: var(--apagado);
}

.limites b { display: block; margin-bottom: 0.5rem; font-size: var(--t-body-lg); color: var(--tinta); }

/* --- PREGUNTAS -------------------------------------------------------------------------- */

.preguntas { margin: 0; border-top: 1px solid var(--filete); }

.pregunta { border-bottom: 1px solid var(--filete); }

.pregunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: var(--t-body-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.pregunta > summary::-webkit-details-marker { display: none; }

.pregunta > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  border-right: 1.5px solid var(--apagado);
  border-bottom: 1.5px solid var(--apagado);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 0.2s ease;
}

.pregunta[open] > summary::after { transform: rotate(225deg) translateY(-0.15rem); }

.pregunta > p { margin: 0 0 1.5rem; max-width: 62ch; color: var(--apagado); }

/* --- CIERRE ------------------------------------------------------------------------------- */

.section--cta { max-width: none; padding-inline: 0; }

.cta-panel {
  max-width: none;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: var(--petroleo);
  color: var(--canvas);
  box-shadow: none;
}

.cta-panel h2 { margin: 0 auto 1rem; max-width: 18ch; color: var(--canvas); }
.cta-panel p { max-width: 34rem; margin: 0 auto 2rem; font-size: var(--t-body-lg); color: rgba(251, 250, 248, 0.82); }
.cta-panel__actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.cta-panel small { display: block; margin-top: 1rem; font-size: var(--t-body-sm); color: rgba(251, 250, 248, 0.68); }

/* --- MOVIMIENTO ---------------------------------------------------------------------------- */

/*
 * Mínimo y explicativo: entrada suave de bloques al aparecer y nada
 * más. Sin parallax, sin secuestro de scroll, sin letra a letra.
 */
.entra { opacity: 0; transform: translateY(12px); }

.entra.dentro {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.entra--1 { transition-delay: 0.06s; }
.entra--2 { transition-delay: 0.12s; }
.entra--3 { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .entra, .entra.dentro { opacity: 1; transform: none; transition: none; }
  .btn[data-cargando="1"]::after { animation: none; }
}

/* --- Compactar ---------------------------------------------------------- */

/*
 * Medido: la portada salia a 12.838px de alto y el hero no cabia en una
 * pantalla de 1000. «Headings grandes pero sobrios» no es lo mismo que
 * 64px con el titular partido en cuatro lineas, y una tarjeta de
 * resultado de 260px de alto convierte tres resultados en una pantalla
 * entera.
 *
 * Se aprieta la escala de display, el ritmo entre secciones y sobre todo
 * la tarjeta, que es la pieza que mas se repite.
 */

:root {
  --t-heading-lg: 2.5rem;   /* 40 */
  --t-display: 3.25rem;     /* 52 */
  --gap-seccion: 4.5rem;    /* 72 */
}

.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); }

.hero__titular {
  max-width: 19ch;
  font-size: clamp(2rem, 3.6vw, var(--t-display));
}

.hero__entrada { font-size: var(--t-body-lg); margin-bottom: 1.5rem; }

h1 { font-size: clamp(2rem, 3.6vw, var(--t-heading-lg)); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }

.bloque__cab { margin-bottom: 2.25rem; }
.bloque__cab p { font-size: var(--t-body); }

/* La tarjeta de resultado, compacta. */
.res { gap: 0.5rem 1rem; padding: 1rem; }

.nota { min-width: 4.25rem; gap: 0.25rem; }

.nota__n {
  padding: 0.35rem 0.5rem;
  font-size: var(--t-subheading);
}

.nota__eti { font-size: 0.625rem; }

.res__titulo {
  margin-bottom: 0.25rem;
  font-size: var(--t-body);
  line-height: 1.35;
  /* Dos lineas y elipsis: los titulos de la BDNS llegan a doscientos
     caracteres y una tarjeta no es el sitio para leerlos enteros. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.res__org {
  margin-bottom: 0.5rem;
  font-size: var(--t-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.res__datos { margin-bottom: 0.6rem; font-size: var(--t-caption); }
.res__acciones .btn { padding: 0.4rem 0.75rem; font-size: var(--t-caption); }
.res__oficial { font-size: 0.6875rem; }

.panel__cuerpo { padding: 1rem; gap: 0.6rem; }
.panel__barra { padding: 0.7rem 1rem; }

.problemas li, .flujo li, .limites li, .caso { padding: 1.15rem; }
.plan { padding: 1.75rem; }
.pregunta > summary { padding: 1rem 0; font-size: var(--t-body); }

.confianza { padding-block: 2rem; }
.confianza__n { font-size: var(--t-subheading); }

/*
 * El hero seguia capado.
 *
 * Un bloque anterior le puso `max-width: 60rem` y relleno propio a
 * `.hero__rejilla`, y `width: min(...)` no anula un `max-width`: la
 * rejilla salia a 912px en una pantalla de 1440, el titular se partia en
 * cuatro lineas y la fila crecia hasta 986px con la mitad vacia.
 */
.hero > .hero__rejilla {
  max-width: none;
  width: min(var(--ancho-pagina), 100% - 3rem);
  margin-inline: auto;
  padding: 0;
  text-align: left;
}

@media (min-width: 1000px) {
  .hero > .hero__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    /* Y las filas a auto: el hero del primer sistema declaraba seis
       filas fijas (119px / 102,8px repetidas) para colocar en diagonal
       las tres lineas del titular. Con dos hijos, esas seis filas
       estiraban la rejilla a 986px y centraban el contenido tan arriba
       que el titular se salia por encima. */
    grid-template-rows: auto;
    grid-auto-rows: auto;
    gap: 4rem;
    align-items: center;
  }

  .hero > .hero__rejilla > * { grid-column: auto; grid-row: auto; }
}

/* El pie del panel: sin el, «perfil: Madrid» con resultados de Castilla
   y Leon se lee como un fallo, cuando es la regla del producto. */
.panel__pie {
  margin: 0.85rem 0 0;
  max-width: 46ch;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--apagado);
}

/* --- Correcciones medidas ------------------------------------------------- */

/*
 * 1. El cierre, en oscuro.
 *
 * Un bloque anterior fuerza `.cta-panel h2 { color: tinta !important }`
 * —venia de arreglar la mezcla por diferencia del primer sistema— y
 * contra el petroleo del cierre daba 1,45:1. Se devuelve al color del
 * lienzo con la misma arma.
 */
.cta-panel :is(h1, h2, h3),
.section--oscura :is(h1, h2, h3) { color: var(--canvas) !important; }

/*
 * 2. La etiqueta del score estaba a 10px.
 *
 * Es la unica senal no cromatica del score, asi que tiene que leerse:
 * sube a 12 y se le deja envolver en dos lineas.
 */
.nota__eti { font-size: 0.75rem; line-height: 1.15; }

/*
 * 3. El organismo se cortaba con puntos suspensivos.
 *
 * Con `nowrap` + elipsis el nombre desaparecia a mitad de palabra y el
 * auditor lo cantaba en escritorio y en movil. Con recorte a una linea
 * el texto cabe entero cuando cabe, y cuando no, se corta sin dejar la
 * caja desbordada.
 */
.res__org {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * 4. El panel se salia en movil: 403px en una ventana de 390.
 *
 * La tarjeta es una rejilla de dos columnas y la del score tiene ancho
 * minimo. Por debajo de 560 se apila: score arriba, contenido debajo.
 */
@media (max-width: 560px) {
  .res { grid-template-columns: 1fr; }
  .res__nota { grid-row: auto; }
  .nota { justify-items: start; min-width: 0; flex-direction: row; }
  .nota__eti { text-align: left; }
  .panel__barra { font-size: 0.75rem; }
  .panel__cuenta { margin-left: 0; }
}

/* La rejilla del hero y de la demo, a una columna en movil. */
@media (max-width: 999px) {
  .demo { grid-template-columns: 1fr; }
  .hero > .hero__rejilla { display: block; }
  .hero > .hero__rejilla > .panel__pila { margin-top: 2.5rem; }
  .panel__pila::before, .panel__pila::after { content: none; }
}

/*
 * Dos columnas parejas.
 *
 * Transparencia, memoria y el desglose del score reutilizaban la
 * rejilla de la demo, que es «formulario estrecho + salida ancha»
 * (20rem + 1fr). La ficha de datos quedaba estrangulada en 320px y sus
 * pares dt/dd se partian en dos lineas cada uno.
 */
.dos { display: grid; gap: 2rem; align-items: start; }

@media (min-width: 900px) {
  .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .dos--nota { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

.dos > div > p { color: var(--apagado); }
.dos > div > p:first-child { margin-top: 0; }

/* --- El catalogo, con el sistema de resultados --------------------------- */

/*
 * La tarjeta del buscador lleva mas datos que la de la portada
 * —descripcion, concesiones ya resueltas, codigo BDNS— asi que no se
 * sustituye por el componente corto: se le pone la misma piel.
 */
.match-list { display: grid; gap: 0.75rem; }

.match-card {
  padding: 1.25rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-superficie);
  background: var(--papel);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.match-card:hover { border-color: var(--filete-firme); }

.match-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: start;
}

.match-card__meta {
  margin: 0 0 0.3rem;
  font-size: var(--t-caption);
  color: var(--apagado);
}

.match-card__title { margin: 0 0 0.4rem; font-size: var(--t-body-lg); font-weight: 600; line-height: 1.3; }

.match-card__desc {
  margin: 0 0 0.75rem;
  font-size: var(--t-body-sm);
  color: var(--apagado);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.match-card__score { order: 2; }

.match-card__factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--filete);
  font-size: var(--t-caption);
  color: var(--apagado);
}

.match-card__factors b { color: var(--tinta); font-weight: 600; }

.chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }

@media (max-width: 560px) {
  .match-card__top { grid-template-columns: 1fr; }
  .match-card__score { order: -1; }
  .match-card__score.nota { justify-items: start; }
}

/* Los rotulos del panel de filtros, en caja normal como el resto de la
   interfaz: eran mayusculas con tracking del primer sistema. */
.filters label,
.filters legend,
.form-field > label {
  font-family: var(--texto-tipo);
  font-size: var(--t-body-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta);
}

.filters select,
.filters input[type="search"],
.filters input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--filete-firme);
  border-radius: var(--radio-control);
  background: var(--papel);
  font-family: var(--texto-tipo);
  font-size: 0.9375rem;
  color: var(--tinta);
}

/*
 * La cabecera de pagina dejaba una banda muerta.
 *
 * `.section__header` traia 3rem de margen inferior y encima el bloque
 * siguiente empezaba con su propio aire: entre el subtitulo y las cifras
 * habia 150px de nada.
 */
.section > .container > .section__header { margin-bottom: 2rem; }
.page-hero .section__header { margin-bottom: 1.75rem; }

/* Entre el titulo de una pagina y su contenido habia 155px: el relleno
   de cierre de la cabecera mas el de apertura de la seccion siguiente.
   Uno basta, y mas corto. */
.page-hero { padding-bottom: 0; }
.page-hero + .section,
.page-hero + .confianza { padding-top: 2.5rem; }

/* Los factores del catalogo seguian en mayusculas con tracking. */
.match-card__factors,
.match-card__factors * {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--texto-tipo);
}

/* ===== 24 · RAMP ===================================================== */
/*
 * Sistema definitivo: «editorial finance desk».
 * Papel hueso, tinta casi negra y UN solo acento: el amarillo marcador
 * (#7fd3ea), reservado a las acciones y a lo que está vivo. Sin sombras:
 * la elevación la dan filetes de 1px y el cambio de superficie.
 * Una sola familia (Inter, autoalojada; la de Ramp, Lausanne, es de pago)
 * con peso 400 en titulares: la jerarquía la marca el tamaño.
 * Manda sobre los bloques 1-23.
 */
:root {
  --amarillo: #7fd3ea;
  --amarillo-hondo: #c9d61a;
  --tinta: #070709;
  --obsidiana: #1a1919;
  --papel: #ffffff;
  --hueso: #f5f5f5;
  --ceniza-t: #6d6c6b;
  --filete: #e5e7eb;
  --humo: #d3d3d3;
  --rojo: #b3261e;
  --rojo-tenue: #fdf1f0;
  --verde-ok: #1f6f43;
  --verde-tenue: #eef6ef;

  --canvas: var(--hueso);
  --piedra: var(--hueso);
  --apagado: var(--ceniza-t);
  --lago: var(--tinta);
  --verde: var(--tinta);
  --verde-hondo: var(--tinta);
  --petroleo: var(--tinta);
  --filete-firme: var(--humo);
  --filete-flojo: var(--filete);

  --t-display: 4rem;
  --t-heading-lg: 3rem;
  --t-heading: 2.5rem;
  --radio-boton: 6px;
  --radio-input: 10px;
  --radio-lavado: 12px;
  --radio-tarjeta: 16px;
  --radio-superficie: 16px;
  --radio-control: 6px;
  --radio-menor: 6px;
  --sombra-grande: none;
  --ancho-pagina: 75rem;
  --gap-seccion: 6rem;
}

html, body { background: var(--hueso); color: var(--tinta); }
body { font-feature-settings: 'ss01' on, 'kern' on; letter-spacing: 0; }
::selection { background: var(--amarillo); color: var(--tinta); }

h1, h2, h3, .hero__titular, .cta-panel h2 {
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
h1, .hero__titular { font-size: clamp(2.5rem, 5.4vw, var(--t-display)); line-height: 1; }
h2 { font-size: clamp(1.75rem, 3.2vw, var(--t-heading)); line-height: 1.05; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.h1--exp { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.08; }
.lead { font-size: 1.25rem; line-height: 1.45; color: var(--ceniza-t); max-width: 44rem; }
.ojo, .section__eyebrow {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ceniza-t);
}
.ojo a { color: inherit; }
.dato-num { font-variant-numeric: tabular-nums; }

/* --- Botones --------------------------------------------------------- */
.btn, .savebtn {
  border-radius: var(--radio-boton);
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  box-shadow: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover, .savebtn:hover { background: var(--papel); border-color: var(--tinta); }
.btn--filled, .btn--primary, a.btn[href="/registro.php"], .nav__actions .btn {
  background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta);
}
.btn--filled:hover, .btn--primary:hover, a.btn[href="/registro.php"]:hover, .nav__actions .btn:hover {
  background: var(--amarillo-hondo); border-color: var(--amarillo-hondo); color: var(--tinta);
}
.btn--ghost { border-color: var(--filete); }
.btn--lg { padding: 0.95rem 1.5rem; font-size: 1rem; }
.btn--filled[data-cargando="1"]::after { color: var(--tinta); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia) {
  color: var(--tinta); text-decoration: underline; text-decoration-color: var(--humo); text-underline-offset: 3px;
}
main :is(p, li, dd, td, summary, figcaption) > a:not(.btn):not(.guia):hover { text-decoration-color: var(--tinta); background: var(--amarillo); }
main :is(h1, h2, h3, h4) > a:hover { color: var(--tinta); text-decoration: underline; }

/* --- Cabecera y pie -------------------------------------------------- */
.cabecera { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--filete); box-shadow: rgba(255,255,255,.6) 0 0 2px 0 inset; }
.nav__links a { color: var(--tinta); border-radius: var(--radio-boton); padding: .4rem .6rem; }
.nav__links a:hover { background: var(--hueso); }
.nav__links a.is-active { color: var(--tinta); background: var(--hueso); }
.nav__buscar input { border-radius: var(--radio-input); border: 1px solid rgba(33,33,33,.1); background: var(--hueso); }
.footer { background: var(--obsidiana); color: #fff; border-top: 0; }
.footer a, .footer p, .footer li { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--amarillo); }
.footer__col-title { color: var(--ceniza-t); text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }

/* --- Secciones y superficies ---------------------------------------- */
.section--subtle { background: var(--papel); border-block: 1px solid var(--filete); }
.section--oscura, .cta-panel { background: var(--obsidiana); color: #fff; }
.cta-panel { border-radius: var(--radio-tarjeta); }
.cta-panel h2 { color: #fff; }
.cta-panel p, .cta-panel small { color: rgba(255,255,255,.72); }
.cta-panel .btn:not(.btn--filled) { border-color: rgba(255,255,255,.4); color: #fff; }

.panel, .res, .plan, .caso, .problemas li, .flujo li, .limites li, .demo__form, .factbox, .match-card,
.correo, .fuente, .auth-card, .eleg-item, .exp-card, .tablero__col, .estudio, .tres > div {
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--radio-tarjeta);
  box-shadow: none;
}
.panel__barra, .correo__cab { background: var(--hueso); border-bottom: 1px solid var(--filete); }
.res--destacada, .plan--destacado { border-color: var(--tinta); }
.panel__pila::before, .panel__pila::after { display: none; }

.tag, .chip, .etiqueta-ejemplo {
  border-radius: var(--radio-boton); border: 1px solid var(--filete); background: var(--hueso);
  color: var(--tinta); font-size: .75rem; padding: .15rem .5rem; font-weight: 500;
}
.tag--estudiada { background: var(--amarillo); border-color: var(--amarillo); }
.tag--europea { background: #fff; }
.tag--alerta, .chip--urgente { background: var(--rojo-tenue); border-color: var(--rojo); color: var(--rojo); }
.apura { color: var(--rojo); font-weight: 500; }

.nota__n { border-radius: var(--radio-lavado); background: var(--hueso); border: 1px solid var(--filete); }
.nota--alta .nota__n { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }
.nota--alta .nota__eti { color: var(--tinta); }
.factores__lleno { fill: var(--tinta); }

/* Banda de cifras vivas, oscura */
.confianza { background: var(--obsidiana); color: #fff; border: 0; }
.confianza__n { color: #fff; font-weight: 400; }
.confianza__eti, .confianza__fuente { color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; }

/* Formularios */
.campo input, .campo select, .campo textarea, .form-field input, .form-field select,
textarea, .form-inline input, .form-inline select, .filters input[type="text"] {
  border-radius: var(--radio-input);
  border: 1px solid rgba(33,33,33,.12);
  background: var(--papel);
  color: var(--tinta);
  padding: .65rem .8rem;
  font: inherit;
}
textarea { width: 100%; }
.campo small { color: var(--ceniza-t); font-size: .8125rem; }

/* --- Comprobador de elegibilidad ------------------------------------ */
.eleg {
  display: grid; gap: .75rem; align-items: end; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); padding: 1.25rem;
}
.eleg .btn { height: 2.9rem; }
.eleg-resumen { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--filete); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); overflow: hidden; margin: 1.5rem 0; }
.eleg-resumen > div { background: var(--papel); padding: 1.25rem; display: grid; gap: .25rem; }
.eleg-resumen b { font-size: 2.25rem; font-weight: 400; line-height: 1; }
.eleg-resumen span { color: var(--ceniza-t); font-size: .8125rem; }
.eleg-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.eleg-filtros a { border: 1px solid var(--filete); border-radius: var(--radio-boton); padding: .45rem .8rem; text-decoration: none; color: var(--tinta); background: var(--papel); }
.eleg-filtros a.is-active { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.eleg-grupo { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.eleg-grupo span { color: var(--ceniza-t); }
.eleg-lista { display: grid; gap: .75rem; }
.eleg-item { padding: 1.25rem; display: grid; gap: .6rem; }
.eleg-item h3 { margin: 0; font-size: 1.125rem; }
.eleg-item h3 a { color: var(--tinta); text-decoration: none; }
.eleg-item__cab { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.eleg-item__plazo { margin-left: auto; font-size: .8125rem; color: var(--ceniza-t); }
.eleg-item__org { margin: 0; color: var(--ceniza-t); font-size: .875rem; }
.eleg-item__acc { display: flex; gap: .5rem; flex-wrap: wrap; }
.eleg-cta { margin-top: 3rem; padding: 2rem; background: var(--obsidiana); color: #fff; border-radius: var(--radio-tarjeta); }
.eleg-cta h2 { color: #fff; }
.eleg-cta p { color: rgba(255,255,255,.72); max-width: 40rem; }
.vacio { padding: 2rem; border: 1px dashed var(--humo); border-radius: var(--radio-tarjeta); color: var(--ceniza-t); }
.tres { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tres > div { padding: 1.5rem; }
.tres h2 { font-size: 1.375rem; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .9375rem; }
.check__ico { flex: 0 0 1.35rem; height: 1.35rem; border-radius: 4px; display: grid; place-items: center; font-size: .75rem; font-weight: 600;
  background: var(--hueso); border: 1px solid var(--filete); }
.check--cumple .check__ico { background: var(--amarillo); border-color: var(--amarillo); }
.check--no .check__ico { background: var(--rojo-tenue); border-color: var(--rojo); color: var(--rojo); }
.check--no { color: var(--rojo); }
.check--mas { color: var(--ceniza-t); font-size: .8125rem; padding-left: 1.9rem; }
.checks--grandes .check { padding: .75rem 0; border-bottom: 1px solid var(--filete); }
.checks--grandes .check > div { display: grid; gap: .3rem; }

.estudio { padding: 1.5rem; margin-bottom: 2.5rem; }
.estudio h2 { margin-top: .5rem; }
.estudio__meta { font-size: .8125rem; color: var(--ceniza-t); }
q.cita { display: block; font-size: .8125rem; color: var(--ceniza-t); quotes: '«' '»'; border-left: 2px solid var(--amarillo); padding-left: .6rem; }
q.cita--sin { border-left-color: var(--humo); }
.veredicto { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-radius: var(--radio-lavado); background: var(--hueso); margin-bottom: 1rem; }
.veredicto--si { background: var(--amarillo); }
.veredicto--no { background: var(--rojo-tenue); color: var(--rojo); }

/* --- Expedientes ------------------------------------------------------ */
.tablero { display: grid; gap: .75rem; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); overflow-x: auto; padding-bottom: 1rem; }
.tablero__col { padding: .75rem; background: var(--hueso); display: grid; gap: .5rem; align-content: start; min-height: 12rem; }
.tablero__tit { margin: 0 0 .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ceniza-t); display: flex; justify-content: space-between; }
.exp-card { display: grid; gap: .35rem; padding: .85rem; text-decoration: none; color: var(--tinta); }
.exp-card:hover { border-color: var(--tinta); }
.exp-card__tit { font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.exp-card__org { color: var(--ceniza-t); font-size: .8125rem; }
.exp-card__pie { display: flex; gap: .5rem; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--ceniza-t); }
progress.barra { width: 5rem; height: 4px; border: 0; border-radius: 2px; background: var(--filete); appearance: none; }
progress.barra::-webkit-progress-bar { background: var(--filete); border-radius: 2px; }
progress.barra::-webkit-progress-value { background: var(--tinta); border-radius: 2px; }
progress.barra::-moz-progress-bar { background: var(--tinta); }

.fases { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 1.5rem 0 1rem; padding: 0; border: 1px solid var(--filete); border-radius: var(--radio-boton); overflow: hidden; background: var(--papel); }
.fases li { flex: 1 1 auto; padding: .55rem .75rem; font-size: .8125rem; color: var(--ceniza-t); border-right: 1px solid var(--filete); text-align: center; }
.fases li:last-child { border-right: 0; }
.fases li.hecha { color: var(--tinta); background: var(--hueso); }
.fases li.actual { background: var(--amarillo); color: var(--tinta); font-weight: 600; }

.pestanas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 2rem; border-bottom: 1px solid var(--filete); }
.pestanas a { padding: .65rem .9rem; text-decoration: none; color: var(--ceniza-t); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a.is-active { color: var(--tinta); border-bottom-color: var(--tinta); }

.form-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.form-inline textarea { flex: 1 1 100%; }
.rejilla-form { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end;
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); padding: 1.25rem; margin-bottom: 2rem; }
.campo--check label { display: flex; gap: .5rem; align-items: center; font-size: .875rem; }

.items { list-style: none; margin: 0 0 .5rem; padding: 0; border-top: 1px solid var(--filete); }
.item { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--filete); }
.item .form-inline { margin: 0; }
.item__check { width: 1.4rem; height: 1.4rem; border: 1px solid var(--tinta); border-radius: 4px; background: var(--papel); cursor: pointer; font-size: .8rem; line-height: 1; }
.item--hecho .item__check { background: var(--amarillo); border-color: var(--amarillo); }
.item--hecho .item__txt > span { text-decoration: line-through; color: var(--ceniza-t); }
.item__txt { flex: 1; display: grid; gap: .2rem; }
.item__txt small { color: var(--ceniza-t); font-size: .8125rem; }
.item__x { border: 0; background: transparent; color: var(--ceniza-t); font-size: 1.1rem; cursor: pointer; padding: 0 .3rem; }
.item__x:hover { color: var(--rojo); }
.siguiente { padding: 1rem 1.25rem; background: var(--amarillo); border-radius: var(--radio-lavado); }

.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--filete); border-radius: var(--radio-lavado); overflow: hidden; font-size: .875rem; margin: 1rem 0; }
.tabla th { text-align: left; font-weight: 500; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ceniza-t); background: var(--hueso); }
.tabla th, .tabla td { padding: .65rem .8rem; border-bottom: 1px solid var(--filete); vertical-align: top; }
.tabla-scroll { overflow-x: auto; }
.tabla--gastos { min-width: 56rem; }

.alertas { list-style: none; padding: 0; display: grid; gap: .5rem; }
.alerta { padding: .75rem 1rem; border-radius: var(--radio-lavado); border: 1px solid var(--filete); background: var(--papel); font-size: .9375rem; }
.alerta b { display: block; font-weight: 600; }
.alerta--grave { border-color: var(--rojo); background: var(--rojo-tenue); }
.alerta--aviso { border-left: 3px solid var(--amarillo-hondo); }

.actividad { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--filete); }
.actividad li { padding: .9rem 0; border-bottom: 1px solid var(--filete); }
.actividad__meta { font-size: .75rem; color: var(--ceniza-t); }
.actividad p { margin: .25rem 0 0; }

.pasos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--filete); }
.pasos li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--filete); }
.pasos__n { font-size: 2rem; line-height: 1; color: var(--ceniza-t); }
.pasos h3 { margin: 0 0 .4rem; }
.pasos p { margin: 0 0 .4rem; max-width: 46rem; }
.pasos small { color: var(--ceniza-t); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 720px) {
  .tablero { grid-auto-flow: row; grid-auto-columns: auto; }
  .fases li { flex-basis: 33%; border-bottom: 1px solid var(--filete); }
  .pasos li { grid-template-columns: 2.75rem 1fr; }
  .eleg-item__plazo { margin-left: 0; width: 100%; }
}

/* Sin animaciones de entrada heredadas: el contenido aparece al instante.
   La de los sistemas anteriores escondía la entradilla y los botones del
   hero durante 1,8 s. */
.hero *, .hero__entrada, .hero__acciones, .hero__titular, .hero__micro, .hero__cartela { animation: none !important; opacity: 1 !important; transform: none !important; }
.entra { opacity: 1; transform: none; }

.hero__rejilla { align-items: center; row-gap: 1.5rem; }
.hero__rejilla > div:first-child { display: grid; gap: 1.25rem; align-content: center; }
.hero__entrada { font-size: 1.25rem; line-height: 1.45; color: var(--ceniza-t); max-width: 34rem; margin: 0; }
.hero__micro { margin: 0; }
.nav__actions { gap: 0.75rem; margin-left: 1rem; }
.nav__links { gap: 0.25rem 0.5rem; }

.estudio h3 { margin: 2rem 0 .6rem; }
.estudio ul:not(.checks):not(.memo) { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .9375rem; }
.estudio ul:not(.checks):not(.memo) li::marker { color: var(--ceniza-t); }
.estudio .dos { gap: 2rem; }
.estudio .lead { margin: .25rem 0 .5rem; }
.estudio .pregunta { margin-top: 1.25rem; }

.nota__n { min-height: 0; padding: .55rem .5rem; }
.res .nota { align-self: start; }
.logo__luz { fill: var(--tinta); }
.logo__aro { stroke: var(--tinta); }
.page-hero h1 + .lead { margin-top: 1rem; }

/* ===== 25 · PORTADA Y MARCA ========================================= */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); }
.brand__nombre { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; text-transform: none; }
.footer .brand { color: #fff; }
.logo { flex: 0 0 auto; display: block; }
.logo__luz, .logo__aro { fill: none; stroke: none; }

.hero--ramp { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--hueso); }
.hero--ramp .hero__titular { max-width: 16ch; margin: 1rem 0 1.25rem; }
.hero--ramp .hero__entrada { max-width: 40rem; margin-bottom: 2rem; }
.eleg--hero { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; margin-top: 0; padding: 1rem; }
.eleg--hero .btn { height: 2.95rem; white-space: nowrap; }
.hero--ramp .hero__micro { margin-top: .9rem; color: var(--ceniza-t); font-size: .875rem; }
.vivo { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--amarillo); margin-right: .5rem; box-shadow: 0 0 0 3px rgba(37, 151, 208,.35); vertical-align: .05rem; }

.ticker { background: var(--obsidiana); color: #fff; }
.ticker__fila { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.ticker__fila > div { padding: 1.25rem 1rem; border-left: 1px solid rgba(255,255,255,.1); display: grid; gap: .3rem; }
.ticker__fila > div:first-child { border-left: 0; padding-left: 0; }
.ticker__eti { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ticker b { font-size: 1.75rem; font-weight: 400; color: #fff; line-height: 1; }

.h2--ancho { max-width: 20ch; }
.ciclo { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--tinta); }
.ciclo li { padding: 1.5rem 1.5rem 0 0; display: grid; gap: .6rem; align-content: start; }
.ciclo li + li { padding-left: 1.5rem; border-left: 1px solid var(--filete); }
.ciclo__n { font-size: .75rem; color: var(--ceniza-t); font-variant-numeric: tabular-nums; }
.ciclo h3 { font-size: 1.5rem; font-weight: 400; margin: 0; }
.ciclo p { margin: 0; color: var(--ceniza-t); }
.ciclo a { color: var(--tinta); font-weight: 500; text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.dos--producto { align-items: center; gap: 3rem; grid-template-columns: 1fr 1.15fr; }
.ventajas { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .6rem; }
.ventajas li { padding-left: 1.6rem; position: relative; }
.ventajas li::before { content: ''; position: absolute; left: 0; top: .45rem; width: .8rem; height: .8rem; border-radius: 3px; background: var(--amarillo); }

.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filete); border: 1px solid var(--filete); border-radius: var(--radio-tarjeta); overflow: hidden; margin-top: 2.5rem; }
.rejilla-4 > div { background: var(--papel); padding: 1.75rem 1.5rem; }
.rejilla-4 h3 { margin: 0 0 .6rem; }
.rejilla-4 p { margin: 0; color: var(--ceniza-t); font-size: .9375rem; }

.section--oscura { background: var(--obsidiana); color: #fff; }
.section--oscura h2, .section--oscura h3 { color: #fff !important; }
.section--oscura p { color: rgba(255,255,255,.7); }
.ojo--claro { color: rgba(255,255,255,.55); }
.para { display: grid; gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radio-tarjeta); overflow: hidden; }
.para > div { background: #232222; padding: 1.75rem; display: grid; gap: .6rem; justify-items: start; }
.para h3 { margin: 0; }
.btn--claro { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--claro:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.dos--faq { grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; }

@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) {
  .eleg--hero { grid-template-columns: 1fr 1fr; }
  .eleg--hero .btn { grid-column: 1 / -1; }
  .ticker__fila { grid-template-columns: repeat(3, 1fr); }
  .ticker__fila > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .ciclo, .rejilla-4 { grid-template-columns: 1fr 1fr; }
  .ciclo li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ciclo li { padding-bottom: 1.5rem; }
  .dos--producto, .dos--faq { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .eleg--hero { grid-template-columns: 1fr; }
  .ticker__fila { grid-template-columns: 1fr 1fr; }
  .ticker__fila > div { border-left: 0; padding-left: 0; }
  .ciclo, .rejilla-4 { grid-template-columns: 1fr; }
  .ciclo li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--filete); }
}

/* ===== 26 · ANCHO COMPLETO Y TIPOGRAFÍA EN TODA LA WEB ============== */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-ext-var.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-mono-var.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); }
:root {
  --gut: clamp(1.25rem, 4vw, 4rem);
  --display-tipo: 'Open Runde', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto-tipo: 'Open Runde', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato-tipo: 'Open Runde', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { font-family: var(--texto-tipo); }
.container, .section > .container, .nav.container, .footer .container {
  max-width: none !important; width: auto !important; margin-inline: 0 !important; padding-inline: var(--gut) !important;
}
h1, .hero__titular { font-family: var(--display-tipo); font-weight: 500; letter-spacing: -0.045em; line-height: .98; }
h2 { font-family: var(--display-tipo); font-weight: 500; letter-spacing: -0.035em; }
h1 em, h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4.75rem); max-width: 18ch; }
.ojo, .section__eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: .02em; }
.cabecera { background: rgba(244, 242, 240, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.nav__links a.is-active { background: transparent; text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 6px; border-radius: 0; }
.nav__actions .btn, .btn--filled, .btn--primary { border-radius: 999px; }
.btn { border-radius: 999px; }
.detail__grid { grid-template-columns: minmax(0, 7fr) minmax(18rem, 3fr) !important; gap: clamp(2rem, 4vw, 5rem) !important; }
.catalog { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) !important; gap: clamp(1.5rem, 3vw, 4rem) !important; }
@media (max-width: 960px) { .detail__grid, .catalog { grid-template-columns: 1fr !important; } }

.detail__grid > * { min-width: 0; }
.estudio { overflow-wrap: anywhere; }
@media (max-width: 960px) { .container.detail__grid { display: block !important; } .detail__side { margin-top: 2rem; } }

.nav__links a, .nav__links a.is-active { border-bottom: 0 !important; box-shadow: none !important; }
.nav__links a.is-active::after, .nav__links a::after { display: none !important; }
.nav__buscar input { border-radius: 999px; padding-inline: 1rem; }

/* ===== 27 · PROVINCIAS ============================================== */
.provincias-indice { columns: 4 16rem; column-gap: 3rem; }
.provincias-indice > div { break-inside: avoid; margin-bottom: 2rem; }
.provincias-indice h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0; margin: 0 0 .5rem; color: var(--ceniza-t); font-family: 'Geist Mono', monospace; text-transform: uppercase; }
.provincias-indice ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.provincias-indice a { font-size: 1.25rem; color: var(--tinta); text-decoration: none; letter-spacing: -0.02em; }
.provincias-indice a:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.dos--prov { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr) !important; gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.dos--prov aside { display: grid; gap: 1rem; position: sticky; top: 6rem; }
.h2--sep { margin-top: 3rem; }
.prov-lista { list-style: none; padding: 0; margin: 1rem 0 2rem; border-top: 1px solid var(--tinta); }
.prov-lista li { border-bottom: 1px solid var(--filete); }
.prov-lista a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; padding: 1rem 0; color: var(--tinta); text-decoration: none; }
.prov-lista__tit { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.prov-lista a:hover .prov-lista__tit { text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.prov-lista__meta { grid-column: 1; color: var(--ceniza-t); font-size: .875rem; }
.prov-lista__plazo { grid-column: 2; grid-row: 1 / span 2; font-family: 'Geist Mono', monospace; font-size: .75rem; color: var(--ceniza-t); white-space: nowrap; }
.prov-org { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.prov-org li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.prov-org b { font-family: 'Geist Mono', monospace; font-weight: 500; }
@media (max-width: 900px) { .dos--prov { grid-template-columns: 1fr !important; } .dos--prov aside { position: static; } .prov-lista a { grid-template-columns: 1fr; } .prov-lista__plazo { grid-column: 1; grid-row: auto; } }

/* ===== 28 · PIE ===================================================== */
.footer { padding-top: clamp(3rem, 6vw, 5rem); }
.footer__grid { display: grid !important; grid-template-columns: minmax(16rem, 1.4fr) repeat(5, minmax(0, 1fr)) !important; gap: 2.5rem 2rem !important; }
.footer__brand p { max-width: 22rem; }
.footer__col ul { display: grid; gap: .55rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.5rem; padding-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr !important; } }

/* Contraste: texto oscuro siempre sobre el amarillo; paginador apagado legible */
.btn--filled, .btn--primary, a.btn[href="/registro.php"], .cta-panel .btn--primary, .cta-panel .btn--filled { color: var(--tinta) !important; }
.pager__salto--off { color: #6d6c6b !important; }