/* ==========================================================================
   Inmobiliaria Berasueta — Theme "Azul Fresco"
   Extraído de los mockups aprobados:
     rediseño/v2-azul-fresco-desktop.html
     rediseño/v2-azul-fresco-mobile.html
   Base = estilos desktop. Bloque @media (max-width:900px) = overrides mobile
   (el propio mockup usa el corte 900/901px para separar ambas versiones).
   ========================================================================== */

:root{
  --navy:#1F2A5C; --blue:#2F8FCC; --blue-soft:#A7B8E8; --gray-900:#2B2B2E;
  --gray-600:#65707A; --gray-100:#F1F3F7; --white:#fff;
  --display:'Sora', sans-serif; --body:'Inter', sans-serif;
}
html{scroll-behavior:smooth;}
#categorias{scroll-margin-top:140px;}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--white); color:var(--gray-900); font-family:var(--body); line-height:1.5;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

header{position:sticky; top:0; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); z-index:10; border-bottom:1px solid #EEF0F4; box-shadow:0 4px 16px rgba(20,27,61,0.08);}

.nav-desktop{display:flex; gap:30px; font-size:15.5px; font-weight:600; color:var(--gray-900); margin-top:22px;}
.nav-desktop a{position:relative; padding:4px 0;}
.nav-desktop a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--blue); transition:width .25s ease;}
.nav-desktop a:hover::after{width:100%;}
.btn{background:var(--navy); color:var(--white); padding:11px 22px; border-radius:8px; font-weight:600; font-size:14px; flex-shrink:0;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease; display:inline-block;}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(47,143,204,0.35); background:var(--blue);}

.hero{position:relative; overflow:hidden; padding:96px 32px 0;}
.hero-bg{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(47,143,204,0.18), transparent 70%),
    radial-gradient(500px 400px at 10% 20%, rgba(167,184,232,0.35), transparent 70%);}
.hero-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.eyebrow{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:18px;}
h1{font-family:var(--display); font-weight:700; font-size:clamp(36px,4.6vw,56px); line-height:1.08; color:var(--navy);}
@media(min-width:901px){ h1{white-space:nowrap;} .hero-content{max-width:900px;} }
h1 span{background:linear-gradient(90deg, var(--navy), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub{margin-top:20px; font-size:17px; color:var(--gray-600); max-width:460px;}
.cta-row{margin-top:32px; display:flex; gap:14px;}
.btn-ghost{border:2px solid var(--navy); color:var(--navy); padding:9px 20px; border-radius:8px; font-weight:600; font-size:14px;
  transition:background .2s ease, color .2s ease;}
.btn-dropdown{position:relative; display:inline-block;}
.btn-dropdown .btn{border:none; font-family:inherit; cursor:pointer;}
.dropdown-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-menu{position:absolute; top:100%; left:0; margin-top:8px; background:var(--white); border-radius:10px;
  box-shadow:0 16px 32px -8px rgba(31,42,92,0.25); min-width:180px; padding:8px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:20;}
.btn-dropdown:hover .dropdown-menu, .dropdown-menu:hover{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-menu a{display:block; padding:10px 14px; border-radius:6px; font-size:14px; font-weight:600; color:var(--navy); text-align:left; transition:background .2s ease, color .2s ease;}
.dropdown-menu a:hover{background:var(--gray-100); color:var(--blue);}
.btn-ghost:hover{background:var(--navy); color:var(--white);}

.photo-card{position:relative; aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  background:
    linear-gradient(155deg, rgba(31,42,92,0.92), rgba(47,143,204,0.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 38px, transparent 38px 76px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 46px, transparent 46px 92px);
  box-shadow:0 30px 60px -20px rgba(31,42,92,0.4);}
.photo-card::after{content:'Foto de propiedad'; position:absolute; bottom:20px; left:20px; color:rgba(255,255,255,0.85);
  font-size:12px; font-family:var(--display); letter-spacing:0.5px;}

.stats{display:flex; gap:48px; margin-top:64px; padding-bottom:56px; border-bottom:1px solid #EEF0F4;}
.stat b{display:block; font-family:var(--display); font-size:28px; color:var(--navy); transition:color .25s ease, text-shadow .25s ease;}
.stat span{font-size:13px; color:var(--gray-600);}

.categorias{padding:32px 32px 80px; max-width:1180px; margin:0 auto;}
.kicker{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:12px;}
h2{font-family:var(--display); font-weight:700; font-size:32px; margin-bottom:48px; color:var(--navy); max-width:520px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{background:linear-gradient(135deg, var(--navy), var(--blue)); border-radius:16px; padding:24px 22px; display:flex; flex-direction:row; align-items:flex-start; gap:16px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(31,42,92,0.35); background:linear-gradient(135deg, var(--blue), var(--navy)); border:1px solid transparent;}
.card .icon{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.18); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease;}
.card:hover .icon{background:#fff; color:var(--blue);}
.card h3{font-family:var(--display); font-size:19px; font-weight:700; color:#fff; margin-bottom:6px;}
.card p{font-size:14px; color:rgba(255,255,255,0.85);}

.confianza{padding:70px 32px; max-width:1180px; margin:0 auto; border-top:1px solid #EEF0F4;}
.confianza-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.confianza-left h2{font-family:var(--display); font-weight:700; font-size:26px; color:var(--navy); margin-bottom:28px; line-height:1.3;}
.checklist{list-style:none;}
.checklist li{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--gray-900); padding:10px 0; border-bottom:1px solid #EEF0F4;}
.checklist li:last-child{border-bottom:none;}
.check{color:var(--blue); font-weight:700; flex-shrink:0;}
.confianza-right p{font-size:15px; color:var(--gray-600); line-height:1.7; margin-bottom:16px; padding-left:18px; border-left:3px solid var(--blue-soft);}

/* ============ QUIÉNES SOMOS (mockup C v2, rediseño/mockups/quienes-somos-C-v2.html)
   ============ Vive SOLO en quienes/index.php (reemplaza ahí el viejo
   listado de fotos de oficina/staff) -el home volvió a .confianza arriba,
   la sección .qs NO se usa en index.html (se probó y se revirtió).
   Mismo texto/HTML/CSS exacto del mockup, sin reinterpretar. .kicker global
   (arriba, línea ~71) ya existe con margin-bottom:12px; acá se pisa a 16px
   SOLO dentro de .qs, sin tocar el valor global que usan el resto de las
   páginas. */
.qs{padding:80px 32px 90px; max-width:1180px; margin:0 auto; border-top:1px solid #EEF0F4; position:relative; overflow:hidden;}
.qs::before{content:''; position:absolute; width:520px; height:520px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(167,184,232,0.22), transparent 70%); top:-160px; right:-160px; pointer-events:none;}
.qs .kicker{margin-bottom:16px; position:relative;}

.qs-statement{font-family:var(--display); font-weight:700; font-size:clamp(28px,3.6vw,44px); line-height:1.18; color:var(--navy);
  max-width:860px; position:relative;}
.qs-statement span{background:linear-gradient(90deg, var(--navy), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}

.qs-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; margin-top:48px; position:relative; align-items:start;}

.qs-prose p{font-size:15px; color:var(--gray-600); line-height:1.75; margin-bottom:16px; padding-left:18px; border-left:3px solid var(--blue-soft);}
.qs-prose p strong{color:var(--navy); font-weight:600;}
.qs-valor{padding-left:18px; border-left:3px solid var(--blue-soft); margin-bottom:22px;}
.qs-valor h3{font-family:var(--display); font-size:16px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.qs-valor p{border-left:none; padding-left:0; margin-bottom:0;}

/* Línea de tiempo */
.timeline{position:relative; padding-left:34px;}
.timeline::before{content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--blue-soft), var(--blue), var(--navy));}
.tl-item{position:relative; padding-bottom:28px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; left:-32px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--white); border:3px solid var(--blue); transition:transform .25s ease, box-shadow .25s ease;}
.tl-item:hover::before{transform:scale(1.25); box-shadow:0 0 0 6px rgba(47,143,204,0.15);}
.tl-item:last-child::before{background:var(--navy); border-color:var(--navy);}
.tl-year{font-family:var(--display); font-size:15px; font-weight:700; color:var(--blue); letter-spacing:0.5px;}
.tl-item h3{font-family:var(--display); font-size:16.5px; font-weight:600; color:var(--navy); margin:4px 0 5px;}
.tl-item p{font-size:13.5px; color:var(--gray-600); line-height:1.6; max-width:440px;}

/* Cita en vidrio navy -mismo lenguaje que la píldora de precio (.precio-flotante) */
.qs-quote{margin-top:24px; position:relative; border-radius:20px; padding:36px 40px;
  background:linear-gradient(135deg, rgba(120,133,163,0.75) 0%, rgba(31,42,92,0.88) 100%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:0.5px solid rgba(255,255,255,0.3); color:#fff;
  box-shadow:0 30px 60px -24px rgba(31,42,92,0.5);
  display:grid; grid-template-columns:auto 1fr; column-gap:24px; row-gap:22px; align-items:center;}
.qs-quote-mark{font-family:var(--display); font-size:72px; font-weight:800; line-height:0.6; color:rgba(255,255,255,0.35);}
.qs-quote blockquote{font-family:var(--display); font-size:20px; font-weight:500; line-height:1.5; max-width:640px;}
.qs-quote cite{display:block; margin-top:12px; font-family:var(--body); font-style:normal; font-size:13.5px; color:rgba(255,255,255,0.75);}
.qs-quote .btn-white{grid-column:1/-1; justify-self:center;}
.btn-white{background:var(--white); color:var(--navy); padding:12px 24px; border-radius:8px; font-weight:600; font-size:14px;
  transition:transform .2s ease, box-shadow .2s ease; display:inline-block; white-space:nowrap;}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.25);}

.banner{background:linear-gradient(120deg, var(--navy), var(--blue)); padding:64px 32px; color:var(--white); position:relative; overflow:hidden;}
.banner::before{content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.08); top:-150px; right:-100px;}
.banner .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; position:relative; z-index:1;}
.banner h3{font-family:var(--display); font-size:26px; font-weight:700; max-width:440px;}
.banner .btn{background:var(--white); color:var(--navy);}
.banner .btn:hover{background:var(--gray-100); box-shadow:0 10px 24px rgba(0,0,0,0.25);}

.site-footer{background:var(--navy); color:rgba(255,255,255,0.85); padding:56px 32px 0;}
.footer-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px;}
.footer-col h4{font-family:var(--display); font-size:16px; font-weight:700; color:#fff; margin-bottom:14px;}
.footer-col p{font-size:14px; line-height:1.6; color:rgba(255,255,255,0.7); max-width:360px;}
/* dirección de la oficina, ahora linkeada a Google Maps -mismo texto blanco
   subrayado que ya se usa para links dentro de párrafos en el resto del
   sitio, para que se note que es clickeable sin agregarle un ícono nuevo. */
.footer-col p a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
.footer-col p a:hover{color:var(--blue-soft);}
.footer-list{list-style:none;}
.footer-list li{padding:6px 0; transition:color .2s ease;}
.footer-list li:hover{color:#fff;}
/* el <li> antes tenía el ícono+texto como hijos directos con su propio
   display:flex; ahora van envueltos en un <a> (Teléfono/Whatsapp/Facebook/
   Instagram con link real, Mail con el mailto ofuscado que arma
   js/theme.js) -el flex/gap se mueve acá para no perder el alineado
   ícono-texto, y color:inherit+no-underline para que no se vea como un link
   de texto azul subrayado típico, mismo look de antes. */
.footer-list a{display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,0.75); text-decoration:none;}
.footer-list li:hover a{color:#fff;}
.footer-list svg{color:var(--blue-soft); flex-shrink:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding:18px 32px; font-size:12.5px; color:rgba(255,255,255,0.55); max-width:1180px; margin:0 auto; text-align:center;}

.stats-strip{display:flex; gap:32px; justify-content:center; padding:36px 32px; border-bottom:1px solid #EEF0F4; flex-wrap:wrap;}
.stat{padding:10px 18px; border-radius:12px; text-align:center; transition:background .25s ease, transform .25s ease, box-shadow .25s ease; cursor:default;}
.stat:hover, .stat.active{background:linear-gradient(160deg, rgba(47,143,204,0.08), rgba(31,42,92,0.08)); transform:translateY(-4px); box-shadow:0 12px 24px -8px rgba(31,42,92,0.18);}
.stat:hover b, .stat.active b{color:var(--blue); text-shadow:0 0 18px rgba(47,143,204,0.35);}
/* .stat span (13px, texto chico debajo del número) también le pegaba al
   .js-anios anidado DENTRO del <b> del stat "+25 años de experiencia"
   -es un span descendiente de .stat igual que el label-, achicando el "25"
   a 13px en vez de heredar los 28px del <b>. Los otros 3 stats no tienen
   este problema porque su número es texto plano sin span. */
.stat b .js-anios{font-size:inherit; color:inherit;}

.hero-slider{position:relative; height:640px;}
.slider-visual{position:absolute; inset:0; overflow:hidden; z-index:0; border-radius:inherit;}
/* width acá está en función de la cantidad de .slide reales -100%*N para el
   track, 100%/N para cada slide (5 fotos). Si cambia la cantidad de fotos,
   estos dos números tienen que moverse juntos (el JS de theme.js ya
   calcula el translateX dinámicamente sobre .slide.length, pero el ANCHO
   real de cada slide/track es CSS puro, no se recalcula solo). */
.slider-track{position:absolute; top:0; left:0; display:flex; width:500%; height:100%; transition:transform 1.3s cubic-bezier(.65,0,.35,1);}
.slide{width:20%; height:100%; flex-shrink:0; overflow:hidden; position:relative;}
.slide-bg{position:absolute; inset:0; background-size:cover; background-position:center;
  animation:kenburns 26s ease-in-out infinite alternate;}
@keyframes kenburns{ from{transform:scale(1) translate(0,0);} to{transform:scale(1.7) translate(-2.5%,-2.5%);} }
.hero-overlay{position:absolute; inset:0; z-index:2; pointer-events:none;}
.hero-overlay::before{content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(20,27,61,0.86) 0%, rgba(47,143,209,0.5) 55%, rgba(31,42,92,0.72) 100%);}
.hero-overlay::after{content:''; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 40%, rgba(10,14,35,0.55), transparent 70%);}
.arrow{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.10); color:#fff; z-index:4;
  cursor:pointer; font-size:18px; transition:background .2s ease, transform .2s ease;}
.arrow:hover{background:rgba(255,255,255,0.28); transform:translateY(-50%) scale(1.08);}
.arrow.prev{left:24px;} .arrow.next{right:24px;}
.dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:4;}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45); cursor:pointer; transition:all .3s ease; border:none; padding:0;}
.dot.active{background:#fff; width:26px; border-radius:5px;}
.hero-content{position:relative; z-index:3; max-width:720px; margin:0 auto; padding:150px 32px 70px; text-align:center;}
.hero-content .eyebrow{color:#BFD4F0;}
.hero-content h1{color:#fff;}
.hero-content h1 span{background:linear-gradient(90deg,#BFD4F0,#fff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-content .sub{color:rgba(255,255,255,0.88); margin-left:auto; margin-right:auto; text-shadow:0 2px 12px rgba(0,0,0,0.25);}
.hero-content .cta-row{justify-content:center;}
.hero-content .btn-ghost{border-color:rgba(255,255,255,0.7); color:#fff;}
.hero-content .btn-ghost:hover{background:#fff; color:var(--navy);}

.contact-item svg{color:var(--blue); flex-shrink:0;}

.headwrap{display:flex; align-items:flex-start; gap:28px; padding:2px 32px 6px; max-width:1180px; margin:0 auto;}
/* width/padding-top/display explícitos (no solo max-width) para pisar
   css/main.css .logo{width:350px; padding-top:5px; display:inline-block}
   -esa regla vieja sigue cargada en las páginas de sección (alquileres,
   estudiantes, ventas, 24meses la incluyen antes de este archivo) pero no
   en la home (index.html no carga main.css), así que sin este reset el
   logo quedaba en una posición distinta entre la home y las secciones. */
.logo{align-self:center; max-width:none; width:auto; padding-top:0; display:flex;}
.btn{align-self:center;}
.logo a{display:block;}
.logo img{height:77px; width:auto; max-width:none; display:block; flex-shrink:0;}
.header-middle{flex:1; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:flex-start; padding-top:14px;}
.contact-items{display:flex; gap:20px; flex-wrap:nowrap; justify-content:center;}
.contact-item{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--gray-600); white-space:nowrap;}

.phone-whatsapp{display:flex; gap:20px;}
.header-right{display:flex; align-items:center; align-self:center;}

/* corazón de favoritos en el header, escritorio: mismo ícono ya usado en
   las tarjetas/ficha (auxiliares/destacado.php,
   css/propiedad-ficha.css .float-icon.fav), con badge de cantidad. Azul
   por defecto, rojo solo cuando hay 1+ favoritos guardados (.fav-activo,
   pedido explícito -antes era siempre rojo) -la clase la pone
   js/theme.js leyendo localStorage (berasueta_favoritos), PHP no puede
   verla, es 100% cliente. order:1 lo manda después del botón "Contactar"
   (que queda en su order:0 implícito) dentro de .header-right sin tener
   que tocar el orden real en el HTML de las 15 páginas que comparten este
   header. */
.header-fav-link{order:1; position:relative; display:flex; align-items:center; justify-content:center; color:var(--navy); margin-left:16px; transition:transform .2s ease, color .2s ease;}
.header-fav-link:hover{transform:scale(1.08);}
.header-fav-link.fav-activo{color:#E0475C;}
.header-fav-link svg{width:21px; height:21px;}
.header-fav-badge{position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:100px;
  background:var(--navy); color:#fff; font-family:var(--display, 'Sora', sans-serif); font-weight:700; font-size:10px;
  line-height:16px; text-align:center; box-shadow:0 0 0 2px #fff;}
.header-fav-badge[hidden]{display:none;}
.hamburger{display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(47,143,204,0.12); border:none; color:var(--navy); cursor:pointer; flex-shrink:0; transition:background .2s ease, transform .2s ease;}
.hamburger:hover{background:rgba(47,143,204,0.22); transform:scale(1.05);}
/* mismo estilo celeste tenue que la hamburguesa -antes era un círculo navy
   sólido con ícono blanco, mucho más protagonismo que el logo al lado. */
.mobile-contact-btn{display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(47,143,204,0.12); color:var(--navy); flex-shrink:0; transition:background .2s ease, transform .2s ease;}
.mobile-contact-btn:hover{background:rgba(47,143,204,0.22); transform:scale(1.08);}
.nav-mobile{display:none; flex-direction:column; background:linear-gradient(150deg, var(--navy), var(--blue)); overflow:hidden; max-height:0; transition:max-height .3s ease;}
.ham-line{transition:transform .3s ease, opacity .3s ease; transform-origin:12px 12px;}
.hamburger.open .ham-1{transform:translateY(6px) rotate(45deg);}
.hamburger.open .ham-2{opacity:0;}
.hamburger.open .ham-3{transform:translateY(-6px) rotate(-45deg);}
.nav-mobile.open{max-height:400px;}
.nav-mobile a{color:#fff; padding:14px 32px; font-size:15px; font-weight:600; border-top:1px solid rgba(255,255,255,0.1); transition:background .2s ease;}
.nav-mobile a:hover{background:rgba(255,255,255,0.08);}

/* ==========================================================================
   Mobile (<=900px) — overrides tomados de v2-azul-fresco-mobile.html
   ========================================================================== */
@media (max-width:900px){
  /* overflow-x:hidden en <html> (en vez de en body) rompe position:sticky
     en el header para casi todos los navegadores mobile -cualquier
     ancestro con overflow!=visible pasa a ser el contenedor de scroll de
     referencia para "sticky", y deja de pegarse al viewport real. */
  body{overflow-x:hidden; max-width:100%;}

  .eyebrow{font-size:12px; letter-spacing:0.5px; margin-bottom:8px;}
  .sub{margin-top:12px; font-size:14px; line-height:1.4; max-width:460px;}
  .cta-row{margin-top:18px; gap:12px;}

  .stat b{font-size:24px;}
  .stat span{font-size:12px;}

  .categorias{padding:16px 18px 40px;}
  h2{font-size:28px; margin-bottom:28px;}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
  .card{padding:16px 14px; gap:10px; min-width:0;}
  .card .icon{width:34px; height:34px; border-radius:9px;}
  .card h3{font-size:16px; margin-bottom:4px;}
  .card p{font-size:12.5px; line-height:1.4;}

  .confianza{padding:36px 18px;}
  .confianza-inner{grid-template-columns:1fr; gap:28px;}

  .qs{padding:56px 20px 64px;}
  .qs-grid{grid-template-columns:1fr; gap:40px; margin-top:32px;}
  .qs-quote{grid-template-columns:1fr; gap:18px; padding:32px 26px; text-align:left;}
  .qs-quote-mark{display:none;}
  .qs-quote blockquote{font-size:17px;}

  .banner{padding:40px 18px;}

  .footer-inner{grid-template-columns:1fr;}

  .hero-inner{grid-template-columns:1fr;}
  .stats{gap:28px; flex-wrap:wrap;}
  .stats-strip{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 10px; padding:32px 18px;}
  .stat{padding:8px 6px; min-width:0;}

  .hero-slider{height:420px;}
  .arrow{display:none;}
  .hero-content{padding:64px 24px 28px;}

  /* Header mobile: una sola fila (hamburguesa + logo + ubicación/teléfono/
     whatsapp), sin dirección/teléfono en texto -antes eran 2 filas (logo
     arriba, fila de contacto con texto abajo). .header-middle pasa a
     "contents" para que sus hijos (hamburguesa, ubicación, teléfono,
     whatsapp) se vuelvan ítems directos de .headwrap y se puedan ordenar
     con order: junto a .logo -si no, quedan pegados entre sí como grupo
     fijo, sin poder meter el logo en el medio. */
  .headwrap{flex-wrap:nowrap; justify-content:flex-start; align-items:center; padding:8px 16px; gap:8px;}
  .header-middle{display:contents;}
  .hamburger{display:flex; order:-1;}
  .hamburger svg{width:20px; height:20px;}
  .logo{order:0; width:auto; justify-content:flex-start; margin-bottom:0;}
  .logo img{width:auto; max-width:160px; height:auto;}
  .contact-items{display:none;}
  .mobile-location-btn{order:1; margin-left:auto;}
  .mobile-phone-btn{order:2;}
  .mobile-whatsapp-btn{order:3;}
  .mobile-fav-btn{order:4; position:relative; color:var(--navy);}
  .mobile-fav-btn.fav-activo{color:#E0475C;}
  .mobile-fav-btn .header-fav-badge{top:-4px; right:-4px;}
  .mobile-contact-btn{display:flex;}
  .mobile-contact-btn svg{width:18px; height:18px;}
  .nav-desktop{display:none;}
  .header-right{display:none;}
  .nav-mobile{display:flex;}
}

@media (max-width:480px){
  .logo img{max-width:112px;}
}

/* ==========================================================================
   Patrón "Buscador de propiedades" (rediseño/mockups/buscador-propiedades.html)
   Barra de búsqueda flotante + panel "Más filtros" + chips + results-strip.
   Reutilizado en alquileres/estudiantes/ventas — cada sección conserva sus
   propios campos (ids/name atados a temporada.js, filtro.js, filtro_est.js,
   filtro_ventas.js); esto solo aporta la estética.
   ========================================================================== */

.hero-search{position:relative; padding:0 0 20px;}
/* margin-top positivo por default: en las páginas de resultados (sin foto
   de hero) el search-card es el hijo directo de .hero-search, sin .hero-bg
   antes -el -64px lo mandaba debajo del header fijo. Se restaura el
   solapamiento negativo solo cuando SÍ hay foto de hero (selector de abajo). */
.search-card{position:relative; z-index:3; max-width:1080px; margin:28px auto 0; background:#fff;
  border-radius:20px; box-shadow:0 24px 60px -12px rgba(20,27,61,0.28); border:1px solid #ECEFF5; overflow:visible;}
.hero-bg + .search-card{margin-top:-64px;}

.search-row{display:flex; align-items:stretch; padding:10px; gap:4px; flex-wrap:wrap;}
.search-row .field{position:relative; flex:1; min-width:140px;}
.search-row .field > label, .search-row .field > div:first-child{display:block; font-size:11px; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--blue); padding:10px 14px 0; margin:0;}
.search-row .field select, .search-row .field input[type=date], .search-row .field input[type=text], .search-row .field input[type=number]{
  width:100%; border:none; background:none; font-family:var(--body); font-size:14.5px;
  font-weight:600; color:var(--navy); padding:2px 14px 10px; appearance:none; cursor:pointer;}
.search-row .field input[type=range]{width:calc(100% - 28px); margin:2px 14px 12px;}
.search-row .field:not(:last-child)::after{content:''; position:absolute; right:0; top:14px; bottom:14px; width:1px; background:#EEF0F4;}
.search-row .field:hover{background:var(--gray-100); border-radius:12px;}
.search-row .field-link{padding:0 14px 10px; display:block;}
.search-row .field-link a, .otra-fecha-link{font-size:12px; font-weight:600; color:var(--blue); cursor:pointer;}
.search-row .field-link a:hover, .otra-fecha-link:hover{color:var(--navy);}

.search-actions{display:flex; align-items:center; gap:8px; padding-left:6px;}
.btn-more{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--blue); font-weight:700;
  font-size:13.5px; padding:10px 14px; border-radius:10px; cursor:pointer; transition:background .2s ease; white-space:nowrap;
  font-family:var(--body);}
.btn-more:hover{background:rgba(47,143,204,0.1);}
.btn-more svg{transition:transform .25s ease;}
.btn-more.open svg{transform:rotate(180deg);}
.btn-search{display:flex; align-items:center; gap:8px; background:linear-gradient(120deg, var(--navy), var(--blue));
  color:#fff; border:none; font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:12px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; white-space:nowrap; font-family:var(--body);}
.btn-search:hover{transform:translateY(-2px); box-shadow:0 12px 24px -6px rgba(47,143,204,0.45);}

.more-panel{max-height:0; overflow:hidden; transition:max-height .35s ease; border-top:1px solid transparent;}
.more-panel.open{max-height:2000px; border-top:1px solid #EEF0F4;}
.more-inner{padding:22px 24px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.more-field label, .more-field > div:first-child{display:block; font-size:11px; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--gray-600); margin-bottom:6px;}
.more-field input, .more-field select{width:100%; border:1px solid #E2E7F2; background:var(--gray-100); border-radius:10px;
  padding:11px 14px; font-size:14px; font-family:var(--body); color:var(--navy); font-weight:600;}
.more-field input[type=range]{padding:0; background:none; border:none;}
/* camas de 1/2 plazas: el campo solo muestra un dígito (0-6 / 0-3), no
   necesita el ancho completo de la columna del grid. */
#unaplaza, #dosplaza{width:50%;}

.amenities{grid-column:1/-1; margin-top:4px;}
.amenities-label{font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--gray-600); margin-bottom:10px; display:block;}
.chip-grid{display:flex; gap:8px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px; border:1.5px solid #E2E7F2;
  background:#fff; font-size:13px; font-weight:600; color:var(--gray-600); cursor:pointer;
  transition:all .18s ease; user-select:none; font-family:var(--body);}
.chip input{position:absolute; opacity:0; width:0; height:0;}
.chip:hover{border-color:var(--blue-soft);}
.chip.checked{background:linear-gradient(120deg, var(--navy), var(--blue)); border-color:transparent; color:#fff;}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.5;}
.chip.checked .dot{opacity:1;}

.more-footer{grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.btn-clear{background:none; border:1.5px solid #E2E7F2; color:var(--gray-600); font-weight:700; font-size:13.5px;
  padding:10px 20px; border-radius:10px; cursor:pointer; transition:border-color .2s ease, color .2s ease; font-family:var(--body);}
.btn-clear:hover{border-color:var(--navy); color:var(--navy);}

.results-strip{max-width:1080px; margin:36px auto 0; padding:0 24px; display:flex; justify-content:space-between;
  align-items:baseline; color:var(--gray-600); font-size:14px; font-family:var(--body);}
.results-strip--sort-only{justify-content:flex-end;}
.results-strip b{color:var(--navy); font-family:var(--display);}
/* conteo de resultados ("La búsqueda devolvió N resultados"): viene inyectado
   por AJAX (filtro.php) dentro de #resultado, separado del .results-strip
   estático de arriba (que solo trae "Ordenar por"). Mismo lenguaje visual:
   número en negrita navy/Sora, resto del texto en gris/Inter. */
.results-count{max-width:1080px; margin:20px auto 16px; padding:0 24px; text-align:left;
  color:var(--gray-600); font-size:14px; font-family:var(--body); font-weight:400;}
.results-count b{color:var(--navy); font-family:var(--display); font-weight:700;}
@media (max-width:800px){
  .results-count{margin:16px auto 12px;}
}
.sort-label{display:flex; align-items:center; gap:8px; color:var(--gray-600); font-size:14px; cursor:pointer;}
.sort-select{border:1.5px solid #E2E7F2; background:#fff; color:var(--navy); font-weight:700; font-size:13.5px;
  font-family:var(--body); padding:8px 12px; border-radius:9px; cursor:pointer;}

@media (max-width:800px){
  .search-card{margin:24px 16px 0; border-radius:18px;}
  .hero-bg + .search-card{margin-top:-40px;}
  /* 2 campos por fila (mismo grid que .more-inner, en vez de 1 por fila
     apilado) - pedido explícito, cada campo ocupa poco (un select/input
     chico), apilarlos de a uno dejaba la tarjeta innecesariamente larga. */
  .search-row{display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; padding:14px 16px 6px;}
  .search-row .field{min-width:0;}
  .search-row .field:not(:last-child)::after{display:none;}
  .search-row .field-link{grid-column:1/-1;}
  .search-actions{flex-direction:column; padding:10px 6px 6px; gap:8px; grid-column:1/-1;}
  .btn-more{width:100%; justify-content:center; background:var(--gray-100); border-radius:10px;}
  .btn-search{width:100%; justify-content:center;}
  .more-inner{grid-template-columns:1fr 1fr; padding:18px 16px 20px;}
  .more-footer{flex-direction:column-reverse;}
  .btn-clear, .more-footer .btn-search{width:100%; justify-content:center;}
  .results-strip{margin-top:24px; flex-direction:column; gap:4px;}
}

/* ---- sección "Sabemos cómo alquilar su propiedad" (propietarios) ---- */
.propietarios{max-width:1080px; margin:0 auto; padding:40px 24px 64px;}
/* dos bloques .propietarios seguidos (ventas: Propietarios + Compradores)
   no deben sumar el padding-top del segundo al padding-bottom del primero. */
.propietarios + .propietarios{padding-top:0;}
.propietarios .kicker{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue);
  font-weight:700; margin-bottom:12px;}
.propietarios h2{font-family:var(--display); font-weight:800; font-size:30px; color:var(--navy);
  max-width:560px; margin-bottom:18px; line-height:1.25;}

.check-list{display:flex; flex-direction:column; gap:2px;}
.check-item{display:flex; align-items:flex-start; gap:16px; padding:4px 14px; border-radius:14px;
  transition:background .2s ease;}
.check-item:hover{background:var(--gray-100);}
.check-badge{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(47,143,204,0.12);
  color:var(--blue); display:flex; align-items:center; justify-content:center; margin-top:2px;
  transition:background .2s ease, color .2s ease;}
.check-item:hover .check-badge{background:linear-gradient(135deg, var(--navy), var(--blue)); color:#fff;}
.check-item p{font-size:15.5px; color:var(--gray-900); line-height:1.65;}

@media(max-width:700px){
  .propietarios{padding:40px 20px;}
  .propietarios h2{font-size:24px;}
  .check-item{padding:8px 10px; gap:12px;}
  .check-item p{font-size:14.5px;}
}

/* ---- Aviso de cookies (js/cookpoliticas.js inyecta estas mismas clases
   -.cookieacepta/.cookietexto/.cookieboton- por jQuery; no se toca el JS,
   solo se redefine el look de main.css: gris casi negro sólido y letra
   grande -> gris translúcido con blur y tipografía Inter más chica, acorde
   al tema. display:none/block en .cookieacepta queda tal cual lo maneja
   jQuery -.slideToggle() fuerza "block" al mostrar sin importar lo que
   declaremos acá para ESE elemento-, pero los hijos (.cookietexto/
   .cookieboton) no los toca jQuery: se pasa de float (alineado arriba,
   por eso quedaba alto y el texto pegado al techo) a inline-block +
   vertical-align:middle, que sí funciona con el padre en block y centra
   texto/botón verticalmente sin necesitar flex. */
.cookieacepta{
  padding:10px 20px; background:rgba(43,43,46,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.12); box-shadow:0 -8px 24px rgba(20,27,61,0.18);
}
.cookietexto{
  display:inline-block; vertical-align:middle; float:none; width:calc(100% - 150px);
  left:auto; margin:0;
  font-family:var(--body); font-size:12.5px; line-height:1.4; color:rgba(255,255,255,0.85);
}
.cookietexto em{font-style:normal; color:#fff;}
.cookieboton{
  display:inline-block; vertical-align:middle; float:none; width:auto; margin:0 0 0 16px;
  border:none; background:var(--blue); color:#fff; border-radius:8px; font-family:var(--body);
  font-weight:600; font-size:12.5px; padding:8px 16px; transition:background .2s ease, transform .2s ease;
}
.cookieboton:hover{background:var(--navy); color:#fff; transform:translateY(-1px);}
@media screen and (max-width:799px){
  /* block (no inline-block) + width:fit-content es lo que deja funcionar
     margin:0 auto para centrar -inline-block no se centra con margin:auto,
     necesita text-align:center en el padre en cambio. */
  .cookietexto{display:block; width:100%; margin-bottom:8px;}
  .cookieboton{display:block; width:fit-content; margin:0 auto; padding:8px 22px;}
}