/* ==========================================================================
 * «ESCAPARATE» — el sistema de diseño del portal de la suite.
 *
 * Sale del eje A del lienzo de Claude Design «Puerta de la suite · tres ejes
 * nuevos», que es el que eligió el propietario el 22/09/2026. No hereda nada del
 * diseño anterior («Catálogo impreso», hueso y tinta): se borró entero, con sus
 * tipografías.
 *
 * ## Las seis reglas, y por qué
 *
 * 01. **Fondo blanco y tinta casi negra.** Esta página es un escaparate: lo que
 *     tiene que verse son los módulos, no el decorado. El blanco es el único
 *     fondo que no compite con los cinco colores medidos de los módulos, que son
 *     lo ÚNICO con color fuerte aquí.
 * 02. **Dos caras.** Bricolage Grotesque para titulares y nombres, Archivo para
 *     todo lo demás. El mono solo del lado privado. Ver `tipografias.css`.
 * 03. **Nada redondeado y ninguna sombra.** Rectángulos y filetes de 1 px. Una
 *     tarjeta con esquinas redondas y sombrita es el aspecto por defecto de
 *     cualquier plantilla; aquí la jerarquía la hacen el tamaño y el color.
 * 04. **Ningún degradado.** El color de un módulo entra como banda plana; si
 *     hiciera falta un degradado para que algo se vea, es que no se veía.
 * 05. **El catálogo no se cierra.** Ninguna rejilla tiene un número de columnas
 *     fijo: todas son `auto-fit` con mínimo. Con tres módulos se ve bien y con
 *     nueve también, sin tocar una línea de esto. Es la condición que puso el
 *     propietario y está resuelta en el CSS, no en la plantilla.
 * 06. **Contraste de verdad.** Ningún texto por debajo de 4,5:1 sobre su fondo.
 *     Por eso el gris tenue es `#6e747d` y no el `#8b9098` del boceto, que se
 *     quedaba en 3,2:1 — el boceto se dibuja para mirarlo, esto se lee.
 *
 * ## Lo que este fichero NO tiene
 *
 * Ni una regla de tema oscuro y ni un `@media (prefers-color-scheme)`. Un tema
 * que nadie ha diseñado no es una cortesía: es una paleta más que mantener y
 * cinco colores de módulo medidos sobre pantalla clara que ahí ya no valen.
 * ========================================================================== */

:root {
  /* Tierra */
  --fondo: #ffffff;
  --panel: #fbfaf8;          /* paños y cajas: un blanco que se distingue */
  --chip: #f3f2ef;

  /* Tinta */
  --tinta: #0e1116;          /* titulares, botones, el negro de la marca */
  --media: #565c66;          /* prosa secundaria — 6,7:1 sobre blanco */
  --tenue: #6e747d;          /* rótulos y apuntes — 4,7:1 sobre blanco */
  --sobre-tinta: #c9ced6;    /* prosa dentro de la franja oscura */
  --rotulo-tinta: #9aa1ab;   /* rótulos dentro de la franja oscura */

  /* Filetes */
  --filete: #e7e5e0;
  --filete-firme: #d4d1ca;
  --trazo: #c2bdb5;          /* las discontinuas: lo que todavía no existe */
  --banda-obra: #dcd9d4;     /* la banda de una tarjeta sin módulo detrás */

  /* Los tres estados, y solo tres. Ninguno es el color de un módulo: un módulo
   * no tiene color «de estar bien». Los tres pasan de 5,9:1 sobre blanco. */
  --bien: #15693f;
  --raro: #8a5713;
  --mal:  #a52a1c;
  --borde-bien: #b9d6c6;
  --borde-raro: #dfc99c;
  --borde-mal:  #e0b3aa;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --prosa: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --ancho: 1440px;
  --aire: 56px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--prosa);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* El foco se ve SIEMPRE y se ve igual en todo el portal. Sin JavaScript, el
 * teclado es la única forma de recorrer esto para quien no usa ratón. */
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: var(--aire);
  top: 10px;
  z-index: 9;
  padding: 11px 16px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* El único contenedor de ancho del portal. Todo lo que se pinta a sangre —la
 * barra, la franja oscura, el pie— lleva uno dentro. */
.ancho {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--aire);
}

main { display: block; }

/* ── La barra ─────────────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--fondo);
  border-bottom: 1px solid var(--filete);
}

.barra > .ancho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
}

/* El cuadrado negro. No es un logotipo —la suite no tiene— y por eso es lo más
 * simple que puede ser: cuando haya uno, se cambia aquí y en ningún otro sitio. */
.marca .cubo { width: 22px; height: 22px; background: var(--tinta); flex: none; }

.marca .letras {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.marca .donde {
  padding-left: 12px;
  border-left: 1px solid var(--filete);
  font-size: 13.5px;
  color: var(--tenue);
}

.menu { display: flex; align-items: center; gap: 24px; font-size: 14px; }

.menu form { margin: 0; }

.menu .enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--media);
  text-decoration: none;
}

.menu .enlace:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.menu .quien { font-size: 13.5px; color: var(--tenue); }

/* ── Botones y enlaces ────────────────────────────────────────────────────── */

/* Un solo botón, en dos pesos. El de acción es tinta plena: en una página cuyo
 * color pertenece a los módulos, la acción no puede ir de azul. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--tinta);
  color: #fff;
  font-family: var(--prosa);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { background: #000; }

.boton.grande { min-height: 48px; padding: 0 26px; font-size: 15px; font-weight: 600; }

.boton.hueco {
  background: transparent;
  color: var(--tinta);
  border-color: var(--filete-firme);
}

.boton.hueco:hover { background: var(--panel); border-color: var(--tinta); }

.enlace-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Rótulos y prosa ──────────────────────────────────────────────────────── */

.rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}

.titular {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.entradilla {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--media);
}

.prosa { color: var(--media); }

.apagado { color: var(--tenue); }

.mono { font-family: var(--mono); }

.glosa { font-size: 14px; color: var(--tenue); }

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.avisos { padding-top: 24px; }

.aviso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 13px 16px;
  border: 1px solid var(--filete-firme);
  background: var(--panel);
  font-size: 14.5px;
  line-height: 1.5;
}

.aviso::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--media); }

.aviso.mal { border-color: var(--borde-mal); color: var(--mal); }
.aviso.mal::before { background: var(--mal); }

.aviso.obra { border-color: var(--borde-raro); }
.aviso.obra::before { background: var(--raro); }

.aviso .ayuda { color: var(--media); }

/* ── La puerta: el escaparate ─────────────────────────────────────────────── */

.escaparate {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 44px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--chip);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--media);
}

.chip .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--bien); flex: none; }

.escaparate .titular { margin-top: 18px; }

.acciones { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }

.acciones .apunte { font-size: 14px; color: var(--tenue); }

/* El paño de la derecha. Tiene la forma de una captura de producto porque ese es
 * su sitio: aquí va una pantalla real de un módulo el día que haya una que se
 * pueda publicar sin datos de nadie dentro. Mientras no la haya, dice tres cosas
 * ciertas en vez de fingir una. */
.panel { border: 1px solid var(--filete); background: var(--panel); padding: 18px; }

.panel-cabeza {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filete);
  font-size: 12px;
  font-weight: 600;
}

.panel-cabeza .rotulo { margin-left: auto; letter-spacing: 0.08em; }

.hecho { padding: 15px 0; border-bottom: 1px solid var(--filete); }

.hecho:last-child { border-bottom: 0; padding-bottom: 3px; }

.hecho b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.015em;
}

.hecho span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--media); }

/* ── Las tarjetas de los módulos ──────────────────────────────────────────── */

/* `auto-fit` y no cinco columnas: esta rejilla es la que tiene que aguantar que
 * la suite crezca. Con cuatro módulos y la tarjeta abierta caben cinco en una
 * línea; con ocho se parten en dos filas y nadie toca nada. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filete);
  background: var(--fondo);
  color: var(--tinta);
  text-decoration: none;
}

a.tarjeta:hover { border-color: var(--tinta); }
a.tarjeta:hover .ir { text-decoration: underline; text-underline-offset: 3px; }

/* La única mancha de color fuerte de la página, y es el color MEDIDO del módulo:
 * llega desde el catálogo por un atributo `style`, porque el dato de qué color
 * tiene cada módulo vive en `catalogo/suite.toml` y no en esta hoja. */
.tarjeta .banda { height: 54px; flex: none; }

.tarjeta .cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.tarjeta h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.tarjeta .dice { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--media); }

.tarjeta .ir { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; }

.tarjeta.obra { background: var(--panel); }
.tarjeta.obra .banda { background: var(--banda-obra); }
.tarjeta.obra h2, .tarjeta.obra .dice, .tarjeta.obra .ir { color: var(--tenue); }

/* La tarjeta abierta: un hueco dibujado a propósito. Que el catálogo siga
 * abierto es una promesa del producto, así que se dice en la portada y no en una
 * nota al pie. */
.tarjeta.abierta { border-style: dashed; border-color: var(--trazo); background: var(--fondo); }
.tarjeta.abierta .banda { border-bottom: 1px dashed var(--trazo); }
.tarjeta.abierta h2 { font-weight: 600; color: var(--tenue); }
.tarjeta.abierta .dice { color: var(--tenue); }

/* ── Secciones y franjas ──────────────────────────────────────────────────── */

.seccion { padding: 52px 0; border-top: 1px solid var(--filete); }

.cabeza-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }

.tres h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.tres p { margin: 0; font-size: 15px; color: var(--media); }

.franja { background: var(--tinta); color: #fff; }

.franja > .ancho {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 56px;
}

.franja .rotulo { color: var(--rotulo-tinta); }

.franja .grande {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.franja p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--sobre-tinta); }

.franja b { color: #fff; }

/* ── Entrar ───────────────────────────────────────────────────────────────── */

.acceso {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
  padding: 56px 0 80px;
}

.acceso .titular { font-size: clamp(34px, 4vw, 50px); margin-top: 14px; }

.hechos {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--filete);
}

.hechos li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filete);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--media);
}

.folio { font-family: var(--mono); font-size: 12px; color: var(--tenue); flex: none; }

.hechos .folio { padding-top: 4px; }

.caja { border: 1px solid var(--filete-firme); background: var(--panel); padding: 28px; }

.caja h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
}

.caja > .rotulo { display: block; margin-top: 6px; }

.caja .aviso { margin-top: 20px; }

.caja form { margin-top: 22px; display: grid; gap: 16px; }

.campo { display: grid; gap: 6px; }

.campo label { font-size: 13px; font-weight: 600; }

.campo input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--filete-firme);
  border-radius: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--prosa);
  font-size: 16px;
}

.campo input:focus-visible { border-color: var(--tinta); outline-offset: 1px; }

.caja .boton { width: 100%; }

.remate { margin: 20px 0 0; font-size: 13px; line-height: 1.55; color: var(--tenue); }

/* ── La sala ──────────────────────────────────────────────────────────────── */

.cabecera-sala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 44px 0 26px;
}

.cabecera-sala .titular { font-size: clamp(32px, 3.6vw, 44px); margin-top: 10px; }

.cabecera-sala .prosa { margin: 14px 0 0; max-width: 68ch; font-size: 15.5px; }

/* Rejilla de celdas separadas por un filete de 1 px, hecho con el `gap` y el
 * fondo: así el número de columnas puede cambiar sin que sobre ningún borde. */
.recuento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 1px;
  border: 1px solid var(--filete);
  background: var(--filete);
}

.recuento > div { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; background: var(--fondo); }

.cifra {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cifra.bien { color: var(--bien); }
.cifra.mal { color: var(--mal); }
.cifra.nose { color: var(--tenue); }

.cuando { font-family: var(--mono); font-size: 14.5px; }

.hace { font-family: var(--mono); font-size: 11.5px; color: var(--tenue); }

.grupo { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--filete); }

.grupo-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.grupo-cabeza h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.grupo-cabeza .lema { margin-left: 2px; }

/* El cuadro del módulo: el color medido, en 16 px y nunca de fondo de texto. El
 * color lo pone una clase `.cuadro-<clave>` que sirve `/estilos/modulos.css`. */
.cuadro { display: inline-block; flex: none; width: 16px; height: 16px; }
.cuadro.sin { border: 1px solid var(--trazo); }
.cuadro.vacio { border: 1px dashed var(--trazo); }

.instalacion {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 316px;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--filete);
}

/* Dentro hay datos de personas de un cliente. Se marca en el sitio, no solo con
 * un sello: es el error que ya invalidó parte de tres auditorías. */
.instalacion.ojo { padding-left: 16px; box-shadow: inset 3px 0 0 var(--mal); }

.donde { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }

.sellos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--filete-firme);
  background: var(--fondo);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--media);
}

/* Cuadro y palabra, nunca color solo: lo que dice un sello es de quién son unos
 * datos o si una máquina contesta, y eso no puede depender de distinguir verde
 * de rojo. */
.sello::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }

.sello.vivo { color: var(--bien); border-color: var(--borde-bien); }
.sello.raro { color: var(--raro); border-color: var(--borde-raro); }
.sello.caido { color: var(--mal); border-color: var(--borde-mal); }
.sello.nose { color: var(--tenue); }
.sello.cliente { color: var(--mal); border-color: var(--borde-mal); }
.sello.propia, .sello.fuera, .sello.solo-nuestro { color: var(--media); }

.url {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete-firme);
  word-break: break-all;
}

.url:hover { border-bottom-color: var(--tinta); }

.dentro, .detalle, .nota, .cuidado { margin: 9px 0 0; font-size: 13px; line-height: 1.55; }

.dentro { font-family: var(--mono); font-size: 12px; color: var(--tenue); }

.detalle { color: var(--media); }
.detalle.mal { color: var(--mal); font-weight: 500; }
.detalle.raro { color: var(--raro); font-weight: 500; }

.nota { color: var(--tenue); }

.cuidado { padding-left: 12px; border-left: 3px solid var(--mal); color: var(--mal); font-weight: 500; }

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }

.datos > div { display: flex; flex-direction: column; gap: 3px; }

.valor { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.valor.mal { color: var(--mal); font-weight: 600; }
.valor.obra { color: var(--raro); font-weight: 600; }

.maquinas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 1px;
  border: 1px solid var(--filete);
  background: var(--filete);
}

.maquina { padding: 20px; background: var(--fondo); }

.maquina.ojo { box-shadow: inset 0 3px 0 var(--mal); }

.maquina h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }

.maquina p { margin: 0 0 10px; font-size: 14px; color: var(--media); }

.ficha-maquina { font-family: var(--mono); font-size: 12px; color: var(--tenue); }

.cuantas { font-size: 12.5px; color: var(--tenue); }

.vacio-grupo { padding: 16px 0 6px; font-size: 14.5px; color: var(--media); }

/* ── Errores ──────────────────────────────────────────────────────────────── */

.percance { max-width: 62ch; padding: 72px 0 104px; }

.percance .titular { font-size: clamp(30px, 3.4vw, 42px); margin-top: 12px; }

.percance p { font-size: 16px; color: var(--media); }

.volver { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }

/* ── El pie ───────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--filete); }

.pie > .ancho {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 28px;
  font-size: 12.5px;
  color: var(--tenue);
}

/* ── Pantallas estrechas ──────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --aire: 32px; }
  .escaparate, .acceso, .franja > .ancho { grid-template-columns: 1fr; gap: 36px; }
  .instalacion { grid-template-columns: 1fr; gap: 14px; }
  .instalacion .datos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 720px) {
  :root { --aire: 16px; }
  body { font-size: 15.5px; }
  .barra > .ancho { min-height: 64px; gap: 12px; }
  .marca .donde { display: none; }
  .menu { gap: 14px; }
  .menu .de-sobra { display: none; }
  .escaparate { padding-top: 34px; }
  .entradilla { font-size: 16px; }
  .seccion, .franja > .ancho { padding-top: 40px; padding-bottom: 40px; }
  .cabeza-seccion { flex-direction: column; align-items: flex-start; gap: 6px; }
  .caja { padding: 20px; }
  .cifra { font-size: 30px; }
}

/* ── Remates ──────────────────────────────────────────────────────────────── */

/* «Salir» es un botón porque es un POST, pero en la barra tiene que leerse como
 * los demás enlaces. Lo que decide si algo es botón o enlace es lo que le hace al
 * servidor, no el aspecto. */
.menu button.enlace {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.chip { margin: 0; }

.vitrina { padding-bottom: 56px; }

.panel-cabeza .pico { width: 9px; height: 9px; background: var(--tinta); flex: none; }

/* Una fila por módulo, con su promesa entera. Es el sitio donde cada módulo habla
 * con sus palabras, y crece hacia abajo sin límite. */
.promesas { border-top: 1px solid var(--filete); }

.promesa-fila {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--filete);
}

.promesa-fila .quien-es { display: flex; align-items: flex-start; gap: 11px; }

.promesa-fila h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.promesa-fila .lema { display: block; margin-top: 3px; }

.promesa-fila p { margin: 0; font-size: 15px; color: var(--media); }

.promesa-fila .cuadro { margin-top: 4px; }

.promesa-fila.obra h3, .promesa-fila.obra p { color: var(--tenue); }

.promesa-fila .enlace-texto { font-family: var(--mono); font-size: 13px; font-weight: 400; white-space: nowrap; }

/* La última sección de la sala, que no lleva franja oscura detrás. */
.grupo:last-of-type { padding-bottom: 64px; }

@media (max-width: 1080px) {
  .promesa-fila { grid-template-columns: 1fr; gap: 10px; }
  .promesa-fila .enlace-texto { white-space: normal; word-break: break-all; }
}