/* ============================================================
   Casa Badé — sistema visual
   Signature: el arco. El isotipo son dos arcos (uno macizo, uno
   de contorno). Ese umbral es la gramática de toda la página:
   arcada del hero, cards, marcas de sección y footer.
   ============================================================ */

:root {
  /* Identidad de marca Casa Badé */
  --brown: #4b2a18;
  --orange: #d05532;
  --green: #273323;
  --beige: #fff0d9;

  /* Derivados */
  --ink: var(--brown);
  --accent: var(--orange);
  --cream: var(--beige);
  --cream-alt: #f9e3c4;
  --line: #e8d3b0;
  --muted: #7a5a45;
  --green-soft: #35462f;

  /* Tipografía — Poppins como familia única (dossier de marca) */
  --f-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Métrica */
  --max: 1180px;
  --radius: 14px;
  --arch: 999px 999px 5px 5px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ---------- Roles tipográficos ----------
   Poppins como familia única (dossier de marca). Los roles se
   separan por peso y tracking, no por familia: 700 cerrado en
   titulares, 600 en versalitas muy abiertas para la señalética
   del edificio, 300–400 para el cuerpo.                      */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.accent { color: var(--accent); }

/* Utility: etiquetas tipo directorio de edificio */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Marca de arco: sustituye al guion decorativo genérico */
.eyebrow::before {
  content: "";
  flex: none;
  width: 13px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.section__head--center .eyebrow { justify-content: center; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(208, 85, 50, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(75, 42, 24, 0.18);
  transition: box-shadow 0.45s ease;
}

.header.is-scrolled { box-shadow: 0 10px 30px rgba(75, 42, 24, 0.18); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  transition: height 0.45s var(--ease);
}

.header.is-scrolled .header__inner { height: 60px; }

/* ---------- Logo ----------
   Tres momentos, cada uno con un trabajo:
   carga = los arcos suben · hover = brillo · scroll = colapsa   */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.logo__iso {
  display: block;
  overflow: hidden;
  flex: none;
  width: 32px;
  height: 22px;
}

.logo__iso img {
  display: block;
  width: 32px;
  height: 22px;
  transform: translateY(102%);
  animation: archRise 0.75s var(--ease) 0.15s forwards;
}

.logo__word {
  position: relative;
  flex: none;
  width: 142px;
  overflow: hidden;
  transition: width 0.5s var(--ease), opacity 0.3s ease, margin-left 0.5s var(--ease);
}

.logo__word img {
  display: block;
  width: 142px;
  height: 23px;
  max-width: none; /* que el contenedor lo recorte, no que lo aplaste */
  clip-path: inset(0 100% 0 0);
  animation: wordReveal 0.8s var(--ease) 0.45s forwards;
}

/* El wordmark se retira al scrollear y deja hablar al isotipo */
.header.is-scrolled .logo__word {
  width: 0;
  opacity: 0;
  margin-left: -10px;
}

/* Barrido de verde corporativo recortado con la silueta del logotipo, solo en hover.
   Sobre el logotipo crema un brillo blanco no se veía: el verde tiñe las letras
   al pasar, como una pasada de tinta. */
.logo__word::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    rgba(39, 51, 35, 0) 40%,
    rgba(39, 51, 35, 0.9) 50%,
    rgba(39, 51, 35, 0) 60%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask: url("assets/logos/Logo_Cream_trim.png") left center / 142px 23px no-repeat;
  mask: url("assets/logos/Logo_Cream_trim.png") left center / 142px 23px no-repeat;
}

.logo:hover .logo__word::after { animation: sheen 0.9s cubic-bezier(.4, 0, .2, 1); }

@keyframes archRise {
  to { transform: translateY(0); }
}

@keyframes wordReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes sheen {
  from { background-position: 130% 0; }
  to { background-position: -40% 0; }
}

/* ---------- Navegación ---------- */

.nav {
  display: flex;
  gap: 34px;
  font-size: 0.95rem;
  color: rgba(255, 240, 217, 0.88);
}

.nav a {
  position: relative;
  padding: 4px 0;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }

/* Página actual: el mismo filete del hover, pero ya dibujado. El hover lo traza,
   la página en la que estás lo tiene puesto. Va con el atributo (0,2,2) para ganarle
   a `.nav a::after` (0,1,2). Hoy solo lo lleva lugares.html.
   En móvil `.nav a::after` es `display: none`, así que ahí la señal es el color. */
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* `Lugares` no es un ancla de la landing: es otra página. El filete a su
   izquierda lo separa del bloque de anclas — el mismo muro en planta que
   usa el resto del sitio, centrado en el `gap: 34px` del nav.
   Ojo: usa `::before` porque el `::after` ya es el filete del hover. */
.nav__aparte::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  width: 1px;
  height: 15px;
  transform: translateY(-50%);
  background: rgba(255, 240, 217, 0.3);
}

/* El CTA ya vive en el header en desktop; en el menú móvil sí hace falta */
.nav__cta { display: none; }

/* Botón de menú: solo existe en móvil */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 240, 217, 0.45);
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  margin: 0 auto;
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after { transform: translateY(4px); }

.header.is-menu-open .nav__toggle span { background: transparent; }
.header.is-menu-open .nav__toggle span::before { transform: rotate(45deg); }
.header.is-menu-open .nav__toggle span::after { transform: rotate(-45deg) translateY(0); }

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

.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--green);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.btn:hover {
  background: var(--green-soft);
  transform: translateY(-2px);
}

.btn--small { padding: 11px 20px; font-size: 0.9rem; }
.btn--large { padding: 19px 38px; font-size: 1.05rem; }

.btn--ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}

.btn--ghost:hover { background: rgba(39, 51, 35, 0.07); }

.btn--light {
  background: var(--cream);
  color: var(--green);
  border-color: var(--cream);
}

.btn--light:hover { background: #fff; }

/* ---------- Hero ---------- */

.hero {
  padding: 96px 0 84px;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(208, 85, 50, 0.12), transparent 70%),
    radial-gradient(760px 380px at 96% 4%, rgba(39, 51, 35, 0.10), transparent 70%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 60px;
  align-items: center;
}

.hero h1 { font-size: clamp(2.15rem, 4.3vw, 3.45rem); }

.hero__sub {
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--green);
  margin: 30px 0 0;
  max-width: 42ch;
}

.hero__text {
  margin-top: 20px;
  margin-bottom: 0;
  max-width: 50ch;
  color: var(--muted);
  font-size: 0.99rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ---------- La puerta a `solucion.html` ----------
   Segunda plaza del hero. Es el único control de la landing que sale de la
   página, y por eso es el único que no va en verde: el borde y la flecha en
   terracota lo separan del botón de conversión sin convertirse en un segundo
   botón macizo. `--orange` sobre la crema del hero da 3,72:1 — no llega al
   4,5:1 del texto pequeño, pero sí supera el 3:1 que piden los bordes de
   control y los elementos gráficos. **El rótulo se queda en verde** (11,9:1):
   si alguien lo pinta de terracota, lo deja ilegible.

   `.btn` ya trae `white-space: nowrap`, así que el rótulo y la flecha no se
   pueden separar en dos líneas aunque la columna se estreche.             */
.btn--puerta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-color: var(--orange);
}

/* Al hover el relleno es un baño de terracota al 8 %, no el gris verdoso que
   usa `.btn--ghost`: el control tiene que responder en su propio color. */
.btn--puerta:hover { background: rgba(208, 85, 50, 0.09); }

/* La flecha avanza: la puerta abriéndose. Un solo gesto.
   `.btn` ya anima `transform` en el elemento; este es el del hijo. */
.btn__flecha {
  color: var(--orange);
  transition: transform 0.22s var(--ease);
}

.btn--puerta:hover .btn__flecha { transform: translateX(4px); }

/* ---------- Arcada del hero ----------
   Tres arcos = los tres tipos de espacio que gestiona Casa Badé.
   No es adorno: cada arco lleva su etiqueta.                    */

.arcade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: end;
}

.arcade__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.arcade__frame {
  display: block;
  overflow: hidden;
}

.arcade__item:nth-child(1) .arcade__frame { height: 168px; }
.arcade__item:nth-child(2) .arcade__frame { height: 238px; }
.arcade__item:nth-child(3) .arcade__frame { height: 132px; }

.arch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--arch);
  transform: translateY(102%);
  animation: archRise 0.9s var(--ease) forwards;
  /* El arco es además el contenedor de la foto. El `overflow` va AQUÍ y no en
     `.arcade__frame`: el del marco recorta un rectángulo, el que curva la foto
     contra el arco es este. */
  position: relative;
  overflow: hidden;
}

.arcade__item:nth-child(1) .arch { background: var(--green); animation-delay: 0.5s; }
.arcade__item:nth-child(3) .arch { background: var(--accent); animation-delay: 0.7s; }

.arcade__item:nth-child(2) .arch {
  background: transparent;
  border: 3px solid var(--green);
  animation-delay: 0.6s;
}

/* Cada puerta guarda detrás una fotografía del espacio real. En reposo no se
   ve nada: los tres arcos son los mismos símbolos de color de siempre. Al
   posarse el cursor, la foto SUBE dentro del arco — el mismo gesto que hacen
   los arcos al cargar (`archRise`), en miniatura. La puerta se abre.
   El bloque de color no desaparece: se queda debajo y lo tapa el `cover`.

   Aquí SÍ se recorta, al revés que en `lugares.html`, donde manda la
   proporción natural porque aquello es un montaje de museo. Una ventana
   recorta por definición: son dos gramáticas distintas a propósito. */
.arch__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(14%);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}

/* Solo donde hay un cursor de verdad. En táctil no hay hover, así que la
   arcada se queda tal cual estaba: tres arcos de color y nada más. Las fotos
   de los espacios ya tienen su sitio en `lugares.html`. */
@media (hover: hover) and (pointer: fine) {
  .arcade__item:hover .arch__foto { opacity: 1; transform: none; }
}

/* Encuadres: el centro geométrico casi nunca es el centro de interés. */
.arcade__item:nth-child(1) .arch__foto { object-position: 50% 42%; }
.arcade__item:nth-child(2) .arch__foto { object-position: 50% 40%; }
.arcade__item:nth-child(3) .arch__foto { object-position: 58% 45%; }

.arcade__label {
  /* Reserva dos líneas: así los tres arcos siguen apoyando en la misma base
     aunque una etiqueta ocupe una línea y otra dos. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.6em + 15px);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  text-align: center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.95s forwards;
}

/* ---------- Entrada del hero ---------- */

.hero__line { display: block; }

.reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.reveal__inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%);
  animation: revealUp 0.6s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes revealUp {
  0% { opacity: 0; transform: translateY(115%); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

.hero .eyebrow,
.hero__sub,
.hero__text,
.hero__actions .btn {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero .eyebrow { animation-delay: 0s; }
.hero__sub { animation-delay: 0.72s; }
.hero__text { animation-delay: 0.82s; }
.hero__text--last { animation-delay: 0.9s; }
.hero__actions .btn:nth-child(1) { animation-delay: 1s; }
.hero__actions .btn:nth-child(2) { animation-delay: 1.08s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Secciones ---------- */

.section { padding: 104px 0; }

.section--alt {
  background: var(--cream-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Rejilla asimétrica: el titular manda, el cuerpo respira */
.section--split {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 76px;
  align-items: start;
}

.section--split .section__head {
  position: sticky;
  top: 116px;
}

.section__head h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  text-wrap: balance;
}

.section__head--center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

.prose p { color: var(--muted); }

/* ---------- La tesis: el suelo de `#problema` ----------

   La frase que contesta al titular. No es un párrafo más de la prosa: es el
   punto en que el problema se convierte en respuesta, así que CAMBIA EL SUELO
   bajo los pies del lector. Verde a sangre, y el texto encima.

   Llegar aquí costó dos rechazos del usuario y los dos vale la pena dejarlos
   escritos:

   1. Un callout —fondo terracota al 6 %, radio de 14px y una barra vertical de
      3px—: «no me gusta este tipo de tarjetas… algo mucho más natural,
      integrado y bonito». Era la única superficie teñida y el único radio de
      la sección, o sea un objeto pegado encima (el mismo diagnóstico que costó
      dos rechazos en `.premium` y que resolvió `.minimo`); y la barra vertical
      es un ALZADO en una página cuya gramática es de PLANTA.
   2. Una versión solo tipográfica —filete, cuerpo mayor y salto a `--green`
      dentro de la propia columna—: «no me gusta así tampoco, muy "texto"».
      Tenía razón: un párrafo un poco más grande no es una pieza.

   La salida no es más tratamiento, es más ESTRUCTURA. El recurso es el suelo,
   que ya es la gramática de la casa (`.process` aquí, y los tres suelos de
   `solucion.html`: marrón → verde → crema). Cero recursos nuevos, cero arcos
   nuevos —la cuenta del arco es sagrada— y cero terracota: en esa pantalla el
   acento ya habla tres veces (arco del eyebrow, arcada y `.btn--puerta`).

   **No se puede parecer a `.quote`**, que dos secciones más abajo ya es una
   banda a sangre con una sola frase grande. Se separan por papel y por eje:
   `.quote` FLOTA entre dos secciones (crema, filete arriba y abajo, centrada,
   peso 700) y esta es el SUELO de la suya (verde, a hueso contra
   `#que-hacemos`, al eje izquierdo, peso 500 y un punto más pequeña). El orden
   también cuenta: la tesis llega antes y es menor, así la frase núcleo sigue
   siendo la declaración más grande de la página.

   El aire verde de la derecha es la composición, no un hueco por llenar. Si
   alguien mete algo ahí, esto se convierte en una banda llena y vuelve a ser
   una caja.

   `max-width: 44ch` NO es un número redondo: es el ancho que hace que
   `text-wrap: balance` parta la frase por su cesura —«…ordenar ese sistema» /
   «sin añadir estructura fija…»—, que son 40 y 40 caracteres y además las dos
   mitades del argumento (el problema que se ordena, y el coste que no se
   añade). A 32ch salían tres líneas y la frase se perdía en la banda. Si se
   toca el cuerpo o el ancho, mira que sigan siendo DOS líneas.            */
.tesis {
  /* El margen inferior negativo cancela el `padding-bottom` de `.section`
     para que el verde llegue al borde y choque a hueso con `#que-hacemos`,
     cuyo `border-top` de `--line` queda como umbral. Si cambia el relleno de
     `.section`, cambia este número. */
  margin: 88px 0 -104px;
  padding: 84px 0;
  color: var(--cream);

  /* ---------- EL SUELO FOTOGRÁFICO (oct-2026) ----------
     El suelo verde de la tesis deja de ser un relleno plano y pasa a ser una
     sala de verdad vista a través de un velo verde. La secuencia de suelos de
     la página NO se toca: esto sigue siendo el suelo verde, solo que ahora el
     verde tiene algo detrás.

     `background-color` SE QUEDA y es el repliegue: si la imagen no carga, la
     banda vuelve a ser exactamente el verde de antes y la frase sigue
     legible. Nunca dejes la tinta crema dependiendo de que cargue una foto.

     EL VELO ES UN DEGRADADO, NO UNA CAPA PLANA, y las paradas están
     CALCULADAS, no elegidas a ojo. Medido sobre el recorte real de la banda
     (1280×520, `cover`): en la zona donde cae la frase el percentil 90 de
     luminancia de esta foto da 2,17:1 contra el crema — ilegible. Con el
     velo al 65 % sube a 7,2:1, y al 78 % va sobrado. A la derecha baja al
     10 % para que la sala se vea limpia: es el reparto de las referencias
     que pasó el usuario (texto sobre la zona velada, fotografía a la vista
     en el resto), no un baño uniforme encima de todo.

     POR QUÉ ESTA FOTO Y NO OTRA. De las cinco del reportaje es la única
     oscura (luminancia media 83 contra 145–149 de las demás) y por eso es la
     que menos velo necesita: 33 % contra el 43–52 % que pedían las claras.
     Cuanto menos velo, más foto queda. Si alguien la cambia por una clara,
     hay que subir las paradas del degradado o la frase deja de cumplir. */
  background-color: var(--green);
  background-image:
    linear-gradient(97deg,
      rgba(27, 36, 26, 0.93) 0%,
      rgba(27, 36, 26, 0.88) 46%,
      rgba(27, 36, 26, 0.46) 72%,
      rgba(27, 36, 26, 0.08) 100%),
    url("assets/home/reunion-1400.webp");
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center, 58% center;

  /* Sin altura mínima la banda mide ~250px y la fotografía queda en una
     rendija donde no se lee nada. Con esto es un suelo de verdad. */
  display: flex;
  align-items: center;
  min-height: clamp(420px, 52vh, 560px);
}

/* En móvil la foto no necesita 1400px de ancho: 700 pesa la cuarta parte. */
@media (max-width: 760px) {
  .tesis {
    background-image:
      linear-gradient(180deg,
        rgba(27, 36, 26, 0.88) 0%,
        rgba(27, 36, 26, 0.80) 62%,
        rgba(27, 36, 26, 0.55) 100%),
      url("assets/home/reunion-700.webp");
  }
}

.tesis__frase {
  margin: 0;
  max-width: 44ch;
  color: var(--cream);
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Frase núcleo ---------- */

.quote {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 92px 0;
}

.quote p {
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--green);
}

/* ---------- Lista ---------- */

.list__intro {
  font-weight: 500;
  margin-bottom: 18px;
}

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

.list li {
  position: relative;
  padding: 17px 0 17px 38px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.list li:last-child { border-bottom: 1px solid var(--line); }

/* Arco diminuto en vez de bullet redondo */
.list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 26px;
  width: 15px;
  height: 11px;
  border: 2px solid var(--accent);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

/* ---------- Variante "parte de estado" (#para-quién) ----------

   Aquí el arco se retira. Motivo: entre el eyebrow, las siluetas de las
   tarjetas y estos bullets había veinte arcos en dos pantallas, y un motivo
   que aparece veinte veces deja de leerse como firma. El arco es un ALZADO
   (la fachada del isotipo); esta sección se dibuja en PLANTA, donde no hay
   arcos: solo muros, que en esta página ya son los hairlines.

   Las seis frases son condiciones que el lector contrasta con su propia
   oficina: el parte que levanta un facility manager tras recorrer un
   espacio. En reposo es eso, un registro — filete de cabecera y una entrada
   por línea, sin una sola marca. Al posarte en una entrada, su propio filete
   se rellena en terracota y el texto sube a verde: el parte se subraya según
   lo lees. No hay adorno que se pueda quitar; la marca ES la línea.

   Descartados por el camino, y por qué: un tramo corto fijo se leía como el
   guion decorativo que el arco vino a sustituir, y una barra vertical a la
   izquierda es un ALZADO en una página cuya gramática es de PLANTA. Esa
   barra la llevaba `.prose__highlight` dos secciones más arriba, y se cayó
   de allí también (hoy es `.tesis`, un suelo verde a sangre, sin caja y sin
   barra): en toda la landing no queda ninguna.

   La especificidad (0,3,1) le gana a `.list li::before` (0,2,1) sin depender
   del orden del fichero: es a propósito, para poder mover esta regla. */

.list.list--survey {
  /* Filete de cabecera: abre el registro y lo separa del intro. */
  border-top: 2px solid var(--green);
}

.list.list--survey li {
  padding: 17px 0;
  transition: color 0.28s ease;
}

/* El primero ya tiene encima el filete de cabecera del <ul>. */
.list.list--survey li:first-child { border-top: 0; }

.list.list--survey li::before {
  top: auto;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  transition: width 0.42s var(--ease);
}

.list.list--survey li:hover { color: var(--green); }
.list.list--survey li:hover::before { width: 100%; }

/* ---------- `#para-quién`: LA FOTO SIN VELO (21 oct 2026) ----------
   Petición del usuario: *«que la foto de para quién sea sin filtro de velo
   pero aún así se siga entendiendo el texto de dentro perfectamente»*.

   LO QUE NO SE PUEDE HACER, Y POR QUÉ. Texto sobre una fotografía sin velo
   solo se lee si el texto NO cae sobre las zonas oscuras de la foto. En esta
   el jersey de la persona y los dos sillones de cuero quedaban justo bajo la
   columna derecha, y medido daban 1,2:1. No hay encuadre que lo arregle:
   mientras el texto ocupe las dos columnas, o hay velo o no se lee.

   LO QUE SÍ: la fotografía se queda **intacta, sin un solo punto de velo**,
   y el texto se recoge en su propio terreno. El crema es OPACO hasta el 46 %
   y se desvanece a transparente en el 62 %; de ahí a la derecha la foto va
   al 100 %. El texto vive dentro del 46 % opaco, así que su contraste es el
   de siempre contra crema —11,7:1 el titular, sin depender de la imagen—, y
   el desvanecido cae sobre una franja donde no hay ni una letra, así que no
   cuesta nada.

   Es el mismo reparto de `.tesis` y de la referencia que pasó el usuario
   (texto a un lado, fotografía limpia al otro), pero llevado al extremo
   honesto: allí el velo oscurece la foto para poder escribir encima; aquí no
   se toca la foto y se mueve el texto.

   `background-color` sigue siendo el repliegue: sin imagen, crema de toda la
   vida y todo legible. */
#para-quien {
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg,
      var(--cream) 0%,
      var(--cream) 52%,
      rgba(255, 240, 217, 0) 66%),
    url("assets/home/persona-1400.webp");
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center, center 72%;
}

/* El texto deja de repartirse en dos columnas y se recoge en la mitad
   izquierda, que es la zona opaca. Sin esto la lista caería sobre la foto. */
/* OJO: el `max-width` NO va en `.section--split`, que ES el `.container`:
   ahí reduce el contenedor y sus `margin: auto` lo RECENTRAN, con lo que el
   texto se va justo encima de la foto. Va en los hijos, que se quedan
   pegados al eje izquierdo de la página. */
#para-quien .section--split { display: block; }

#para-quien .section__head,
#para-quien .section__body { max-width: 460px; }

#para-quien .section--split .section__head { position: static; }
#para-quien .section__body { margin-top: 34px; }

/* La tinta vuelve a `--muted`: ya no hay foto debajo, así que el registro
   recupera el gris de la casa y el contraste de siempre. */
#para-quien .list li { color: var(--muted); }

@media (max-width: 980px) {
  /* Sin sitio para las dos mitades, la foto pasa a ser un zócalo al pie y el
     texto se queda sobre crema limpio. */
  #para-quien {
    background-image:
      linear-gradient(180deg,
        var(--cream) 0%,
        var(--cream) 72%,
        rgba(255, 240, 217, 0) 88%),
      url("assets/home/persona-700.webp");
    background-position: center, center 58%;
    /* El zócalo tiene que caber ENTERO bajo la última línea del registro:
       con 260px el texto se metía en la foto. Medido a 390px: el texto
       acaba en 832 y la sección mide 1192, así que lo opaco (72 % = 858)
       lo cubre y quedan ~167px de fotografía limpia al pie. */
    padding-bottom: 360px;
  }

  #para-quien .section--split { max-width: none; }
}

/* ---------- EL RAÍL DE LA PUERTA (21 oct 2026) ----------
   La puerta se ancla mientras el lector baja y cada tramo de recorrido
   enseña un paso. Lo pide el encargo: que los cuatro pasos se vean solos,
   «de un modo muy fluido y natural», sin perder el cambio manual.

   EL REPARTO ENTRE CSS Y JS, que es lo que no se puede confundir:
   - el CSS pone el anclaje y SU TOPE,
   - el JS pone la ALTURA DEL RAÍL, porque depende de lo que mida la pieza
     anclada y eso cambia con el ancho.
   Sin JS el raíl se queda a `height: auto`, el anclaje no tiene recorrido y
   la sección se lee como antes. El cambio de marcado es inerte por sí solo.

   EL TOPE TIENE QUE LIBRAR EL HEADER, que es `sticky` y mide 77px. A 101px
   la puerta (548px) queda a 649 del borde y cabe en cualquier viewport de
   700px para arriba. Bajo esa altura el JS NO ANCLA: antes que dejar la
   puerta cortada por abajo, se queda como estaba. */
.pasos-rail { position: relative; }

.pasos-fijo {
  position: sticky;
  top: var(--pasos-tope, 101px);
}

/* En vertical el header no colapsa igual y sobra menos aire. */
@media (max-width: 860px) { .pasos-fijo { --pasos-tope: 88px; } }

/* MOVIMIENTO REDUCIDO: no se ancla nada. Anclar la página para contar algo
   es justo lo que molesta a quien pide menos movimiento, así que aquí la
   sección vuelve a ser una sección normal y los pasos se cambian a mano.
   El JS mira lo mismo y ni siquiera mide el raíl. */
@media (prefers-reduced-motion: reduce) {
  .pasos-fijo { position: static; }
  .pasos-rail { height: auto !important; }
}

/* ---------- LA PUERTA DE LOS PASOS (oct-2026) ----------
   Encargo del usuario: tarjetas intercambiables en formato PUERTA, con una
   animación que cierra y abre la hoja, el contenido siguiente saliendo de
   dentro y el color del interior cambiando con la paleta en cada apertura.
   Formato Casa Badé: el paso vive DENTRO de la puerta y se cambia abriéndola.

   ES EL MISMO MECANISMO QUE `.puerta` EN `solucion.html`, no uno nuevo: vano
   con `overflow: hidden`, hoja que sube a `translateY(-101%)` para abrir y
   baja a `0` para cerrar. Y la hoja va del color del MURO (aquí
   `--cream-alt`, allí `--suelo`), así que con la puerta cerrada el vano no
   existe y lo
   único que se ve moverse es su canto.

   EL ARCO SUBE DE 1 A 2 EN ESTA SECCIÓN, y es la regla de siempre: el arco
   se usa donde CONTIENE algo. Aquí contiene el paso. Mismo permiso que se
   dio la arcada de la home y el vano del vídeo de `solucion.html`.

   LOS CUATRO INTERIORES ESTÁN ELEGIDOS POR CONTRASTE, NO POR GUSTO. Medido
   contra las dos tintas de la casa:
     --brown      11,4:1 con crema      --green-soft  9,1:1 con crema
     --beige      11,4:1 con marrón     --cream-alt  10,2:1 con marrón
   **`--orange` NO puede ser interior**: da 3,7:1 con crema y 3,1:1 con
   marrón, y no llega al mínimo con ninguna de las dos. Queda como acento,
   nunca como fondo de la sala. El orden alterna oscuro / claro / oscuro /
   claro para que cada apertura se note.

   LA SECUENCIA 01–04 SIGUE SIENDO REAL y por eso el índice son botones con
   su número: es la única sección de la web con numeración, porque es la
   única que tiene orden. */
.pasos {
  /* TERRACOTA HONDO: el naranja de la marca corregido de contraste, no un
     color nuevo. `--orange` (#d05532) da 3,72:1 con tinta crema y 3,06:1 con
     marrón: no llega al 4,5:1 del cuerpo con NINGUNA de las dos tintas de la
     casa, así que no puede ser fondo de texto. Este tono conserva el MISMO
     matiz (13,3°) y la MISMA saturación (76 %) y solo baja el valor del 82 %
     al 71 %: 4,70:1 con crema y 4,22:1 contra el muro.

     Es exactamente lo que el proyecto ya hizo dos veces —`--acento-claro`
     para fondo oscuro y `--sala-acento` para el verde de `lugares.html`—:
     corrección de contraste, NO repintado de marca. Por eso se declara AQUÍ
     y no en `:root`: fuera de esta puerta se sigue usando `--orange` tal
     cual. */
  --acento-hondo: #b54a2c;

  display: grid;
  justify-items: center;
  gap: 34px;
  margin-top: 54px;
}

.pasos__vano {
  position: relative;
  width: min(560px, 100%);
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--arch);
}

.pasos__sala {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 92px 54px 54px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.34s var(--ease), color 0.34s var(--ease);
}

/* Los cuatro tonos. El `data-tono` lo reescribe el JS con la puerta cerrada,
   así que el cambio de color nunca se ve a medias. */
/* Los cuatro interiores, sobre muro CREMA. Medidos contra la tinta crema y
   contra el propio muro (tienen que distinguirse de él, no solo llevar texto
   legible):
     --brown         11,39:1 / 10,23  ·  --green       11,82:1 / 10,61
     --acento-hondo   4,70:1 /  4,22  ·  --green-soft   9,05:1 /  8,13
   `--orange` sigue fuera: 3,72:1 con crema. Es acento, nunca interior.

   EL ORDEN ALTERNA TEMPERATURA, no claridad. Sobre muro crema los cuatro
   interiores tienen que ser oscuros (uno claro se funde con el muro), así
   que el cambio no puede leerse como oscuro/claro y se lee como cálido/frío:
   brown → green → muted → green-soft. Dos cálidos seguidos no se notan. */
.pasos__sala[data-tono="brown"]      { background: var(--brown);      color: var(--beige); }
.pasos__sala[data-tono="green"]      { background: var(--green);      color: var(--beige); }
.pasos__sala[data-tono="green-soft"] { background: var(--green-soft); color: var(--beige); }
.pasos__sala[data-tono="terracota"]  { background: var(--acento-hondo); color: var(--beige); }

.pasos__sala .paso { display: none; }
.pasos__sala .paso.is-visible { display: block; }

/* El número va con el tratamiento de señalética de la casa (600 / +0.2em
   mayúsculas) y en la tinta plena: así hereda el contraste del interior y no
   hay que recalcularlo tono a tono. */
.paso__num {
  display: block;
  margin-bottom: 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: inherit;
  opacity: 0.72;
}

.paso h3 {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: inherit;
}

.paso p {
  margin: 0;
  font-weight: 300;
  line-height: 1.6;
  color: inherit;
}

.pasos__hoja {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--cream-alt);
  transform: translateY(-101%);
  transition: transform 0.42s var(--ease);
  /* El canto de la hoja: es lo único que se ve moverse sobre un muro del
     mismo color, y sin él el gesto no se lee. */
  box-shadow: 0 1px 0 var(--line);
}

.pasos__vano:not(.is-abierta) .pasos__hoja { transform: translateY(0); }

/* ---------- Mandos ---------- */

.pasos__mandos {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pasos__flecha {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--brown);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.pasos__flecha:hover {
  background: rgba(75, 42, 24, 0.06);
  border-color: var(--muted);
}

.pasos__flecha:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}


.pasos__indice { display: flex; gap: 6px; }

.pasos__ficha {
  min-width: 44px;
  padding: 11px 4px;   /* 44px de alto: objetivo táctil mínimo */
  border: 0;
  border-top: 2px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.pasos__ficha:hover { color: var(--brown); }

/* El filete de arriba se rellena en el paso activo: es el mismo gesto que
   `.list--survey` usa en `#para-quién` — la marca ES la línea. */
.pasos__ficha.is-activa {
  color: var(--brown);
  border-top-color: var(--accent);
}

.pasos__ficha:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 2px;
}

/* ---------- Pasos: verde a sangre ---------- */

.process {
  background: var(--green);
  color: var(--cream);
  padding: 104px 0;
}

.process .eyebrow { color: rgba(255, 240, 217, 0.75); }
.process .section__head h2 { color: var(--cream); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 28px;
}

.step {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 240, 217, 0.28);
}

/* Nodo del recorrido: el paso es una secuencia real */
.step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.step__num {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 12px;
}

.step h3 {
  font-size: 1.06rem;
  margin-bottom: 10px;
  color: var(--cream);
}

.step p {
  font-size: 0.94rem;
  color: rgba(255, 240, 217, 0.72);
  line-height: 1.6;
}

/* ---------- En funcionamiento: los KPI y el registro ----------
   La prueba de la landing, entre el método y el precio.

   DOS PIEZAS Y EL ORDEN ES EL ARGUMENTO: los cuatro KPI dicen el
   resultado, y el registro de seis renglones es lo que impide que esas
   cifras se lean como marketing. Un número suelto pide fe; una lista que
   se puede contrastar con `lugares.html` se audita.

   GRAMÁTICA DE PLANTA, CERO ARCOS. El arco es un ALZADO y es la firma de
   la marca: solo se usa donde CONTIENE algo. Aquí el recurso son los
   filetes, que es un muro en planta, el mismo lenguaje que el hairline de
   la página. El recuento de arcos de esta sección es 1, y es el del
   eyebrow.

   POR QUÉ `--cream-alt` Y NO UNA BANDA A SANGRE. La home ya tiene tres
   suelos: `.tesis` (verde), `.process` (verde) y la tarjeta marrón de la
   calculadora. Un cuarto la volvería monótona y además chocaría contra el
   verde de `.process`, que está justo encima. `.section--alt` es un
   escalón de color, no un suelo, y deja la tarjeta marrón de abajo
   recortada contra el crema normal que viene después.

   EL REGISTRO NO LLEVA FILETE VERTICAL Y LOS KPI SÍ, y la diferencia es de
   oficio: en una fila de dos campos el `justify-content: space-between` ya
   separa (igual que el `gap: 1px` de `.services` dibuja sus filetes sin un
   solo `border`), pero cuatro celdas en rejilla sin filete se leen como
   cuatro párrafos sueltos. Ese filete vertical es el de `.ficha__item` en
   `blog.css`, que resuelve este mismo problema y lleva meses en la casa.
   Censo actualizado de bordes izquierdos de la landing: los 10 de
   `.faq__mark` (arcos de contorno) + los 3 de `.kpi`. */

.cartera__head {
  max-width: 640px;
  margin-bottom: 52px;
}

.cartera__entrada {
  margin-top: 18px;
  color: var(--muted);
}

/* ---------- Los KPI ----------
   Cuatro cifras en fila con filete vertical entre ellas. El recurso NO es
   nuevo: es el de `.ficha__item` en `blog.css`, que resuelve exactamente
   este problema —cuatro datos cortos en fila— y lleva meses en la casa.
   Sigue siendo PLANTA: un filete, no una tarjeta. Nada de fondo, sombra ni
   radio; un objeto claro suelto sobre la crema se lee como un parche, y eso
   ya costó dos rechazos en `.premium` y uno en `.tesis`.

   LA CIFRA VA EN `--brown` Y EL RÓTULO EN `--muted`, no al revés. En la
   lámina descartada de `.premium` el elemento más grande y oscuro acabó
   siendo la ETIQUETA mientras el contenido iba en cuerpo pequeño; aquí el
   contenido es el número.

   Escala: 2.6rem (41,6px) para la cifra, el mismo cuerpo que `.panel__cifra`
   de `solucion.html` tras volverse intervalo. No sube más porque con cuatro
   en fila a 1180px cada celda mide ~295px, y "Tiempo medio de respuesta"
   necesita dos líneas de rótulo debajo sin descuadrar a las otras tres. */

/* `minmax(0, 1fr)` y no `1fr` a secas, que es `minmax(auto, 1fr)` y no baja
   del min-content de la celda: una cifra larga a 41,6px ensancha su columna,
   desiguala las cuatro y desborda el contenedor por la derecha. Es el mismo
   `minmax(0, 1fr)` de `.premium` y de `.incluye__lista li`. */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kpi {
  padding: 30px 26px;
  border-left: 1px solid var(--line);
}

/* El primero arranca en el eje de la página, como el titular. Si llevara
   sangría, las cifras empezarían 26px a la derecha del <h2> y la sección
   tendría dos ejes izquierdos. */
.kpi:first-child {
  padding-left: 0;
  border-left: 0;
}

.kpi__cifra {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--brown);
}

/* Mismo rol de señalética que `.cartera__zona` y `.eyebrow`: 600, mayúsculas
   y tracking abierto. `min-height` reserva las dos líneas que necesita
   "Tiempo medio de respuesta" para que los cuatro rótulos compartan línea
   base, igual que `.arcade__label` reserva las suyas en el hero. */
.kpi__rotulo {
  display: block;
  margin-top: 12px;
  min-height: 2.6em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}

/* El pie, directamente bajo los KPI. El `margin-top` es el único aire entre
   la rejilla y la frase: aquí vivían el rótulo y el registro de seis
   renglones, que el usuario retiró por extensos (14 oct 2026).

   `--measure` NO existe en este fichero: es de `blog.css`. Aquí la medida
   va en ch explícitos o la regla se evalúa como inválida y no limita nada. */
.cartera__pie {
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 68ch;
}

/* Enlace de texto, NO botón: la conversión de la página es la reunión y
   un segundo control compitiendo con ella la diluye. Es la misma razón
   por la que los arcos de la arcada del hero no son enlaces. */
.cartera__enlace {
  display: inline-block;
  margin-left: 6px;
  font-weight: 500;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cartera__enlace:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Cuatro celdas en fila dejan de caber: a 860px cada una baja de 200px y
   "Tiempo medio de respuesta" se parte en tres líneas, que descuadra la
   línea base de los otros tres rótulos. En 2×2 la cifra conserva su cuerpo.
   NO se apila a una sola columna: cuatro números en vertical se leen como
   una lista, y lo que esta pieza dice es justamente que son cuatro. */
@media (max-width: 860px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El filete vertical ahora solo va entre la columna 1 y la 2, así que lo
     pierden TODOS los impares, no solo el primero. Empata en especificidad
     con `.kpi:first-child` (0,2,0) y gana por ir después. */
  .kpi:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  /* La separación entre las dos filas la ponen los de abajo: el contenedor
     solo dibuja sus dos extremos. */
  .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  /* Con dos columnas sobre 375px cada celda mide ~165px: la sangría se come
     el ancho que necesita el rótulo, y la cifra a 41,6px deja de caber en
     cuanto lleva unidad ("< 2 h", "93 %"). */
  .kpi {
    padding: 24px 14px;
  }

  .kpi__cifra {
    font-size: 2.1rem;
  }
}

/* ---------- Puerta a la calculadora ----------
   Tarjeta marrón sobre crema. El marrón es el suelo de `solucion.html`:
   la pieza tiene que leerse como un objeto traído de allí, no como una
   sección más de la landing. Por eso NO va a sangre — pegada al verde de
   `.process` serían dos suelos oscuros seguidos y se perdería el corte.

   `--acento-claro` es la MISMA corrección de contraste que hace
   `solucion.css`: el terracota del dossier sobre este marrón da 3,1:1 y
   no llega al 4,5:1 que pide el texto pequeño; este tono da 6,3:1. Es
   contraste sobre fondo oscuro, NO un repintado de marca: en fondo claro
   se sigue usando `--orange` en todas partes.

   El botón va con `.btn--light` (crema sobre marrón, 11,7:1). El `.btn`
   normal es verde, y verde sobre marrón da 1,0:1 — literalmente invisible. */

/* ---------- La vitrina ----------
   La única banda fotográfica a sangre de la landing que NO lleva velo
   ni degradado: la foto entra entera y el contraste lo resuelve la
   tarjeta, que es opaca. De ahí la regla que gobierna este bloque:
   TODO el texto de la banda vive dentro de `.calculo`. Si alguien
   cuelga una línea suelta sobre la foto, hará falta un velo y la
   decisión del usuario era justamente no tenerlo.

   La tarjeta se estrecha a 940px (el `.container` mide 1180) para que
   la sala se vea por los lados: a 1280 son 170px de foto a cada lado
   en vez de 50. El aire de arriba y abajo es el que ocupaba la antigua
   sección `#buildpat`, retirada aquí. */
.calculo-wrap {
  padding: 128px 0;
  background-color: var(--cream);          /* repliegue si la foto no carga */
  background-image: url("assets/home/sala-abierta-1400.webp");
  background-repeat: no-repeat;
  background-size: cover;
  /* 28% y no "center": a la mitad vertical el techo se parte por el
     medio. Con 28% la banda de arriba queda la moldura entera y la de
     abajo la espiga del suelo limpia, así que la sala se lee como sala
     y no como un recorte. Comprobado contra 45% y 68%. */
  background-position: center 28%;
}

.calculo {
  --acento-claro: #f2a17f;
  --filete: rgba(255, 240, 217, 0.22);
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  gap: 34px 60px;
  align-items: center;
  padding: 50px 54px;
  border-radius: var(--radius);
  background: var(--brown);
  color: var(--cream);
}

.calculo .eyebrow { color: var(--acento-claro); }

.calculo h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  color: var(--cream);
}

.calculo__entrada {
  margin: 18px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 240, 217, 0.72);
}

/* La firma del bloque. Sustituye a la antigua sección "Nuestra historia"
   (`#buildpat`), que se retiró: la continuidad de marca sigue publicada
   en la FAQ «¿Casa Badé y Buildpat son la misma empresa?», en su FAQPage,
   en el pie («Antes Buildpat») y en `llms.txt`, así que las tres fuentes
   del GEO siguen contando lo mismo.

   Va DENTRO de la tarjeta, no debajo: la tarjeta es la única superficie
   opaca de la vitrina. Y va bajo el `--filete` que la tarjeta ya define
   —cero recursos nuevos—, en el mismo `rgba(255,240,217,.72)` de
   `.calculo__entrada`, que es el cuerpo secundario de esta superficie. */
.calculo__firma {
  grid-column: 1 / -1;
  max-width: 72ch;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--filete);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 240, 217, 0.72);
}

.calculo__firma strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--cream);
}

/* La cifra va en caja, no subrayada: con el raíl inmediatamente debajo,
   una línea horizontal de más se lee como una segunda pista del mismo
   control. Ya pasó en `solucion.css` y el usuario lo reportó como bug. */
.calculo__medida {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 17px;
  border: 1px solid var(--filete);
  border-radius: var(--radius);
  background: rgba(255, 240, 217, 0.05);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.calculo__medida:focus-within {
  border-color: var(--acento-claro);
  background: rgba(242, 161, 127, 0.08);
}

.calculo__cifra {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.calculo__cifra:focus { outline: none; }

/* Las flechitas del `number` compiten con el raíl, que hace lo mismo mejor. */
.calculo__cifra::-webkit-outer-spin-button,
.calculo__cifra::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calculo__cifra { -moz-appearance: textfield; appearance: textfield; }

.calculo__unidad {
  flex: none;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 240, 217, 0.62);
}

/* Única línea horizontal del bloque, y se rellena en terracota hasta el
   pulgar. `--pct` lo escribe el script de `index.html`; el 0% de
   respaldo evita que la pista salga entera de color si el JS no corre. */
.calculo__rail {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 24px 0 0;
  background: none;
  --pct: 0%;
  --pista: linear-gradient(to right,
             var(--accent) 0 var(--pct),
             var(--filete) var(--pct) 100%);
}

.calculo__rail::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--pista);
}

.calculo__rail::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--pista);
}

/* El aro crema despega el pulgar del relleno terracota: sin él, la mitad
   recorrida se come el control y no se ve dónde está. */
.calculo__rail::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 3px solid var(--cream);
  border-radius: 999px;
  background: var(--accent);
  cursor: grab;
}

.calculo__rail::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--cream);
  border-radius: 999px;
  background: var(--accent);
  cursor: grab;
}

.calculo__rail:active::-webkit-slider-thumb { cursor: grabbing; }

/* El foco global es terracota, que sobre marrón casi no se ve. */
.calculo__rail:focus-visible,
.calculo__cifra:focus-visible {
  outline: 3px solid var(--acento-claro);
  outline-offset: 6px;
  border-radius: 999px;
}

.calculo__btn {
  display: block;
  margin-top: 28px;
  text-align: center;
}

/* ---------- Confianza ---------- */

.trust {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.trust h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 22px;
}

.trust p { color: var(--muted); }

/* ---------- CTA final ---------- */

.cta {
  background: var(--cream-alt);
  border-top: 1px solid var(--line);
  padding: 108px 0;
}

.cta__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.cta h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 20px;
  color: var(--green);
}

.cta p {
  color: var(--muted);
  margin-bottom: 34px;
}

.cta .btn--light {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

.cta .btn--light:hover { background: var(--green-soft); }

.cta__micro {
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 0.88rem;
  color: var(--muted);
  opacity: 0.85;
}

/* ---------- Footer ---------- */

.footer {
  padding: 60px 0;
  border-top: 1px solid var(--line);
}

.footer__inner { text-align: center; }

.logo--footer {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto 24px;
}

.footer p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 6px;
}

/* La línea legal lleva colgado el acceso al blog, separado por un hairline
   vertical: el mismo recurso que separa los campos de la ficha del blog.
   En móvil los dos trozos no caben en una línea, así que envuelven; el
   separador se retira en el breakpoint de 480px para no colgar suelto. */
/* `p.` no es cosmético: `.footer p` (0,1,1) le ganaba a `.footer__legal`
   (0,1,0) y el font-size de 0.84rem nunca llegaba a aplicarse. */
.footer p.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 0.84rem;
  opacity: 0.7;
}

.footer__legal a {
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer__legal a:hover { color: var(--accent); }

/* ---------- Servicios: la enumeración, bajo la puerta (21 oct 2026) ----------
   ERA UNA MATRIZ DE OCHO CELDAS con filetes de 1px, y el usuario pidió
   retirarla: *«con un formato muy integrado en esa sección pero a la vez
   bonito, sin que canse la vista como actualmente»*.

   Tenía razón, y el motivo es nuevo: la matriz nació cuando esta sección
   eran cuatro tarjetas de texto. Ahora encima hay una PUERTA —un arco de
   560px con su interior de color— y debajo ocho cajas con filete. Dos
   rejillas cerradas, una sobre otra, compitiendo. La de abajo sobra.

   Lo que queda es una sola línea que fluye y se parte sola, centrada en el
   mismo eje que la puerta. Ocho servicios leídos del tirón dicen «esto es un
   paquete» mejor que ocho casillas, que es justo lo que la frase de encima
   promete («bajo un único interlocutor»). Cero cajas, cero filetes, cero
   relleno al hover: la sección ya tiene su objeto, y es el arco.

   El punto de separación es terracota y es DECORATIVO: va en un `::before`,
   no en el DOM, así que no se lee ni cuenta como contenido. Por eso puede
   ir en `--accent` sin cumplir el 4,5:1 de texto; los servicios sí van en
   `--brown`, que da 10,2:1 contra este suelo. */

.services-block { margin-top: 64px; }

.services-block .list__intro {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.services {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68ch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brown);
}

/* El punto va como `::after` del ítem ANTERIOR, no como `::before` del
   siguiente. Con `::before` el punto viaja con su <li> al partir de línea y
   aparece huérfano abriendo el renglón; con `::after` se queda siempre al
   final del renglón, que es donde una separación tiene sentido. Probado:
   con `::before` salían tres puntos abriendo línea. */
.services li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 15px;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: 0.22em;
}

@media (max-width: 700px) {
  .services { font-size: 0.95rem; }
  .services li:not(:last-child)::after { margin: 0 11px; }
}

/* ---------- Preguntas frecuentes: la columnata ----------

   El isotipo son dos arcos, uno macizo y uno de contorno. Aquí ese par
   deja de ser adorno y pasa a ser el indicador de estado: cerrada = arco
   de contorno, abierta = arco macizo en terracota. Abrir una pregunta
   mueve la marca de un arco del isotipo al otro.

   Nueve reglas horizontales idénticas era lo que hacía el bloque monótono.
   Se sustituyen por UN raíl vertical con nueve arcos colgados: una
   columnata. Los arcos tapan el raíl con su propio fondo (--cream-alt,
   el de .section--alt), así que si esta sección cambia de fondo hay que
   actualizar `background` en .faq__mark o el raíl se verá cruzarlo.       */

.faq {
  position: relative;
  max-width: 880px;
  /* interpolate-size permite animar block-size de 0 a auto (Chrome 129+).
     Donde no exista, el contenido aparece con el fade de faqIn y ya. */
  interpolate-size: allow-keywords;
}

/* El raíl va por tramos, uno por fila, no de una pieza en el contenedor:
   así se ancla al 50% de la fila, que es exactamente el centro del arco
   (align-items:center), y sigue cuadrando cuando la pregunta ocupa dos
   líneas en móvil. Con un raíl único habría que recalcular top/bottom en
   cada breakpoint. Primera y última fila arrancan y mueren en su arco
   para que no cuelgue ningún hairline suelto. */
.faq__row::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.faq__item:first-child .faq__row::before { top: 50%; }
.faq__item:last-child .faq__row::before { bottom: 50%; }

/* La fila clicable. list-style:none + ::-webkit-details-marker quitan
   el triángulo nativo en todos los motores. */
.faq__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
}

.faq__row::-webkit-details-marker { display: none; }

.faq__mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 31px;
  height: 21px;
  border: 2px solid var(--accent);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: var(--cream-alt);
  transition:
    background-color 0.42s var(--ease),
    height 0.42s var(--ease),
    transform 0.42s var(--ease);
}

.faq__q {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--green);
  text-wrap: balance;
  transition: transform 0.34s var(--ease), color 0.34s var(--ease);
}

/* El desplazamiento de 6px al pasar por encima es el mismo gesto que las
   filas del registro del blog: una fila que se abre hacia la derecha. */
.faq__row:hover .faq__q,
.faq__row:focus-visible .faq__q { transform: translateX(6px); color: var(--brown); }
.faq__row:hover .faq__mark { transform: translateY(-2px); }
.faq__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Abierta: el arco se rellena y crece. Es el arco macizo del isotipo. */
.faq__item[open] > .faq__row .faq__mark {
  height: 26px;
  background: var(--accent);
}

.faq__item[open] > .faq__row .faq__q { color: var(--accent); }

/* La hornacina: se abre una puerta y se ve el interior en verde
   corporativo. El radio superior repite el arco. */
.faq__a {
  margin: 0 0 26px 53px;
  padding: 26px 32px 28px;
  background: var(--green);
  color: var(--cream);
  border-radius: 34px 34px var(--radius) var(--radius);
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 62ch;
}

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

.faq__item[open] .faq__a { animation: faqIn 0.45s var(--ease) both; }

/* Animación real de altura donde el navegador la soporta. Sin esto el
   <details> salta de golpe; con esto la columnata se abre fluida. */
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.45s var(--ease),
      content-visibility 0.45s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* ---------- Contacto en claro ----------
   Correo y teléfono visibles, no solo dentro del JSON-LD: los
   asistentes de IA leen el texto de la página, y una empresa sin
   vía de contacto rastreable no se recomienda.                */

.cta__contact {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.footer__nap {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 16px 0 20px;
  font-size: 0.92rem;
  color: var(--muted);
}

.cta__contact a,
.footer__nap a {
  color: var(--green);
  font-weight: 500;
  border-bottom: 1px solid rgba(39, 51, 35, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cta__contact a:hover,
.footer__nap a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .arcade { max-width: 440px; }
  .section--split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .section--split .section__head { position: static; }

  /* La tarjeta pasa a una columna antes que el resto: con la columna de
     mandos a 350px fijos, el titular se parte en tres líneas mucho antes
     de que se acabe el ancho. */
  .calculo {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 42px 34px;
    max-width: none;
  }

  /* Sin columna de aire a los lados, la tarjeta ocupa el contenedor y de
     la foto solo quedan las bandas de arriba y abajo: con el fichero de
     1400 se pagaría el doble por la mitad de superficie visible. */
  .calculo-wrap {
    padding: 92px 0;
    background-image: url("assets/home/sala-abierta-700.webp");
    background-position: center 40%;
  }
}

@media (max-width: 860px) {
  .nav__toggle { display: block; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0 28px;
    background: var(--orange);
    border-bottom: 1px solid rgba(75, 42, 24, 0.18);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.4s var(--ease), visibility 0.4s;
  }

  /* 6 enlaces x ~61px = 365px reales. Si añades otro, sube este valor
     o el menú lo recorta por abajo sin avisar. */
  .header.is-menu-open .nav {
    max-height: 400px;
    visibility: visible;
  }

  .nav a {
    padding: 17px 0;
    border-top: 1px solid rgba(255, 240, 217, 0.2);
  }

  .nav a::after { display: none; }

  /* En vertical los enlaces ya van separados por `border-top`; el filete
     vertical no significa nada, así que Lugares se marca engordando su
     propio muro en vez de añadir otro.
     Va con `.nav a.nav__aparte` (0,2,1) porque `.nav a` (0,1,1) le gana a
     `.nav__aparte` a secas (0,1,0) aunque vaya después. */
  .nav__aparte::before { display: none; }
  .nav a.nav__aparte { border-top-color: rgba(255, 240, 217, 0.55); }

  .header .btn--small { display: none; }
  .nav__cta { display: block; }

  .hero { padding: 64px 0 68px; }
  .services-block { margin-top: 52px; }
  .faq__row { gap: 18px; padding: 20px 0; }
  .faq__q { font-size: 1.04rem; }
  .faq__a { margin-left: 49px; padding: 22px 24px 24px; }
  .section { padding: 76px 0; }
  .process { padding: 76px 0; }
  .cta { padding: 80px 0; }
  .quote { padding: 68px 0; }
  /* En vertical la tarjeta se come el ancho entero del contenedor y de
     la sala solo quedan las bandas de arriba y abajo: con 78px parecían
     una textura, con 100px se lee la moldura arriba y la espiga abajo. */
  .calculo-wrap { padding: 100px 0; }

  /* El margen negativo de `.tesis` cancela el `padding-bottom` de `.section`,
     que aquí arriba acaba de bajar a 76px. Si no se corrige, el suelo verde se
     sale 28px por debajo y se mete ENCIMA de `#que-hacemos`. Van emparejados:
     si cambia el relleno de `.section`, cambia este número. */
  .tesis { margin: 64px 0 -76px; padding: 64px 0; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  /* `justify-content` NO es redundante con `text-align`: `.btn--puerta` es
     `inline-flex`, y ahí el `text-align` del padre no centra a los hijos.
     Sin esta línea el rótulo y la flecha quedan pegados a la izquierda de
     una pastilla de ancho completo. */
  .hero__actions .btn { width: 100%; text-align: center; justify-content: center; }
  .logo__word { width: 124px; }
  .logo__word img { width: 124px; height: 20px; }
  .logo__word::after {
    -webkit-mask-size: 124px 20px;
    mask-size: 124px 20px;
  }
  .arcade { gap: 12px; }
  .arcade__item:nth-child(1) .arcade__frame { height: 112px; }
  .arcade__item:nth-child(2) .arcade__frame { height: 164px; }
  .arcade__item:nth-child(3) .arcade__frame { height: 90px; }
  .arcade__label { font-size: 0.6rem; letter-spacing: 0.07em; }
  .cards { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  /* La hornacina se acerca al raíl pero no lo tapa: el raíl vive en x=15px
     y con menos de ~34px de sangría el verde lo comería. */
  .faq__a { margin-left: 34px; padding: 20px 20px 22px; }
  .logo--footer { width: 158px; }
  /* La línea legal ya no cabe entera: el hairline vertical quedaría
     colgando al principio de la segunda línea. */
  .footer__legal { gap: 10px; }
  .footer__legal a { padding-left: 0; border-left: 0; }
  .calculo { padding: 34px 24px; }
  .calculo__cifra { font-size: 1.8rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* LA PUERTA DE LOS PASOS: se anulan las TRANSICIONES, nunca el
     `transform`. Aquí abierta ES `translateY(-101%)`, así que un
     `transform: none` dejaría la hoja BAJADA y taparía el paso para
     siempre. Es la misma trampa que `.puerta__hoja` en `solucion.css`,
     pero al revés, y por eso va en su propia regla y no en la lista de
     arriba, que lleva `transform: none !important`.
     El JS, por su parte, detecta `prefers-reduced-motion` y cambia de paso
     de golpe, sin cerrar ni abrir. */
  .pasos__hoja,
  .pasos__sala,
  .pasos__flecha,
  .pasos__ficha { transition: none !important; }

  .reveal__inner,
  .hero .eyebrow,
  .hero__sub,
  .hero__text,
  .hero__actions .btn,
  .arch,
  .arcade__label,
  .logo__iso img,
  .logo__word img,
  .logo:hover .logo__word::after,
  .faq__item[open] .faq__a {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* La foto de cada puerta sigue apareciendo al hover, pero sin desplazamiento.
     NO se puede meter `.arch__foto` en la lista de arriba: esa lista fuerza
     `opacity: 1 !important` y dejaría las tres fotos visibles para siempre,
     que es justo lo que el hover existe para evitar. */
  .arch__foto { transform: none; transition: opacity 0.2s linear; }

  /* La flecha de la puerta deja de avanzar. Va APARTE de la lista de arriba
     por el mismo motivo que `.arch__foto`: la lista lleva `!important` y el
     `transform: none` de ahí no apaga la transición del hijo, solo el estado
     inicial del padre. El baño de terracota al hover se queda: es la única
     señal de que el control responde. */
  .btn__flecha { transition: none; }

  .btn--puerta:hover .btn__flecha { transform: none; }

  /* El acordeón sigue funcionando, pero abre y cierra de golpe: sin
     transición de altura, sin desplazamiento de la pregunta al hover. */
  .faq__row,
  .faq__q,
  .faq__mark {
    transition: none !important;
    transform: none !important;
  }

  @supports selector(::details-content) {
    .faq__item::details-content { transition: none !important; }
  }

  /* El filete aparece entero de golpe en vez de recorrer la línea. */
  .list.list--survey li,
  .list.list--survey li::before { transition: none !important; }
}