:root {
  --ink: #101820;
  --ink-2: #17232d;
  --steel: #51606c;
  --paper: #f3f1ec;
  --white: #ffffff;
  --accent: #d59b42;
  --accent-light: #e8bc72;
  --line: rgba(16, 24, 32, 0.14);
  --max: 1180px;
  --shadow: 0 24px 70px rgba(8, 15, 20, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: #fff;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled {
  background: rgba(16, 24, 32, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0,0,0,.16);
}
.header-inner { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.42); color: var(--accent-light); font-weight: 800; letter-spacing: .08em;
  position: relative;
}
.brand-mark::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 13px; height: 13px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
.brand-copy small { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 5px; letter-spacing: .12em; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { position: relative; font-size: 13px; font-weight: 650; color: rgba(255,255,255,.83); }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--accent); transition:right .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { right:0; }
.main-nav a:hover, .main-nav a.active { color:#fff; }
.menu-toggle { display:none; border:0; background:transparent; width:44px; height:44px; padding:10px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; margin:5px 0; background:#fff; transition:.3s ease; }

.hero {
  min-height: 780px;
  height: 100svh;
  color: #fff;
  background:
    radial-gradient(circle at 78% 32%, rgba(213,155,66,.16), transparent 23%),
    linear-gradient(125deg, #0b1218 0%, #101820 50%, #1d2a34 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-grid { position:absolute; inset:0; z-index:-3; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right, transparent 0%, #000 40%, #000 100%); }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg, rgba(9,15,20,.78) 0 48%, rgba(9,15,20,.08) 78%); }
.hero-beam { position:absolute; z-index:-1; height:140%; width:2px; background:linear-gradient(to bottom, transparent, rgba(213,155,66,.7), transparent); transform:rotate(29deg); transform-origin:center; }
.hero-beam-a { right:31%; top:-20%; }
.hero-beam-b { right:22%; top:-18%; opacity:.35; }
.hero-inner { height:100%; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(330px,.65fr); align-items:center; gap:70px; padding-top:74px; }
.eyebrow, .kicker { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; }
.eyebrow { color:var(--accent-light); display:inline-flex; align-items:center; gap:12px; }
.eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
.hero h1 { margin:20px 0 20px; max-width:770px; font-size:clamp(44px, 6.6vw, 88px); line-height:.95; letter-spacing:-.055em; font-weight:760; }
.hero h1 span { display:block; margin-top:12px; font-size:.34em; line-height:1; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.54); font-weight:650; }
.hero-lead { font-size:clamp(18px,2vw,24px); color:rgba(255,255,255,.76); margin:0; }
.hero-lead i, .closing h2 i { color:var(--accent); font-style:normal; padding:0 .3em; }
.hero-person { display:flex; gap:18px; align-items:center; margin-top:30px; }
.hero-person .line { width:42px; height:1px; background:rgba(255,255,255,.26); }
.hero-person div { display:grid; }
.hero-person small { color:var(--accent-light); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-person strong { margin-top:3px; font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.btn { min-height:52px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; text-transform:uppercase; letter-spacing:.09em; font-weight:800; font-size:12px; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.btn:hover { transform:translateY(-3px); }
.btn svg { width:19px; fill:currentColor; }
.btn-primary { background:var(--accent); color:#12181d; }
.btn-primary:hover { background:var(--accent-light); }
.btn-secondary { border-color:rgba(255,255,255,.34); color:#fff; background:rgba(255,255,255,.03); }
.btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.hero-feature { justify-self:end; width:min(100%, 390px); }
.experience-card { position:relative; border:1px solid rgba(255,255,255,.19); background:rgba(12,19,25,.34); backdrop-filter:blur(9px); padding:46px 42px 38px; box-shadow:0 40px 80px rgba(0,0,0,.24); }
.corner { position:absolute; width:42px; height:42px; }
.corner-a { top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.corner-b { bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
.experience-number { font-size:clamp(104px,14vw,168px); line-height:.78; letter-spacing:-.08em; font-weight:800; color:var(--accent-light); }
.experience-card p { margin:28px 0 0; font-size:20px; line-height:1.1; color:rgba(255,255,255,.67); }
.experience-card p strong { color:#fff; font-size:1.2em; }
.specialty-strip { display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid rgba(255,255,255,.14); border-top:0; }
.specialty-strip span { padding:14px 8px; text-align:center; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.specialty-strip span + span { border-left:1px solid rgba(255,255,255,.14); }
.scroll-cue { position:absolute; left:50%; bottom:28px; width:28px; height:44px; border:1px solid rgba(255,255,255,.32); border-radius:20px; transform:translateX(-50%); display:flex; justify-content:center; }
.scroll-cue span { width:3px; height:7px; background:var(--accent); border-radius:2px; margin-top:9px; animation:scrollDot 1.7s ease-in-out infinite; }
@keyframes scrollDot { 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(13px); opacity:1;} }

.section { padding:110px 0; }
.section-heading { display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:start; margin-bottom:56px; }
.section-index { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.1em; padding-top:6px; }
.kicker { margin:0 0 10px; color:#8d6a34; }
.section-heading h2, .experience-copy h2, .contact h2, .closing h2 { margin:0; max-width:800px; font-size:clamp(36px,4.6vw,62px); line-height:1.02; letter-spacing:-.045em; }
.intro-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:68px; align-items:start; }
.intro-grid .section-heading { display:grid; grid-template-columns:52px 1fr; margin:0; }
.large-copy { margin:0; font-size:clamp(22px,2.7vw,34px); line-height:1.35; letter-spacing:-.025em; }
.intro-facts { margin-top:50px; display:grid; grid-template-columns:1fr 1.4fr; border-top:1px solid var(--line); }
.intro-facts > div { padding:28px 20px 0 0; display:grid; gap:4px; }
.intro-facts > div + div { border-left:1px solid var(--line); padding-left:28px; }
.intro-facts span { font-size:44px; line-height:1; font-weight:780; color:var(--accent); }
.intro-facts small { font-size:13px; color:var(--steel); }

.section-dark { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.section-dark::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 0 85%, rgba(255,255,255,.025) 85%), linear-gradient(0deg, transparent 0 85%, rgba(255,255,255,.025) 85%); background-size:80px 80px; }
.section-heading.light .section-index { color:var(--accent-light); }
.section-heading.light .kicker { color:var(--accent-light); }
.service-grid { display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid rgba(255,255,255,.12); position:relative; z-index:1; }
.service-card { min-height:330px; padding:34px; position:relative; overflow:hidden; transition:background .3s ease, transform .3s ease; }
.service-card + .service-card { border-left:1px solid rgba(255,255,255,.12); }
.service-card:hover { background:rgba(255,255,255,.05); }
.service-card::after { content:""; position:absolute; width:130px; height:130px; border:1px solid rgba(213,155,66,.22); right:-76px; bottom:-76px; transform:rotate(45deg); transition:.4s ease; }
.service-card:hover::after { right:-55px; bottom:-55px; }
.service-icon { width:64px; height:64px; display:grid; place-items:center; margin-bottom:68px; color:var(--accent-light); }
.service-icon svg { width:54px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.service-card > span { position:absolute; top:30px; right:30px; color:rgba(255,255,255,.28); font-size:11px; letter-spacing:.12em; }
.service-card h3 { margin:0 0 10px; font-size:28px; }
.service-card p { margin:0; color:rgba(255,255,255,.58); }
.other-services { margin-top:62px; position:relative; z-index:1; }
.other-title { color:var(--accent-light); text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:12px; }
.other-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.other-item { display:flex; gap:18px; align-items:center; padding:25px 28px; border-top:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.09); }
.plus { color:var(--accent-light); font-size:26px; font-weight:300; }
.other-item h3 { margin:0; font-size:18px; font-weight:640; }

.experience-section { background:#e9e5dd; position:relative; overflow:hidden; }
.experience-layout { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:72px; }
.experience-visual { min-height:490px; position:relative; display:flex; align-items:flex-end; border-left:1px solid rgba(16,24,32,.18); border-bottom:1px solid rgba(16,24,32,.18); padding:0 0 24px 24px; }
.giant-number { font-size:clamp(170px,29vw,360px); line-height:.69; letter-spacing:-.105em; font-weight:820; color:var(--ink); z-index:2; }
.years-label { position:absolute; top:24px; left:30px; writing-mode:vertical-rl; letter-spacing:.35em; font-size:11px; font-weight:800; color:#7c6a4f; }
.blueprint-lines span { position:absolute; background:rgba(16,24,32,.12); }
.blueprint-lines span:nth-child(1){ width:1px; top:0; bottom:0; left:30%; }
.blueprint-lines span:nth-child(2){ width:1px; top:0; bottom:0; left:68%; }
.blueprint-lines span:nth-child(3){ height:1px; left:0; right:0; top:33%; }
.blueprint-lines span:nth-child(4){ height:1px; left:0; right:0; top:67%; }
.experience-copy .kicker { color:#8d6a34; }
.experience-copy p:not(.kicker) { margin:28px 0 4px; font-size:20px; }
.experience-copy strong { display:block; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:#4f5b64; }

.coverage { background:var(--paper); }
.coverage-board { min-height:330px; display:grid; grid-template-columns:1fr 2.3fr; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.coverage-core { background:var(--ink); color:#fff; padding:40px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.coverage-core::before { content:""; position:absolute; inset:24px; border:1px solid rgba(255,255,255,.13); }
.coverage-core::after { content:""; width:180px; height:180px; position:absolute; right:-90px; top:-90px; border-radius:50%; border:1px solid rgba(213,155,66,.5); }
.coverage-core span { color:var(--accent-light); text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:11px; position:relative; }
.coverage-core strong { margin-top:7px; font-size:32px; line-height:1; position:relative; }
.locations { display:grid; grid-template-columns:repeat(2, 1fr); align-content:stretch; }
.locations span { min-height:82px; display:flex; align-items:center; padding:18px 26px; border-bottom:1px solid var(--line); font-size:18px; font-weight:650; position:relative; }
.locations span:nth-child(odd) { border-right:1px solid var(--line); }
.locations span:nth-last-child(-n+2) { border-bottom:0; }
.locations span::before { content:""; width:7px; height:7px; background:var(--accent); margin-right:14px; transform:rotate(45deg); }

.section-accent { background:var(--accent); }
.contact-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:start; }
.contact .kicker { color:#3b2d18; }
.contact h2 { max-width:500px; }
.contact-name { margin:26px 0 0; font-weight:700; }
.contact-list { border-top:1px solid rgba(16,24,32,.3); }
.contact-row { display:grid; grid-template-columns:150px 1fr auto; gap:18px; align-items:center; min-height:95px; border-bottom:1px solid rgba(16,24,32,.3); transition:padding-left .25s ease, background .25s ease; }
.contact-row:hover { padding-left:14px; background:rgba(255,255,255,.11); }
.contact-label { text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; opacity:.68; }
.contact-row strong { font-size:clamp(16px,2vw,21px); overflow-wrap:anywhere; }
.arrow { font-size:25px; }

.closing { background:#fff; text-align:center; }
.closing-inner { display:flex; flex-direction:column; align-items:center; }
.eyebrow.dark { color:#8d6a34; }
.closing h2 { margin-top:22px; }
.closing p { font-size:18px; color:var(--steel); margin:18px 0 30px; }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#24333e; }

.site-footer { background:#0b1218; color:#fff; padding:46px 0; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:50px; align-items:start; }
.site-footer strong { display:block; }
.site-footer p { margin:6px 0 0; color:rgba(255,255,255,.52); font-size:13px; }
.footer-contact { display:grid; gap:7px; color:rgba(255,255,255,.65); font-size:13px; }
.footer-contact a:hover { color:var(--accent-light); }
.back-top { width:45px; height:45px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:var(--accent-light); font-size:20px; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#07140c; box-shadow:0 14px 38px rgba(0,0,0,.24); transition:transform .25s ease; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.04); }
.whatsapp-float svg { width:29px; fill:currentColor; }

/* El contenido es visible por defecto. JavaScript solo activa la animación,
   por lo que la página nunca queda en blanco si JS no se ejecuta. */
.reveal { opacity:1; transform:none; transition:opacity .72s ease, transform .72s cubic-bezier(.2,.75,.25,1); }
.reveal.reveal-ready { opacity:0; transform:translateY(28px); }
.reveal.delay-1 { transition-delay:.12s; }
.reveal.delay-2 { transition-delay:.22s; }
.reveal.reveal-ready.visible { opacity:1; transform:translateY(0); }

@media (max-width: 960px) {
  .hero { min-height: 860px; height:auto; }
  .hero-inner { min-height:860px; grid-template-columns:1fr; gap:35px; padding-top:130px; padding-bottom:100px; }
  .hero-feature { justify-self:start; width:min(100%,470px); }
  .experience-card { padding:32px; display:flex; align-items:flex-end; gap:25px; }
  .experience-number { font-size:116px; }
  .experience-card p { margin:0 0 6px; }
  .scroll-cue { display:none; }
  .intro-grid, .experience-layout, .contact-layout { grid-template-columns:1fr; }
  .service-card { min-height:300px; }
  .service-icon { margin-bottom:46px; }
  .coverage-board { grid-template-columns:1fr; }
  .coverage-core { min-height:180px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .back-top { grid-column:2; justify-self:end; }
}

@media (max-width: 760px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .header-inner { height:74px; }
  .brand-mark { width:42px; height:42px; }
  .brand-copy strong { font-size:11px; }
  .brand-copy small { font-size:9px; }
  .menu-toggle { display:block; z-index:102; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .main-nav { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px; background:rgba(11,18,24,.98); opacity:0; visibility:hidden; transform:translateY(-10px); transition:.3s ease; }
  .main-nav.open { opacity:1; visibility:visible; transform:translateY(0); }
  .main-nav a { font-size:22px; }
  .hero { min-height:820px; }
  .hero-inner { min-height:820px; padding-top:112px; padding-bottom:70px; }
  .hero h1 { font-size:clamp(43px,13vw,64px); }
  .hero h1 span { font-size:.3em; line-height:1.25; }
  .hero-lead { line-height:1.35; }
  .hero-person { margin-top:24px; }
  .hero-actions { width:100%; }
  .hero-actions .btn { flex:1 1 180px; }
  .hero-feature { width:100%; }
  .experience-card { gap:20px; padding:25px; }
  .experience-number { font-size:95px; }
  .experience-card p { font-size:17px; }
  .specialty-strip span { font-size:9px; padding-inline:4px; }
  .section { padding:78px 0; }
  .section-heading { grid-template-columns:42px 1fr; gap:12px; margin-bottom:38px; }
  .section-heading h2, .experience-copy h2, .contact h2, .closing h2 { font-size:clamp(34px,10vw,48px); }
  .intro-grid { gap:34px; }
  .intro-grid .section-heading { grid-template-columns:42px 1fr; }
  .intro-facts { grid-template-columns:1fr; }
  .intro-facts > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; margin-top:18px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; padding:28px; }
  .service-card + .service-card { border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .service-icon { margin-bottom:42px; }
  .other-grid { grid-template-columns:1fr; }
  .experience-layout { gap:44px; }
  .experience-visual { min-height:330px; }
  .giant-number { font-size:clamp(160px,58vw,260px); }
  .coverage-board { box-shadow:0 18px 50px rgba(8,15,20,.1); }
  .locations { grid-template-columns:1fr; }
  .locations span { min-height:65px; border-right:0 !important; border-bottom:1px solid var(--line) !important; }
  .locations span:last-child { border-bottom:0 !important; }
  .contact-layout { gap:40px; }
  .contact-row { grid-template-columns:1fr auto; padding:16px 0; gap:8px 14px; }
  .contact-label { grid-column:1 / -1; }
  .contact-row strong { font-size:16px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .back-top { grid-column:1; justify-self:start; }
  .whatsapp-float { width:54px; height:54px; right:16px; bottom:16px; }
}

@media (max-width: 420px) {
  .brand-copy strong { white-space:normal; max-width:190px; }
  .hero h1 { font-size:42px; }
  .experience-card { align-items:center; }
  .experience-number { font-size:82px; }
  .experience-card p { font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .reveal, .reveal.reveal-ready { opacity:1; transform:none; }
}