/* ═══════════════════════════════════════════════════════════
   Loyal Propiedades — base (tokens, kit, header, footer)
   Compartido por todas las plantillas Loyal. No depende del tema.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#272626;
  --mauve:#B09191;
  --mauve-deep:#8C6B6B;   /* mismo tono, más oscuro: solo para texto chico sobre claro */
  --stone:#D4CDCD;
  --sand:#EBEAE6;
  --line:#D9D9D9;
  --white:#FFFFFF;
  --r:22px;               /* tarjetas, bloques y fotos */
  --r-s:14px;             /* campos y elementos chicos */
  --pill:999px;           /* botones, chips y etiquetas */
  --wrap:1240px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --hdr-top:0px;
}
.admin-bar{--hdr-top:32px}
@media (max-width:782px){.admin-bar{--hdr-top:46px}}

body.lyl *,body.lyl *::before,body.lyl *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.lyl,body.lyl.custom-background{font-family:'Open Sans',system-ui,sans-serif;color:var(--ink);background:var(--white);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}
body.lyl img{display:block;max-width:100%;height:auto}
body.lyl a{color:inherit;text-decoration:none}
body.lyl button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:none;box-shadow:none}
body.lyl select{font:inherit;color:inherit}
body.lyl :focus-visible{outline:2px solid var(--mauve);outline-offset:3px}
body.lyl h1,body.lyl h2,body.lyl h3,body.lyl h4{font-family:inherit;color:inherit}
.lyl .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.lyl section{position:relative;scroll-margin-top:64px}

/* ───────── Piezas del kit ───────── */
.lyl .kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.lyl .kicker::before{content:"→";color:var(--mauve);font-size:13px;letter-spacing:0}
.lyl .kicker.on-dark{color:var(--white)}
.lyl .h2{font-size:clamp(30px,3.4vw,40px);line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.lyl .h2 .lt{font-weight:400}
.lyl .lead{font-size:16px;line-height:1.65;color:#4b4848;max-width:54ch}
.lyl .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 28px;border-radius:var(--pill);font-size:13px;font-weight:600;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .15s}
.lyl .btn:active{transform:scale(.98)}
.lyl .btn-dark{background:var(--ink);color:var(--white)}
.lyl .btn-dark:hover{background:#000}
.lyl .btn-mauve{background:var(--mauve);color:var(--white)}
.lyl .btn-mauve:hover{background:#9c7c7c}
.lyl .btn-line{border:1px solid rgba(255,255,255,.4);color:var(--white)}
.lyl .btn-line:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.lyl .btn-ar{padding:0 7px 0 26px;gap:16px}
.lyl .btn-ar i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;transition:transform .35s var(--ease)}
.lyl .btn-ar:hover i{transform:translateX(3px)}
.lyl .btn-ghost{background:transparent;color:var(--ink);padding-left:22px}
.lyl .btn-ghost i{background:var(--ink);color:var(--white)}
.lyl .btn-ghost:hover{background:var(--sand)}
.lyl .lnk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;position:relative;padding-bottom:3px}
.lyl .lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lyl .lnk:hover::after{transform:scaleX(1)}
.lyl .sq{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:background .25s,color .25s,border-color .25s}
.lyl .sq:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.lyl .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.lyl .sec-head .kicker{margin-bottom:16px}

/* ───────── Aparición al hacer scroll ───────── */
.js .lyl .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .lyl .rv.in{opacity:1;transform:none}
.js .lyl .ld{animation:lyl-ld .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes lyl-ld{from{opacity:0;transform:translateY(22px)}}

/* ───────── Header ───────── */
.lyl .hdr{position:fixed;top:var(--hdr-top);left:0;right:0;z-index:50;background:var(--ink);color:var(--white);transition:box-shadow .3s}
.lyl .hdr.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.lyl .hdr-in{max-width:1400px;margin:0 auto;padding:0 var(--pad);height:76px;display:flex;align-items:center;gap:32px;transition:height .35s var(--ease)}
.lyl .hdr.scrolled .hdr-in{height:64px}
.lyl .brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lyl .brand .iso{height:34px;width:auto;transition:height .35s var(--ease)}
.lyl .brand .wm{height:27px;width:auto;transition:height .35s var(--ease)}
.lyl .hdr.scrolled .brand .iso{height:30px}
.lyl .hdr.scrolled .brand .wm{height:24px}
.lyl .nav{display:flex;gap:26px;margin-left:auto}
.lyl .nav a{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:8px 0;transition:color .25s}
.lyl .nav a:hover{color:var(--mauve)}
.lyl .ing{position:relative}
.lyl .ing-btn{height:36px;padding:0 18px;border-radius:var(--pill);background:var(--mauve);color:var(--white);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:background .25s}
.lyl .ing-btn:hover{background:#9c7c7c}
.lyl .ing-btn i{font-style:normal;font-size:9px;transition:transform .3s}
.lyl .ing.open .ing-btn i{transform:rotate(180deg)}
.lyl .ing-pop{position:absolute;right:0;top:calc(100% + 14px);width:340px;background:var(--white);color:var(--ink);border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(0,0,0,.4);padding:8px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.lyl .ing.open .ing-pop{opacity:1;transform:none;pointer-events:auto}
.lyl .ing-pop p{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mauve-deep);padding:10px 12px 6px}
.lyl .ing-pop a{display:flex;gap:14px;padding:14px 12px;border-radius:12px;transition:background .2s}
.lyl .ing-pop a:hover{background:var(--sand)}
.lyl .ing-pop a b{display:block;font-size:14px;font-weight:700}
.lyl .ing-pop a small{display:block;font-size:12px;line-height:1.45;color:#5c5959}
.lyl .ing-pop .ic{width:40px;height:40px;border-radius:12px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--white);font-size:16px}
.lyl .ing-pop .ic img{height:24px;width:auto}
.lyl .ing-pop .ic.mv{background:var(--mauve)}
.lyl .burger{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.lyl .burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--white);transition:transform .3s var(--ease),top .3s var(--ease)}
.lyl .burger span:first-child{top:17px}.lyl .burger span:last-child{top:26px}
.lyl.menu-open .burger span:first-child{top:21.5px;transform:rotate(45deg)}
.lyl.menu-open .burger span:last-child{top:21.5px;transform:rotate(-45deg)}

/* ───────── Footer ───────── */
.lyl .ftr{background:var(--ink);color:var(--white);padding:72px 0 32px}
.lyl .ftr-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1fr;gap:40px 32px}
.lyl .ftr .brand{margin-bottom:22px}
.lyl .ftr p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.7)}
.lyl .ftr p a:hover{color:var(--white)}
.lyl .ftr h4,.lyl .ftr .fh{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;color:var(--mauve)}
.lyl .ftr ul{list-style:none}
.lyl .ftr li{list-style:none;margin-bottom:9px}
.lyl .ftr li a{font-size:13px;color:rgba(255,255,255,.8);transition:color .2s}
.lyl .ftr li a:hover{color:var(--white)}
.lyl .ftr .soc a{font-size:11px;font-weight:600;letter-spacing:.12em}
.lyl .ftr .legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:11px;line-height:1.7;color:rgba(255,255,255,.5)}

/* ───────── WhatsApp flotante ───────── */
.lyl .wa{position:fixed;right:20px;bottom:20px;z-index:40;height:48px;padding:0 20px 0 16px;border-radius:var(--pill);background:var(--ink);color:var(--white);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:background .25s,transform .25s}
.lyl .wa:hover{background:#000;transform:translateY(-2px)}
.lyl .wa svg{width:20px;height:20px;fill:var(--mauve)}

/* ───────── Responsive (base) ───────── */
@media (max-width:1080px){
  .lyl .nav{display:none}
  .lyl .burger{display:block}
  .lyl .ing{order:3}
  .lyl .hdr-in{gap:14px}
  .lyl.menu-open .nav{display:flex;position:fixed;top:calc(64px + var(--hdr-top));left:0;right:0;bottom:0;background:var(--ink);flex-direction:column;gap:0;padding:12px var(--pad);margin:0}
  .lyl.menu-open .hdr-in{height:64px}
  .lyl.menu-open .nav a{font-size:22px;letter-spacing:0;text-transform:none;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14)}
}
@media (max-width:900px){
  .lyl .ftr-grid{grid-template-columns:1fr 1fr}
  .lyl .ftr-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .lyl .brand .wm{height:24px}.lyl .brand .iso{height:30px}
  .lyl .ing-btn{padding:0 12px}
  .lyl .ing-pop{width:min(340px,calc(100vw - 32px));right:-58px}
  .lyl .wa span{display:none}.lyl .wa{padding:0 13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lyl *,.lyl *::before,.lyl *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .lyl .rv{opacity:1;transform:none}
}

/* ───────── Selector de idioma ───────── */
.lyl .lang{display:flex;gap:2px;font-size:10px;font-weight:600;letter-spacing:.08em}
.lyl .lang a{padding:6px 10px;border-radius:var(--pill);opacity:.5;transition:opacity .2s,background .2s}
.lyl .lang a:hover{opacity:1}
.lyl .lang a.on{opacity:1;background:rgba(255,255,255,.12)}
@media (max-width:1080px){.lyl .lang{order:2;margin-left:auto}.lyl .burger{margin-left:0;order:4}}
@media (max-width:400px){.lyl .lang a{padding:6px 7px}}

/* ───────── Tarjeta de propiedad (compartida) ───────── */
.lyl .card{flex:0 0 min(340px,82vw);scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;animation:lyl-cardIn .6s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
@keyframes lyl-cardIn{from{opacity:0;transform:translateY(16px)}}
.lyl .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(39,38,38,.5);border-color:#c4c0c0}
.lyl .card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.lyl .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.lyl .card:hover .ph img{transform:scale(1.05)}
.lyl .card .tags{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:1}
.lyl .card .tags span{background:rgba(39,38,38,.86);color:var(--white);font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--pill)}
.lyl .card .tags span.new{background:var(--mauve)}
.lyl .card .loc{position:absolute;left:14px;bottom:12px;color:var(--white);font-size:12px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6);z-index:1}
.lyl .card .ph::after{content:"";position:absolute;inset:55% 0 0 0;background:linear-gradient(180deg,rgba(39,38,38,0),rgba(39,38,38,.55));pointer-events:none}
.lyl .card .bd{padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.lyl .card .price{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lyl .card .price small{font-size:12px;font-weight:400;color:#6a6666}
.lyl .card .tt{font-size:14px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lyl .card .specs{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:12px;color:#5c5959;align-items:center;min-height:33px}
.lyl .card .specs b{color:var(--ink)}
.lyl .card .specs .see{margin-left:auto;font-weight:700;color:var(--mauve-deep);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.lyl .card:hover .specs .see{opacity:1;transform:none}
.lyl .empty{padding:48px 0;color:#5c5959}

/* ───────── Tarjeta de nota (compartida) ───────── */
.lyl .ncard{display:flex;flex-direction:column;gap:16px}
.lyl .ncard .im{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.lyl .ncard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.lyl .ncard:hover .im img{transform:scale(1.05)}
.lyl .ncard small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mauve-deep)}
.lyl .ncard small span{color:#6a6666}
.lyl .ncard b{font-size:clamp(19px,1.7vw,23px);font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;transition:color .3s}
.lyl .ncard:hover b{color:var(--mauve-deep)}

/* ───────── CTA final (compartido) ───────── */
.lyl .cta{position:relative;background:var(--ink);color:var(--white);min-height:min(92svh,820px);display:flex;justify-content:center;overflow:hidden;text-align:center}
.lyl .cta-bg{position:absolute;inset:0;overflow:hidden}
.lyl .cta-bg img{width:100%;height:116%;object-fit:cover;object-position:center bottom;will-change:transform}
.lyl .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,38,38,.28) 0%,rgba(39,38,38,.08) 55%,rgba(39,38,38,0) 100%)}
.lyl .cta-in{position:relative;padding:clamp(72px,11vh,130px) var(--pad) 0;display:flex;flex-direction:column;align-items:center;gap:30px}
.lyl .cta-in img{height:56px;width:auto}
.lyl .cta .btn{background:var(--ink);color:var(--white)}
.lyl .cta .btn:hover{background:var(--mauve)}
.lyl .cta .h2{font-size:clamp(30px,3.8vw,52px);font-weight:600;line-height:1.05;letter-spacing:-.02em;max-width:13em;text-shadow:0 2px 30px rgba(39,38,38,.25)}
.lyl .burger,.lyl .ing,.lyl .lang{flex-shrink:0}
