/* =====================================================================
   Albor Inmobiliaria · Prediseño de home
   Mediterránea y luminosa: azul mar profundo, arena y naranja valenciano.
   DM Serif Display para titulares, DM Sans para texto e interfaz.
   Firma visual: el sol naciente del logotipo (amanecer del hero y cierre)
   y los arcos mediterráneos en las imágenes de zonas y venta.
   ===================================================================== */
:root{
  --sea:#0F3B4A; --sea-2:#0B2E3A; --sea-3:#17505F;
  --sand:#F2EDE4; --sand-2:#E8E0D2; --sand-3:#F8F5EF;
  --orange:#F28C28; --orange-2:#E27A14; --orange-d:#B85E0A; --orange-tint:#FCEBDA;
  --ink:#142229; --grey:#6A7B82; --grey-t:#56666D;
  --line:rgba(20,34,41,.11); --line-l:rgba(255,255,255,.15);
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad:clamp(20px,4vw,52px); --max:1320px; --hd:84px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --sr-accent:#F28C28; --sr-font:'DM Sans', system-ui, sans-serif;
  --sr-bg:rgba(11,46,58,.97); --sr-radius:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:#fff; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3{text-wrap:balance}
p,blockquote{text-wrap:pretty}
button,input,select,textarea{font:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; font:600 15px/1 var(--sans); padding:16px 26px; border-radius:999px; border:0; cursor:pointer; transition:background .25s, color .25s, box-shadow .25s, transform .3s var(--ease)}
.btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.btn-orange{background:var(--orange); color:var(--ink)}
.btn-orange:hover{background:var(--orange-2)}
.btn-sea{background:var(--sea); color:#fff}
.btn-sea:hover{background:var(--sea-3)}
.btn-white{background:#fff; color:var(--sea)}
.btn-white:hover{background:var(--sand)}
.btn-line{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-line:hover{background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.btn-full{width:100%}
.btn:active{transform:translateY(1px)}
.link-arrow{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15.5px; color:var(--sea); padding-bottom:5px; border-bottom:2px solid var(--orange); white-space:nowrap; transition:gap .3s var(--ease)}
.link-arrow::after{content:""; width:15px; height:15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.link-arrow:hover{gap:14px}
.stars{color:var(--orange); letter-spacing:1.5px; line-height:1}

/* ---------- Logotipo ---------- */
.logo{display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--sea)}
.logo-sun{width:46px; height:32px; overflow:visible; flex:0 0 auto}
.logo-sun .sun-disc{fill:var(--orange)}
.logo-sun .sun-rays{fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round}
.logo-sun .sun-line{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.logo-sun .sun-line-2{opacity:.4}
.logo-txt b{display:block; font-family:var(--serif); font-weight:400; font-size:31px; line-height:.92; letter-spacing:-.012em; color:var(--sea)}
.logo-txt small{display:block; font-size:11.5px; font-weight:500; letter-spacing:.07em; color:var(--grey-t); margin-top:3px}
.logo-light{color:#fff}
.logo-light .logo-txt b{color:#fff}
.logo-light .logo-txt small{color:rgba(255,255,255,.6)}
/* El sol del logotipo sale por el horizonte al cargar la página */
.hd .sun-disc{transform-box:fill-box; animation:sunRise 1.5s .25s var(--ease) both}
.hd .sun-rays path{stroke-dasharray:7; stroke-dashoffset:7; animation:raysIn .6s var(--ease) forwards}
.hd .sun-rays path:nth-child(1){animation-delay:1.25s}
.hd .sun-rays path:nth-child(2),.hd .sun-rays path:nth-child(3){animation-delay:1.38s}
.hd .sun-rays path:nth-child(4),.hd .sun-rays path:nth-child(5){animation-delay:1.5s}
@keyframes sunRise{from{transform:translateY(100%)}to{transform:none}}
@keyframes raysIn{to{stroke-dashoffset:0}}

/* ---------- Cabecera ---------- */
.hd{position:sticky; top:0; z-index:90; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 14px 34px -22px rgba(15,59,74,.4)}
.hd-in{display:flex; align-items:center; gap:28px; height:var(--hd)}
.nav{flex:1; align-self:stretch; display:flex; justify-content:center}
.nav > ul{display:flex; height:100%; gap:2px}
.nav > ul > li{position:relative; display:flex}
.nav > ul > li > a{position:relative; display:flex; align-items:center; gap:5px; padding:0 14px; white-space:nowrap; font-size:15px; font-weight:500; color:var(--ink); transition:color .2s}
.nav > ul > li > a::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--orange); transform:scaleX(0); transition:transform .3s var(--ease)}
.nav > ul > li:hover > a,.nav > ul > li:focus-within > a{color:var(--sea)}
.nav > ul > li:hover > a::after,.nav > ul > li:focus-within > a::after{transform:scaleX(1)}
.chev{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; transition:transform .3s}
.nav li:hover .chev{transform:rotate(180deg)}

/* Megamenú Comprar */
.has-mega{position:static !important}
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--line); box-shadow:0 40px 60px -34px rgba(15,59,74,.42); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .22s, transform .3s var(--ease), visibility 0s .3s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1; visibility:visible; transform:none; transition:opacity .22s, transform .3s var(--ease)}
.mega-in{max-width:var(--max); margin:0 auto; padding:32px var(--pad) 32px; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:clamp(28px,4vw,56px)}
.mega-col h4{font-family:var(--serif); font-size:21px; color:var(--sea); margin-bottom:10px}
.mega-col a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; margin:0 -12px; border-radius:10px; font-size:15.5px; font-weight:500; color:var(--ink); transition:background .2s, color .2s}
.mega-col a small{font-size:12.5px; font-weight:600; color:var(--grey-t); background:var(--sand); padding:3px 9px; border-radius:999px; transition:background .2s}
.mega-col a:hover{background:var(--sand); color:var(--sea)}
.mega-col a:hover small{background:#fff}
.mega-feat{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--sea); color:#fff}
.mega-feat-img{position:relative; display:block; height:168px; overflow:hidden; background:var(--sea-3)}
.mega-feat-img img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.mega-feat:hover .mega-feat-img img{transform:scale(1.05)}
.mega-feat-txt{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 22px 22px}
.mega-feat-txt b{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.1}
.mega-feat-txt > span:not(.link-arrow){font-size:14.5px; color:rgba(255,255,255,.78); line-height:1.5; margin-bottom:8px}
.mega-feat .link-arrow{color:#fff; font-size:14.5px}
.mega-bar{background:var(--sand-3); border-top:1px solid var(--line)}
.mega-bar-in{max-width:var(--max); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap}
.mega-bar p{font-size:14px; font-weight:600; color:var(--sea)}
.mega-bar ul{display:flex; flex-wrap:wrap; gap:8px}
.mega-bar a{display:block; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px; color:var(--ink); transition:border-color .2s, color .2s}
.mega-bar a:hover{border-color:var(--orange); color:var(--sea)}

/* Desplegable Vender */
.drop{position:absolute; top:100%; left:-10px; width:350px; background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; box-shadow:0 34px 60px -30px rgba(15,59,74,.42); padding:10px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .22s, transform .3s var(--ease), visibility 0s .3s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:none; transition:opacity .22s, transform .3s var(--ease)}
.drop a{display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:12px; transition:background .2s}
.drop svg{flex:0 0 auto; width:42px; height:42px; padding:10px; border-radius:50%; background:var(--sand); fill:none; stroke:var(--sea); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:background .2s}
.drop b{display:block; font-weight:600; font-size:15px; color:var(--ink); line-height:1.3}
.drop small{display:block; font-size:13.5px; color:var(--grey-t); line-height:1.4; margin-top:2px}
.drop a:hover{background:var(--sand-3)}
.drop a:hover svg{background:var(--orange-tint)}

/* Acciones de la cabecera */
.hd-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.ico-btn{position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--sea); border:1px solid var(--line); transition:border-color .2s, background .2s}
.ico-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ico-btn:hover{border-color:var(--sea); background:var(--sand-3)}
.fav-count{position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--orange); color:var(--ink); font-size:11px; font-weight:700; line-height:19px; text-align:center; box-shadow:0 0 0 2px #fff; transform:scale(0); transition:transform .3s var(--ease)}
.fav-count.is-on{transform:scale(1)}
.fav-count.pop{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
.hd-sr .sr-trigger{font-size:14px; font-weight:600; color:var(--sea); --sr-dot-ring:#fff}
.hd-cta{padding:14px 22px; font-size:14.5px}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:50%; cursor:pointer; align-items:center; justify-content:center; padding:0}
.burger span{position:relative; width:18px; height:2px; border-radius:2px; background:var(--sea); transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--sea); transition:transform .3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1380px){
  .hd-in{gap:18px}
  .nav > ul > li > a{padding:0 10px; font-size:14.5px}
  .nav > ul > li > a::after{left:10px; right:10px}
  .hd-actions{gap:8px}
  .ico-btn{width:40px; height:40px}
  .hd-cta{padding:13px 18px}
}
@media (max-width:1240px){
  .nav,.hd-sr,.ico-user{display:none}
  .burger{display:inline-flex}
  .hd-actions{margin-left:auto}
}
@media (max-width:560px){
  :root{--hd:70px}
  .hd-cta{display:none}
  .logo-sun{width:40px; height:28px}
  .logo-txt b{font-size:27px}
  .logo-txt small{font-size:10.5px}
}

/* ---------- Menú móvil ---------- */
.mmenu{position:fixed; inset:0; z-index:85; background:#fff; padding-top:var(--hd); overflow:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .4s}
.menu-open .mmenu{opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .4s var(--ease)}
.menu-open body{overflow:hidden}
.mmenu-in{max-width:640px; margin:0 auto; padding:8px var(--pad) 48px}
.macc{border-bottom:1px solid var(--line)}
.macc button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; padding:17px 0; font-family:var(--serif); font-size:26px; color:var(--sea); cursor:pointer}
.macc button:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.macc button svg{width:22px; height:22px; fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; transition:transform .3s}
.macc.is-open button svg{transform:rotate(180deg)}
.macc-panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.macc-panel a{display:flex; justify-content:space-between; align-items:center; padding:10px 4px 10px 16px; font-size:16px; color:var(--ink); border-left:2px solid var(--orange)}
.macc-panel a small{font-size:13px; color:var(--grey-t)}
.macc-panel a:last-child{margin-bottom:18px}
.mlink{display:block; padding:17px 0; font-family:var(--serif); font-size:26px; color:var(--sea); border-bottom:1px solid var(--line)}
.mquick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px}
.mquick a{display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; font-size:15px; font-weight:500; color:var(--ink)}
.mquick svg{width:20px; height:20px; fill:none; stroke:var(--sea); stroke-width:1.7; flex:0 0 auto}
.mbtn{width:100%; margin-top:14px}
.mphone{margin-top:14px; text-align:center; font-size:15px; color:var(--grey-t)}
.mphone a{color:var(--sea); font-weight:700}
.mmenu .srm{--srm-line:var(--line)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; color:#fff; background:var(--sea-2)}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 58%; animation:heroImg 9s var(--ease) both}
@keyframes heroImg{from{transform:scale(1.08)}to{transform:none}}
.hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,34,44,.84) 0%, rgba(8,34,44,.6) 40%, rgba(8,34,44,.12) 78%, rgba(8,34,44,0) 100%), linear-gradient(0deg, rgba(8,34,44,.78) 0%, rgba(8,34,44,0) 48%), linear-gradient(180deg, rgba(8,34,44,.3) 0%, rgba(8,34,44,0) 22%)}
/* Amanecer: la imagen se ilumina al cargar */
.hero-dawn{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, #082430 0%, #0B2E3A 55%, #3A3A3E 100%); pointer-events:none; animation:dawn 2.4s .1s cubic-bezier(.4,0,.2,1) both}
@keyframes dawn{0%{opacity:.94}100%{opacity:0}}
.hero-in{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; min-height:min(860px, calc(100vh - var(--hd))); min-height:min(860px, calc(100svh - var(--hd))); padding-top:clamp(64px,10vh,130px); padding-bottom:clamp(34px,5vh,56px)}
.hero h1{font-family:var(--serif); font-size:clamp(40px,4.7vw,72px); line-height:1.03; letter-spacing:-.012em; max-width:15.5em; text-shadow:0 2px 30px rgba(0,0,0,.18)}
.hero h1 > span{display:block; text-wrap:balance}
/* Sin parpadeo antes de partir el titular en palabras; si el script no llega, aparece igualmente */
html.js .hero h1:not(.is-split){opacity:0; animation:h1Show .01s 2.5s forwards}
@keyframes h1Show{to{opacity:1}}
/* La segunda frase entra tras una pausa */
.hero h1 .h1-b .swi{transition-delay:calc(var(--split-delay,0ms) + 420ms + var(--wi,0) * 55ms)}
.hero-sub{margin-top:20px; max-width:600px; font-size:clamp(17px,1.3vw,19.5px); line-height:1.55; color:rgba(255,255,255,.88); animation:rise 1s 1.2s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}

.search-wrap{position:relative; margin-top:32px; max-width:1120px}
.search{ background:#fff; color:var(--ink); border-radius:20px; box-shadow:0 34px 70px -28px rgba(0,0,0,.6); animation:rise 1s 1.35s var(--ease) both}
.search-tabs{position:relative; display:flex; gap:2px; padding:6px 12px 0; border-bottom:1px solid var(--line)}
.stab-ind{position:absolute; left:0; bottom:-1px; width:0; height:3px; border-radius:3px 3px 0 0; background:var(--orange); opacity:0; transition:transform .5s var(--ease), width .5s var(--ease)}
.has-ind .stab-ind{opacity:1}
.has-ind .stab.is-on::after{display:none}
.stab{position:relative; border:0; background:none; cursor:pointer; padding:14px 14px 13px; font-weight:600; font-size:15px; color:var(--grey-t); transition:color .2s; border-radius:8px 8px 0 0}
.stab:hover{color:var(--sea)}
.stab.is-on{color:var(--sea)}
.stab.is-on::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--orange)}
.stab:focus-visible{outline-offset:-2px}
.search-row{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr auto; align-items:stretch; padding:10px}
.sf{position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; padding:10px 18px; border-radius:12px; cursor:pointer; transition:background .2s}
.sf + .sf::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:var(--line)}
.sf:hover,.sf:focus-within{background:var(--sand-3)}
.sf:hover::before,.sf:hover + .sf::before,.sf:focus-within::before,.sf:focus-within + .sf::before{opacity:0}
.sf-label{font-size:12.5px; font-weight:600; color:var(--grey-t)}
.sf-ctrl{display:flex; align-items:center; gap:8px; min-width:0}
.sf-ctrl svg{width:18px; height:18px; fill:none; stroke:var(--orange-d); stroke-width:1.9; flex:0 0 auto}
.sf input,.sf select{width:100%; min-width:0; border:0; outline:0; background:transparent; padding:0; font-size:16px; font-weight:500; color:var(--ink); -webkit-appearance:none; appearance:none; text-overflow:ellipsis; cursor:pointer}
.sf input{cursor:text}
.sf input::placeholder{color:#7C8A90; opacity:1}
.sf select{padding-right:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3B4A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center/15px no-repeat}
.search-btn{margin-left:8px; padding:0 28px; min-height:62px; border-radius:14px; font-size:16px}
.search-btn svg{width:20px; height:20px; stroke-width:2.2}

.hero-trust{display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; margin-top:22px; font-size:15px; color:rgba(255,255,255,.85)}
/* Los datos de confianza entran escalonados a los 2 s (animación CSS: sin parpadeos y siempre llega al estado final) */
.hero-trust li{animation:rise .9s var(--ease) both}
.hero-trust li:nth-child(1){animation-delay:2.1s}
.hero-trust li:nth-child(2){animation-delay:2.3s}
.hero-trust li:nth-child(3){animation-delay:2.5s}
.hero-trust li{display:flex; align-items:center; gap:10px; padding:0 26px; border-left:1px solid rgba(255,255,255,.24)}
.hero-trust li:first-child{padding-left:0; border-left:0}
.hero-trust b{color:#fff; font-weight:600}
.hero-trust svg{width:20px; height:20px; fill:none; stroke:var(--orange); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.hero-trust .stars{font-size:15px}

@media (max-width:1240px){
  .sf{padding:10px 14px}
  .hero-trust{gap:10px 30px}
  .hero-trust li{padding:0; border-left:0}
}
@media (max-width:1000px){
  .hero-trust{flex-direction:column; align-items:flex-start; gap:12px}
  .search-row{grid-template-columns:1fr 1fr; gap:8px}
  .sf-loc{grid-column:1 / -1}
  .sf{background:var(--sand-3)}
  .sf + .sf::before{display:none}
  .search-btn{margin-left:0; min-height:58px}
}
@media (max-width:760px){
  .hero::before{background:linear-gradient(180deg, rgba(8,34,44,.62) 0%, rgba(8,34,44,.55) 35%, rgba(8,34,44,.82) 70%, rgba(8,34,44,.94) 100%)}
  .hero-in{min-height:0; padding-top:56px; padding-bottom:32px}
  .hero h1{font-size:clamp(34px,9.4vw,48px)}
}
@media (max-width:560px){
  .sf:nth-child(4),.search-btn{grid-column:1 / -1}
  .search-tabs{padding:4px 6px 0}
  .stab{padding:13px 11px 12px; font-size:14.5px}
  .stab.is-on::after{left:11px; right:11px}
  .search-btn{width:100%}
}

/* ---------- Encabezados de sección ---------- */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:22px 40px; margin-bottom:clamp(30px,3.5vw,46px)}
.sec-head h2,.sell-copy h2,.why-head h2,.rev-head h2{font-family:var(--serif); font-size:clamp(34px,3.6vw,52px); line-height:1.06; letter-spacing:-.01em; color:var(--sea)}
.sec-head p{margin-top:12px; font-size:17px; color:var(--grey-t); max-width:54ch}

/* ---------- Accesos rápidos ---------- */
.cats{padding:clamp(56px,6.5vw,88px) 0 0}
.cats-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px 30px; margin-bottom:26px}
.cats-head h2{font-family:var(--serif); font-size:clamp(28px,2.5vw,36px); line-height:1.1; color:var(--sea)}
.cats-head p{font-size:16px; color:var(--grey-t); max-width:44ch}
.cats-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.cat{position:relative; display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:22px 20px 20px; background:#fff; border:1px solid var(--line); border-radius:18px; transition:border-color .25s, box-shadow .35s, transform .35s var(--ease)}
.cat-ico{position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--sand); color:var(--sea); margin-bottom:18px; transition:color .3s}
/* Al pasar el ratón, el círculo se llena de naranja de abajo arriba, como un amanecer */
.cat-ico::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--orange); transform:translateY(101%); transition:transform .5s var(--ease)}
.cat:hover .cat-ico::before{transform:none}
.cat:hover .cat-ico{color:var(--ink)}
.cat:hover .cat-ico .ico-acc{stroke:#fff}
.cat-ico svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cat-ico .ico-acc{stroke:var(--orange-d)}
.cat b{font-weight:600; font-size:16.5px; line-height:1.3; color:var(--ink)}
.cat small{margin-top:3px; font-size:14px; color:var(--grey-t)}
.cat::after{content:""; position:absolute; top:24px; right:20px; width:18px; height:18px; background:var(--orange-d); opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .35s var(--ease); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.cat:hover{border-color:var(--orange); box-shadow:0 20px 40px -28px rgba(15,59,74,.45); transform:translateY(-3px)}
.cat:hover::after{opacity:1; transform:none}
@media (max-width:1100px){ .cats-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .cats-grid{grid-template-columns:1fr 1fr; gap:10px}
  .cat{padding:18px 16px 16px}
  .cat-ico{width:46px; height:46px; margin-bottom:14px}
  .cat-ico svg{width:26px; height:26px}
  .cat b{font-size:15.5px}
}

/* ---------- Viviendas destacadas ---------- */
.listings{padding:clamp(72px,8vw,112px) 0}
.seg{display:inline-flex; padding:5px; background:var(--sand); border-radius:999px; flex:0 0 auto}
.seg button{border:0; background:none; cursor:pointer; padding:11px 22px; border-radius:999px; font-weight:600; font-size:15px; color:var(--grey-t); transition:color .2s}
.seg button:hover{color:var(--sea)}
.seg .is-on{background:#fff; color:var(--sea); box-shadow:0 6px 16px -8px rgba(15,59,74,.4)}
.list-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 22px}
/* Cada tarjeta ocupa 5 filas de la rejilla (subgrid): precio, título, zona e iconos quedan alineados entre tarjetas aunque un título ocupe dos líneas */
.card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; min-width:0; margin-bottom:40px}
.card-media{position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--sand)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.badge{position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap}
.badge svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.badge-sea{background:var(--sea); color:#fff}
.badge-orange{background:var(--orange); color:var(--ink)}
.badge-drop{background:#fff; color:var(--ink)}
.badge-drop svg{stroke:var(--orange-d)}
.badge-sand{background:var(--sand); color:var(--sea)}
.fav{position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); cursor:pointer; box-shadow:0 6px 16px -8px rgba(0,0,0,.4); transition:transform .25s var(--ease)}
.fav svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; transition:fill .2s, stroke .2s}
.fav:hover{transform:scale(1.08)}
.fav[aria-pressed="true"] svg{fill:var(--orange); stroke:var(--orange)}
.fav[aria-pressed="true"]{animation:heart .45s var(--ease)}
@keyframes heart{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.card-photos{position:absolute; z-index:2; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; background:rgba(8,30,38,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:12.5px; font-weight:600; line-height:1.2}
.card-photos svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8}
.card-body{display:contents}
.card-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; padding:16px 2px 0}
.card-price b{font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.1; color:var(--sea); letter-spacing:-.005em}
.card-price small{font-size:13.5px; color:var(--grey-t)}
.card-price s{font-size:14px; color:var(--grey-t)}
.card-price .from{font-size:14px; color:var(--grey-t); margin-right:-4px}
.card h3{margin:4px 2px 0; font-size:16.5px; font-weight:600; line-height:1.35; color:var(--ink)}
.card-zone{display:flex; align-items:center; gap:6px; margin:6px 2px 14px; font-size:15px; color:var(--grey-t)}
.card-zone svg{width:16px; height:16px; fill:none; stroke:var(--grey); stroke-width:1.8; flex:0 0 auto}
.card-feats{display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px 16px; margin:0 2px; padding-top:14px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink)}
.card-feats li{display:flex; align-items:center; gap:7px; white-space:nowrap}
.card-feats svg{width:19px; height:19px; fill:none; stroke:var(--sea); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.list-foot{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 28px; margin-top:clamp(4px,1.2vw,20px); text-align:center}
.list-foot p{font-size:16px; color:var(--grey-t)}
.list-foot p a{color:var(--sea); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:4px}
@media (max-width:1380px){ .card-feats{gap:6px 13px; font-size:14px} .card-feats svg{width:18px; height:18px} }
@media (max-width:1199px){ .list-grid{grid-template-columns:repeat(2,1fr)} .card-media{aspect-ratio:3/2} }
@media (max-width:639px){
  .list-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; column-gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 10px; scroll-padding-left:var(--pad); scrollbar-width:none}
  .list-grid::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start; margin-bottom:0}
  .list-foot{margin-top:32px}
  .card-media{aspect-ratio:4/3}
  .card-price b{font-size:25px}
  .sec-head .seg{width:100%}
  .seg button{flex:1}
}

/* ---------- Zonas (arcos mediterráneos) ---------- */
.zones{padding:clamp(72px,8vw,112px) 0; background:var(--sand)}
.zone-row{display:grid; grid-template-columns:repeat(5,1fr); column-gap:clamp(14px,1.8vw,26px)}
/* Arco, nombre y descripción en filas compartidas (subgrid): los textos quedan alineados */
.zone{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; text-align:center; color:var(--ink)}
.zone-arch{position:relative; display:block; aspect-ratio:3/4; border-radius:50% 50% 18px 18px / 37.5% 37.5% 18px 18px; overflow:hidden; background:var(--sand-2); isolation:isolate}
.zone-arch img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.zone-arch::after{content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(0deg, rgba(8,34,44,.45), transparent); pointer-events:none}
.zone-count{position:absolute; left:50%; bottom:16px; z-index:1; transform:translateX(-50%); padding:7px 14px; border-radius:999px; background:#fff; color:var(--sea); font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; transition:background .25s, color .25s}
.zone:hover .zone-arch img{transform:scale(1.06)}
.zone:hover .zone-count{background:var(--orange); color:var(--ink)}
.zone h3{margin-top:18px; font-family:var(--serif); font-size:clamp(20px,1.55vw,24px); line-height:1.15; color:var(--sea)}
.zone p{margin:8px auto 0; max-width:26ch; font-size:15px; line-height:1.5; color:var(--grey-t)}
@media (max-width:1023px){
  .zone-row{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:31%; column-gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 10px; scroll-padding-left:var(--pad); scrollbar-width:none}
  .zone-row::-webkit-scrollbar{display:none}
  .zone{scroll-snap-align:start}
  .zone h3{font-size:22px}
}
@media (max-width:639px){ .zone-row{grid-auto-columns:56%} }

/* ---------- Vender ---------- */
.sell{padding:clamp(80px,9vw,128px) 0; overflow-x:clip}
.sell-in{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px,6vw,96px); align-items:stretch}
/* La imagen ocupa exactamente la altura de la columna de texto: bordes superior e inferior alineados */
.sell-media{position:relative; margin:0; min-height:100%}
.sell-img{position:absolute; inset:0; overflow:hidden; border-radius:26px; background:var(--sand)}
.sell-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%}
.sell-tag{position:absolute; z-index:1; left:-28px; bottom:56px; display:flex; align-items:center; gap:14px; padding:16px 24px 16px 16px; background:#fff; border-radius:18px; box-shadow:0 26px 50px -22px rgba(15,59,74,.45)}
.sell-tag-ico{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--orange); flex:0 0 auto}
.sell-tag-ico svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.sell-tag b{display:block; font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.3}
.sell-tag small{display:block; font-size:13.5px; color:var(--grey-t)}
.sell-copy h2{max-width:19ch}
.sell-lead{margin-top:18px; font-size:17.5px; color:var(--grey-t); max-width:52ch}
.val{display:grid; grid-template-columns:150px 1fr; gap:12px; margin-top:30px; padding:22px; background:var(--sand); border-radius:22px}
.vf{display:flex; flex-direction:column; gap:6px; min-width:0}
.vf > span:first-child{font-size:13px; font-weight:600; color:var(--ink)}
.vf-addr{grid-column:1 / -1}
.vf-ctrl{display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; background:#fff; border:1.5px solid transparent; border-radius:12px; transition:border-color .2s}
.vf-ctrl:focus-within{border-color:var(--orange)}
.vf-ctrl input{width:100%; min-width:0; border:0; outline:0; background:transparent; padding:0; font-size:15.5px; color:var(--ink)}
.vf-ctrl input::placeholder{color:#7C8A90; opacity:1}
.vf-ctrl svg{width:18px; height:18px; fill:none; stroke:var(--orange-d); stroke-width:1.9; flex:0 0 auto}
.vf-ctrl i{font-style:normal; font-size:14px; color:var(--grey-t)}
.val-btn{grid-column:1 / -1; min-height:54px; margin-top:4px}
.val-note{grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--grey-t); text-align:center}
.val-note svg{width:15px; height:15px; fill:none; stroke:var(--grey); stroke-width:1.8; flex:0 0 auto}
.sell-stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
.sell-stats > div{padding-right:18px}
.sell-stats > div + div{padding-left:22px; border-left:1px solid var(--line)}
.sell-stats b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(38px,3.6vw,54px); line-height:1; color:var(--sea); white-space:nowrap}
.sell-stats span{display:block; margin-top:10px; font-size:15px; line-height:1.45; color:var(--grey-t); max-width:17ch}
@media (max-width:960px){
  .sell-in{grid-template-columns:1fr}
  .sell-media{min-height:0}
  .sell-copy h2{max-width:24ch}
  .sell-img{position:relative; inset:auto; border-radius:22px}
  .sell-media img{position:static; height:auto; aspect-ratio:16/10}
  .sell-tag{left:16px; bottom:16px}
}
@media (max-width:520px){
  .val{grid-template-columns:112px 1fr; padding:16px}
  .val-note{justify-content:flex-start; text-align:left}
  .sell-stats{grid-template-columns:1fr; gap:22px}
  .sell-stats > div,.sell-stats > div + div{padding:0; border:0; display:flex; align-items:baseline; gap:16px}
  .sell-stats b{min-width:96px}
  .sell-stats span{margin-top:0; max-width:none}
  .sell-media{margin-bottom:34px}
  .sell-media img{aspect-ratio:4/3}
  .sell-tag{left:12px; right:12px; bottom:0; transform:translateY(50%); padding:12px 16px 12px 12px}
  .sell-tag-ico{width:42px; height:42px}
}

/* ---------- Por qué Albor ---------- */
.why{position:relative; padding:clamp(80px,9vw,128px) 0; background:var(--sea); color:#fff; overflow:hidden}
.why-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center}
.why-head h2{color:#fff; max-width:none}
.why-head p{margin-top:20px; font-size:17.5px; color:rgba(255,255,255,.78); max-width:46ch}
.why-head .btn{margin-top:30px}
.why-grid{display:grid; grid-template-columns:1fr 1fr}
.why-grid li{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; padding:32px 32px 36px 0; border-top:1px solid var(--line-l)}
.why-grid li:nth-child(even){padding:32px 0 36px 32px; border-left:1px solid var(--line-l)}
.why-grid li:nth-child(n+3){border-bottom:1px solid var(--line-l)}
.why-ico{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:rgba(242,140,40,.14); color:var(--orange); margin-bottom:22px}
.why-ico svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.why-grid h3{font-family:var(--serif); font-size:clamp(23px,2vw,27px); line-height:1.15}
.why-grid p{margin-top:10px; font-size:16px; color:rgba(255,255,255,.78); max-width:36ch}
@media (max-width:960px){ .why-in{grid-template-columns:1fr} .why-head h2{max-width:22ch} }
@media (max-width:600px){
  .why-grid{grid-template-columns:1fr}
  .why-grid li,.why-grid li:nth-child(even){padding:26px 0 28px; border-left:0; border-bottom:0}
  .why-grid li:last-child{border-bottom:1px solid var(--line-l)}
  .why-ico{width:50px; height:50px; margin-bottom:16px}
}

/* ---------- Testimonios ---------- */
.reviews{padding:clamp(80px,9vw,128px) 0; background:var(--sand)}
.rev-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:26px 40px; margin-bottom:clamp(32px,4vw,52px)}
.rev-head h2{max-width:22ch}
.rev-score{display:flex; align-items:center; gap:16px; max-width:100%; padding:16px 24px 16px 20px; background:#fff; border-radius:18px; flex:0 1 auto}
.rev-score > b{font-family:var(--serif); font-weight:400; font-size:54px; line-height:1; color:var(--sea)}
.rev-score .stars{font-size:18px}
.rev-score p{margin-top:6px; font-size:14px; color:var(--grey-t)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 22px}
/* Etiqueta, estrellas, cita y firma en filas compartidas: alturas iguales y pies alineados */
.rev{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; margin:0; padding:30px 30px 26px; background:#fff; border-radius:22px}
.rev-ctx{display:inline-flex; justify-self:start; align-self:start; align-items:center; gap:8px; padding:8px 14px 8px 11px; border-radius:999px; background:var(--orange-tint); color:#8A4508; font-size:13.5px; font-weight:600; line-height:1.3}
.rev-ctx svg{width:17px; height:17px; fill:none; stroke:var(--orange-d); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.rev .stars{margin-top:22px; font-size:16px}
.rev blockquote{margin:12px 0 0; font-size:17px; line-height:1.65; color:var(--ink)}
.rev figcaption{display:flex; align-items:center; align-self:start; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
.ini{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sea); color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em; flex:0 0 auto}
.rev figcaption b{display:block; font-size:15.5px; font-weight:600; line-height:1.3}
.rev figcaption small{display:block; font-size:13.5px; color:var(--grey-t)}
@media (max-width:1000px){ .rev-grid{grid-template-columns:1fr} .rev + .rev{margin-top:18px} .rev blockquote{max-width:64ch} }
@media (max-width:520px){ .rev{padding:24px 22px 22px} .rev-score > b{font-size:46px} }

/* ---------- Prensa ---------- */
.press{padding:40px 0; border-bottom:1px solid var(--line)}
.press-in{display:flex; align-items:center; flex-wrap:wrap; gap:22px 56px}
.press-in > p{font-size:14.5px; color:var(--grey-t); flex:0 0 auto}
.press ul{flex:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 36px; color:#7A898F}
.press li{white-space:nowrap; line-height:1; transition:color .3s}
.press li:hover{color:var(--sea)}
.m-lp{font-family:var(--serif); font-size:25px}
.m-lev{font-weight:800; font-size:21px; letter-spacing:-.035em}
.m-esp{font-family:var(--serif); font-style:italic; font-size:25px}
.m-exp{font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-weight:700; font-size:22px}
.m-apt{font-weight:700; font-size:22px; letter-spacing:-.02em}
.m-vp{font-size:21px; letter-spacing:-.025em}
.m-vp b{font-weight:800}
@media (max-width:1180px){ .press-in{flex-direction:column; text-align:center} .press ul{display:grid; grid-template-columns:repeat(3,auto); justify-content:center; justify-items:center; gap:22px 56px} }
@media (max-width:560px){ .press ul{grid-template-columns:repeat(2,auto); gap:20px 36px} }

/* ---------- Llamada final ---------- */
.final{position:relative; padding:clamp(80px,9vw,128px) 0 clamp(96px,10vw,140px); background:var(--sea); color:#fff; overflow:hidden}
.final-sun{position:absolute; bottom:0; right:-6%; width:min(1100px,90%); height:auto; pointer-events:none}
.final-sun .fs-disc{fill:var(--orange); opacity:.95}
.final-sun .fs-ring{fill:none; stroke:var(--orange); stroke-width:1.2; opacity:calc(.28 * var(--rise,1))}
.final-sun .fs-rise{transform:translateY(calc((1 - var(--rise,1)) * 175px)); will-change:transform}
.fs-rays line{stroke:var(--orange); stroke-width:2.4; stroke-linecap:round; opacity:.85}
html.js .fs-rays line{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s var(--ease); transition-delay:calc(var(--r,0) * 45ms)}
html.js .final-sun.is-risen .fs-rays line{stroke-dashoffset:0}
.final::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.18)}
.final-in{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,96px); align-items:center}
.final h2{font-family:var(--serif); font-size:clamp(44px,5.4vw,80px); line-height:1.02; letter-spacing:-.012em}
.final-copy > p:not(.final-hours){margin-top:20px; font-size:18.5px; line-height:1.6; color:rgba(255,255,255,.82); max-width:46ch}
.final-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.final-hours{margin-top:18px; font-size:15px; color:rgba(255,255,255,.66)}
.callback{background:#fff; color:var(--ink); border-radius:24px; padding:clamp(26px,3vw,36px); box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.callback h3{font-family:var(--serif); font-size:30px; line-height:1.1; color:var(--sea)}
.cb-need{border:0; padding:0; margin:18px 0 16px; min-width:0}
.cb-need legend{float:left; width:100%; padding:0; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--ink)}
.cb-need label{position:relative; display:inline-block; margin:0 6px 6px 0; cursor:pointer}
.cb-need input{position:absolute; opacity:0; width:1px; height:1px}
.cb-need span{display:inline-block; padding:10px 18px; border-radius:999px; border:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--ink); transition:background .2s, color .2s, border-color .2s}
.cb-need label:hover span{border-color:var(--sea)}
.cb-need input:checked + span{background:var(--sea); border-color:var(--sea); color:#fff}
.cb-need input:focus-visible + span{outline:2px solid var(--orange); outline-offset:2px}
.cf{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.cf span{font-size:13px; font-weight:600; color:var(--ink)}
.cf input{height:50px; padding:0 14px; border:1.5px solid transparent; border-radius:12px; background:var(--sand-3); font-size:15.5px; color:var(--ink); outline:0; transition:border-color .2s, background .2s}
.cf input::placeholder{color:#7C8A90; opacity:1}
.cf input:focus{border-color:var(--orange); background:#fff}
.check{display:flex; align-items:flex-start; gap:10px; margin:6px 0 18px; font-size:13.5px; line-height:1.45; color:var(--grey-t); cursor:pointer}
.check input{margin:2px 0 0; accent-color:var(--sea); flex:0 0 auto}
.check a{text-decoration:underline; text-underline-offset:2px}
.callback .btn-full{min-height:54px}
@media (max-width:960px){
  .final-in{grid-template-columns:1fr}
  .final-sun{right:auto; left:50%; transform:translateX(-50%); width:min(900px,160%)}
}
@media (max-width:520px){
  .final-actions .btn{width:100%}
  .cb-need{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
  .cb-need legend{grid-column:1 / -1; margin-bottom:2px}
  .cb-need label{margin:0}
  .cb-need span{display:block; padding:10px 6px; text-align:center}
}

/* ---------- Pie ---------- */
.ft{background:var(--sea-2); color:rgba(255,255,255,.7); font-size:15px; padding:clamp(60px,7vw,88px) 0 28px}
.ft-top{display:grid; grid-template-columns:repeat(4,1fr); gap:0 36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand{grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:20px 44px; margin-bottom:40px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand > p{max-width:32ch; font-size:15px; line-height:1.6}
.ft-contact{display:flex; flex-wrap:wrap; gap:14px 32px; margin-left:auto; font-size:15px; line-height:1.5}
.ft-contact li{display:flex; align-items:flex-start; gap:10px}
.ft-contact svg{width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--orange); stroke-width:1.8; flex:0 0 auto}
/* Columnas con subgrid: si un título ocupa dos líneas, las listas siguen arrancando a la misma altura */
.ft-col{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0}
.ft h4{font-family:var(--serif); font-size:19px; line-height:1.2; color:#fff; margin-bottom:16px}
.ft h4 button{all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; cursor:default}
.ft h4 button svg{display:none; width:20px; height:20px; fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; transition:transform .3s; flex:0 0 auto}
.ft-col ul{display:grid; align-content:start; gap:9px}
.ft-col [data-acc-panel]{max-height:none !important; overflow:visible}
.ft-col a{font-size:15px; line-height:1.45}
.ft a{transition:color .2s}
.ft a:hover{color:#fff}
.ft-mid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 30px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.55)}
.ft-bot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; padding-top:22px; font-size:13px; color:rgba(255,255,255,.5)}
.ft-bot nav{display:flex; gap:20px; margin-right:auto}
@media (max-width:1100px){ .ft-top{grid-template-columns:repeat(2,1fr)} .ft-contact{margin-left:0; width:100%} .ft-col:nth-child(2),.ft-col:nth-child(3){margin-bottom:36px} }
@media (max-width:700px){
  .ft-top{grid-template-columns:1fr; gap:0; padding-bottom:8px; border-bottom:0}
  .ft-brand{flex-direction:column; align-items:flex-start; margin-bottom:8px}
  .ft-contact{flex-direction:column}
  .ft-col,.ft-col:nth-child(2),.ft-col:nth-child(3){display:block; grid-row:auto; margin-bottom:0; border-bottom:1px solid rgba(255,255,255,.12)}
  .ft-col h4{margin:0}
  .ft h4 button{padding:18px 0; cursor:pointer}
  .ft h4 button:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
  .ft h4 button svg{display:block}
  .ft-col.is-open h4 button svg{transform:rotate(180deg)}
  .ft-col [data-acc-panel]{max-height:0 !important; overflow:hidden; transition:max-height .45s var(--ease)}
  .ft-col.is-open [data-acc-panel]{max-height:420px !important}
  .ft-col li:last-child{padding-bottom:20px}
  .ft-mid{border-top:0}
}


/* =====================================================================
   Animaciones y microinteracciones (tercera vuelta)
   ===================================================================== */

/* ---------- Cursor "sol": punto naranja con aro que emite rayos finos ---------- */
html.cursor-albor{
  --cur-dot:8px; --cur-dot-bg:#F28C28; --cur-ring:38px; --cur-ring-border:1.5px solid rgba(15,59,74,.42); --cur-ring-bg:transparent;
  --cur-link-scale:1.45; --cur-link-bg:rgba(242,140,40,.1); --cur-link-dot:.6;
  --cur-label-size:86px; --cur-label-bg:#F28C28; --cur-label-fg:#142229; --cur-label-font:'DM Sans', system-ui, sans-serif;
  --cur-lerp:.2;
  --cur-dark-dot:#F28C28; --cur-dark-ring:1.5px solid rgba(15,59,74,.42);
  --cur-light-dot:#F28C28; --cur-light-ring:1.5px solid rgba(255,255,255,.72);
}
.cursor-albor .cur-ring::after{
  content:""; position:absolute; left:0; top:0; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #F28C28 0deg 2.4deg, transparent 2.4deg 30deg);
  -webkit-mask:radial-gradient(closest-side, transparent 0 74%, #000 75% 100%, transparent 100%); mask:radial-gradient(closest-side, transparent 0 74%, #000 75% 100%, transparent 100%);
  opacity:0; transform:scale(.55); transition:opacity .3s, transform .5s cubic-bezier(.2,.8,.2,1);
}
html.has-cur.cursor-albor.cur-link .cur-ring::after{opacity:1; transform:scale(1); animation:curRays 9s linear infinite}
html.has-cur.cursor-albor.cur-text .cur-ring::after{opacity:0}
@keyframes curRays{to{rotate:360deg}}
.cursor-albor .cur-label{box-shadow:0 14px 30px -12px rgba(184,94,10,.55); font-size:13.5px}

/* ---------- Hero: tarjeta flotante de novedades (entra a los 3 s) ---------- */
.hero-card{position:absolute; z-index:3; top:clamp(28px,5vh,56px); right:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); bottom:auto; width:322px; animation:hcIn 1s var(--ease) 3s both; padding:12px 12px 14px; background:#fff; color:var(--ink); border-radius:18px; box-shadow:0 30px 60px -24px rgba(0,0,0,.55); overflow:hidden}
@keyframes hcIn{from{opacity:0; translate:0 22px; scale:.96}to{opacity:1; translate:none; scale:1}}
.hc-items{display:grid}
.hc-item{grid-area:1 / 1; display:flex; align-items:center; gap:14px; opacity:0; translate:0 8px; transition:opacity .6s ease, translate .7s var(--ease)}
.hc-item.is-on{opacity:1; translate:none}
.hc-img{flex:0 0 auto; width:72px; height:72px; border-radius:12px; overflow:hidden; background:var(--sand)}
.hc-img img{width:100%; height:100%; object-fit:cover}
.hc-txt{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.hc-tag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--orange-d)}
.hc-tag i{position:relative; width:7px; height:7px; border-radius:50%; background:var(--orange)}
.hc-tag i::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange); animation:hcPulse 2s ease-out infinite}
@keyframes hcPulse{0%{transform:scale(1); opacity:.7}80%,100%{transform:scale(3); opacity:0}}
.hc-txt b{margin-top:3px; font-size:15.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hc-txt small{font-size:13.5px; color:var(--grey-t)}
.hc-txt strong{margin-top:2px; font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.1; color:var(--sea)}
.hc-bar{position:absolute; left:12px; right:12px; bottom:0; height:2px; background:var(--line); overflow:hidden; border-radius:2px}
.hc-bar i{position:absolute; inset:0; background:var(--orange); transform:scaleX(0); transform-origin:left}
.hero-card.is-running .hc-bar i{animation:hcBar 5.6s linear forwards}
@keyframes hcBar{to{transform:scaleX(1)}}
@media (max-width:1100px){ .hero-card{display:none} }

/* ---------- Viviendas: galería que alterna fotos al pasar el ratón ---------- */
.cm-imgs{position:absolute; inset:0}
.cm-imgs img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease, transform .9s var(--ease)}
.cm-imgs img.is-on{opacity:1}
.card-media::after{content:""; position:absolute; inset:auto 0 0 0; z-index:1; height:34%; background:linear-gradient(0deg, rgba(8,30,38,.42), rgba(8,30,38,0)); pointer-events:none}
.cm-dots{position:absolute; z-index:2; left:50%; bottom:21px; display:flex; gap:5px; translate:-50% 0}
.cm-dots button{position:relative; width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.55); cursor:pointer; transition:width .4s var(--ease), background .3s}
.cm-dots button::before{content:""; position:absolute; inset:-10px -3px}
.cm-dots button.is-on{width:20px; background:#fff}
.cm-dots button:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* ---------- Zonas: el arco se abre de abajo arriba y la foto se mueve dentro ---------- */
.zone-px{position:absolute; left:0; right:0; top:-12%; height:124%; display:block}
html.js .zone-arch[data-reveal]{opacity:1; transform:none; clip-path:inset(100% 0 0 0); transition:clip-path 1.4s cubic-bezier(.77,0,.18,1); transition-delay:var(--reveal-delay,0ms)}
html.js .zone-arch[data-reveal].is-in{clip-path:inset(0 0 0 0)}
html.js .zone-arch[data-reveal] img{scale:1.16; transition:scale 1.9s var(--ease), transform 1s var(--ease); transition-delay:var(--reveal-delay,0ms), 0ms}
html.js .zone-arch[data-reveal].is-in img{scale:1}
html.js .zone-arch[data-reveal] .zone-count{opacity:0; translate:0 10px; transition:opacity .5s ease, translate .7s var(--ease), background .25s, color .25s; transition-delay:calc(var(--reveal-delay,0ms) + 900ms), calc(var(--reveal-delay,0ms) + 900ms), 0ms, 0ms}
html.js .zone-arch[data-reveal].is-in .zone-count{opacity:1; translate:none}

/* ---------- Vender: cortinilla, sello "Vendido en 32 días" y etiqueta ---------- */
html.js .sell-media[data-reveal]{opacity:1; transform:none}
html.js .sell-media .sell-img{clip-path:inset(100% 0 0 0); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
html.js .sell-media.is-in .sell-img{clip-path:inset(0 0 0 0)}
html.js .sell-media .sell-img img{scale:1.15; transition:scale 1.9s var(--ease)}
html.js .sell-media.is-in .sell-img img{scale:1}
html.js .sell-media .sell-tag{opacity:0; translate:0 18px; transition:opacity .6s ease .85s, translate .9s var(--ease) .85s}
html.js .sell-media.is-in .sell-tag{opacity:1; translate:none}
.sell-stamp{position:absolute; z-index:2; top:-24px; right:-24px; width:128px; height:128px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:var(--ink); text-align:center; rotate:-10deg; box-shadow:0 20px 40px -18px rgba(184,94,10,.7)}
.sell-stamp::before{content:""; position:absolute; inset:-15px; border-radius:50%; background:repeating-conic-gradient(var(--orange) 0deg 3deg, transparent 3deg 15deg); -webkit-mask:radial-gradient(closest-side, transparent 0 82%, #000 83% 100%, transparent 100%); mask:radial-gradient(closest-side, transparent 0 82%, #000 83% 100%, transparent 100%)}
.sell-stamp::after{content:""; position:absolute; inset:8px; border-radius:50%; border:1.5px dashed rgba(20,34,41,.4)}
.sell-stamp span{display:flex; flex-direction:column; align-items:center; line-height:1}
.sell-stamp b{font-family:var(--serif); font-weight:400; font-size:27px}
.sell-stamp small{margin-top:5px; font-size:13px; font-weight:700}
html.js .sell-media .sell-stamp{opacity:0; scale:.35; rotate:-40deg; transition:opacity .2s ease 1.3s, scale .6s cubic-bezier(.3,1.5,.55,1) 1.3s, rotate .6s cubic-bezier(.3,1.5,.55,1) 1.3s}
html.js .sell-media.is-in .sell-stamp{opacity:1; scale:1; rotate:-10deg}
@media (max-width:960px){ .sell-stamp{top:-20px; right:16px} }
@media (max-width:520px){ .sell-stamp{width:100px; height:100px; top:-18px; right:12px} .sell-stamp::before{inset:-12px} .sell-stamp b{font-size:22px} .sell-stamp small{font-size:12px} }

/* ---------- Por qué Albor: asesora e iconos que se dibujan ---------- */
.advisor{display:flex; align-items:center; gap:14px; max-width:540px; margin-top:30px; padding:14px; background:rgba(255,255,255,.06); border:1px solid var(--line-l); border-radius:20px}
.adv-ava{position:relative; flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--orange); color:var(--ink); font-size:16px; font-weight:700; letter-spacing:.02em}
.adv-ava i{position:absolute; right:0; bottom:1px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--sea)}
.adv-ava i::after{content:""; position:absolute; inset:0; border-radius:50%; background:#fff; animation:hcPulse 2.4s ease-out infinite}
.adv-txt{flex:1; min-width:0}
.adv-txt b{display:block; font-size:16px; font-weight:600; color:#fff; line-height:1.3}
.adv-txt small{display:block; margin-top:2px; font-size:14px; line-height:1.45; color:rgba(255,255,255,.74)}
.adv-btn{flex:0 0 auto; margin-left:auto; padding:13px 18px; font-size:14.5px}
html.js .why-grid li[data-reveal] .why-ico svg *{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1); transition-delay:calc(var(--reveal-delay,0ms) + 250ms)}
html.js .why-grid li.is-in .why-ico svg *{stroke-dashoffset:0}
@media (max-width:560px){ .advisor{display:grid; grid-template-columns:auto 1fr; gap:14px} .adv-btn{grid-column:1 / -1; width:100%; margin-left:0} }

/* ---------- Testimonios: brillo que sigue al ratón ---------- */
.rev{position:relative; isolation:isolate}
.rev::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%), rgba(242,140,40,.13), transparent 62%); opacity:0; transition:opacity .4s; pointer-events:none}
.rev:hover::after{opacity:1}
html.js .rev[data-reveal].is-in{transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:0s}

/* ---------- Titulares palabra a palabra: máscara que no corta los trazos descendentes ---------- */
.is-split .sw{padding-bottom:.16em; margin-bottom:-.16em}
.is-split:not(.is-in) .swi{transform:translateY(135%)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important}
  html.js .fs-rays line,html.js .why-grid li .why-ico svg *{stroke-dashoffset:0}
  html.js .zone-arch[data-reveal],html.js .sell-media .sell-img{clip-path:none}
  .hero-dawn{display:none}
  .hd .sun-rays path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}