:root { --navy:#0b2732; --gold:#c9a46a; --white:#f7fafb; --muted:#cfdae0; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { background:var(--navy); color:var(--white); font-family:"Segoe UI",Inter,Helvetica,Arial,sans-serif; }
.site-shell { position:relative; display:grid; min-height:100svh; overflow:hidden; isolation:isolate; }
.backdrop,.overlay { position:absolute; inset:0; }
.backdrop { z-index:-3; background:url("assets/derecho-laboral.jpg") center/cover no-repeat; transform:scale(1.02); }
.overlay { z-index:-2; background:linear-gradient(90deg,rgba(5,23,31,.97) 0%,rgba(5,23,31,.91) 42%,rgba(5,23,31,.56) 72%,rgba(5,23,31,.7) 100%); }
.content { align-self:center; width:min(690px,calc(100% - 48px)); margin-left:clamp(24px,9vw,150px); padding:clamp(42px,7vh,90px) 0 90px; animation:enter .7s ease-out both; }
.logo { width:clamp(230px,29vw,325px); height:auto; object-fit:contain; filter:drop-shadow(0 5px 16px rgba(0,0,0,.25)); }
.rule { width:54px; height:3px; margin:34px 0 28px; background:var(--gold); }
.eyebrow { margin:0 0 14px; color:#92d4df; font-size:.78rem; font-weight:700; letter-spacing:.2em; line-height:1.5; text-transform:uppercase; }
h1 { max-width:680px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.45rem,5vw,4.8rem); font-weight:500; letter-spacing:-.035em; line-height:1.04; text-wrap:balance; }
.lead { max-width:590px; margin:25px 0 0; color:var(--muted); font-size:clamp(1rem,1.4vw,1.17rem); line-height:1.75; }
.contact-button { display:inline-flex; align-items:center; gap:11px; margin-top:34px; padding:15px 22px; border:1px solid rgba(147,215,226,.38); border-radius:4px; background:rgba(15,117,136,.84); box-shadow:0 12px 34px rgba(0,0,0,.2); color:#fff; font-size:.98rem; font-weight:650; text-decoration:none; transition:.18s ease; }
.contact-button:hover,.contact-button:focus-visible { background:#168da5; box-shadow:0 15px 40px rgba(0,0,0,.29); transform:translateY(-2px); }
.contact-button:focus-visible { outline:3px solid rgba(201,164,106,.72); outline-offset:4px; }
.location { margin:26px 0 0; color:rgba(234,244,246,.68); font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
footer { position:absolute; right:clamp(24px,4vw,64px); bottom:25px; color:rgba(235,242,244,.58); font-size:.73rem; letter-spacing:.04em; }
footer p { margin:0; }
@keyframes enter { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:720px) {
  .backdrop{background-position:58% center}.overlay{background:linear-gradient(180deg,rgba(5,23,31,.91),rgba(5,23,31,.94))}
  .content{width:calc(100% - 40px);margin:0 auto;padding:42px 0 92px}.logo{width:260px;max-width:80vw}
  .rule{margin:27px 0 24px}h1{font-size:clamp(2.35rem,12vw,3.65rem)}.contact-button{width:100%;justify-content:center;font-size:.92rem}
  footer{right:auto;bottom:19px;left:20px}
}
@media(prefers-reduced-motion:reduce){.content{animation:none}.contact-button{transition:none}}