/* NORTESOL · nortesol.es
   Tipografías propias (las mismas del portal de inmuebles), alojadas aquí:
   la política de seguridad de .htaccess no permite cargarlas de fuera. */
@font-face{font-family:Outfit;src:url(fonts/outfit.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(fonts/dmserif.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{--navy:#041e46;--navy-claro:#0a2d63;--yellow:#ffce08;--ink:#092445;--muted:#56646f;--line:#dce1e5;--paper:#fff;--wash:#f4f6f8;font-family:Outfit,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
a,button,input{touch-action:manipulation}
button{cursor:pointer}
img{max-width:100%}
svg{width:24px;height:24px;flex:none}
h1,h2,h3{margin:0}

a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #2473ad;outline-offset:4px}
.hero a:focus-visible{outline-color:var(--yellow)}

.skip-link{position:absolute;top:-100px;left:16px;padding:14px;background:var(--yellow);color:var(--navy);font-weight:600;z-index:5}
.skip-link:focus{top:12px}

/* ---------- Cabecera ---------- */
/* El azul es el que trae el propio logotipo, para que no se recorte su recuadro. */
.header{background:#011c4a;min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(20px,5vw,60px)}
.brand{position:relative;display:block;width:min(300px,62vw);aspect-ratio:4 / 1;overflow:hidden;flex:none}
.brand img{position:absolute;display:block;width:100%;height:auto;left:0;top:50%;transform:translateY(-44%)}
.header-link{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid #ffffff3d;border-radius:8px;color:#fff;font-size:15px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.header-link:hover{background:#ffffff1f;border-color:#ffffff8a}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:16px 22px;border-radius:8px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-primario{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-primario:hover{background:#ffdc45;border-color:#ffdc45}
.btn-claro{background:#ffffff14;border-color:#ffffff66;color:#fff;justify-content:center}
.btn-claro:hover{background:#ffffff29;border-color:#fff}

/* ---------- Portada ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:min(640px,78vh);padding:clamp(56px,8vw,104px) clamp(20px,5vw,60px);color:#fff;background:var(--navy);overflow:hidden}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#041e46f5 0%,#041e46e8 40%,#041e4699 66%,#02142db8 100%)}
.hero-inner{position:relative;z-index:1;max-width:620px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.8px;font-weight:700;margin:0 0 26px;line-height:1.6;color:#fff}
.eyebrow span{display:block;width:26px;height:3px;background:var(--yellow);flex:none}
h1{font-size:clamp(42px,5vw,70px);line-height:1.08;letter-spacing:-1.6px;font-weight:600}
h1 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-1px;position:relative;z-index:0;white-space:nowrap}
h1 em:after{content:'';height:9px;position:absolute;bottom:6px;left:0;right:-8px;background:var(--yellow);z-index:-1}
.hero .intro{max-width:470px;font-size:18px;line-height:1.7;color:#dbe3ee;margin:22px 0 0}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.acciones .btn{min-width:264px}

/* ---------- Secciones ---------- */
.kicker{font-size:11px;letter-spacing:2.2px;font-weight:700;color:#7d6000;margin:0 0 14px}
.seccion-cabecera{max-width:640px;margin:0 auto 44px;text-align:center}
.seccion-cabecera h2,.zona-texto h2,.avisos-texto h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.6px;line-height:1.14;font-size:clamp(31px,3.4vw,44px)}
.seccion-cabecera p:not(.kicker){margin:16px 0 0;font-size:17px;line-height:1.75;color:var(--muted)}

.servicios{padding:clamp(56px,7vw,96px) clamp(20px,5vw,60px)}
.tarjetas{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tarjeta{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.tarjeta img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.tarjeta-texto{padding:24px 24px 28px}
.tarjeta h3{font-size:21px;font-weight:600;letter-spacing:-.3px}
.tarjeta p{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:var(--muted)}

.zona{position:relative;display:flex;align-items:flex-end;min-height:min(520px,62vh);padding:clamp(40px,6vw,72px) clamp(20px,5vw,60px);color:#fff;background:var(--navy);overflow:hidden}
.zona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zona:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#04122b40 0%,#041735a6 55%,#02142de6 100%)}
.zona-texto{position:relative;z-index:1;max-width:560px}
.zona-texto .kicker{color:var(--yellow)}
.zona-texto p:last-child{margin:18px 0 0;font-size:17px;line-height:1.75;color:#dbe3ee}

/* ---------- Avisos por email ---------- */
.avisos{background:var(--wash);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) clamp(20px,5vw,60px)}
.avisos-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.avisos-texto p:last-child{margin:16px 0 0;font-size:17px;line-height:1.75;color:var(--muted)}
form{max-width:480px}
.email-label{font-size:14.5px;font-weight:600;display:block;margin-bottom:10px}
.email-control{display:flex;align-items:center;border:1px solid #b8c2cd;border-radius:8px;padding:0 17px;gap:12px;background:#fff}
.email-control:focus-within{border-color:var(--navy);box-shadow:0 0 0 2px #041e461a}
.email-control svg{color:#6d7a88;width:20px}
.email-control input{height:58px;width:100%;min-width:0;border:0;background:transparent;color:var(--ink);outline:none;font-size:16px}
.email-control input:focus-visible{outline:none}
.email-control input::placeholder{color:#78828d}
.email-control:has(input:focus-visible){outline:3px solid #2473ad;outline-offset:3px}
.consent{display:flex;align-items:flex-start;gap:12px;margin:18px 0;font-size:14px;line-height:1.6;color:var(--muted);cursor:pointer}
.consent input{width:24px;height:24px;margin:0;accent-color:var(--navy);flex:none}
.consent a{color:var(--ink);text-underline-offset:3px}
.submit{width:100%;background:var(--yellow);border:1px solid var(--yellow);color:var(--navy);min-height:58px;border-radius:8px;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:15px 22px;gap:10px;transition:background .15s}
.submit:hover{background:#ffdc45}
.submit:disabled{cursor:wait;opacity:.65}
.form-note{text-align:center;color:var(--muted);font-size:12.5px;margin:12px 0 0;line-height:1.6}
.launch-note{color:#5f6d7a}
#form-status:empty{display:none}
#form-status{font-size:14px;line-height:1.6;background:#eaf0f7;padding:12px 14px;border-left:3px solid var(--navy);margin:14px 0}
#form-status[data-state=error]{border-color:#a52a20;color:#7a271d;background:#fff5f3}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- Pie ---------- */
footer{padding:28px clamp(20px,5vw,60px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer p{margin:0}
footer div{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- Páginas legales y respuestas del formulario ---------- */
.legal{max-width:760px;margin:60px auto;padding:0 24px;line-height:1.8}
.legal h1{font-size:clamp(32px,4vw,42px);letter-spacing:-1px;font-weight:600}
.legal h2{font-size:21px;margin-top:32px;font-weight:600}
.legal .draft{background:#fff4c4;border-left:3px solid #c79c00;padding:16px}
.legal ul{padding-left:22px}
.back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:22px;font-size:15px}

/* ---------- Adaptación a pantallas pequeñas ---------- */
@media(max-width:1000px){
  .tarjetas{grid-template-columns:1fr 1fr}
  .avisos-inner{grid-template-columns:1fr;gap:34px}
  .avisos-texto{max-width:560px}
  form{max-width:560px}
}
@media(max-width:760px){
  .header{min-height:84px;padding:14px 20px}
  .header-link{padding:0 15px;font-size:14px}
  .hero{min-height:0;padding:48px 22px 52px}
  .hero:after{background:linear-gradient(180deg,#041e46b3 0%,#041e46d9 48%,#02142df0 100%)}
  h1{font-size:clamp(38px,9vw,52px);letter-spacing:-1.2px}
  .hero .intro{font-size:16.5px}
  .acciones{margin-top:28px}
  .acciones .btn{min-width:0;width:100%}
  .tarjetas{grid-template-columns:1fr;gap:20px;max-width:460px}
  .zona{min-height:0;padding:200px 22px 44px}
  .zona img{object-position:center 30%}
  footer{padding:24px 20px}
  footer>span{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- Pantalla para vendedores (portada) ---------- */
.vendedores{padding:clamp(56px,7vw,96px) clamp(20px,5vw,60px);background:var(--navy);color:#fff}
.vendedores .seccion-cabecera p:not(.kicker){color:#c9d4e3}
.vendedores .kicker{color:var(--yellow)}
.ventajas{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ventaja{border:1px solid #ffffff26;border-radius:14px;padding:28px;background:#ffffff0d}
.ventaja-icono{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--yellow);color:var(--navy);margin-bottom:18px}
.ventaja h3{font-size:21px;font-weight:600;letter-spacing:-.3px}
.ventaja p{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:#c9d4e3}
.vendedores-accion{display:flex;justify-content:center;margin-top:36px}

/* ---------- Área del propietario ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.area{background:var(--wash)}
.area-main{min-height:60vh;padding:clamp(28px,5vw,56px) clamp(16px,5vw,60px)}
.area-estado{max-width:620px;margin:40px auto;text-align:center}
.area-estado h1{font-size:clamp(34px,5vw,52px)}
.area-estado h1 em:after{bottom:4px;height:7px}
.area-estado p{font-size:17px;line-height:1.7;color:var(--muted)}
.area-estado .btn{margin-top:10px}
.area-cabecera{max-width:1200px;margin:0 auto 28px}
.area-cabecera h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(34px,4vw,48px);letter-spacing:-.8px}
.area-cabecera p:last-child{margin:10px 0 0;font-size:16.5px;line-height:1.7;color:var(--muted);max-width:640px}
.area-rejilla{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:24px;align-items:start}
#inmuebles{display:grid;gap:24px}
.inmueble{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.inmueble-foto{position:relative;aspect-ratio:16 / 9;background:#e5eaf0}
.inmueble-foto img{display:block;width:100%;height:100%;object-fit:cover}
.inmueble-sin-foto{display:flex;align-items:center;justify-content:center;height:100%;font-weight:700;letter-spacing:3px;color:#aab6c4;background:linear-gradient(135deg,#e9eef4,#dde4ec)}
.inmueble-estado{position:absolute;top:14px;left:14px;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;color:var(--ink)}
.estado-disponible{background:#dff5e8;color:#11663a}
.estado-reservado{background:#fff1c7;color:#7a5500}
.estado-vendido,.estado-alquilado{background:var(--navy);color:#fff}
.inmueble-cuerpo{padding:22px 24px 26px}
.inmueble-ref{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.inmueble-direccion{margin-top:6px;font-size:22px;font-weight:600;letter-spacing:-.3px}
.inmueble-lugar{margin:2px 0 0;color:var(--muted)}
.inmueble-precio{margin:12px 0 0;font-size:26px;font-weight:700;letter-spacing:-.5px}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.cifras p{margin:0;padding:14px;border-radius:10px;background:var(--wash);font-size:15px;color:var(--muted)}
.cifras strong{font-size:24px;color:var(--ink);margin-right:2px}
.agente{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px}
.agente-avatar{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--yellow);font-weight:700;font-size:18px;flex:none}
.agente p{margin:0}
.agente>div{flex:1;min-width:150px}
.agente-etiqueta{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.agente-nombre{font-size:17px;font-weight:600}
.agente-desde{font-size:13.5px;color:var(--muted)}
.agente-cambiar{min-height:44px;padding:0 16px;border-radius:8px;border:1px solid #b8c2cd;background:#fff;color:var(--ink);font-weight:600}
.agente-cambiar:hover{border-color:var(--navy)}
.agente-cambiar:disabled{opacity:.6;cursor:wait}
.agente-pedido{width:100%;font-size:14px;color:#11663a;font-weight:600}
.inmueble h3{margin:24px 0 8px;font-size:16px;font-weight:600}
.lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lista li{padding:12px 0;border-bottom:1px solid var(--line)}
.lista p{margin:0}
.lista-fecha{font-size:14px;color:var(--muted)}
.lista-texto{margin-top:4px!important;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.oferta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oferta-importe{font-size:18px;font-weight:700}
.oferta-estado{padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.oferta-pendiente{background:#fff1c7;color:#7a5500}
.oferta-aceptada{background:#dff5e8;color:#11663a}
.oferta-rechazada{background:#eef1f4;color:var(--muted)}
.vacio{margin:0;color:var(--muted);font-size:15px}

.chat{position:sticky;top:20px;display:flex;flex-direction:column;height:min(640px,calc(100vh - 40px));background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chat-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;background:var(--navy);color:#fff}
.chat-borrar{flex:none;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid #ffffff4d;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:600}
.chat-borrar:hover{background:#ffffff1f}
.chat-borrar:disabled{opacity:.6;cursor:wait}
.chat-cabecera h2{font-size:18px;font-weight:600}
.chat-cabecera p{margin:4px 0 0;font-size:14px;color:#c9d4e3}
.chat-mensajes{list-style:none;margin:0;padding:16px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:var(--wash)}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5}
.msg p{margin:0}
.msg-texto{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-mio{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.msg-nortesol{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.msg-autor{font-size:12px;font-weight:700;color:#7d6000;margin-bottom:2px!important}
.msg-hora{font-size:11.5px;opacity:.7;text-align:right;margin-top:3px!important}
.msg-aviso{align-self:center;max-width:95%;background:#fff1c7;color:#5c4000;font-size:13.5px;text-align:center;border-radius:10px}
.chat-vacio{margin:auto;text-align:center;color:var(--muted);font-size:15px;max-width:260px;line-height:1.6}
.chat-form{display:flex;align-items:flex-end;gap:10px;padding:12px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;min-width:0;min-height:48px;max-height:160px;field-sizing:content;resize:none;padding:12px 14px;border:1px solid #b8c2cd;border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.chat-form textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #041e461a}
.chat-form button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--yellow);color:var(--navy);flex:none}
.chat-form button:disabled{opacity:.6;cursor:wait}
.chat-form svg{width:20px;height:20px}
.chat-estado{margin:0;padding:0 14px 12px;font-size:13.5px;color:#a52a20}
.chat-estado:empty{display:none}
button.header-link{background:transparent;font:inherit;font-size:15px;font-weight:600}

@media(max-width:1000px){
  .area-rejilla{grid-template-columns:1fr}
  .chat{position:static;height:min(560px,80vh)}
}
@media(max-width:760px){
  .ventajas{grid-template-columns:1fr}
  .ventaja{padding:24px}
  .inmueble-cuerpo{padding:18px 18px 22px}
}