/* Estilo Airbnb (DESIGN.md) para las paginas internas del sitio.
   Lienzo #f7f7f7, tarjetas blancas planas de 12px, texto #222 / #6a6a6a, esquinas de 8px en botones.
   La portada lleva su propia copia en linea. Todos los selectores usan html:root body para ganar
   a las capas anteriores (site-brand.css y los bloques dp-* en linea) sin depender del orden. */
:root{--ab-ink:#222;--ab-muted:#6a6a6a;--ab-line:#ebebeb;--ab-canvas:#f7f7f7}
html:root body{background:var(--ab-canvas)!important;color:var(--ab-ink)!important;font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif!important}
html:root body :is(h1,h2,h3,h4){font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important}
html:root body .eyebrow{font-family:inherit!important;font-style:normal!important;font-weight:700!important;font-size:13px!important}
html:root body :is(.kicker,.section-kicker){background:none!important;color:var(--ab-muted)!important;font-size:13px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
html:root body :is(.kicker,.section-kicker)::before{display:none!important}
html:root body .topbar{background:var(--ab-ink)!important}
html:root body .trust-strip{background:var(--ab-ink)!important}

/* BOTONES: relleno inverso #222, esquinas de 8px */
html:root body a.button.button-primary,html:root body button.button-primary,html:root body button[type="submit"]{background:var(--ab-ink)!important;color:#fff!important;border:1px solid var(--ab-ink)!important;border-radius:8px!important;box-shadow:none!important;font-size:14px;font-weight:600}
html:root body a.button.button-primary:hover,html:root body button.button-primary:hover,html:root body button[type="submit"]:hover{background:#000!important;transform:none}
html:root body :is(a.button.button-secondary,button.button-secondary){background:#fff!important;color:var(--ab-ink)!important;border:1px solid var(--ab-ink)!important;border-radius:8px!important;box-shadow:none!important;font-size:14px;font-weight:600}
html:root body a.button.button-secondary:hover{background:var(--ab-canvas)!important;transform:none}
html:root body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){border:1px solid #ddd!important;border-radius:8px!important;background:#fff!important;color:var(--ab-ink)}
html:root body :is(input,select,textarea):focus{border-color:var(--ab-ink)!important;box-shadow:0 0 0 1px var(--ab-ink)!important;outline:none!important}

/* MENU */
html:root body>header,html:root body .site-header{background:#fff!important;border-bottom:1px solid var(--ab-line)!important;box-shadow:none!important;backdrop-filter:none;padding-block:0!important}
html:root body header nav:not([aria-label="Miga de pan"]){min-height:80px;gap:16px;flex-wrap:nowrap}
html:root body header nav :is(.brand,a:has(>img)) img{width:170px;max-width:58vw;max-height:56px;height:auto}
html:root body header .nav-links{flex:1;justify-content:flex-end;gap:2px;color:var(--ab-ink);font-weight:500}
html:root body header :is(.nav-links>a:not(.button),.nav-item>a,nav:not([aria-label="Miga de pan"])>a:not(:has(img)):not(.button)){padding:10px 14px;border-radius:9999px;color:var(--ab-ink)!important;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
html:root body header :is(.nav-links>a:not(.button):hover,.nav-item:hover>a,.nav-item:focus-within>a,nav:not([aria-label="Miga de pan"])>a:not(:has(img)):not(.button):hover){background:var(--ab-canvas)!important;color:var(--ab-ink)!important}
html:root body header .nav-links .button{min-height:40px;margin-left:8px;padding:0 16px;white-space:nowrap}
html:root body header .nav-links .button+.button{margin-left:4px}
html:root body header .nav-item .submenu{margin-top:0;border:1px solid var(--ab-line);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
html:root body header .nav-item .submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
html:root body header .nav-item .submenu a{color:var(--ab-ink)!important;font-weight:500}
html:root body header .nav-item .submenu a:is(:hover,:focus-visible){background:var(--ab-canvas)!important;color:var(--ab-ink)!important}
html:root body header .menu-toggle{width:40px;height:40px;border:0;border-radius:50%;background:var(--ab-canvas);color:var(--ab-ink)}
html:root body header .menu-toggle:hover{background:var(--ab-line)}
@media(max-width:980px){
  html:root body header nav:not([aria-label="Miga de pan"]){flex-wrap:wrap;padding:12px 0}
  html:root body header .nav-links{flex:none;width:100%;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border:1px solid var(--ab-line);border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);max-height:calc(100dvh - 200px);overflow-y:auto}
  html:root body header nav.is-open .nav-links{display:flex}
  html:root body header :is(.nav-links>a:not(.button),.nav-item>a){min-height:44px;display:flex;align-items:center;border-radius:8px}
  html:root body header .nav-item .submenu{position:static;display:none!important;margin:0 0 6px 14px;padding:0 0 0 10px;border:0;border-left:2px solid var(--ab-line);border-radius:0;box-shadow:none;background:transparent}
  html:root body header .nav-item.is-expanded .submenu{display:flex!important}
  html:root body header .nav-item .submenu::before{display:none}
  html:root body header .nav-item>a::after{margin:-3px 4px 0 auto}
  html:root body header .nav-item.is-expanded>a::after{transform:rotate(225deg);margin-top:3px}
  html:root body header .nav-links .button,html:root body header .nav-links .button+.button{width:100%;margin:6px 0 0}
  html:root body:has(nav.is-open) #dpc-tease{display:none!important}
}

/* HERO */
html:root body :is(.hero,.page-hero){background-color:var(--ab-ink)!important}
html:root body :is(.hero,.page-hero)::before{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.6))!important}
html:root body :is(.hero,.page-hero) a.button.button-primary{background:#fff!important;color:var(--ab-ink)!important;border-color:#fff!important;border-radius:9999px!important}
html:root body :is(.hero,.page-hero) a.button.button-secondary{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:9999px!important}

/* SECCIONES Y TARJETAS PLANAS */
html:root body :is(.band,.testimonials,.more-properties){background:var(--ab-canvas)!important}
html:root body :is(.card,.micro-copy,.stat,.service,.service-card,.trust-card,.trust-panel,.testimonial-card,.zone-card,.content-card,.summary-card,.lead-card,.feature,.fact,.step,.faq article,details){background:#fff!important;border:1px solid var(--ab-line)!important;border-radius:12px!important;box-shadow:none!important;color:var(--ab-ink)}
html:root body :is(.card,.service,.trust-card,.zone-card,.stat,.testimonial-card):hover{transform:none!important;box-shadow:none!important;border-color:var(--ab-line)!important}
html:root body :is(.card h3,.card h4,.micro-copy h5,.micro-copy h6,.zone-card h3,.content-card h2,.content-card h3,.summary-card h2,.lead-card h2,.lead-card h3){color:var(--ab-ink)!important}
html:root body :is(.card p,.micro-copy p,.lead,.zone-card p,.content-card p,.summary-card p,.lead-card p,.lead-card span,.lead-card label,.description){color:var(--ab-muted)!important}
html:root body :is(.stat strong,.stats strong){color:var(--ab-ink)!important}
html:root body .list li::before{background:var(--ab-canvas)!important;color:var(--ab-ink)!important}
html:root body :is(.service-icon,.chip){background:var(--ab-canvas)!important;color:var(--ab-ink)!important}
html:root body .cta{background:var(--ab-ink)!important}
html:root body .cta a.button.button-primary{background:#fff!important;color:var(--ab-ink)!important;border-color:#fff!important}
html:root body :is(footer,.site-footer){background:var(--ab-ink)!important}
html:root body .back-top{background:var(--ab-ink)!important}
html:root body main>article,html:root body main.wrap>article{background:#fff!important;border:1px solid var(--ab-line)!important;border-radius:12px!important;box-shadow:none!important}
html:root body article a:not(.button){color:var(--ab-ink)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
html:root body article :is(.hero-image,img){border-radius:12px}

/* TARJETAS DE PROPIEDAD: foto 1:1, texto debajo, sin borde ni sombra */
html:root body :is(.property-grid,.properties-grid){gap:32px 24px}
html:root body .property-card{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;transform:none!important}
html:root body .property-card:hover{transform:none!important;box-shadow:none!important}
html:root body .property-card .property-image{aspect-ratio:1/1;border-radius:12px;background:var(--ab-line)}
html:root body .property-card .property-image::after{display:none}
html:root body .property-card .property-image img{filter:none!important}
html:root body .property-card :is(.badge,.tag){left:12px;top:12px;background:#fff!important;color:var(--ab-ink)!important;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:0 1px 3px rgba(0,0,0,.18)}
html:root body .property-card .verified-badge{top:auto;bottom:10px;left:10px;background:#fff;color:var(--ab-ink);font-size:11px;font-weight:600}
html:root body .property-card :is(.body,.property-body){display:flex;flex-direction:column;gap:0;padding:12px 2px 0}
html:root body .property-card :is(.body>h3,.property-title,.property-body>h3){order:0;margin:0;font-size:15px;font-weight:600!important;color:var(--ab-ink)}
html:root body .property-card :is(.loc,.location){order:1;margin:2px 0 0;color:var(--ab-muted);font-size:14px}
html:root body .property-card :is(.feats,.features){order:2;display:flex;flex-wrap:wrap;gap:0 12px;margin:2px 0 0;padding:0;border:0}
html:root body .property-card :is(.feats,.features) span{padding:0;border:0;border-radius:0;background:none!important;color:var(--ab-muted);font-weight:400;font-size:14px}
html:root body .property-card :is(.feats,.features) span+span::before{content:"·";margin-right:12px}
html:root body .property-card .price{order:3;margin:6px 0 12px;color:var(--ab-ink)!important;font-size:16px;font-weight:700}
html:root body .property-card :is(.cta-row,.property-actions){order:4;display:grid;grid-template-columns:1fr;gap:4px;margin-top:auto}
html:root body .property-card :is(.cta-row,.property-actions) .button-primary{background:#fff!important;color:var(--ab-ink)!important;border:1px solid var(--ab-ink)!important}
html:root body .property-card :is(.cta-row,.property-actions) .button-primary:hover{background:var(--ab-canvas)!important}
html:root body .property-card .property-actions .button-secondary{min-height:36px;background:transparent!important;border:0!important;color:var(--ab-muted)!important;text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* MIGA DE PAN: antes heredaba el alto del menu principal y separaba los items */
html:root body nav[aria-label="Miga de pan"]{min-height:0;justify-content:flex-start;gap:8px;padding:14px 16px!important;font-size:13px!important;color:var(--ab-muted)!important}
html:root body nav[aria-label="Miga de pan"] a{color:var(--ab-ink)!important;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ENCABEZADO LIVIANO (articulos del blog): logo, tres enlaces y un boton, sin submenus */
html:root body header nav.wide{width:min(1180px,calc(100% - 32px));margin-inline:auto;justify-content:flex-end}
html:root body header nav.wide .brand{margin-right:auto}
html:root body header nav.wide .button{min-height:40px;margin-left:8px;padding:0 16px;white-space:nowrap}
@media(max-width:640px){html:root body header nav.wide>a:not(.brand):not(.keep):not(.button){display:none}}

/* BANNER LATERAL "Consigna tu propiedad": columna en el indice del blog, fijo junto al articulo en pantallas anchas */
.side-banner a{display:block;border-radius:12px;overflow:hidden}
.side-banner img{display:block;width:100%;height:auto;border-radius:12px}
@media(min-width:1100px){html:root body main.wrap:has(>.side-banner){width:min(1124px,calc(100% - 32px));display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;align-items:start}html:root body main.wrap>.side-banner{grid-column:2;grid-row:1;margin:0}}
@media(max-width:1099px){html:root body main.wrap>.side-banner{max-width:340px;margin:24px auto 0}}


/* GALERIA de proyectos (alianzas): la primera foto es vertical (edificio entero); ocupa dos filas en escritorio
   y todo el ancho en celular, en vez de recortarse a 4:3 como las demas */
html:root body .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
html:root body .gallery picture{display:block;position:relative;overflow:hidden;border-radius:12px;background:var(--ab-line)}
html:root body .gallery picture img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;box-shadow:none}
html:root body .gallery picture:first-child{grid-row:span 2}
html:root body .gallery picture:first-child img{position:absolute;inset:0;aspect-ratio:auto;object-position:center 30%}
@media(max-width:680px){
  html:root body .gallery{grid-template-columns:1fr 1fr;gap:8px}
  html:root body .gallery picture:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
}

/* Botones de las paginas de alianzas (clases .button.primary / .button.secondary) */
html:root body a.button.primary{background:var(--ab-ink)!important;color:#fff!important;border:1px solid var(--ab-ink)!important;border-radius:8px!important;box-shadow:none!important;font-weight:600}
html:root body a.button.secondary{background:#fff!important;color:var(--ab-ink)!important;border:1px solid var(--ab-ink)!important;border-radius:8px!important;box-shadow:none!important;font-weight:600}
html:root body :is(.hero,.page-hero) a.button.primary{background:#fff!important;color:var(--ab-ink)!important;border-color:#fff!important;border-radius:9999px!important}
html:root body :is(.hero,.page-hero) a.button.secondary{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:9999px!important}

/* Boton de menu (hamburguesa) para paginas que no lo definian en su propio CSS (alianzas) */
html:root body header .menu-toggle{display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
html:root body header .menu-toggle span,html:root body header .menu-toggle span::before,html:root body header .menu-toggle span::after{display:block;position:relative;width:20px;height:2px;border-radius:999px;background:currentColor;transition:transform .18s ease,top .18s ease}
html:root body header .menu-toggle span::before,html:root body header .menu-toggle span::after{content:"";position:absolute;left:0}
html:root body header .menu-toggle span::before{top:-7px}
html:root body header .menu-toggle span::after{top:7px}
html:root body header nav.is-open .menu-toggle span{background:transparent}
html:root body header nav.is-open .menu-toggle span::before{top:0;transform:rotate(45deg)}
html:root body header nav.is-open .menu-toggle span::after{top:0;transform:rotate(-45deg)}
@media(max-width:980px){html:root body header .menu-toggle{display:inline-flex;margin-left:auto}}

/* BOTON "VOLVER ARRIBA": el mismo en todo el sitio (circulo #222 con flecha, a la izquierda) */
.back-top{position:fixed;left:18px;bottom:92px;z-index:60;width:52px;height:52px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:#222;color:#fff;font:900 24px/1 Arial,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.back-top:hover,.back-top:focus-visible{transform:translateY(10px)}
.back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
html:root body .back-top{background:var(--ab-ink)!important;color:#fff!important;box-shadow:0 8px 20px rgba(0,0,0,.25)!important}
@media(max-width:680px){.back-top{left:14px;bottom:82px;width:48px;height:48px;font-size:22px}}

/* Cifras sobre portadas oscuras (catalogo): vidrio translucido con texto claro, no cajas blancas */
html:root body :is(.hero,.page-hero) .stat{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html:root body :is(.hero,.page-hero) .stat strong{color:#fff!important}
html:root body :is(.hero,.page-hero) .stat span{color:rgba(255,255,255,.82)!important}