/* ============================================================
   AD INMOBILIARIA — CAPA DE DISEÑO DEL CLIENTE
   ------------------------------------------------------------
   No existe en la plantilla base: es de este cliente, y por eso
   una actualización de la plantilla no lo toca. Se carga DESPUÉS
   de sitio.css y de catalogo.css, en index.html y catalogo/.

   EL RECORRIDO
   En bienes raíces la persona tiene que imaginarse viviendo ahí
   antes de racionalizar. Orden: imagen y zona (emoción) →
   propiedades con precio y metros (deseo con datos) → cómo
   trabajamos y quiénes somos (confianza) → contacto.

   CRITERIO VISUAL
     · Composición CENTRADA y ordenada. Editorial no es desalineado:
       los contenedores van al centro y el contenido respira.
     · Cada sección se maqueta distinto (texto y mapa, imagen
       completa, tira numerada, rejilla). El mismo bloque repetido
       es lo que delata una plantilla.
     · Una sola familia de color. Carbón, piedra, hueso y UN acento.
       Nada de un verde aquí y un naranja allá.
     · Bordes, sombras y redondeos: los mínimos.

   sitio.css está armado sobre variables, así que el sitio público
   se retematiza redefiniéndolas en body.tema-oscuro. El panel no
   lleva esa clase ni carga este archivo.
   ============================================================ */

/* ============================================================
   1. PALETA
   Una sola familia. Todo lo que destaque usa --acento; lo demás
   es carbón o piedra. Así no hay elementos sueltos de otro color.
   ============================================================ */
body.tema-oscuro {
  --carbon: #16120F;          /* cálido, no negro puro */
  --carbon-hondo: #0C0908;
  --carbon-suave: #1F1915;
  --piedra: #F4F0E8;
  --piedra-2: #E9E2D6;
  --hueso: #FBF9F5;

  --acento: #9A7F4B;          /* sobre claro */
  --acento-claro: #C9AE79;    /* sobre carbón */

  --bg: var(--carbon);
  --surface: var(--carbon-suave);
  --surface-2: #241E19;
  --surface-3: #2E2720;
  --line: rgba(201, 174, 121, .15);

  --ink: #F2EDE4;
  --ink-soft: #B9AF9F;
  --ink-muted: #8A7F6F;
  --ink-inverso: #FFFFFF;

  --marca-1: var(--acento-claro);
  --marca-1-oscuro: #DDC79A;
  --marca-2: var(--carbon);
  --marca-3: var(--acento-claro);

  /* Los estados del catálogo también entran a la familia: con verde,
     naranja y rojo de fábrica el catálogo parecía un tablero. */
  --exito: var(--acento-claro);
  --oferta: var(--acento);
  --alerta: var(--acento);
  --peligro: #8C5A4A;
  /* El aviso de "estás viendo tal categoría" salía en azul de fábrica
     (--info: #2563EB), el único color frío que quedaba en el sitio. */
  --info: var(--acento);

  --sombra-sm: none;
  --sombra: 0 18px 40px -28px rgba(0, 0, 0, .9);
  --sombra-lg: 0 30px 70px -40px rgba(0, 0, 0, .95);
  --sombra-marca: none;

  --radio-sm: 2px;
  --radio: 3px;
  --radio-lg: 3px;

  background: var(--bg);
  color: var(--ink);
}

/* Serif editorial en los títulos. Un sans geométrico lee
   "aplicación"; una serif de revista lee "inmobiliaria". */
.tema-oscuro h1, .tema-oscuro h2, .tema-oscuro h3, .tema-oscuro h4,
.tema-oscuro .seccion-titulo, .tema-oscuro .marca-nombre,
.tema-oscuro .producto-titulo, .tema-oscuro .precio {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ============================================================
   2. CABECERA INTEGRADA CON LA PORTADA
   La barra nace dentro de la foto: sin fondo, sobre un velo que
   forma parte del degradado de la portada. Al desplazar se vuelve
   sólida. Así se siente una sola pieza y no dos bloques pegados.
   ============================================================ */
.tema-oscuro .cabecera {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
/* El velo superior: parte de la portada, no de la barra. */
.tema-oscuro .cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 9, 8, .78), rgba(12, 9, 8, 0));
  transition: opacity .35s ease;
}
.tema-oscuro .cabecera.con-sombra {
  background: rgba(18, 14, 12, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: none;
}
.tema-oscuro .cabecera.con-sombra::before { opacity: 0; }

.tema-oscuro .marca img { border-radius: 0; }
.tema-oscuro .marca-nombre { font-size: 1.1rem; letter-spacing: .02em; }
.tema-oscuro .marca-eslogan {
  color: var(--acento-claro); letter-spacing: .24em;
  text-transform: uppercase; font-size: .6rem;
}
.tema-oscuro .nav-principal a:not(.boton) {
  color: var(--ink-soft); font-size: .875rem; position: relative;
}
.tema-oscuro .nav-principal a:not(.boton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px; background: var(--acento-claro);
  transform: scaleX(0); transform-origin: center; transition: transform .3s ease;
}
.tema-oscuro .nav-principal a:not(.boton):hover { color: var(--acento-claro); }
.tema-oscuro .nav-principal a:not(.boton):hover::after { transform: scaleX(1); }
.tema-oscuro .nav-boton { color: var(--ink); border-color: rgba(255, 255, 255, .25); }
@media (max-width: 860px) {
  .tema-oscuro .nav-principal { background: rgba(18, 14, 12, .97); backdrop-filter: blur(10px); }
}

/* ============================================================
   3. BOTONES
   Uno principal por sección; el resto son enlaces con filete.
   ============================================================ */
.tema-oscuro .boton { border-radius: 2px; letter-spacing: .02em; }
.tema-oscuro .boton:hover { transform: none; }
.tema-oscuro .boton-primario {
  background: var(--acento-claro); color: var(--carbon-hondo);
  border-color: var(--acento-claro); box-shadow: none;
  transition: background .25s ease, color .25s ease;
}
.tema-oscuro .boton-primario:hover { background: var(--hueso); color: var(--carbon-hondo); }
.tema-oscuro .boton-secundario,
.tema-oscuro .boton-claro {
  background: none; border: 0; border-bottom: 1px solid currentColor;
  border-radius: 0; padding: 4px 0; color: var(--ink); box-shadow: none;
}
.tema-oscuro .boton-secundario:hover,
.tema-oscuro .boton-claro:hover { background: none; color: var(--acento-claro); }

/* ============================================================
   4. SECCIONES — centradas y con aire
   ============================================================ */
.tema-oscuro .seccion { padding-block: clamp(4rem, 3rem + 4vw, 7.5rem); }
.tema-oscuro .seccion-encabezado {
  max-width: 56ch; margin: 0 auto var(--e-7); text-align: center;
}
.tema-oscuro .seccion-encabezado .seccion-titulo { padding-bottom: 0; }
.tema-oscuro .seccion-encabezado .seccion-titulo::after {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--acento); margin: var(--e-4) auto 0; opacity: .8;
}
.tema-oscuro .seccion-eyebrow {
  display: block; color: var(--acento); letter-spacing: .24em;
  font-size: .68rem; margin-bottom: var(--e-3);
}
.tema-oscuro .seccion-titulo { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.08; }
.tema-oscuro .seccion-texto { font-size: 1.02rem; margin-inline: auto; }

/* ============================================================
   5. PORTADA
   ============================================================ */
.tema-oscuro .hero {
  background: none; padding: 0; min-height: min(88vh, 820px);
  display: grid; align-items: center; position: relative; overflow: hidden;
}
.tema-oscuro .hero::before, .tema-oscuro .hero::after { display: none; }

/* SOLO la figura de la portada va absoluta. Sin acotar el selector, la
   figura de "Quiénes somos" (que comparte la clase .hero-figura) también se
   posicionaba absoluta y se salía de su sección. */
.tema-oscuro .hero > .hero-interior > .hero-figura {
  position: absolute; inset: 0; margin: 0; border-radius: 0;
  /* sitio.css le pone aspect-ratio 4/3 a .hero-figura. Con inset:0 esa
     proporción gana sobre el alto del contenedor: la figura medía 948px
     dentro de una portada de 749px y el degradado oscuro del pie quedaba
     fuera de cuadro, justo donde tiene que oscurecer para que se lea. */
  aspect-ratio: auto;
  box-shadow: none; animation: none; z-index: 0;
}
.tema-oscuro .hero-figura::after { display: none; }
.tema-oscuro .hero .hero-figura img { width: 100%; height: 100%; object-fit: cover; }
/* Velo: oscuro abajo y a la izquierda para que el texto se lea. */
.tema-oscuro .hero .hero-figura::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 9, 8, .55) 0%, rgba(12, 9, 8, .1) 35%, rgba(12, 9, 8, .88) 100%),
    linear-gradient(90deg, rgba(12, 9, 8, .75) 0%, rgba(12, 9, 8, .15) 65%);
}

/* La portada va centrada, como el resto. */
.tema-oscuro .hero-interior {
  position: static; display: block; text-align: center;
  padding-block: clamp(7rem, 5rem + 7vw, 10rem) clamp(3rem, 2rem + 3vw, 5rem);
}
.tema-oscuro .hero-interior > div:first-child { position: relative; z-index: 2; }
.tema-oscuro .hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.03;
  max-width: 18ch; margin: 0 auto var(--e-4);
}
.tema-oscuro .hero p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; font-size: 1.05rem; }
.oro-texto { background: none; color: var(--acento-claro); animation: none; -webkit-text-fill-color: currentColor; }

/* Buscador: una línea de campos, centrada. */
.tema-oscuro .buscador-hero {
  display: grid; background: rgba(12, 9, 8, .45); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 2px;
  box-shadow: none; padding: 0; margin: var(--e-6) auto 0; max-width: 680px;
}
@media (min-width: 720px) { .tema-oscuro .buscador-hero { grid-template-columns: 1.3fr 1fr auto; gap: 0; } }
.tema-oscuro .buscador-hero .campo-busca { position: relative; display: flex; align-items: center; }
.tema-oscuro .buscador-hero .campo-busca + .campo-busca { border-left: 1px solid rgba(255, 255, 255, .16); }
.tema-oscuro .buscador-hero .campo-busca i {
  position: absolute; left: var(--e-4); font-size: .95rem;
  color: var(--acento-claro); pointer-events: none;
}
.tema-oscuro .buscador-hero input,
.tema-oscuro .buscador-hero select {
  width: 100%; border: 0; background: transparent; color: var(--ink);
  font-family: var(--fuente-texto); font-size: .95rem; border-radius: 0;
  padding: var(--e-4) var(--e-4) var(--e-4) calc(var(--e-4) * 2.4);
}
.tema-oscuro .buscador-hero select { appearance: none; cursor: pointer; }
.tema-oscuro .buscador-hero select option { background: var(--carbon); color: var(--ink); }
.tema-oscuro .buscador-hero input::placeholder { color: var(--ink-muted); }
.tema-oscuro .buscador-hero input:focus,
.tema-oscuro .buscador-hero select:focus { outline: 1px solid rgba(201, 174, 121, .55); outline-offset: -1px; }
.tema-oscuro .buscador-hero .boton { border-radius: 0; padding-inline: var(--e-5); }

.tema-oscuro .hero-acciones { justify-content: center; }

/* Cifras: prueba social. */
.tema-oscuro .hero-datos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  padding-top: var(--e-5); margin-top: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.tema-oscuro .hero-dato { text-align: center; }
.tema-oscuro .hero-dato strong {
  background: none; color: var(--hueso); -webkit-text-fill-color: currentColor;
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem); line-height: 1;
}
.tema-oscuro .hero-dato span {
  display: block; margin-top: 6px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .14em; font-size: .64rem;
}

/* ============================================================
   6. BLOQUES CLAROS
   ============================================================ */
.tema-oscuro .bloque-claro {
  --bg: var(--piedra);
  --surface: var(--hueso);
  --surface-2: var(--piedra-2);
  --surface-3: #DED5C6;
  --line: rgba(22, 18, 15, .12);
  --ink: #171310;
  --ink-soft: #554D43;
  --ink-muted: #857B6E;
  --marca-1: var(--acento);
  --marca-3: var(--acento);
  --exito: var(--acento);
  --oferta: var(--acento);
  background: var(--bg); color: var(--ink);
}
.tema-oscuro .bloque-claro.seccion-alterna { background: var(--hueso); border-block: 0; }
.tema-oscuro .bloque-claro .boton-primario {
  background: var(--carbon); color: var(--hueso); border-color: var(--carbon);
}
.tema-oscuro .bloque-claro .boton-primario:hover { background: var(--acento); color: var(--carbon-hondo); }
.tema-oscuro .bloque-claro .boton-secundario,
.tema-oscuro .bloque-claro .boton-claro { color: var(--ink); }
.tema-oscuro .bloque-claro .boton-secundario:hover { color: var(--acento); }

/* ============================================================
   7. ZONA
   El mapa se dimensiona con aspect-ratio, NO con posición
   absoluta: así no puede salirse de su sección ni aparecer
   flotando sobre la siguiente.
   ============================================================ */
/* Texto centrado arriba y el mapa como franja ancha debajo.
   Antes eran dos columnas de una rejilla, y el alto de la fila lo marcaba
   el mapa: cuando el texto no cabía se salía de la sección y se montaba
   sobre la siguiente. Apilado no puede pasar. */
.tema-oscuro #zona { padding-block: 0; }
.zona { display: block; }

.zona-texto {
  max-width: 62ch; margin-inline: auto; text-align: center;
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) var(--e-4);
}
.zona-texto p { margin-inline: auto; }

.zona-mapa { display: block; aspect-ratio: 21 / 9; background: var(--piedra-2); }
@media (max-width: 767px) { .zona-mapa { aspect-ratio: 4 / 3; } }
.zona-mapa iframe, .zona-mapa img {
  display: block; width: 100%; height: 100%; border: 0; object-fit: cover;
}

/* En fila y centradas, que es como caen bien bajo un texto centrado. */
.zona-lista {
  list-style: none; margin: var(--e-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-3) var(--e-5);
}
.zona-lista li { display: flex; gap: var(--e-2); font-size: .92rem; color: var(--ink-soft); align-items: center; }
.zona-lista i { color: var(--acento); font-size: .95rem; }

/* ============================================================
   8. FICHAS DE PROPIEDAD
   Escaneables: foto grande, categoría, título, specs y precio.
   En inmobiliaria lo primero es la foto y lo último el precio;
   en medio, los datos que deciden (m², recámaras, baños).
   ============================================================ */
.tema-oscuro .producto {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}
.tema-oscuro .producto:hover { transform: none; box-shadow: none; }
.tema-oscuro .producto-foto {
  aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--surface-2);
}
.tema-oscuro .producto:hover .producto-foto img { transform: scale(1.03); }
.tema-oscuro .producto-cuerpo { padding: var(--e-4) 0 0; gap: 0; }

.tema-oscuro .producto-categoria {
  color: var(--acento); letter-spacing: .18em; font-size: .62rem;
  text-transform: uppercase; margin-bottom: 6px;
}
.tema-oscuro .producto-titulo {
  font-size: 1.22rem; line-height: 1.2; margin: 0 0 var(--e-3);
  transition: color .2s ease;
}
.tema-oscuro .producto:hover .producto-titulo { color: var(--acento-claro); }
.tema-oscuro .bloque-claro .producto:hover .producto-titulo,
.tema-oscuro #resultados .producto:hover .producto-titulo { color: var(--acento); }

/* Las specs, en renglón con separadores: se leen de un vistazo. */
.tema-oscuro .producto-datos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  padding-block: var(--e-3); margin-bottom: var(--e-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-soft); row-gap: var(--e-2);
}
.tema-oscuro .producto-datos > span { display: flex; align-items: baseline; gap: 4px; padding-inline: var(--e-2); white-space: nowrap; }
.tema-oscuro .producto-datos > span:first-child { padding-left: 0; }
.tema-oscuro .producto-datos > span + span { border-left: 1px solid var(--line); }
.tema-oscuro .producto-datos small { color: var(--ink-muted); font-size: .72rem; }

.tema-oscuro .producto-precio { margin-top: auto; padding-top: 0; }
.tema-oscuro .precio { font-size: 1.3rem; color: var(--ink); }
.tema-oscuro .precio-nota { color: var(--ink-muted); font-size: .85rem; }
.tema-oscuro .producto-codigo { color: var(--ink-muted); }

/* Etiquetas sobre la foto: una sola familia de color. */
.tema-oscuro .etiqueta {
  border-radius: 2px; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px;
  background: rgba(12, 9, 8, .82); color: var(--acento-claro);
  border: 0; backdrop-filter: blur(4px);
}
.tema-oscuro .etiqueta-destacado { background: var(--acento-claro); color: var(--carbon-hondo); }
.tema-oscuro .etiqueta-estado { background: rgba(12, 9, 8, .82); color: var(--ink); }

.tema-oscuro .categoria-tile {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: var(--e-4) 0 var(--e-5);
}
.tema-oscuro .categoria-tile:hover { transform: none; box-shadow: none; color: var(--acento); }
.tema-oscuro .categoria-tile i { color: var(--acento); font-size: 1.15rem; margin-bottom: var(--e-2); }

/* La pista venía con grid-auto-columns: minmax(230px, 1fr). Ese 1fr reparte
   el ancho entre las tarjetas que haya: con seis salen a 230 px, pero con
   tres se van a 363 y con una sola la foto llega a 840 px de alto. De ahí
   que "lo último que entró" se viera desproporcionado. Con ancho fijo una
   propiedad se ve igual que doce, y en escritorio entran cinco de un golpe.

   safe center las centra cuando caben y las deja al inicio cuando hay que
   desplazar; con center a secas el primer elemento se sale por la izquierda
   y no hay forma de llegar a él. */
.tema-oscuro .vitrina-pista {
  grid-auto-columns: 212px;
  justify-content: safe center;
}

.tema-oscuro .vitrina-control {
  background: none; border: 1px solid var(--line); border-radius: 0; color: var(--ink-soft);
}
.tema-oscuro .vitrina-control:hover { background: none; color: var(--acento); border-color: var(--acento); }
.tema-oscuro .esqueleto { background: var(--surface-2); animation: none; border-radius: 2px; }
.tema-oscuro .bloque-claro .esqueleto { background: var(--piedra-2); }
.tema-oscuro .mensaje-vacio { border: 1px dashed var(--line); border-radius: 2px; color: var(--ink-muted); }

/* ============================================================
   9. "LO QUE NOS DISTINGUE"
   ============================================================ */
.tema-oscuro #servicios .rejilla { gap: 0; }
.tema-oscuro .tarjeta {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--e-5) var(--e-4); text-align: center;
}
.tema-oscuro .tarjeta + .tarjeta { border-left: 1px solid var(--line); }
.tema-oscuro .tarjeta:hover { transform: none; box-shadow: none; }
.tema-oscuro .tarjeta::after { display: none; }
.tema-oscuro .tarjeta-icono {
  width: auto; height: auto; margin: 0 auto var(--e-3); padding: 0;
  background: none; border: 0; border-radius: 0;
  font-size: 1.4rem; color: var(--acento); display: block;
}
.tema-oscuro .tarjeta h3 { font-size: 1.1rem; margin-bottom: var(--e-2); }
.tema-oscuro .tarjeta p { margin: 0; font-size: .95rem; }
@media (max-width: 767px) {
  .tema-oscuro .tarjeta + .tarjeta { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============================================================
   10. PROCESO
   ============================================================ */
.tema-oscuro #proceso .contenedor { max-width: 1080px; }
.tema-oscuro .pasos { gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tema-oscuro .paso { padding-top: var(--e-5); border-top: 1px solid var(--line); text-align: center; }
.tema-oscuro .paso::before {
  position: static; display: block; margin: 0 auto var(--e-3);
  background: none; color: var(--acento); -webkit-text-fill-color: currentColor;
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.1rem;
}
.tema-oscuro .paso::after { display: none; }
.tema-oscuro .paso h3 { font-size: 1.02rem; }

/* ============================================================
   11. NOSOTROS — imagen completa con el texto al lado
   ============================================================ */
.tema-oscuro #nosotros > .contenedor { max-width: none; padding: 0; }
.tema-oscuro #nosotros .rejilla { gap: 0 !important; align-items: stretch; }
@media (min-width: 900px) { .tema-oscuro #nosotros .rejilla { grid-template-columns: 1fr 1fr; } }
.tema-oscuro #nosotros .rejilla > div:first-child {
  padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 5rem);
  align-self: center; text-align: left;
}
.tema-oscuro #nosotros .figura-clara {
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .tema-oscuro #nosotros .figura-clara { aspect-ratio: auto; min-height: 100%; } }
.tema-oscuro #nosotros .figura-clara img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   12. ASESORES
   ============================================================ */
.tema-oscuro .asesores { gap: 0; }
.tema-oscuro .asesor {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: var(--e-6) var(--e-4);
  flex-direction: column; align-items: center; text-align: center; gap: var(--e-3);
}
.tema-oscuro .asesor:hover { transform: none; box-shadow: none; }
.tema-oscuro .asesor-inicial {
  width: auto; height: auto; border-radius: 0; background: none;
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 1.7rem; color: var(--acento); line-height: 1; opacity: 1;
}
.tema-oscuro .asesor-datos strong { font-size: 1.25rem; }
.tema-oscuro .asesor-datos span {
  display: block; color: var(--ink-muted); letter-spacing: .16em;
  font-size: .64rem; margin-bottom: var(--e-3);
}
@media (min-width: 760px) {
  .tema-oscuro .asesor + .asesor { border-left: 1px solid var(--line); }
}

/* ============================================================
   13. PREGUNTAS Y CONTACTO
   ============================================================ */
.tema-oscuro #preguntas .contenedor { max-width: 760px; }
.tema-oscuro .faq-item { border-bottom-color: var(--line); }
.tema-oscuro .faq-pregunta { font-family: var(--fuente-texto); font-size: 1rem; color: var(--ink); }
.tema-oscuro .faq-pregunta:hover,
.tema-oscuro .faq-item.abierto .faq-pregunta,
.tema-oscuro .faq-pregunta i { color: var(--acento); }

.tema-oscuro .lista-contacto i { color: var(--acento); }
.tema-oscuro .tabla-horario td { border-bottom: 1px solid var(--line); }
.tema-oscuro .tabla-horario tr.hoy td { color: var(--acento); }
.tema-oscuro .campo input, .tema-oscuro .campo textarea, .tema-oscuro .campo select {
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding-inline: 0; color: var(--ink);
}
.tema-oscuro .campo input:focus, .tema-oscuro .campo textarea:focus {
  border-bottom-color: var(--acento); box-shadow: none; outline: 0;
}
.tema-oscuro .campo label {
  color: var(--ink-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.tema-oscuro .mapa-embebido { border-radius: 0; box-shadow: none; }

/* ============================================================
   14. LLAMADA FINAL Y PIE
   ============================================================ */
.tema-oscuro .franja-cta { background: var(--carbon-hondo); border-block: 0; text-align: center; }
.tema-oscuro .franja-cta .contenedor { max-width: 720px; }
.tema-oscuro .franja-cta h2 {
  font-size: clamp(1.8rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08;
  max-width: 20ch; margin-inline: auto;
}
.tema-oscuro .franja-cta p { color: var(--ink-soft); margin: var(--e-3) auto var(--e-6); max-width: 48ch; }

.tema-oscuro .pie { background: var(--carbon-hondo); border-top: 1px solid var(--line); }
.tema-oscuro .pie h4 { color: var(--ink); font-size: .95rem; }
.tema-oscuro .pie a:hover { color: var(--acento-claro); }
.tema-oscuro .pie-legal { border-top-color: var(--line); }
.tema-oscuro .redes a { background: rgba(255, 255, 255, .07); border-radius: 2px; }
.tema-oscuro .redes a:hover { background: var(--acento-claro); color: var(--carbon-hondo); }

/* ============================================================
   15. CATÁLOGO — mismo lenguaje que la portada
   ============================================================ */
.tema-oscuro .catalogo-hero { background: var(--carbon-hondo); position: relative; }
.tema-oscuro .catalogo-hero::after { display: none; }
.tema-oscuro .catalogo-hero h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.tema-oscuro .catalogo-hero p { color: var(--ink-soft); }
.tema-oscuro .catalogo-hero .marca-eslogan { color: var(--acento-claro); }
.tema-oscuro .volver-sitio { color: var(--ink-soft); }
.tema-oscuro .volver-sitio:hover { color: var(--acento-claro); }

.tema-oscuro .barra-filtros, .tema-oscuro #resultados, .tema-oscuro .paginacion {
  --bg: var(--piedra); --surface: var(--hueso); --surface-2: var(--piedra-2);
  --surface-3: #DED5C6;
  --line: rgba(22, 18, 15, .12);
  --ink: #171310; --ink-soft: #554D43; --ink-muted: #857B6E;
  --marca-1: var(--acento); --marca-3: var(--acento);
  --exito: var(--acento); --oferta: var(--acento);
  color: var(--ink);
}
.tema-oscuro:has(.barra-filtros) { background: var(--piedra); }
.tema-oscuro .barra-filtros { background: var(--hueso); border-bottom: 1px solid var(--line); }
.tema-oscuro .barra-filtros input,
.tema-oscuro .barra-filtros select {
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.tema-oscuro .barra-filtros input:focus,
.tema-oscuro .barra-filtros select:focus { border-bottom-color: var(--acento); box-shadow: none; outline: 0; }
.tema-oscuro #resultados .producto { background: none; border: 0; box-shadow: none; }
.tema-oscuro #resultados .precio { color: var(--ink); }
.tema-oscuro .chip, .tema-oscuro .paginacion button {
  border-radius: 2px; border-color: var(--line);
}
.tema-oscuro .paginacion button.activo { background: var(--acento); border-color: var(--acento); color: var(--hueso); }

/* ============================================================
   16. BURBUJA DE WHATSAPP
   ============================================================ */
.tema-oscuro .burbuja-wa {
  position: fixed;
  right: max(var(--e-5), env(safe-area-inset-right));
  bottom: max(var(--e-5), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
}
.tema-oscuro .burbuja-wa i { line-height: 1; font-size: 1.4rem; }
@media (max-width: 575px) {
  .tema-oscuro .burbuja-wa {
    right: max(var(--e-4), env(safe-area-inset-right));
    bottom: max(var(--e-4), env(safe-area-inset-bottom));
    width: 48px; height: 48px;
  }
}

/* ============================================================
   17. APARICIÓN AL DESPLAZAR
   ============================================================ */
.js [data-aparece] { opacity: 0; transform: translateY(12px); }
.js [data-aparece].visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .js [data-aparece] { opacity: 1; transform: none; } }

/* ============================================================
   18. MÓVIL
   ============================================================ */
@media (max-width: 767px) {
  .tema-oscuro .hero { min-height: 0; }
  .tema-oscuro .hero-figura::before {
    background: linear-gradient(180deg, rgba(12, 9, 8, .6) 0%, rgba(12, 9, 8, .94) 65%);
  }
  .tema-oscuro .buscador-hero .campo-busca + .campo-busca {
    border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .tema-oscuro .asesor + .asesor { border-left: 0; }
  .tema-oscuro #nosotros .rejilla > div:first-child { text-align: center; }
}

/* ============================================================
   19. LA CABECERA SOBRE LA PORTADA
   sitio.css la deja sticky en el flujo, así que la portada
   empezaba justo debajo y se veían dos bloques pegados. Aquí la
   barra se monta ENCIMA de la foto: la portada arranca arriba del
   todo y la navegación flota sobre ella. Solo en la página que
   tiene portada; en el catálogo se queda como está.
   ============================================================ */
.tema-oscuro:has(.hero) .cabecera {
  position: fixed; top: 0; left: 0; right: 0;
  backdrop-filter: none;
}
.tema-oscuro:has(.hero) .cabecera.con-sombra { backdrop-filter: blur(10px); }
/* El <main> sube para que la foto quede detrás de la barra. */
.tema-oscuro:has(.hero) .hero { margin-top: 0; }

/* ============================================================
   20. QUÉ HACEMOS
   Índice editorial, no otra rejilla de tarjetas: cuatro
   renglones separados por un filete, con el número en serif.
   Es la lógica de una página de revista, y evita repetir por
   tercera vez la misma caja con icono.
   ============================================================ */
.tema-oscuro .servicios-lista {
  max-width: 46rem;
  margin: var(--e-7) auto 0;
  text-align: left;
}

.tema-oscuro .servicio {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--e-4);
  align-items: start;
  padding-block: var(--e-6);
  border-top: 1px solid var(--line);
}
.tema-oscuro .servicio:last-child { border-bottom: 1px solid var(--line); }

.tema-oscuro .servicio-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--acento);
  opacity: .8;
}

.tema-oscuro .servicio h3 {
  margin: 0 0 var(--e-2);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.2;
}
.tema-oscuro .servicio p {
  margin: 0;
  max-width: 54ch;
  color: var(--ink-soft);
}

/* Enlace de texto con filete: ni botón ni subrayado de navegador.
   La flecha se separa al pasar el cursor, que es todo el adorno
   que necesita. */
.tema-oscuro .enlace-fino {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: var(--e-3);
  padding-bottom: 2px;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: gap .25s ease, opacity .25s ease;
}
.tema-oscuro .enlace-fino:hover { gap: .85rem; opacity: .72; }
.tema-oscuro .enlace-fino i { font-size: .9em; }

/* Aviso de cita, donde antes iba la tabla de horarios. */
.tema-oscuro .aviso-cita { margin-top: var(--e-3); }
.tema-oscuro .aviso-cita p {
  margin: 0 0 var(--e-4);
  max-width: 46ch;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .tema-oscuro .servicio { grid-template-columns: 1fr; gap: var(--e-2); }
  .tema-oscuro .servicio-num { font-size: 1.05rem; }
}

/* ============================================================
   21. FICHA DE LA PROPIEDAD (modal del catálogo)
   ------------------------------------------------------------
   El listado del catálogo es claro, pero el modal seguía
   heredando el carbón del <body>: al abrir una propiedad la
   pantalla daba un volantazo de color. Y el velo venía en azul
   marino de la plantilla base, que no es de esta marca.

   Se invierte: la caja toma los mismos tonos del listado y solo
   la columna de fotos se queda oscura, que es donde la foto
   gana. De paso se le quitan las cajas de adentro (etiquetas,
   ficha técnica, precio) para que hable el mismo idioma que la
   portada: filetes, no recuadros.
   ============================================================ */
.tema-oscuro .modal {
  background: rgba(12, 9, 8, .74);
  backdrop-filter: blur(3px);
}

.tema-oscuro .modal-caja {
  --bg: var(--piedra); --surface: var(--hueso); --surface-2: var(--piedra-2);
  --surface-3: #DED5C6;
  --line: rgba(22, 18, 15, .12);
  --ink: #171310; --ink-soft: #554D43; --ink-muted: #857B6E;
  --marca-1: var(--acento); --marca-3: var(--acento);
  --exito: var(--acento); --oferta: var(--acento); --alerta: var(--acento);

  background: var(--hueso);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .75);
}

/* La galería NO se aclara: una fachada se ve mejor sobre carbón,
   y sostiene el vínculo con la portada del sitio. */
.tema-oscuro .modal-caja .galeria {
  --surface: var(--carbon-suave); --surface-2: #241E19; --surface-3: #2E2720;
  --line: rgba(201, 174, 121, .18);
  --ink: #F2EDE4; --ink-soft: #B9AF9F; --ink-muted: #8A7F6F;
  --marca-1: var(--acento-claro);

  background: var(--carbon-hondo);
  color: var(--ink);
  border-right: 1px solid rgba(201, 174, 121, .18);
}
.tema-oscuro .modal-caja .galeria-lamina { background: var(--carbon-hondo); }
.tema-oscuro .modal-caja .galeria-miniaturas img { border-radius: 2px; }

/* Botón de cerrar: sobre claro, el fondo y la sombra sobraban. */
.tema-oscuro .modal-cerrar {
  background: none; box-shadow: none; border-radius: 2px;
  color: var(--ink-soft);
}
.tema-oscuro .modal-cerrar:hover { color: var(--ink); background: var(--piedra-2); }

/* Etiquetas: informativas, no botones. Filete y nada más. */
.tema-oscuro #modal_etiquetas .chip,
.tema-oscuro #modal_etiquetas .chip:hover {
  background: none; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink-soft); letter-spacing: .04em;
}

.tema-oscuro .modal-info h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.15;
}
.tema-oscuro .modal-info .producto-categoria { margin-bottom: var(--e-2); }

/* Ficha técnica: renglones con filete, como el índice de la portada. */
.tema-oscuro .ficha { gap: 0; }
.tema-oscuro .ficha-fila {
  background: none; border-radius: 0; padding: var(--e-3) 0;
  border-bottom: 1px solid var(--line);
}
.tema-oscuro .ficha-fila:first-child { border-top: 1px solid var(--line); }
.tema-oscuro .ficha-fila dd { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }

/* Precio: sin recuadro, en serif y grande, como en las fichas. */
.tema-oscuro .precio-caja {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: var(--e-5) 0 0;
}
.tema-oscuro .precio-caja .precio { font-family: 'Fraunces', Georgia, serif; font-weight: 400; }

.tema-oscuro .modal-caja .mapa-marco { border-radius: 2px; }
.tema-oscuro .modal-caja .formas-pago li { border-radius: 2px; }
.tema-oscuro .modal-caja .relacionados { background: var(--piedra); border-top: 1px solid var(--line); }

/* La tira de relacionados se comía media ficha: 305 px de un modal
   de 662, con la foto en vertical sobre el título. En horizontal baja
   a ~120 px y el resto se lo queda la propiedad que sí se está viendo. */
.tema-oscuro .relacionados { background: var(--piedra); border-top: 1px solid var(--line); }
.tema-oscuro .relacionados h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: .9rem; color: var(--ink-soft); margin-bottom: var(--e-3);
}
.tema-oscuro .relacionados-pista { grid-auto-columns: 250px; gap: var(--e-5); }
.tema-oscuro .relacionados .producto {
  display: grid; grid-template-columns: 78px 1fr; gap: var(--e-3);
  align-items: center;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.tema-oscuro .relacionados .producto:hover { transform: none; box-shadow: none; }
.tema-oscuro .relacionados .producto-foto { aspect-ratio: 4 / 3; border-radius: 2px; }
.tema-oscuro .relacionados .producto-cuerpo { padding: 0; }
.tema-oscuro .relacionados .producto-titulo { font-size: .82rem; line-height: 1.25; margin: 0 0 2px; }
.tema-oscuro .relacionados .precio { font-size: .92rem; }

/* La veladura de scroll del panel venía en azul marino, igual que el
   velo. Mismo efecto, en el gris cálido de la marca. */
@media (min-width: 900px) {
  .tema-oscuro .modal-info {
    background:
      linear-gradient(var(--surface) 30%, rgba(255, 255, 255, 0)) top / 100% 26px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), var(--surface) 70%) bottom / 100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(22, 18, 15, .13), rgba(22, 18, 15, 0)) top / 100% 11px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(22, 18, 15, .13), rgba(22, 18, 15, 0)) bottom / 100% 11px no-repeat scroll;
    background-color: var(--surface);
  }
}

/* Aviso de filtro y panel del carrito: las otras dos superficies que
   se montan sobre el catálogo claro. El carrito está apagado en este
   negocio (config.carrito.activo = 0), pero si algún día se enciende
   no tiene por qué salir en carbón sobre una página clara. */
/* El fondo NO se arregla con redefinir --info: los tokens *-suave de
   tokens.css se calculan donde están declarados (en :root), así que ahí
   dentro --info sigue valiendo azul. Por eso el color va aquí, directo. */
.tema-oscuro .aviso-filtro {
  background: color-mix(in srgb, var(--acento) 10%, var(--hueso));
  border-color: color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: 2px;
}
.tema-oscuro .boton-agregar.agregado {
  background: color-mix(in srgb, var(--acento) 12%, var(--hueso));
  color: var(--acento);
}

.tema-oscuro .panel-carrito {
  --surface: var(--hueso); --surface-2: var(--piedra-2); --surface-3: #DED5C6;
  --line: rgba(22, 18, 15, .12);
  --ink: #171310; --ink-soft: #554D43; --ink-muted: #857B6E;
  --marca-1: var(--acento);
  background: var(--hueso); color: var(--ink);
}
.tema-oscuro .fondo-carrito { background: rgba(12, 9, 8, .74); }

/* En móvil el visor es cuadrado y la foto va "contain": una foto
   horizontal dejaba casi 200 px de negro arriba y abajo antes de
   llegar a los datos. En 4:3 se sigue viendo la foto completa y se
   recupera esa pantalla. */
@media (max-width: 899px) {
  .tema-oscuro .modal-caja .galeria-lamina,
  .tema-oscuro .modal-caja .galeria-sin-foto { aspect-ratio: 4 / 3; }
}

/* El botón de WhatsApp de la ficha era el último verde del sitio, y
   además el elemento más saturado de toda la página. Toma el mismo
   trato que cualquier acción principal sobre claro: carbón, y oro al
   pasar el cursor. El icono ya dice que es WhatsApp; la burbuja
   flotante sí se queda verde, que ahí el verde es la señal. */
.tema-oscuro .modal-caja .boton-whatsapp,
.tema-oscuro .panel-carrito .boton-whatsapp {
  background: var(--carbon); color: var(--hueso); border-color: var(--carbon);
}
.tema-oscuro .modal-caja .boton-whatsapp:hover,
.tema-oscuro .panel-carrito .boton-whatsapp:hover {
  background: var(--acento); color: var(--carbon-hondo); border-color: var(--acento);
}

/* "Preguntar por WhatsApp" partido en dos renglones se veía apretado:
   la acción principal se lleva el doble de ancho que Compartir. */
.tema-oscuro .acciones-modal .boton-whatsapp { flex: 2 1 240px; }
.tema-oscuro .acciones-modal .boton-secundario { flex: 1 1 140px; }

/* ============================================================
   22. EMBLEMA DE "QUIÉNES SOMOS"
   Relleno mientras no hay foto del equipo. El dibujo de edificios
   que estaba antes fingía ser una foto y se notaba; el logotipo
   sobre carbón se lee como una placa y no pretende otra cosa.
   ============================================================ */
.tema-oscuro .marca-emblema {
  margin: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--e-5);
  aspect-ratio: 4 / 3;
  padding: var(--e-6);
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 174, 121, .10), rgba(201, 174, 121, 0) 62%),
    var(--carbon-hondo);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.tema-oscuro .marca-emblema img {
  width: min(48%, 230px); height: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55));
}
.tema-oscuro .marca-emblema figcaption {
  max-width: 26ch; text-align: center;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.7; color: var(--ink-muted);
}

/* ============================================================
   23. EL MARCO NEGRO DE LAS FOTOS DE LA FICHA
   ------------------------------------------------------------
   Las fotos van con object-fit: contain —se ven completas, nunca
   recortadas— y casi ninguna trae la proporción exacta del visor,
   así que sobran franjas negras a los lados o arriba y abajo.
   Recortar no es opción: la fachada se ve entera o no sirve.

   Se rellena el sobrante con la misma foto, desenfocada y
   apagada. Es lo que hace cualquier visor de fotos decente: deja
   de parecer un error y el ojo sigue yendo a la foto nítida.

   La dirección de la imagen la pone js/ad-catalogo.js en --foto.
   Sin ese archivo, var(--foto) no resuelve, el ::before no pinta
   nada y la lámina se ve como antes: en negro. Se degrada sola.
   ============================================================ */
.tema-oscuro .modal-caja .galeria-lamina {
  position: relative;
  overflow: hidden;
  background: var(--carbon-hondo);
}
.tema-oscuro .modal-caja .galeria-lamina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto);
  background-size: cover;
  background-position: center;
  /* La escala se come los bordes lavados que deja el desenfoque. */
  transform: scale(1.15);
  filter: blur(26px) brightness(.42) saturate(.85);
}
/* La foto va absoluta y no en el flujo. Con width/height al 100 % el
   navegador no siempre resuelve ese 100 %: la lámina saca su alto de
   un flex con min-height:0 y, cuando no lo resuelve, la imagen se
   queda con su alto natural. Medido en escritorio: lámina de 541 px
   con la imagen de 731 px, o sea recortada por abajo justo cuando el
   object-fit: contain existe para NO recortar. Con inset:0 sobre la
   lámina (que es position: relative) el tamaño sale del padre y no
   de un porcentaje que puede quedarse sin resolver. */
.tema-oscuro .modal-caja .galeria-lamina img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
/* Miniaturas: van con cover, no dejan sobrante, y el filete dorado
   de la activa se ve mejor sin el fondo gris de la plantilla. */
.tema-oscuro .modal-caja .galeria-miniaturas img { background: var(--carbon-hondo); }