/* El Sitio Condominio · hoja de estilos
   Sigue el libro de marca (oct. 2026): paleta oficial, Georgia en titulares, Arial en textos,
   alineación izquierda, composiciones despejadas. Móvil primero. Sin fuentes ni recursos externos.
   Color de fondo: base marfil y blanco; bloques en bosque y oliva (el río, los recorridos y el pie);
   arena y salvia como acentos (lo que existe hoy, el cierre, líneas y etiquetas).
   Medido a 1440 px sin contar las fotos (10-oct-2026): 60 % marfil/blanco · 20 % bosque/oliva · 19 % arena/salvia
   (el libro sugiere 60/25/15).
   Texto siempre en carbón, bosque, oliva o marfil. Salvia y arena nunca como color de texto. */

:root {
  --oliva: #465323;
  --bosque: #203c30;
  --marfil: #f5f2e9;
  --arena: #d8c7aa;
  --salvia: #9ca889;
  --carbon: #191d19;
  --blanco: #ffffff;

  /* Georgia y Arial (libro, pág. 8). Si el equipo no las trae (Android, Linux), se usan sus equivalentes métricos
     si existen (Gelasio, Arimo, Liberation Sans) y si no, la serif y la sans del sistema. */
  --serif: Georgia, Gelasio, "Noto Serif", "Droid Serif", "Times New Roman", serif;
  --sans: Arial, Arimo, "Liberation Sans", Helvetica, Roboto, sans-serif;

  --ancho: 1160px;
  --margen: 16px;
  --seccion: 64px;
  --radio: 2px;
  color-scheme: light;
}

@media (min-width: 640px) { :root { --margen: 24px; --seccion: 80px; } }
@media (min-width: 1024px) { :root { --margen: 40px; --seccion: 104px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--marfil);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17 px: el libro pide 16-18 px en web */
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bosque); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oliva); }
:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--bosque); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.25rem, 8vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 5.4vw, 2.75rem); }
h3 { font-size: 1.375rem; line-height: 1.25; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 700; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: -100px; z-index: 100; background: var(--bosque); color: var(--marfil); padding: 12px 16px; font-weight: 700; border-radius: var(--radio); }
.saltar:focus { top: 8px; color: var(--marfil); }

/* Antetítulo: como «02 / ESENCIA» en el libro (Arial Bold, mayúsculas, oliva) */
.antetitulo { font-family: var(--sans); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--oliva); margin: 0 0 14px; }
.entradilla { font-size: 1.125rem; max-width: 40em; }
.nota { font-size: .9375rem; color: var(--carbon); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px;
  font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: left;
  background: var(--bosque); color: var(--marfil);
  border: 2px solid var(--bosque); border-radius: var(--radio);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boton:hover { background: var(--oliva); border-color: var(--oliva); color: var(--marfil); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-borde { background: transparent; color: var(--bosque); }
.boton-borde:hover { background: var(--bosque); color: var(--marfil); border-color: var(--bosque); }
.boton-claro { background: var(--marfil); color: var(--bosque); border-color: var(--marfil); }
.boton-claro:hover { background: var(--blanco); border-color: var(--blanco); color: var(--bosque); }
.boton-chico { min-height: 44px; padding: 9px 16px; font-size: .9375rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Encabezado con el logo aprobado ---------- */
.encabezado { background: var(--marfil); }
.encabezado-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
/* Área de protección del libro: 0,5 X (X = altura de la E) = 6,2 % del ancho del logo a cada lado.
   Logo a 180 px -> 11 px; a 210 px -> 13 px. Aquí se deja un poco más. */
.logo { display: block; padding: 14px; margin-left: -14px; line-height: 0; flex: none; }
.logo img { width: 180px; height: auto; } /* mínimo del libro: 180 px en pantalla */
.encabezado .boton { display: none; }
@media (min-width: 640px) { .encabezado .boton { display: inline-flex; } }
@media (min-width: 1024px) { .logo { padding: 16px; margin-left: -16px; } .logo img { width: 210px; } }

/* Menú de secciones: fijo arriba, sin logo (el logo va completo en el encabezado) */
.menu { position: sticky; top: 0; z-index: 30; background: var(--marfil); border-top: 1px solid var(--arena); border-bottom: 1px solid var(--arena); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu ul::-webkit-scrollbar { display: none; }
.menu a { display: block; white-space: nowrap; padding: 13px 10px; font-size: .9375rem; color: var(--carbon); text-decoration: none; border-bottom: 2px solid transparent; }
.menu li:first-child a { padding-left: 0; }
.menu a:hover { color: var(--oliva); border-bottom-color: var(--oliva); }
@media (min-width: 1024px) { .menu ul { gap: 14px; } }

/* El menú pegajoso mide 54 px: con 53 px de margen el salto no deja ver una franja de la sección anterior. */
main section[id] { scroll-margin-top: 53px; }

/* ---------- Héroe ---------- */
/* Móvil y tableta: foto real a todo el ancho y el texto en un panel marfil que la monta un poco.
   Escritorio: texto a la izquierda y foto completa a la derecha (como la portada del libro). */
.heroe { background: var(--marfil); }
.heroe-foto { margin-inline: calc(-1 * var(--margen)); }
.heroe-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.heroe-panel { position: relative; margin-top: -44px; background: var(--marfil); padding: 26px 20px 4px; }
.heroe h1 { margin-bottom: .35em; }
.heroe-sub { font-size: 1.1875rem; line-height: 1.5; color: var(--carbon); max-width: 30em; }
@media (min-width: 640px) {
  .heroe-foto img { aspect-ratio: 16 / 10; }
  .heroe-panel { max-width: 600px; padding: 36px 36px 8px; margin-top: -80px; }
}
@media (min-width: 1024px) {
  .heroe { padding-top: 24px; }
  .heroe-rejilla { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .heroe-foto { order: 2; margin-inline: 0; }
  .heroe-foto img { aspect-ratio: 4 / 3; border-radius: var(--radio); }
  .heroe-panel { order: 1; margin: 0; padding: 0; max-width: none; background: none; }
}

/* ---------- Datos rápidos ---------- */
/* minmax(0, 1fr): las dos columnas miden siempre lo mismo, aunque un dato no se pueda partir.
   El dato se achica con el ancho de la pantalla y, por debajo de 340 px (celulares plegables), va una sola columna. */
.datos { padding-block: 40px 8px; }
.datos ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--arena); }
.datos li { padding: 18px 10px 18px 0; border-bottom: 1px solid var(--arena); min-width: 0; }
.datos li:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--arena); }
.datos li:nth-child(even) { padding-left: 14px; }
.dato-valor { display: block; font-family: var(--serif); font-size: clamp(1.125rem, 5.5vw, 2.1rem); color: var(--bosque); line-height: 1.15; white-space: nowrap; }
.dato-etiqueta { display: block; font-size: .9375rem; color: var(--carbon); margin-top: 4px; }
@media (max-width: 339px) {
  .datos ul { grid-template-columns: minmax(0, 1fr); }
  .datos li, .datos li:nth-child(odd), .datos li:nth-child(even) { padding: 14px 0; border-right: 0; }
  .dato-valor { font-size: 1.5rem; }
}
@media (min-width: 900px) {
  .datos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .datos li, .datos li:nth-child(odd), .datos li:nth-child(even) { padding: 22px 20px; border-right: 1px solid var(--arena); }
  .datos li:first-child { padding-left: 0; }
  .datos li:last-child { border-right: 0; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--seccion); }
.seccion-blanca { background: var(--blanco); }
.seccion-arena { background: var(--arena); }
.seccion-bosque { background: var(--bosque); color: var(--marfil); }
.seccion-oliva { background: var(--oliva); color: var(--marfil); }
.seccion-bosque h2, .seccion-bosque h3, .seccion-oliva h2, .seccion-oliva h3 { color: var(--marfil); }
.seccion-bosque .antetitulo, .seccion-oliva .antetitulo { color: var(--marfil); }
.seccion-bosque a:not(.boton), .seccion-oliva a:not(.boton) { color: var(--marfil); }
.seccion-bosque :focus-visible, .seccion-oliva :focus-visible { outline-color: var(--marfil); }
.intro { max-width: 720px; margin-bottom: 40px; }
.intro p:last-child { margin-bottom: 0; }

.dos-columnas { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .dos-columnas { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
  .dos-columnas.mitad { grid-template-columns: 1fr 1fr; }
  .dos-columnas.centro { align-items: center; }
}

/* Figuras y fotos */
figure { margin: 0; }
.foto { position: relative; overflow: hidden; background: var(--salvia); border-radius: var(--radio); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.foto-completa img { aspect-ratio: auto 4 / 3; object-fit: contain; } /* foto entera, sin recorte; reserva 4:3 antes de cargar */
figcaption { font-size: .9375rem; color: var(--carbon); margin-top: 10px; }
.seccion-bosque figcaption, .seccion-oliva figcaption { color: var(--marfil); }

/* Esencia: Natural · Sereno · Confiable */
.esencia { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.esencia li { background: var(--blanco); padding: 28px 24px; border-radius: var(--radio); border-top: 4px solid var(--salvia); }
.esencia h3 { font-size: 1.75rem; margin-bottom: .45em; }
.esencia p { margin: 0; }
@media (min-width: 800px) { .esencia { grid-template-columns: repeat(3, 1fr); gap: 24px; } .esencia li { padding: 32px 28px 36px; } }

/* El lote */
.lista-check { list-style: none; padding: 0; margin: 0 0 24px; }
.lista-check li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--oliva); border-bottom: 2px solid var(--oliva); transform: rotate(-45deg); }
.seccion-oliva .lista-check li::before, .seccion-bosque .lista-check li::before { border-color: var(--arena); }
/* Caja «Pida el precio de su lote»: el precio se pide por el canal de contacto. */
.caja-lote { background: var(--marfil); border-top: 4px solid var(--oliva); padding: 28px 24px 32px; border-radius: var(--radio); }
.caja-lote h3 { font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.15; margin-bottom: 12px; }
.caja-lote-texto { margin: 0 0 22px; }
.caja-lote dl { margin: 0 0 24px; border-top: 1px solid var(--arena); }
.caja-lote dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--arena); }
.caja-lote dt { color: var(--carbon); }
.caja-lote dd { margin: 0; font-weight: 700; text-align: right; }
.caja-lote .boton { width: 100%; }
.caja-lote .boton + .boton { margin-top: 12px; } /* «Ver lotes disponibles», debajo de «Consultar el precio» */
@media (min-width: 960px) { .caja-lote { padding: 36px 36px 40px; position: sticky; top: 76px; } }

/* Plan maestro: el plano completo, sin recorte, enlazado al mapa de lotes /lotes/ */
.plano-enlace { display: block; line-height: 0; }
/* La caja reserva el alto del plano antes de que cargue la imagen diferida (si no, los saltos del menú caen mal):
   16:9 en pantallas anchas y 4:5 hasta 700 px, igual que las fuentes del <picture>. */
.plano-enlace img { aspect-ratio: auto 16 / 9; }
@media (max-width: 700px) { .plano-enlace img { aspect-ratio: auto 4 / 5; } }
.plano-enlace:hover img { opacity: .92; }

/* Naturaleza */
.trio { display: grid; gap: 24px; }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio h3 { font-size: 1.25rem; margin: 14px 0 4px; }
.trio p { margin: 0; }
.trio figcaption { margin-top: 0; }

/* Lo que existe hoy (fondo arena) */
.amenidades { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.amenidades li { background: var(--blanco); border-radius: var(--radio); padding: 18px 16px 20px; font-weight: 700; line-height: 1.35; }
.amenidades svg { display: block; width: 32px; height: 32px; color: var(--oliva); margin-bottom: 12px; }
.amenidades small { display: block; font-weight: 400; font-size: .9375rem; color: var(--carbon); margin-top: 4px; }
@media (min-width: 900px) { .amenidades { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .amenidades li { padding: 24px 22px; } }
.pareja { display: grid; gap: 24px; }
@media (min-width: 720px) { .pareja { grid-template-columns: 1fr 1fr; } }

.viene { margin-top: var(--seccion); padding-top: var(--seccion); border-top: 1px solid var(--bosque); }
.etiqueta { display: inline-block; font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radio); margin-bottom: 14px; }
.etiqueta-proceso { background: var(--oliva); color: var(--marfil); }
.etiqueta-proximo { background: var(--arena); color: var(--bosque); }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 24px 22px 28px; }
.tarjeta .foto { margin-top: 20px; }
@media (min-width: 900px) { .tarjeta { padding: 32px 32px 36px; } }

/* Galería (solo fotos reales) */
.galeria { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px 24px; }
@media (min-width: 560px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galeria a { display: block; line-height: 0; }
.galeria a:hover img { opacity: .92; }

/* Visor de fotos (se abre con sitio.js; sin JS el enlace abre la foto) */
.visor { width: min(100vw - 24px, 1200px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--radio); background: var(--carbon); color: var(--marfil); }
.visor::backdrop { background: rgba(25, 29, 25, .86); }
.visor img { width: 100%; max-height: calc(100vh - 140px); object-fit: contain; background: var(--carbon); }
.visor-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px 14px; }
.visor-texto { margin: 0; font-size: .9375rem; }
.visor .boton { min-height: 44px; }
.visor :focus-visible { outline-color: var(--marfil); }

/* Ubicación */
.distancias { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--arena); }
.distancias li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--arena); }
.distancias strong { font-weight: 700; text-align: right; }
.icono-externo { width: 18px; height: 18px; }

/* Recorridos */
.recorridos-caja { background: var(--marfil); color: var(--carbon); padding: 28px 24px 32px; border-radius: var(--radio); }
.recorridos-caja h3 { color: var(--bosque); }
/* La caja es marfil dentro de una sección oliva: el foco vuelve a oliva para que se vea (contraste 3:1 o más). */
.recorridos-caja :focus-visible { outline-color: var(--oliva); }
.recorridos-caja a:not(.boton) { color: var(--bosque); }
.horas { list-style: none; padding: 0; margin: 16px 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.horas li { border: 1.5px solid var(--bosque); color: var(--bosque); font-weight: 700; padding: 8px 14px; border-radius: var(--radio); background: var(--blanco); }
.recorridos-caja .lista-check li::before { border-color: var(--oliva); }
.recorridos-caja .boton { width: 100%; }
.contacto-alterno { margin: 14px 0 0; font-size: .9375rem; }
@media (min-width: 960px) { .recorridos-caja { padding: 36px 36px 40px; } }

/* Preguntas frecuentes */
.preguntas { max-width: 820px; border-top: 1px solid var(--arena); }
.preguntas details { border-bottom: 1px solid var(--arena); }
.preguntas summary { cursor: pointer; list-style: none; position: relative; padding: 20px 44px 20px 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--bosque); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 1.6rem; line-height: 1; color: var(--oliva); }
.preguntas details[open] summary::after { content: "\2212"; }
.preguntas summary:hover { color: var(--oliva); }
.respuesta { padding: 0 0 20px; max-width: 44em; }
.respuesta p:last-child { margin-bottom: 0; }

/* Cierre: variante bosque / arena del logo (pág. 6) */
.cierre { background: var(--arena); padding-block: var(--seccion); }
.cierre-fila { display: grid; gap: 28px; align-items: center; }
.cierre .logo-cierre { padding: 18px; margin-left: -18px; line-height: 0; } /* 0,5 X del logo a 260 px = 16 px */
.cierre .logo-cierre img { width: 220px; }
.cierre h2 { color: var(--bosque); }
.cierre p { color: var(--carbon); max-width: 34em; }
.cierre :focus-visible { outline-color: var(--bosque); }
@media (min-width: 900px) { .cierre-fila { grid-template-columns: auto 1fr; gap: 72px; } .cierre .logo-cierre img { width: 260px; } }

/* ---------- Pie legal (variante marfil / bosque del logo) ---------- */
.pie { background: var(--bosque); color: var(--marfil); padding: 56px 0 112px; font-size: .9375rem; }
.pie a { color: var(--marfil); }
.pie a:hover { color: var(--arena); }
.pie :focus-visible { outline-color: var(--marfil); }
.pie-arriba { display: grid; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--salvia); margin-bottom: 28px; }
.pie .logo { margin-left: -14px; }
.pie .logo img { width: 190px; }
.pie-enlaces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pie-legal { margin: 0 0 18px; line-height: 1.7; }
.pie-legal .sep { margin: 0 8px; color: var(--salvia); }
.pie-avisos p { margin: 0 0 8px; }
@media (min-width: 900px) { .pie-arriba { grid-template-columns: auto 1fr; align-items: center; } .pie-enlaces { justify-content: flex-end; } }

/* Botón flotante para agendar (colores de la marca) */
.flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bosque); color: var(--marfil); border: 2px solid var(--marfil);
  box-shadow: 0 6px 18px rgba(25, 29, 25, .28);
}
.flotante:hover { background: var(--oliva); color: var(--marfil); }
.flotante svg { width: 28px; height: 28px; }

/* ---------- Páginas de texto (privacidad, 404) ---------- */
.documento { padding-block: 48px var(--seccion); }
.documento .contenedor > * { max-width: 800px; } /* alineado a la izquierda con el logo */
.documento h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.documento h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); margin-top: 1.8em; }
.documento li { margin-bottom: .4em; }
.tabla-scroll { overflow-x: auto; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; background: var(--blanco); font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--arena); }
th { font-weight: 700; color: var(--bosque); background: var(--marfil); }
.pagina-404 { padding-block: 40px var(--seccion); }

@media print {
  .menu, .flotante, .saltar, .acciones, .encabezado .boton { display: none !important; }
  body { background: #fff; }
  .seccion-bosque, .seccion-oliva, .seccion-arena, .pie, .cierre { background: #fff; color: #000; }
}