/* Estilo unificado con la página de servicios: fondo carbón, tarjetas suaves, etiquetas rojas, pestañas en píldora. */
@font-face{font-family:"League Spartan";src:url("assets/fonts/LeagueSpartan.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Rubik Mono One";src:url("assets/fonts/RubikMonoOne.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Asimovian";src:url("assets/fonts/Asimovian.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
  --crema:#F2E4CB; --carbon:#393838; --fuego:#F23812; --naranja:#FF9449;
  --bg:#2A2929; --card:#373636; --line:rgba(242,228,203,.14); --muted:rgba(242,228,203,.72);
  --display:"League Spartan","Arial Black",system-ui,sans-serif;
  --mono:"Rubik Mono One","Arial Black",sans-serif;
  --r:18px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--crema);font-family:var(--display);font-size:18px;line-height:1.55;font-weight:500}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.in{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lab{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fuego)}
h2{font-size:clamp(30px,5vw,54px);font-weight:800;line-height:1.05;text-wrap:balance}
h2 em{font-style:normal;color:var(--fuego)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:.08em}
.brand img{width:44px;height:44px;border-radius:50%}
.brand img.wm{width:auto;height:30px;border-radius:0}
.links{display:flex;gap:8px;align-items:center;font-weight:700;font-size:16px}
.links a{text-decoration:none;padding:8px 16px;border-radius:999px;color:var(--muted)}
.links a:hover{color:var(--crema);background:rgba(242,228,203,.08)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--fuego);color:#fff;border:1px solid var(--fuego);border-radius:999px;padding:12px 26px;font-weight:700;font-size:17px;text-decoration:none;transition:filter .15s,background .15s;font-family:var(--display)}
.btn:hover{filter:brightness(1.12)}
.btn.alt,.btn.light{background:transparent;color:var(--crema);border-color:var(--line)}
.btn.alt:hover,.btn.light:hover{background:rgba(242,228,203,.08);filter:none}
.btn.light{border-color:rgba(242,228,203,.4)}
.links a.btn{color:#fff;padding:8px 20px}
.links a.btn:hover{background:var(--fuego)}
@media(max-width:760px){.links a:not(.btn){display:none}}

/* hero */
.hero{padding-block:32px 40px}
.hero .in{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:56px clamp(24px,5vw,64px) calc(12vw + 20px);background:radial-gradient(60% 70% at 78% 40%,rgba(242,56,18,.34),transparent 70%),linear-gradient(135deg,#3c3b3b,#393838)}
.hero .in::after{content:"";position:absolute;inset:auto 0 0;aspect-ratio:7.716;background:url("assets/img/olas-hero.webp") center bottom/100% 100% no-repeat;mix-blend-mode:lighten;pointer-events:none}
.hero .in>*{position:relative;z-index:1}
.hero h1{font-size:clamp(42px,7.5vw,92px);font-weight:800;line-height:.98;text-wrap:balance;margin-top:14px}
.hero h1 span{color:var(--fuego)}
.hero p.sub{font-size:clamp(18px,2vw,22px);max-width:36ch;margin-top:20px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.chips li{border:1px solid var(--line);background:rgba(0,0,0,.18);border-radius:999px;padding:6px 16px;font-size:15px;font-weight:600;color:var(--muted)}
.chips b{color:var(--crema);font-weight:800}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sticker{justify-self:center;align-self:end;width:min(100%,400px);margin-bottom:calc(-1 * (7vw + 12px));border-radius:30px;overflow:hidden;transform:rotate(2deg);box-shadow:0 24px 50px rgba(0,0,0,.5);border:1px solid rgba(242,228,203,.25);min-width:0}
.sticker img{width:100%}
@media(max-width:860px){.hero .in{grid-template-columns:1fr;padding-bottom:calc(13vw + 24px)}.sticker{width:min(100%,300px);margin-bottom:calc(-1 * (9vw + 10px))}}

/* franja */
.band{background:var(--fuego);color:#fff;overflow:hidden}
.band .track{display:flex;width:max-content;animation:mq 28s linear infinite}
.band span{font-weight:800;font-size:clamp(18px,2.4vw,26px);text-transform:uppercase;letter-spacing:.06em;padding:12px 22px;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band .track{animation:none}html{scroll-behavior:auto}}

section.s{padding-block:84px}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;max-width:780px}
.head p{font-size:19px;color:var(--muted)}
.head p.lab{font-size:13px;color:var(--fuego)}

/* servicios */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font-size:26px;font-weight:800;line-height:1.1}
.card p:not(.lab){font-size:17px;color:rgba(242,228,203,.9)}
.card{background:linear-gradient(120deg,#373636 0%,rgba(242,56,18,.55) 30%,#373636 55%,rgba(242,56,18,.4) 80%,#373636 100%);background-size:300% 300%;animation:flow 9s ease-in-out infinite;border-color:rgba(242,56,18,.4)}
.card:nth-child(2){animation-delay:-2s}.card:nth-child(3){animation-delay:-4s}.card:nth-child(4){animation-delay:-6s}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.card{animation:none}}
@media(max-width:1000px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}

/* proceso */
.proc{background:#242323;border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.step b{font-weight:800;font-size:40px;color:var(--fuego);line-height:1}
.step h3{font-size:24px;font-weight:800}
.step p{color:var(--muted)}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* proyectos */
.proj{padding-block:36px 52px;border-top:1px solid var(--line)}
.proj:first-of-type{border-top:0;padding-top:0}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.ph h3{font-size:clamp(30px,4.4vw,48px);font-weight:800;line-height:1.05}
.ph p{max-width:46ch;color:var(--muted);font-size:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 14px;font-weight:700;font-size:14px;color:var(--muted)}
.gal{display:grid;gap:14px}
.gal button{all:unset;cursor:zoom-in;display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);min-width:0}
.gal button:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gal button:hover img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.gal img{transition:none}}
.g-agua{grid-template-columns:repeat(6,1fr)}
.g-agua button:nth-child(1){grid-column:span 4;grid-row:span 2}
.g-agua button:nth-child(2),.g-agua button:nth-child(3){grid-column:span 2}
.g-agua button:nth-child(n+4){grid-column:span 2}
.g-eli{grid-template-columns:repeat(6,1fr)}
.g-eli button:nth-child(1){grid-column:span 2;grid-row:span 2}
.g-eli button:nth-child(2){grid-column:span 4}
.g-eli button:nth-child(3),.g-eli button:nth-child(4){grid-column:span 2}
.g-eli button:nth-child(5){grid-column:span 2}
.g-eli button:nth-child(6){grid-column:span 4}
.g-enc{display:block;columns:2 380px;column-gap:14px}
.g-enc button{width:100%;margin-bottom:14px;break-inside:avoid}
.g-encp{grid-template-columns:repeat(3,1fr)}
.subp{margin:12px 0 14px}
.g-mr{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){
  .g-agua,.g-eli,.g-mr,.g-encp{grid-template-columns:1fr 1fr}
  .gal button{grid-column:auto!important;grid-row:auto!important}
  .g-agua button:nth-child(1),.g-eli button:nth-child(5),.g-eli button:nth-child(6){grid-column:span 2!important}
}

/* sección inmobiliaria */
.eh{background:#242323;border-block:1px solid var(--line)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;padding:6px;border:1px solid var(--line);border-radius:26px;width:fit-content;max-width:100%;background:var(--bg)}
.tabs button{font:700 16px var(--display);background:transparent;color:var(--muted);border:0;border-radius:999px;padding:10px 22px;cursor:pointer}
.tabs button:hover{color:var(--crema)}
.tabs button[aria-selected="true"]{background:var(--fuego);color:#fff}
.panel[hidden]{display:none}
.sub2{margin:0 0 14px}
.eh button[data-lb]{all:unset;cursor:zoom-in;display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;min-width:0}
.eh button[data-lb]:focus-visible,.rail:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.eh button[data-lb] img{width:100%;height:auto;transition:transform .35s}
.eh button[data-lb]:hover img{transform:scale(1.03)}
.anim{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:24px;align-items:start}
.vf{margin:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.vf video{display:block;width:100%;height:auto;background:#000}
.v-logo video{transform:scale(1.8)}
.v-logo{background:#fdfdfd}
.vf figcaption{position:relative;z-index:1;padding:10px 16px;background:var(--card);color:var(--fuego)}
@media(max-width:820px){.anim{grid-template-columns:1fr}.v-story{max-width:340px}}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin-bottom:24px}
.rail button[data-lb]{flex:none;width:min(72vw,380px);scroll-snap-align:start}
.masonry{columns:3 260px;column-gap:14px}
.masonry button[data-lb]{margin:0 0 14px;break-inside:avoid}
.bro{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bro figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.bro figcaption{font-size:16px;color:var(--muted)}
.bro b{font-weight:800;color:var(--crema)}
@media(max-width:700px){.bro{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.eh button[data-lb] img{transition:none}}

/* videos */
.shorts{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 14px;scrollbar-color:var(--fuego) transparent}
.shorts:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.short{position:relative;display:block;flex:none;width:150px;scroll-snap-align:start;aspect-ratio:9/16;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);text-decoration:none;transition:transform .15s,border-color .15s;min-width:0;color:var(--crema)}
.short:hover{transform:translateY(-3px);border-color:rgba(242,56,18,.6)}
.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(30,29,29,.95))}
.short b{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;font-weight:700;font-size:13px;line-height:1.15}
.play{position:absolute;z-index:2;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--fuego);display:grid;place-items:center}
.play::after{content:"";border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
@media(max-width:560px){.short{width:128px}}

/* contacto */
.contact{text-align:center;background:radial-gradient(50% 80% at 50% 100%,rgba(242,56,18,.3),transparent 70%),#242323;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(38px,8vw,88px)}
.contact p:not(.lab):not(.small){font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:36ch;margin:20px auto 0}
.contact .cta{justify-content:center}
.contact .small{font-size:12px;font-weight:700;letter-spacing:.16em;margin-top:26px;color:var(--muted)}
footer{background:#242323;color:var(--muted)}
footer .wv{overflow:hidden;height:120px}
footer .waves{width:106%;max-width:none;margin-left:-3%;height:120px;object-fit:cover;object-position:center bottom}
footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 28px;font-weight:600;font-size:15px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(30,29,29,.94);display:none;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,0px)) 16px 20px}
.lb.on{display:flex}
.lb img{max-width:min(1200px,100%);max-height:86vh;width:auto;height:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.lb button{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));font:700 17px var(--display);background:var(--fuego);color:#fff;border:0;border-radius:999px;padding:8px 18px;cursor:pointer}
