/* =========================================================================
   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);
}
.bar__lang a,.bar__lang-on{
  display:inline-flex;align-items:center;
  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{
  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)}

/* =========================================================================
   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 abre WhatsApp con un mensaje distinto.
   ========================================================================= */
.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)}

/* =========================================================================
   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}
.dock .btn{padding:.8rem 1rem}

/* 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)}
.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}
}