/* Capa visual de las páginas PÚBLICAS (las que ve un cliente, no el CRM).
 *
 * Salió de la landing de Atelier 4 (16-sep-2026), que es el estilo que Javier
 * quiere para toda la parte pública: minimalista, claro, editorial, dorado
 * sobre blanco con bandas verdes y arena. Estaba en un <style> dentro de
 * atelier.html; vive aquí para que el catálogo, la ficha pública, el flujo de
 * enquiry y la landing no acaben con cuatro estéticas distintas, y para que el
 * navegador la cachee UNA vez en lugar de bajarla en cada página.
 *
 * Reglas de la casa que están codificadas aquí:
 *  - Características en UNA sola línea bajo el precio (.specs-linea).
 *  - Nada de €/m² ni de promotora: eso no es estilo, es la plantilla.
 *  - Tres tallas de foto por srcset; el móvil no baja la de 1.920 px.
 */

:root {
  --gold:#B8975E; --green:#1F3D33; --ink:#2B2B2B; --muted:#6F6F6F;
  --sand:#F5F1EA; --line:#E6E1D8;
  /* Tipografías (17-sep-2026). Javier quiere las de Home Run: Lato para el
     texto, que es la suya y es libre, y un serif editorial para los títulos.
     El suyo es BwDarius, que es de pago y no se puede copiar; Playfair Display
     es la alternativa libre más cercana (mismo eje vertical, contraste alto,
     serifas afiladas). Si compra la licencia, solo cambia esta línea y el
     <link> de publico/base.html. */
  --titulos:"Playfair Display", Georgia, "Times New Roman", serif;
  --texto:"Lato", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* 17 px de base, como el texto de las guías que le gustan: a 16 px un párrafo
   largo en Lato se lee pequeño. Los rótulos pequeños van en `rem`, que es
   relativo a la raíz, así que esto solo agranda el texto corrido. */
body { margin:0; background:#fff; color:var(--ink);
  font-family:var(--texto); font-weight:400; font-size:1.0625rem; line-height:1.7; }
a { color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding-inline:clamp(16px, 4vw, 48px); }
.eyebrow { font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:700; }
/* Los títulos van en el serif: es lo que le da el aire editorial. Peso 400,
   que en Playfair ya es sólido, y sin tanto espaciado entre letras como pedía
   la sans. */
h1,h2,h3 { font-family:var(--titulos); font-weight:400; letter-spacing:0; margin:0; }
h2 { font-size:clamp(1.7rem, 3.2vw, 2.6rem); }
p { margin:0 0 1rem; }

/* Nav: transparente sobre la foto del hero, opaca al bajar */
nav { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(16px, 4vw, 48px); color:#fff; transition:background .3s, color .3s; }
nav.solid { background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 1px 0 var(--line); }
nav .brand { font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; font-weight:500; text-decoration:none; }
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.6rem; }
nav a { text-decoration:none; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; }
nav a:hover, nav a.lang { color:var(--gold); }
/* Cinco entradas y el idioma (19-sep-2026) ya no caben con el aire de
   escritorio en una tableta: se aprieta el hueco y el espaciado de letra en
   vez de partir la barra en dos líneas. */
@media (max-width:1060px) { nav ul { gap:1.05rem; } nav a { letter-spacing:.14em; } }

/* Móvil: la fila de entradas no cabe, así que se cambia por el botón de las
   tres rayas y un desplegable a pantalla completa (Javier, 19-sep-2026). Antes
   se ocultaban las entradas y en el teléfono no quedaba menú ninguno: solo la
   marca y el idioma. */
.hamburguesa { display:none; background:none; border:0; padding:6px; cursor:pointer; color:inherit; }
.hamburguesa span { display:block; width:24px; height:2px; background:currentColor; border-radius:2px; }
.hamburguesa span + span { margin-top:5px; }
@media (max-width:760px) {
  nav ul { display:none; }
  .hamburguesa { display:block; }
}

/* El desplegable: verde de marca a sangre, «Menú» en el serif y la X arriba a
   la derecha, como el resto de las capas de la web. */
.menu-capa { position:fixed; inset:0; z-index:60; background:var(--green); color:#fff;
  padding:calc(1.05rem + env(safe-area-inset-top, 0px)) clamp(16px, 6vw, 40px) 2.5rem;
  overflow-y:auto; overscroll-behavior:contain; }
.menu-cab { display:flex; align-items:flex-start; justify-content:space-between; }
.menu-rotulo { font-family:var(--titulos); font-size:1.75rem; line-height:1; }
.menu-capa .x { background:none; border:0; color:#fff; font-size:1.5rem; line-height:1;
  cursor:pointer; padding:0 0 0 1rem; }
.menu-capa ul { list-style:none; margin:2.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.5rem; }
.menu-capa a { text-decoration:none; color:#fff; font-size:1rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500; }
.menu-capa .lang-li { margin-top:.8rem; }
.menu-capa .lang { color:var(--gold); }

/* Hero: foto a pantalla completa con un zoom lento */
.hero { position:relative; min-height:100svh; display:grid; place-items:end start; color:#fff; overflow:hidden; }
.hero .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kb 28s ease-in-out infinite alternate; }
@keyframes kb { from { transform:scale(1); } to { transform:scale(1.08); } }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.hero .txt { position:relative; z-index:1; padding:0 clamp(16px, 4vw, 48px) clamp(2.4rem, 7vh, 5rem); max-width:820px; }
.hero h1 { font-size:clamp(2rem, 5.2vw, 4rem); line-height:1.1; margin:.4rem 0 .6rem; }
.hero .sub { font-size:.85rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500; }
.hero .cue { position:absolute; right:clamp(16px, 4vw, 48px); bottom:2.2rem; z-index:1; font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; writing-mode:vertical-rl; opacity:.8; }
/* Cabecera corta: para las páginas sin hero de pantalla completa (catálogo,
   enquiry), donde la nav ya nace opaca. */
.cabecera { padding:calc(4.6rem + clamp(1rem, 3vh, 2.4rem)) 0 0; }

/* El encuadre automático de secciones (pedido de Javier, 17-sep-2026: «que no
   parezca una bajada monótona») NO se hace con `scroll-snap-type`. Se probó:
   con `proximity` el navegador casi nunca salta y te deja la sección a medias,
   y con `mandatory` una sección más alta que la pantalla te atrapa y no puedes
   leer el final, que en el móvil son todas. Lo hace `encuadrarSecciones()` en
   publico.js, que solo empuja cuando sueltas cerca de un borde. Esta línea es
   la que le da la animación. */
html { scroll-behavior:smooth; }

/* Bandas */
section { padding-block:clamp(3.2rem, 8vw, 6.5rem); }
/* La barra de navegación es fija, así que un salto a un ancla (#sobre-mi,
   #contacto) dejaba el rótulo de la sección tapado debajo. Al encuadre
   automático no le afecta: ese calcula la posición él mismo. */
section[id] { scroll-margin-top:68px; }
.band-green { background:var(--green); color:#fff; }
.band-green .eyebrow { color:var(--gold); }
.band-sand { background:var(--sand); }
.lead { font-size:clamp(1.05rem, 1.6vw, 1.35rem); line-height:1.6; max-width:52ch; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 5vw, 5rem); align-items:center; }
@media (max-width:820px) { .two { grid-template-columns:1fr; } }
.photo { aspect-ratio:4/3; background:var(--sand); border-radius:4px; max-width:100%; width:100%; object-fit:cover; display:block; }
.strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin-top:2rem; }
.strip .photo { aspect-ratio:1/1; }
@media (max-width:640px) { .strip { grid-template-columns:repeat(2, 1fr); } }
.am { list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.55rem 1.5rem; font-size:.92rem; }
.am li { padding-left:1.2rem; position:relative; }
.am li::before { content:""; position:absolute; left:0; top:.72em; width:.5rem; height:1px; background:var(--gold); }

/* Galería en mosaico (contenido de la página, no de cada vivienda) */
.mosaico { display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; margin-top:1.8rem; }
.mosaico img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in; border-radius:3px; background:var(--sand); transition:opacity .15s; }
.mosaico img:hover { opacity:.88; }
@media (max-width:640px) { .mosaico { grid-template-columns:repeat(2, 1fr); } }

/* ── Guías ─────────────────────────────────────────────────────────────────
   Las tarjetas son el patrón que le gustó a Javier: foto vertical, caja
   blanca con borde y el título en serif. */
.guias { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; margin-top:1.8rem; }
@media (max-width:860px) { .guias { grid-template-columns:1fr; max-width:34rem; margin-inline:auto; } }
.guia-card { border:1px solid var(--line); background:#fff; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.guia-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(31,61,51,.14); }
.guia-card .retrato { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--sand); }
.guia-card .body { padding:1.5rem 1.6rem 1.8rem; }
.guia-card h3 { font-size:1.55rem; margin-bottom:.6rem; }
.guia-card p { color:var(--muted); font-size:.98rem; margin:0; }
.guia-card .more { margin-top:1rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--gold); }

/* Un artículo se lee en una columna estrecha: 68 caracteres por línea es el
   ancho en el que la vista no se pierde al volver al principio de la línea. */
.estrecho { max-width:52rem; }
.articulo { font-size:1.12rem; }
.articulo h2 { font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin:2.6rem 0 1rem; }
.articulo h2:first-child { margin-top:0; }
.articulo h3 { font-size:clamp(1.2rem, 2vw, 1.45rem); margin:2rem 0 .8rem; }
.articulo p { max-width:68ch; }
.articulo ul, .articulo ol { max-width:68ch; padding-left:1.2rem; margin:0 0 1.2rem; }
.articulo li { margin-bottom:.5rem; }
.articulo strong { font-weight:700; }
.articulo a { color:var(--green); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.18em; }
/* Bloque de aviso: para lo que depende de una norma o de un organismo. Que se
   vea que es un dato con fuente y fecha, no una cifra dicha de memoria. */
.articulo .fuente { border-left:2px solid var(--gold); background:var(--sand); padding:1rem 1.2rem;
  margin:1.6rem 0; font-size:.98rem; max-width:68ch; }
.articulo .fuente p:last-child { margin-bottom:0; }
.firma-articulo { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }
.portada-articulo { width:100%; aspect-ratio:16/7; object-fit:cover; display:block; background:var(--sand); }

/* Portada de una ficha de propiedad (17-sep-2026). Antes era un hero a
   pantalla completa y Javier lo vio pixelado: estirar a 2.000 px de ancho una
   foto de portal que a veces solo tiene 1.024 la revienta. Ahora va en un
   recuadro con aire a los lados, a su proporción real (sin recorte) y sin
   pasar de 1.040 px, que es donde se ve nítida. Al pulsarla se abre el visor
   flotante con las fotos de ese anuncio. */
.portada-ficha { max-width:1040px; margin:0 auto; }
.portada-ficha img { width:100%; height:auto; max-height:72svh; object-fit:contain;
  display:block; background:var(--sand); cursor:zoom-in; transition:opacity .2s; }
.portada-ficha img:hover { opacity:.92; }
.portada-ficha .pie { display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-top:.7rem; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }

/* ── Consulta detallada (/enquiries) ──────────────────────────────────────
   Una pregunta por pantalla y un toque por respuesta. Los botones son grandes
   a propósito: la mitad de la gente lo va a rellenar con el pulgar. */
.pregunta { font-size:clamp(1.5rem, 3vw, 2.2rem); margin-bottom:1.4rem; }
.vias { display:grid; gap:1rem; }
.via { display:flex; flex-direction:column; gap:.3rem; text-align:left; width:100%;
  background:#fff; border:1px solid var(--line); padding:1.2rem 1.4rem; cursor:pointer;
  font:inherit; color:inherit; transition:border-color .15s, transform .15s; }
.via:hover { border-color:var(--gold); transform:translateX(3px); }
.via-t { font-family:var(--titulos); font-size:1.4rem; }
.via-s { color:var(--muted); font-size:.95rem; }
.opciones { display:flex; flex-wrap:wrap; gap:.7rem; }
.opcion { background:#fff; border:1px solid var(--line); padding:.85rem 1.3rem;
  cursor:pointer; font:inherit; font-size:1rem; color:inherit; border-radius:2px;
  transition:border-color .15s, background .15s; }
.opcion:hover { border-color:var(--gold); background:var(--sand); }
.opcion.vacia { color:var(--muted); font-style:italic; }
.progreso { display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.progreso .barra { flex:1; height:2px; background:var(--line); }
.progreso .barra span { display:block; height:2px; background:var(--gold); transition:width .3s; }
.progreso .cuantos { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.atras { background:none; border:0; padding:.6rem 0; margin-top:1.6rem; cursor:pointer;
  font:inherit; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.atras:hover { color:var(--gold); }
.resumen-respuestas { color:var(--muted); font-size:.95rem; margin-bottom:1.6rem; }
.form-largo label { display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:1rem 0 .3rem; }
.form-largo input, .form-largo textarea { width:100%; border:1px solid var(--line);
  border-radius:3px; padding:.75rem .85rem; font:inherit; font-size:1rem; background:#fff; }
.form-largo textarea { resize:vertical; min-height:5.5rem; }
.form-largo input:focus, .form-largo textarea:focus { outline:none; border-color:var(--gold); }
.form-largo .fila { display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; }
@media (max-width:560px) { .form-largo .fila { grid-template-columns:1fr; } }
.form-largo .aviso { font-size:.85rem; color:var(--muted); margin:1rem 0 0; }
.form-largo .aviso.err { color:#B4402F; }
.form-largo .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-largo .acciones { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.4rem; }
.form-largo .acciones .atras { margin-top:0; }
.gracias { padding-block:clamp(1rem, 4vw, 2.4rem); }

/* /brief, el enlace de la bio (23-oct-2026): el botón del cuestionario arriba,
   el formulario corto debajo, y respuestas múltiples marcadas en verde. */
.form-largo select { width:100%; border:1px solid var(--line); border-radius:3px;
  padding:.75rem .85rem; font:inherit; font-size:1rem; background:#fff; color:var(--ink); }
.form-largo select:focus { outline:none; border-color:var(--gold); }
/* Simetría: un <select> reserva el ancho de su opción más larga («United Arab
   Emirates») y con `1fr` ensanchaba su columna. `minmax(0,1fr)` deja las dos
   iguales; y misma altura que los <input> quitando el estilo nativo. */
.form-largo .fila { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:560px) { .form-largo .fila { grid-template-columns:minmax(0,1fr); } }
.form-largo select { min-width:0; height:auto; line-height:inherit; -webkit-appearance:none; appearance:none;
  padding-right:2.4rem; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
  background-size:.35rem .35rem; background-repeat:no-repeat; }
/* Verde y no arena: en el móvil el :hover se queda pegado tras el toque, y una
   zona DESmarcada parecía marcada. */
.opcion.sel, .opcion.sel:hover { border-color:var(--green); background:var(--green); color:#fff; }
/* Cabecera con foto como la de /home, pero sin ocupar la pantalla entera: en
   el móvil el botón del cuestionario tiene que verse sin bajar. */
.brief-hero { min-height:clamp(300px, 46svh, 520px); }
.brief-hero h1 { margin:0 0 .5rem; }
.brief-lema { margin:0; font-size:clamp(1.05rem, 2vw, 1.35rem); letter-spacing:.02em; opacity:.95; }
.brief-cuerpo { padding-top:clamp(1.8rem, 5vw, 3rem); min-height:60svh; }
/* El cuestionario, en el verde de la marca: es el camino que más interesa. */
.via.brief-empezar { background:var(--green); border-color:var(--green); color:#fff; }
.via.brief-empezar .via-t { color:#fff; }
.via.brief-empezar .via-s { color:rgba(255,255,255,.78); }
.via.brief-empezar:hover { border-color:var(--gold); }
.brief-o { text-align:center; margin:2.2rem 0 .2rem; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); }
.acciones-brief { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.6rem; }
.acciones-brief .atras { margin-top:0; }
.brief-texto { margin-top:1.4rem; }
.brief-texto label { margin-top:0; }

/* Filtros del catálogo: una barra que envuelve en el móvil, sin nada que
   cargar antes de poder usarla (es un <form method="get"> de toda la vida). */
.filtros { display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:flex-end; margin-top:2rem; }
.filtros label { display:flex; flex-direction:column; gap:.35rem; min-width:9.5rem; flex:1 1 9.5rem; }
.filtros label span { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.filtros select { border:1px solid var(--line); border-radius:3px; padding:.7rem .8rem; font:inherit; font-size:.95rem; background:#fff; color:var(--ink); }
.filtros select:focus { outline:none; border-color:var(--gold); }
.filtros .btn { flex:0 0 auto; }
.filtros .limpiar { flex:0 0 auto; align-self:center; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.btns.acciones { justify-content:flex-start; margin:1.6rem 0 .5rem; }
.pie-accion { margin:0 0 1.8rem; font-size:.8rem; color:var(--muted); }
.paginas { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; }
/* La paginación es un <nav>, y la regla `nav { position:fixed; color:#fff }` de
   la cabecera también le caía a ella: quedaba clavada arriba, encima del menú,
   con los botones en blanco sobre blanco (13-oct-2026: llevaba así desde el
   17-sep y nadie podía ver cómo pasar de página). */
nav.paginas { position:static; inset:auto; z-index:auto; padding:0; color:var(--ink); }
nav.paginas .btn.linea { color:var(--green); }
.cuenta { margin:1.4rem 0 0; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); }
.vacio { text-align:center; padding:clamp(2.5rem, 8vw, 5rem) 0; }
.vacio h2 { margin-bottom:.6rem; }
@media (max-width:640px) { .filtros label { flex:1 1 100%; } .filtros .btn { width:100%; } }

/* Filtros avanzados: el botón es la etiqueta de una casilla que no se ve, y el
   panel se enseña con `:checked`. La casilla sigue ahí para el teclado. */
.filtros .av-interruptor { position:absolute; opacity:0; width:1px; height:1px; }
.filtros label.av-boton { display:inline-block; flex:0 0 auto; min-width:0; color:var(--green); text-align:center; }
.filtros .av-interruptor:focus-visible + .av-boton { outline:2px solid var(--gold); outline-offset:2px; }
.filtros .av-interruptor:checked + .av-boton { background:var(--green); color:#fff; border-color:var(--green); }
.filtros .avanzados { display:none; flex:1 1 100%; border-top:1px solid var(--line); padding-top:1.2rem; }
.filtros .av-interruptor:checked ~ .avanzados { display:block; }
.av-ayuda { margin:0 0 1rem; color:var(--muted); font-size:.92rem; }
.av-grupos { display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.4rem 1.6rem; align-items:start; margin-bottom:1.4rem; }
.av-grupo { border-bottom:1px solid var(--line); padding:.7rem 0; }
.av-grupo summary { cursor:pointer; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:.6rem; }
.av-grupo summary::-webkit-details-marker { display:none; }
.av-grupo summary::after { content:"+"; color:var(--gold); font-size:1rem; letter-spacing:0; line-height:1; }
.av-grupo[open] summary::after { content:"–"; }
.av-grupo summary b { color:var(--gold); font-weight:700; margin-right:auto; }
.av-casillas { display:grid; gap:.15rem; padding-top:.7rem; }
.filtros label.av-casilla { display:flex; flex-direction:row; align-items:center; gap:.55rem; min-width:0; flex:none; font-size:.95rem; color:var(--ink); padding:.28rem 0; cursor:pointer; }
.av-casilla input { accent-color:var(--green); width:1.05rem; height:1.05rem; flex:0 0 auto; margin:0; }
@media (max-width:640px) { .filtros label.av-boton { width:100%; } .filtros label.av-casilla { padding:.45rem 0; } }

/* Tarjetas de propiedad */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.2rem; margin-top:2.2rem; }
/* Rejilla del catálogo (pedido de Javier, 17-sep-2026: «más editorial y que se
   vea la foto más»). Con tarjetas de 250 px salían cuatro columnas y la foto
   quedaba de sello; a partir de 400 px salen dos o tres según la pantalla, la
   foto se ve de verdad y hay aire entre tarjetas. */
.grid.editorial { grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:2.4rem 2rem; }
.grid.editorial .photo { aspect-ratio:4/3; }
.grid.editorial .body { padding:1.3rem .2rem 0; }
.grid.editorial .card { border:0; background:transparent; }
.grid.editorial .card:hover { transform:none; box-shadow:none; }
.grid.editorial .card:hover .photo { opacity:.9; }
.grid.editorial .card .photo { transition:opacity .2s; }
.grid.editorial .name.frase { font-size:1.25rem; }
@media (max-width:520px) { .grid.editorial { grid-template-columns:1fr; } }
/* La portada: tres por fila (23-oct-2026), dos en tableta y una en el móvil. */
.grid.editorial.tres { grid-template-columns:repeat(3, minmax(0,1fr)); gap:2rem 1.4rem; }
.grid.editorial.tres .name.frase { font-size:1.05rem; }
.grid.editorial.tres .body { padding-top:.9rem; }
@media (max-width:900px) { .grid.editorial.tres { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .grid.editorial.tres { grid-template-columns:minmax(0,1fr); } }
.card { background:#fff; border:1px solid var(--line); text-align:left; padding:0; cursor:pointer; font:inherit; color:inherit;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; text-decoration:none; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(31,61,51,.14); }
.card .photo { aspect-ratio:3/2; border-radius:0; }
.card .body { padding:1.1rem 1.2rem 1.3rem; }
.card .name { font-family:var(--titulos); font-size:1.25rem; letter-spacing:.02em; font-weight:400; }
/* El título de una propiedad del catálogo es una frase entera («Villa de 8
   dormitorios con vistas al mar en La Quinta»), no un código de vivienda: a
   1,25 rem ocupa cuatro líneas. */
.card .name.frase { font-size:1.08rem; line-height:1.35; }
.card .spec { color:var(--muted); font-size:.85rem; margin-top:.3rem; }
.card .price { color:var(--gold); font-weight:500; margin-top:.7rem; font-size:1.05rem; }
.card .more { margin-top:.9rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500; }
/* Con una sola tarjeta, `auto-fit` la estira a todo el ancho y parece un
   banner en vez de una propiedad: `.pocos` la deja a su tamaño. */
.grid.pocos { grid-template-columns:repeat(auto-fit, minmax(250px, 340px)); }

/* Ficha: capa a pantalla completa (Atelier) o página propia (catálogo) */
.sheet { position:fixed; inset:0; z-index:50; background:rgba(20,28,25,.55); display:grid; place-items:center; padding:1rem; }
.panel { background:#fff; width:min(1100px, 100%); max-height:94svh; overflow:auto; border-radius:6px; position:relative; }
.panel .close { position:sticky; top:0; float:right; margin:.8rem; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .9rem; cursor:pointer; font:inherit; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; z-index:2; }
.panel .inner { padding:clamp(1.2rem, 3vw, 2.6rem); }
.panel h3 { font-size:clamp(1.5rem, 3vw, 2.2rem); letter-spacing:.14em; text-transform:uppercase; }
.panel .price { color:var(--gold); font-size:1.4rem; font-weight:500; margin:.3rem 0 1rem; }
/* Las características de la ficha de Atelier, TODAS en la misma línea (misma
   regla del tablero que `.specs-linea` del catálogo). Era una cuadrícula
   `auto-fit` y con seis datos la orientación se caía sola a una segunda fila
   (Javier, 18-sep-2026). Reparten el ancho pero no se encogen por debajo de su
   texto: en el móvil, antes de partirlas, se hace scroll lateral. */
.specs { display:flex; flex-wrap:nowrap; gap:1.4rem 2.2rem; margin:1.2rem 0 1.6rem; padding:1.1rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; }
.specs::-webkit-scrollbar { display:none; }
.specs > div { flex:1 1 auto; white-space:nowrap; }
/* En el móvil los seis datos no caben en 335 px y el último queda cortado a
   media palabra, que parece un error en vez de una fila que se desliza. El
   degradado del borde derecho lo dice sin añadir ningún cacharro: en el
   ordenador no se ve, porque ahí el último dato acaba antes del borde. */
/* Solo en el móvil: la máscara se come también el final de las dos líneas
   finas de la fila, y en el ordenador —donde los seis datos caben— eso se
   vería como un filete mal acabado en vez de una pista. */
@media (max-width: 820px) {
  .specs, .specs-linea { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.4rem), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 2.4rem), transparent); }
}
.specs .k { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.specs .v { font-size:1.05rem; }
/* Regla de Javier (tablero, 17-sep-2026): las características van todas en la
   MISMA línea debajo del precio, nunca en dos. Si no caben, se hace scroll
   lateral en el móvil antes que partirlas. */
.specs-linea { display:flex; flex-wrap:nowrap; gap:1.4rem; overflow-x:auto; padding:.9rem 0; margin:.2rem 0 1.4rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:.92rem;
  white-space:nowrap; scrollbar-width:none; }
.specs-linea::-webkit-scrollbar { display:none; }
.specs-linea .v { color:var(--ink); }
/* Descripción partida en propiedad y zona, con aire entre las dos (tablero) */
.desc + .desc { margin-top:1.4rem; }
/* La descripción de la ficha de Atelier ocupa el ancho ENTERO de la caja
   blanca (Javier, 18-sep-2026: «que lleguen las letras de un extremo al otro,
   no que el vídeo se vea más ancho que el texto»). A 1.000 px eso son ~120
   caracteres por línea y no se lee, así que en el ordenador va a dos columnas
   de medida cómoda —como una revista— y en el móvil a una sola. `columns` y no
   una cuadrícula a propósito: equilibra el alto solo y aguanta que el texto
   venga ya partido en tres párrafos. */
.panel .descripcion { columns:2; column-gap:clamp(1.8rem, 4vw, 3.4rem); margin-bottom:.2rem; }
.panel .descripcion .desc { max-width:none; margin:0 0 1.1rem; orphans:2; widows:2; }
.panel .descripcion .desc:last-child { margin-bottom:0; }
@media (max-width: 820px) { .panel .descripcion { columns:1; } }
.video { margin-top:1.6rem; }
.video video { width:100%; aspect-ratio:16/9; background:#000; border-radius:4px; display:block; margin-top:.6rem; }
.plan { margin-top:1.6rem; }
.plan img { width:100%; display:block; border:1px solid var(--line); background:#fff; margin-top:.6rem; cursor:zoom-in; }
/* Las láminas de plano del promotor son hojas muy anchas (2.400 × 844) con una
   foto decorativa ocupando el 26% de la izquierda y, a la derecha, el plano y
   sus especificaciones. Javier quiere ver el plano, «no la foto de la
   izquierda del mar» (17-sep-2026), así que se recorta esa franja: la
   proporción 1764/844 es la de la hoja SIN la foto, y `cover` anclado a la
   derecha se come exactamente el 26% izquierdo. Medido sobre las cuatro
   láminas: el corte está en el 26,0-26,5% en todas. */
.recorte-plano { aspect-ratio:1764 / 844; object-fit:cover; object-position:100% 50%; }
/* Nota personal de Javier sobre la propiedad (tablero: «notas personales de
   Javi en cada listing, para que puedan verlo los clientes») */
.nota { margin-top:1.8rem; padding:1.2rem 1.4rem; background:var(--sand); border-left:2px solid var(--gold); max-width:70ch; }
.nota .quien { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }

.btn { display:inline-block; text-decoration:none; background:var(--green); color:#fff; padding:.85rem 1.6rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500; border-radius:2px; border:0; cursor:pointer; font-family:inherit; }
.btn.gold { background:var(--gold); }
.btn.linea { background:transparent; border:1px solid currentColor; }
.btn:disabled { opacity:.6; cursor:default; }
.cta { text-align:center; }
.cta .btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }
footer { padding:2rem 0 2.6rem; text-align:center; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
footer .firma { display:block; margin-top:.5rem; letter-spacing:.2em; color:var(--ink); }

/* Formulario de contacto (capa) */
.modal { position:fixed; inset:0; z-index:70; background:rgba(20,28,25,.6); display:grid; place-items:center; padding:1rem; }
.form { background:#fff; width:min(520px, 100%); border-radius:6px; padding:clamp(1.3rem, 3vw, 2.2rem); position:relative; }
.form .x { position:absolute; top:.8rem; right:.8rem; background:none; border:0; font-size:1.2rem; cursor:pointer; color:var(--muted); }
.form h3 { font-size:1.3rem; margin-bottom:.3rem; }
.form .sobre { color:var(--muted); font-size:.85rem; margin-bottom:1.2rem; }
.form label { display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .3rem; }
.form input, .form textarea, .form select { width:100%; border:1px solid var(--line); border-radius:3px; padding:.75rem .85rem; font:inherit; font-size:1rem; background:#fff; }
.form textarea { resize:vertical; min-height:5.5rem; }
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color:var(--gold); }
.form .fila { display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; }
@media (max-width:480px) { .form .fila { grid-template-columns:1fr; } }
.form .aviso { font-size:.82rem; color:var(--muted); margin:.9rem 0 0; }
.form .err { color:#B4402F; }
.form .ok { color:var(--green); font-size:1rem; padding:1rem 0; }
.form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Visor de fotos: flotante, centrado, casi a pantalla completa pero con aire
   en las cuatro esquinas, y flechas para pasar (como un portal). */
.visor { position:fixed; inset:0; z-index:90; background:rgba(12,16,14,.92); display:grid; place-items:center; padding:clamp(28px, 6vh, 64px) clamp(28px, 7vw, 96px);
  /* `dvh` y no la altura del `inset:0`: en el móvil la barra del navegador se
     come los últimos píxeles de un elemento fijo y la foto salía pegada al
     borde de abajo (queja de Javier, 17-sep-2026). */
  height:100dvh; }
/* Aire de verdad abajo: ahí vive el contador «1 / 14», y en una pantalla
   ancha y baja la foto llegaba a tocarlo. El hueco inferior es el de arriba
   más el alto del contador, y respeta la zona segura del iPhone. */
.visor { padding-bottom:calc(clamp(28px, 6vh, 64px) + 2.6rem + env(safe-area-inset-bottom, 0px)); }
.visor img { max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); border-radius:3px; user-select:none; }
/* Un plano en el visor: se estira al ancho disponible para que se lean las
   estancias, y `aspect-ratio` + `cover` le quitan la franja de la foto.
   El `object-fit` se repite aquí a propósito: `.visor img` lleva `contain` y
   con un solo nombre de clase le ganaba en especificidad, así que el recorte
   se veía en la ficha pero no en el visor. */
.visor img.recorte-plano { width:100%; height:auto; background:#fff;
  object-fit:cover; object-position:100% 50%; }
.visor .x, .visor .prev, .visor .next { position:absolute; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; cursor:pointer; font:inherit; display:grid; place-items:center; transition:background .15s; }
.visor .x:hover, .visor .prev:hover, .visor .next:hover { background:rgba(255,255,255,.28); }
.visor .x { top:calc(18px + env(safe-area-inset-top, 0px)); right:22px; width:44px; height:44px; font-size:1.1rem; }
.visor .prev, .visor .next { top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.5rem; }
.visor .prev { left:16px; } .visor .next { right:16px; }
.visor .n { position:absolute; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); color:#fff; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; opacity:.8; }
@media (max-width:640px) { .visor { padding:56px 12px; } .visor .prev, .visor .next { width:42px; height:42px; } .visor .prev { left:6px; } .visor .next { right:6px; } }
[x-cloak] { display:none !important; }

/* Ficha de una residencia de Atelier 4 (21-sep-2026): portada a todo el ancho
   del panel y su galería en mosaico. La proporción es la de las fotos del
   dossier (3:2 aprox.); la portada se recorta a 16:9 para no comerse la
   pantalla antes del título. */
/* Con el MISMO margen lateral que el texto del panel (.panel .inner): a sangre
   quedaba pegada a los bordes y no respiraba (Javier, 21-sep-2026). */
.ficha-portada { display:block; width:calc(100% - 2 * clamp(1.2rem, 3vw, 2.6rem)); margin:0 auto; aspect-ratio:16 / 9; object-fit:cover; cursor:zoom-in; background:var(--sand); border-radius:3px; }
.galeria-ficha { margin-top:1.8rem; }
.galeria-ficha .mosaico { margin-top:.8rem; }

/* Landing de la reforma del casco antiguo de Estepona (21-sep-2026). La
   portada es verde con el render CONTENIDO al lado, no a sangre: el render
   mide 1.514 px y a pantalla completa se pixelaba. */
.reno-portada { padding-top:clamp(6.5rem, 14vh, 9rem); padding-bottom:clamp(3rem, 8vh, 5rem); }
.reno-portada h1 { font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.12; margin:.7rem 0 1.1rem; }
.reno-portada .photo, #oportunidad .photo { cursor:zoom-in; border-radius:3px; }
.reno-video { align-items:start; }
.reno-video video { width:100%; max-width:380px; aspect-ratio:9 / 16; max-height:82svh; justify-self:center; background:#000; border-radius:6px; display:block; }
.reno-tabla { overflow-x:auto; margin-top:1.8rem; }
.reno-tabla table { width:100%; border-collapse:collapse; font-size:.98rem; min-width:520px; }
.reno-tabla th, .reno-tabla td { text-align:left; vertical-align:top; padding:.95rem .8rem; border-bottom:1px solid var(--line); }
.reno-tabla thead th { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.reno-tabla tbody th { font-weight:500; width:24%; }
.reno-tabla td strong { display:block; font-size:1.25rem; font-weight:500; }
.reno-tabla td span { display:block; color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.reno-viviendas .card { cursor:default; }
.reno-viviendas .desc { margin:.8rem 0 0; font-size:.95rem; }
.reno-planos { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.4rem; margin-top:1.8rem; }
.reno-planos figure { margin:0; }
.reno-planos img { width:100%; aspect-ratio:4 / 3; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:3px; cursor:zoom-in; display:block; }
.reno-planos figcaption { font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.reno-estrategias h3 { font-size:1.15rem; margin:0 0 .4rem; }
@media (max-width:820px) { .reno-video video { max-height:none; } }
.reno-licencia { display:inline-block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--green); background:var(--gold); padding:.45rem .8rem; border-radius:2px; margin-bottom:1.1rem; }
.reno-precio { margin:1.4rem 0 .2rem; font-size:clamp(1.6rem, 3vw, 2.1rem); font-family:"Playfair Display", Georgia, serif; }
.reno-precio span { display:block; font-family:inherit; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.2rem; font-family:Lato, sans-serif; }
.reno-precio-cta { text-align:center; }