/* ============================================================================
   Solera — Hoja de estilos del escaparate inmobiliario (público + panel admin)
   ----------------------------------------------------------------------------
   DISEÑO: dirección "editorial de lujo" (patrón Portfolio Grid / Swiss Modernism
   de la base de conocimiento ui-ux-pro-max). Las FOTOS reales mandan; la tipografía
   serif (Cinzel) + geométrica (Josefin Sans) aporta el tono premium; el oro es un
   acento fino, nunca un relleno.

   UN SOLO DISEÑO: el de la portada nueva (blanco y dorado, static/css/inicio2.css),
   que desde el 23-10-2026 es el modo CLARO de toda la web (Antonio: PLAN_MAESTRO
   §«Tema: claro y oscuro»). Los dos estilos de antes, «noir» y «mediterraneo»,
   eran dos juegos de colores sobre la misma maqueta y se retiraron (siguen en git,
   commit anterior a 0.9.7). La paleta vive AQUÍ, en tokens; inicio2.css ya no tiene
   colores propios: sus --i2-* apuntan a estos, para que el modo oscuro sea un solo
   juego de tokens y no dos.

   CÓMO FUNCIONA EL TEMA (importante):
     - El modo es el atributo `data-theme` de <html>; los tokens cuelgan de
       `html[data-theme="…"]`. Lo fija static/js/tema-inicial.js en el <head>, ANTES
       de pintar (anti-parpadeo; fichero y no script en línea por la CSP).
     - `html[data-theme="x"]` tiene especificidad (0,1,1), que GANA a `:root` (0,1,0).
       Esto es deliberado: `/tenant.css` inyecta `:root{--nav-bg…}` por inmobiliaria,
       y así el modo del visitante manda sobre el color del tenant sin tener que tocar
       la ruta `tenant_css` del backend.

   ACCESIBILIDAD: contrastes AA (oro de texto #8A6B1E ≈ 5,1:1 sobre blanco), foco
   visible por teclado, objetivos táctiles ≥44px, y `prefers-reduced-motion` respetado.
   ============================================================================ */

/* ---------- Fuentes autoalojadas (regla "todo en casa", cero CDN) ----------
   Ambas son fuentes VARIABLES: un único .woff2 (subset latin) cubre todo el rango
   de pesos, por eso declaramos `font-weight: <min> <max>`. `swap` = texto visible
   ya con la fuente de sistema mientras carga la web-font (evita FOIT). */
@font-face{
  font-family:'Cinzel';
  src:url('/static/fonts/cinzel-var-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Josefin Sans';
  src:url('/static/fonts/josefinsans-var-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* ============================================================================
   TOKENS DE TEMA
   ============================================================================ */

/* Tipografía y variables compartidas por los dos modos (no dependen del color). */
:root{
  --serif:'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wa:#25d366;                 /* verde WhatsApp (marca externa, fijo) */
  --maxw:1240px;                /* ancho de columna editorial */
  --tr:.2s cubic-bezier(.4,0,.2,1);  /* transición base (200ms, dentro de 150-300ms) */
}

/* --- ACENTO DE LA AGENCIA y «ORO METÁLICO» derivado de él (0.9.39) -------------------
   El acento es un DATO de la agencia (inmobiliarias.acento, panel «Ficha de la agencia»):
   si lo tiene, /tenant.css —que se carga después— reescribe estas variables con valores
   ya medidos en contraste (src/acento.rs). Lo de aquí es el valor POR DEFECTO: el dorado de
   siempre, y el degradado sale de él con color-mix(). Medido con tinta (#14110c) encima:
   sombra 6,0:1 · base 8,2:1 · brillo 13,3:1, o sea AA en toda la superficie del botón.
   Sin color-mix (Safari < 16.2) las tres variables quedan inválidas y el botón se queda en
   su color plano: se degrada, no se rompe. */
:root{
  --acento:#c9a84c;
  --oro-base:var(--acento);
  --oro-fg:#14110c;                                    /* texto SOBRE el oro */
  --oro-sombra:color-mix(in srgb,var(--oro-base) 85%,#000);
  --oro-brillo:color-mix(in srgb,var(--oro-base) 45%,#fff);
  --oro-metal:linear-gradient(105deg,var(--oro-sombra) 0%,var(--oro-base) 30%,var(--oro-brillo) 50%,var(--oro-base) 70%,var(--oro-sombra) 100%);
}

/* --- MODO CLARO: el de la portada (blanco, tinta casi negra, dorado) -------
   Valores medidos en la referencia de la portada (inicio2.css, axe 22-10):
   el oro DECORATIVO #C9A84C da ≈2,3:1 sobre blanco y no vale para texto; el
   de TEXTO es #8A6B1E (≈5,1:1). `:root` también, por si un día falta el
   atributo (sin JS lo pone igual el script del <head>, que no es diferido). */
:root,
html[data-theme="claro"]{
  --ink:#14110c;               /* tinta: texto principal (--i2-tinta) */
  --ink-soft:#3a332a;          /* texto secundario oscuro (≈12:1) */
  --muted:#5e574c;             /* texto atenuado ≈7:1 sobre blanco, 6,6 sobre --bg-2 (--i2-gris) */
  --bg:#ffffff;                /* fondo de página: blanco, como la portada */
  --bg-2:#fbf8f2;              /* tinte: superficie apagada (chips, campos, franjas) */
  --surface:#ffffff;           /* tarjetas / cajas */
  --line:#e9e1d2;              /* filete fino (--i2-linea) */
  --line-strong:#d9cdb6;
  --gold:#8a6b1e;              /* oro de TEXTO/CTA — AA sobre blanco (≈5,1:1) */
  --gold-2:#6e5416;            /* oro hover, más oscuro */
  --gold-soft:#c9a84c;         /* oro DECORATIVO: filetes y sobre fondos oscuros */
  --gold-metal:linear-gradient(105deg,color-mix(in srgb,var(--gold) 85%,#000) 0%,var(--gold) 30%,color-mix(in srgb,var(--gold) 94%,#fff) 50%,var(--gold) 70%,color-mix(in srgb,var(--gold) 85%,#000) 100%);   /* claro: brillo mínimo, el texto es BLANCO */
  --cta-bg:#14110c;            /* botón principal: tinta, y al pasar, oro (como .i2-btn) */
  --cta-fg:#ffffff;
  --cta-bg-hover:#8a6b1e;
  --on-gold:#ffffff;           /* texto SOBRE un fondo var(--gold) (etiquetas, página actual) */
  --inv-bg:#14110c;            /* bloque oscuro dentro de la página (CTA, «datos de contacto») */
  --glass:rgba(255,255,255,.94);    /* caja casi opaca sobre el vídeo (buscador de la portada) */
  --error-txt:#9a2a1f;
  color-scheme:light;          /* desplegables y casillas nativas en claro */
  --nav-bg:rgba(255,255,255,.94);   /* cabecera blanca translúcida (blur) */
  --nav-fg:#14110c;
  --nav-border:#e9e1d2;
  --nav-hover:var(--gold);
  --footer-bg:#14110c;         /* pie en tinta: ancla la página blanca */
  --footer-fg:#d9cfbf;
  --footer-muted:#a89f90;      /* atenuado DEL PIE: --muted es para fondo claro */
  --admin-bg:#17140f;          /* barra lateral del panel, casi negra */
  --admin-fg:#cfc7ba;
  --radius:10px;               /* esquinas contenidas = más editorial */
  --radius-lg:14px;
  --shadow:0 18px 40px rgba(20,17,12,.12);
  --shadow-sm:0 2px 12px rgba(20,17,12,.06);
  --logo-filter:none;
  --logo-color:#8a6b1e;        /* el logo en el oro de texto: se lee sobre la cabecera blanca */
  /* Oro metálico del logo (como su tarjeta de visita): el mismo degradado que luego «barre» el hover. */
  --logo-oro:linear-gradient(105deg,#7a5a14 0%,#a9812a 26%,#dcb958 46%,#a9812a 64%,#7a5a14 100%);
  --hero-overlay:linear-gradient(180deg,rgba(20,17,12,.34),rgba(20,17,12,.10) 40%,rgba(20,17,12,.82));
}

/* --- MODO OSCURO: el mismo diseño de noche, con sus dorados ----------------
   Tinta y blanco se invierten; el oro DECORATIVO de la portada (#C9A84C), que
   sobre blanco no valía para texto, sobre el fondo oscuro da ≈8,4:1 y pasa a ser
   el de texto. Lo fija tema-inicial.js según el sistema (prefers-color-scheme)
   o la elección guardada. Contraste medido con axe en Chrome (ver PHASE_STATUS). */
html[data-theme="oscuro"]{
  --ink:#efe8dc;               /* texto principal: blanco cálido */
  --ink-soft:#d6cdbf;
  --muted:#a89f90;             /* atenuado: ≈7:1 sobre --bg, 6,7 sobre --surface */
  --bg:#110f0b;                /* fondo de página: tinta */
  --bg-2:#221e17;              /* tinte oscuro (chips, campos, franjas) */
  --surface:#1a1712;           /* tarjetas / cajas, un punto por encima del fondo */
  --line:#332d24;
  --line-strong:#4a4236;
  --gold:#c9a84c;              /* oro de texto sobre oscuro (≈8,4:1) */
  --gold-2:#ddc27a;            /* hover: más claro, no más oscuro */
  --gold-soft:#c9a84c;
  --gold-metal:linear-gradient(105deg,color-mix(in srgb,var(--gold) 85%,#000) 0%,var(--gold) 30%,color-mix(in srgb,var(--gold) 65%,#fff) 50%,var(--gold) 70%,color-mix(in srgb,var(--gold) 85%,#000) 100%);
  --cta-bg:#c9a84c;            /* botón principal: oro con texto en tinta (≈8:1) */
  --cta-fg:#14110c;
  --cta-bg-hover:#ddc27a;
  --on-gold:#14110c;
  --inv-bg:#221e17;
  --glass:rgba(26,23,18,.94);
  --error-txt:#f08a7e;
  color-scheme:dark;
  --nav-bg:rgba(17,15,11,.92);
  --nav-fg:#efe8dc;
  --nav-border:#332d24;
  --nav-hover:var(--gold);
  --footer-bg:#0a0907;
  --footer-fg:#d9cfbf;
  --footer-muted:#a89f90;
  --admin-bg:#17140f;
  --admin-fg:#cfc7ba;
  --radius:10px;
  --radius-lg:14px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --shadow-sm:0 2px 12px rgba(0,0,0,.35);
  --logo-filter:none;
  --logo-color:#c9a84c;
  --logo-oro:linear-gradient(105deg,#b8902a 0%,#d9b650 28%,#fff1b8 47%,#d9b650 66%,#b8902a 100%);
  --hero-overlay:linear-gradient(180deg,rgba(20,17,12,.34),rgba(20,17,12,.10) 40%,rgba(20,17,12,.82));
}

/* ============================================================================
   BASE
   ============================================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;  /* cambio de tema suave */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.15;margin:0;font-weight:600}
/* Cinzel para titulares y precios: es el gesto "inmobiliaria de lujo". */
h1,h2,.hero__title,.section__head h2,.ficha__titulo,.card__precio,.ficha__precio,
.contacto__head h1,.listado__head h1,.cta h2,.brand__name{
  font-family:var(--serif);
  letter-spacing:.01em;
}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.link{color:var(--gold);font-weight:600;letter-spacing:.02em}
.link:hover{color:var(--gold-2)}

/* Foco por teclado visible y consistente (accesibilidad). No lo quitamos nunca;
   usamos :focus-visible para no molestar al puntero. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- Utilidad de aparición al hacer scroll (motion, ver reveal.js) ----
   Elementos con [data-reveal] entran con un leve fundido+desplazamiento; al ganar
   `.is-in` (IntersectionObserver) se asientan. El stagger lo aplica el JS por
   variable --d. Se anula por completo si el usuario pide menos movimiento. */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:8px;font-family:var(--sans);font-weight:600;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:var(--tr);white-space:normal;text-align:center;max-width:100%;min-height:44px}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--primary{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-fg)}
.btn--primary:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--cta-fg)}
/* Botón de oro metálico: siempre en `.btn--oro`; el principal lo es de noche en reposo y de día
   al pasar el ratón (de día en reposo sigue en tinta, como el resto del diseño). */
.btn--oro,
html[data-theme="oscuro"] .btn--primary,
.btn--primary:hover{background-color:var(--oro-base);background-image:var(--oro-metal);
  border-color:var(--oro-base);color:var(--oro-fg)}
.btn--oro:hover,html[data-theme="oscuro"] .btn--primary:hover{filter:brightness(1.06)}
/* Ola de brillo (Antonio, 06-11-2026): TODO el oro metálico se mueve como las letras del logo
   (`logo-destello`, más abajo): degradado de 240 % de ancho y un reflejo que lo recorre SIEMPRE,
   despacio y de ida y vuelta. Sustituye al barrido de un solo golpe de los botones. Todas las
   paradas del degradado llevan texto con ≥ 4,5:1, así que el contraste no depende del punto de la
   ola. Con «reducir movimiento» no hay ola: queda el degradado quieto, con el reflejo al centro. */
.btn--oro,html[data-theme="oscuro"] .btn--primary,.btn--primary:hover,.calc__res .btn--primary,
.card__estado,.card__promo,.paginacion__num.is-actual,.vista__op[aria-current="true"],.nav__fav [data-fav-count],
.pasos--js .pasos__nav li.is-activo span{background-size:240% 100%;background-position:0 0;
  animation:logo-destello 7s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .btn--oro,html[data-theme="oscuro"] .btn--primary,.btn--primary:hover,.calc__res .btn--primary,
  .card__estado,.card__promo,.paginacion__num.is-actual,.vista__op[aria-current="true"],.nav__fav [data-fav-count],
  .pasos--js .pasos__nav li.is-activo span{animation:none;background-position:50% 0}
}
.btn__icono{width:1.1em;height:1.1em;flex:0 0 auto}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#04310f}
.btn--wa:hover{filter:brightness(.95);color:#04310f}
.btn__label{display:inline}
/* WhatsApp compacto (solo icono) en la barra superior de escritorio; con etiqueta en el
   menú desplegable de móvil (ver media query). Libera ancho para los 8 ítems del menú. */
.nav__actions .btn--wa{width:44px;padding:0}
.nav__actions .btn--wa .btn__label{display:none}
.btn--block{display:flex;width:100%}
.btn svg{display:block;flex:0 0 auto;width:18px;height:18px}
.btn--icon{padding:0;width:44px;height:44px;letter-spacing:0}
.btn--danger{color:#b3261e;border-color:#e6c3c0}
.btn--danger:hover{background:#fbe9e7;border-color:#b3261e}
.btn--ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn--ghost:hover{background:var(--bg-2);color:var(--ink);transform:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);color:var(--nav-fg);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--nav-border);
  transition:background-color .35s ease, color .35s ease}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;position:relative;
  display:flex;align-items:center;gap:1.5rem;min-height:62px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--nav-fg)}
.brand__logo{height:40px;width:auto;max-width:200px;object-fit:contain;filter:var(--logo-filter);transition:filter .35s ease}
/* Logo por máscara recolorable (--logo-color por tema). El mandala se RECORTA por
   mask-position (no se encoge): en PC se ve la mitad inferior (el resto se pierde
   hacia arriba); en móvil el cuarto inferior-derecho. La ventana del elemento ES el
   trozo visible, así que agrandar el mandala NO agranda la cabecera. */
.brand__emblema,.brand__word,.brand__emblema::before{display:block;background-color:var(--logo-color);
  /* Oro metálico: el degradado es el doble de ancho que el logo; un destello lo recorre
     SIEMPRE, despacio, de ida y vuelta (mandala y nombre a la vez, misma fase). */
  background-image:var(--logo-oro,none);background-size:240% 100%;background-position:0 0;
  animation:logo-destello 7s ease-in-out infinite alternate}
@keyframes logo-destello{from{background-position:0 0}to{background-position:100% 0}}
/* El mandala es una VENTANA (el emblema, que recorta) con el sol dentro (::before, con la
   máscara): así gira el sol entero sin mover el recorte. Centro del sol = centro del cuadrado. */
.brand__emblema{background:none;animation:none;overflow:hidden;position:relative}
.brand__emblema::before{content:"";position:absolute;left:0;bottom:0;width:112px;height:112px;
  -webkit-mask:url('/static/img/emblema.svg') no-repeat center/contain;mask:url('/static/img/emblema.svg') no-repeat center/contain;
  transition:transform 1.4s cubic-bezier(.3,.6,.3,1)}
.brand__word{transition:transform .9s cubic-bezier(.3,.6,.3,1)}
/* Al pasar el ratón: el sol da un giro y el nombre se desliza hacia él. */
.brand:hover .brand__emblema::before,.brand:focus-visible .brand__emblema::before{transform:rotate(60deg)}
.brand:hover .brand__word,.brand:focus-visible .brand__word{transform:translateX(4px)}
.brand__emblema{width:104px;height:56px;flex:0 0 auto;align-self:flex-start}
.brand__word{height:32px;aspect-ratio:1634/180;width:auto;flex:0 0 auto;
  -webkit-mask:url('/static/img/wordmark.svg') no-repeat center/contain;mask:url('/static/img/wordmark.svg') no-repeat center/contain}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* «Saltar al contenido»: fuera de pantalla hasta que el teclado lo enfoca (primer Tab de la página). */
.saltar{position:absolute;left:.8rem;top:-4rem;z-index:1000;padding:.7rem 1.1rem;border-radius:var(--radius);background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
.saltar:focus{top:.8rem}
main:focus{outline:none}
.brand__mark{color:var(--gold-soft);font-size:1.1rem}
.brand__name{font-size:1.2rem;letter-spacing:.06em}
.nav__collapse{display:flex;align-items:center;gap:1.4rem;flex:1;align-self:center}
.nav__links{display:flex;gap:1.6rem;flex:1;margin:0}
.nav__links a{color:var(--nav-fg);font-weight:500;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.35rem 0;position:relative;opacity:.9;white-space:nowrap}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--nav-hover);transition:right .25s ease}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}
/* Entre el menú plegado (≤860) y el ancho holgado, cinco enlaces + acciones no
   caben con los huecos de escritorio: a 1024 px el botón de WhatsApp se salía. */
@media(min-width:861px) and (max-width:1180px){
  .nav__links{gap:1rem}
  .nav__collapse{gap:.8rem}
}
.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__burger{display:none;background:none;border:0;cursor:pointer;color:var(--nav-fg);
  width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger svg{width:24px;height:24px}

/* Botón de cambio de modo claro/oscuro (sol/luna). */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;border:1px solid var(--nav-border);
  background:transparent;color:var(--nav-fg);cursor:pointer;transition:var(--tr)}
.theme-toggle:hover{border-color:var(--nav-hover);color:var(--nav-hover)}
.theme-toggle svg{width:20px;height:20px}
/* Luna en claro (invita a oscurecer) y sol en oscuro. */
.theme-toggle .i-sun{display:none}
html[data-theme="oscuro"] .theme-toggle .i-sun{display:block}
html[data-theme="oscuro"] .theme-toggle .i-moon{display:none}

/* Selector de idioma */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;
  border:1px solid var(--nav-border);border-radius:8px;padding:0 .7rem;height:44px;
  cursor:pointer;font:inherit;font-size:.82rem;letter-spacing:.06em;color:var(--nav-fg)}
.lang__btn:hover{border-color:var(--nav-hover);color:var(--nav-hover)}
.lang__btn svg{width:16px;height:16px}
.lang__menu{position:absolute;right:0;top:120%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;min-width:170px;z-index:60;
  /* 16 idiomas no caben en pantalla: el menú hace scroll por dentro (sin arrastrar la página) */
  max-height:min(70vh,24rem);overflow-y:auto;overscroll-behavior:contain}
.lang__menu a{display:block;padding:.55rem .7rem;border-radius:8px;font-size:.92rem;letter-spacing:.02em}
.lang__menu a:hover{background:var(--bg-2)}
.lang__menu a.is-on{color:var(--gold);font-weight:700}

/* ---------- Secciones / grid ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:5rem 1.5rem}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:2.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.section__head h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.8rem}

/* ---------- Card (tarjeta de propiedad) ----------
   Imagen-first: la foto ocupa 4/3, la ficha de datos es sobria bajo ella. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--tr);display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}  /* como .i2-card */
.card__img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;overflow:hidden}
/* La foto de la tarjeta (también la de /inicio2): rellena el marco 4/3 y queda DEBAJO de
   las etiquetas, que van después en el HTML. */
.card__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* El <picture> del AVIF (src/avif.rs) no cuenta para la maquetación: el <img> de
   dentro sigue siendo el hijo del flex de la galería y el que lleva las clases. */
picture.avif{display:contents}
.card__tag{position:absolute;top:.9rem;left:.9rem;background:rgba(20,17,14,.82);color:#fff;
  font-size:.68rem;font-weight:600;padding:.35rem .7rem;border-radius:4px;
  letter-spacing:.12em;text-transform:uppercase}
.card__estado{position:absolute;top:.9rem;right:.9rem;background:var(--gold);color:var(--on-gold);
  font-size:.66rem;font-weight:700;padding:.35rem .6rem;border-radius:4px;
  letter-spacing:.08em;text-transform:uppercase}
/* Con fondo propio, como `.card__tag`: sólo con sombra, sobre una foto clara (mármol
   blanco, cielo) el blanco no se leía, y la WCAG no cuenta la sombra (axe 22-10). */
.card__tipo{position:absolute;bottom:.9rem;left:.9rem;color:#fff;font-weight:600;
  font-size:.95rem;letter-spacing:.03em;background:rgba(20,17,14,.78);
  padding:.18rem .55rem;border-radius:6px}
/* Novedad / precio rebajado: segunda etiqueta, bajo la de la operación. */
.card__marca{position:absolute;top:3.1rem;left:.9rem;background:#2e6b4f;color:#fff;
  font-size:.66rem;font-weight:700;padding:.3rem .6rem;border-radius:4px;letter-spacing:.08em;text-transform:uppercase}
.card__marca--rebaja{background:#b23b2e}
.card__antes{color:var(--muted);font-size:.95rem;font-weight:400;margin-left:.35rem}
/* Promoción: cuántas viviendas de la obra hay detrás de esta tarjeta. Abajo a la
   derecha para no chocar con el tipo (abajo izq.) ni con el estado (arriba der.). */
.card__promo{position:absolute;bottom:.85rem;right:.9rem;background:var(--gold);color:var(--on-gold);
  font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:4px;letter-spacing:.06em}
.card__body{padding:1.2rem 1.25rem 1.35rem}
.card__precio{color:var(--ink);font-weight:600;font-size:1.5rem;letter-spacing:.01em}
/* Título en Cinzel y ubicación en dorado y versalitas, como la tarjeta de la portada
   (.i2-card): el listado y la portada tienen que parecer la misma web. */
.card__titulo{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin:.4rem 0 .55rem;
  color:var(--ink-soft);line-height:1.35}
.card__ubic{color:var(--gold);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:.35rem}
.card__ubic svg,.card__specs svg{width:15px;height:15px;flex:0 0 auto;opacity:.75}
.card__specs{display:flex;gap:1.2rem;margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.card__specs span{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Degradados placeholder (mientras no hay foto) ---------- */
.grad-0{background:linear-gradient(135deg,#2b2622,#4e463c)}
.grad-1{background:linear-gradient(135deg,#3a3128,#1c1917)}
.grad-2{background:linear-gradient(135deg,#a16207,#5c3a08)}
.grad-3{background:linear-gradient(135deg,#3a4038,#6b5e3f)}
.grad-4{background:linear-gradient(135deg,#4a4038,#8a7a5f)}
.grad-5{background:linear-gradient(135deg,#7b5e1f,#3a2c14)}

/* ---------- CTA ---------- */
.cta{background:var(--inv-bg);color:#fff}  /* --ink sería claro en oscuro */
.cta__inner{max-width:var(--maxw);margin:0 auto;padding:3.4rem 1.5rem;display:flex;
  align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:500}
.cta .muted{color:rgba(255,255,255,.72)}

/* ---------- Listado ---------- */
.listado{max-width:var(--maxw);margin:0 auto;padding:3rem 1.5rem}
.listado__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.6rem}
.listado__head h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500}
/* Barra de filtros completa del listado: tarjeta con grupos etiqueta+control que fluyen. */
.filtros{display:flex;gap:.7rem .8rem;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;box-shadow:var(--shadow-sm);margin:.4rem 0 1rem}
.filtro{display:flex;flex-direction:column;gap:.3rem}
.filtro--grow{flex:1 1 200px;min-width:180px}
.filtro label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.filtro select,.filtro input{border:1px solid var(--line-strong);background:var(--surface);
  border-radius:8px;padding:.6rem .75rem;font:inherit;font-size:.92rem;color:var(--ink);min-width:118px}
.filtro--grow input{width:100%;min-width:0}
.filtro--acciones{flex-direction:row;gap:.5rem;align-items:center}
.filtro--acciones .btn{min-height:auto}
.filtro--casilla{justify-content:flex-end}
/* PC/tablet: las casillas ocupan su propia fila y fluyen en horizontal, como en la portada
   (`.i2-search__checks`). `.filtro` es una columna: sin esto las 17 casillas quedaban apiladas. */
@media(min-width:861px){
  .filtro--casilla{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;
    gap:.1rem 1.4rem;margin-top:.2rem;padding-top:.7rem;border-top:1px solid var(--line)}
  .filtro--casilla label{min-height:34px}
}
/* La casilla con su texto pegado: el estilo general de los campos la estiraba. */
.filtro--casilla label{display:flex;align-items:center;gap:.5rem;cursor:pointer;min-height:44px;
  font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.filtro.filtro--casilla input{width:1.15rem;min-width:0;height:1.15rem;padding:0;margin:0;flex:0 0 auto;accent-color:var(--gold)}
/* Móvil: filtros plegados tras «Filtros (N)» (static/js/filtros-movil.js pone las
   clases; sin JS no hay ninguna y el formulario sigue desplegado). Abierto, es un panel
   a pantalla completa con la cabecera y «Buscar» + la cifra en vivo fijos abajo. */
.filtros-boton{margin:.4rem 0 1rem;width:100%;justify-content:center;border:1px solid var(--line-strong);
  border-radius:8px;min-height:48px;background:var(--surface)}
/* `.btn` pone display y le ganaba al atributo: el botón salía en escritorio. */
.filtros-boton[hidden]{display:none}
.filtros__cabecera{display:flex;align-items:center;justify-content:space-between;width:100%}
.filtros__cabecera[hidden]{display:none}
.filtros__cabecera h2{font-size:1.3rem;font-weight:500;margin:0}
.filtros__cerrar{background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);
  font-size:1.5rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer}
.filtros__cerrar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.filtros--plegado{display:none}
.filtros--plegado.filtros--abierto{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
  position:fixed;inset:0;z-index:200;margin:0;border:0;border-radius:0;overflow-y:auto;
  overscroll-behavior:contain;background:var(--bg);padding:1rem 1.1rem 0}
.filtros--abierto .filtro,.filtros--abierto .filtro--grow{flex:none;min-width:0}
.filtros--abierto .filtro select,.filtros--abierto .filtro input:not([type="checkbox"]){width:100%;min-height:44px}
/* Las casillas de tipo/ciudad se despliegan en su sitio, empujando lo de abajo: un
   panel flotante dentro de otro que ya se desplaza se cortaba por abajo. */
.filtros--abierto .multi>summary{width:100%;max-width:none;min-height:44px}
.filtros--abierto .multi__panel{position:static;width:auto;max-width:none;margin-top:.3rem}
.filtros--abierto .filtro--acciones{position:sticky;bottom:0;margin-top:auto;flex-wrap:wrap;
  background:var(--bg);border-top:1px solid var(--line);padding:.8rem 0 1rem}
.sin-desplazar,.sin-desplazar body{overflow:hidden}
.results{margin:.6rem 0 1.8rem;color:var(--muted);letter-spacing:.02em}
.empty{padding:3.5rem;text-align:center;color:var(--muted)}

/* Páginas de contenido (Servicios, Información, Blog, Nosotros, Privacidad…) */
.pagina__inner{max-width:820px;margin:0 auto}
.pagina__titulo{font-size:clamp(2rem,4vw,2.8rem);font-weight:500;margin-bottom:1.4rem}
.pagina__cuerpo{color:var(--ink-soft);line-height:1.8}
.pagina__cuerpo h2{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin:2rem 0 .8rem;color:var(--ink)}
.pagina__cuerpo p{margin:0 0 1.1rem}
.pagina__cuerpo ul{margin:0 0 1.1rem 1.2rem}
.pagina__cuerpo li{margin:.35rem 0}
/* Páginas legales generadas (src/legales.rs): tabla de cookies y huecos pendientes. */
.legal-tabla{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.95rem}
.legal-tabla th,.legal-tabla td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.legal-tabla th{color:var(--ink);font-weight:600}
.legal-tabla code{white-space:nowrap}
.legal-hueco{background:#fff3b0;color:#5a4500;padding:0 .25rem;border-radius:3px}
@media (max-width:600px){.legal-tabla{display:block;overflow-x:auto}}
.pagina__cuerpo a{color:var(--gold);font-weight:600}
.pagina__portada{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 1.6rem}
/* Índice del blog: lista con miniatura (migración 0033). */
.pagina__cuerpo ul.blog-lista{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.pagina__cuerpo ul.blog-lista a{display:grid;grid-template-columns:minmax(110px,220px) 1fr;gap:1rem;align-items:center;color:var(--ink);font-family:var(--serif);font-size:1.15rem;font-weight:500}
.pagina__cuerpo ul.blog-lista img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
@media (max-width:520px){.pagina__cuerpo ul.blog-lista a{grid-template-columns:1fr}}

/* ---------- Ficha ---------- */
.ficha{max-width:1160px;margin:0 auto;padding:1.8rem 1.5rem 4rem}
.crumbs{color:var(--muted);font-size:.85rem;letter-spacing:.03em;margin:.5rem 0 1.4rem}
.crumbs a:hover{color:var(--gold)}
.ficha__gallery{position:relative;aspect-ratio:16/8;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;overflow:hidden;background:var(--bg-2)}
.ficha__gallery-note{color:rgba(255,255,255,.85);font-weight:500;letter-spacing:.04em}
.ficha__gallery--img{display:block}
/* La foto grande es una tira con scroll-snap (templates/ficha.html): se pasa con el
   dedo y la foto sigue al dedo; las flechas la mueven con scrollTo. */
.gal-tira{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.gal-tira::-webkit-scrollbar{display:none}
.gal-foto{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;
  scroll-snap-stop:always;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
/* Contenedor de la tira: flechas laterales + zona de scroll en el centro */
.ficha__thumbs-wrap{position:relative;display:flex;align-items:center;margin:0 0 2rem}
.ficha__thumbs{display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.3rem;scroll-behavior:smooth;flex:1;
  scrollbar-width:none;-ms-overflow-style:none}      /* scrollbar oculto: navegamos con flechas */
.ficha__thumbs::-webkit-scrollbar{display:none}
.ficha__thumb{flex:0 0 auto;width:100px;height:70px;border-radius:8px;background-size:cover;
  background-position:center;border:2px solid transparent;cursor:pointer;padding:0;transition:var(--tr);opacity:.72}
.ficha__thumb:hover{border-color:var(--gold);opacity:1}
.ficha__thumb.is-on{border-color:var(--gold);opacity:1}  /* miniatura activa resaltada */
.ficha__thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;pointer-events:none}
/* Flechas de la tira de miniaturas (solo visibles si desborda; ver Alpine) */
.thumbs-arrow{flex:0 0 auto;width:34px;height:70px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
  cursor:pointer;transition:var(--tr);box-shadow:var(--shadow-sm);z-index:2}
.thumbs-arrow:hover{border-color:var(--gold);color:var(--gold)}
.thumbs-arrow svg{width:20px;height:20px}
.thumbs-arrow--prev{margin-right:.5rem}
.thumbs-arrow--next{margin-left:.5rem}

/* Flechas y adornos SOBRE la imagen principal (aparecen al pasar el ratón) */
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(20,17,14,.5);color:#fff;cursor:pointer;opacity:0;transition:var(--tr);z-index:3}
.gal-arrow svg{width:24px;height:24px}
.ficha__gallery:hover .gal-arrow{opacity:1}
.gal-arrow:hover{background:rgba(20,17,14,.8)}
.gal-arrow--prev{left:1rem}
.gal-arrow--next{right:1rem}
.gal-count{position:absolute;bottom:1rem;right:1rem;z-index:3;background:rgba(20,17,14,.6);
  color:#fff;font-size:.8rem;letter-spacing:.06em;padding:.3rem .7rem;border-radius:20px}
.gal-expand{position:absolute;bottom:1rem;left:1rem;z-index:3;display:flex;align-items:center;
  justify-content:center;width:38px;height:38px;border:0;border-radius:8px;background:rgba(20,17,14,.5);
  color:#fff;opacity:0;transition:var(--tr);cursor:pointer;padding:0}
.ficha__gallery .card__tag{z-index:3}
.gal-expand svg{width:18px;height:18px}
.ficha__gallery:hover .gal-expand{opacity:1}

/* Lightbox a pantalla completa */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,10,8,.92)}
/* Tira del lightbox: una pantalla por foto, también con scroll-snap. El fondo de
   cada pantalla cierra (cursor zoom-out); la foto no. */
.lightbox__tira{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.lightbox__tira::-webkit-scrollbar{display:none}
.lightbox__slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;
  padding:3.5rem 1rem;scroll-snap-align:center;scroll-snap-stop:always;cursor:zoom-out}
.lightbox__img{max-width:min(1400px,94vw);max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 20px 80px rgba(0,0,0,.6);cursor:default;user-select:none;-webkit-user-drag:none}
.lightbox__close{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:var(--tr)}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__close svg{width:26px;height:26px}
.lightbox__arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:var(--tr);z-index:2}
.lightbox__arrow:hover{background:rgba(255,255,255,.24)}
.lightbox__arrow svg{width:30px;height:30px}
.lightbox__arrow--prev{left:1.5rem}
.lightbox__arrow--next{right:1.5rem}
.lightbox__count{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);
  font-size:.85rem;letter-spacing:.08em;background:rgba(255,255,255,.1);padding:.35rem .9rem;border-radius:20px}
/* Sin ratón (móvil y TABLET) no hay hover: flechas y ampliar siempre visibles. Antes
   iba por ancho (≤640 px) y una tablet de 768-1024 px se quedaba sin flechas. */
@media(hover:none){
  .gal-arrow,.gal-expand{opacity:1}
}
@media(max-width:640px){
  .gal-arrow{width:40px;height:40px}
  .lightbox__arrow{width:46px;height:46px}
  /* Sólo la de «anterior»: con `left` en las dos, la de «siguiente» también se
     pegaba a la izquierda, encima de la otra. */
  .lightbox__arrow--prev{left:.6rem}
  .lightbox__arrow--next{right:.6rem}
}
.ficha__grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:2.6rem}
.ficha__precio{color:var(--ink);font-weight:600;font-size:2.2rem}
.ficha__precio .card__antes{font-size:1.2rem}
.ficha__rebaja{display:inline-block;vertical-align:middle;background:#b23b2e;color:#fff;font-family:var(--sans);
  font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:4px;letter-spacing:.08em;text-transform:uppercase}
.ficha__titulo{font-size:1.9rem;font-weight:500;margin:.3rem 0 .5rem;overflow-wrap:anywhere}
.ficha__ubic{color:var(--muted);margin-bottom:1.6rem;display:flex;align-items:center;gap:.4rem}
.ficha__ubic svg{width:16px;height:16px;opacity:.75}
.specs{display:flex;flex-wrap:wrap;gap:2rem;padding:1.4rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec{display:flex;flex-direction:column;gap:.2rem}
.spec__n{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink)}
.spec__l{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.cert{display:inline-block;color:#fff;border-radius:5px;padding:0 .5rem;font-size:1.1rem;font-family:var(--sans)}
.cert--A{background:#188038}.cert--B{background:#4caf50}.cert--C{background:#9ccc65;color:#1a2b00}
.cert--D{background:#ffd54f;color:#3a2f00}.cert--E{background:#ffb300;color:#3a2f00}
.cert--F{background:#fb8c00}.cert--G{background:#e53935}
.ficha__h2{font-size:1.35rem;font-weight:500;margin:2.2rem 0 .9rem}
.ficha__desc{color:var(--ink-soft);line-height:1.75;white-space:pre-line}
.traduccion-auto{margin:.4rem 0 0;font-size:.8rem;color:var(--ink-soft);font-style:italic}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:.5rem 1rem;font-size:.88rem;color:var(--ink-soft)}
/* Chips de filtros activos en el listado: el chip entero es el enlace que lo quita
   (objetivo táctil ≥44px de alto con el padding del li). */
.listado .chips{margin:.4rem 0 1rem}
.chip{color:inherit;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;min-height:28px}
.chip:hover{color:var(--gold)}
/* «Quitar todo» no es un filtro: sin fondo y con borde discontinuo para que no se lea como uno más. */
.chips li.chips__todo{background:none;border-style:dashed}
.ultima-busqueda{margin:.4rem 0 1rem}
.ultima-busqueda a{color:var(--gold);font-weight:500}
.mapa{display:flex;align-items:center;gap:1rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem}
/* Mapa Leaflet de la ficha (altura fija; stacking propio para no tapar la nav sticky). */
.ficha__map{height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative;z-index:0}
.ficha__video{width:100%;border-radius:var(--radius);background:#000;display:block;max-height:460px}
.ficha__ref{margin:.25rem 0 0;letter-spacing:.03em}
.ficha__pdf{margin:.9rem 0 .4rem}
.ficha__pdf .btn{padding:.8rem 1.4rem;font-weight:700}
.ficha__map-note{display:flex;align-items:center;gap:.45rem;margin-top:.7rem}
.ficha__map-note svg{width:16px;height:16px;opacity:.75;flex:0 0 auto}
.propmap-pin{background:none;border:0}
.leaflet-container{font:inherit}
/* Archivos en la ficha (subidos): vídeos, imágenes y documentos */
.ficha__archivos{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.ficha__arch-video{width:100%;border-radius:var(--radius);background:#000;max-height:420px;display:block}
.ficha__arch-img{width:120px;height:90px;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line)}
.ficha__arch-doc{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.9rem}
.ficha__arch-doc:hover{border-color:var(--gold)}
/* Gestor de archivos del editor (admin) */
.archivos{max-width:660px;margin-top:1.8rem}
.archivos__titulo{font-size:1.2rem;font-weight:600;margin-bottom:1rem}
.archivos__subir{margin-bottom:1rem}
.archivos__drop{display:block;border:2px dashed var(--line-strong);border-radius:var(--radius);padding:1.6rem;text-align:center;cursor:pointer;position:relative;background:var(--surface)}
.archivos__drop:hover{border-color:var(--gold)}
.archivos__drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.archivos__drop-txt{pointer-events:none;color:var(--ink-soft)}
.archivos__lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.archivo{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.archivo__handle{cursor:grab;color:var(--muted);font-size:1.15rem;user-select:none}
.archivo__thumb{width:44px;height:44px;border-radius:6px;background-size:cover;background-position:center;flex:0 0 auto;background-color:var(--bg-2)}
.archivo__ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--bg-2);border-radius:6px;flex:0 0 auto}
.archivo__nombre{flex:1;color:var(--ink);font-size:.9rem;word-break:break-all}
.archivo__del{margin:0}
.archivo__del button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;width:32px;height:32px;border-radius:6px;line-height:1}
.archivo__del button:hover{background:#fbe9e7;color:#b3261e}
.sortable-ghost{opacity:.35}
.mapa__pin{display:flex;color:var(--gold)}
.mapa__pin svg{width:30px;height:30px}
.contacto-box{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.6rem}
.estado-badge{display:inline-block;background:var(--bg-2);color:var(--gold-2);font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.35rem .8rem;border-radius:20px;margin-bottom:1rem}
.contacto-box h3{font-family:var(--serif);font-size:1.3rem;font-weight:600}
.contacto-box .btn{margin-top:.7rem}
.lead{margin-top:1.1rem;display:flex;flex-direction:column;gap:.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.lead input,.lead textarea{border:1px solid var(--line-strong);border-radius:8px;padding:.7rem .85rem;font:inherit;color:var(--ink);background:var(--surface)}
.lead textarea{min-height:84px;resize:vertical}
.rgpd{font-size:.8rem;color:var(--muted);display:flex;gap:.45rem;align-items:flex-start}
/* «Que me contacte un agente», al pie del listado (templates/listado.html). Reusa
   `.lead` para los campos; aquí sólo la caja, las etiquetas visibles y las casillas. */
.agente{scroll-margin-top:96px;max-width:640px;margin:3rem auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.6rem}
.agente h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.4rem}
.agente__form label{font-size:.85rem;font-weight:600}
.agente__form .rgpd{font-weight:400}
.agente__busqueda{font-size:.9rem;background:var(--bg-2);border-radius:8px;padding:.6rem .8rem}
.agente__canales{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.agente__canales legend{font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.agente__canales label{display:flex;gap:.4rem;align-items:center;font-weight:400;font-size:.95rem}
.agente__canales input,.agente__form .rgpd input{width:auto}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg);color:var(--footer-fg);margin-top:3rem}
.footer .muted{color:var(--footer-muted)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:3.4rem 1.5rem;
  display:grid;grid-template-columns:1.8fr 1fr 1.2fr 1fr;gap:2.5rem}
.footer h4{color:#fff;margin-bottom:.7rem;font-family:var(--sans);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.footer__menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer__menu a:hover{color:var(--gold-soft)}
.footer a:hover{color:var(--gold-soft)}
.footer .brand__logo{height:36px}
.brand--footer{color:#fff;margin-bottom:.7rem;font-family:var(--serif);letter-spacing:.06em;display:flex;align-items:center;gap:.5rem}

/* Menú completo (05-11-2026): nueve enlaces no caben en línea por debajo de 1560 px
   (medido con los 16 idiomas: islandés, alemán y lituano son los más largos; con la columna a
   1240 no caben ni a 1900), así que de 861 a 1559 px se usa el
   mismo panel desplegable que en móvil, y desde 1560 px la cabecera se ensancha y los enlaces se compactan. */
@media(min-width:1560px){
  .nav__inner{max-width:1560px}
  .nav__links{gap:.7rem}
  .nav__links a{font-size:.76rem;letter-spacing:.03em}
}
@media(min-width:861px) and (max-width:1559px){
  .nav__burger{display:inline-flex;margin-left:auto;flex:0 0 auto;align-self:center}
  .nav__collapse{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--surface);color:var(--ink);flex-direction:column;align-items:stretch;
    gap:.9rem;padding:1.1rem 1.5rem 1.4rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav__collapse.is-open{display:flex}
  .nav__links{flex-direction:column;gap:.15rem;flex:none}
  .nav__links a{color:var(--ink);padding:.7rem 0;border-bottom:1px solid var(--line)}
  .nav__actions{flex-wrap:wrap;gap:.7rem;padding-top:.5rem}
  .nav__actions .theme-toggle,.nav__actions .lang__btn{color:var(--ink);border-color:var(--line-strong)}
  .nav__actions .btn--wa{flex:1;min-width:150px;width:auto;padding:.8rem 1.4rem}
  .nav__actions .btn--wa .btn__label{display:inline}
}
/* ---------- Responsive público ---------- */
@media(max-width:860px){
  /* Cabecera: [mandala grande][nombre] … [hamburguesa]. Todo lo demás
     (enlaces + tema + idioma + WhatsApp) cae dentro del panel desplegable. */
  .nav__inner{gap:.6rem;flex-wrap:nowrap}
  .brand{flex:0 1 auto;min-width:0;overflow:hidden;padding-left:56px}  /* deja hueco al mandala de la esquina */
  /* Móvil: mandala PEGADO a la esquina izq, asomando desde fuera (se ve el trozo
     inferior-derecho). Más grande y BAJADO: su fondo a 2px del borde de la cabecera,
     y su parte alta se pierde por arriba. */
  .brand__emblema{position:absolute;left:0;bottom:2px;width:68px;height:68px}
  .brand__emblema::before{left:auto;right:0;width:104px;height:104px}
  /* El nombre se dimensiona por ANCHO y puede encoger: con alto fijo (28px → 254px de
     ancho) no cabía junto al hueco del mandala y la hamburguesa a 390px y se cortaba
     en «Propert». La máscara es contain, así que encoger no deforma. */
  .brand__word{height:auto;width:254px;max-width:100%;flex:0 1 auto;min-width:0}
  .nav__burger{display:inline-flex;margin-left:auto;flex:0 0 auto;align-self:center}
  .nav__collapse{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--surface);color:var(--ink);flex-direction:column;align-items:stretch;
    gap:.9rem;padding:1.1rem 1.5rem 1.4rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav__collapse.is-open{display:flex}
  .nav__links{flex-direction:column;gap:.15rem;flex:none}
  .nav__links a{color:var(--ink);padding:.7rem 0;border-bottom:1px solid var(--line)}
  .nav__actions{flex-wrap:wrap;gap:.7rem;padding-top:.5rem}
  .nav__actions .theme-toggle,.nav__actions .lang__btn{color:var(--ink);border-color:var(--line-strong)}
  .nav__actions .btn--wa{flex:1;min-width:150px;width:auto;padding:.8rem 1.4rem}
  .nav__actions .btn--wa .btn__label{display:inline}
  .ficha__grid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .contacto-box{position:static}
  .footer__inner{grid-template-columns:1fr;gap:1.8rem}
  .section{padding:3.2rem 1.5rem}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr;gap:1.3rem}
  .section{padding:2.6rem 1.2rem}
}
@media(max-width:380px){
  .brand__emblema{width:46px;height:46px}
  .brand__word{width:200px}
}

/* ============================================================================
   PANEL DE ADMINISTRACIÓN
   ============================================================================ */
.admin-body{background:var(--bg-2)}
/* Tabla de configuración del buscador (filtros × nivel) */
.cfg-tabla{border-collapse:collapse;width:100%;max-width:540px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cfg-tabla th,.cfg-tabla td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.cfg-tabla th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--bg-2)}
.cfg-tabla th:not(:first-child),.cfg-tabla td:not(:first-child){text-align:center;width:96px}
.cfg-tabla tr:last-child td{border-bottom:0}
.cfg-tabla input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--gold)}
/* Pestañas de idioma del editor de propiedad */
.lang-tabs{margin-bottom:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lang-tabs__bar{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.5rem .6rem;background:var(--bg-2);border-bottom:1px solid var(--line)}
.lang-tab{background:transparent;border:0;padding:.5rem .9rem;border-radius:8px;cursor:pointer;font:inherit;font-size:.9rem;color:var(--muted)}
.lang-tab.is-on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.lang-tab--cosm{opacity:.7;font-style:italic}
.lang-tabs__panel input[readonly],.lang-tabs__panel textarea[readonly]{background:var(--bg-2);color:var(--muted);cursor:default}
.lang-tabs__ai{margin-left:auto;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.lang-tabs__origen{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.lang-tabs__origen select{padding:.4rem .5rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;background:var(--surface);color:var(--ink)}
.lang-tabs__ai .btn{min-height:auto;padding:.5rem .9rem}
.lang-tabs__panel{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:1rem}
.admin-login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1rem}
.admin-login{background:var(--surface);padding:2.6rem;border-radius:var(--radius-lg);box-shadow:var(--shadow);width:min(410px,94vw)}
.brand--login{font-family:var(--serif);font-size:1.4rem;letter-spacing:.06em;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.admin-login h1{font-family:var(--serif);font-size:1.4rem;font-weight:500;margin:.2rem 0 1.4rem}
.admin-login label{display:block;margin-bottom:1rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.admin-login input{display:block;width:100%;margin-top:.4rem;padding:.75rem .85rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;color:var(--ink);text-transform:none;letter-spacing:0}
.admin-error{color:#b3261e;background:#fbe9e7;padding:.7rem .85rem;border-radius:8px;font-size:.9rem;margin-bottom:1rem}
/* Entrada (umbral): las pantallas de entrar, 2º factor, alta, invitación, contraseña y
   cuenta. Heredan la tarjeta de .admin-login. Cada pieza arranca con `hidden` y la enciende
   entrada.js: el [hidden] va con !important porque un display de aquí abajo lo anularía. */
.entrada [hidden]{display:none!important}
.entrada--ancha{width:min(560px,94vw)}
.entrada form{margin-bottom:1rem}
.entrada__otro{margin:1rem 0;font-size:.9rem}
.entrada__otro summary{cursor:pointer;color:var(--muted)}
.entrada__otro[open] summary{margin-bottom:.8rem}
.entrada__qr{display:flex;justify-content:center;margin:1rem auto;padding:.8rem;background:#fff;border-radius:8px;width:max-content}
.entrada__qr svg{width:220px;height:220px;display:block}
.entrada__secreto{display:inline-block;word-break:break-all;font-size:.85rem;padding:.3rem .5rem;background:var(--line);border-radius:6px}
.entrada__codigos{columns:2;column-gap:2rem;margin:1rem 0;padding-left:1.6rem;font-family:ui-monospace,Consolas,monospace;font-size:.95rem;line-height:1.9}
.entrada__acciones{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.entrada__salir{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--line);text-align:center}
.entrada__lista{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.entrada__lista li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px}
.entrada__datos{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0 0 1.2rem;font-size:.92rem}
.entrada__datos dt{color:var(--muted)}
.entrada__datos dd{margin:0;font-weight:600}
/* El ojo de la contraseña (entrada.js → ponerOjo): el botón va FUERA del <label> y se
   coloca encima del campo. Alto del campo fijo para que el botón case sin medir nada.
   bottom = sólo el borde del campo (1px): el margin-bottom del label NO cuenta, porque
   colapsa y se sale de la caja (medido en Chrome: con 1rem el botón quedaba 16px alto). */
.campo-clave{position:relative}
.campo-clave input{height:3rem;padding-right:3rem}
.campo-clave .ojo{position:absolute;right:1px;bottom:1px;width:2.75rem;height:calc(3rem - 2px);display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0 7px 7px 0;background:transparent;color:var(--muted);cursor:pointer}
.campo-clave .ojo:hover{color:var(--ink)}
.campo-clave .ojo[aria-pressed="false"] .ojo__tachado,.campo-clave .ojo[aria-pressed="true"] .ojo__abierto{display:none}

.admin-shell{display:flex;min-height:100vh}
.admin-side{width:236px;flex:0 0 236px;background:var(--admin-bg);color:var(--admin-fg);
  display:flex;flex-direction:column;padding:1.3rem 0}
.admin-brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-family:var(--serif);
  font-weight:600;font-size:1.2rem;letter-spacing:.05em;padding:0 1.35rem 1.4rem}
.admin-side__nav{display:flex;flex-direction:column;gap:.15rem;padding:0 .7rem;flex:1}
.admin-side__link{display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:9px;
  color:var(--admin-fg);font-weight:500;font-size:.94rem}
.admin-side__link:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-side__link.is-active{background:color-mix(in srgb,var(--gold-soft) 22%,transparent);color:#fff}
.admin-side__link svg{width:18px;height:18px;flex:0 0 auto}
.aviso-error{background:#fdecea;color:#b3261e;border:1px solid #e6c3c0;padding:.9rem 1.1rem;border-radius:10px}
.admin-side__foot{padding:1.1rem 1.35rem 0;border-top:1px solid rgba(255,255,255,.1);margin:.5rem .7rem 0;display:flex;flex-direction:column;gap:.7rem}
.admin-side__tenant{font-size:.85rem;color:rgba(255,255,255,.55)}
.admin-side__salir{margin:0}
/* «Salir» es un <button> dentro de un <form method=post> (umbral exige POST con CSRF):
   se le quita el aspecto de botón para que siga pareciendo el enlace que era. */
.admin-side__logout{font:inherit;display:flex;align-items:center;gap:.55rem;color:var(--admin-fg);font-size:.9rem;
  background:none;border:0;padding:0;cursor:pointer}
.admin-side__logout svg{width:17px;height:17px}
.admin-side__logout:hover{color:var(--gold-soft)}
.admin-content{flex:1;min-width:0;padding:2.4rem 2.6rem;background:var(--bg-2)}

.admin-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.7rem}
.admin-head h1{font-family:var(--serif);font-size:1.7rem;font-weight:500}
.admin-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.admin-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.admin-table td{padding:.85rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover td{background:var(--bg-2)}
.pill{padding:.24rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pill--disponible{background:#e8f5e9;color:#137333}  /* 5,3:1 (era #188038, 4,46) */
.pill--reservada{background:#fff8e1;color:#a06e00}
.pill--vendida{background:#fbe9e7;color:#b3261e}
.pill--alquilada{background:#e3f2fd;color:#1565c0}
.aviso-salud{padding:.7rem 1rem;border-radius:8px;max-width:72ch;margin:0 0 1.2rem}
.aviso-salud--roto{background:#fdecea;color:#a3221b;border:1px solid #f5c2bd}
.admin-form{background:var(--surface);padding:1.8rem;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.admin-form__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.admin-form label{display:flex;flex-direction:column;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);gap:.4rem}
.admin-form label.wide{grid-column:1 / -1}
.admin-form label.check{flex-direction:row;align-items:center;gap:.5rem;grid-column:1 / -1;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0}
.admin-form input,.admin-form select,.admin-form textarea{padding:.65rem .75rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0}
.admin-form label.check input{width:auto}
.admin-form__actions{display:flex;gap:.7rem;margin-top:1.6rem}
.admin-acciones{display:flex;gap:.4rem;justify-content:flex-end}
.admin-acciones form{margin:0;display:inline-flex}
@media(max-width:720px){.admin-form__grid{grid-template-columns:1fr}}

/* ---------- Modal ---------- */
[x-cloak]{display:none!important}
/* Volver arriba (base.html + subir.js). Donde está el WhatsApp flotante de /inicio2 se
   sube encima de él, sin JS: `:has()`. */
.subir{position:fixed;right:18px;bottom:18px;z-index:59;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:var(--shadow);text-decoration:none}
.subir[hidden]{display:none}
.subir:hover{border-color:var(--gold)}
body:has(.i2-wa) .subir{right:22px;bottom:86px}
/* subir.js deja el foco en <body> (tabindex -1): sin marco alrededor de toda la página. */
body[tabindex="-1"]:focus{outline:none}
.modal-back{position:fixed;inset:0;background:rgba(20,17,14,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.6rem;width:min(380px,92vw);text-align:left}
.modal h3{font-family:var(--serif);font-weight:600;margin-bottom:.9rem}
.modal input{width:100%;padding:.65rem .75rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;margin-bottom:1rem}
.modal__actions{display:flex;gap:.6rem;justify-content:flex-end}

/* ---------- Paginación ---------- */
/* Barra común (templates/_paginacion.html): primera/anterior, números con «…»,
   siguiente/última y «ir a la página». En móvil se parte en varias filas. */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin:3rem 0 0}
.paginacion__info{color:var(--muted);font-size:.9rem;letter-spacing:.02em}
.paginacion__nums{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.paginacion__num{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;
  padding:0 .5rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:.95rem}
a.paginacion__num:hover{border-color:var(--ink)}
.paginacion__num.is-actual{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.paginacion__hueco{display:inline-flex;align-items:center;height:2.5rem;padding:0 .2rem;color:var(--muted)}
.paginacion__ir{display:flex;align-items:center;gap:.4rem;margin-left:.6rem}
.paginacion__ir label{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem}
.paginacion__ir input{width:4.5rem;height:2.5rem;padding:0 .5rem;border:1px solid var(--line-strong);border-radius:var(--radius);font:inherit;background:var(--surface);color:var(--ink)}
.btn--sm{padding:.45rem .9rem;min-height:2.5rem}
.paginacion__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}
.paginacion__ico,.paginacion__nums--corta{display:none}
/* Tablet y móvil: flechas de sólo símbolo y «ir a la página» en su propia fila, para
   que la de números no se parta (ver la cabecera de _paginacion.html). */
@media(max-width:1100px){
  .paginacion{flex-direction:column;gap:.9rem}
  .paginacion__ir{margin-left:0}
  .paginacion__txt{display:none}
  .paginacion__ico{display:inline;font-size:1.25rem;line-height:1}
  .paginacion__flecha{min-width:2.5rem;padding:0 .6rem;justify-content:center}
}
/* Móvil: la tira corta (una vecina), sin «primera/última» (el 1 y la última ya
   están en la tira) y todo más prieto, para que «‹ 1 … 6 7 8 … 148 ›» quepa en una
   fila a 360 px (con las cuatro flechas pedía ~400 px de 312). */
@media(max-width:600px){
  .paginacion__nums--larga,.paginacion__flecha--extremo{display:none}
  .paginacion__nums--corta{display:flex}
  .paginacion__fila{gap:.3rem;flex-wrap:nowrap}
  .paginacion__nums{gap:.25rem;flex-wrap:nowrap}
  .paginacion__num,.paginacion__flecha{min-width:2.1rem;padding:0 .3rem}
  .paginacion__hueco{padding:0}
}
/* «Por página», arriba del listado. */
/* El aire entre la barra («25 de 3548», ordenar, vista, por página) y las primeras fichas lo pone la
   cabecera, no el párrafo del recuento: dentro de un flex su margen no empuja lo de debajo. */
.listado-cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 1.6rem}
.listado-cabecera .results{margin:0}
/* Lado derecho del panel: «25 de 3548» pegado al «por página» que lo decide. */
.listado-cabecera__der{min-width:0;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.por-pagina label{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem}
.por-pagina select{height:2.3rem;padding:0 .5rem;border:1px solid var(--line-strong);border-radius:var(--radius);font:inherit;background:var(--surface);color:var(--ink)}

/* ---------- Página de contacto ---------- */
.contacto{max-width:1040px;margin:0 auto;padding:3rem 1.5rem 4rem}
.contacto__head{margin-bottom:1.8rem}
.contacto__head h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500}
.contacto__head .muted{margin-top:.4rem}
.contacto__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.2rem;align-items:start}
.contacto__form{display:flex;flex-direction:column;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.contacto__form label{display:flex;flex-direction:column;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);gap:.4rem}
.contacto__form input,.contacto__form textarea{padding:.75rem .85rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0}
.contacto__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.contacto__form .rgpd{flex-direction:row;align-items:flex-start;gap:.5rem;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.contacto__info{background:var(--inv-bg);color:#fff;border-radius:var(--radius-lg);padding:1.8rem}
.contacto__info h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.3rem}
.contacto__info .muted{color:rgba(255,255,255,.7)}
.contacto__list{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:.8rem}
.contacto__list li{display:flex;align-items:center;gap:.6rem}
.contacto__list svg{width:18px;height:18px;color:var(--gold-soft);flex:0 0 auto}
.contacto__list a:hover{color:var(--gold-soft)}
.aviso-ok{display:flex;align-items:center;gap:.6rem;background:#e8f5e9;color:#188038;border:1px solid #b7e0bd;padding:1rem 1.2rem;border-radius:10px;margin-bottom:1.8rem;font-weight:600}
.aviso-ok svg{width:20px;height:20px;flex:0 0 auto}
@media(max-width:760px){.contacto__grid{grid-template-columns:minmax(0,1fr)}.contacto__row{grid-template-columns:minmax(0,1fr)}}
/* Formulario de 3 pasos de /contacto. Sin JS son tres bloques seguidos (fieldset); con JS
   (`.pasos--js`, lo pone contacto-pasos.js) sólo se ve el activo. El estado se ve con el
   número y el texto, no sólo con el color. */
.pasos fieldset.paso{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.pasos fieldset.paso legend{font-family:var(--serif);font-size:1.05rem;color:var(--ink);padding:0;margin-bottom:.4rem}
.pasos select{padding:.75rem .85rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0;min-height:44px}
.pasos__multi{display:flex;flex-direction:column;gap:.4rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);position:relative}
.pasos__multi .multi__lista label{flex-direction:row;text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;color:var(--ink)}
.pasos__nav,.pasos__estado{display:none}
.pasos--js .pasos__nav{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.pasos--js .pasos__nav li{flex:1;display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:.5rem}
.pasos--js .pasos__nav li span{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--line-strong);font-weight:700}
.pasos--js .pasos__nav li.is-activo{color:var(--ink);border-bottom-color:var(--gold);font-weight:700}
.pasos--js .pasos__nav li.is-activo span{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.pasos--js .pasos__nav li.is-hecho span{border-color:var(--gold);color:var(--gold)}
.pasos--js fieldset.paso:not(.is-activo){display:none}
.pasos--js .pasos__legend-oculta,.pasos--js fieldset.paso legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pasos--js .pasos__estado{display:block;margin:0;font-size:.8rem;color:var(--muted)}
.pasos__mandos{display:flex;gap:.8rem;justify-content:flex-end;flex-wrap:wrap}
.pasos__mandos .btn{min-height:44px}
.pasos__mandos [hidden]{display:none}
@media(max-width:760px){.pasos--js .pasos__nav li{font-size:0}.pasos--js .pasos__nav li span{font-size:.78rem}.pasos--js .pasos__nav li.is-activo{font-size:.78rem}}

/* Pantalla ancha: el lateral queda FIJO (con «Salir» abajo del todo) y sólo se
   desplaza el contenido de la derecha. Se hace con alto de pantalla + overflow en
   cada columna, no con position:fixed, para no tener que reservar el hueco a mano.
   El lateral sólo enseña barra si la pantalla es más baja que el menú. */
@media(min-width:821px){
  .admin-shell{height:100vh;min-height:0;overflow:hidden}
  .admin-side{overflow-y:auto}
  .admin-content{overflow-y:auto}
}

/* Responsive del panel */
@media(max-width:820px){
  .admin-shell{flex-direction:column}
  .admin-side{width:auto;flex:none;flex-direction:row;align-items:center;padding:.6rem .8rem;gap:.4rem;overflow-x:auto}
  .admin-brand{padding:0 .6rem 0 .4rem}
  .admin-side__nav{flex-direction:row;flex:1;gap:.2rem;padding:0}
  .admin-side__foot{border-top:0;margin:0;padding:0;flex-direction:row}
  .admin-side__tenant{display:none}
  .admin-content{padding:1.3rem}

  /* Listado de propiedades: cada fila es una TARJETA (la tabla de 9 columnas medía
     1.074 px y ensanchaba toda la página en el móvil). La etiqueta de cada dato sale
     de `data-label`; título y acciones ocupan la fila entera. */
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table thead{display:none}
  .admin-table{background:none;box-shadow:none;border-radius:0}
  .admin-table tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);margin-bottom:.8rem;padding:.4rem 0;display:grid;grid-template-columns:1fr 1fr}
  .admin-table td{border-bottom:0;padding:.4rem 1rem;display:flex;flex-direction:column;gap:.1rem;min-width:0}
  .admin-table td[data-label]::before{content:attr(data-label);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
  .admin-table td.admin-titulo,.admin-table td.admin-acciones{grid-column:1 / -1}
  .admin-table td.admin-acciones{flex-direction:row;gap:.5rem;padding-top:.7rem;margin-top:.3rem;border-top:1px solid var(--line)}

  /* Menú del panel: en vez de una tira que se desplaza (y esconde «Mensajes»),
     los enlaces pasan a varias filas; sólo icono + nombre corto. */
  .admin-side{flex-wrap:wrap;overflow:visible;row-gap:.3rem}
  .admin-side__nav{flex-wrap:wrap;flex:1 1 100%;order:3}
  .admin-side__link{padding:.55rem .65rem;gap:.45rem;font-size:.85rem}
  .admin-side__foot{margin-left:auto}

  /* Tablas de configuración (buscador, fuentes): se desplazan DENTRO de su caja. */
  .cfg-tabla{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

  /* Casas repetidas: los botones largos parten línea en vez de empujar la página. */
  .rep .btn{white-space:normal;max-width:100%;text-align:center;height:auto}
}

/* ============================================================================
   MOTION — respeto por quien pide menos movimiento (accesibilidad)
   Anula transiciones/animaciones y deja los elementos con reveal ya visibles.
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  .brand__emblema::before,.brand__word{animation:none;transition:none}
  .brand:hover .brand__emblema::before,.brand:hover .brand__word{transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}


/* Panel de fuentes (/admin/fuentes) y filtros del listado del panel. */
.fuente-card{border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1.2rem;background:var(--bg-2)}
/* En PC, las fuentes de dos en dos (Antonio, 21-10-2026); en móvil y tableta, una debajo de otra.
   min-width:0 deja encoger a las tarjetas con URL largas en vez de desbordar la columna. */
.fuentes-rejilla{display:grid;grid-template-columns:1fr;gap:0 1.2rem;align-items:start}
@media (min-width:1100px){.fuentes-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fuentes-rejilla>.fuente-card{min-width:0}
/* La tarjeta que se acaba de guardar (ancla #fuente-N del aviso), para que se vea en cuál cayó. */
.fuente-card:target{outline:3px solid var(--accent, currentColor);outline-offset:2px}
.fuente-card__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-bottom:.8rem}
.fuente-card__nombre{font-weight:600;font-size:1.05rem;flex:1 1 22rem;max-width:36rem;padding:.35rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.fuente-card__fila{display:block;margin:.5rem 0}
.fuente-card__importar{display:inline-block;margin-top:.8rem}
.fuente-card__estado{margin-top:.8rem;color:var(--ink-soft)}
.fuente-card__estado--rojo b{color:#c0392b}
.fuente-card__estado--ok b{color:#2e7d32}
.admin-filtros{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.admin-filtros select,.admin-filtros input[type=search]{border:1px solid var(--line-strong);background:var(--surface);
  border-radius:8px;padding:.6rem .75rem;font:inherit;font-size:.92rem;color:var(--ink);min-height:44px;min-width:0;max-width:100%}
@media(max-width:600px){.admin-filtros select,.admin-filtros input[type=search]{flex:1 1 100%}}
.aviso-restr{color:#b26a00}
/* «Datos de la vivienda» de la ficha: pares etiqueta/valor en rejilla. */
.ficha__datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem 1.6rem;margin:0 0 1.6rem}
.ficha__datos div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.45rem 0}
.ficha__datos dt{color:var(--ink-soft)}
.ficha__datos dd{margin:0;font-weight:600;text-align:right}
/* Otras viviendas de la promoción: una fila por vivienda, el precio a la derecha. */
.ficha__hermanas{list-style:none;margin:0 0 1.6rem;padding:0}
.ficha__hermanas a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.ficha__hermanas a:hover span{text-decoration:underline}
.ficha__hermanas b{font-weight:600;white-space:nowrap}
.cfg-tabla--ancha{width:100%;max-width:62rem}
.cfg-tabla--ancha .cfg-tabla__efecto{min-width:18rem;text-align:left}

/* Formulario de inmueble: grupos de campos ampliados y casillas de características
   (src/form_campos.rs). */
.admin-form__grupo{border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem 1.2rem;margin:1.2rem 0 0}
.admin-form__grupo legend{font-weight:700;padding:0 .4rem}
.admin-form__filtro{width:100%;max-width:340px;margin:.2rem 0 .8rem}
.admin-form__cars label.check{grid-column:auto}
.admin-form__cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.35rem 1rem;
  max-height:320px;overflow:auto}
.admin-aviso{background:var(--surface-2,#fff6e0);border-left:4px solid var(--gold);padding:.7rem 1rem;border-radius:6px}

/* ── Casas repetidas (panel /admin/repetidas, src/admin_duplicados.rs) ─────────
   Dos casas lado a lado: la que se enseña con borde de color, la oculta apagada,
   para que se vea de un vistazo sin leer. */
.rep{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.2rem}
.rep__lados{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.9rem}
.rep__lado{border:2px solid var(--line);border-radius:10px;padding:.7rem;display:flex;flex-direction:column;gap:.2rem}
.rep__lado--ve{border-color:#2e7d4f}
.rep__lado--oculta{opacity:.72}
.rep__foto{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;background:var(--line)}
.rep__foto--sin{display:flex;align-items:center;justify-content:center;color:var(--muted,#888);font-size:.85rem}
.rep__estado{margin:.3rem 0}
.rep__chip{display:inline-block;font-size:.78rem;padding:.12rem .5rem;border-radius:99px;background:var(--line);color:var(--ink)}
.rep__chip--ve{background:#2e7d4f;color:#fff}
.rep__titulo{font-size:.9rem;margin:.2rem 0}
.rep__datos{border-collapse:collapse;width:100%;font-size:.9rem;margin-bottom:.5rem}
.rep__datos th,.rep__datos td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--line)}
.rep__datos thead th{font-weight:600}
.rep__datos tbody th{font-weight:500;width:9rem}
.rep__distinto td{background:#fff3cd;color:#5c4400}
.rep__botones{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem}
.rep__pregunta{font-weight:600;margin-right:.4rem}
.rep__seccion{display:inline-flex;align-items:center;gap:.5rem;font-size:1.15rem;margin:1.4rem 0 .6rem}
.rep__cuenta{font-size:.8rem;background:var(--line);border-radius:99px;padding:.05rem .55rem}
.rep__plegable summary{cursor:pointer}
.rep__plegable summary h2{display:inline-flex}
@media (max-width:640px){.rep__lados{grid-template-columns:1fr}}

/* ---------- Selector de VARIOS (tipo y ciudad), 23-10-2026 ----------
   Un <details> que se ve como un desplegable más; dentro, casillas. Sirve en el
   listado (.filtro--multi) y en la portada (.i2-f--multi). Comportamiento en
   static/js/multi.js; sin JS abre y cierra igual. */
.filtro__etq{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.filtro--multi{min-width:170px}
/* Precio «desde – hasta»: los dos combos juntos (templates/_precio_par.html). */
.precio-par__campos{display:flex;align-items:center;gap:.4rem}
.precio-par__campos input{flex:1 1 0;min-width:0}
.filtro.precio-par .precio-par__campos input{min-width:0;width:8rem}
.filtros--abierto .filtro.precio-par .precio-par__campos input{width:auto}
.precio-par__guion{color:var(--muted)}
.multi{position:relative}
.multi>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;
  padding:.6rem .75rem;font-size:.92rem;min-width:118px;max-width:260px;white-space:nowrap}
.multi>summary::-webkit-details-marker{display:none}
.multi>summary span{overflow:hidden;text-overflow:ellipsis}
.multi>summary::after{content:"";flex:0 0 auto;width:.4rem;height:.4rem;border:solid currentColor;border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);opacity:.7}
.multi[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.multi.is-marcado>summary{border-color:var(--gold);font-weight:600}
.multi>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.multi__panel{position:absolute;z-index:30;top:calc(100% + .3rem);left:0;min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 2rem));
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-sm,0 6px 24px rgba(0,0,0,.12));
  padding:.5rem;display:flex;flex-direction:column;gap:.4rem}
.multi__lista{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.multi__lista li[hidden]{display:none}
/* El cuadro de filtrar zonas se esconde sin ciudad; su display de abajo anularía el [hidden]. */
.multi [hidden]{display:none!important}
/* «Elige antes una ciudad» dentro del selector de zonas. */
.multi__nota{margin:.3rem .2rem;color:var(--ink-soft);font-size:.9rem}
.multi .multi__lista label{display:flex;align-items:center;gap:.55rem;padding:.45rem .5rem;border-radius:6px;cursor:pointer;
  font-size:.92rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);min-height:40px}
.multi .multi__lista label:hover{background:var(--bg-2)}
/* Cuántos da cada casilla (buscador.js). A 0 no se apaga con opacidad: bajaría el contraste del nombre por debajo de AA. */
.multi__n{margin-left:auto;padding-left:.6rem;color:var(--muted);font-size:.85em;font-variant-numeric:tabular-nums}
.filtros__n{margin:0;color:var(--ink-soft);font-size:.9rem;align-self:center}
.multi .multi__lista input[type="checkbox"]{width:1.1rem;height:1.1rem;min-width:0;min-height:0;margin:0;padding:0;flex:0 0 auto;accent-color:var(--gold)}
.multi .multi__filtro{width:100%;min-width:0;min-height:40px;border:1px solid var(--line-strong);border-radius:6px;padding:.45rem .6rem;
  font:inherit;font-size:.9rem;background:var(--bg-2);color:var(--ink)}
.multi__quitar{align-self:flex-start;background:none;border:0;padding:.3rem .4rem;font:inherit;font-size:.82rem;color:var(--gold);
  text-decoration:underline;cursor:pointer}
/* En la portada el botón cerrado es tan alto como sus vecinos (48 px). */
.i2-f--multi .multi>summary{min-height:48px;max-width:none;border-color:var(--i2-linea,var(--line));border-radius:var(--i2-r-ctl,8px);
  font-size:1rem;padding:.65rem .8rem}

/* ---------- Ordenar y vista (rejilla / tabla) en la cabecera del listado ---------- */
.vista{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.vista__op{display:inline-flex;align-items:center;gap:.35rem;padding:0 .7rem;height:2.3rem;color:var(--muted);font-size:.88rem;text-decoration:none}
.vista__op+.vista__op{border-left:1px solid var(--line-strong)}
.vista__op svg{width:1.05rem;height:1.05rem}
.vista__op[aria-current="true"]{background:var(--gold);color:var(--on-gold)}
.vista__op:hover:not([aria-current="true"]){color:var(--ink);background:var(--bg-2)}
@media (max-width:520px){.vista__op span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ---------- Vista de TABLA del listado (templates/_tabla.html) ----------
   Densa como una hoja de cálculo. En pantallas estrechas se desliza de lado
   dentro de su caja; la página no. */
.tabla-props{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tabla-props:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tabla-props table{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla-props th,.tabla-props td{padding:.55rem .7rem;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.tabla-props thead th{position:sticky;top:0;background:var(--bg-2);color:var(--muted);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.tabla-props thead th a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tabla-props thead th[aria-sort] a{color:var(--ink)}
.tabla-props tbody tr:nth-child(even){background:var(--bg-2)}
.tabla-props tbody tr:hover{background:var(--line)}
.tabla-props .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-props__ref{color:var(--gold);font-weight:600}
.tabla-props__precio{font-weight:600;color:var(--ink)}
.tabla-props__promo{color:var(--muted);font-size:.82rem}
/* Fecha de entrega en la tarjeta de la rejilla (obra nueva). */
.card__entrega{font-size:.82rem;color:var(--muted);margin-top:.15rem}

/* Bandeja del panel (admin_mensajes.html, static/js/seleccion.js): barra de selección
   y fila elegida. `user-select:none` en las filas para que Mayús+clic elija un tramo
   en vez de subrayar texto; los enlaces y el texto del mensaje se pueden copiar igual
   con la casilla desmarcada porque sólo afecta al arrastre con Mayús (ver el JS). */
.bandeja__barra{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .9rem}
.bandeja__pista{flex-basis:100%}
.bandeja__col-sel{width:2.6rem;text-align:center}
.bandeja__col-sel input{width:1.15rem;height:1.15rem;cursor:pointer}
.admin-table tbody tr.is-sel td{background:var(--bg-2);box-shadow:inset 0 0 0 9999px rgba(26,115,232,.08)}

/* ---------- Favoritos y listas (src/favoritos.rs, static/js/favoritos.js) ----------
   La tarjeta va envuelta en `.card-wrap` para que el corazón (un <button>) NO quede dentro
   del enlace de la tarjeta (un botón dentro de un <a> no es HTML válido ni accesible). */
.card-wrap{position:relative;display:flex;flex-direction:column;min-width:0}
.card-wrap>.card,.card-wrap>.i2-card{flex:1 1 auto}
.fav{position:absolute;top:.6rem;right:.6rem;z-index:5;width:2.75rem;height:2.75rem;border-radius:50%;border:0;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:#14110c;
  box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;transition:transform .15s,color .15s}
.fav svg{width:20px;height:20px}
.fav:hover{transform:scale(1.08)}
.fav:focus-visible{outline:2px solid var(--gold,#a9812a);outline-offset:2px}
.fav[aria-pressed="true"]{color:#c0392b}
.fav[aria-pressed="true"] svg{fill:currentColor}
/* El corazón ocupa la esquina del estado («Vendida»…): éste se aparta. */
.card-wrap .card__estado,.card-wrap .i2-card__estado{right:3.8rem}
.nav__fav{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--nav-fg)}
.nav__fav svg{width:20px;height:20px}
.nav__fav [data-fav-count]{position:absolute;top:3px;right:0;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:.55rem;
  background:var(--gold);color:var(--on-gold);font-size:.68rem;font-weight:700;line-height:1.1rem;text-align:center}
.favs__barra{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.6rem}
.favs__contacto{max-width:44rem;margin:3rem auto 0}
.lista-item{display:flex;flex-direction:column;gap:.5rem;min-width:0}
@media(prefers-reduced-motion:reduce){.fav{transition:none}.fav:hover{transform:none}}

/* ── Admin: páginas, blog e IA (01-11-2026) ─────────────────────────────────────────────── */
.admin-h2{font-size:1.1rem;margin:2.2rem 0 .8rem}
.admin-form--linea{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.2rem}
.admin-form--linea label{flex:1 1 18rem}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;line-height:1.5}
.pill--ok{background:#e8f5e9;color:#188038;border-color:#b7e0bd}
.idm{display:inline-block;font-size:.72rem;font-weight:700;padding:.1rem .4rem;border-radius:6px;margin:0 .15rem .15rem 0;border:1px solid var(--line);white-space:nowrap}
.idm--ok{background:#e8f5e9;color:#188038;border-color:#b7e0bd}
.idm--auto{background:#fff4e0;color:#8a5a00;border-color:#f0d49a}
.idm--falta{background:var(--bg-2);color:var(--muted)}
.idm-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.4rem}
.idm-tab{padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.85rem;background:var(--surface)}
.idm-tab.is-activa{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 25%,transparent);font-weight:700}
.idm-tab.idm--falta{color:var(--muted)}
.idm-marca{font-weight:700;margin-left:.2rem}
.aviso-aviso{background:#fff4e0;color:#6b4400;border:1px solid #f0d49a;padding:.9rem 1.1rem;border-radius:10px;margin:0 0 1.2rem}
.respaldo-caja{background:var(--bg-2);border:1px dashed var(--line-strong);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.respaldo-caja__texto{max-height:20rem;overflow:auto;padding:.6rem 0;font-size:.9rem}
.ia-caja{margin-top:2rem}
.ia-fila{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin:.8rem 0}
.ia-fila label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600}
.ia-fila .grow{flex:1 1 24rem}
.ia-fila select,.ia-fila textarea{padding:.6rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit}

/* ---------- Favoritos: listas de la agencia (sección en /favoritos) ---------- */
.favs__lista{margin:0 0 3rem}
.favs__lista h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:500;margin:0 0 .4rem}
.favs__barra form{display:inline}

/* ---------- Botón «＋ lista» y su panel (static/js/lista-admin.js) ----------
   Sólo existe para quien ha entrado al panel. El botón va a la izquierda del corazón. */
.fav--lista{right:3.9rem;font-weight:700;font-size:1.4rem;line-height:1}
.fav--lista[aria-pressed="true"]{color:var(--gold,#a9812a)}
.lista-adm{position:fixed;z-index:1000;left:50%;bottom:1rem;transform:translateX(-50%);width:min(24rem,calc(100vw - 2rem));
  max-height:70vh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.28);padding:1rem}
.lista-adm h3{margin:0 0 .6rem;font-size:1rem}
.lista-adm ul{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.3rem}
.lista-adm li label{display:flex;gap:.6rem;align-items:center;min-height:44px;cursor:pointer}
.lista-adm__nueva{display:flex;gap:.4rem;margin:0 0 .6rem}
.lista-adm__nueva input{flex:1;min-width:0;min-height:44px;padding:.4rem .6rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.lista-adm__envio{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.lista-adm__msg{font-size:.85rem;color:var(--muted);margin:.3rem 0 0}
.lista-adm__cerrar{float:right}
/* Gestión de una lista dentro del panelito: renombrar, compartir con la agencia, pasar, borrar. */
.lista-adm__gestion{border-top:1px solid var(--line);margin:.6rem 0 0;padding:.6rem 0 0;display:grid;gap:.5rem}
.lista-adm__gestion select,.lista-adm__gestion input[type="text"]{min-height:44px;padding:.4rem .6rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;min-width:0}
.lista-adm__fila{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.lista-adm__etq{font-size:.72rem;color:var(--muted);margin-left:.3rem}
.lista-adm ul{max-height:40vh;overflow:auto}
.lista-adm--toast{bottom:4.5rem;padding:.6rem .9rem;font-size:.9rem;pointer-events:none}

/* ---------- Navegar por una selección: la barra de la ficha («casa 2 de 5») ---------- */
.sel-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin:0 0 1.2rem;padding:.7rem 1rem;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.sel-nav__info{min-width:0}
.sel-nav__nota{flex-basis:100%;margin:0;white-space:pre-wrap}
.sel-nav__botones{display:flex;flex-wrap:wrap;gap:.5rem}
.sel-nav__botones .btn{min-height:44px;display:inline-flex;align-items:center}

/* «Mis listas» en /favoritos para el administrador (static/js/lista-admin.js) */
.favs__mis{margin:0 0 1.5rem}
.favs__mis-lista{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.favs__mis-fila{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.favs__mis-nombre{flex:1 1 12rem;font-weight:600}

/* ---------- Calculadora de hipoteca (/calculadora-hipoteca) ----------
   Mismo lenguaje que el formulario de contacto: tarjeta con filete, etiquetas en mayúsculas
   pequeñas y un bloque en tinta con el resultado. Todo con tokens, así que el modo oscuro sale solo. */
.calc{max-width:1040px;margin:0 auto;padding:3rem 1.5rem 4rem}
.calc__head{margin-bottom:1.8rem}
.calc__head h1{overflow-wrap:anywhere;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500;letter-spacing:.01em}
.calc__head .muted{margin-top:.4rem}
.calc__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.2rem;align-items:start}
.calc__form{display:flex;flex-direction:column;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.calc__form label{display:flex;flex-direction:column;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);gap:.4rem}
.calc__form input{padding:.75rem .85rem;border:1px solid var(--line-strong);border-radius:8px;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0;min-height:2.75rem}
.calc__form input[aria-invalid="true"]{border-color:var(--error-txt)}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem}
.calc__inv{display:flex;flex-direction:column;gap:1.1rem}
.calc__inv[hidden],.calc__res [hidden]{display:none}
.calc__modo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.3rem;padding:.25rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.calc__form .calc__modo-op{position:relative;flex-direction:row;gap:0;font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.calc__modo-op input{position:absolute;opacity:0;inset:0;min-height:0;cursor:pointer}
.calc__modo-op span{min-width:0;overflow-wrap:anywhere;flex:1;text-align:center;padding:.6rem .5rem;border-radius:7px;font-weight:600}
.calc__modo-op input:checked+span{background:var(--inv-bg);color:#fff}
.calc__modo-op input:focus-visible+span{outline:2px solid var(--gold-soft);outline-offset:2px}
.calc__err{color:var(--error-txt);font-size:.82rem;font-weight:500;text-transform:none;letter-spacing:0}
.calc__res{background:var(--inv-bg);color:#fff;border-radius:var(--radius-lg);padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.calc__vacio,.calc__nada{color:rgba(255,255,255,.75)}
.calc__etq{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-soft);font-weight:600}
.calc__cuota{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);font-weight:500;line-height:1.1;margin-top:.2rem}
.calc__lista{margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.calc__lista>div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.55rem}
.calc__lista dt{color:rgba(255,255,255,.7)}
.calc__lista dd{margin:0;font-weight:600;text-align:right}
.calc__res .btn--primary{background-color:var(--oro-base);background-image:var(--oro-metal);border-color:var(--oro-base);color:var(--oro-fg)}
.calc__res .btn--primary:hover{filter:brightness(1.06);color:var(--oro-fg)}
.calc__aviso{margin-top:1.4rem;max-width:70ch}
@media (max-width:720px){
  .calc{padding:2rem 1rem 3rem}
  .calc__grid{grid-template-columns:minmax(0,1fr)}
  .calc__form{padding:1.3rem}
  .calc__row{grid-template-columns:minmax(0,1fr)}
}
.ficha__calc{margin:.2rem 0 .6rem;font-size:.9rem}
/* Tarjeta de hipoteca de la ficha: cuota orientativa + enlace a la calculadora. */
.ficha__cuota{margin:.4rem 0 1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.9rem}
.ficha__cuota p{margin:0}
.ficha__cuota-etq{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,inherit);opacity:.8}
.ficha__cuota-n strong{font-family:var(--serif);font-size:1.45rem;font-weight:600}
.ficha__cuota-n span{opacity:.75;font-size:.82rem}
.ficha__cuota .btn{margin-top:.6rem}

/* Todo dorado PLANO es metálico (Antonio, 06-11-2026): el color liso queda de respaldo si falta color-mix(). */
.card__estado,.card__promo,.paginacion__num.is-actual,.vista__op[aria-current="true"],.nav__fav [data-fav-count],.pasos--js .pasos__nav li.is-activo span{background-image:var(--gold-metal)}
/* Casilla «Solo manuales» del filtro del listado del panel. */
.admin-filtros__check{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;white-space:nowrap}
/* Ubicación y enlaces destacados de las fichas: oro metálico con la ola del logo (ver inicio2.css). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .link,.card__ubic{background-image:var(--gold-metal);color:transparent;-webkit-background-clip:text;background-clip:text;background-size:240% 100%;background-position:0 0;animation:logo-destello 7s ease-in-out infinite alternate}
  @media (prefers-reduced-motion:reduce){.link,.card__ubic{animation:none;background-position:50% 0}}
}