:root{
  --petrol:#0D2329; --petrol-2:#173A42; --turq:#16B4CC; --turq-deep:#0B7A8C;
  --paper:#F3F4F1; --mist:#C9D3D5; --muted:#5B6E72; --rule:rgba(13,35,41,.14);
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --wrap:1200px; --pad:clamp(16px,4vw,40px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--sans); color:var(--petrol); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
ul,ol{ list-style:none; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--turq); color:var(--petrol); padding:8px 14px; z-index:100; border-radius:4px; font-weight:700; }
.skip:focus{ left:8px; }
:focus-visible{ outline:2px solid var(--turq); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.dark{ background:var(--petrol); color:#fff; }
.paper{ background:var(--paper); }
.sec{ padding:clamp(72px,10vw,128px) 0; }

.eyebrow{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--turq-deep); margin-bottom:16px; }
.dark .eyebrow{ color:var(--turq); }
h1,h2,h3{ font-weight:500; letter-spacing:-.025em; line-height:1.05; }
h2{ font-size:clamp(2rem,4.4vw,3.3rem); }
h2 em, h1 em{ font-family:var(--serif); font-weight:400; letter-spacing:0; color:var(--turq-deep); }
.dark h2 em, .dark h1 em{ color:var(--turq); }
h3{ font-size:1.35rem; }
p{ color:#2B3E43; }
.dark p{ color:rgba(255,255,255,.76); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55; color:var(--petrol); }
.dark .lead{ color:#fff; }
p + p{ margin-top:14px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--turq); color:var(--petrol); font-weight:800; font-size:.95rem; text-decoration:none; padding:14px 26px; border-radius:999px; border:0; cursor:pointer; transition:transform .2s, background-color .2s; font-family:inherit; }
.btn:hover{ background:#3cc6db; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn.ghost:hover{ box-shadow:inset 0 0 0 1.5px #fff; }
.btn.sm{ padding:9px 18px; font-size:.85rem; }
.link{ color:var(--turq-deep); font-weight:700; text-decoration:none; }
.dark .link{ color:var(--turq); }
.link:hover{ text-decoration:underline; }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(13,35,41,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .iso{ width:26px; height:26px; }
.brand img{ height:20px; width:auto; }
.nav ul{ display:flex; align-items:center; gap:28px; }
.nav ul a:not(.btn){ color:rgba(255,255,255,.8); text-decoration:none; font-size:.92rem; font-weight:600; }
.nav ul a:not(.btn):hover{ color:#fff; }
.menu-btn{ display:none; background:none; border:0; width:40px; height:40px; cursor:pointer; position:relative; }
.menu-btn i{ position:absolute; left:9px; right:9px; height:2px; background:#fff; transition:transform .2s; }
.menu-btn i:first-of-type{ top:15px; } .menu-btn i:last-of-type{ top:23px; }
.menu-btn[aria-expanded="true"] i:first-of-type{ transform:translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type{ transform:translateY(-4px) rotate(-45deg); }
@media (max-width:820px){
  .menu-btn{ display:block; }
  .nav ul{ display:none; position:absolute; left:0; right:0; top:68px; background:var(--petrol); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--pad) 20px; border-bottom:1px solid rgba(255,255,255,.1); }
  .nav ul.open{ display:flex; }
  .nav ul li a:not(.btn){ display:block; padding:14px 0; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav ul li:last-child{ margin-top:16px; }
  .nav ul .btn{ width:100%; padding:14px; }
}

/* hero */
.hero{ position:relative; overflow:hidden; }
.hero-in{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(72px,9vw,120px); }
.hero h1{ font-size:clamp(2.6rem,6.2vw,5.2rem); }
.hero h1 span{ display:block; }
.hero h1 em{ display:block; margin-top:6px; }
.hero .lead{ margin-top:24px; max-width:34em; color:rgba(255,255,255,.78); }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-img img{ border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.35); aspect-ratio:1; object-fit:cover; }
.band{ height:10px; background:var(--turq); }
@media (max-width:860px){ .hero-in{ grid-template-columns:1fr; } .hero-img{ order:-1; max-width:420px; } }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pills li{ font-size:.82rem; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--rule); }

/* manifesto */
.manifesto{ padding:clamp(80px,12vw,150px) 0; }
.manifesto blockquote{ font-family:var(--serif); font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.05; max-width:16em; }
.manifesto blockquote em{ color:var(--turq); }

/* section head */
.head{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:end; margin-bottom:clamp(36px,5vw,56px); }
@media (max-width:820px){ .head{ grid-template-columns:1fr; } }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:s; }
.steps li{ background:#fff; border-radius:8px; padding:24px 20px; display:flex; flex-direction:column; gap:6px; min-height:220px; }
.steps li.on{ background:var(--petrol); color:#fff; }
.steps li.on p{ color:rgba(255,255,255,.75); }
.steps span{ font-family:var(--serif); font-size:2.4rem; color:var(--turq); line-height:1; margin-bottom:auto; }
.steps b{ font-size:1.15rem; margin-top:28px; }
.steps p{ font-size:.92rem; line-height:1.5; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr; } .steps li{ min-height:0; } .steps b{ margin-top:12px; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* work */
.featured{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.feat{ display:flex; flex-direction:column; gap:16px; }
.feat-img{ display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--paper); }
.feat-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.feat-img:hover img{ transform:scale(1.03); }
.soon{ position:relative; display:flex; align-items:center; justify-content:center; }
.soon span{ font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:#fff; position:relative; }
.soon::after{ content:"Imágenes próximamente"; position:absolute; bottom:14px; left:16px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.7); }
.soon.back{ background:radial-gradient(120% 90% at 20% 10%, #2b2420 0%, #12100f 70%); }
.soon.back span{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,4vw,3.2rem); letter-spacing:.2em; }
.soon.orbit{ background:radial-gradient(60% 60% at 70% 30%, #1f5f6e 0%, #0a1a24 60%, #05090f 100%); }
.soon.orbit::before{ content:""; position:absolute; width:58%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(22,180,204,.5); }
.tag{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--turq-deep); }
.feat h3{ margin:6px 0 6px; }
.feat p{ font-size:.95rem; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid a{ display:flex; flex-direction:column; gap:10px; text-decoration:none; }
.grid picture{ display:block; aspect-ratio:808/632; border-radius:8px; overflow:hidden; background:var(--paper); }
.grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.grid a:hover img{ transform:scale(1.04); }
.grid span{ font-size:.82rem; color:var(--muted); line-height:1.4; }
.grid span b{ display:block; color:var(--petrol); font-size:1rem; }
.more{ margin-top:36px; text-align:center; }
@media (max-width:980px){ .featured{ grid-template-columns:1fr 1fr; } .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .featured{ grid-template-columns:1fr; } }

/* plans */
.plans{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.plan{ background:#fff; border-radius:10px; padding:26px 22px; display:flex; flex-direction:column; position:relative; border:1px solid var(--rule); }
.plan.hl{ background:var(--petrol); color:#fff; border-color:var(--petrol); }
.plan.hl p, .plan.hl li{ color:rgba(255,255,255,.8); }
.pn{ font-family:var(--serif); font-size:2rem; color:var(--turq); line-height:1; }
.plan h3{ margin-top:10px; }
.plan .for{ font-size:.86rem; color:var(--muted); margin-top:6px; min-height:4.2em; line-height:1.45; }
.price{ font-size:2rem; font-weight:600; letter-spacing:-.02em; margin-top:14px; color:inherit !important; }
.price small{ font-size:.8rem; font-weight:600; color:var(--muted); }
.plan.hl .price small{ color:rgba(255,255,255,.6); }
.meta{ font-size:.78rem; padding:12px 0; border-bottom:1px solid var(--rule); margin-top:6px !important; }
.plan.hl .meta{ border-color:rgba(255,255,255,.15); }
.plan ul{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.plan li{ font-size:.86rem; padding-left:18px; position:relative; line-height:1.4; }
.plan li::before{ content:""; position:absolute; left:0; top:.4em; width:9px; height:9px; background:var(--turq); }
.badge{ position:absolute; top:-12px; left:22px; background:var(--turq); color:var(--petrol); font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.extras{ display:grid; grid-template-columns:1fr 1fr auto; gap:20px; align-items:center; margin-top:28px; background:#fff; border-radius:10px; padding:22px 26px; border:1px solid var(--rule); }
.extras b{ display:block; }
.extras span{ font-size:.9rem; color:var(--muted); }
@media (max-width:1100px){ .plans{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .plans{ grid-template-columns:1fr; } .plan .for{ min-height:0; } .extras{ grid-template-columns:1fr; } }

/* contact */
.split h2 + .lead{ margin-top:18px; }
.brief{ display:flex; gap:18px; background:var(--petrol-2); border-radius:10px; padding:22px; margin-top:32px; }
.brief .iso{ width:40px; height:40px; flex:none; }
.brief p{ font-size:.92rem; margin:4px 0 8px; }
.contact{ margin-top:28px; }
.contact li{ display:flex; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.12); }
.contact span{ width:96px; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); padding-top:3px; }
.contact a{ text-decoration:none; font-weight:600; }
.contact a:hover{ color:var(--turq); }
.form{ background:#fff; color:var(--petrol); border-radius:12px; padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; gap:16px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:700; }
.form input, .form select, .form textarea{ font:inherit; font-weight:500; font-size:1rem; color:var(--petrol); background:#EEF2F2; border:1px solid #C3CED0; border-radius:8px; padding:12px 14px; width:100%; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--turq); outline-offset:0; border-color:transparent; }
.form :user-invalid{ border-color:#C0473B; }
.form .btn{ align-self:flex-start; }
.form .note{ font-size:.8rem; color:var(--muted); }

/* footer */
.foot-in{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:36px; padding-bottom:36px; flex-wrap:wrap; }
.foot p{ font-size:.82rem; color:rgba(255,255,255,.55); }

/* reveal (solo con JS; sin JS todo queda visible) */
.js .reveal{ opacity:0; translate:0 24px; transition:opacity .7s ease, translate .7s ease; }
.js .reveal.in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; translate:none; transition:none; } }

/* proyectos (galería) */
.projects{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 20px; }
.proj{ display:flex; flex-direction:column; gap:14px; }
.proj.big{ grid-column:span 2; }
.proj-img{ position:relative; display:block; width:100%; border:0; padding:0; cursor:zoom-in; border-radius:8px; overflow:hidden; background:var(--paper); aspect-ratio:16/10; }
.proj.big .proj-img{ aspect-ratio:33/10; }
.proj-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.proj-img picture{ display:block; width:100%; height:100%; }
.proj-img:hover img{ transform:scale(1.03); }
.count{ position:absolute; right:12px; bottom:12px; background:rgba(13,35,41,.85); color:#fff; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px; }
.proj-txt h3{ margin:6px 0; }
.proj-txt p{ font-size:.95rem; }
.teaser{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; align-items:center; margin-top:28px; padding-top:28px; border-top:1px solid var(--rule); }
.teaser .soon{ aspect-ratio:16/9; border-radius:8px; }
.teaser h3{ margin:6px 0; }
.behance-title{ margin:56px 0 20px; font-size:1.1rem; }
@media (max-width:980px){ .projects{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .projects{ grid-template-columns:1fr; } .proj.big{ grid-column:auto; grid-row:auto; } .proj.big .proj-img{ aspect-ratio:16/10; } .teaser{ grid-template-columns:1fr; } }

/* visor */
.viewer{ border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100vw; height:100dvh; }
.viewer::backdrop{ background:rgba(6,15,18,.97); }
.v-in{ position:relative; height:100%; display:grid; grid-template-rows:1fr auto; padding:56px clamp(12px,6vw,96px) 24px; color:#fff; }
.v-fig{ display:flex; align-items:center; justify-content:center; min-height:0; }
.v-fig picture{ display:contents; }
.v-fig img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; }
.v-info{ display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding-top:18px; max-width:1100px; margin:0 auto; width:100%; }
.v-info h3{ margin:4px 0; }
.v-info p{ color:rgba(255,255,255,.75); font-size:.92rem; max-width:44em; }
.v-info .tag{ color:var(--turq); }
.v-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; font-size:.85rem; color:rgba(255,255,255,.7); }
.v-side .link{ color:var(--turq); }
.v-close, .v-nav{ position:absolute; background:rgba(255,255,255,.1); color:#fff; border:0; cursor:pointer; border-radius:50%; width:48px; height:48px; font-size:1.8rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.v-close:hover, .v-nav:hover{ background:rgba(255,255,255,.2); }
.v-close{ top:12px; right:12px; }
.v-nav{ top:50%; translate:0 -50%; }
.v-nav.prev{ left:12px; } .v-nav.next{ right:12px; }
.v-nav[hidden]{ display:none; }
@media (max-width:640px){ .v-info{ flex-direction:column; align-items:flex-start; } .v-side{ align-items:flex-start; } .v-nav{ top:auto; bottom:120px; translate:none; } }