/* ─────────────────────────────────────────────────────────────────────────────
   SOMNUM · hoja de estilos de las páginas de contenido
   (/casas-en-venta-conocoto/, /ubicacion-.../, /preguntas-frecuentes/)

   Estas páginas son HTML plano a propósito: pesan poco, cargan al instante y
   un buscador las lee sin tener que ejecutar nada. La portada sigue siendo la
   pieza de diseño; esto es lo que responde cuando alguien busca en Google.

   Los colores y las tipografías son los mismos de la portada.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ink-900:#111110;
  --ink-800:#1a1918;
  --ink-600:#3f3c37;
  --stone-500:#8b8880;
  --stone-300:#c3c0b9;
  --stone-100:#e6e4df;
  --cream-50:#f4f2ee;
  --cream-0:#fafaf8;
  --paper:#ffffff;
  --teak-600:#8f5f34;
  --teak-500:#b57d48;
  --teak-100:#eddfcd;
  --verde-ok:#4a5c3f;

  --linea:rgba(17,17,16,.12);
  --linea-fuerte:rgba(17,17,16,.22);

  --fuente:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fuente-serif:'Instrument Serif',Georgia,serif;

  --ancho:1120px;
  --aire:clamp(24px,5vw,64px);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--cream-50);
  color:var(--ink-900);
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--teak-600)}
a:hover{color:var(--teak-500)}

::selection{background:var(--teak-500);color:var(--cream-50)}

/* Foco visible: hay gente que navega con el teclado. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--teak-600);
  outline-offset:3px;
  border-radius:4px;
}

/* Salto directo al contenido, para lectores de pantalla. */
.saltar{
  position:absolute;left:-9999px;
  background:var(--ink-900);color:var(--cream-50);
  padding:12px 20px;border-radius:0 0 8px 0;z-index:100;
  font-size:14px;text-decoration:none;
}
.saltar:focus{left:0;top:0}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--aire)}

/* ── Barra superior ──────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:40;
  background:rgba(244,242,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.barra__fila{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;
}
.barra__logo{
  flex:0 0 auto;
  font-weight:800;font-size:17px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-900);text-decoration:none;
}
.barra__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);min-width:0}
.barra__nav a{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-600);text-decoration:none;white-space:nowrap;
}
.barra__nav a:hover{color:var(--ink-900)}
.barra__nav a.actual{color:var(--teak-600)}

.barra__cta{
  padding:10px 18px;border-radius:999px;
  background:var(--ink-900);color:var(--cream-50) !important;
  font-size:11.5px;letter-spacing:.07em;
}
.barra__cta:hover{background:var(--teak-600)}

/* En pantallas medianas se caen los enlaces secundarios. */
@media (max-width:860px){
  .barra__nav a.oculta-movil{display:none}
}

/* En celular la barra se queda solo con el logo. El botón de agendar sale de
   aquí a propósito: abajo a la derecha ya está el de WhatsApp, que es el que
   se alcanza con el pulgar. Dos botones que dicen lo mismo confunden y ninguno
   de los dos se toca. Los enlaces a las otras páginas siguen en el bloque
   "Sigue por aquí" y en el pie. */
@media (max-width:640px){
  .barra__nav{display:none}
  .barra__fila{justify-content:flex-start}
  .barra__logo{font-size:16px}
}

/* ── Migas de pan ────────────────────────────────────────────────────────── */
/* Ojo: .contenedor ya pone el margen lateral. Si aquí se escribe `padding`
   a secas, lo pisa y el texto se pega al borde de la pantalla. */
.migas{
  font-size:13px;color:var(--stone-500);
  padding-top:22px;
}
.migas a{color:var(--stone-500);text-decoration:none}
.migas a:hover{color:var(--ink-900);text-decoration:underline}
.migas span{margin:0 7px}

/* ── Encabezado de página ────────────────────────────────────────────────── */
.encabezado{padding:clamp(28px,5vw,52px) 0 clamp(36px,6vw,64px);border-bottom:1px solid var(--linea)}
.encabezado__eyebrow{
  margin:0 0 20px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teak-600);
  font-weight:600;
}
h1{
  margin:0;
  font-size:clamp(2.1rem,1.5rem + 3.2vw,4.1rem);
  font-weight:800;line-height:1.02;letter-spacing:-.028em;
  text-transform:uppercase;
  max-width:19ch;
}
.encabezado__bajada{
  margin:26px 0 0;max-width:62ch;
  font-size:clamp(17px,.9rem + .5vw,20px);line-height:1.7;color:var(--ink-600);
}

/* ── Secciones y títulos ─────────────────────────────────────────────────── */
.seccion{padding:clamp(44px,7vw,80px) 0;border-bottom:1px solid var(--linea)}
.seccion:last-of-type{border-bottom:0}

h2{
  margin:0 0 8px;
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2.3rem);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;
  text-transform:uppercase;
}
h3{
  margin:0 0 10px;
  font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
  font-weight:700;line-height:1.3;letter-spacing:-.01em;
}
.seccion__intro{margin:18px 0 0;max-width:64ch;color:var(--ink-600)}
.seccion > p, .seccion > ul, .seccion > ol{max-width:64ch}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.nota{font-size:14.5px;color:var(--stone-500);line-height:1.7}

/* ── Tabla de las casas ──────────────────────────────────────────────────── */
.tabla-envoltura{
  margin-top:32px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--linea);
  border-radius:14px;
  background:var(--paper);
}
/* Diez columnas tienen que caber en el ancho del texto sin obligar a arrastrar:
   si el precio queda fuera de la pantalla, la tabla no sirve para decidir. */
table{
  width:100%;min-width:680px;
  border-collapse:collapse;
  font-size:14.5px;
}
caption{
  text-align:left;padding:20px 22px 0;
  font-size:13px;color:var(--stone-500);
}
th,td{padding:14px 11px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
th:first-child,td:first-child{padding-left:20px}
th:last-child,td:last-child{padding-right:20px}
thead th{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone-500);font-weight:700;
  border-bottom:1px solid var(--linea-fuerte);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream-0)}
td.casa{font-weight:800;font-size:17px}
td.precio{font-weight:700;white-space:nowrap}
.etiqueta{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}
.etiqueta--libre{background:#e2e7dd;color:var(--verde-ok)}
.etiqueta--vendida{background:var(--stone-100);color:var(--stone-500)}

/* "Preguntar" abre WhatsApp con el número de esa casa ya escrito en el mensaje.
   Así el visitante no tiene que explicar cuál le gustó, y del otro lado se
   contesta sabiendo de qué casa se trata. */
.preguntar{
  display:inline-block;margin-left:8px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--teak-600);text-decoration:none;
  border-bottom:1px solid rgba(143,95,52,.35);
}
.preguntar:hover{color:var(--teak-500);border-bottom-color:var(--teak-500)}

/* En celular, diez columnas obligan a arrastrar de lado y el precio —que es el
   dato que decide la visita— se queda fuera de la pantalla. Por eso cada fila
   se convierte en una ficha: el número de casa arriba y debajo cada dato con el
   nombre de su columna, que sale del atributo data-col de la celda. */
@media (max-width:1080px){
  .tabla-envoltura{border:0;background:transparent;overflow-x:visible;border-radius:0}
  table{min-width:0;display:block;width:100%}
  /* Con la tabla en display:block el <caption> se encoge a un hilo de ancho. */
  caption{display:block;width:100%;padding:0 0 18px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody{display:block}
  tbody tr{
    display:block;margin-bottom:14px;padding:20px 22px;
    background:var(--paper);border:1px solid var(--linea);border-radius:14px;
  }
  tbody tr:hover{background:var(--paper)}
  tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:18px;
    padding:7px 0;border-bottom:1px solid var(--linea);text-align:right;
  }
  tbody td::before{
    content:attr(data-col);
    font-size:11px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--stone-500);font-weight:700;text-align:left;flex:0 0 auto;
  }
  /* El número de casa y el estado encabezan la ficha, sin etiqueta. */
  tbody td.casa,
  tbody td:last-child{
    display:block;text-align:left;border-bottom:0;padding:0;
  }
  tbody td.casa{font-size:26px;line-height:1;margin-bottom:4px}
  tbody td:last-child{margin-top:14px}
  tbody td.casa::before,
  tbody td:last-child::before{content:none}
  tbody td:nth-last-child(2){border-bottom:0;padding-bottom:0}
  tbody td.precio{font-size:19px}
  /* En el celular se toca con el pulgar: "Preguntar" pasa a ser un botón. */
  tbody td:last-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .preguntar{
    margin-left:0;padding:11px 18px;border-radius:999px;border-bottom:0;
    background:#25D366;color:#0b2d18;font-size:12px;text-transform:uppercase;
  }
  .preguntar:hover{background:#1eb455;color:#0b2d18;border-bottom:0}
}

/* ── Rejilla de tarjetas ─────────────────────────────────────────────────── */
.rejilla{
  display:grid;gap:18px;margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.tarjeta{
  background:var(--paper);
  border:1px solid var(--linea);
  border-radius:14px;
  padding:26px 24px;
}
.tarjeta__num{
  display:block;margin-bottom:12px;
  font-size:11px;letter-spacing:.2em;color:var(--teak-600);font-weight:700;
}
.tarjeta p{font-size:15.5px;color:var(--ink-600);line-height:1.7}

/* ── Cifras destacadas ───────────────────────────────────────────────────── */
.cifras{
  display:grid;gap:2px;margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:14px;overflow:hidden;
}
.cifra{background:var(--paper);padding:24px 22px}
.cifra__valor{
  display:block;font-size:clamp(1.7rem,1.4rem + 1.2vw,2.5rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;
}
.cifra__texto{
  display:block;margin-top:9px;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--stone-500);
  font-weight:600;
}

/* ── Listas ──────────────────────────────────────────────────────────────── */
.lista-check{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.lista-check li{
  position:relative;padding-left:30px;color:var(--ink-600);line-height:1.7;
}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:8px;
  border-left:2px solid var(--teak-500);
  border-bottom:2px solid var(--teak-500);
  transform:rotate(-45deg);
}
.lista-check strong{color:var(--ink-900)}

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */
.pregunta{
  border-bottom:1px solid var(--linea);
  padding:26px 0;
}
.pregunta:first-of-type{border-top:1px solid var(--linea);margin-top:32px}
.pregunta h3{margin:0 0 12px;font-size:clamp(1.05rem,1rem + .4vw,1.28rem)}
.pregunta p{color:var(--ink-600);max-width:64ch}

/* ── Bloque de llamada a la acción ───────────────────────────────────────── */
.cta{
  background:var(--ink-900);color:var(--cream-50);
  border-radius:18px;
  padding:clamp(34px,5vw,58px);
  margin:clamp(44px,7vw,72px) 0;
}
.cta h2{color:var(--cream-50);margin-bottom:16px}
.cta p{color:var(--stone-300);max-width:52ch;margin-bottom:0}
.cta__botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.boton{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 30px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;line-height:1;
  border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .12s ease;
}
.boton:active{transform:translateY(1px)}
.boton--principal{background:var(--teak-500);color:var(--cream-50)}
.boton--principal:hover{background:var(--teak-600);color:var(--cream-50)}
.boton--fantasma{border-color:rgba(244,242,238,.3);color:var(--cream-50)}
.boton--fantasma:hover{background:rgba(244,242,238,.09);color:var(--cream-50)}
.boton--claro{border-color:var(--linea-fuerte);color:var(--ink-900)}
.boton--claro:hover{background:var(--paper);color:var(--ink-900)}
.boton--wa{background:#25D366;color:#0b2d18}
.boton--wa:hover{background:#1eb455;color:#0b2d18}

.cta__dato{
  margin-top:26px;font-size:14px;color:var(--stone-500);
}
.cta__dato a{color:var(--stone-300)}

/* ── Enlaces entre páginas ───────────────────────────────────────────────── */
.tambien{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:30px}
.tambien a{
  display:block;padding:24px;border:1px solid var(--linea);border-radius:14px;
  background:var(--paper);text-decoration:none;color:var(--ink-900);
  transition:border-color .22s ease,transform .18s ease;
}
.tambien a:hover{border-color:var(--linea-fuerte);transform:translateY(-2px)}
.tambien strong{display:block;font-size:16px;margin-bottom:7px}
.tambien span{font-size:14.5px;color:var(--ink-600);line-height:1.6}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{
  background:var(--ink-900);color:var(--stone-500);
  padding:clamp(44px,6vw,64px) 0 34px;
  margin-top:clamp(40px,6vw,72px);
  font-size:14px;
}
.pie__logo{
  font-size:clamp(2.6rem,8vw,5.4rem);font-weight:800;line-height:.9;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--cream-50);
  margin-bottom:40px;
}
.pie__cols{
  display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid rgba(244,242,238,.14);
  padding-top:32px;
}
.pie__col span{
  display:block;margin-bottom:14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-500);
}
.pie__col a{display:block;color:var(--stone-300);text-decoration:none;padding:5px 0;font-size:14px}
.pie__col a:hover{color:var(--cream-50)}
.pie__legal{margin-top:34px;font-size:12.5px;color:var(--stone-500)}

/* ── Botón flotante de WhatsApp ──────────────────────────────────────────── */
.wa-flotante{
  position:fixed;z-index:60;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:999px;
  background:#25D366;color:#0b2d18;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
}
.wa-flotante:hover{background:#1eb455;color:#0b2d18}
.wa-flotante:active{transform:translateY(1px)}
@media (max-width:640px){
  .wa-flotante{padding:13px 17px;font-size:12px;gap:8px}
  .wa-flotante svg{width:19px;height:19px}
}
@media print{.wa-flotante,.barra{display:none}}