/* =========================================================================
   Claudia Pérez — sistema visual "El expediente" · Yaenlinea Soft
   ---------------------------------------------------------------------
   Tesis: en bienes raíces lo que se siente caro no es el lujo, es el oficio.
   Todo lo que importa en la página es un DOCUMENTO que se puede sostener:
   la ficha de tasación, la ficha de búsqueda, la ficha de propiedad.
   Papel blanco sobre arena, canto de terrazo, numeración en mono, sello.

   El terrazo no es decoración: es el piso real de las casas de Miami que
   ella vende (la de 1958 lo tiene). Es el único lugar donde la página se
   permite color. Todo lo demás se mantiene callado.
   ========================================================================= */

:root{
  /* --- tinta --- */
  --ink-950:#06181C;      /* negro de bahía: secciones a sangre, pie */
  --ink:#0C2B31;          /* titulares, reglas fuertes */

  /* --- verdes de Babel Inn Miami, tomados del identificador visual --------
     #007278 da 5,18:1 sobre la arena: sirve para texto.
     #3CB4A8 da 2,31:1 sobre la arena y 5,80:1 sobre la tinta — por eso solo
     se usa sobre fondos oscuros y en elementos gráficos, nunca como texto
     sobre arena. Es exactamente como lo usa el logo en negativo. */
  --sea:#007278;          /* marca: acción, énfasis, sello, referencias */
  --sea-deep:#005A5F;     /* derivado, para hover */
  --aqua:#3CB4A8;         /* marca: solo sobre oscuro */
  --sea-lift:#E4F0EE;

  /* Estado de error. NO es color de marca a propósito: un error en verde no
     se lee como error. */
  --error:#B4442F;

  /* Lascas del terrazo. Solo viven dentro del SVG de abajo — el coral y el
     latón salieron de la interfaz cuando llegó la marca. */
  --coral:#C4553C;
  --brass:#B08D3F;

  /* --- papel --- */
  --sand:#F7F3EA;         /* fondo de página */
  --sand-2:#EFE8DA;       /* bandas */
  --paper:#FFFFFF;        /* documentos. Blanco puro, no hueso: es papel */
  --stone:#556A6C;        /* texto secundario */
  --line:#DDD4C3;
  --line-soft:#EAE3D5;

  --wa:#25D366;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(1.15rem,5vw,2.5rem);
  --r:4px;                /* canto casi recto: papel cortado, no burbuja */
  --r-lg:6px;

  /* sombra de documento sobre mesa: larga, baja, casi sin difuminado arriba */
  --lift:0 1px 2px rgba(12,43,49,.06),0 24px 48px -30px rgba(12,43,49,.45);
  --lift-lg:0 1px 2px rgba(12,43,49,.07),0 40px 70px -42px rgba(12,43,49,.55);

  /* canto de terrazo: chips irregulares, generados, no una imagen */
  --terrazzo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='14' viewBox='0 0 168 14' preserveAspectRatio='none'%3E%3Crect width='168' height='14' fill='%23EFE8DA'/%3E%3Cpolygon points='5,2 12,0 14,6 7,8' fill='%23007278'/%3E%3Cpolygon points='19,7 25,5 27,11 20,12' fill='%23C4553C'/%3E%3Cpolygon points='32,1 38,3 36,8 30,6' fill='%230C2B31'/%3E%3Cpolygon points='44,6 51,4 53,10 46,12' fill='%23B08D3F'/%3E%3Cpolygon points='58,0 65,2 63,7 56,5' fill='%23007278'/%3E%3Cpolygon points='71,8 77,7 79,13 72,13' fill='%23C4553C'/%3E%3Cpolygon points='84,2 91,0 93,5 86,7' fill='%233CB4A8'/%3E%3Cpolygon points='97,7 103,6 104,12 98,12' fill='%23007278'/%3E%3Cpolygon points='109,1 116,3 114,8 108,7' fill='%23B08D3F'/%3E%3Cpolygon points='122,6 129,5 130,11 123,12' fill='%230C2B31'/%3E%3Cpolygon points='135,0 142,2 140,7 134,6' fill='%23C4553C'/%3E%3Cpolygon points='148,7 155,6 156,12 149,13' fill='%23007278'/%3E%3Cpolygon points='159,1 166,0 167,6 160,7' fill='%23B08D3F'/%3E%3Cpolygon points='15,10 21,9 22,13 16,13' fill='%230C2B31' opacity='.5'/%3E%3Cpolygon points='66,10 71,10 72,13 66,13' fill='%23B08D3F' opacity='.6'/%3E%3Cpolygon points='118,10 124,10 124,13 118,13' fill='%23C4553C' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.955rem + .22vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Fraunces con SOFT 0 y WONK 0: terminales rectas, formas serias.
   La versión blanda lee amable; ésta lee documento público. */
h1,h2,h3{
  margin:0;line-height:1.06;font-family:var(--display);font-weight:600;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--sea);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--sand);
  padding:.75rem 1rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sea);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--aqua)}

/* =========================================================================
   BARRA
   ========================================================================= */
/* En móvil la barra NO es fija: el CTA persistente ya vive en la barra de
   abajo, así que fijarla arriba solo costaría 64 px de pantalla en el
   dispositivo donde más caros son. En escritorio sí se queda pegada. */
.bar{
  position:static;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  /* algo más de aire abajo: la itálica de "inn Miami" baja y si no roza el filete */
  padding:.4rem var(--pad) .65rem;
  background:rgba(247,243,234,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
/* 52 px es el mínimo medido al que "inn Miami" se lee. Por debajo el logo se
   convierte en una mancha y deja de decir cuál es la marca. */
.bar__logo{height:52px;width:auto;flex:none}
.bar__name{display:block;font-weight:600;font-size:.94rem;line-height:1.15;letter-spacing:-.005em}
.bar__name em{display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin-top:.1rem}

/* Selector de idioma. Una pastilla partida, con la mitad activa en tinta: se
   lee de un vistazo cuál está puesto sin necesidad de instrucciones. El idioma
   lo decide la campaña, así que esto es una salida, no la puerta de entrada —
   por eso no compite con el botón de WhatsApp. */
.bar__end{display:flex;align-items:center;gap:.65rem;flex:none}
.bar__lang{
  display:inline-flex;align-items:stretch;flex:none;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:var(--paper);
}
/* min-height 24px: es el minimo de objetivo tactil de la WCAG 2.2 (2.5.8).
   Con el padding de antes salian 22px de alto y en un movil se falla el toque
   entre EN y ES, que estan pegados. El texto no crece: crece la zona. */
.bar__lang a,.bar__lang-on{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;min-width:28px;
  padding:.34rem .52rem;line-height:1;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-decoration:none;
}
.bar__lang a{color:var(--stone)}
.bar__lang a:hover{color:var(--ink);background:var(--sand-2)}
.bar__lang-on{background:var(--ink);color:#fff}

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.4rem;border:1px solid transparent;border-radius:var(--r);
  font:inherit;font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.btn svg{flex:none}
/* WhatsApp en tinta con el glifo verde: mantiene la marca y sigue siendo
   inconfundible. El botón verde de manual abarata la página entera. */
.btn--wa{width:100%;background:var(--ink);color:#fff}
.btn--wa svg{color:var(--wa)}
.btn--wa:hover{background:var(--ink-950)}
.btn--wa:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--sand)}
.btn--light{background:var(--sand);color:var(--ink)}
.btn--light svg{color:var(--sea-deep)}
.btn--light:hover{background:#fff}
.btn--sm{padding:.7rem 1rem;font-size:.9rem}
.btn[disabled]{opacity:.55;cursor:progress}

.bar__wa,.bar__cta{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.5rem .9rem;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:.85rem;font-weight:600;text-decoration:none;
}
.bar__wa svg{color:var(--wa)}
.bar__cta:hover{background:var(--ink-950)}

/* =========================================================================
   TARJETA DE LA AGENTE — el retrato del hero
   ---------------------------------------------------------------------
   Es un documento, no un banner: papel blanco, canto recto, sombra baja, y
   los datos abajo en mono como el pie de una ficha oficial. Sustituye a la
   ficha de tasación que ocupaba este hueco, y hace el mismo trabajo que el
   cartel con número de licencia que ella usa impreso.
   ========================================================================= */
.card-agente{
  /* Contenida y alineada a la derecha: ella pidió el retrato más pequeño, y
     una foto a sangre en el hero le come el sitio al titular. */
  position:relative;margin:0 0 0 auto;max-width:23rem;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden;
}
.card-agente img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.card-agente__pie{padding:1rem 1.15rem 1.15rem;border-top:1px solid var(--line-soft)}
.card-agente__nombre{
  font-family:var(--display);font-size:1.28rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);line-height:1.1;
}
.card-agente__oficio{margin-top:.2rem;font-size:.9rem;color:var(--sea)}
.card-agente__oficina{margin-top:.5rem;font-size:.85rem;color:var(--stone)}
.card-agente__lic{
  margin-top:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone);
}

/* --- llamada principal del hero ------------------------------------------ */
.hero__cta{margin-top:1.5rem;max-width:22rem}
.hero__cta .btn{width:100%}
.hero__fine{margin-top:.6rem;font-size:.78rem;color:var(--stone)}

/* =========================================================================
   LOS TRES CAMINOS
   ---------------------------------------------------------------------
   Sustituyen a las dos landings. Toda la tarjeta es el enlace: en móvil no
   hay que apuntar a un botón pequeño, y el objetivo táctil es la tarjeta
   entera. Cada una baja al formulario con su motivo ya marcado.
   ========================================================================= */
.rutas{display:grid;gap:1rem}
.ruta{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.45rem;text-decoration:none;color:inherit;
  transition:border-color .16s ease,box-shadow .2s ease,transform .16s ease;
}
.ruta:hover,.ruta:focus-visible{border-color:var(--sea);box-shadow:var(--lift);transform:translateY(-2px)}
.ruta__h{
  font-family:var(--display);font-size:1.28rem;letter-spacing:-.015em;margin-bottom:.5rem;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40;
}
.ruta__p{color:var(--stone);font-size:.94rem;margin-bottom:1.1rem}
.ruta__cta{
  display:flex;align-items:center;gap:.45rem;margin-top:auto;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);
}
.ruta__cta svg{color:var(--wa)}
/* La flecha solo cuando la tarjeta baja al formulario: cuando lleva a WhatsApp
   ya trae su glifo delante y dos marcas en la misma línea sobran. */
.ruta__cta--form::after{content:"↓";font-family:var(--body);letter-spacing:0}

/* =========================================================================
   CREDENCIALES
   ---------------------------------------------------------------------
   Cada sello en su propia baldosa blanca. Los logos vienen de organismos
   distintos y con colores que pelean (azul, rojo, oro): sin la baldosa, la
   fila parece una pegatina de maletas.
   ========================================================================= */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.9rem;list-style:none}
.cred{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem .8rem;
}
.cred img{height:72px;width:auto;max-width:100%}
.cred span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;line-height:1.5;color:var(--stone)}

.cred__oficina{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.cred__oficina-t{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sea);
}
.cred__oficina img{height:44px;width:auto}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;overflow:hidden;padding-block:clamp(1.75rem,5vw,3.75rem) clamp(2.5rem,7vw,5rem)}
/* celosía de bloque calado — arquitectura real de Miami, casi invisible */
.hero__screen{
  position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230C2B31' stroke-width='1.5'%3E%3Ccircle cx='0' cy='42' r='23'/%3E%3Ccircle cx='84' cy='42' r='23'/%3E%3Ccircle cx='42' cy='0' r='23'/%3E%3Ccircle cx='42' cy='84' r='23'/%3E%3Crect x='30' y='30' width='24' height='24'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(90% 70% at 96% -4%,#000,transparent 55%);
  mask-image:radial-gradient(90% 70% at 96% -4%,#000,transparent 55%);
}
.hero__grid{position:relative;display:grid;gap:clamp(1.75rem,4.5vw,3.25rem);align-items:start}
.hero__h1{
  font-size:clamp(2.35rem,1.5rem + 3.7vw,4.05rem);
  letter-spacing:-.028em;
  margin-bottom:1.05rem;
  text-wrap:balance;
}
.hero__h1 em{font-style:italic;color:var(--sea);font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
.hero__sub{font-size:clamp(1.03rem,.99rem + .34vw,1.18rem);color:var(--stone);max-width:36ch}
.hero__marks{
  display:flex;flex-wrap:wrap;gap:.4rem .45rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
}
.hero__marks li{border:1px solid var(--line);border-radius:999px;padding:.3rem .68rem;color:var(--stone)}

/* =========================================================================
   SECCIONES
   ========================================================================= */
.section{padding-block:clamp(2.75rem,7vw,5rem)}
.section--ink{background:var(--ink);color:#D5E2DF}
.section--sand{background:var(--sand-2)}
.section--close{background:var(--sand-2);border-top:1px solid var(--line)}

.h2{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem);letter-spacing:-.024em;margin-bottom:.6rem;text-wrap:balance}
.h2--light{color:var(--sand)}
.section__lead{color:var(--stone);max-width:52ch;margin-bottom:2rem}
.section--ink .section__lead{color:#9FB4B1}

.cards{display:grid;gap:1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.45rem}
.card__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sea);margin-bottom:.8rem}
.card__h{font-size:1.15rem;margin-bottom:.55rem;letter-spacing:-.015em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 30}
.card p:last-child{color:var(--stone);font-size:.94rem}

/* --- pasos: van numerados porque SON una secuencia --- */
.steps{display:grid;gap:1.6rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:0 1.1rem;align-items:baseline;
  padding-top:1.3rem;border-top:1px solid rgba(213,226,223,.2)}
.step__n{grid-row:span 2;font-family:var(--mono);font-size:.95rem;color:var(--aqua);letter-spacing:.06em}
.step__h{font-size:1.22rem;color:var(--sand);margin-bottom:.35rem;letter-spacing:-.015em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 30}
.step p:last-child{color:#9FB4B1;font-size:.94rem}

/* =========================================================================
   FICHAS DE PROPIEDAD
   ========================================================================= */
.props{display:grid;gap:clamp(1.1rem,3vw,1.6rem)}

.prop{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden;
}
.prop__shot{position:relative;background:var(--sand-2)}
.prop__shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* velo inferior: sostiene el precio sin lavar la foto */
.prop__veil{
  position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(6,24,28,.88),rgba(6,24,28,.45) 42%,transparent);
}
.prop__price{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.prop__amount{
  font-family:var(--mono);font-weight:500;font-feature-settings:'tnum' 1;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,1.95rem);letter-spacing:-.02em;color:#fff;line-height:1;
}
.prop__where{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:#C9D9D6;text-align:right;line-height:1.5;
}
.prop__id{
  position:absolute;top:.8rem;left:.8rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  background:rgba(6,24,28,.72);color:#fff;padding:.28rem .55rem;border-radius:2px;
  backdrop-filter:blur(3px);
}

.prop__body{display:flex;flex-direction:column;flex:1;padding:1.15rem}

/* Operación y etiqueta destacada: dos rótulos cortos sobre la foto. Van
   arriba porque es lo que decide si el visitante sigue leyendo la ficha. */
.prop__op,.prop__tag{
  position:absolute;top:.7rem;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:2px;
}
.prop__op{right:.7rem;background:var(--ink);color:var(--sand)}
.prop__tag{left:.7rem;top:2.6rem;background:var(--sea);color:#fff}

/* Cortesía del bróker en CADA ficha: es requisito de la oficina y sale sola. */
.prop__cortesia{
  margin-bottom:.85rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);
}
/* la banda de datos es una hoja de especificaciones, no iconitos */
.prop__specs{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-bottom:1rem;
}
.prop__specs div{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.55rem .65rem;
}
.prop__specs dt{
  /* Interletraje corto a propósito: con cinco columnas, «LIVING AREA» a .12em
     parte en dos líneas y desnivela toda la fila. */
  font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--stone);margin-bottom:.15rem;
}
.prop__specs dd{margin:0;font-family:var(--mono);font-size:.92rem;font-weight:500;color:var(--ink)}
.prop__desc{font-size:.92rem;color:var(--stone);margin-bottom:1rem}
.prop__foot{margin-top:auto}

/* tira de miniaturas: prueba de que hay más y excusa para escribir */
.prop__more{display:flex;align-items:center;gap:.4rem;margin-bottom:.85rem}
.prop__more img{width:52px;height:39px;object-fit:cover;border-radius:2px;border:1px solid var(--line)}
.prop__more span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--stone);margin-left:.15rem;
}

/* sello de estado: aparece SOLO cuando cambia el estado real de la propiedad */
.prop__stamp{display:none}
.prop[data-estado="vendida"] .prop__stamp,
.prop[data-estado="reservada"] .prop__stamp{
  display:grid;place-items:center;position:absolute;top:1.1rem;right:1.1rem;z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sea);border:2px solid var(--sea);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 4px var(--sea);
  background:rgba(255,255,255,.9);
  padding:.4rem .7rem;transform:rotate(-8deg);
}

.props__vacio{
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);
  padding:2rem 1.5rem;text-align:center;color:var(--stone);
}
.props__note{
  margin-top:1.75rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.55;color:var(--stone);max-width:70ch;
}

/* =========================================================================
   BIO
   ========================================================================= */
.bio{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center}
/* Su retrato ya está en el hero. Repetirlo aquí no aporta y alarga la página.
   El ancho lo limitan los párrafos (48ch), no el contenedor: así el título
   arranca en la misma vertical que el de las demás secciones. */
.bio--texto{grid-template-columns:1fr!important}
.bio__cta{margin-top:1.4rem}
.bio__cta .btn{width:auto;min-width:14rem}
.bio__photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-2);border:1px solid var(--line)}
.bio__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bio__text .h2{margin-bottom:.9rem}
.bio__text p{color:var(--stone);margin-bottom:.85rem;max-width:48ch}
/* La firma de la biografía ES el logo con nombre: dice "Claudia Perez ·
   REAL ESTATE" mejor de lo que lo diría una línea de texto nuestra. */
.bio__sign{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);max-width:48ch}
.bio__sign img{height:88px;width:auto}
.bio__sign small{
  display:block;margin-top:.7rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);
}

/* =========================================================================
   CIERRE
   ========================================================================= */
.close{text-align:center;max-width:46rem;margin-inline:auto}
.close .h2{margin-bottom:.7rem}
.close__p{color:var(--stone);margin-bottom:1.6rem}
.close__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.close__actions .btn{width:auto;min-width:15rem}

/* =========================================================================
   PIE
   ========================================================================= */
.foot{background:var(--ink-950);color:#8CA3A2;padding-block:2.5rem 6.5rem}
.foot__grid{display:grid;gap:.9rem}
.foot__logo{height:104px;width:auto;margin-bottom:.35rem}
.foot__brand{color:var(--sand);font-weight:600}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.15rem;font-size:.9rem}
.foot__fine{font-size:.75rem;line-height:1.6;max-width:68ch}
.foot a{color:inherit}
.foot__legal{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(140,163,162,.22);
}
.foot__eho{flex:none;width:30px;height:30px;color:#8CA3A2}

/* =========================================================================
   CTA PERSISTENTE
   ========================================================================= */
/* móvil: barra fija. Es el patrón que más convierte en tráfico de Meta. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(6,24,28,.96);
  border-top:1px solid rgba(140,163,162,.25);
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.dock[data-show]{transform:none}
/* El formulario manda y ocupa el ancho; WhatsApp va al lado, del tamaño justo
   para el pulgar (44px es el mínimo que pide Apple en sus guías). */
.dock{display:flex;align-items:center;gap:.55rem}
.dock .btn{padding:.8rem 1rem;width:100%}
.dock__wa{
  display:grid;place-items:center;flex:none;width:46px;height:46px;
  border-radius:var(--r);border:1px solid rgba(140,163,162,.45);
  color:var(--wa);text-decoration:none;
}
.dock__wa:hover{border-color:var(--sand)}

/* escritorio: burbuja discreta */
.wa-float{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:45;
  display:none;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--ink);color:var(--wa);
  box-shadow:0 14px 30px -12px rgba(6,24,28,.75);
  transition:transform .16s ease;
}
.wa-float:hover{transform:scale(1.06)}

/* =========================================================================
   PROSA (privacidad, gracias)
   ========================================================================= */
.prose{max-width:64ch}
.prose h2{font-size:1.2rem;margin:2rem 0 .55rem;letter-spacing:-.015em}
.prose p{color:var(--stone);margin-bottom:1rem}
.prose a{color:var(--sea)}
.prose .btn--ghost{color:var(--ink)}
/* Los botones de canal no son enlaces de texto: `.prose a` les ganaba en
   especificidad y les pintaba la etiqueta de verde. */
.prose .canal{color:var(--ink)}
.prose__lista{list-style:disc;padding-left:1.15rem;margin-bottom:1rem;color:var(--stone)}
.prose__lista li{margin-bottom:.4rem}
.prose__lista strong{color:var(--ink)}
.prose__note{border-left:2px solid var(--sea);padding-left:1rem;font-size:.88rem}

/* =========================================================================
   REVELADO AL HACER SCROLL
   ========================================================================= */
/* Por defecto VISIBLE. El estado oculto solo existe si hay JS corriendo (la clase
   .js la pone un script en línea del <head>). Nunca se esconde contenido detrás
   de un script que puede fallar — menos aún las fichas de propiedad. */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal[data-in]{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}

/* entrada de la tarjeta del hero: un solo gesto al cargar */
@keyframes doc-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .card-agente{animation:doc-in .48s cubic-bezier(.2,.8,.3,1) both;animation-delay:.08s}

/* =========================================================================
   ESCRITORIO
   ========================================================================= */
@media (max-width:819px){
  .hero__screen{opacity:.028}
  /* En móvil manda el titular y el botón: la foto va después, no antes. */
  .hero{padding-block:1.1rem 2.25rem}
  .hero__grid{grid-template-areas:"pitch" "foto"}
  .hero__pitch{grid-area:pitch}
  .card-agente{grid-area:foto;max-width:20rem;margin-inline:auto}
  .hero__grid{gap:1.5rem}
  .hero__h1{font-size:clamp(2.05rem,1.45rem + 2.6vw,2.4rem);margin-bottom:.85rem}
  .hero__sub{font-size:1rem;line-height:1.55}
  .hero__marks{margin-top:1.1rem;gap:.35rem;font-size:.62rem}
  .hero__marks li{padding:.26rem .58rem}
  .section{padding-block:2.5rem}
}

@media (min-width:720px){
  .props{grid-template-columns:repeat(2,1fr)}
  .rutas{grid-template-columns:repeat(3,1fr)}
}

/* El nombre al lado del logo se cae en pantallas estrechas: el logo ya dice
   la marca, y la barra necesita el ancho para el botón de WhatsApp. */
@media (max-width:559px){
  .bar__name{display:none}
  .bar__logo{height:46px}
  .foot__logo{height:88px}
}

@media (min-width:820px){
  .bar{position:sticky;top:0}
  /* La columna de texto pesa más que la foto: ella pidió la foto más pequeña
     y, además, en captación el titular tiene que ganarle al retrato. */
  .hero__grid{grid-template-columns:1.18fr .82fr;align-items:center}
  /* Instancia sin retrato: el texto ocupa el ancho y no queda medio hero vacío. */
  .hero__grid:not(:has(.card-agente)){grid-template-columns:1fr;max-width:44rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .bio{grid-template-columns:.78fr 1.22fr}
  .foot__grid{grid-template-columns:1fr auto;align-items:center}
  .foot__fine,.foot__legal{grid-column:1/-1}
  .foot{padding-bottom:2.5rem}
  .dock{display:none}
  .wa-float{display:grid}
  /* auto-fit y no repeat(4,1fr): el número de filas de datos cambia por
     propiedad —un condominio no tiene lote, una casa no tiene HOA— y con
     cuatro columnas fijas la quinta se quedaba sola ocupando un cuarto de
     ancho. Así se reparten las que haya. */
  .prop__specs{grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr))}
}

@media (min-width:1100px){
  .prop__body{padding:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.js .reveal{opacity:1;transform:none}
  .dock{transform:none}
}

/* =========================================================================
   VÍA PRINCIPAL · el formulario  ·  VÍAS DIRECTAS · WhatsApp y texto

   La jerarquía de esta parte no es estética, es la que pidió la clienta y la
   que conviene: el formulario deja el nombre y el contacto POR ESCRITO aunque
   la conversación no llegue a empezar; el clic a WhatsApp, si el visitante
   está en un escritorio sin sesión abierta, no deja nada.

   De ahí que haya UN solo botón sólido por bloque —el que baja al formulario—
   y que WhatsApp y el mensaje de texto vayan siempre debajo, delineados y más
   pequeños. Dos botones que gritan igual hacen dudar, y la duda en un CTA se
   paga en conversión.
   ========================================================================= */

/* --- las vías directas, bajo cada CTA principal ------------------------- */
.canales{margin-top:1.15rem}
.canales__o{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone);margin-bottom:.55rem;
}
.canales__fila{display:flex;flex-wrap:wrap;gap:.5rem}
.canal{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:42px;padding:.5rem .9rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font-size:.9rem;font-weight:500;text-decoration:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.canal:hover{border-color:var(--ink);transform:translateY(-1px)}
.canal svg{flex:none}
.canal--wa svg{color:var(--wa)}
.canal--sms svg{color:var(--sea)}

/* Sobre fondo oscuro (el cierre cuando el formulario está apagado, la barra
   fija) los mismos botones se dan la vuelta. */
.section--ink .canales__o,.foot .canales__o{color:#9FB4B1}
.section--ink .canal,.foot .canal{
  background:transparent;border-color:rgba(255,255,255,.28);color:var(--sand);
}
.section--ink .canal:hover,.foot .canal:hover{border-color:var(--sand)}

/* En el hero la fila va pegada al botón grande y comparte su ancho. */
.hero__cta .canales{margin-top:1rem}
/* Bajo los tres caminos va centrada: allí no hay un botón al que alinearse. */
.rutas + .canales,.rutas ~ .canales{margin-top:1.8rem;text-align:center}
.rutas ~ .canales .canales__fila{justify-content:center}

/* --- el bloque de contacto de la portada -------------------------------- */
.contacto{max-width:34rem;margin-inline:auto}
.contacto .h2{margin-bottom:.6rem}
.contacto__lead{color:var(--stone);margin-bottom:1.6rem}
.contacto .form{max-width:none}
.contacto--gracias .canales{margin-top:1.6rem}
/* El hueco solo hace falta donde la barra es fija —de 820 px para arriba, ver
   la media query—; en móvil no lo es y reservarlo dejaría a la vista el final
   de la sección anterior. */
@media (min-width:820px){ #contacto{scroll-margin-top:5rem} }

/* --- las dos vías de una ficha de propiedad ----------------------------- */
.prop__ctas{display:grid;gap:.55rem;justify-items:center}
.prop__ctas .btn{width:100%}
.prop__owa{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.88rem;color:var(--stone);text-underline-offset:3px;
}
.prop__owa svg{flex:none;color:var(--wa)}
.prop__owa:hover{color:var(--ink)}

.form__volver{margin-top:1.8rem}

/* --- «ver todas» al pie de la portada ----------------------------------- */
.props__vertodas{margin-top:2rem;text-align:center}

/* --- filtros del listado ------------------------------------------------
   Son enlaces y no un <select> con JavaScript: la página tiene que seguir
   filtrando con el JS bloqueado, igual que el resto del sitio. */
.filtros{margin:1.8rem 0 1.2rem;display:grid;gap:.7rem}
.filtros__fila{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filtros__et{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone);margin-right:.35rem;
}
.filtro{
  display:inline-flex;align-items:center;min-height:32px;
  padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--stone);
  font-size:.86rem;text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.filtro:hover{border-color:var(--ink);color:var(--ink)}
.filtro--on{background:var(--ink);border-color:var(--ink);color:#fff}
.lista__cuenta{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--stone);margin-bottom:1.4rem;
}

/* --- el formulario ------------------------------------------------------ */
.form{display:grid;gap:1.15rem;max-width:32rem;margin-top:.4rem}
.form__ficha{
  font-family:var(--mono);font-size:.8rem;color:var(--sea);
  border-left:2px solid var(--sea);padding-left:.7rem;margin:0;
}
.campo{display:grid;gap:.35rem}
.campo__et{font-weight:600;font-size:.94rem}
.campo__ayuda{font-size:.82rem;color:var(--stone)}
.campo input[type=text],.campo textarea{
  width:100%;padding:.72rem .85rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font:inherit;font-size:1rem;
}
.campo input:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--sea);outline-offset:1px;border-color:var(--sea);
}
.campo input[aria-invalid=true],.campo textarea[aria-invalid=true]{border-color:var(--error)}
.campo textarea{resize:vertical;min-height:5.5rem}

.form__motivo{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.form__motivo legend{padding:0;font-weight:600;font-size:.94rem;margin-bottom:.2rem}
.form__radio{display:flex;align-items:center;gap:.5rem;font-size:.94rem;min-height:24px}

.form__consent{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.88rem;color:var(--stone);line-height:1.5;
}
.form__consent input{margin-top:.2rem;flex:none;width:18px;height:18px}
.form__consent a{color:var(--sea)}

.form__error{color:var(--error);font-size:.85rem}
.form__error--grande{
  border-left:2px solid var(--error);padding:.5rem .8rem;
  background:#fff;font-size:.92rem;max-width:32rem;
}
.form__nota{font-size:.82rem;color:var(--stone);margin:0}

/* El honeypot. No basta display:none —hay bots que lo detectan—: se saca de la
   pantalla conservando el campo real y utilizable para quien no lo es. */
.form__trampa{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-950)}

@media (min-width:760px){
  .prop__ctas{grid-template-columns:1fr;justify-items:stretch}
  .prop__ctas .prop__owa{justify-content:center}
}