:root{
  --tinta:#0E1836; --cobalto:#1C3FAE; --cobalto-claro:#3A62D8; --magenta:#EC2D8E;
  --hueso:#F5F6FB; --albero:#E7D9BE; --humo:#6B7392;
  --fondo:var(--hueso); --papel:#FFFFFF; --texto:var(--tinta); --suave:var(--humo);
  --linea:#DDE1F0; --marca:var(--cobalto); --realce:var(--magenta);
  --sombra:0 1px 2px rgba(14,24,54,.05), 0 8px 24px -12px rgba(14,24,54,.18);
  --r:14px; --gut:clamp(16px,4vw,40px); --max:1180px;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --cuerpo:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --dato:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --fondo:#0A0F24; --papel:#131B3B; --texto:#E9ECF8; --suave:#9BA5C8;
  --linea:#26304F; --marca:#7C97F0; --realce:#FF74B8; --albero:#3A3324;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#0A0F24; --papel:#131B3B; --texto:#E9ECF8; --suave:#9BA5C8;
  --linea:#26304F; --marca:#7C97F0; --realce:#FF74B8; --albero:#3A3324;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5.6vw,4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.35rem)}
h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--realce);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.seccion{padding-block:clamp(48px,7vw,86px)}
.eyebrow{font-family:var(--dato);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marca)}
.apag{color:var(--suave)}
.lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--suave);max-width:62ch}

/* La retícula del azulejo trianero: cuatro cuartos de círculo por baldosa. */
.azulejo{height:12px;background:
  radial-gradient(circle at 0 0,var(--cobalto) 0 5.5px,transparent 5.6px),
  radial-gradient(circle at 100% 0,var(--cobalto) 0 5.5px,transparent 5.6px),
  radial-gradient(circle at 0 100%,var(--cobalto) 0 5.5px,transparent 5.6px),
  radial-gradient(circle at 100% 100%,var(--cobalto) 0 5.5px,transparent 5.6px),
  var(--albero);
  background-size:24px 24px}

/* ---------- cabecera ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;gap:18px;min-height:62px}
.logo{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.035em;white-space:nowrap}
.logo span{color:var(--realce)}
nav.menu{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.menu button{background:none;border:0;padding:7px 11px;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--suave);cursor:pointer}
nav.menu button:hover{color:var(--texto);background:color-mix(in srgb,var(--marca) 9%,transparent)}
nav.menu button[aria-current="true"]{color:var(--papel);background:var(--cobalto)}
.tel{font-family:var(--dato);font-size:.85rem;font-weight:500;color:var(--marca);white-space:nowrap}
@media (max-width:860px){.tel{display:none}}
/* En el móvil el menú se partía en TRES filas y la cabecera ocupaba 127 px
   pegados arriba: una sexta parte de la pantalla, siempre. En una sola fila
   que se desliza, la cabecera vuelve a medir lo que debe. */
@media (max-width:760px){
  .barra{gap:10px;min-height:54px}
  nav.menu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu button{white-space:nowrap;scroll-snap-align:start;padding:6px 10px}
}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:12px 22px;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;background:var(--cobalto);color:#fff;box-shadow:var(--sombra)}
.btn:hover{background:var(--cobalto-claro)}
.btn.magenta{background:var(--magenta)}
.btn.magenta:hover{filter:brightness(1.08)}
.btn.fantasma{background:transparent;color:var(--texto);border:1.5px solid var(--linea);box-shadow:none}
.btn.fantasma:hover{border-color:var(--marca);color:var(--marca);background:transparent}
.btn.peq{padding:8px 15px;font-size:.85rem}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,44px)}
.hero-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,54px);align-items:end}
@media (max-width:900px){.hero-rejilla{grid-template-columns:1fr}}
.hero h1{margin-block:14px 18px}
.hero h1 em{font-style:normal;color:var(--realce)}
.hero-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,42px)}
@media (max-width:640px){.cifras{grid-template-columns:repeat(2,1fr)}}
.cifra{background:var(--papel);padding:16px 14px}
.cifra b{display:block;font-family:var(--display);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cifra span{font-size:.79rem;color:var(--suave);display:block;margin-top:2px;line-height:1.35}

/* ---------- tarjetas de vivienda ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px}
.casa{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.casa:focus-visible{outline:2.5px solid var(--realce);outline-offset:3px}
.casa:hover{border-color:var(--marca)}
.casa .marco{aspect-ratio:4/3;background:var(--linea);position:relative;overflow:hidden}
.casa .marco img{width:100%;height:100%;object-fit:cover}
.casa .cuerpo{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.precio{font-family:var(--display);font-size:1.38rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tachado{font-family:var(--dato);font-size:.79rem;color:var(--suave);text-decoration:line-through;margin-left:7px;font-weight:400}
.casa h3{font-size:.97rem;line-height:1.35;font-weight:600}
.donde{font-size:.83rem;color:var(--suave)}
.ficha{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--dato);font-size:.79rem;color:var(--suave);border-top:1px solid var(--linea);padding-top:9px;margin-top:auto}
.etq{position:absolute;top:10px;left:10px;background:var(--magenta);color:#fff;font-family:var(--dato);font-size:.68rem;font-weight:500;padding:4px 9px;border-radius:99px;letter-spacing:.03em}
.ref{position:absolute;bottom:10px;right:10px;background:rgba(14,24,54,.78);color:#fff;font-family:var(--dato);font-size:.67rem;padding:3px 8px;border-radius:5px;letter-spacing:.03em}
.cee{display:inline-flex;align-items:center;gap:5px;font-family:var(--dato);font-size:.72rem;color:var(--suave)}
.cee i{font-style:normal;width:17px;height:17px;display:grid;place-items:center;border-radius:4px;color:#fff;font-weight:600;font-size:.66rem}

/* filtros */
.filtros{display:flex;gap:9px;flex-wrap:wrap;margin-block:22px 26px;align-items:center}
.filtros select,.filtros input{font:inherit;font-size:.88rem;padding:9px 12px;border:1.5px solid var(--linea);border-radius:10px;background:var(--papel);color:var(--texto)}
.cuenta{font-family:var(--dato);font-size:.8rem;color:var(--suave);margin-left:auto}

/* ---------- detalle ---------- */
.panel{position:fixed;inset:0;z-index:80;background:rgba(10,15,36,.6);backdrop-filter:blur(4px);display:grid;place-items:end center;padding:0}
.panel .hoja{background:var(--fondo);width:100%;max-width:1000px;max-height:94vh;overflow-y:auto;border-radius:18px 18px 0 0;box-shadow:0 -10px 60px rgba(0,0,0,.35)}
.panel .cierra{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--gut);background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.galeria{display:grid;grid-template-columns:2fr 1fr 1fr;gap:5px}
.galeria img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}
.galeria img:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
@media (max-width:700px){.galeria{grid-template-columns:1fr 1fr}.galeria img:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}
.detalle-rejilla{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(20px,3vw,38px);padding-block:26px 40px}
@media (max-width:820px){.detalle-rejilla{grid-template-columns:1fr}}
.tecnica{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-block:20px}
.tecnica div{background:var(--papel);padding:11px 13px}
.tecnica dt{font-size:.73rem;color:var(--suave);text-transform:uppercase;letter-spacing:.06em;font-family:var(--dato)}
.tecnica dd{margin:2px 0 0;font-weight:600;font-size:.97rem}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{font-size:.8rem;padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--marca) 10%,transparent);color:var(--marca);font-weight:500}
.aparte{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:20px;position:sticky;top:90px;box-shadow:var(--sombra)}
@media (max-width:820px){
  .aparte{position:static}
  /* La hoja de detalle, casi a pantalla completa: en un móvil, 94vh menos la
     galería dejaba el texto del anuncio en una rendija. */
  .panel .hoja{max-height:100dvh;border-radius:14px 14px 0 0}
  .tecnica{grid-template-columns:1fr}
}
.texto-anuncio p{margin-bottom:13px;max-width:66ch}

/* ---------- valorador ---------- */
.valor-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,44px);align-items:start}
@media (max-width:880px){.valor-rejilla{grid-template-columns:1fr}}
.campo{display:block;margin-bottom:15px}
.campo span{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:.95rem;padding:11px 13px;border:1.5px solid var(--linea);border-radius:10px;background:var(--papel);color:var(--texto)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.resultado{background:var(--papel);border:2px solid var(--marca);border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.horquilla{font-family:var(--display);font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;margin-block:6px 4px}
.barra-precio{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--cobalto),var(--magenta));margin-block:16px 8px}
.pie-barra{display:flex;justify-content:space-between;font-family:var(--dato);font-size:.75rem;color:var(--suave)}

/* ---------- método / pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.paso{background:var(--papel);padding:22px 20px}
.paso b{font-family:var(--dato);font-size:.78rem;color:var(--realce);display:block;margin-bottom:9px}
.paso h3{margin-bottom:6px}
.paso p{font-size:.9rem;color:var(--suave)}

/* ---------- equipo ---------- */
.equipo{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.persona{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.inicial{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;background:var(--cobalto);margin-bottom:12px}
.persona .cargo{font-family:var(--dato);font-size:.74rem;color:var(--realce);letter-spacing:.05em;text-transform:uppercase}
.persona p{font-size:.88rem;color:var(--suave);margin-top:9px}

/* ---------- zonas ---------- */
.zonas{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.zona{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.zona .euros{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zona .euros small{font-family:var(--cuerpo);font-size:.8rem;font-weight:400;color:var(--suave);letter-spacing:0}
.zona ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:5px}
.zona li{display:flex;justify-content:space-between;font-size:.84rem;color:var(--suave);border-bottom:1px dotted var(--linea);padding-bottom:4px}
.zona li b{font-family:var(--dato);font-weight:500;color:var(--texto)}

/* ---------- chat ---------- */
.chat{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;min-height:440px}
.chat-cab{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.punto{width:9px;height:9px;border-radius:99px;background:#22C55E;box-shadow:0 0 0 3px color-mix(in srgb,#22C55E 25%,transparent)}
.hilo{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;max-height:52vh;min-height:260px}
.msg{max-width:min(86%,560px);padding:11px 15px;border-radius:15px;font-size:.93rem;line-height:1.55;white-space:pre-wrap}
.msg.bot{background:color-mix(in srgb,var(--marca) 8%,transparent);border-bottom-left-radius:5px;align-self:flex-start}
.msg.yo{background:var(--cobalto);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.sug{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
.sug button{background:transparent;border:1.5px solid var(--linea);border-radius:99px;padding:7px 13px;font-size:.83rem;cursor:pointer;color:var(--suave)}
.sug button:hover{border-color:var(--marca);color:var(--marca)}
.chat-pie{display:flex;gap:9px;padding:13px 14px;border-top:1px solid var(--linea)}
.chat-pie input{flex:1;font:inherit;font-size:.95rem;padding:11px 14px;border:1.5px solid var(--linea);border-radius:99px;background:var(--fondo);color:var(--texto)}

/* ---------- legal ---------- */
details.legal{border:1px solid var(--linea);border-radius:12px;background:var(--papel);margin-bottom:10px;overflow:hidden}
details.legal summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.legal summary::-webkit-details-marker{display:none}
details.legal summary::after{content:"+";font-family:var(--dato);color:var(--marca);font-size:1.15rem;line-height:1}
details.legal[open] summary::after{content:"–"}
details.legal .dentro{padding:0 18px 18px;font-size:.9rem;color:var(--suave);max-width:72ch}
details.legal .dentro p{margin-bottom:10px}
details.legal h4{font-family:var(--cuerpo);font-size:.86rem;color:var(--texto);margin-block:14px 4px}

.nota{border-left:3px solid var(--realce);background:color-mix(in srgb,var(--realce) 7%,transparent);padding:13px 16px;border-radius:0 10px 10px 0;font-size:.87rem;margin-block:16px}

/* Los textos legales, ya cada uno en su propia página (28/9). Se leen de
   arriba abajo, sin desplegar nada: el ancho se limita porque una línea de
   ciento y pico caracteres no la lee nadie. */
.legal-texto{max-width:72ch;font-size:.95rem;color:var(--suave)}
.legal-texto h2{font-family:var(--cuerpo);font-size:1rem;color:var(--texto);margin-block:24px 6px}
.legal-texto h2:first-child{margin-top:8px}
.legal-texto p{margin-bottom:12px;line-height:1.65}
/* Los otros cuatro textos, al pie de cada uno: quien llega a la política de
   cookies desde Google tiene que poder ir a la de privacidad sin volver. */
/* Los casos de herencias: la pregunta del cliente en negrita y debajo lo que
   hacemos. Con la barra a la izquierda se lee como una conversación. */
.casos{margin:0;display:grid;gap:16px}
.casos dt{font-weight:600;color:var(--texto);font-size:.96rem}
.casos dd{margin:5px 0 0;padding-left:13px;border-left:2px solid var(--linea);font-size:.9rem;color:var(--suave);line-height:1.65}

/* Las siete herramientas del método, numeradas. El número va en un círculo
   porque el orden importa: así se enseña y así se ejecuta. */
.metodo{list-style:none;counter-reset:paso;margin-top:24px;display:grid;gap:14px}
.metodo li{counter-increment:paso;position:relative;padding:16px 18px 16px 62px;border:1px solid var(--linea);border-radius:12px;background:var(--papel)}
.metodo li::before{content:counter(paso);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--marca);color:#fff;font-family:var(--dato);font-size:.95rem;display:flex;align-items:center;justify-content:center}
.metodo h3{font-size:1.02rem;margin:0 0 4px}
.metodo p{font-size:.92rem;color:var(--suave);margin:0;line-height:1.6}
@media(max-width:560px){
  .metodo li{padding:14px 15px 15px 52px}
  .metodo li::before{left:13px;width:27px;height:27px;font-size:.88rem}
}

/* El panel de «Que me llamen». Es un <dialog>, así que el navegador ya pone el
   fondo oscuro y el cierre con Escape; aquí solo se le da la forma de la casa. */
.dlg{border:0;border-radius:16px;padding:22px;max-width:430px;width:calc(100% - 32px);background:var(--fondo);color:var(--texto);box-shadow:0 18px 50px rgba(0,0,0,.22)}
.dlg::backdrop{background:rgba(12,18,32,.55)}
.dlg-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dlg-cabeza h2{font-size:1.25rem;margin:0}
.dlg-cerrar{border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--suave);padding:0 4px}
.dlg-cerrar:hover{color:var(--texto)}
.dlg .campo{margin-bottom:10px}

/* Los datos de identificación del aviso legal: etiqueta y valor, en dos
   columnas en pantalla ancha y uno debajo de otro en el móvil. */
.ficha-legal{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:18px}
.ficha-legal dt{font-weight:600;color:var(--texto)}
.ficha-legal dd{margin:0}
@media(max-width:640px){
  .ficha-legal{grid-template-columns:1fr;gap:2px}
  .ficha-legal dd{margin-bottom:10px}
}

/* Las tablas de cookies: en el móvil no caben cinco columnas, así que se
   deslizan de lado en su propia caja en vez de romper la página entera. */
.tabla-ancha{overflow-x:auto;margin-block:14px 22px}
.tabla-cookies{border-collapse:collapse;width:100%;min-width:640px;font-size:.84rem}
.tabla-cookies th,.tabla-cookies td{border:1px solid var(--linea);padding:9px 11px;text-align:left;vertical-align:top}
.tabla-cookies th{background:var(--papel);font-weight:600;color:var(--texto)}
.tabla-cookies td:first-child{font-family:var(--dato);word-break:break-word}

.legal-otras{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:34px;padding-top:18px;border-top:1px solid var(--linea)}
.legal-otras a{font-size:.88rem;color:var(--marca);text-decoration:none}
.legal-otras a:hover{text-decoration:underline}

footer{border-top:1px solid var(--linea);background:var(--papel);padding-block:34px 28px;margin-top:20px}
.pie-rejilla{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px}
@media (max-width:760px){.pie-rejilla{grid-template-columns:1fr}}
footer h4{font-family:var(--dato);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);margin-block:0 10px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.89rem}
footer a{text-decoration:none;color:var(--suave)}
footer a:hover{color:var(--marca)}
.copia{display:inline-flex;align-items:center;gap:7px;font-family:var(--dato);font-size:.87rem;background:none;border:0;padding:0;cursor:pointer;color:var(--texto)}
.copia:hover{color:var(--marca)}
.oculto{display:none!important}


/* ==========================================================================
   Una página por sección (26/9)
   --------------------------------------------------------------------------
   Antes esto era UNA página con diez secciones y un menú que hacía scroll.
   Juanlu: «cada pestaña su propia dirección web, así podemos compartir
   directamente una sección y no se pierde la información haciendo tanto
   scroll». Ahora cada sección es una página de verdad, y cada vivienda tiene la
   suya: ese es el enlace que se le manda a un cliente por WhatsApp.

   Esta hoja se pega detrás de estilo.css al montar el sitio (un solo fichero
   para el navegador, dos para quien lo edita).
   ========================================================================== */

/* El logo de verdad, no el nombre escrito a mano (Juanlu, 26/9). */
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo img{height:38px;width:auto;display:block}
.logo-pie{height:34px;width:auto;display:block}
@media (max-width:760px){.logo img{height:30px}}

/* En oscuro el logo es azul marino sobre fondo azul marino y desaparece: se le
   pone su propio papel blanco debajo. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .logo-pie{background:#fff;border-radius:9px;padding:5px 10px;box-sizing:content-box}
}
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .logo-pie{background:#fff;border-radius:9px;padding:5px 10px;box-sizing:content-box}

.saltar{position:absolute;left:-9999px;top:0;background:var(--cobalto);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.saltar:focus{left:0}

/* ---------- las pestañas, en una línea y siempre a la vista ----------
   Juanlu, 26/9: «que en vez de ese menú oculto estuvieran las pestañas
   ordenadas en una línea en la parte superior, y que se viera siempre en todas
   las páginas». Así son un clic desde cualquier sitio, y de paso se ve de un
   vistazo TODO lo que hay — que es la mitad del trabajo de un menú.

   En el móvil se reparten en varias líneas antes que esconderse o hacer
   arrastrar: nueve pestañas en una tira horizontal tampoco se ven, porque nadie
   sabe que hay más cosas a la derecha. */
nav.menu{border-top:1px solid var(--linea);background:color-mix(in srgb,var(--fondo) 60%,transparent)}
.menu-linea{display:flex;flex-wrap:wrap;gap:2px;padding-block:6px}
nav.menu a{display:inline-block;padding:7px 11px;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--suave);text-decoration:none;white-space:nowrap}
nav.menu a:hover{color:var(--texto);background:color-mix(in srgb,var(--marca) 9%,transparent)}
nav.menu a[aria-current="page"]{color:#fff;background:var(--cobalto)}
.tel{text-decoration:none;color:var(--texto);font-weight:600;font-size:.92rem;white-space:nowrap;margin-left:auto}

@media (max-width:760px){
  /* Más pequeñas y más juntas, para que las nueve quepan en dos líneas en un
     móvil normal sin que la cabecera se coma media pantalla. */
  nav.menu a{padding:6px 9px;font-size:.81rem}
  .menu-linea{gap:1px;padding-block:5px}
}

/* ---------- cabecera de cada página ---------- */
.cabecera-pagina{padding-block:clamp(28px,5vw,52px) clamp(8px,2vw,16px)}
.cabecera-pagina h1{margin-block:12px 16px;font-size:clamp(2rem,5vw,3.1rem)}
.cabecera-pagina h1 em{font-style:normal;color:var(--realce)}
.migas{font-family:var(--dato);font-size:.78rem;color:var(--suave);padding-block:18px 0}
.migas a{color:var(--suave);text-decoration:none}
.migas a:hover{color:var(--marca);text-decoration:underline}

/* ---------- portada ---------- */
.portada-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(32px,5vw,64px) clamp(18px,3vw,32px)}
@media (max-width:940px){.portada-hero{grid-template-columns:1fr}}
.portada-texto h1{margin-block:14px 18px;font-size:clamp(2.1rem,5.4vw,3.5rem)}
.portada-texto h1 em{font-style:normal;color:var(--realce)}
.portada-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:1/.92;border-radius:var(--r);overflow:hidden}
.portada-mosaico img{width:100%;height:100%;object-fit:cover;display:block;background:var(--linea)}
.portada-mosaico img:first-child{grid-row:span 2}
@media (max-width:940px){.portada-mosaico{aspect-ratio:16/9}}

/* Las cifras del argumentario. Van en <dl> porque son dato y explicación. */
dl.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:clamp(26px,4vw,38px)}
@media (max-width:640px){dl.cifras{grid-template-columns:1fr}}
dl.cifras div{background:var(--papel);padding:16px 15px}
dl.cifras dt{font-family:var(--display);font-size:clamp(1.45rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--marca)}
dl.cifras dd{margin:3px 0 0;font-size:.82rem;color:var(--suave);line-height:1.4}

.titulo-seccion{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.lista-limpia{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.9rem;color:var(--suave)}
.lista-limpia strong{color:var(--texto)}

/* Accesos de la portada */
.rejilla-accesos{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.acceso{display:block;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:20px;text-decoration:none;color:inherit;box-shadow:var(--sombra);position:relative;overflow:hidden;transition:transform .16s,border-color .16s}
.acceso:hover{border-color:var(--marca);transform:translateY(-2px)}
.acceso-num{font-family:var(--dato);font-size:.72rem;color:var(--suave);letter-spacing:.1em}
.acceso h3{margin-top:8px;font-size:1.18rem}
.acceso p{margin-top:7px;font-size:.88rem;color:var(--suave);line-height:1.5}
.acceso::after{content:"→";position:absolute;right:18px;bottom:16px;color:var(--marca);font-size:1.1rem;opacity:0;transform:translateX(-6px);transition:opacity .16s,transform .16s}
.acceso:hover::after{opacity:1;transform:translateX(0)}

/* ---------- la tarjeta, que ahora es un enlace a su página ---------- */
a.casa{text-decoration:none;color:inherit;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
a.casa:hover{transform:translateY(-3px);box-shadow:0 3px 6px rgba(14,24,54,.06),0 18px 40px -18px rgba(14,24,54,.32)}
.casa .marco img{transition:transform .5s ease}
a.casa:hover .marco img{transform:scale(1.045)}
.casa .marco .contador{position:absolute;bottom:10px;left:10px;background:rgba(14,24,54,.78);color:#fff;font-family:var(--dato);font-size:.67rem;padding:3px 8px;border-radius:5px}

/* ---------- ficha de una vivienda ---------- */
.ficha-cabecera{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-block:4px 18px}
.ficha-cabecera .precio{font-size:clamp(1.7rem,4vw,2.4rem)}
.ficha-cabecera h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-top:6px}
.galeria-ficha{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;border-radius:var(--r);overflow:hidden}
.galeria-ficha button{padding:0;border:0;background:var(--linea);cursor:zoom-in;overflow:hidden;position:relative;display:block}
.galeria-ficha img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.galeria-ficha button:hover img{transform:scale(1.05)}
.galeria-ficha button:first-child{grid-row:span 2}
.galeria-ficha button:not(:first-child){aspect-ratio:1}
.galeria-ficha .mas{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,15,36,.62);color:#fff;font-family:var(--display);font-weight:800;font-size:1.1rem;text-align:center;line-height:1.3}
@media (max-width:700px){
  .galeria-ficha{grid-template-columns:1fr 1fr}
  .galeria-ficha button:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
}

/* ---------- visor de fotos a pantalla completa ---------- */
/* Juanlu, 26/9: «quiero un visor de fotos que pueda poner la imagen a pantalla
   completa» y «debería poderse ver todas las fotos del inmueble». La ficha
   enseñaba cinco de las doce que se subían; ahora se suben todas. */
.visor{position:fixed;inset:0;z-index:90;background:rgba(6,9,22,.97);display:grid;grid-template-rows:auto 1fr auto}
.visor[hidden]{display:none}
.visor-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(12px,3vw,24px);color:#fff}
.visor-barra .cuenta-fotos{font-family:var(--dato);font-size:.85rem;color:#C9D0E8}
.visor-lienzo{display:grid;place-items:center;overflow:hidden;position:relative;padding:0 clamp(8px,2vw,20px);min-height:0}
.visor-lienzo img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:99px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.visor-nav:hover{background:rgba(255,255,255,.28)}
.visor-nav.atras{left:clamp(6px,2vw,18px)}
.visor-nav.adelante{right:clamp(6px,2vw,18px)}
.visor-tiras{display:flex;gap:6px;overflow-x:auto;padding:12px clamp(12px,3vw,24px)}
.visor-tiras button{flex:0 0 auto;width:82px;height:58px;border:2px solid transparent;border-radius:7px;overflow:hidden;padding:0;background:none;cursor:pointer;opacity:.5}
.visor-tiras button[aria-current="true"]{border-color:#fff;opacity:1}
.visor-tiras img{width:100%;height:100%;object-fit:cover;display:block}
.visor-cerrar{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:99px;padding:8px 16px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.visor-cerrar:hover{background:rgba(255,255,255,.28)}
@media (max-width:640px){
  .visor-nav{width:40px;height:40px}
  .visor-tiras button{width:62px;height:46px}
}

/* El pie, con su firma */
.pie-firma{font-size:.79rem;margin-top:26px;border-top:1px solid var(--linea);padding-top:16px}

/* «¿Quieres visitarla?»: lo único que se pide en toda la ficha (Juanlu, 26/9).
   En rosa y grande, que es donde tiene que ir el ojo. Sustituye a tres líneas
   pequeñas que decían el departamento y la dirección de la oficina. */
.visitarla{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  /* Del tamaño de un titular, no del de un párrafo: es la única cosa que se
     pide en toda la ficha. En el móvil arranca en 2 rem. */
  font-size:clamp(2rem,6vw,2.6rem);color:var(--realce);
  text-wrap:balance;margin:0 0 18px;
}
/* Los botones de la ficha ocupan el ancho de la tarjeta: en el móvil, dos
   botones a medio ancho se leen como dos cosas sueltas. */
.btn.ancho{width:100%;justify-content:center;text-align:center}

/* En el móvil la cabecera NO se queda pegada al hacer scroll. Las nueve
   pestañas ocupan tres líneas: pegadas se comerían un tercio de la pantalla
   durante toda la visita. Están al principio de cada página, que es lo que
   hacía falta. En el ordenador caben en una línea y sí se quedan. */
@media (max-width:760px){
  header.top{position:static}
}

/* El H1 de las páginas de sección. Antes eran <h2> de una sección: ahora cada
   una es su página y Google lee el H1 para saber de qué va (26/9). Hereda el
   tamaño de h2 para no cambiar el diseño, solo la etiqueta. */
main section h1{font-size:clamp(1.75rem,4vw,2.6rem);margin:0}
main section h1 em{font-style:normal;color:var(--realce)}
.cabecera-pagina h1,.portada-texto h1{margin-block:12px 16px}

/* Las preguntas frecuentes. En plegables para que no sea un muro de texto:
   se lee el titular y se abre la que interese. Google lee el contenido igual,
   esté abierto o cerrado. */
.preguntas h2{margin-bottom:18px}
.preguntas details.legal + details.legal{margin-top:8px}