/* NOTA DE COLOR · DÓNDE VA CADA TOKEN DEL ÁREA.
 *   · `--color-area`        pinta: glow, realces, fondos. Es el color del
 *                           manual y no cambia con el tema.
 *   · `--color-area-texto`  se LEE: cualquier texto y cualquier borde que
 *                           delimite una pieza. En claro es el tono oscurecido
 *                           que pasa AA; en oscuro vuelve a ser el vivo.
 * Los seis colores del manual sobre papel dan de 1.31:1 a 2.73:1 — invisibles.
 * Lo cazó una auditoría externa el 2026-08-12 y `comprobar-sistema.ts` lo
 * vigila desde entonces con las doce combinaciones.
 */
/*
 * PORTADA · solo lo que es de la página de inicio.
 *
 * Lo compartido —cabecera, pie, cielo, cierre— está en `comun.css`.
 * Se carga DESPUÉS de él y de `sistema.css`.
 */

/* ═══ Héroe ═══════════════════════════════════════════════════════════════ */

/* V2: el antetítulo original del héroe calla en cualquier ancho — su texto
   vive en el pin de la tarjeta, que desde el cruce existe también en
   escritorio. Decirlo dos veces era el defecto que la baraja ya había
   resuelto en el celular. */
#agencia > .heroe-fila .antetitulo { display: none; }

.heroe { position: relative; padding-block: var(--e6) var(--e5); }
.heroe .antetitulo { margin-bottom: var(--e2); }

/* El texto y la ilustración conviven en una fila; por debajo de 900px la
   ilustración pasa DEBAJO y no desaparece: es la pieza que hace que esto no
   parezca la portada de cualquiera. */
.heroe-fila { display: grid; gap: var(--e5); align-items: center; }
/* La página crece con el monitor, pero el HÉROE no se estira sin límite: con
   1792px de contenedor, el titular y la ilustración acababan en extremos
   opuestos y dejaban un vacío en medio. Se acota — pero se acota A LA DERECHA.

   CENTRARLO ERA EL ERROR. Con `margin-inline: auto`, el titular del héroe
   empezaba 94px más adentro que el de TODAS las demás secciones (medido a
   1680px: 184px contra 90px). Era el único borde de texto desalineado de la
   página, y leído de arriba abajo parecía un descuido, no una decisión.
   Anclado a la izquierda, el tope sigue evitando el vacío del medio y el
   héroe arranca en la misma vertical que el resto. */
@media (min-width: 900px) {
  .heroe-fila { grid-template-columns: 1.15fr .85fr; max-width: 82rem; margin-inline: 0 auto; }
}

.heroe-arte { justify-self: center; width: min(100%, 26rem); }

/* ── LA NAVE (2026-08-17) ─────────────────────────────────────────────────
   El logotipo en línea, por trazos: `.casco` (las letras y las aletas), `.on`
   (la O y la N verdes, ENCIMA de sus copias blancas) y `.flama`. El color lo
   ponen los tokens del tema —`--texto` y `--acento-fondo`—, que ya son
   exactamente lo que manda el manual sobre cada fondo (02.4): blanco + verde
   al 85 % sobre oscuro, tinta + verde al 100 % sobre claro. Nada que
   reexportar si el tema cambia.

   LA SECUENCIA, una vez, al entrar: llega hacia arriba y a la derecha (su
   rumbo, 01.1) · el ON se enciende · la llama prende con un rebote y se queda
   respirando. Todo es transform y opacity —compositor, cero maquetación— y
   TODO NACE EN SU CUADRO FINAL: los estados de partida viven en los `from` de
   cada @keyframes, no en la regla base, así que si la animación no corre
   (menos movimiento, un navegador viejo) la nave está entera y encendida.
   `overflow: visible` es lo que el director vio faltar en el previo: la
   llama, al crecer, se salía del lienzo del SVG y se cortaba. */
.heroe-nave { display: grid; place-items: center; }
.logo-nave { display: block; width: 100%; height: auto; overflow: visible; }
.logo-nave .casco { fill: var(--texto); }
.logo-nave .on, .logo-nave .flama { fill: var(--acento-fondo); }
/* La llama crece desde la tobera, no desde su centro: origen en su borde
   derecho, que es donde toca el casco. */
.logo-nave .flama { transform-box: fill-box; transform-origin: 100% 40%; }
.logo-nave { animation: nave-llega .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
.logo-nave .on { animation: nave-enciende .18s ease-out 1s both; }
.logo-nave .flama {
  animation: nave-prende .5s cubic-bezier(.34, 1.4, .64, 1) 1.15s both,
             nave-respira 1.9s ease-in-out 1.7s infinite;
}
@keyframes nave-llega { from { opacity: 0; transform: translate(-16px, 12px); } to { opacity: 1; transform: none; } }
@keyframes nave-enciende { from { opacity: 0; } to { opacity: 1; } }
@keyframes nave-prende { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nave-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1, 1.05); } }
/* Con menos movimiento el sistema ya deja cada animación en .01ms; lo que
   quedaría es la ESPERA de los retardos —un segundo con el ON apagado—. Aquí
   se quitan también: la nave aparece de una vez, entera. */
@media (prefers-reduced-motion: reduce) {
  .logo-nave, .logo-nave .on, .logo-nave .flama { animation-delay: 0s; }
}
/* La «figura de fondo desenfocada» del manual (05.3): un degradado radial
   del verde detrás de la nave. Es un gradiente, no un filtro: llena el héroe
   del color de la agencia sin quitarle el cielo ni costar un fotograma. */
.heroe::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(34% 46% at 74% 50%, color-mix(in srgb, var(--verde) 26%, transparent), transparent 72%);
}
.heroe > .heroe-fila { position: relative; z-index: 1; }

/* Escala propia, más contenida que --t-h1: con el tamaño del sistema la tesis
   se comía la pantalla entera y empujaba la tira fuera del primer vistazo. El
   manifiesto pide justo lo contrario — que el trabajo se vea al entrar. */
.tesis {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.65rem, 1.05rem + 2.1vw, 2.6rem);
  line-height: var(--renglon-titular);
  max-width: 26ch;
  margin-bottom: var(--e4);
}
/* Las dos negaciones se apagan y la afirmación se queda con el verde: la
   frase entera es «no, no, SÍ», y el color lo dice antes de leerla.

   Van en DOS elementos —un `p` y el `h1`— y no en dos `span`, porque el H1
   entero medía 177 caracteres. Se escriben los selectores sueltos además de
   los descendentes para que valga tanto si las clases conviven en el mismo
   elemento como si están anidadas. */
.tesis.niega, .tesis .niega { color: var(--texto-suave); }
.tesis.afirma, .tesis .afirma { color: var(--acento); }
/* Las dos mitades son una sola frase: sin esto, el margen de `.tesis` las
   separaría como si fueran dos párrafos distintos. */
.tesis.niega { margin-bottom: 0; }

.heroe .bajada { font-size: var(--t-lede); line-height: var(--renglon-medio); max-width: 46ch; color: var(--texto-suave); }
.heroe .acciones { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e5); }

/* ── La tira de fotogramas ──
   Ocupa el ancho completo, se desplaza a mano y NO roba el foco del teclado:
   cada fotograma es un enlace real a su ficha. */
.tira {
  margin-top: var(--e6);
  list-style: none; padding-left: 0;
  display: flex; gap: var(--e1);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: var(--e2);
  scrollbar-width: thin;
  /* Sin esto, deslizar la tira hasta el final sigue de largo y el navegador lo
     entiende como «atrás»: se pierde la página al mirar el trabajo. */
  overscroll-behavior-x: contain;
  /* Se desangra a los lados del contenedor para que la tira toque los bordes
     de la pantalla: una tira de contactos no tiene márgenes. */
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-inline: var(--margen-lateral);
}
.tira > li { flex: 0 0 auto; width: clamp(11rem, 22vw, 17rem); scroll-snap-align: start; }

.fotograma {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radio); overflow: hidden;
  background: var(--superficie-alta);
  /* La perforación de una tira de película, dos líneas de puntos arriba y
     abajo. Es un degradado, no una imagen: pesa cero. */
  box-shadow: inset 0 1px 0 var(--filo);
}
/* EL ENCUADRE SE SESGA HACIA ARRIBA, y no es un capricho. En la tira el marco
   SÍ tiene que ser uniforme —es una tira de contactos, si cada fotograma mide
   distinto deja de leerse como tal—, pero 61 de las 108 fotos del archivo son
   verticales, y una vertical dentro de un 4/3 pierde la mitad del alto. Con el
   recorte centrado esa mitad se va a partes iguales por arriba y por abajo, y
   lo que hay arriba en una foto de gente es la cabeza.
   Al 32% el recorte se come sobre todo el suelo y la mesa, que es lo que sobra. */
.fotograma img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--transicion), transform var(--transicion);
}
.fotograma:hover img, .fotograma:focus-visible img { filter: none; transform: scale(1.03); }
/* El rótulo va SIEMPRE sobre el degradado oscuro, en los dos temas: se lee
   sobre la foto, no sobre la página, así que su contraste no depende del tema
   sino de lo que hay debajo. Por eso el color va literal y no por variable. */
.fotograma .rotulo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e4) var(--e2) var(--e2);
  font-family: var(--fuente-datos); font-size: var(--t-micro);
  color: #F2F3F7;
  background: linear-gradient(to top, rgba(10, 12, 16, .92), transparent);
}

/* ═══ Manifiesto ══════════════════════════════════════════════════════════
 *
 * ANTES ERA UNA COLUMNA SUELTA. El manifiesto vivía en `.contenedor-texto`,
 * centrado en la ventana, mientras el resto de la página ocupaba el ancho del
 * monitor. Medido a 1920: Nosotros empezaba en 592px y Servicios en 100, así
 * que la sección más importante del sitio flotaba desalineada de todo.
 *
 * LA SOLUCIÓN NO ES ENSANCHAR EL TEXTO —a 1700px un párrafo no se lee—, es
 * DARLE ESTRUCTURA: cada frase ancla a la izquierda y su explicación a la
 * derecha. El bloque entero comparte el borde izquierdo con las demás
 * secciones, y cada columna conserva su medida de lectura.
 *
 * Es además lo que pide el texto original: «resaltar tipográficamente las
 * cinco frases-ancla». Aquí no se resaltan con negrita, se resaltan con el
 * SITIO que ocupan.
 */

.manifiesto { padding-block: var(--e6) var(--e7); }

.par-manifiesto { display: grid; gap: var(--e2); margin-bottom: var(--e6); }
@media (min-width: 900px) {
  .par-manifiesto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--e5);
    align-items: start;
  }
}

/* EL PAR ES UN `details` DESDE M5, y en escritorio no se nota: llega ABIERTO,
   el summary pierde su marcador y su toque (aquí no hay nada que plegar), y
   `::details-content` se hace transparente para que la glosa siga cayendo en
   la segunda columna de la reja — donde el navegador aún no envuelve el
   contenido, la reja ya funcionaba sola. Plegarlo es asunto del celular. */
.par-manifiesto > .ancla-sum { display: block; list-style: none; padding: 0; margin: 0; }
.par-manifiesto > .ancla-sum::-webkit-details-marker { display: none; }
/* V2 (2026-08-19): el candado de escritorio murió — el manifiesto se pliega
   en cualquier ancho, como toda la baraja. Estos son sus mandos, que vivían
   en el bloque del celular: */
.par-manifiesto { margin-bottom: var(--e3); }
.par-manifiesto > .ancla-sum {
  cursor: pointer;
  padding-block: var(--e1);
  display: flex; align-items: baseline; gap: var(--e2);
}
.par-manifiesto > .ancla-sum .ancla { flex: 1; }
/* El signo del acordeón de Preguntas: cruz que gira a menos. */
.par-manifiesto > .ancla-sum::after {
  content: ""; flex-shrink: 0; align-self: center;
  width: 12px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--acento);
  transition: transform var(--transicion);
}
.par-manifiesto[open] > .ancla-sum::after { transform: rotate(135deg); }
.par-manifiesto .glosa { padding-block: var(--e1) var(--e2); }

/* Las cinco frases ancla. No es decoración: son las que sostienen el
   argumento, y el texto original pide resaltarlas. */
.manifiesto .ancla {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--t-h2);
  line-height: var(--renglon-titular);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}
/* La explicación, en medida de lectura pase lo que pase con el monitor. */
.manifiesto .glosa {
  font-size: var(--t-lede);
  line-height: var(--renglon-medio);
  color: var(--texto-suave);
  max-width: 46ch;
  margin: 0;
}

/* EL REMATE va en Din Black Italic, igual que en los paneles de NOSOTROS y
   ¡CONVERSEMOS! que ya están aprobados. Es la única licencia sobre el manual
   y está acotada a las frases de cierre: los titulares siguen en Chakra Petch.
   La cursiva condensada inclina la frase hacia delante, que es lo que hace una
   frase de remate. */
.remate-din {
  font-family: "Din Black", var(--fuente-titulo);
  font-style: italic; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1;
}

.manifiesto .remate {
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem);
  color: var(--acento);
  margin-top: var(--e5);
  max-width: 22ch;
}

/* La órbita acompaña al manifiesto: es la pieza que dibuja «dos cosas girando
   alrededor de lo mismo», que es literalmente lo que dice el texto. */
.manifiesto-arte { width: min(100%, 15rem); margin: var(--e6) auto 0; display: block; }

/* ═══ Principios ══════════════════════════════════════════════════════════ */

.principios { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.principio { padding: var(--e4); border-radius: var(--radio-caja); background: var(--superficie); border: 1px solid var(--borde); }
.principio h3 { font-family: var(--fuente-titulo); font-size: var(--t-h3); margin-bottom: var(--e1); }
.principio p { color: var(--texto-suave); font-size: var(--t-pie); margin: 0; }

/* ═══ Trabajo · la hoja de contactos ══════════════════════════════════════ */

.contactos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.caso {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radio-caja); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.caso:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
/* Mismo sesgo que la tira, por la misma razón. */
.caso img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%; }
.caso .datos { padding: var(--e2) var(--e3) var(--e3); }
.caso h3 { font-family: var(--fuente-titulo); font-size: var(--t-h3); margin-bottom: var(--e0); }
/* Los servicios en monoespaciada, como una hoja de rodaje. Es el dato, no el
   titular: se lee como ficha técnica porque ESO es. */
.caso .oficios { font-family: var(--fuente-datos); font-size: var(--t-micro); color: var(--texto-suave); }

/* ═══ Servicios ═══════════════════════════════════════════════════════════
 *
 * LA SECCIÓN MÁS PROTAGÓNICA DE LA PÁGINA, y no por capricho: es donde alguien
 * que no conoce la casa entiende QUÉ hace y CUÁNTO lleva haciéndolo. Antes era
 * una fila de tres tarjetas del mismo tamaño que los principios, y se leía
 * como un apartado más.
 *
 * NO SE MOVIÓ DE SITIO. El recorrido sigue siendo por qué → cómo → qué; lo que
 * cambia es el peso: titular mayor, una entradilla que lo enmarca, las cifras
 * delante y las tarjetas más grandes con su icono de área a tamaño real.
 */

/* EL SELECTOR LLEVA `.seccion > header` A PROPÓSITO. Con `.titular-grande` a
   secas (0,1,0) perdía contra `.seccion > header h2` (0,1,2) de comun.css y el
   titular salía del mismo tamaño que los demás — el cambio no hacía nada y la
   hoja parecía correcta. Es la misma trampa de especificidad que deja el
   logotipo del blog pintado dos veces. Medido: 52px en los dos antes de esto. */
.seccion > header .titular-grande {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: var(--renglon-titular);
  text-wrap: balance;
}
.seccion > header .entradilla {
  font-size: var(--t-lede); line-height: var(--renglon-medio);
  color: var(--texto-suave); max-width: 52ch; margin-top: var(--e3);
}

/* ── Las cifras ──
   Van en la monoespaciada de datos y a tamaño de titular: son HECHOS, y un
   hecho se enseña como cifra, no como frase. El manual reserva el verde para
   «fondo, cifra o titular» (regla textoVerdeSobrePapel), así que aquí el verde
   es literalmente lo que el manual autoriza. */
.cifras {
  display: grid; gap: var(--e3) var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  list-style: none; padding: 0;
  margin: var(--e5) 0 0;
  border-top: 1px solid var(--borde);
  padding-top: var(--e4);
}
.cifras li { display: flex; flex-direction: column; gap: .15rem; }
.cifras b {
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem);
  line-height: 1; font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.cifras span { font-size: var(--t-pie); color: var(--texto-suave); }

/* ── EL HANGAR · seis bahías, una abierta ────────────────────────────────
 *
 * QUÉ RESUELVE. La sección tiene que caber en el monitor: si hay que
 * desplazarse para verla entera, deja de ser una vista del taller y pasa a ser
 * una lista más. El riel que hubo antes apilaba las seis cabeceras arriba y el
 * cuerpo abierto debajo, y con doce servicios se salía de la pantalla. El
 * hangar hace ese mismo trabajo con el ANCHO: cinco lomos estrechos y una
 * bahía abierta que ocupa lo que queda.
 *
 * UN SOLO MARCADO, DOS FORMAS:
 *   · ESCRITORIO · seis columnas; la abierta se ensancha y las otras se
 *     quedan en el canto, con su nombre girado y su conteo al pie.
 *   · CELULAR · acordeón vertical. No se toca: es el que ya estaba aprobado.
 *
 * LA ORILLA ES LA DE LA CASA: 2px del color del área, el MISMO ancho en todos
 * los estados. Lo que distingue a la abierta es el glow de su color y el icono
 * encendido, nunca un borde más gordo.
 */
.servicios { display: grid; gap: var(--e2); margin-top: var(--e5); }

.bahia-cab { margin: 0; }

.bahia-boton {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; padding: var(--e3);
  font: inherit; text-align: left; cursor: pointer;
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-tarjeta);
  background: var(--superficie); color: var(--texto);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.bahia-boton:hover { transform: translateY(-3px); }

.bahia-icono {
  width: 3.25rem; height: auto; flex: none;
  transition: opacity var(--transicion-rapida), filter var(--transicion-rapida);
}
/* LA CERRADA SE APAGA, LA ABIERTA SE ENCIENDE. Con las seis igual de vivas no
   se distingue cuál está abierta, y esa es la única pregunta que la fila de
   bahías tiene que contestar de un vistazo. Se hace con el icono —opacidad y
   glow— y NO con el borde: el borde mide 2px en las seis, siempre. */
.bahia-boton[aria-expanded="false"] .bahia-icono { opacity: .55; }
.bahia-boton:hover .bahia-icono { opacity: 1; }
.bahia-boton[aria-expanded="true"] .bahia-icono {
  filter: drop-shadow(0 0 .7rem color-mix(in srgb, var(--color-area) 65%, transparent));
}
.bahia-boton[aria-expanded="false"] .bahia-nombre { color: var(--texto-suave); }

.bahia-nombre { flex: 1; font-family: var(--fuente-titulo); font-size: var(--t-h3); font-weight: 700; }
/* El rótulo del canto solo existe en el lomo de escritorio. */
.bahia-lomo { display: none; }
.bahia-cuenta {
  flex: none; font-family: var(--fuente-titulo); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--color-area-texto, var(--acento));
}
.bahia-cuenta::after {
  content: "▾"; display: inline-block; margin-left: var(--e2);
  transition: transform var(--transicion-rapida);
}
.bahia-boton[aria-expanded="false"] .bahia-cuenta::after { transform: rotate(-90deg); }

.bahia-cuerpo {
  padding: var(--e4);
  border: 2px solid var(--color-area-texto, var(--acento-fondo));
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}
.bahia-cuerpo[hidden] { display: none; }
.bahia-orbita {
  margin: 0 0 var(--e2); font-family: var(--fuente-titulo);
  font-size: var(--t-pie); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-area-texto, var(--acento));
}
.bahia-entrada { color: var(--texto-suave); margin: 0 0 var(--e3); max-width: 34rem; }

/* Los tres servicios con los que se entra al área. Numerados y con filete: es
   una lista corta y elegida, no un índice — por eso se puede permitir el
   número, que en una lista de doce sería ruido. */
.bahia-servicios { list-style: none; padding: 0; margin: 0 0 var(--e4); }
.bahia-servicios li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding: var(--e2) 0; border-bottom: 1px solid var(--borde);
  font-family: var(--fuente-titulo); font-size: var(--t-h3);
}
.bahia-servicios li:first-child { border-top: 1px solid var(--borde); }
.bahia-servicios b {
  font-size: var(--t-pie); color: var(--color-area-texto, var(--acento));
  font-variant-numeric: tabular-nums;
}
.bahia-mas { border-bottom: 0 !important; }
.bahia-mas a {
  font-family: var(--fuente-cuerpo); font-size: var(--t-pie); font-weight: 600;
  color: var(--color-area-texto, var(--acento)); text-decoration: none;
}
.bahia-mas a:hover { text-decoration: underline; }

.bahia-pie { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }

/* El realce, por tema y por la misma razón escrita en `area.css`: en CLARO el
   volumen lo da una sombra de la tinta del manual —el color puro sobre papel
   ensucia—; en OSCURO una sombra no se ve y lo da el glow del color del área.
   Va dos veces porque una media query no cabe en una lista de selectores. */
.bahia-boton, .bahia-cuerpo {
  box-shadow: 0 1px 2px rgba(28, 30, 38, .07), 0 12px 28px -8px rgba(28, 30, 38, .20);
}
:root[data-tema="oscuro"] .bahia-boton,
:root[data-tema="oscuro"] .bahia-cuerpo {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 35%, transparent),
              0 6px 26px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 40%, transparent);
}
:root[data-tema="oscuro"] .bahia-boton[aria-expanded="true"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 55%, transparent),
              0 0 1.6rem color-mix(in srgb, var(--color-area, var(--acento-fondo)) 55%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .bahia-boton,
  :root:not([data-tema="claro"]) .bahia-cuerpo {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 35%, transparent),
                0 6px 26px -6px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 40%, transparent);
  }
  :root:not([data-tema="claro"]) .bahia-boton[aria-expanded="true"] {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-area, var(--acento-fondo)) 55%, transparent),
                0 0 1.6rem color-mix(in srgb, var(--color-area, var(--acento-fondo)) 55%, transparent);
  }
}

/* ── El hangar horizontal, solo en escritorio ────────────────────────────
 *
 * EL ALTO SE ATA A LA VENTANA y no a un número elegido a ojo: es lo único que
 * garantiza que la sección quepa en el monitor de quien la mire, y no solo en
 * el de quien la hizo. `min()` con un tope en `rem` evita que en una pantalla
 * muy alta la bahía se estire hasta parecer un cartel.
 *
 * `.bahia` deja de ser `display: contents`: aquí cada bahía ES una columna y
 * necesita su propia caja para llevar el ancho.
 */
@media (min-width: 62rem) {
  /* FLEX Y NO REJA, y la diferencia no es de gusto. Con `grid-auto-columns:
     max-content` cada columna pide su ancho natural, así que la bahía abierta
     reclamaba los 1399px de su contenido y el hangar se salía de la pantalla
     por la derecha: medido. Con flex, los lomos toman su ancho fijo y la
     abierta se queda EXACTAMENTE con lo que sobra. */
  .servicios {
    display: flex;
    gap: var(--e2);
    align-items: stretch;
    height: min(58vh, 32rem);
    min-height: 24rem;
  }
  .bahia { display: flex; min-width: 0; }
  .bahia-cab { display: flex; min-width: 0; }

  /* LA BAHÍA CERRADA · un lomo. Icono arriba, nombre girado, conteo al pie. */
  .bahia:not(.es-abierta) { flex: 0 0 5.25rem; }
  .bahia:not(.es-abierta) .bahia-cab { width: 100%; }
  .bahia:not(.es-abierta) .bahia-boton {
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: var(--e2); padding: var(--e3) var(--e1);
    width: 100%; height: 100%;
  }
  .bahia:not(.es-abierta) .bahia-icono { width: 2.6rem; }
  .bahia:not(.es-abierta) .bahia-nombre { display: none; }
  .bahia:not(.es-abierta) .bahia-lomo {
    display: block; margin-top: auto;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-pie);
    color: var(--texto-suave); letter-spacing: .02em;
  }
  .bahia:not(.es-abierta) .bahia-cuenta { margin-top: var(--e2); font-size: var(--t-pie); }
  .bahia:not(.es-abierta) .bahia-cuenta::after { content: none; }
  .bahia:not(.es-abierta) .bahia-cuerpo { display: none; }

  /* LA BAHÍA ABIERTA · ocupa lo que queda y se reparte en dos columnas: a la
     izquierda quién es y qué ofrece; a la derecha, con qué se entra.
     `display: contents` en el cuerpo es lo que permite que la CABECERA y los
     hijos del cuerpo caigan en la MISMA reja sin tocar el marcado — sin eso,
     el icono y el título quedarían en una caja y la lista en otra, y no habría
     forma de alinearlos. La caja (orilla, fondo, relleno) sube a `.bahia`. */
  .bahia.es-abierta {
    flex: 1 1 auto; min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--e6); row-gap: var(--e2);
    padding: var(--e5);
    border: 2px solid var(--color-area-texto, var(--acento-fondo));
    border-radius: var(--radio-tarjeta);
    /* SIN MARCA DE AGUA DEL ICONO, y queda dicho para que no se reintente: se
       probó poner `area_*.svg` de fondo, gigante y apagado. No se puede — esos
       archivos traen su PROPIO fondo oscuro opaco, así que en vez de una marca
       de agua sale un cuadrado negro encima de la lista. Haría falta una
       versión sin fondo, y redibujar una pieza del manual para decorar no
       vale la pena. El color del área ya lo pone el degradado. */
    background:
      radial-gradient(30rem 20rem at 88% 10%, color-mix(in srgb, var(--color-area) 12%, transparent), transparent 70%),
      var(--superficie);
  }
  .bahia.es-abierta .bahia-cuerpo { display: contents; }

  /* La cabecera abierta pierde su caja: la lleva la bahía. */
  .bahia.es-abierta .bahia-cab { grid-column: 1; grid-row: 1; }
  /* SE ANULA TAMBIÉN CON EL ATRIBUTO, y hace falta: la regla del tema oscuro es
     `:root[data-tema="oscuro"] .bahia-boton[aria-expanded="true"]` y pesa más
     que tres clases, así que le seguía dibujando su orilla y su glow al título.
     Aquí la caja la lleva la bahía; la cabecera solo pone icono y nombre. */
  .bahia.es-abierta .bahia-boton,
  .bahia.es-abierta .bahia-boton[aria-expanded="true"] {
    border: 0; background: none; box-shadow: none; padding: 0;
    gap: var(--e3); align-items: center;
  }
  .bahia.es-abierta .bahia-boton:hover { transform: none; }
  .bahia.es-abierta .bahia-icono {
    width: clamp(3rem, 7vh, 4.5rem);
    padding: .3rem; border: 2px solid var(--color-area-texto);
    border-radius: var(--radio-caja); background: var(--superficie-alta);
  }
  .bahia.es-abierta .bahia-nombre { font-size: clamp(1.5rem, 3.4vh, 2.4rem); line-height: 1.05; }
  /* QUE SE VEA QUE LLEVA A ALGÚN SITIO. El clic en el nombre de una bahía ya
     abierta entra a su página desde que se añadió el guion, pero nada lo decía:
     el director lo probó y penso que no funcionaba. Un subrayado al pasar el
     cursor es la afordancia de toda la vida. */
  .bahia.es-abierta .bahia-boton:hover .bahia-nombre,
  .bahia.es-abierta .bahia-boton:focus-visible .bahia-nombre {
    text-decoration: underline;
    text-decoration-color: var(--color-area-texto);
    text-underline-offset: .18em;
  }
  .bahia.es-abierta .bahia-lomo,
  .bahia.es-abierta .bahia-cuenta { display: none; }

  .bahia.es-abierta .bahia-orbita { grid-column: 1; grid-row: 2; margin: 0; }
  .bahia.es-abierta .bahia-entrada {
    grid-column: 1; grid-row: 3; align-self: start; margin: var(--e2) 0 0;
    font-size: var(--t-pie);
  }
  .bahia.es-abierta .bahia-pie { grid-column: 1; grid-row: 4; align-self: end; }
  .bahia.es-abierta .bahia-servicios {
    grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: start;
  }
  .bahia.es-abierta .bahia-servicios li { font-size: clamp(1rem, 2.4vh, 1.35rem); }
}


/* ═══ El proceso · el CÓMO, con los pasos reales ══════════════════════════
 * Cinco pasos numerados. Aquí la numeración SÍ significa algo —es una
 * secuencia real, y el orden es información que el lector necesita—, que es la
 * única condición bajo la que numerar no es decorar.
 */

.proceso {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: paso;
}
.paso {
  position: relative;
  padding: var(--e4);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: inset 0 1px 0 var(--filo);
}
/* El número en grande y apagado: ordena sin robar la lectura del titular. */
.paso-n {
  display: block;
  font-size: var(--t-h1); line-height: 1; font-weight: 700;
  color: var(--borde);
  margin-bottom: var(--e2);
}
.paso h3 { font-family: var(--fuente-titulo); font-size: var(--t-h3); margin-bottom: var(--e1); }
.paso p { color: var(--texto-suave); font-size: var(--t-pie); margin: 0; }


.vertical-item {
  padding: var(--e4);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  border: 1px solid var(--borde);
  /* El filo superior en el verde de marca y no en un color de área: esto no es
     un área del mapa, es un público. */
  box-shadow: inset 0 2px 0 var(--acento-fondo), var(--sombra-1);
}
.vertical dt {
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  line-height: var(--renglon-titular);
  margin-bottom: var(--e1);
}
/* SIN PRECIOS, por decisión del director (2026-08-02): esta sección es una
   PRESENTACIÓN, no una lista de tarifas. Se probó con el «desde» de cada
   servicio y se retiró — y es además lo coherente, porque no había ni un
   precio en ninguna otra página del sitio. Quien quiera el número escribe, y
   ahí es donde empieza la conversación. */

/* La foto abre la sección y es el argumento: enseñar un plato nuestro dice más
   que describir el servicio que lo fotografía. Va con su proporción real
   (1600×1067) y sin recorte: es exactamente lo que se arregló en las fichas. */
.vertical-foto { margin: var(--e5) 0 0; }
.vertical-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio-caja);
}
.vertical-foto figcaption {
  margin-top: var(--e2);
  font-size: var(--t-micro);
  color: var(--texto-suave);
}
.vertical dd {
  margin: 0;
  font-size: var(--t-pie);
  line-height: var(--renglon-medio);
  color: var(--texto-suave);
}
.vertical-pie {
  margin-top: var(--e4);
  font-size: var(--t-pie);
  color: var(--texto-suave);
  max-width: 60ch;
}

/* EL IMÁN SUAVE DE ESCRITORIO VIVIÓ AQUÍ (2026-08-15 → 2026-08-19):
   `proximity` sobre html con dos altos (la leyenda y el hangar) para ventanas
   altas. Murió al cruzar la baraja: el sistema (baraja.css) es dueño del imán
   en TODAS las pantallas, y dos imanes sobre html son la avería documentada
   de los 138 px — el navegador suma `scroll-padding-top` y `scroll-margin` y
   la tarjeta asienta bajo la cabecera. Los `alto-*` siguen en el marcado como
   anclas; la parada de cada sección la pone su tarjeta. */

/* ── El nombre del área abre su página ───────────────────────────────────
 *
 * No hay enlace nuevo: lo hace el GUION. En la bahía abierta el nombre se
 * marcaba al pasar el cursor —es parte del botón que la abre— y no llevaba a
 * ningún sitio, porque la bahía ya estaba abierta. Prometer un enlace y no
 * serlo es peor que no marcarlo.
 *
 * Ahora un clic en la cabecera de una bahía YA ABIERTA entra a su página. Un
 * enlace de verdad dentro del `<button>` sería marcado inválido —el navegador
 * lo saca de su sitio y el teclado se pierde—, así que el destino viaja en
 * `data-area` y lo lee el guion.
 */

/* El botón del color del área, el mismo que usan las páginas de área: dentro
   de una bahía, un botón verde de marca se lee como una pieza de otro sitio. */
.bahia-pie .boton-area {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 44px; padding: .6rem 1.3rem;
  font-family: var(--fuente-cuerpo); font-weight: 700; font-size: var(--t-pie);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--color-area-texto, var(--acento));
  border-radius: var(--radio-pastilla);
  background: transparent; color: var(--color-area-texto, var(--acento));
  transition: transform var(--transicion-rapida), background var(--transicion-rapida), color var(--transicion-rapida);
}
.bahia-pie .boton-area:hover {
  transform: translateY(-2px);
  background: var(--color-area-texto, var(--acento)); color: var(--superficie);
}


/* ═══ La portada tipo app (M5) · SOLO celular ═════════════════════════════
 * Medido 2026-08-13: 17 747 px a 390 — 21 pantallas — con la tira en el px
 * 1 057 y las cifras en el 5 068. La receta, tres veces: lo alto pasa a riel
 * con imán (el gesto barato del pulgar) y lo largo se pliega en el acordeón
 * nativo de Preguntas. No se borra una palabra: se recoge. Nada vive fuera
 * del corte de 900. */
@media (max-width: 900px) {
  /* ── El héroe, ya como carta de la baraja (2026-08-17) ──
     El alto mínimo, el relleno y el reparto del aire los pone ahora el
     sistema (`.baraja` + `.reparte`): aquí solo queda lo suyo.
     El antetítulo original se calla en el celular, como en toda tarjeta: su
     texto ya está en el pin. No lo cubría la regla del sistema porque aquí no
     vive dentro de un `<header>`, sino en la primera columna del héroe. */
  /* (V2: la regla cruzó a la base — el pin manda en todas las pantallas.) */
  .heroe-fila { gap: var(--e2); }
  /* Los dos accesos, en fila: apilados costaban 129 px de los 615 que tiene
     la tarjeta, y eran justo los que le faltaban al héroe para caber. */
  .heroe .acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .heroe .acciones .boton { width: 100%; min-height: 48px; padding-inline: 10px;
    font-size: var(--t-pie); justify-content: center; text-align: center; }
  .heroe .antetitulo { margin-bottom: var(--e1); }
  .tesis { margin-bottom: var(--e2); }
  .heroe .bajada { margin-bottom: 0; }
  .heroe .acciones { margin-top: var(--e2); gap: var(--e1); }
  /* La nave va ARRIBA del texto en la carta —primero la marca, luego lo que
     dice— y a un 60 % del ancho, el tamaño que aprobó el director en el previo.
     La aurora sube con ella. EL SELLO DE PRUEBA (C2) DEJA EL HÉROE (2026-08-17):
     con la nave a este tamaño la carta daba 618/624 px a 440/402 (615 útiles);
     conservarlo obligaba a bajar la nave al 52 %, y la nave es el punto de
     esta carta. Sus cuatro cifras viven en 03. Medido sin él: 572/575/569. */
  .heroe-arte { order: -1; width: min(60%, 236px); margin: 0 auto; }
  .heroe::before { background: radial-gradient(62% 40% at 50% 24%, color-mix(in srgb, var(--verde) 30%, transparent), transparent 72%); }

  /* ── El manifiesto, plegado: cinco anclas a la vista, la glosa al toque ── */
  .manifiesto { padding-block: var(--e4) var(--e5); }
  /* (V2: los mandos del acordeón cruzaron a la base — arriba, junto a la
     nota del candado muerto.) */
  .manifiesto .remate { margin-top: var(--e4); }
  .manifiesto-arte { margin-top: var(--e4); width: min(60%, 11rem); }

  /* (V2: la pista de principios y proceso cruzó a la base.) */


  /* ── Gastronomía: la foto prueba sin ocupar, y las cuatro piezas al riel ── */
  .vertical-foto { margin-top: var(--e3); }
  .vertical-foto img { max-height: 32svh; object-fit: cover; }
  /* (V2: la pista de la vertical cruzó a la base.) */

  /* ── El trabajo: doce casos en un riel de DOS filas (antes 4 570 px) ── */
  /* (V2: la pista de casos cruzó a la base.) */
  .caso .datos { padding: var(--e2); }
  .caso h3 { font-size: var(--t-base); }

  /* ── Y los aires generales del celular: mismos elementos, menos vacío ── */
  .seccion { padding-block: var(--e5); }
  .seccion > header { margin-bottom: var(--e4); }
  .manifiesto .remate { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); }
  .cierre { padding-block: var(--e5); }
  .cierre .cohete { width: min(46%, 8.5rem); }
  /* El hangar es GENERADO: su marcado no se toca; sus aires sí son de aquí. */
  .bahia-cuerpo { padding: var(--e3); }
  .bahia-servicios li { padding: var(--e1) 0; }

  /* (V2: los iconos M8 cruzaron a la base — el manual entero, en todos los
     anchos.) */
}

/* ═══ V2 · LO QUE CRUZÓ DEL CELULAR (2026-08-19) ══════════════════════════
 * Las pistas y los iconos nacieron en la portada tipo app (M5/M8) y vivían
 * bajo el corte de 900. La orden del director sacó a todos los anchos los
 * iconos del manual —que siguen cruzados, acompañan igual en un monitor— y
 * también las PISTAS horizontales.
 *
 * LAS PISTAS VUELVEN BAJO EL CORTE (2026-08-23). Una pista horizontal con
 * tarjetas al 76 % es la respuesta a una pantalla estrecha y a un dedo que
 * arrastra. En un monitor de 1 440 esas mismas cinco tarjetas caben de una
 * vez y la reja que ya existe arriba —`repeat(auto-fit, minmax(15rem, 1fr))`
 * en principios y proceso, `minmax(17rem, 1fr)` en contactos— es la lectura
 * correcta. Con el riel disuelto (baraja.css) y este bloque acotado, la reja
 * de arriba vuelve a mandar sola: no hay que declararla dos veces.
 * Los porcentajes de tarjeta (76 %/66 %) solo mandan cuando la pista va
 * suelta: dentro de un riel, el sistema impone su 100 %. */
@media (max-width: 900px) {
.principios, .proceso {
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--e2);
  /* A sangre, como la tira. */
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-inline: var(--margen-lateral);
}
.principio, .paso { scroll-snap-align: start; }

.vertical {
  margin-top: var(--e3);
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--e2);
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-inline: var(--margen-lateral);
}
.vertical-item { scroll-snap-align: start; }

.contactos {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 66%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--e2);
  margin-inline: calc(var(--margen-lateral) * -1);
  padding-inline: var(--margen-lateral);
}
.caso { scroll-snap-align: start; }
}
/* (cierra el bloque de pistas del teléfono) */

/* Los iconos de contorno (M8) · la biblioteca del manual. Rol de tinta →
   clase, y el color lo pone la hoja: la base sigue al tema (currentColor) y
   el acento usa el verde que ya pasa AA en los dos. */
.icono-linea {
  display: block; width: 28px; height: 28px;
  margin-bottom: var(--e1);
  color: var(--texto-suave);
}
.icono-linea .tinta-base { fill: currentColor; }
.icono-linea .tinta-acento { fill: var(--acento); }
.icono-linea .tinta-fondo { fill: var(--superficie); }
.paso .icono-linea { position: absolute; top: var(--e4); right: var(--e4); margin: 0; }
.paso { position: relative; }

/* EL IMÁN DEL CELULAR YA NO SE DECLARA AQUÍ. Vivió en este sitio desde M5
   (`html { scroll-snap-type: y proximity; scroll-padding-top: … }` con dos
   paradas sueltas) y, al llegar la baraja con su propio imán en baraja.css,
   este bloque le seguía SUMANDO un scroll-padding de 72 px al margen de cada
   tarjeta: asentaban 77 px por debajo de la cabecera — el «no se acopla» del
   director. El sistema es dueño del imán; una hoja de página no vuelve a
   tocar `html`. */


/* ── V1 · Lo de la baraja que es SOLO de la portada ────────────────────
   El sistema vive en `/marca/baraja.css`; aquí queda lo que solo vale en
   esta página: quién no se monta sobre quién, qué rieles sangran contra la
   tarjeta y cómo se aprieta el hangar. */
@media (max-width: 900px) {
  /* La primera tarjeta no tiene a quién montarse: respeta al héroe. */
  #nosotros.baraja { margin-top: 0; }


  .baraja.cierre { padding-block: 0 var(--e5); }
  .baraja.cierre .cohete { margin-top: var(--e4); }

  /* Los rieles a sangre ahora sangran contra la TARJETA, no contra la
     ventana: mismo gesto, nueva referencia. `.principios`, `.proceso` y
     `.contactos` ya no están en la lista: desde que tienen flechas no sangran
     — el director no quiso ver la siguiente tarjeta cortada por el filo —, y
     esta regla, cargada después que baraja.css y con su mismo peso, les
     habría devuelto la sangre por encima del riel. */
  .baraja .vertical {
    margin-inline: calc((var(--margen-lateral) - 6px) * -1);
    padding-inline: calc(var(--margen-lateral) - 6px);
  }

  /* ── V1b · Servicios, dueña de UNA pantalla ──
     Dos movimientos la metieron en los 783 px útiles: las cifras se fueron a
     «En qué creemos» y el encabezado se dijo más corto. Con eso el titular
     conserva su cuerpo de marca —no se encoge— y solo quedan estos dos
     apretones de aire, que no tocan una sola letra. Solo bajo los 900. */
  #servicios > header { margin-bottom: var(--e1); }
  .bahia:not(.es-abierta) .bahia-boton { padding: 10px var(--e2); }
  .hangar { gap: 6px; }
  /* El icono mandaba sobre el alto del lomo con 52 px; a 44 lo manda el
     rótulo de dos líneas y el lomo pasa de 80 a 73. Seis veces siete son los
     52 px que le faltaban a BTL para no quedar debajo de la barra. El blanco
     táctil no sufre: se toca el lomo entero, no el icono. */
  .bahia:not(.es-abierta) .bahia-icono { width: 44px; height: 44px; }

  /* ── V2 · El hangar a dos tiempos ──
     El acomodo aterriza el lomo bajo el pin de la tarjeta (barra 60 + pin 44
     + un respiro), y el cuerpo abierto NUNCA excede la pantalla: si su
     contenido es más alto, desfila dentro — es la excepción de scroll
     interno que la arquitectura permite SOLO aquí (§P3). */
  .bahia { scroll-margin-top: calc(var(--alto-barra) + 52px); }
  .bahia.es-abierta .bahia-cuerpo {
    max-height: calc(100svh - var(--alto-barra) - 176px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── El cierre: el titular ES el enlace ──────────────────────────────────
 *
 * Antes el cierre llevaba tres botones y una línea explicando cómo
 * escribirnos: cuatro cosas donde hace falta una. Ahora «¡Conversemos!» es el
 * gesto, y por eso tiene que VERSE que se puede pulsar — un titular que no
 * cambia al acercarse no invita a nada.
 */
.cierre-enlace {
  color: inherit; text-decoration: none;
  display: inline-block;
  transition: transform var(--transicion-rapida), color var(--transicion-rapida);
}
.cierre-enlace:hover, .cierre-enlace:focus-visible {
  color: var(--acento);
  transform: translateY(-2px);
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .12em;
}

/* ── La pantalla REAL de un iPhone no mide 844 (2026-08-16) ───────────────
   Con las barras de Safari quedan ~650–740 pt útiles, y Servicios —que cabía
   exacta en el emulador— quedaba a la mitad en el teléfono del director. En
   pantallas cortas el hangar se aprieta un escalón más. No se quita ni una
   palabra: solo aire e icono. */
@media (max-width: 900px) and (max-height: 800px) {
  #servicios .titular-grande { font-size: clamp(1.3rem, 1rem + 1.6vw, 1.6rem); }
  #servicios > header { margin-bottom: 8px; }
  .bahia:not(.es-abierta) .bahia-icono { width: 40px; height: 40px; }
  .bahia:not(.es-abierta) .bahia-boton { padding: 10px var(--e2); }
  .hangar { gap: 8px; }
}

/* ── Recalibración a la pantalla real · lo de la PORTADA (2026-08-16) ────
   Textos aprobados uno a uno por el director. Solo móvil. */
@media (max-width: 900px) {
  /* Remate de tarjeta: botones a lo ancho, empujados al fondo cuando sobra
     sitio — el aire queda ENTRE el texto y la acción, no debajo de todo. */
  .baraja.seccion { display: flex; flex-direction: column; }
  .baraja.seccion > .baraja-pin { flex: none; }
  .remate-tarjeta {
    display: grid; gap: 10px; margin: auto 0 0; padding-top: var(--e3);
  }
  /* Con DOS botones van lado a lado: apilados a lo ancho comían 142 px y la
     tarjeta de tarjetas desfilaba justo por eso. */
  .remate-tarjeta:has(.boton + .boton) { grid-template-columns: 1fr 1fr; }
  .remate-tarjeta:has(.boton + .boton) .boton { padding-inline: 10px; font-size: var(--t-pie); }
  .remate-tarjeta .boton {
    width: 100%; min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* 06 · la captura del teléfono: alta y centrada, con altura de pantalla. */
  /* 07 · los tres puntos: grandes, con el acento de la casa. */
  .tres-puntos { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: 10px; }
  .tres-puntos li {
    font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-h3);
    padding-left: 22px; position: relative;
  }
  .tres-puntos li::before {
    content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px;
    background: var(--acento-fondo); transform: rotate(45deg);
  }
  /* 11 · el cierre: el cohete crece hasta llenar y el contacto va debajo. */
  .baraja.cierre { display: flex; flex-direction: column; justify-content: center; }
  .baraja.cierre .cohete { width: min(64vw, 260px); margin: auto auto var(--e3); }
  .contacto-cierre {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px;
    margin: var(--e2) 0 auto; font-size: var(--t-base);
  }
  .contacto-cierre a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borde); }
  .contacto-cierre span { color: var(--texto-suave); }
  /* 05 · la foto de Cabo entra entera y ocupa lo que sobra. */
  /* La foto de Cabo, medida a la pantalla también: 3:2 a todo el ancho son
     260 px, y con titular + entradilla + botón ya no cabe. A 24svh cabe. */
  #gastronomia .vertical-pie { display: none; }
  #gastronomia .vertical-foto { margin-top: var(--e3); }
  #gastronomia .vertical-foto img { height: 24svh; width: 100%; object-fit: cover; }
}

@media (max-width: 900px) {
  /* 03 · el riel de principios con cuerpo 16 crecía 70 px de más: la tarjeta
     del principio pierde un escalón de padding y el pie de las cifras vuelve
     a ser pie. Sigue en 16 el párrafo, que es lo que importa. */
  .riel .principio { padding: var(--e3); }
  .principio h3 { margin-bottom: 4px; }
}

/* La captura del teléfono en 06 también existe en escritorio: sin tope se
   pintaba a sus 900 px naturales y la sección crecía 900. Aquí va a la
   derecha del texto, a media altura de tarjeta. */
/* ═══ COMPOSICIÓN DE ESCRITORIO (H6 de la auditoría, 2026-08-23) ══════════
 * Tres tarjetas de la portada dejaban medio lienzo muerto a la derecha porque
 * su contenido es una sola columna de texto. No se rediseña nada: se reparte
 * lo que ya hay en dos columnas, que es lo que la reja del héroe y la
 * plantilla de /servicios llevan haciendo desde siempre. */
@media (min-width: 900.02px) {
  /* 02 · El manifiesto cierra con el remate y el astronauta uno al lado del
     otro; apilados dejaban el remate contra el margen y la ilustración sola
     en medio de 1 354 px. */
  .manifiesto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e6); }
  .par-manifiesto { grid-column: 1 / -1; }
  .manifiesto .remate { grid-column: 1; margin-top: var(--e5); }
  .manifiesto-arte { grid-column: 2; margin: var(--e5) 0 0; width: min(100%, 14rem); }
  /* Y el par no se pliega con ratón: en escritorio es una reja de dos
     columnas que solo existe abierta, así que pierde su marcador y su toque
     —si se pudiera cerrar, quedaría sin manera de volver a abrirlo—. */
  .par-manifiesto > .ancla-sum { cursor: default; pointer-events: none; }
  .par-manifiesto > .ancla-sum::after { display: none; }

  /* 07 · Clientes: el texto a la izquierda y los tres puntos de pie como
     columna a la derecha; en fila bajo el texto eran una línea suelta. */
  #clientes {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--e7);
    grid-template-rows: auto 1fr;
  }
  #clientes > .baraja-pin { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  #clientes > .vista-col { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
  #clientes > .tres-puntos {
    grid-column: 2; grid-row: 2; align-self: center;
    display: grid; gap: var(--e3);
    margin: 0; padding-inline-start: var(--e4);
    border-inline-start: 2px solid var(--acento-fondo);
    font-size: var(--t-lede);
  }

  /* La reja de 06 empieza DEBAJO del pin. Sin la fila propia, el rótulo
     entraba como una celda más y —con `align-items: center` y el alto de la
     vista repartiéndose— aparecía a 317 px del borde: el director lo vio. */
  #tarjetas-digitales {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e7);
    grid-template-rows: auto 1fr;
  }
  #tarjetas-digitales > .baraja-pin { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  #tarjetas-digitales > .vista-col { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
  #tarjetas-digitales > .tarjeta-demo { grid-column: 2; grid-row: 2; align-self: center; margin: 0; width: 340px; }
  .remate-tarjeta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
  .tres-puntos { display: flex; gap: var(--e4); list-style: none; padding: 0; margin: 0 0 var(--e4); font-weight: 600; }
  .contacto-cierre { display: flex; justify-content: center; gap: 12px; margin-top: var(--e3); }
  .contacto-cierre a { color: inherit; }
}

@media (max-width: 900px) {
  /* 08 · con el titular nuevo el header crece dos líneas: el riel de pasos
     pierde un escalón de aire para que la tarjeta cierre en su pantalla. */
  #proceso > header, #tarjetas-digitales > header { margin-bottom: 8px; }
  #proceso .riel .paso, #proceso .proceso .paso { padding: var(--e3); }
  #proceso .paso p { line-height: 1.45; }
}

/* ── 02 · El manifiesto, con titular delante (2026-08-16) ────────────────
   Con «Un equipo hecho de proyectos» y su entradilla, el manifiesto ya no
   tiene que abrir la tarjeta: es lo que se despliega DEBAJO, y en el
   celular va como acordeón compacto — cada par es un renglón, el mismo
   lenguaje que las preguntas. El remate y el astronauta se guardan para
   escritorio, donde hay sitio: en 402 px eran 350 px de vacío decorado. */
@media (max-width: 900px) {
  #nosotros .manifiesto { display: grid; gap: 8px; margin-top: 0; }
  #nosotros > header { margin-bottom: 8px; }
  #nosotros .par-manifiesto { margin-bottom: 0; gap: 0; }
  #nosotros .par-manifiesto > .ancla-sum { min-height: 48px; display: flex; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--filo); }
  #nosotros .par-manifiesto .glosa { padding: 8px 0 14px; }
  #nosotros .manifiesto .remate, #nosotros .manifiesto-arte { display: none; }
}

/* ── La tarjeta digital dibujada (06) · la del artefacto aprobado ────────── */
.tarjeta-demo {
  position: relative; width: min(100%, 300px); margin: var(--e3) auto 0;
  background: #fff; color: #1C1E26; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); font-family: var(--fuente-cuerpo);
}
.tarjeta-demo-banda { height: 86px; background: linear-gradient(135deg, #4DB6AC 0%, #2E7D74 55%, #1C1E26 100%); }
.tarjeta-demo-avatar {
  position: absolute; top: 52px; left: 20px; width: 62px; height: 62px; border-radius: 50%;
  background: #1C1E26; color: #fff; border: 4px solid #fff;
  display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: 26px;
}
.tarjeta-demo-cuerpo { padding: 40px 20px 20px; display: grid; gap: 4px; }
.tarjeta-demo-cuerpo b { font-size: 20px; line-height: 1.2; }
.tarjeta-demo-cuerpo span { color: #4A5568; font-size: 14px; }
.tarjeta-demo-cuerpo small { color: #718096; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tarjeta-demo-cta {
  margin-top: 12px; padding: 12px; border-radius: 10px; text-align: center;
  background: #4DB6AC; color: #0f2b28; font-weight: 700; font-size: 14px;
}
.tarjeta-demo-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.tarjeta-demo-fila span {
  padding: 10px 6px; border: 1px solid #E2E8F0; border-radius: 10px; text-align: center;
  font-size: 13px; font-weight: 600; color: #1C1E26;
}
@media (max-width: 900px) {
  /* Medida a la pantalla, como la captura que sustituye. */
  .tarjeta-demo { width: min(64%, 240px); margin-top: var(--e2); }
  .tarjeta-demo-banda { height: 11svh; max-height: 72px; }
  .tarjeta-demo-avatar { top: 42px; left: 16px; width: 52px; height: 52px; font-size: 22px; border-width: 3px; }
  .tarjeta-demo-cuerpo { padding: 32px 16px 16px; gap: 2px; }
  .tarjeta-demo-cuerpo b { font-size: 17px; }
  .tarjeta-demo-cta { margin-top: 8px; padding: 9px; font-size: 13px; }
  .tarjeta-demo-fila span { padding: 7px 4px; font-size: 11.5px; }
  #tarjetas-digitales > header { margin-bottom: 4px; }
  #tarjetas-digitales > header .entradilla { line-height: 1.45; }
}

/* ═══ RECALIBRACIÓN II · la zona de la barra (2026-08-16) ═════════════════
 *
 * La tarjeta mide la pantalla menos la cabecera, pero sus últimos 62 px
 * quedan bajo la barra de secciones y baraja.css ahora los reserva como
 * relleno: el contenido tiene 615 px, no 683. El director fijó la medida con
 * el dedo —«el tamaño de 08 es el que mejor se centra»— y pidió que la
 * información se reparta en tarjetas como ahí. Aquí, sección por sección, lo
 * que sobraba y de dónde se quitó, medido en Chrome a 402×744:
 *   02 · +81: el manifiesto perdía 56 de relleno propio y las anclas de
 *        22 px hacían tres líneas; a 20 px y renglón de 44 caben.
 *   03 · +99: las cifras iban en UNA columna (301 px); a dos son 150.
 *   04 · +21: el hangar aprieta el hueco entre lomos y el relleno del lomo.
 *   06 · +96: la tarjeta demo se recorta y el segundo botón pasa a enlace de
 *        texto — dos botones lado a lado no caben en una línea a 393 px.
 *   08 · +11: el aire bajo la entradilla.
 *   09 · +42: la foto del caso pasa de 4:3 a 3:2 y los aires del encabezado.
 *   10 · +323: diez preguntas plegadas no caben ni plegadas → riel (comun.css).
 *   11 · +24: el cohete mide lo que sobra, y sobra menos.
 */
@media (max-width: 900px) {
  /* 02 · el manifiesto plegado, sin relleno propio y con anclas de dos líneas */
  #nosotros .manifiesto { padding-block: 0; }
  #nosotros .par-manifiesto > .ancla-sum { min-height: 40px; padding: 6px 0; }
  #nosotros .ancla { font-size: 1.25rem; line-height: 1.15; }

  /* 03 · cuatro cifras, dos por fila */
  .cifras {
    grid-template-columns: 1fr 1fr;
    gap: var(--e2) var(--e3);
    margin-top: var(--e3);
    padding-top: var(--e3);
  }

  /* 04 · el hangar, más apretado; la bahía abierta descuenta la barra */
  .servicios { gap: 8px; }
  .bahia:not(.es-abierta) .bahia-boton { padding: 8px var(--e2); }
  .bahia.es-abierta .bahia-cuerpo { max-height: calc(100svh - var(--alto-barra) - 176px - 62px); }

  /* 06 · la tarjeta demo, compacta; el segundo botón, enlace */
  .tarjeta-demo { width: min(60%, 224px); }
  /* Con id porque `.baraja > header + *` (baraja.css) le pone 12 al margen. */
  #tarjetas-digitales .tarjeta-demo { margin-top: 8px; }
  .tarjeta-demo-banda { height: 48px; max-height: 48px; }
  .tarjeta-demo-avatar { top: 26px; left: 14px; width: 44px; height: 44px; font-size: 19px; border-width: 3px; }
  .tarjeta-demo-cuerpo { padding: 22px 14px 10px; gap: 1px; }
  .tarjeta-demo-cuerpo b { font-size: 16px; }
  .tarjeta-demo-cuerpo span { font-size: 13px; }
  .tarjeta-demo-cuerpo small { font-size: 10px; }
  .tarjeta-demo-cta { margin-top: 6px; padding: 8px; font-size: 12.5px; }
  .tarjeta-demo-fila span { padding: 6px 3px; font-size: 11px; }
  #tarjetas-digitales > header { margin-bottom: 0; }
  #tarjetas-digitales > header .entradilla { margin-bottom: 8px; }
  /* Dos botones lado a lado no caben en una línea a 393 px de pantalla —
     «Conocer las tarjetas» y «Ver la demostración» se partían a dos
     renglones y el remate crecía 22 px—. El primero es EL botón, ancho
     completo; el segundo es un enlace de texto con su flecha, centrado. */
  .remate-tarjeta:has(.boton + .boton) { grid-template-columns: 1fr; gap: 2px; padding-top: 8px; }
  .remate-tarjeta:has(.boton + .boton) .boton-principal { min-height: 46px; padding-block: 10px; font-size: var(--t-base); }
  .remate-tarjeta .boton + .boton-linea {
    border: 0; background: none; box-shadow: none;
    min-height: 0; padding: 4px; justify-self: center; font-size: var(--t-base);
  }

  /* 08 · el aire bajo la entradilla, y el paso más prieto en pantallas de
     375: ahí la tarjeta del riel mide 240 y el párrafo hace una línea más. */
  #proceso > header .entradilla { margin-bottom: 10px; }
  #proceso .paso-n { font-size: var(--t-h2); margin-bottom: var(--e1); }
  #proceso .riel .paso { padding: 14px var(--e3); }

  /* 09 · la ficha del caso, 3:2 y los aires del encabezado */
  .riel .caso img { aspect-ratio: 3 / 2; }
  #trabajo > header { margin-bottom: 8px; }
  #trabajo > header p { margin-bottom: 0; }

  /* 11 · el cohete mide lo que sobra */
  .baraja.cierre .cohete { width: min(56vw, 224px); }
}

/* ═══ RECALIBRACIÓN III · llenar hacia abajo (2026-08-16, tarde) ═════════
 * El director mira la portada en un iPhone de 430 de ancho: ahí el texto
 * quiebra menos, las tarjetas de los rieles miden menos y 03, 08 y 10 se
 * quedaban con un tercio de pantalla vacío bajo los puntos. Sus notas:
 * «la tarjeta puede tener más interlineados para ocupar más espacio» (08),
 * «ajustarse más al espacio para ocupar más espacio para abajo» (10), «los
 * indicadores pueden tener más espacio y las tarjetas ser un poco más
 * grandes hacia abajo» (03). Tres movimientos:
 *   · esas cuatro secciones (03, 08, 09, 10) son `.reparte`: el aire que
 *     sobra se reparte entre los bloques en vez de quedarse abajo;
 *   · las tarjetas del riel se estiran a la más alta (una fila pareja, los
 *     puntos justo debajo) y, con pantalla de sobra, respiran más: renglón
 *     1.7 y relleno mayor. Solo desde 420 px de ancho: a 402 y menos el mismo
 *     texto hace una línea más y 08 ya iba al límite (615 de 615 a 375);
 *   · las cifras de 03 se separan más entre sí.
 */
@media (max-width: 900px) {
  .riel .principios, .riel .proceso, .riel .contactos { align-items: stretch; }
  .cifras { gap: var(--e4) var(--e3); padding-top: var(--e4); }
  @media (min-width: 420px) {
    .riel .principio { padding: var(--e4); }
    .riel .principio p, #proceso .riel .paso p { line-height: 1.7; }
    #proceso .riel .paso { padding: var(--e4) var(--e3); }
    #proceso .paso h3 { margin-bottom: var(--e2); }
    .cifras { gap: var(--e5) var(--e3); }
  }
}

/* ═══ 11 · EL CIERRE, CON SUS NIVELES DE LECTURA (2026-08-23) ═════════════
 * El director: «la parte final no tiene niveles de lectura; las letras
 * Conversemos no se sabe que se pueden pulsar; abajo el correo y el teléfono
 * se ven sin diseño, no tienen intención». Las tres cosas eran ciertas: un
 * titular gigante que además era un enlace sin ninguna marca de serlo, y dos
 * direcciones sueltas separadas por un punto medio.
 *
 * Ahora hay cuatro escalones —rótulo, invitación, GESTO, cómo— y dos vías con
 * su etiqueta. El gesto se ve gesto SIN dejar de ser titular: filo verde bajo
 * la palabra y una flecha que avanza al señalar. Y el aire deja de estar
 * repartido a partes iguales: el titular pesa, lo demás acompaña.
 */
@media (min-width: 900.02px) {
  /* El pin arriba: el relleno del cierre lo empujaba 84 px. */
  .baraja.cierre { padding-top: 0; }
  .baraja.cierre > .baraja-pin { flex: none; margin: 0; }

  .cierre-invitacion {
    margin: 0 auto var(--e2);
    max-width: 42ch; text-align: center;
    font-size: var(--t-lede); color: var(--texto-suave);
  }
  /* EL GESTO. `inline-flex` para que el filo mida la palabra y no la línea, y
     la flecha viva dentro del mismo bloque pulsable. */
  .cierre-enlace {
    display: inline-flex; align-items: center; gap: .3em;
    padding-bottom: .06em;
    border-bottom: .07em solid var(--acento-fondo);
  }
  .cierre-enlace .cierre-flecha {
    width: .52em; height: .52em;
    background: currentColor;
    -webkit-mask: url("/marca/piezas/flecha-derecha.svg") no-repeat center / contain;
    mask: url("/marca/piezas/flecha-derecha.svg") no-repeat center / contain;
    transition: transform var(--transicion);
  }
  .cierre-enlace:hover .cierre-flecha,
  .cierre-enlace:focus-visible .cierre-flecha { transform: translateX(.22em); }
  /* Al señalar ya no hace falta subrayar: el filo ya está. Se llena. */
  .cierre-enlace:hover, .cierre-enlace:focus-visible {
    text-decoration: none;
    border-bottom-color: var(--acento);
  }
  .cierre-como {
    margin: var(--e2) auto 0; text-align: center;
    font-size: var(--t-pie); color: var(--texto-suave);
  }
  /* LAS DOS VÍAS. Rótulo encima y dato debajo: dejan de ser dos direcciones
     sueltas y pasan a ser dos maneras de llegar, cada una una pieza pulsable
     con su superficie. */
  .cierre-vias {
    list-style: none; margin: var(--e5) 0 0; padding: 0;
    display: flex; justify-content: center; gap: var(--e3);
  }
  .cierre-vias a {
    display: grid; gap: 2px;
    padding: var(--e2) var(--e4);
    min-width: 15rem;
    border: 1px solid var(--borde); border-radius: var(--radio-caja, 14px);
    background: color-mix(in srgb, var(--superficie) 70%, transparent);
    color: var(--texto); text-decoration: none;
    transition: border-color var(--transicion), background var(--transicion), transform var(--transicion-rapida);
  }
  .cierre-vias a:hover, .cierre-vias a:focus-visible {
    border-color: var(--acento-fondo);
    background: var(--superficie);
    transform: translateY(-2px);
  }
  .cierre-via-rotulo {
    font-family: var(--fuente-datos); font-size: var(--t-micro);
    letter-spacing: var(--letra-antetitulo); text-transform: uppercase;
    color: var(--texto-suave);
  }
  .cierre-via-dato { font-family: var(--fuente-titulo); font-size: var(--t-h3); }
  /* El cohete no se lleva la mitad de la vista: es el remate, no el tema. */
  .baraja.cierre .cohete { max-height: 30svh; width: auto; }
}

/* ═══ 06 · QUÉ HACE LA TARJETA ════════════════════════════════════════════
 * Cuatro hechos del sistema real, con la parte en negrita haciendo de titular
 * de cada uno: se leen en diagonal y se entienden enteros si se leen. */
.idc-que-hace {
  list-style: none; margin: var(--e4) 0 0; padding: 0;
  display: grid; gap: var(--e2); max-width: 46rem;
}
.idc-que-hace li {
  position: relative; padding-left: var(--e4);
  color: var(--texto-suave); line-height: 1.5;
}
.idc-que-hace li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--acento-fondo);
  rotate: 45deg;
}
.idc-que-hace b { color: var(--texto); font-weight: 700; }


/* ═══ EL BLOQUE DE COLUMNA DE UNA VISTA ═══════════════════════════════════
 * Lo que iba suelto en la reja y ahora viaja junto, para que la columna se
 * centre ENTERA frente a la pieza de al lado en vez de repartirse el alto
 * entre encabezado, hechos y botones.
 *
 * Y SOLO EXISTE EN ESCRITORIO. En el celular se disuelve con
 * `display: contents`: hay una docena de reglas escritas con hijo directo
 * —`.seccion > header`, `.baraja > header + *`, `.baraja.seccion > header`—
 * y meter una caja en medio las habría desactivado todas de golpe. Se vio en
 * la primera captura: el rótulo salía repetido bajo el pin y el encabezado
 * perdía su aire. Disuelto, el celular no se entera de que existe.
 */
.vista-col { display: contents; }
@media (min-width: 900.02px) {
  .vista-col { display: block; }
  /* Las tres reglas del encabezado que dependían de ser hijo directo de la
     sección, repuestas para el caso envuelto. Mismos valores: el envoltorio
     no debe cambiar cómo se ve nada, solo dónde vive. */
  .seccion > .vista-col > header { margin-bottom: var(--e5); }
  .seccion > .vista-col > header h2 { font-size: var(--t-h1); }
  .seccion > .vista-col > header p { color: var(--texto-suave); max-width: 52ch; margin-top: var(--e2); }
  .seccion > .vista-col > header .entradilla { font-size: var(--t-lede); max-width: 46ch; }
  .vista-col > :first-child { margin-top: 0; }
  .vista-col > :last-child { margin-bottom: 0; }
  .vista-col .remate-tarjeta { margin-top: var(--e5); }
}

/* ═══ LO NUEVO DEL ESCRITORIO NO BAJA AL TELÉFONO (2026-08-23) ════════════
 * Instrucción del director al pedir la travesía: «esto es solo para el sitio
 * en escritorio, no tiene nada que ver con el del teléfono o la tableta».
 * Medido tras añadir los cuatro hechos de 06 y los niveles del cierre: a 440
 * la tarjeta 06 pasó de 784 px —la pantalla exacta— a 883, y a 768 varias se
 * movieron. Aquí se devuelven a lo que eran.
 *
 * NO SE BORRA DEL HTML, SE OCULTA: el texto sigue en el documento para quien
 * lo lee con un lector de pantalla y para el buscador. Lo que no cabe es su
 * caja, no su contenido. */
@media (max-width: 900px) {
  .idc-que-hace { display: none; }
  .cierre-invitacion, .cierre-como { display: none; }

  /* EL ORDEN DEL TELÉFONO SE REPONE. Para que la columna de escritorio fuera
     UN bloque, en el HTML hubo que sacar de en medio la tarjeta demo (06) y
     los tres puntos (07): ahora van después del envoltorio. En escritorio da
     igual —la reja los coloca por celda— pero en el celular, donde el
     envoltorio se disuelve, el orden del documento ES el orden de lectura, y
     la demo aparecía DESPUÉS de los botones. Aquí vuelve a su sitio: la
     sección pasa a columna flexible solo para poder decir el orden. */
  #tarjetas-digitales, #clientes { display: flex; flex-direction: column; }
  #tarjetas-digitales > .vista-col > header, #clientes > .vista-col > header { order: 1; }
  #tarjetas-digitales > .tarjeta-demo { order: 2; }
  #clientes > .tres-puntos { order: 2; }
  #tarjetas-digitales > .vista-col > .remate-tarjeta,
  #clientes > .vista-col > .remate-tarjeta { order: 3; }
  /* Las dos vías vuelven a ser la línea de contacto de siempre: en fila, sin
     marco y sin rótulo. El rótulo es un nivel de lectura de escritorio; en una
     pantalla de 390 px, «hola@…» y un teléfono ya se explican solos. */
  .cierre-vias {
    list-style: none; margin: var(--e3) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  }
  .cierre-vias .cierre-via-rotulo { display: none; }
  .cierre-vias a { display: inline; color: var(--acento); text-decoration: underline; }
  .cierre-via-dato { font: inherit; }
}

/* ═══ 09 · CASOS DE ÉXITO — la vista larga, compuesta ═════════════════════
 * Doce casos con nombre y cara: es la sección que PRUEBA todo lo anterior y
 * no se puede recortar a media pantalla sin mentir. Así que en escritorio se
 * asume lo que es —una vista larga— y se compone para que lo parezca a
 * propósito: el encabezado ocupa una columna propia y se queda ahí mientras
 * los casos desfilan a su lado. Se gana el doble: el titular no se lleva 200
 * px de alto que hacían falta para las fichas, y el visitante no pierde de
 * vista de qué van las doce cosas que está mirando.
 *
 * El pin sigue arriba, a lo ancho, como en toda vista.
 */
@media (min-width: 900.02px) {
  #trabajo {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: var(--e7);
    align-content: start;
  }
  #trabajo > .baraja-pin { grid-column: 1 / -1; }
  #trabajo > header {
    grid-column: 1; margin: 0;
    position: sticky; top: calc(var(--alto-barra) + 54px + var(--e5));
    align-self: start;
  }
  #trabajo > header h2 { font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.25rem); text-wrap: balance; }
  #trabajo > .riel { grid-column: 2; }
  /* La pista de casos: tres columnas de fichas que caben enteras sin que la
     foto se coma la ficha. Manda sobre la reja por defecto del sistema. */
  #trabajo .contactos.riel-pista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: var(--e4);
    /* Las fichas de una fila miden lo mismo aunque una lleve tres oficios y
       otra uno: en reja, el borde inferior desigual se lee como descuido. */
    align-items: stretch;
  }
  #trabajo .caso { display: flex; flex-direction: column; }
  #trabajo .caso .datos { flex: 1; }
}

/* ═══ 10 · PREGUNTAS — el titular a un lado, el acordeón al otro ══════════
 * Diez preguntas en una columna de 643 px centrada dejaban 350 px muertos a
 * cada lado y la décima fuera de la pantalla —medido a 1440—. En dos
 * columnas la vista se llena, las diez caben y el titular deja de flotar
 * solo sobre el vacío.
 *
 * El acordeón se queda en UNA columna dentro de su lado, y eso es
 * deliberado: en reja, abrir una respuesta empuja a sus vecinas de fila y la
 * lectura salta de sitio. Una pregunta se lee en columna.
 */
@media (min-width: 900.02px) {
  #preguntas {
    display: grid;
    /* 26 rem y no 22: con 22 el titular caía en cuatro líneas y dejaba «sí.»
       sola en la última, que es el clásico viudo que delata una columna
       estrecha de más. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--e7);
  }
  /* El pin en su propia fila y arriba: con `align-content: center` la fila del
     rótulo se centraba con las demás y volvía a caer 54 px por debajo del
     borde, que es justo el fallo que esta ronda vino a arreglar. */
  #preguntas > .baraja-pin { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  #preguntas > header { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
  #preguntas > .riel { grid-row: 2; }
  #preguntas > header h2 { font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.25rem); text-wrap: balance; }
  #preguntas > .riel { grid-column: 2; }
  #preguntas .preguntas.riel-pista { max-width: none; margin: 0; }
}

/* ═══ 05 · PARA RESTAURANTES — la foto a un lado, y la vista cabe ═════════
 * El director: «la foto está muy grande y no se ve el botón de acción; debe
 * quedar en una pantalla sin scroll». Medido a 1440: la foto salía a su
 * tamaño natural —857 px de alto— y la sección entera pedía 1 333 px contra
 * los 815 de la vista, así que la llamada a la acción caía fuera. El tope de
 * `24svh` que la sujetaba vivía en el bloque del celular y nunca cruzó.
 *
 * No se arregla encogiendo la foto: apilados, titular, foto, pie y botón no
 * caben aunque la foto mida poco, y una foto de comida pequeña no prueba
 * nada. Se arregla repartiendo — el argumento a la izquierda, la foto a la
 * derecha con su techo. La foto gana presencia y el botón vuelve a la vista.
 */
@media (min-width: 900.02px) {
  #gastronomia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    /* Seis filas y dos de ellas son aire: el rótulo arriba, y el argumento
       —titular, caso y botón— centrado entre los dos huecos. Sin las dos
       filas de sobra, la columna izquierda se pegaba arriba y dejaba 200 px
       muertos bajo el botón. */
    grid-template-rows: auto 1fr auto auto auto 1fr;
    column-gap: var(--e7);
  }
  #gastronomia > .baraja-pin { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  #gastronomia > header { grid-column: 1; grid-row: 3; margin: 0; }
  #gastronomia > .vertical-pie { grid-column: 1; grid-row: 4; margin: var(--e4) 0 0; max-width: 46ch; }
  #gastronomia > .remate-tarjeta { grid-column: 1; grid-row: 5; margin: var(--e5) 0 0; }
  #gastronomia > .vertical-foto { grid-column: 2; grid-row: 2 / -1; margin: 0; align-self: center; }
  /* El techo se calcula sobre la vista, no sobre la foto: la pantalla menos
     la cabecera, el rótulo y el aire de la tarjeta. Así cabe a 800 px de
     alto igual que a 1 080, que es donde un tope fijo se rompe. */
  #gastronomia > .vertical-foto img {
    max-height: calc(100svh - var(--alto-barra) - 54px - var(--e6) * 2 - 2.5rem);
    width: 100%; object-fit: cover;
    border-radius: var(--radio-caja, 14px);
  }
}

/* ═══ 08 · EL MÉTODO — cinco pasos, una fila ══════════════════════════════
 * La reja por defecto (`auto-fit, minmax(15rem, 1fr)`) los partía en 4 + 1 y
 * la vista pedía 1 028 px contra los 815 que hay: el quinto paso quedaba solo
 * en una segunda fila y encima empujaba la sección fuera de pantalla. Son
 * CINCO pasos de un método y se leen como una secuencia; en una fila caben
 * desde 1 200 px de ventana (228 px por paso a 1 280, medido). Por debajo,
 * la reja automática sigue mandando: dos filas es mejor que cinco columnas
 * ilegibles.
 */
@media (min-width: 1200px) {
  #proceso .proceso.riel-pista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}