/* ===========================================================================
   CONWELL PARTNERS — sistema visual
   ===========================================================================

   DE DÓNDE SALE ESTO. Los patrones (cabecera pegajosa, tarjeta de propiedad,
   tarjeta de demanda, escala tipográfica de cuatro niveles, botones) son los de
   depaltoke.com, portados de Tailwind a CSS plano porque este sitio es estático
   y se despliega arrastrando una carpeta a Netlify. Lo que cambia es la
   PERSONALIDAD: DepAltoke es un marketplace y se ve como tal; Conwell es un
   bróker y se ve editorial — tinta, papel, filetes, cifras tabulares y
   fotografía de arquitectura a sangre.

   LA MARCA ES VERDE Y NEGRA, no navy y dorada. El navy con dorado de la landing
   anterior es de la identidad vieja; la actual es el imagotipo de perro verde
   sobre wordmark negro (cambió el 15-sep-2026). El verde se usa POCO y siempre
   como acento: es lo que impide que esto parezca DepAltoke con otro logo.
   =========================================================================== */

/* ── Reinicio mínimo ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Tinta: el negro tiene un sesgo verde de un pelo para emparentar con la
     marca sin que se lea como color. */
  --tinta:       #0a0d0b;
  --tinta-800:   #121714;
  --tinta-700:   #1c231e;
  --tinta-600:   #2a332c;

  /* Papel: marfil cálido, no blanco. El blanco puro es de producto; el marfil
     es de publicación. */
  --papel:       #f7f6f2;
  --papel-2:     #edebe3;
  --papel-3:     #e2dfd5;

  /* El verde del isotipo. */
  --verde:       #4ce05f;
  --verde-600:   #2fbf45;
  --verde-700:   #1f9a34;
  --verde-hondo: #0c2a14;

  --humo:        #6e756e;   /* texto secundario sobre papel */
  --humo-claro:  #9aa39b;   /* texto secundario sobre tinta */

  --linea:         rgba(10, 13, 11, 0.16);
  --linea-suave:   rgba(10, 13, 11, 0.08);
  --linea-oscura:  rgba(255, 255, 255, 0.16);
  --linea-oscura-suave: rgba(255, 255, 255, 0.08);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho: 1280px;
  --gutter: 20px;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }

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

body {
  font-family: var(--texto);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--verde); color: var(--tinta); }

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

/* ── Escala tipográfica ──────────────────────────────────────────────────────
   Cuatro niveles y dos accesorios, igual que en DepAltoke. Los titulares de
   marca van aparte, con clamp() propio: son nivel «display», donde el tamaño lo
   manda la composición y no el documento. */

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* EL MÍNIMO ES 2,5rem Y NO 2,9 POR UNA RAZÓN MEDIDA, no por gusto: a 46 px, en
   una pantalla de 375, «TU PROPIEDAD.» ocupa 374 px y solo hay 335, así que el
   titular se partía en cuatro líneas y «TU» se quedaba solo. A 40 px las dos
   frases miden 319 y 310 y cada una cabe en su línea, que es como está escrito.
   De 380 px de ventana en adelante manda el término en `vw` y el ancho crece más
   deprisa que el texto, así que sigue cabiendo. */
.titular-hero { font-size: clamp(2.5rem, 10.5vw, 8.2rem); font-weight: 900; }
.titular      { font-size: clamp(2.1rem, 6vw, 4.6rem); }
.titular-medio{ font-size: clamp(1.7rem, 4vw, 3rem); }
.titular-chico{ font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.025em; }

.cuerpo      { font-size: 1.0625rem; line-height: 1.65; }
.cuerpo-alto { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; }
.nota        { font-size: 0.875rem; line-height: 1.5; }
.pie         { font-size: 0.75rem; line-height: 1.45; }

.tenue        { color: var(--humo); }
.verde        { color: var(--verde-700); }
.verde-vivo   { color: var(--verde); }

.cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* El rótulo: mono, versalitas anchas y un filete delante. Es la firma editorial
   del sitio y aparece en cada sección. */
.rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}
.rotulo::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.sobre-tinta .rotulo { color: var(--humo-claro); }
.rotulo--verde { color: var(--verde-700); }
.sobre-tinta .rotulo--verde { color: var(--verde); }

/* ── Estructura ──────────────────────────────────────────────────────────── */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.seccion--ajustada { padding-block: clamp(48px, 6vw, 88px); }

.sobre-tinta { background: var(--tinta); color: var(--papel); }
.sobre-tinta .tenue { color: var(--humo-claro); }
.sobre-papel-2 { background: var(--papel-2); }

.filete { height: 1px; background: var(--linea); border: 0; }
.sobre-tinta .filete { background: var(--linea-oscura); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.boton:active { transform: translateY(1px); }

.boton--verde { background: var(--verde); color: var(--verde-hondo); }
.boton--verde:hover { background: #3ed452; }

.boton--tinta { background: var(--tinta); color: var(--papel); }
.boton--tinta:hover { background: var(--tinta-700); }

.boton--claro { background: var(--papel); color: var(--tinta); }
.boton--claro:hover { background: #fff; }

.boton--linea { border: 1px solid var(--linea); color: var(--tinta); }
.boton--linea:hover { border-color: var(--tinta); }

.sobre-tinta .boton--linea,
.boton--linea-clara { border: 1px solid var(--linea-oscura); color: var(--papel); }
.sobre-tinta .boton--linea:hover,
.boton--linea-clara:hover { border-color: var(--papel); background: rgba(255,255,255,.06); }

.boton--chico { min-height: 42px; padding: 0 18px; font-size: 0.75rem; }

/* El enlace con flecha. Es el CTA de menor jerarquía y el más repetido. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap .18s ease;
}
.enlace-flecha:hover { gap: 16px; }
.enlace-flecha svg { flex: none; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===========================================================================
   CABECERA
   ===========================================================================
   Misma mecánica que el SiteHeader de DepAltoke: pegajosa arriba, con filete
   inferior, logo a la izquierda y navegación que se pliega en un cajón por
   debajo del punto en que la fila deja de caber. Lo que cambia es el fondo:
   arranca transparente sobre el hero y se vuelve sólida al bajar, porque aquí
   el primer bloque es una fotografía a sangre y una barra blanca la cortaría. */

.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
@media (min-width: 900px) { .barra__fila { height: 88px; } }

.barra--solida {
  background: rgba(247, 246, 242, 0.93);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--linea);
}

/* ⚠ EL LOGO NO SE RECOLOREA NI SE INVIERTE. Se probó invertirlo sobre el hero y
   el perro verde salía magenta: el archivo oficial viene con fondo BLANCO y sin
   canal alfa, así que la única forma honesta de ponerlo sobre tinta es la misma
   que ya usa `LogoConwell` en DepAltoke — enmarcarlo en un chip blanco. El
   rectángulo del archivo se vería igual; así al menos es una decisión, con sus
   esquinas redondeadas, en vez de un recorte que parece un error. */
.chip-logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 6px 10px;
}

/* EL LOGO LLENA EL CHIP, y el chip es lo que se ajusta a él.
   El chip no tiene ancho propio: es un inline-flex, así que mide lo que mide la
   imagen más su relleno. Por eso la proporción entre el logo y el blanco que lo
   rodea NO se decide con un ancho, se decide con el relleno, y el relleno se
   recortó en vertical (5 → 4) para que el logo pudiera crecer sin que el chip
   creciera igual.

   EL ALTO DEL <img> BAJA Y EL LOGO SE VE MÁS GRANDE, que sólo parece una
   contradicción. El header usa `conwell-partners-imagotipo-header.png`, que es
   el imagotipo recortado a su contenido: antes el archivo era 800x321 con el
   dibujo ocupando el 58 % del alto, así que de 70 px pedidos 30 eran lienzo
   vacío. Ahora el alto que se pide es alto de logo.

   LAS CUENTAS, porque la barra no puede crecer:
     móvil     44 de logo + 20 de relleno = 64 de chip en una barra de 76 → 6 px
               de aire arriba y abajo. El chip mide 187 y el logo 159, un 85 %.
               Dibujo visible: 44 px, contra los 33,6 de antes.
     ≥ 900 px  58 de logo + 20 de relleno = 78 de chip en una barra de 88 → 5 px
               de aire. 238 de chip y 210 de logo, un 88 %.
               Dibujo visible: 58 px, contra los 40,5 de antes.

   EL RELLENO SUBE DE 4/9 A 10/14 justamente porque el recorte es al ras: sin
   él, el trazo de la «c» tocaría el canto blanco del chip.

   ⚠ NO SE DEFORMA NUNCA: se fija la altura y el ancho sale de la proporción
   (3,6207). El PNG mide 840x232, así que a 58 px de alto cubre una pantalla de
   densidad cuádruple. */
.barra__logo { padding: 10px 14px; }
.barra__logo img { height: 44px; width: auto; }
@media (min-width: 900px) { .barra__logo img { height: 58px; } }

.barra__nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1100px) { .barra__nav { display: flex; } }

.barra__enlace {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--papel);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.barra--solida .barra__enlace { color: var(--tinta); }
.barra__enlace:hover { border-bottom-color: currentColor; }

.barra__derecha { display: flex; align-items: center; gap: 12px; }
.barra__cta { display: none; }
@media (min-width: 640px) { .barra__cta { display: inline-flex; } }
.barra:not(.barra--solida) .barra__cta { background: var(--verde); color: var(--verde-hondo); }

/* Hamburguesa */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
}
@media (min-width: 1100px) { .hamburguesa { display: none; } }
.hamburguesa span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--papel);
  transition: background-color .25s ease, transform .25s ease, opacity .2s ease;
}
.barra--solida .hamburguesa span { background: var(--tinta); }

.cajon-abierto .hamburguesa span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cajon-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.cajon-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.cajon-abierto .hamburguesa span { background: var(--papel); }

/* Cajón móvil */
.cajon {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--tinta);
  color: var(--papel);
  padding: 96px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.cajon-abierto .cajon { opacity: 1; visibility: visible; transform: none; }
.cajon-abierto { overflow: hidden; }
.cajon__enlace {
  font-family: var(--display);
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  padding-block: 13px;
  border-bottom: 1px solid var(--linea-oscura-suave);
}
.cajon__pie { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ===========================================================================
   HERO
   =========================================================================== */
/*
   CINCO ELEMENTOS Y NINGUNO MÁS: rótulo, titular, subtitular, dos botones y el
   acceso de brokers. Aquí había además una tira de cuatro datos (operación,
   cobertura, inmuebles, tecnología) y se quitó: competía con el único botón que
   importa y convertía la primera pantalla en un resumen. Lo que decía sigue
   dicho —la cobertura la demuestra el mapa, los tipos de inmueble el formulario,
   la tecnología la sección del CRM—, y decirlo dos veces no es decirlo mejor.
*/
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
  isolation: isolate;
}

/* El lienzo desborda el hero por arriba y por abajo para que el paralaje no
   descubra un borde. 14% de margen contra un desplazamiento máximo del 12%. */
.hero__lienzo {
  position: absolute;
  inset: -14% 0;
  will-change: transform;
}
/* `<picture>` es inline por defecto y sin esto la foto no tendría contra qué
   resolver su `height: 100%`. */
.hero__lienzo picture { display: block; width: 100%; height: 100%; }
.hero__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  /* MÓVIL: el recorte vertical se lleva casi todo el ancho, así que se encuadra
     sobre la persona que camina —el sujeto— y no sobre el centro geométrico. */
  object-position: 47% 46%;
}
@media (min-width: 768px) { .hero__foto { object-position: 50% 42%; } }

/*
   DOS VELOS, Y NINGUNO ES DECORACIÓN.

   ARRIBA porque esta fotografía tiene el techo y la pared blancos justo donde va
   la barra: sin él, unos enlaces de color papel sobre una pared blanca no se
   ven.

   ABAJO porque el titular cae sobre el suelo claro de la sala. El degradado
   empieza a existir a un tercio de altura —por encima están las personas, que
   es lo que hay que ver— y llega a 0,95 en el borde inferior.

   ⚠ LAS PARADAS NO SON A OJO: SALEN DE MEDIR. Se muestrearon los píxeles reales
   de la fotografía que caen detrás de cada texto y se les aplicó la opacidad
   que el degradado tiene a esa altura. Contra el píxel MÁS CLARO de cada banda
   (el peor caso, no el promedio), a 1440x900:

     enlaces de la barra   6,5:1   (mínimo 4,5 — texto pequeño)
     titular blanco        8,2:1   (mínimo 3 — texto grande)
     titular verde         6,9:1   (mínimo 3)
     subtitular           10,7:1   (mínimo 3)
     enlace de brokers     9,9:1   (mínimo 4,5)

   En un teléfono de 375x667 los cinco siguen pasando, con el titular verde en
   3,9:1 como el más justo. Si algún día se cambia la fotografía, ESTAS CUENTAS
   NO SE HEREDAN: hay que volver a medir, porque dependen de lo clara que sea la
   imagen justo detrás de cada línea.
*/
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,13,11,.70) 0%, rgba(10,13,11,.64) 13%, rgba(10,13,11,.30) 22%, rgba(10,13,11,0) 34%),
    linear-gradient(to top, rgba(10,13,11,.95) 0%, rgba(10,13,11,.90) 26%, rgba(10,13,11,.80) 44%, rgba(10,13,11,.58) 58%, rgba(10,13,11,.24) 70%, rgba(10,13,11,.06) 80%, rgba(10,13,11,0) 90%);
}

.hero__contenido {
  position: relative;
  width: 100%;
  padding-bottom: clamp(52px, 7vw, 96px);
  padding-top: 140px;
}
.hero__titular { margin-top: 18px; }
.hero__titular span { display: block; }
.hero__titular .segunda { color: var(--verde); }
.hero__texto {
  margin-top: 22px;
  max-width: 44ch;
  color: rgba(247,246,242,.88);
}
.hero__acciones { margin-top: clamp(28px, 3.5vw, 40px); }

/* En un teléfono los dos botones van apilados y a todo el ancho. Con el ancho
   de su propio texto quedaban de 273 y 247 px, dos escalones distintos que no
   significan nada: la jerarquía la dice el color, no el recorte. */
@media (max-width: 639px) {
  .hero__acciones { display: grid; gap: 10px; }
  .hero__acciones .boton { width: 100%; }
}
.hero__broker { margin-top: 22px; }

/*
   LA ENTRADA. Una sola vez, al cargar, escalonada de 70 en 70 ms para que la
   jerarquía se lea en el orden en que está escrita. 14 px y opacidad: nada
   vuela, nada rebota, nada se repite al volver a subir.

   ES CSS PURO Y NO LLEVA UNA CLASE PUESTA POR EL GUION, al revés que el
   `.aparece` del resto de la página. Aquí la diferencia importa: el hero es lo
   primero que se pinta, y una clase que llega con el script se arriesga a
   enseñar el titular y esconderlo medio fotograma después. La animación arranca
   con el primer render y `forwards` la deja fijada al terminar.
*/
.hero__entra {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: entra .62s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero__entra:nth-child(1) { animation-delay: .05s; }
.hero__entra:nth-child(2) { animation-delay: .12s; }
.hero__entra:nth-child(3) { animation-delay: .19s; }
.hero__entra:nth-child(4) { animation-delay: .26s; }
.hero__entra:nth-child(5) { animation-delay: .33s; }

@keyframes entra {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__entra { opacity: 1; transform: none; animation: none; }
  .hero__lienzo { transform: none !important; }
}

/* ===========================================================================
   CABECERAS DE SECCIÓN
   =========================================================================== */
.cabecera { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .cabecera--partida {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }
}
.cabecera__texto { max-width: 58ch; }

/* ===========================================================================
   MAPA
   =========================================================================== */
.mapa-bloque { display: grid; gap: 36px; align-items: start; }
@media (min-width: 980px) {
  .mapa-bloque { grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 56px; }
}

.mapa-marco {
  position: relative;
  border: 1px solid var(--linea-oscura);
  background:
    radial-gradient(120% 90% at 30% 8%, rgba(76,224,95,.08), transparent 60%),
    var(--tinta-800);
  padding: 14px;
}
/* EL ALTO MANDA, NO EL ANCHO. El Perú es mucho más alto que ancho: dejándolo a
   `width:100%` la silueta se comía la pantalla a lo largo. Se fija el alto y el
   SVG se centra solo dentro del marco. */
.mapa-marco svg { width: 100%; height: clamp(340px, 62svh, 620px); display: block; }

.mapa__zona {
  fill: #333d35;
  stroke: var(--tinta-800);
  stroke-width: 1.6;
  transition: fill .18s ease;
}
.mapa__zona:hover { fill: var(--verde); }
.mapa__zona--conwell    { fill: var(--verde); }
.mapa__zona--abiertas   { fill: #1f6b31; }
.mapa__zona--disponible { fill: #333d35; }

.mapa-etiqueta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: rgba(247,246,242,.55);
  pointer-events: none;
  text-transform: uppercase;
}

/* Las tres capas del mapa nacional. Filas, no chips de color: ver index.html. */
.capas { display: grid; gap: 1px; background: var(--linea-oscura-suave); border: 1px solid var(--linea-oscura-suave); }
.capas li { background: var(--tinta); padding: 14px 16px; display: grid; gap: 3px; }
.capas__n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); }
.capas__t { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.05rem; }
.capas__d { font-size: 0.8125rem; color: var(--humo-claro); }

.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.mapa-leyenda li { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--humo-claro); }
.mapa-leyenda i { width: 11px; height: 11px; display: block; flex: none; }

.mapa-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--linea-oscura-suave);
  border: 1px solid var(--linea-oscura-suave);
}
.mapa-lista li {
  background: var(--tinta);
  padding: 11px 13px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 9px;
}
.mapa-lista i { width: 7px; height: 7px; flex: none; }

/* ===========================================================================
   CADENA — Conwell x DepAltoke
   ===========================================================================
   No es un gráfico: es una lista ordenada con filetes. Se lee igual con y sin
   CSS, y en móvil se apila sin que haya que rehacer nada. */
.cadena { display: grid; gap: 1px; background: var(--linea-oscura-suave); border-block: 1px solid var(--linea-oscura); }
@media (min-width: 760px) { .cadena { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1120px) { .cadena { grid-template-columns: repeat(8, 1fr); } }

.cadena__paso {
  background: var(--tinta);
  padding: 22px 16px 26px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background-color .2s ease;
}
.cadena__paso:hover { background: var(--tinta-800); }
.cadena__n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; color: var(--verde); }
.cadena__t {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: 1.05rem;
  line-height: 1.04;
}
.cadena__d { font-size: 0.8125rem; color: var(--humo-claro); line-height: 1.45; }
.cadena__paso--acento { background: var(--verde-hondo); }
.cadena__paso--acento:hover { background: #0f3519; }
.cadena__paso--acento .cadena__d { color: rgba(247,246,242,.72); }

/* ===========================================================================
   DEMANDA
   =========================================================================== */
.demanda-rejilla {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

/* El patrón de la tarjeta de demanda de DepAltoke: qué busca en grande, dónde
   debajo, presupuesto al pie. Aquí no hay nombre ni foto — son ejemplos del
   formato de una solicitud, no personas. */
.tarjeta-demanda {
  border: 1px solid var(--linea-oscura);
  background: var(--tinta-800);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 186px;
}
.tarjeta-demanda__cabeza {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}
.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  animation: latido 2.6s infinite;
  flex: none;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(76,224,95,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(76,224,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,224,95,0); }
}
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

.tarjeta-demanda__que {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: 1.3rem;
  line-height: 1.02;
}
.tarjeta-demanda__donde { font-size: 0.875rem; color: var(--humo-claro); }
.tarjeta-demanda__pie {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--linea-oscura-suave);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tarjeta-demanda__op {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo-claro);
}
.tarjeta-demanda__precio { font-family: var(--mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   PROCESO DEL PROPIETARIO — filas editoriales numeradas
   =========================================================================== */
.proceso { border-top: 1px solid var(--linea); }
.proceso__fila {
  display: grid;
  gap: 6px 28px;
  padding-block: 24px;
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
  transition: padding-left .25s ease, background-color .25s ease;
}
@media (min-width: 760px) {
  .proceso__fila { grid-template-columns: 76px minmax(0, 310px) minmax(0, 1fr); padding-block: 30px; }
  .proceso__fila:hover { padding-left: 14px; background: var(--papel-2); }
}
.proceso__n { font-family: var(--mono); font-size: 0.8125rem; color: var(--verde-700); letter-spacing: .1em; }
.proceso__t {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.02;
}
.proceso__d { color: var(--humo); font-size: 0.9375rem; max-width: 54ch; }

/* ===========================================================================
   TARJETA DE PROPIEDAD — el patrón de PropiedadCard, en CSS plano
   =========================================================================== */
.cartera-rejilla {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
}
.tarjeta-propiedad {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.tarjeta-propiedad:hover { border-color: var(--tinta); transform: translateY(-2px); }
.tarjeta-propiedad__foto { position: relative; aspect-ratio: 4 / 3; background: var(--papel-3); overflow: hidden; }
.tarjeta-propiedad__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-propiedad__sello {
  position: absolute; top: 12px; left: 12px;
  background: var(--tinta); color: var(--papel);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 9px;
}
.tarjeta-propiedad__cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tarjeta-propiedad__precio { font-family: var(--display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.tarjeta-propiedad__zona { font-size: 0.9375rem; }
.tarjeta-propiedad__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea-suave); display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }

/* El estado sin cartera cargada. No hay inventario inventado: si el JSON está
   vacío, esto es lo que se ve, y dice la verdad. */
.cartera-vacia {
  border: 1px solid var(--linea);
  background: var(--papel-2);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  gap: 18px;
  justify-items: start;
}

/* ===========================================================================
   OPORTUNIDADES PRIVADAS
   =========================================================================== */
.privadas {
  position: relative;
  border: 1px solid var(--linea-oscura);
  background: var(--tinta-800);
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
}
.privadas__rejilla {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
  pointer-events: none;
}
.privadas__contenido { position: relative; display: grid; gap: 28px; }
@media (min-width: 900px) { .privadas__contenido { grid-template-columns: minmax(0,1fr) minmax(0,0.85fr); gap: 56px; align-items: center; } }

.velado { display: grid; gap: 12px; }
.velado__fila {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo-claro);
  border-bottom: 1px dashed var(--linea-oscura-suave);
  padding-bottom: 11px;
}
.velado__barra { height: 9px; background: rgba(255,255,255,.1); flex: 1; min-width: 40px; }

/* ===========================================================================
   MÉTRICAS
   ===========================================================================
   NO HAY NÚMEROS INVENTADOS. Lo que se enseña es QUÉ se mide y dónde está el
   dato vivo, que es depaltoke.com. El día que haya una API pública de métricas,
   estos huecos se rellenan y no cambia nada más. */
.metricas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .metricas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .metricas { grid-template-columns: repeat(4, 1fr); } }
.metrica { background: var(--papel); padding: 24px 22px 28px; display: flex; flex-direction: column; gap: 10px; min-height: 172px; }
.metrica__rot { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--humo); }
.metrica__t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: -0.025em; line-height: 1.05; }
.metrica__d { font-size: 0.875rem; color: var(--humo); margin-top: auto; }

/* ===========================================================================
   RED DE BROKERS
   =========================================================================== */
.condiciones { display: grid; gap: 1px; background: var(--linea-oscura-suave); border: 1px solid var(--linea-oscura-suave); }
@media (min-width: 640px) { .condiciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .condiciones { grid-template-columns: repeat(3, 1fr); } }
.condicion { background: var(--tinta); padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 8px; }
.condicion__v {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-transform: uppercase;
}
.condicion--acento .condicion__v { color: var(--verde); }
.condicion__d { font-size: 0.875rem; color: var(--humo-claro); }

/* ===========================================================================
   CRM
   =========================================================================== */
.crm { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .crm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 60px; } }
.pantalla { border: 1px solid var(--linea); background: var(--papel-2); overflow: hidden; }
.pantalla__barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--linea); background: var(--papel-3); }
.pantalla__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(10,13,11,.18); display: block; }
.pantalla__url { margin-left: 10px; font-family: var(--mono); font-size: 0.6875rem; color: var(--humo); }
.pantalla img { width: 100%; display: block; }

/* El índice de módulos que vive dentro del marco mientras no haya captura. ES
   UNA LISTA, NO UNA PANTALLA DIBUJADA: enumera lo que el producto tiene y lleva
   a entrar en él. Un mockup con datos inventados sería justo lo que esta
   sección promete no hacer. */
.pantalla__cuerpo { padding: clamp(20px, 3vw, 30px); background: var(--papel); }
.pantalla__rotulo {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--humo); margin-bottom: 16px;
}
.pantalla__modulos { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 520px) { .pantalla__modulos { grid-template-columns: repeat(2, 1fr); } }
.pantalla__modulos li {
  background: var(--papel);
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 16px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 0.9375rem; letter-spacing: -0.01em;
  transition: background-color .18s ease;
}
.pantalla__modulos li:hover { background: var(--papel-2); }
.pantalla__n { font-family: var(--mono); font-weight: 400; font-size: 0.625rem; letter-spacing: .1em; color: var(--verde-700); }
.pantalla__pie {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px;
}

/* ===========================================================================
   PILARES
   =========================================================================== */
.pilares { display: grid; gap: 1px; background: var(--linea-oscura-suave); border: 1px solid var(--linea-oscura-suave); }
@media (min-width: 700px) { .pilares { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pilares { grid-template-columns: repeat(4, 1fr); } }
.pilar { background: var(--tinta); padding: 28px 22px 34px; display: flex; flex-direction: column; gap: 10px; min-height: 206px; }
.pilar__n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; color: var(--verde); }
.pilar__t { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.45rem; letter-spacing: -0.035em; line-height: 1; }
.pilar__d { font-size: 0.9375rem; color: var(--humo-claro); }

.lema {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-size: clamp(2rem, 6.6vw, 5.2rem);
  margin-top: clamp(40px, 6vw, 80px);
}
.lema span { display: block; }
.lema .b { color: var(--verde); }

/* ===========================================================================
   FORMULARIOS
   =========================================================================== */
.formulario { display: grid; gap: 16px; }
@media (min-width: 720px) { .formulario { grid-template-columns: repeat(2, 1fr); } }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.sobre-tinta .campo label { color: var(--humo-claro); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
  transition: border-color .18s ease;
}
.sobre-tinta .campo input,
.sobre-tinta .campo select,
.sobre-tinta .campo textarea { border-color: var(--linea-oscura); background: rgba(255,255,255,.03); }
.sobre-tinta .campo select option { color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde-600); outline: none; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.campo textarea { min-height: 92px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--humo); opacity: .8; }

.formulario__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bloque-formulario { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .bloque-formulario { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; } }

/* ===========================================================================
   CTA FINAL
   =========================================================================== */
.cierre { position: relative; background: var(--tinta); color: var(--papel); overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.cierre__velo { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,13,11,.96) 8%, rgba(10,13,11,.58) 100%); }
.cierre__contenido { position: relative; padding-block: clamp(72px, 11vw, 150px); }

.tres-puertas { display: grid; gap: 1px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 760px) { .tres-puertas { grid-template-columns: repeat(3, 1fr); } }
.puerta {
  background: rgba(10,13,11,.78);
  padding: 30px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color .2s ease, color .2s ease;
}
.puerta:hover { background: var(--verde); color: var(--verde-hondo); }
.puerta__t { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.55rem, 3.2vw, 2.2rem); letter-spacing: -0.04em; line-height: 1; }
.puerta__d { font-size: 0.875rem; color: var(--humo-claro); }
.puerta:hover .puerta__d { color: rgba(12,42,20,.78); }

/* ===========================================================================
   PIE
   =========================================================================== */
.pie-sitio { background: var(--tinta); color: var(--papel); padding-block: clamp(48px, 6vw, 80px) 36px; border-top: 1px solid var(--linea-oscura); }
.pie-sitio__alto { display: grid; gap: 40px; }
@media (min-width: 860px) { .pie-sitio__alto { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 48px; } }
.pie-sitio__logo img { height: 30px; width: auto; }
.pie-sitio h3 { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--humo-claro); margin-bottom: 14px; font-weight: 500; }
.pie-sitio ul { display: grid; gap: 9px; }
.pie-sitio ul a { font-size: 0.9375rem; color: rgba(247,246,242,.82); }
.pie-sitio ul a:hover { color: var(--verde); }
.pie-sitio__bajo {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--linea-oscura-suave);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--humo-claro);
}
.sello-depaltoke { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; }
.sello-depaltoke:hover { color: var(--verde); }

/* ===========================================================================
   APARICIÓN AL DESPLAZAR
   ===========================================================================
   Sutil a propósito: 18px y opacidad. Un sitio premium no rebota. Y si no hay
   JavaScript no pasa nada: la clase `.aparece` la pone el guion al arrancar, no
   el HTML, así que sin él todo está visible desde el primer momento. */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===========================================================================
   LA FRANJA CONWELL × DEPALTOKE
   ===========================================================================
   Va pegada al hero, sobre tinta, y ocupa una franja y no una sección: quien
   baja tiene que cruzarla sin que le cueste una pantalla. Dice lo que el rótulo
   del hero no llegaba a decir —qué pone cada marca— y lo dice donde se lee. */
.franja {
  background: var(--tinta);
  color: var(--papel);
  border-bottom: 1px solid var(--linea-oscura-suave);
  padding-block: clamp(22px, 3vw, 34px);
}
.franja__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.franja__par { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.franja__marca { display: grid; gap: 2px; }
.franja__nombre {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.03em; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1;
}
.franja__papel { font-size: 0.8125rem; color: var(--humo-claro); }
.franja__aspa {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--verde);
  line-height: 1;
}
.franja__cta { color: var(--papel); }
.franja__cta:hover { color: var(--verde); }

/* ===========================================================================
   PÁGINAS INTERIORES
   ===========================================================================
   /cartera, /tasacion y /red-de-brokers no llevan hero fotográfico: llevan esta
   cabecera. Es deliberado — la fotografía a sangre es el gesto de la portada, y
   repetirla en cada página la gastaría. Aquí manda el titular y lo que viene
   inmediatamente debajo, que es la razón por la que alguien abrió esa URL. */
.cabecera-pagina {
  background: var(--tinta);
  color: var(--papel);
  padding-top: clamp(116px, 14vw, 168px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--linea-oscura-suave);
}
.cabecera-pagina__texto {
  margin-top: 20px;
  max-width: 52ch;
  color: rgba(247, 246, 242, 0.82);
}
.cabecera-pagina .acciones { margin-top: clamp(26px, 3.5vw, 36px); }

/* La miga: dice dónde está uno sin gastar una barra entera. */
.miga {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--humo-claro);
  margin-bottom: 20px;
}
.miga a { border-bottom: 1px solid transparent; }
.miga a:hover { border-bottom-color: currentColor; color: var(--papel); }

/* La pestaña de la página en la que se está. Sobre la barra transparente de las
   páginas interiores el subrayado verde es lo único que hace falta. */
.barra__enlace[aria-current="page"] {
  color: var(--verde);
  border-bottom-color: var(--verde);
}
.barra--solida .barra__enlace[aria-current="page"] { color: var(--verde-700); border-bottom-color: var(--verde-700); }
.cajon__enlace[aria-current="page"] { color: var(--verde); }

/* ===========================================================================
   WHATSAPP PERSISTENTE
   ===========================================================================
   ES UN ENLACE, NO UN WIDGET: sin JavaScript, sin SDK, sin ventana emergente y
   sin nada que cargar. Va cerrado a icono y se abre al pasar por encima o al
   enfocarlo con el teclado, así que no tapa el contenido mientras se lee.

   ⚠ NO SE PONE EN /gracias.html: quien acaba de enviar el formulario ya tiene el
   botón de WhatsApp en medio de la página, y repetirlo ahí es perseguir a
   alguien que ya escribió.

   EL MENSAJE PRECARGADO LO ESCRIBE CADA PÁGINA EN SU `href`. No hay lógica que
   lo elija: son cuatro URLs distintas en cuatro archivos, que para cuatro casos
   es menos código y menos que mantener que una función. */
.wasap {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 15px;
  border-radius: 26px;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--linea-oscura);
  box-shadow: 0 6px 24px rgba(10, 13, 11, .28);
  transition: gap .22s cubic-bezier(.16,1,.3,1), padding .22s cubic-bezier(.16,1,.3,1),
              background-color .2s ease, color .2s ease, transform .2s ease;
}
.wasap svg { flex: none; width: 21px; height: 21px; }
.wasap__texto {
  font-family: var(--display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .22s cubic-bezier(.16,1,.3,1);
}
.wasap:hover, .wasap:focus-visible {
  background: var(--verde);
  color: var(--verde-hondo);
  border-color: var(--verde);
  gap: 10px;
  padding-right: 20px;
}
.wasap:hover .wasap__texto, .wasap:focus-visible .wasap__texto { max-width: 140px; }
.wasap:active { transform: translateY(1px); }

/* Con el cajón abierto estorba y además queda por debajo: se va. */
.cajon-abierto .wasap { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .wasap, .wasap__texto { transition: none; }
}

/* ===========================================================================
   BOTONES LARGOS EN PANTALLA ESTRECHA
   ===========================================================================
   `.boton` lleva `white-space: nowrap` porque un CTA partido en dos líneas se
   lee peor. En un teléfono eso deja de ser cierto en cuanto la etiqueta es
   larga: «Explorar propiedades en DepAltoke» medía 386 px dentro de una caja de
   335 y se salía. Medido, no supuesto.

   Por debajo de 600 px se permite que el texto envuelva y el botón ocupe el
   ancho de su contenedor. El `min-height` de 52 px sigue siendo el suelo, así
   que un botón de una línea no cambia de tamaño y uno de dos crece. */
@media (max-width: 599px) {
  .boton {
    white-space: normal;
    text-align: center;
    padding-block: 12px;
    max-width: 100%;
  }
  .cartera-vacia .boton,
  .cartera-vacia .acciones .boton { width: 100%; }
}

/* El flotante se aparta mientras se está llenando un formulario. En un teléfono
   queda justo encima de la esquina derecha del botón de enviar, y el momento de
   mandar una tasación no es el momento de tropezarse con otro botón.

   ES `:has()`, O SEA CSS Y NADA MÁS. Un navegador que no lo soporte se queda con
   el comportamiento de antes, que tampoco impide enviar nada. */
body:has(form:focus-within) .wasap {
  opacity: 0;
  pointer-events: none;
}

/* ===========================================================================
   HOME REORDENADO
   ===========================================================================
   Los bloques del Home se comprimieron y sus rejillas cambian de número de
   columnas. No hay colores, tipografías ni componentes nuevos: son los mismos,
   con otra cuenta de columnas. */

/* Diferencial: tres pilares, no cuatro. «Red» salió porque tiene sección propia. */
@media (min-width: 760px) { .pilares--tres { grid-template-columns: repeat(3, 1fr); } }

.diferencial__cierre {
  margin-top: clamp(22px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
}
.diferencial__cierre p { max-width: 52ch; }

/* Red: cuatro beneficios en una fila. La base de `.condiciones` pone tres
   columnas a partir de 1080 px, que con cuatro dejaba una huérfana debajo. */
/* minmax(0, 1fr) Y NO 1fr: una pista 1fr no baja del ancho de su palabra más
   larga, y «OPORTUNIDADES» a tamaño display ensanchaba su columna a costa de
   las otras tres — «Sin cuota de ingreso» acababa en cuatro líneas. Con cuatro
   columnas iguales, la cifra baja un escalón para que esa palabra quepa: medido,
   a 1,85rem «OPORTUNIDADES» se salía de su celda de 251 px; a 1,55rem entra. */
@media (min-width: 1080px) {
  .condiciones--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .condiciones--cuatro .condicion__v { font-size: clamp(1.35rem, 1.8vw, 1.55rem); }
}

/* Cierre: era pantalla y media con tres puertas grandes. Ahora es una fila. */
.cierre__contenido--compacto { padding-block: clamp(56px, 7vw, 96px); }
.cierre__fila { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) {
  .cierre__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}
.cierre__opciones {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--humo-claro);
}
.cierre__opciones a { color: var(--papel); border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; }
/* ZONA DE TOQUE DE 44 PX sin tocar la composición. Las tres palabras medían 20
   px de alto como objetivo táctil, muy por debajo del mínimo para un dedo. En un
   enlace en línea el relleno vertical agranda el área pulsable pero no la caja
   de línea, así que la fila no crece ni se separa. */
.cierre__opciones a { padding-block: 12px; }
.cierre__opciones a:hover { color: var(--verde); border-bottom-color: currentColor; }

/* Los pilares y los pasos comprimidos llevan textos de una o dos líneas. La
   altura mínima que traían sus componentes estaba pensada para textos más
   largos y dejaba una franja vacía bajo cada uno: aquí la manda el contenido. */
.pilares--tres .pilar { min-height: 0; }
.metricas--pasos .metrica { min-height: 0; gap: 8px; }