:root {
  --bg-dark: #0d0b18;
  --bg-deep: #12091b;
  --paper: #f7f7f7;
  --white: #ffffff;
  --ink: #171522;
  --muted: #777481;
  --pink: #ff0aa8;
  --pink-soft: #f52bb9;
  --line: rgba(255,255,255,.25);
  --container: 1600px;
  --header-height: 96px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(calc(100% - 96px), var(--container)); margin-inline: auto; }
.section-dark { color: var(--white); }
.eyebrow { margin: 0 0 26px; text-transform: uppercase; letter-spacing: .44em; font-size: 12px; font-weight: 600; }
.eyebrow.dark { color: #292534; }
.accent-line { display: block; width: 64px; height: 2px; background: var(--pink); margin-top: 22px; }

/* Header */
.site-header { position: absolute; inset: 0 0 auto; z-index: 30; height: var(--header-height); color: #fff; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { width: 220px; display: block; }
.brand img { width: 100%; height: auto; filter: brightness(0) invert(1); object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 15px; }
.main-nav > a, .nav-contact { position: relative; opacity: .92; transition: opacity .25s ease, color .25s ease; }
.main-nav > a::after, .nav-contact::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.main-nav > a:hover::after, .nav-contact:hover::after { transform:scaleX(1); }
.main-nav > a:hover, .nav-contact:hover { opacity: 1; }
.nav-contact { border: 0; padding: 0; background: none; color: #fff; cursor: pointer; }
.social-links { display:flex; align-items:center; gap:18px; padding-left:10px; }
.social-icon { width: 22px; height: 22px; display:grid; place-items:center; }
.social-icon svg { width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.social-icon .fill-shape, .social-icon .fill-dot { fill:#fff; stroke:none; }
.social-icon:hover svg { stroke: var(--pink); }
.social-icon:hover .fill-shape, .social-icon:hover .fill-dot { fill: var(--pink); }
.menu-toggle { display:none; }

/* Hero */
.hero { min-height: 720px; height: min(54vw, 920px); position: relative; overflow: hidden; isolation: isolate; background: var(--bg-deep); }
.hero-bg { position:absolute; inset:-7%; z-index:-3; background-image:url('../img/banner_principal_desktop.jpg'); background-size:cover; background-position:center; will-change: transform; }
.hero-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg, rgba(13,5,22,.58) 0%, rgba(13,5,22,.26) 42%, rgba(13,5,22,.08) 72%); }
.hero-content { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:64px; position:relative; z-index:2; }
.hero-content h1 { margin:0; font-size:clamp(64px, 6.3vw, 116px); line-height:.88; letter-spacing:-.055em; font-weight:800; text-shadow:0 12px 35px rgba(0,0,0,.22); }
.hero-content h1 span { color:var(--pink); }
.hero-services { margin:34px 0 34px; font-size:clamp(18px, 1.4vw, 27px); font-weight:400; }
.hero-services i { font-style:normal; margin:0 13px; opacity:.8; }
.cta-pill { width:300px; height:66px; padding:0 12px 0 34px; border:0; border-radius:999px; display:flex; align-items:center; justify-content:space-between; background:#fff; color:#191421; cursor:pointer; box-shadow:0 12px 34px rgba(0,0,0,.15); transition:transform .3s var(--ease), box-shadow .3s ease; }
.cta-pill b { width:48px; height:48px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-size:24px; font-weight:400; }
.cta-pill:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.25); }
.hero-location { position:absolute; left:max(48px, calc((100vw - var(--container))/2)); bottom:42px; z-index:2; display:flex; align-items:center; gap:18px; text-transform:uppercase; letter-spacing:.32em; font-size:11px; }
.hero-location span { width:42px; height:1px; background:var(--pink); }

/* Solutions */
.solutions { background:#f7f7f7; padding:72px 0 58px; }
.solutions-heading { display:flex; justify-content:space-between; gap:48px; align-items:flex-end; }
.solutions h2 { margin:0; font-size:clamp(42px, 3.1vw, 66px); line-height:1.02; letter-spacing:-.045em; }
.solutions-copy { margin:0 0 18px; font-size:18px; line-height:1.5; text-align:right; color:#3c3945; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:48px; }
.service-card { text-align:center; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.service-icon { display:block; width:72px; height:72px; margin-bottom:21px; background-image:url('../img/iconografia_web.png'); background-repeat:no-repeat; background-size:400% 100%; }
.sprite-cart { background-position:0% 50%; }
.sprite-monitor { background-position:33.333% 50%; }
.sprite-pencil { background-position:66.666% 50%; }
.sprite-chart { background-position:100% 50%; }
.service-card h3 { margin:0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.service-card i { display:block; width:38px; height:2px; background:var(--pink); margin-top:20px; }

/* Projects */
.projects { position:relative; overflow:hidden; isolation:isolate; min-height:clamp(520px, 37.5vw, 720px); background:#100b19; display:flex; flex-direction:column; justify-content:center; }
.projects-bg { position:absolute; inset:-4%; z-index:-3; background:url('../img/banner_proyectos_webs.jpg') center/cover no-repeat; will-change:transform; }
.projects-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg, rgba(12,8,20,.42), rgba(12,8,20,.18) 45%, rgba(12,8,20,.28)); }
.projects-content { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.projects-content h2 { margin:0; font-size:clamp(48px,4vw,76px); line-height:.98; letter-spacing:-.04em; text-shadow:0 7px 24px rgba(0,0,0,.5); }
.circle-link { width:58px; height:58px; border:1px solid var(--pink); border-radius:50%; display:grid; place-items:center; margin-top:28px; font-size:25px; transition:background .3s ease, transform .3s var(--ease); }
.circle-link:hover { background:var(--pink); transform:rotate(-8deg) scale(1.06); }
.project-meta { position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.project-meta div { display:flex; flex-direction:column; gap:5px; }
.project-meta strong { font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.project-meta span { font-size:12px; opacity:.72; }

/* Creativity */
.creativity { position:relative; overflow:hidden; isolation:isolate; min-height:330px; background:#f7f7f7; display:flex; align-items:center; }
.creativity-bg { position:absolute; inset:-6%; z-index:-2; background:url('../img/banner_proyectos_letscreativity.jpg') center/cover no-repeat; will-change:transform; }
.creativity-content { display:grid; grid-template-columns:1fr 1px .55fr; align-items:center; gap:66px; }
.creativity-main img { width:min(620px, 100%); max-height:170px; object-fit:contain; object-position:left center; }
.creativity-divider { height:160px; background:#ddd9df; }
.creativity-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.creativity-copy .accent-line { margin:0 0 28px; }
.creativity-copy p { margin:0; font-size:15px; text-transform:uppercase; letter-spacing:.35em; line-height:2; }

/* Contact band */
.contact-band { background:radial-gradient(circle at 15% 20%, #1b1028 0%, #0d0c19 48%, #090914 100%); padding:62px 0; }
.contact-band-inner { display:grid; grid-template-columns:1.25fr .7fr .65fr; align-items:center; gap:48px; }
.contact-band h2 { margin:0; font-size:clamp(46px,3.5vw,70px); letter-spacing:-.04em; }
.contact-band h2 span { color:var(--pink); }
.cta-pink { background:var(--pink); color:#fff; border:2px solid #fff; width:245px; height:64px; justify-self:center; }
.cta-pink b { background:rgba(255,255,255,.12); }
.footer-location { border-left:1px solid rgba(255,255,255,.25); padding-left:46px; }
.footer-location p { margin:0 0 18px; display:flex; align-items:center; gap:20px; text-transform:uppercase; letter-spacing:.3em; font-size:11px; }
.footer-location p span { width:42px; height:1px; background:rgba(255,255,255,.5); }
.footer-location small { letter-spacing:.34em; }

/* Modal */
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility .3s ease; }
.modal.is-open { visibility:visible; opacity:1; }
.modal-backdrop { position:absolute; inset:0; background:rgba(5,3,10,.78); backdrop-filter:blur(8px); }
.modal-panel { position:relative; z-index:2; width:min(620px,100%); max-height:min(780px,92vh); overflow:auto; color:#fff; background:linear-gradient(145deg,#17101f,#0d0b14); border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:44px; box-shadow:0 30px 90px rgba(0,0,0,.52); transform:translateY(18px) scale(.98); transition:transform .35s var(--ease); }
.modal.is-open .modal-panel { transform:none; }
.modal-close { position:absolute; right:18px; top:14px; width:42px; height:42px; color:#fff; border:0; background:transparent; font-size:32px; cursor:pointer; opacity:.8; }
.modal-panel h2 { margin:0; font-size:48px; line-height:1; letter-spacing:-.04em; }
.modal-intro { color:#bdb8c5; margin:14px 0 30px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#contact-form label { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; font-size:13px; color:#d7d2de; }
#contact-form input, #contact-form textarea { width:100%; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); color:#fff; border-radius:12px; padding:14px 15px; outline:none; transition:border-color .2s ease, background .2s ease; }
#contact-form input:focus, #contact-form textarea:focus { border-color:var(--pink); background:rgba(255,255,255,.085); }
#contact-form textarea { resize:vertical; min-height:120px; }
.hp-field { position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important; }
.submit-button { width:100%; border:0; border-radius:999px; min-height:56px; padding:0 20px 0 26px; color:#fff; background:var(--pink); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.submit-button b { font-size:22px; }
.submit-button:disabled { opacity:.58; cursor:wait; }
.form-status { min-height:22px; margin:15px 0 0; font-size:14px; color:#d8d3df; }
.form-status.success { color:#75e2a7; }
.form-status.error { color:#ff8fae; }
body.modal-open { overflow:hidden; }

/* Reveal / parallax */
[data-reveal] { opacity:0; transition:opacity .75s var(--ease), transform .85s var(--ease); transition-delay:var(--delay,0ms); }
[data-reveal="up"] { transform:translateY(38px); }
[data-reveal="left"] { transform:translateX(-40px); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal="fade"] { transform:none; }
[data-reveal].is-visible { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .container { width:min(calc(100% - 56px), var(--container)); }
  .brand { width:180px; }
  .main-nav { gap:20px; }
  .project-meta { display:none; }
  .projects { min-height:560px; }
  .contact-band-inner { grid-template-columns:1fr auto; }
  .footer-location { grid-column:1/-1; border-left:0; padding-left:0; display:flex; justify-content:flex-end; }
}

@media (max-width: 768px) {
  :root { --header-height:82px; }
  .container { width:min(calc(100% - 38px), var(--container)); }
  .eyebrow { font-size:10px; letter-spacing:.35em; margin-bottom:18px; }

  .site-header { position:absolute; }
  .brand { width:145px; }
  .menu-toggle { display:flex; width:42px; height:42px; padding:10px; flex-direction:column; justify-content:center; gap:5px; border:0; background:rgba(8,5,14,.28); border-radius:50%; cursor:pointer; }
  .menu-toggle span { width:100%; height:1.5px; background:#fff; transition:transform .3s ease, opacity .2s ease; }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .main-nav { position:absolute; left:19px; right:19px; top:72px; padding:22px; flex-direction:column; align-items:flex-start; gap:18px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(13,9,22,.94); backdrop-filter:blur(16px); transform:translateY(-8px); opacity:0; visibility:hidden; transition:.25s ease; }
  .main-nav.is-open { transform:none; opacity:1; visibility:visible; }
  .social-links { padding:8px 0 0; }

  .hero { min-height:930px; height:100svh; max-height:1180px; }
  .hero-bg { inset:-4%; background-image:url('../img/banner_principal_mobile.jpg'); background-size:cover; background-position:center; }
  .hero-overlay { background:linear-gradient(180deg,rgba(14,6,24,.58) 0%,rgba(14,6,24,.25) 45%,rgba(14,6,24,.46) 100%); }
  .hero-content { align-items:center; text-align:center; justify-content:flex-start; padding-top:170px; }
  .hero-content h1 { font-size:clamp(58px,16vw,86px); }
  .hero-services { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin:28px auto 30px; font-size:17px; max-width:340px; }
  .hero-services i { margin:0 2px; }
  .cta-pill { width:min(290px,90vw); height:62px; }
  .hero-location { left:50%; bottom:26px; transform:translateX(-50%); width:max-content; }

  .solutions { padding:62px 0 46px; text-align:center; }
  .solutions-heading { display:block; }
  .solutions h2 { font-size:clamp(38px,10vw,56px); }
  .solutions-heading .accent-line { margin-inline:auto; }
  .solutions-copy { margin:26px auto 0; text-align:center; font-size:16px; }
  .solutions-copy br { display:none; }
  .services-grid { grid-template-columns:1fr; margin-top:38px; gap:22px; }
  .service-card { min-height:138px; justify-content:center; }
  .service-icon { width:64px; height:64px; }

  .projects { min-height:900px; justify-content:flex-start; padding-top:74px; }
  .projects-bg { inset:0; background-size:contain; background-position:center bottom 56px; }
  .projects-shade { background:linear-gradient(180deg,rgba(12,8,20,.68) 0%,rgba(12,8,20,.35) 34%,rgba(12,8,20,.18) 70%); }
  .projects-content h2 { font-size:clamp(44px,12vw,64px); }

  .creativity { min-height:500px; padding:64px 0; }
  .creativity-bg { background-position:left center; }
  .creativity-content { grid-template-columns:1fr; text-align:center; gap:35px; }
  .creativity-main { display:flex; flex-direction:column; align-items:center; }
  .creativity-main img { object-position:center; width:min(500px,95%); }
  .creativity-divider { width:76px; height:1px; margin:auto; }
  .creativity-copy { align-items:center; }
  .creativity-copy .accent-line { margin-inline:auto; }
  .creativity-copy p { font-size:13px; letter-spacing:.29em; line-height:1.9; }

  .contact-band { padding:58px 0; text-align:center; }
  .contact-band-inner { grid-template-columns:1fr; gap:34px; }
  .contact-band h2 { font-size:clamp(43px,11vw,58px); }
  .cta-pink { justify-self:center; }
  .footer-location { grid-column:auto; justify-content:center; flex-direction:column; align-items:center; gap:7px; }
  .footer-location p { justify-content:center; }

  .modal-panel { padding:38px 24px 28px; border-radius:20px; }
  .modal-panel h2 { font-size:40px; }
  .form-grid { grid-template-columns:1fr; gap:0; }
}

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