/* ============================================================
   Jacott Bienes Raices - sistema de diseno
   Marca: negro tinta + rojo Jacott. Una sola familia (Archivo),
   contraste por peso y por ancho (Archivo Expanded en display).
   ============================================================ */

:root {
  /* --- Color. Neutros con un tinte minimo hacia el rojo de marca --- */
  --ink:            oklch(0.19 0.014 32);   /* texto principal, casi negro */
  --ink-soft:       oklch(0.34 0.012 32);
  --muted:          oklch(0.48 0.010 34);   /* 4.6:1 sobre --surface */
  --faint:          oklch(0.62 0.008 34);   /* solo para texto grande */

  --surface:        oklch(0.980 0.004 40);  /* fondo de pagina */
  --surface-2:      oklch(0.958 0.006 40);  /* bandas alternas */
  --raised:         oklch(0.995 0.002 40);  /* tarjetas */

  --line:           oklch(0.900 0.006 40);
  --line-strong:    oklch(0.820 0.008 38);

  /* Rojo sacado del propio logotipo (#CE393F). Pasa contraste: 4.63:1
     como texto sobre el fondo y 4.71:1 como boton con texto blanco. */
  --accent:         oklch(0.570 0.186 23);  /* rojo Jacott, el de la llave */
  --accent-deep:    oklch(0.495 0.170 23);  /* al pasar el cursor */
  --accent-tint:    oklch(0.960 0.024 23);  /* aro de foco */
  --on-accent:      oklch(0.985 0.004 40);

  /* --- Tipografia --- */
  /* Una sola familia. El contraste sale del ancho (eje wdth) y del peso,
     no de mezclar dos sans parecidas. */
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wide: 112%;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.56rem, 1.38rem + 0.80vw, 2.10rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.24vw, 2.50rem);
  --step-4:  clamp(2.10rem, 1.62rem + 2.15vw, 3.50rem);

  /* --- Espacio (base 4) --- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --shell: 1240px;

  /* --- Forma --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px oklch(0.19 0.014 32 / 0.05);
  --shadow-2: 0 2px 4px oklch(0.19 0.014 32 / 0.05), 0 8px 24px oklch(0.19 0.014 32 / 0.06);
  --shadow-3: 0 4px 8px oklch(0.19 0.014 32 / 0.06), 0 18px 48px oklch(0.19 0.014 32 / 0.10);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 300ms;

  /* --- Capas --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* ============================================================ Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--step-4); letter-spacing: -0.034em; }
h2 { font-size: var(--step-3); letter-spacing: -0.030em; }
h3 { font-size: var(--step-1); letter-spacing: -0.018em; font-weight: 600; }
h4 { font-size: var(--step-0); letter-spacing: -0.010em; font-weight: 600; }

p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* ============================================================ Layout */

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

.section { padding-block: clamp(var(--s8), 9vw, var(--s10)); }
.section--tight { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.section--alt { background: var(--surface-2); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s7);
}
.section__head p { color: var(--muted); max-width: 46ch; margin: var(--s3) 0 0; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============================================================ Tipografia utilitaria */

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: -0.011em;
  max-width: 54ch;
}

.kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s4);
}

.muted { color: var(--muted); }
.small { font-size: var(--step--1); line-height: 1.5; }

/* Numeros tabulares para precios y metricas */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ============================================================ Botones */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-accent);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s5);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.004em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--ink-soft); }
.btn:active { transform: scale(0.97); }

.btn--accent { --btn-bg: var(--accent); }
.btn--accent:hover { background: var(--accent-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: var(--line-strong);
}
.btn--ghost:hover { background: var(--raised); border-color: var(--ink); }

.btn--sm { min-height: 38px; padding: 0 var(--s4); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Enlace con flecha que se desplaza al pasar el cursor */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.arrow-link svg { transition: transform var(--t-base) var(--ease-out); }
.arrow-link:hover { color: var(--accent); border-color: var(--accent); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ============================================================ Encabezado */

.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(0.980 0.004 40 / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.site-head[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: oklch(0.980 0.004 40 / 0.94);
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 90px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { height: 58px; width: auto; }

/* Con el logotipo cargado, el nombre escrito sobra: el archivo ya dice
   "Jacott Bienes Raices". Se queda como respaldo por si la imagen falla. */
.brand[data-con-logo="true"] .brand__type { display: none; }
.brand__type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--s2); }
.nav a {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.head-cta { display: flex; align-items: center; gap: var(--s3); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}

@media (max-width: 900px) {
  .site-head__inner { height: 68px; }
  .brand__mark { height: 44px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                visibility var(--t-base);
  }
  .nav[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
  .head-cta .btn--ghost { display: none; }
}

/* ============================================================ Portada: ella primero

   La portada ya no abre con el catalogo sino con Martha. Quien compra
   casa no esta navegando inventario, esta decidiendo en quien confiar,
   y eso se decide viendo una cara y leyendo a una persona.

   El retrato manda la reja. Si la foto todavia no existe, el marco NO
   queda vacio: ensena el logotipo sobre un campo con el rojo de la
   marca, que se lee como una pieza hecha a proposito y no como una
   imagen rota. main.js cambia el contenido en cuanto el archivo este. */

.intro { padding-block: clamp(var(--s6), 5vw, var(--s8)) clamp(var(--s7), 6vw, var(--s9)); }

/* Una sola columna mientras no haya retrato. main.js pone
   data-con-retrato en <html> cuando la foto carga de verdad, y solo
   entonces la portada se abre a dos columnas. Asi los dos estados se
   ven hechos a proposito y ninguno deja un hueco. */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: center;
}
@media (min-width: 901px) {
  [data-con-retrato="true"] .intro__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  }
}

/* --- El retrato --- */

.retrato { margin: 0; }

/* La foto es un recorte con el fondo quitado: Martha se para directo
   sobre la pagina, sin marco ni caja. El desvanecido de la base va
   dentro del propio archivo, no en CSS, para que no dependa de que el
   navegador soporte mascaras. */
.retrato__foto {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin-inline: auto;
}

.retrato__pie {
  margin-top: var(--s4);
  font-size: var(--step--1);
  font-weight: 560;
  color: var(--ink-soft);
  display: grid;
  gap: 2px;
}
.retrato__pie span { font-weight: 400; color: var(--muted); }

/* Con foto en escritorio el pie sobra: el saludo ya la nombra. */
@media (min-width: 901px) {
  [data-con-retrato="true"] .intro .retrato__pie { display: none; }
}

/* En el telefono el retrato NO puede comerse la primera pantalla. Se
   convierte en lo que ya conoce cualquiera que use Instagram: foto
   redonda con el nombre al lado. Ocupa 104 px en vez de 500, y el
   boton de WhatsApp sigue viendose sin desplazar. */
@media (max-width: 900px) {
  [data-con-retrato="true"] .retrato {
    display: flex;
    align-items: center;
    gap: var(--s4);
  }
  [data-con-retrato="true"] .retrato__foto {
    aspect-ratio: 1 / 1;
    width: 104px;
    height: auto;
    max-width: none;
    margin-inline: 0;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    /* El recorte es transparente: sin este fondo el circulo no existe. */
    background: var(--surface-2);
  }
  [data-con-retrato="true"] .retrato__pie { margin-top: 0; }
  /* El nombre ya va junto a la cara. */
  [data-con-retrato="true"] .intro__saludo { display: none; }
}

/* --- El texto --- */

.intro__saludo {
  margin: 0 0 var(--s3);
  font-size: var(--step-0);
  font-weight: 560;
  color: var(--accent);
}
.intro__titulo {
  margin: 0 0 var(--s5);
  max-width: 15ch;
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.intro__lede { max-width: 46ch; margin-bottom: var(--s6); }

.intro__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

/* La linea de credenciales va en prosa y no en una banda de cifras
   grandes: un numero enorme sin contexto se lee como publicidad, y
   estas tres cosas son justo las que se pueden comprobar. */
.intro__prueba {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.7;
}
.intro__prueba i {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
  margin: 0 0.6em;
  vertical-align: middle;
}

/* --- Boton de WhatsApp: el icono adentro --- */

.btn--wa { display: inline-flex; align-items: center; gap: 0.55em; }
.btn--wa svg { flex: none; }

/* ============================================================ Las tres promesas

   No son servicios, son compromisos, y por eso van sin tarjeta: un
   filete arriba y aire. Encerrarlas en cajas las convertiria en un
   menu de productos, que es justo lo contrario de lo que dicen. */

.promesas-seccion { padding-block: 0 clamp(var(--s7), 6vw, var(--s9)); }

.promesas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s6) var(--s7);
}
.promesas li { padding-top: var(--s5); border-top: 2px solid var(--accent); }
.promesas h2 {
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
.promesas p { margin: 0; font-size: var(--step--1); color: var(--muted); }

/* ============================================================ Los dos caminos

   Comprar y vender son las dos unicas cosas a las que alguien viene.
   Van una junto a la otra, separadas por un filete y no por dos
   tarjetas: son dos caminos del mismo trato, no dos productos. */

.caminos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(var(--s6), 5vw, var(--s8));
}
@media (min-width: 860px) {
  .caminos { grid-template-columns: 1fr 1fr; }
  .camino + .camino { padding-left: clamp(var(--s6), 5vw, var(--s8)); border-left: 1px solid var(--line); }
}
.camino h2 {
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s5);
  max-width: 20ch;
  text-wrap: balance;
}
.camino p { max-width: 46ch; }
.camino__cierre { color: var(--ink-soft); font-weight: 500; }
/* Los dos caminos son una fila, y en una fila los botones van a la
   misma altura aunque un texto corra mas que el otro. El parrafo de
   cierre se come el sobrante (margin-bottom:auto) y el boton cae abajo,
   parejo con el de al lado. El align-self evita que se estire de borde
   a borde al volverse hijo de un flex. */
.camino { display: flex; flex-direction: column; }
.camino__cierre { margin-bottom: auto; }
.camino .btn { margin-top: var(--s4); align-self: flex-start; }

/* ============================================================ Quien es */

.quien {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: start;
}
@media (max-width: 900px) { .quien { grid-template-columns: 1fr; } }

.quien__texto h2 {
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.quien__texto p { max-width: 54ch; }
.quien__datos { margin-top: var(--s2); }


/* ============================================================ Rejilla de propiedades */

.grid-props {
  display: grid;
  gap: var(--s6) var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  list-style: none;
}

/* Las tarjetas se alinean POR CONSTRUCCION, no adivinando min-heights.
   Cada tarjeta hereda las filas de la reja con subgrid, asi que foto,
   precio, titulo, datos, direccion y boton caen a la misma altura en
   toda la fila, mida lo que mida el texto.
   Los min-height de abajo son el respaldo para navegadores sin subgrid. */
.prop {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.prop__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: var(--s4);
}
.prop__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.prop:hover .prop__media img { transform: scale(1.03); }

/* Sin foto todavia. No finge una imagen: es una superficie de marca
   con el tipo de propiedad escrito. En cuanto Tokko o img/ traen la
   foto, este estado desaparece solo. */
.prop__media[data-vacio="true"] {
  display: grid;
  place-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      oklch(0.19 0.014 32 / 0.028) 11px 12px
    ),
    var(--surface-2);
  border: 1px solid var(--line);
}
.prop__glifo {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--faint);
}

.prop__tag {
  position: absolute;
  top: var(--s3); left: var(--s3);
  padding: 4px var(--s3);
  border-radius: var(--r-pill);
  background: var(--raised);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-1);
}
.prop__tag--preventa { background: var(--accent); color: var(--on-accent); }
/* "Llave en mano" tiene que distinguirse de "Preventa" de un vistazo:
   son dos compras distintas. Oscura y no roja, porque el rojo de la
   marca ya esta gastado en la preventa. */
.prop__tag--lista { background: var(--ink); color: var(--on-accent); }

/* Enlace al detalle cuando el detalle vive en otro sitio. Discreto y
   debajo del boton: el que deja el contacto con Martha es el de arriba
   y es el que tiene que ganar el clic. */
.prop__mas {
  display: block;
  margin-top: var(--s2);
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prop__mas:hover { color: var(--accent); }

/* Orden fijo: foto, precio, informacion. Alturas reservadas para
   que una fila de tarjetas quede pareja aunque el texto varie. */
.prop__price {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-size: var(--step-1);
  font-weight: 620;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

/* Segundo precio (una propiedad que va en venta Y en renta). El renglon
   se reserva SIEMPRE, aunque venga vacio: si no, la tarjeta que lo trae
   empuja 22 px hacia abajo su direccion y su boton, y la fila se ve
   chueca aunque las tarjetas midan igual. */
.prop__alt {
  min-height: 1.55em;
  margin: 0 0 var(--s2);
  font-size: var(--step--1);
  color: var(--muted);
}
.prop h3 {
  font-size: var(--step-0);
  font-weight: 600;
  min-height: 2.4em;
  margin-bottom: var(--s2);
}
.prop__specs {
  font-size: var(--step--1);
  color: var(--muted);
  min-height: calc(3.1em + 4px);
  margin-bottom: var(--s3);
}
.prop__specs span + span::before { content: " · "; }
.prop address {
  font-style: normal;
  font-size: var(--step--1);
  color: var(--faint);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.prop a.prop__link { text-decoration: none; color: inherit; }
.prop a.prop__link:hover h3 { color: var(--accent); }

@supports (grid-template-rows: subgrid) {
  /* Sin separacion entre filas de la reja: la da el margen inferior del
     boton, que vive en la ultima fila compartida. Asi el hueco entre
     filas es identico y ninguna tarjeta lo estira por su cuenta. */
  .grid-props { row-gap: 0; column-gap: var(--s5); }
  .prop {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    gap: 0;
  }
  .prop h3,
  .prop__specs,
  .prop__alt { min-height: 0; }
  /* Arriba, no abajo: el filete divisor tiene que quedar a la misma
     altura en toda la fila, aunque una direccion ocupe dos renglones. */
  .prop address { margin-top: 0; align-self: start; }
  /* Especificidad: la regla base p:last-child pone margin-bottom 0,
     asi que hay que ganarle con el selector, no solo con la clase. */
  .prop > p.prop__cta:last-child { margin-bottom: var(--s8); }
}

/* Filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.chip {
  min-height: 38px;
  padding: 0 var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-accent);
}

.empty-state {
  padding: var(--s8) 0;
  text-align: center;
  color: var(--muted);
}

/* ============================================================ Servicios */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.services article {
  padding: var(--s6) var(--s5) var(--s6) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .services article { border-left: 1px solid var(--line); padding-left: var(--s5); }
  .services article:first-child { border-left: 0; padding-left: 0; }
}
.services h3 { margin-bottom: var(--s3); }
.services p { font-size: var(--step--1); color: var(--muted); }
.services__range {
  display: block;
  margin-top: var(--s4);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}

/* ============================================================ Martha / marca personal */

.founder__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
  align-items: start;
}
/* Dos columnas solo si hay retrato de verdad; si no, el texto se
   queda con todo el ancho en vez de dejar media pagina en blanco. */
@media (min-width: 900px) {
  [data-con-retrato="true"] .founder__grid {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s8);
  }
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Marcador cuando todavia no hay foto cargada. No finge una imagen:
   dice que falta y de quien es. */
.portrait--pending {
  display: grid;
  place-content: center;
  gap: var(--s2);
  padding: var(--s6);
  text-align: center;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: var(--step--1);
}

.credentials {
  display: grid;
  gap: 0;
  margin-top: var(--s6);
  list-style: none;
  border-top: 1px solid var(--line);
}
.credentials li {
  display: flex;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.credentials b { flex: 0 0 5.5rem; font-weight: 600; color: var(--ink); }
.credentials span { color: var(--muted); }

blockquote.pull {
  font-stretch: var(--wide);
  /* Antes no tenia margen abajo porque siempre iba al final de su
     bloque. Ahora a veces le sigue un parrafo y se pegaban. */
  margin: var(--s6) 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* ============================================================ Proceso (cronograma) */

.timeline { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.timeline li {
  display: grid;
  gap: var(--s2) var(--s5);
  grid-template-columns: 1fr;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .timeline li { grid-template-columns: 7rem minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.timeline__day {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-weight: 620;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  color: var(--accent);
}
.timeline h3 { font-size: var(--step-0); }
.timeline p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* ============================================================ Zonas */

.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s5);
  list-style: none;
}
.zones a {
  display: block;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--raised);
  transition: border-color var(--t-fast) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.zones a:hover { border-color: var(--ink); transform: translateY(-2px); }
.zones h3 { font-size: var(--step-0); margin-bottom: var(--s2); }
.zones p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* ============================================================ Preguntas */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-stretch: var(--wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 560;
  letter-spacing: -0.018em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details[open] summary { color: var(--accent); }
.faq details[open] summary::after { border-color: var(--accent); }
.faq p { padding-bottom: var(--s5); color: var(--muted); }

/* ============================================================ Formulario */

.form { display: grid; gap: var(--s5); }
.form__row { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form label { display: block; }
.form .lbl {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--s2);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--step-0);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.form textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-soft); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.form ::placeholder { color: var(--muted); opacity: 1; }

.form .hint { font-size: var(--step--1); color: var(--muted); margin-top: var(--s2); }
.form .err { font-size: var(--step--1); color: var(--accent-deep); margin-top: var(--s2); display: none; }
.form [aria-invalid="true"] { border-color: var(--accent-deep); }
.form [aria-invalid="true"] ~ .err { display: block; }

.consent { display: flex; gap: var(--s3); align-items: start; font-size: var(--step--1); color: var(--muted); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.form-note {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--step--1);
}
.form-note[hidden] { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================ Cierre */

.closer {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-accent);
  padding: clamp(var(--s7), 7vw, var(--s9)) var(--gutter);
}
.closer h2 { color: var(--on-accent); max-width: 18ch; }
.closer p { color: oklch(0.86 0.008 40); margin-block: var(--s5) var(--s6); }
.closer .btn--ghost { --btn-fg: var(--on-accent); --btn-line: oklch(0.98 0 0 / 0.35); }
.closer .btn--ghost:hover { background: oklch(0.98 0 0 / 0.10); border-color: var(--on-accent); }
.closer__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ============================================================ Pie */

/* El boton flotante se queda SOLO en el telefono. En escritorio
   tapaba la esquina de la tercera promesa, y ahi la pagina ya ofrece
   WhatsApp dos veces: en la portada y en el cierre. */

.site-foot {
  border-top: 1px solid var(--line);
  /* El hueco de abajo lo pide el boton flotante de WhatsApp, que va fijo
     a la ventana: sin el, al llegar al final tapaba "Aviso de privacidad". */
  padding-block: var(--s8) calc(var(--s6) + 4.5rem);
  font-size: var(--step--1);
}
.foot__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--s7);
}
.site-foot .brand__mark { height: 66px; }

.foot__grid h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.foot__grid ul { list-style: none; display: grid; gap: var(--s3); }
.foot__grid a { color: var(--ink-soft); text-decoration: none; }
.foot__grid a:hover { color: var(--accent); }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* ============================================================ Boton flotante de WhatsApp */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5) var(--s3) var(--s4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-accent);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-3);
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.wa:hover { background: var(--accent); }
.wa:active { transform: scale(0.97); }
@media (max-width: 560px) { .wa span { display: none; } .wa { padding: var(--s4); } }
/* Va DESPUES de .wa a proposito: una media query no suma especificidad,
   asi que puesta antes la pisaba la regla de arriba y el boton salia
   igual en escritorio. */
@media (min-width: 901px) { .wa { display: none; } }

/* ============================================================ Aparicion al entrar en pantalla */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .prop:hover .prop__media img { transform: none; }
}

/* ============================================================ Impresion */

@media print {
  .site-head, .wa, .finder, .closer { display: none; }
  body { background: #fff; }
}

/* ============================================================ Ficha de propiedad

   Una propiedad con recorrido en video. El video manda: es vertical,
   grabado con telefono, y se deja en su forma en vez de recortarlo a
   horizontal, que le cortaria a Martha la cabeza o los pies. */

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s6);
  font-size: var(--step--1);
  color: var(--muted);
}
.migas a { color: var(--muted); text-decoration: none; }
.migas a:hover { color: var(--accent); text-decoration: underline; }
.migas span[aria-hidden] { color: var(--line-strong); }
.migas [aria-current] { color: var(--ink-soft); font-weight: 560; }

.recorrido {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}
@media (min-width: 901px) {
  .recorrido { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
}

.recorrido__video { margin: 0; }
.recorrido__video video {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink);
  object-fit: cover;
}
.recorrido__video figcaption { margin-top: var(--s3); max-width: 380px; }

/* Los datos duros, en renglones. Sin iconos: un numero al lado de su
   nombre se lee mas rapido que un dibujo que hay que descifrar. */
.datos {
  list-style: none;
  margin: var(--s6) 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.datos li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.datos span { color: var(--muted); font-size: var(--step--1); }
.datos b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Variante de la portada: el video de presentacion no compite con el
   texto. Es una cara hablando, no una propiedad: no gana nada por ser
   grande y empuja las propiedades fuera de pantalla si lo es. */
.recorrido--intro { align-items: center; }
/* El h2 no trae margen abajo (se quita para todos en el reset), y ahora
   que debajo solo queda la licencia, sin esto irian pegados. */
.recorrido__datos h2 + .small { margin-top: var(--s5); }
@media (min-width: 901px) {
  .recorrido--intro { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); }
}
.recorrido--intro .recorrido__video video,
.recorrido--intro .recorrido__video figcaption { max-width: 300px; }
@media (max-width: 900px) {
  .recorrido--intro .recorrido__video { display: grid; justify-items: center; }
  .recorrido--intro .recorrido__video video,
  .recorrido--intro .recorrido__video figcaption { max-width: 260px; }
  .recorrido--intro .recorrido__video figcaption { text-align: center; }
}

/* Cuatro promesas no caben en la reja automatica: con el hueco grande
   entran tres y la cuarta se queda sola en el renglon de abajo, que se
   lee como un error. Cuatro en una fila, o dos y dos. */
@media (min-width: 1080px) {
  .promesas--cuatro { grid-template-columns: repeat(4, 1fr); column-gap: var(--s6); }
}
@media (min-width: 620px) and (max-width: 1079px) {
  .promesas--cuatro { grid-template-columns: 1fr 1fr; }
}

/* El titulo y su entrada iban pegados: h2 no trae margen abajo (se
   quita para todos en el reset) y .lede tampoco arriba. */
.quien__texto h2 + .lede { margin-top: var(--s5); }