:root{
  --paper:#FBFBFA;
  --carbon:#15171A;
  --carbon-soft:#5B5E63;
  --indigo:#0B0E1A;
  --teal:#0E9C82;
  --teal-soft:rgba(14,156,130,0.10);
  --coral:#FF6B4A;
  --line:#E4E2DC;
  --line-dark:rgba(244,241,234,0.16);
  --sand:#9FD8C9;
  --font-display:'Inter',-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:var(--font-display);
  background:var(--paper);
  color:var(--carbon);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:18px;
  display:inline-block;
}
.eyebrow.on-dark{color:var(--sand);}
h1,h2,h3{font-weight:500;letter-spacing:-0.01em;}
p{color:var(--carbon-soft);}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(251,251,250,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--line);
}
nav{
  max-width:1120px;margin:0 auto;padding:0 32px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{height:28px;display:block;}
.foot-logo{height:24px;display:block;}
.navlinks{display:flex;align-items:center;gap:36px;}
.navlinks a{font-size:13px;color:var(--carbon-soft);}
.navlinks a:hover{color:var(--carbon);}
.btn{
  font-family:var(--font-display);
  font-size:13px;font-weight:500;
  padding:10px 20px;border-radius:980px;
  display:inline-block;border:none;cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn-coral{background:var(--coral);color:var(--indigo);}
.btn-coral:hover{background:#ff7c5e;}
.btn-ghost-dark{border:0.5px solid rgba(21,23,26,0.25);color:var(--carbon);background:transparent;}
.btn-ghost-light{border:0.5px solid rgba(244,241,234,0.4);color:var(--paper);background:transparent;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;}

/* ---------- sections generic ---------- */
section{padding:140px 0;position:relative;}
section.tight{padding:96px 0;}
.big{
  font-size:clamp(40px,6vw,68px);
  line-height:1.04;
  font-weight:300;
  letter-spacing:-0.02em;
  max-width:760px;
}
.big strong{font-weight:500;}
.lede{font-size:18px;line-height:1.6;max-width:480px;margin-top:22px;}

/* ---------- hero entrance ---------- */
#inicio{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding-top:90px;padding-bottom:70px;text-align:center;
  position:relative;overflow:hidden;
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}
.hero-content{position:relative;z-index:2;}
#inicio .big{margin:0 auto;max-width:820px;}
#inicio .lede{margin:22px auto 0;max-width:520px;text-align:center;}
.hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:36px;}
.hero-tags{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
.tag{
  font-size:12px;font-family:var(--font-mono);
  background:var(--teal-soft);color:#0a6b59;
  padding:7px 14px;border-radius:980px;
}
.hero-in{
  opacity:0;transform:translateY(14px);
  animation:heroIn 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}

.net-hint{
  position:absolute;left:0;right:0;bottom:24px;z-index:2;
  text-align:center;font-family:var(--font-mono);font-size:11px;
  color:#9C9C97;letter-spacing:0.04em;
}

/* ---------- qué hacemos ---------- */
.grid4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:0.5px solid var(--line);
  margin-top:64px;
}
.cell h3{font-size:17px;margin-bottom:10px;}
.cell p{font-size:14px;line-height:1.55;}

/* ---------- tilt + spotlight (shared by .cell and .svc) ---------- */
.tilt{
  background:var(--paper);padding:36px 28px;position:relative;overflow:hidden;
  transition:transform 0.25s ease;
  transform-style:preserve-3d;
}
.tilt::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,107,74,0.10), transparent 60%);
  opacity:0;transition:opacity 0.3s ease;pointer-events:none;
}
.tilt:hover::before{opacity:1;}
.tilt:hover{background:#F4F4F1;}

/* ---------- servicios ---------- */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:0.5px solid var(--line);
  margin-top:64px;
}
.svc{min-height:190px;display:flex;flex-direction:column;justify-content:space-between;}
.svc .cat{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--teal);text-transform:uppercase;}
.svc h3{font-size:18px;margin:14px 0 10px;}
.svc p{font-size:13.5px;line-height:1.55;}
.svc-feature{grid-column:span 2;}
.flow-diagram{width:100%;margin-top:18px;}

/* ---------- comunicación (dark) ---------- */
.dark{background:var(--indigo);color:var(--paper);}
.dark p{color:var(--sand);}
.dark .big{color:var(--paper);}
.split{display:grid;grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:center;}
.feat-list{margin-top:30px;display:flex;flex-direction:column;gap:14px;}
.feat-list li{list-style:none;font-size:14.5px;color:var(--sand);display:flex;gap:12px;line-height:1.5;}
.feat-list .node{width:6px;height:6px;border-radius:50%;background:var(--coral);margin-top:7px;flex-shrink:0;}

/* ---------- método ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:72px;position:relative;}
.steps::before{
  content:"";position:absolute;top:11px;left:0;right:0;height:0.5px;background:var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s cubic-bezier(.4,0,.2,1);
}
.steps.in::before{transform:scaleX(1);}
.steps-runner{
  position:absolute;top:6px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--coral);opacity:0;
}
.steps.in .steps-runner{
  animation:runnerMove 5s linear infinite;
}
@keyframes runnerMove{
  0%{transform:translateX(0);opacity:1;}
  32%{transform:translateX(calc(100% - 12px));opacity:1;}
  36%{transform:translateX(calc(100% - 12px));opacity:0;}
  100%{transform:translateX(0);opacity:0;}
}
.steps.in .step:nth-child(2) .num{animation:numPulse 5s ease infinite;animation-delay:0s;}
.steps.in .step:nth-child(3) .num{animation:numPulse 5s ease infinite;animation-delay:0.6s;}
.steps.in .step:nth-child(4) .num{animation:numPulse 5s ease infinite;animation-delay:1.2s;}
.steps.in .step:nth-child(5) .num{animation:numPulse 5s ease infinite;animation-delay:1.8s;}
@keyframes numPulse{
  0%{background:var(--paper);border-color:var(--teal);color:var(--teal);transform:scale(1);}
  9%{background:var(--coral);border-color:var(--coral);color:var(--indigo);transform:scale(1.18);}
  18%{background:var(--paper);border-color:var(--teal);color:var(--teal);transform:scale(1);}
  100%{background:var(--paper);border-color:var(--teal);color:var(--teal);transform:scale(1);}
}
.step{position:relative;padding-top:34px;}
.step .num{
  position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--teal);
  font-family:var(--font-mono);font-size:10px;color:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:16px;margin-bottom:8px;}
.step p{font-size:13.5px;line-height:1.55;}

/* ---------- herramientas ---------- */
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;}
.pill{
  font-family:var(--font-mono);font-size:12.5px;
  border:0.5px solid var(--line-dark);color:var(--sand);
  padding:9px 16px;border-radius:980px;
  transition:border-color 0.25s ease, color 0.25s ease;
}
.pill:hover{border-color:var(--teal);color:var(--paper);}

/* ---------- clientes ---------- */
.logo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:0.5px solid var(--line);
  margin-top:64px;
}
.logo-cell{
  background:var(--paper);height:110px;display:flex;align-items:center;justify-content:center;
  padding:20px 28px;
  font-family:var(--font-mono);font-size:13px;color:var(--carbon-soft);
  filter:grayscale(1);transition:filter 0.25s;
}
.logo-cell:hover{filter:grayscale(0);}
.logo-cell img{max-width:100%;max-height:54px;object-fit:contain;}

/* ---------- paneles (qué hacemos), foto a pantalla completa ---------- */
.panel-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);margin-top:64px;border:0.5px solid var(--line);
}
.hero-panel{position:relative;overflow:hidden;}
.panel-bg-img{width:100%;height:420px;object-fit:cover;display:block;}
.hero-panel::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.15) 62%, rgba(0,0,0,0) 80%);
}
.panel-head{position:absolute;top:0;left:0;z-index:2;padding:36px 36px 0;max-width:300px;}
.panel-head .eyebrow{color:var(--sand) !important;}
.panel-head h3{font-size:20px;font-weight:400;line-height:1.3;margin-top:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.7);}

/* ---------- paneles a pantalla completa con ilustración propia ---------- */
.art-panel{
  position:relative;border-radius:20px;overflow:hidden;
  min-height:560px;display:flex;background:var(--indigo);
}
.art-panel-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.art-panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.art-panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,10,18,0) 15%, rgba(8,10,18,0.65) 55%, rgba(8,10,18,0.96) 100%);
}
.panel-overlay{position:relative;z-index:2;align-self:flex-end;padding:48px;}
.panel-overlay h2,.panel-overlay p{text-shadow:0 1px 8px rgba(0,0,0,0.5);}
.panel-overlay p{color:var(--sand) !important;}

.comm-art{margin-top:0;width:100%;height:380px;object-fit:cover;border-radius:14px;display:block;}

/* ---------- diagnóstico rápido (quiz) ---------- */
.quiz{
  border:0.5px solid var(--line);border-radius:20px;
  padding:56px;margin-top:56px;position:relative;overflow:hidden;
  background:linear-gradient(150deg, #FFFFFF 0%, var(--teal-soft) 180%);
  max-width:680px;
}
.quiz-progress{display:flex;gap:8px;margin-bottom:28px;}
.quiz-progress .dot{width:26px;height:3px;border-radius:2px;background:var(--line);transition:background 0.25s;}
.quiz-progress .dot.active{background:var(--coral);}
.quiz-step .eyebrow{margin-bottom:10px;}
.quiz-q{font-size:21px;font-weight:500;margin-bottom:24px;max-width:460px;line-height:1.35;color:var(--carbon);}
.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.quiz-opt{
  text-align:left;font-family:var(--font-display);font-size:14.5px;color:var(--carbon);
  border:1px solid var(--line);background:#fff;padding:18px 20px;border-radius:12px;
  cursor:pointer;transition:border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  position:relative;line-height:1.4;
}
.quiz-opt::before{
  content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--line);transition:background 0.2s ease;
}
.quiz-opt{padding-left:40px;}
.quiz-opt:hover{border-color:var(--teal);background:var(--teal-soft);}
.quiz-opt:hover::before{background:var(--teal);}
.quiz-opt.selected{border-color:var(--coral);background:rgba(255,107,74,0.08);transform:scale(0.98);}
.quiz-opt.selected::before{background:var(--coral);}
.quiz-opt:disabled{cursor:default;opacity:0.6;}
.quiz-back{
  position:absolute;top:56px;right:56px;background:none;border:none;
  font-size:13px;color:var(--carbon-soft);cursor:pointer;z-index:2;
}
.quiz-result-cards{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.quiz-result-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:18px 20px;}
.quiz-result-card .cat{font-family:var(--font-mono);font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:0.06em;}
.quiz-result-card h4{font-size:16px;font-weight:500;margin-top:4px;}
.quiz-restart{
  display:block;margin-top:14px;background:none;border:none;
  font-size:13px;color:var(--carbon-soft);text-decoration:underline;cursor:pointer;
}
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.photo-split.reverse img{order:2;}
.photo-split.reverse .copy{order:1;}
.photo-split img{width:100%;height:auto;border-radius:14px;display:block;}
.photo-split .copy{max-width:420px;}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;}
form{display:flex;flex-direction:column;gap:16px;margin-top:36px;}
input,textarea{
  font-family:var(--font-display);font-size:14px;
  border:none;border-bottom:0.5px solid var(--line);
  background:transparent;padding:12px 2px;color:var(--carbon);
  transition:border-color 0.2s ease;
}
input::placeholder,textarea::placeholder{color:#9C9C97;}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--teal);}
textarea{resize:vertical;min-height:90px;font-family:var(--font-display);}
.contact-info p{font-size:14px;margin-bottom:8px;}
.contact-info a{color:var(--teal);}

footer{padding:56px 0;border-top:0.5px solid var(--line);}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.foot-row p{font-size:13px;color:var(--carbon-soft);}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.reveal-stagger > *{
  opacity:0;transform:translateY(16px) scale(0.97);filter:blur(6px);
  transition:opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}
.reveal-stagger.in > *{opacity:1;transform:none;filter:blur(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:0s}
.reveal-stagger.in > *:nth-child(2){transition-delay:0.06s}
.reveal-stagger.in > *:nth-child(3){transition-delay:0.12s}
.reveal-stagger.in > *:nth-child(4){transition-delay:0.18s}
.reveal-stagger.in > *:nth-child(5){transition-delay:0.24s}
.reveal-stagger.in > *:nth-child(6){transition-delay:0.3s}
.reveal-stagger.in > *:nth-child(7){transition-delay:0.36s}
.reveal-stagger.in > *:nth-child(8){transition-delay:0.42s}

@media (max-width:860px){
  .navlinks{display:none;}
  .menu-toggle{display:block;}
  .nav-logo{height:34px;}
  .grid4{grid-template-columns:1fr 1fr;}
  .panel-grid{grid-template-columns:1fr;}
  .panel-bg-img{height:320px;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .svc-feature{grid-column:span 2;}
  .split{grid-template-columns:1fr;gap:40px;}
  .comm-art{height:300px;margin-top:24px;}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px;}
  .steps::before{display:none;}
  .logo-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .photo-split{grid-template-columns:1fr;gap:32px;}
  .photo-split.reverse img{order:0;}
  .photo-split.reverse .copy{order:0;}
  .photo-panel,.art-panel{min-height:420px;border-radius:14px;}
  .panel-overlay{padding:28px;}
  .quiz{padding:28px 20px;border-radius:16px;}
  .quiz-back{top:28px;right:20px;}
  .quiz-options{grid-template-columns:1fr;gap:10px;}
  .quiz-opt{padding:14px 16px 14px 36px;font-size:14px;}
  .quiz-opt::before{left:16px;}
  .quiz-q{font-size:18px;}
  section{padding:88px 0;}
  #inicio{padding-top:140px;padding-bottom:50px;min-height:auto;flex-direction:column;}
  .net-hint{display:none;}
}
@media (max-width:520px){
  .grid4{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .svc-feature{grid-column:span 1;}
  .steps{grid-template-columns:1fr;}
  .logo-grid{grid-template-columns:1fr 1fr;}
  .hero-ctas{flex-direction:column;align-items:center;}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *,.hero-in{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
  .steps::before{transform:scaleX(1) !important;}
  .tilt{transform:none !important;}
}