:root {
  --content-max:1160px;
  --page-gutter:40px;
  --page-gutter-mobile:28px;
  --navy-950:#050d18;
  --navy-900:#07111f;
  --navy-850:#0a1728;
  --navy-800:#0d2139;
  --blue-600:#1677ff;
  --blue-500:#2495ff;
  --cyan-400:#29b6f6;
  --cyan-300:#68d4ff;
  --text-900:#10243d;
  --text-700:#39516b;
  --text-500:#6f8296;
  --surface:#ffffff;
  --surface-soft:#f4f8fc;
  --line:#dce6ef;
  --success:#16a66a;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --shadow:0 18px 55px rgba(6,23,43,.12);
  --header-h:76px;
}

* { box-sizing:border-box; }
html {
  min-height:100%;
  background:#06101d;
}

body.page {
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text-900);
  background:var(--surface);
  line-height:1.6;
}

a.link { color:inherit; text-decoration:none; }
.container { width:min(var(--content-max),calc(100% - var(--page-gutter))); margin-inline:auto; }

/* HEADER */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,15,29,.82);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(41,182,246,.11);
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.nav-wrap { min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-size:20px; font-weight:750; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); font-size:15px; letter-spacing:.5px; }
.brand-tech { color:#f3f8fd; }
.brand-text strong { color:var(--cyan-400); }
.main-nav { display:flex; align-items:center; gap:22px; margin-left:auto; color:#d8e5f4; font-size:13px; font-weight:700; }
.nav-link { position:relative; padding:6px 0; transition:.2s ease; }
.nav-link:hover,.nav-link.active { color:#fff; }
.nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--cyan-400); border-radius:999px; }
.header-cta { min-height:40px; padding:0 17px; border-radius:11px; font-size:12px; white-space:nowrap; box-shadow:0 8px 22px rgba(22,119,255,.22); }
.menu-toggle { display:none; border:0; background:transparent; color:#fff; font-size:28px; cursor:pointer; }

/* SHARED PAGE LAYOUT */
.main-content { flex:1; display:flex; }
.page-view { width:100%; padding:70px 0 74px; }
.page-view-dark { color:#fff; background:radial-gradient(circle at 82% 16%,rgba(41,182,246,.18),transparent 30%),linear-gradient(145deg,#06101d 0%,#0d2139 100%); }
.page-shell { margin-inline:auto; }
.page-heading { max-width:800px; margin-bottom:38px; }
.eyebrow { display:inline-block; margin-bottom:12px; color:var(--cyan-400); text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:850; }
.page-title { margin:0 0 18px; font-size:clamp(40px,5vw,68px); line-height:1.03; letter-spacing:-.04em; }
.page-subtitle { margin:0; max-width:760px; color:var(--text-700); font-size:18px; }
.page-view-dark .page-subtitle { color:#c7d6e6; }
.section-title { margin:0 0 8px; font-size:clamp(28px,3.2vw,42px); line-height:1.1; letter-spacing:-.03em; }
.section-copy { margin:0; color:var(--text-700); }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 23px; border:1px solid transparent; border-radius:14px; font-weight:800; cursor:pointer; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--blue-600),#0aa8ff); box-shadow:0 10px 28px rgba(22,119,255,.28); }
.btn-secondary { color:#17304c; background:#fff; border-color:#cbd9e8; }
.btn-outline-light { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* HOME: ONE PAGE / ONE MAIN SECTION */
.home-view { position:relative; isolation:isolate; overflow:hidden; padding:0; align-items:stretch; background:
  radial-gradient(circle at 77% 24%,rgba(41,182,246,.15),transparent 28%),
  radial-gradient(circle at 18% 78%,rgba(22,119,255,.08),transparent 30%),
  linear-gradient(145deg,#06101d 0%,#0d2139 100%);
}
.home-view::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background-image:linear-gradient(rgba(104,212,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.10) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.82) 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.82) 100%);
}
.home-container { min-height:calc(100vh - var(--header-h)); display:grid; grid-template-columns:1.03fr .97fr; gap:48px; align-items:center; padding-top:52px; padding-bottom:52px; }
.home-copy { max-width:690px; }
.home-title { margin:0 0 22px; color:#fff; font-size:clamp(46px,5.8vw,76px); line-height:.98; letter-spacing:-.05em; }
.home-title-accent { color:var(--cyan-400); }
.home-description { margin:0; max-width:650px; color:#c7d6e6; font-size:18px; line-height:1.75; }
.home-actions { display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 24px; }
.home-badges { display:flex; flex-wrap:wrap; gap:12px; }
.home-badge { padding:8px 12px; border:1px solid rgba(255,255,255,.11); border-radius:999px; color:#b8d3e9; background:rgba(255,255,255,.045); font-size:12px; font-weight:700; }
.home-credibility { margin:15px 0 0; color:#6f91ae; font-size:11px; font-weight:650; letter-spacing:.01em; }
.credibility-dot { margin:0 7px; color:rgba(104,212,255,.5); }
.home-panel { padding:22px; border:1px solid rgba(104,212,255,.16); border-radius:30px; background:linear-gradient(145deg,rgba(18,48,82,.90),rgba(6,17,30,.96)); box-shadow:0 35px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.025); }
.home-panel-top { display:flex; gap:7px; margin-bottom:14px; }
.home-panel-dot { width:9px; height:9px; border-radius:50%; background:#35516d; }
.home-panel-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 3px 17px; }
.home-panel-label { color:#eef8ff; font-size:13px; font-weight:850; letter-spacing:.02em; }
.home-panel-note { color:#6f91ae; font-size:11px; text-align:right; }
.home-service-links { display:grid; gap:13px; }
.home-service-card { display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; padding:21px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.022)); color:#fff; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.home-service-card:hover { transform:translateY(-3px); border-color:rgba(104,212,255,.36); background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.03)); }
.home-service-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--cyan-300); background:linear-gradient(145deg,rgba(41,182,246,.18),rgba(22,119,255,.08)); border:1px solid rgba(104,212,255,.14); }
.service-icon-svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.home-service-content { min-width:0; }
.home-service-kicker { display:block; margin-bottom:3px; color:var(--cyan-300); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.home-service-title { display:block; font-size:20px; line-height:1.25; font-weight:800; }
.home-service-copy { display:block; margin-top:6px; color:#9db5cb; font-size:12.5px; line-height:1.55; }
.home-service-action { display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:#d9f3ff; font-size:11px; font-weight:800; }
.card-arrow { color:var(--cyan-300); transition:transform .2s ease; }
.home-service-card:hover .card-arrow { transform:translateX(3px); }

/* TECHNICAL SERVICES */
.service-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:42px; align-items:start; }
.service-sidebar { position:sticky; top:calc(var(--header-h) + 28px); padding:30px; border-radius:var(--radius-lg); background:var(--surface-soft); border:1px solid var(--line); }
.service-sidebar-title { margin:0 0 10px; font-size:28px; }
.service-sidebar-copy { margin:0 0 22px; color:var(--text-700); }
.service-sidebar-note { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); color:var(--text-500); font-size:13px; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.service-card { padding:25px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(6,23,43,.06); }
.service-number { display:inline-flex; margin-bottom:13px; color:var(--blue-600); font-size:12px; font-weight:900; }
.service-card-title { margin:0 0 7px; font-size:20px; }
.service-card-copy { margin:0; color:var(--text-700); font-size:14px; }

/* WEB SERVICES */
.web-layout { display:grid; grid-template-columns:1.02fr .98fr; gap:42px; align-items:start; }
.web-offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.web-offer-card { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.web-offer-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px; border-radius:14px; background:#e9f5ff; color:var(--blue-600); font-weight:900; }
.web-offer-title { margin:0 0 6px; font-size:19px; }
.web-offer-copy { margin:0; color:var(--text-700); font-size:14px; }
.web-package { padding:32px; border-radius:var(--radius-lg); color:#fff; background:linear-gradient(145deg,#08182a,#0d2947); box-shadow:var(--shadow); }
.web-package-label { display:inline-block; margin-bottom:12px; color:var(--cyan-300); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.web-package-title { margin:0 0 8px; font-size:30px; }
.web-package-copy { color:#b6cadc; }
.web-package-list { margin:20px 0 0; padding:0; list-style:none; }
.web-package-item { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#dce9f5; }

/* ABOUT */
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-card { padding:28px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.value-number { display:inline-flex; margin-bottom:16px; color:var(--blue-600); font-size:12px; font-weight:900; }
.value-title { margin:0 0 9px; font-size:21px; }
.value-copy { margin:0; color:var(--text-700); font-size:14px; }
.about-bottom { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.about-panel { padding:28px; border-radius:22px; background:var(--surface-soft); border:1px solid var(--line); }
.about-panel-title { margin:0 0 8px; font-size:22px; }
.about-panel-copy { margin:0; color:var(--text-700); }

/* PRICING */
.pricing-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:26px; }
.pricing-card { padding:30px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.pricing-card-title { margin:0 0 20px; font-size:28px; }
.price-list { display:grid; }
.price-row { display:flex; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid var(--line); }
.price-name { color:var(--text-700); }
.price-amount { flex:none; color:var(--blue-600); font-weight:850; }
.price-note { margin:18px 0 0; color:var(--text-500); font-size:13px; }

/* CONTACT */
.contact-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:46px; }
.contact-info { padding:30px; border-radius:24px; background:var(--surface-soft); border:1px solid var(--line); }
.contact-info-title { margin:0 0 12px; font-size:28px; }
.contact-info-copy { margin:0 0 20px; color:var(--text-700); }
.contact-detail { padding:16px 0; border-bottom:1px solid var(--line); }
.contact-detail-label { display:block; color:var(--text-900); font-weight:800; }
.contact-detail-value { display:block; color:var(--text-700); }
.contact-form { padding:32px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-group { display:block; margin-bottom:17px; }
.form-label { display:block; margin-bottom:7px; font-size:13px; font-weight:800; }
.form-control { width:100%; padding:14px 15px; border:1px solid #cfdbe7; border-radius:12px; background:#fff; color:var(--text-900); font:inherit; outline:none; }
.form-control:focus { border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(22,119,255,.1); }
.form-submit-row { display:flex; align-items:center; gap:14px; margin-top:6px; }
.form-help { color:var(--text-500); font-size:12px; }

/* FOOTER */
.site-footer { background:var(--navy-950); color:#8fa7bd; padding:20px 0; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; }
.footer-brand { color:#d9e7f4; font-weight:800; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.footer-link:hover { color:#fff; }

@media (max-width:1100px) {
  .header-cta { display:none; }
  .main-nav { gap:16px; }
}

@media (max-width:980px) {
  .main-nav { gap:16px; }
  .home-container,.service-layout,.web-layout,.pricing-layout,.contact-layout { grid-template-columns:1fr; }
  .home-container { min-height:auto; gap:42px; }
  .service-sidebar { position:static; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
  .menu-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:4px; padding:16px 20px 22px; background:#07111f; border-top:1px solid rgba(255,255,255,.08); }
  .main-nav.open { display:flex; }
  .nav-link { width:100%; padding:10px 0; }
  .nav-link.active::after { display:none; }
  .service-grid,.web-offer-grid,.about-bottom,.form-row { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .container { width:min(calc(100% - var(--page-gutter-mobile)),var(--content-max)); }
  .page-view { padding:52px 0 56px; }
  .home-container { padding-top:44px; padding-bottom:44px; gap:38px; }
  .home-panel-heading { align-items:flex-start; flex-direction:column; gap:2px; }
  .home-panel-note { text-align:left; }
  .home-service-card { grid-template-columns:44px 1fr; padding:18px; }
  .home-service-icon { width:44px; height:44px; }
  .home-credibility { line-height:1.8; }
  .home-actions,.actions { flex-direction:column; }
  .btn { width:100%; }
  .values-grid { grid-template-columns:1fr; }
  .price-row { align-items:flex-start; }
  .price-name { max-width:67%; }
  .footer-wrap { flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   DN TECH — PREMIUM V2
   Capa visual e interactiva de la portada + cabecera global
   ========================================================= */
:root {
  --premium-ease:cubic-bezier(.2,.72,.22,1);
  --cyan-glow:rgba(67,203,255,.34);
  --panel-border:rgba(112,214,255,.18);
}

body.page {
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Cabecera premium */
.site-header {
  background:rgba(5,13,24,.70);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border-bottom:1px solid rgba(113,211,255,.10);
  box-shadow:0 10px 40px rgba(0,0,0,.10);
}
.site-header::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(41,182,246,.22),transparent);
}
.nav-wrap { min-height:78px; }
.brand { gap:11px; letter-spacing:-.02em; }
.brand-mark {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(15,39,66,.98),rgba(6,17,31,.98));
  border:1px solid rgba(104,212,255,.32);
  box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08),0 0 24px rgba(41,182,246,.08);
}
.brand-mark::before {
  content:"";
  position:absolute;
  inset:-45% -20% auto;
  height:70%;
  z-index:-1;
  background:radial-gradient(circle,rgba(41,182,246,.32),transparent 68%);
  transform:rotate(-12deg);
}
.brand-symbol { width:34px; height:34px; overflow:visible; }
.brand-symbol-stroke { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.brand-symbol-d { stroke:var(--cyan-300); stroke-width:2.45; }
.brand-symbol-n { stroke:#f8fcff; stroke-width:2.15; }
.brand-text { display:inline-flex; gap:5px; align-items:baseline; font-size:20px; }
.brand-tech { color:#f8fbff; font-weight:780; }
.brand-city { color:var(--cyan-400); font-weight:820; }
.main-nav { gap:24px; }
.nav-link { padding:8px 0; color:#cad8e7; transition:color .22s ease,transform .22s ease; }
.nav-link:hover { color:#fff; transform:translateY(-1px); }
.nav-link.active::after {
  bottom:-10px;
  height:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-300));
  box-shadow:0 0 12px rgba(41,182,246,.46);
}
.header-cta { min-height:42px; padding-inline:18px; border-radius:12px; }

/* Botones con acabado premium */
.btn { position:relative; overflow:hidden; gap:10px; isolation:isolate; transition:transform .22s var(--premium-ease),box-shadow .22s ease,border-color .22s ease,background .22s ease; }
.btn::before {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  opacity:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.38),transparent 34%);
  transition:opacity .25s ease;
}
.btn:hover::before { opacity:.7; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.99); }
.btn:focus-visible,.nav-link:focus-visible,.home-service-card:focus-visible,.home-panel-footer:focus-visible {
  outline:2px solid var(--cyan-300);
  outline-offset:4px;
}
.btn-primary {
  border-color:rgba(122,221,255,.18);
  background:linear-gradient(135deg,#187cff 0%,#0caeff 100%);
  box-shadow:0 14px 34px rgba(20,129,255,.27),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { box-shadow:0 17px 38px rgba(20,129,255,.36),0 0 0 1px rgba(112,214,255,.10); }
.btn-outline-light {
  border-color:rgba(181,221,247,.24);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-outline-light:hover { border-color:rgba(104,212,255,.40); background:rgba(255,255,255,.085); }
.btn-arrow { display:inline-flex; transition:transform .22s var(--premium-ease); }
.btn:hover .btn-arrow { transform:translate(2px,-1px); }

/* Home premium */
.home-view {
  --mouse-x:76%;
  --mouse-y:24%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(27,147,232,.14),transparent 30%),
    radial-gradient(circle at 14% 82%,rgba(29,93,210,.08),transparent 29%),
    linear-gradient(135deg,#040c17 0%,#071522 45%,#0b2036 100%);
}
.home-view::before {
  opacity:.17;
  background-image:
    linear-gradient(rgba(115,210,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,210,255,.08) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.78) 100%);
  mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.78) 100%);
}
.home-view::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(520px circle at var(--mouse-x) var(--mouse-y),rgba(65,194,255,.115),transparent 62%);
  transition:background-position .08s linear;
}
.home-ambient { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.home-ambient-orb { position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.22; }
.home-ambient-orb-1 { width:400px; height:400px; right:8%; top:7%; background:#1588ff; }
.home-ambient-orb-2 { width:290px; height:290px; left:4%; bottom:0; background:#00b8ff; opacity:.08; }
.home-container {
  min-height:calc(100svh - 78px);
  grid-template-columns:1.03fr .97fr;
  gap:58px;
  padding-top:54px;
  padding-bottom:54px;
}
.home-copy { max-width:670px; }
.home-eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; font-size:11px; letter-spacing:.17em; }
.eyebrow-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan-300);
  box-shadow:0 0 0 5px rgba(104,212,255,.07),0 0 18px rgba(104,212,255,.65);
}
.home-title {
  max-width:650px;
  margin-bottom:24px;
  font-size:clamp(50px,5.65vw,78px);
  line-height:.96;
  letter-spacing:-.058em;
  text-shadow:0 8px 34px rgba(0,0,0,.18);
}
.home-title-accent {
  color:transparent;
  background:linear-gradient(90deg,#24a7f5 5%,#46c9ff 58%,#83e0ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 26px rgba(41,182,246,.08));
}
.home-description { max-width:630px; color:#c5d5e5; font-size:17.5px; line-height:1.8; }
.home-actions { margin:31px 0 24px; }
.home-actions .btn { min-height:54px; padding-inline:25px; border-radius:14px; }
.home-badges { gap:10px; }
.home-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-color:rgba(162,213,242,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.025));
  color:#b9d0e4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.badge-check { color:var(--cyan-300); font-size:11px; text-shadow:0 0 12px rgba(104,212,255,.35); }
.home-credibility {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin-top:16px;
  color:#7395b1;
  font-size:10.5px;
  font-weight:720;
}
.credibility-item { display:inline-flex; align-items:center; white-space:nowrap; }
.credibility-item:not(:last-child)::after { content:""; width:3px; height:3px; margin:0 10px; border-radius:50%; background:rgba(104,212,255,.44); }
.credibility-status-dot {
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:#40d9a0;
  box-shadow:0 0 0 4px rgba(64,217,160,.07),0 0 12px rgba(64,217,160,.24);
}

/* Panel de servicios: sensación de producto */
.home-panel {
  --panel-x:50%;
  --panel-y:20%;
  position:relative;
  isolation:isolate;
  padding:21px;
  overflow:hidden;
  border:1px solid var(--panel-border);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(17,45,76,.84),rgba(5,15,27,.94));
  box-shadow:0 38px 88px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.012),inset 0 1px 0 rgba(255,255,255,.045);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease;
}
.home-panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 24%,transparent 72%,rgba(41,182,246,.025));
}
.home-panel::after {
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  top:-1px;
  height:1px;
  z-index:2;
  background:linear-gradient(90deg,transparent,rgba(132,224,255,.72),transparent);
  box-shadow:0 0 18px rgba(67,203,255,.28);
}
.home-panel:hover { border-color:rgba(115,217,255,.25); box-shadow:0 42px 100px rgba(0,0,0,.42),0 0 45px rgba(32,150,225,.035),inset 0 1px 0 rgba(255,255,255,.05); }
.home-panel-glow {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(360px circle at var(--panel-x) var(--panel-y),rgba(67,203,255,.105),transparent 65%);
}
.home-panel-chrome { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 16px; }
.home-panel-top { margin:0; }
.home-panel-dot { width:8px; height:8px; opacity:.78; }
.panel-dot-red { background:#405970; }
.panel-dot-yellow { background:#405970; }
.panel-dot-green { background:#486b7f; box-shadow:0 0 10px rgba(104,212,255,.07); }
.home-panel-system { color:#567995; font-size:8.5px; font-weight:850; letter-spacing:.18em; }
.home-panel-heading { align-items:center; margin:0 2px 15px; }
.home-panel-heading-copy { display:grid; gap:2px; }
.home-panel-label { font-size:13px; }
.home-panel-note { color:#7898b3; text-align:left; }
.home-panel-location {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:6px 9px;
  border:1px solid rgba(109,204,248,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#779ab8;
  font-size:9px;
  font-weight:750;
}
.location-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan-300); box-shadow:0 0 9px rgba(104,212,255,.52); }
.home-service-links { gap:12px; }
.home-service-card {
  --card-x:50%;
  --card-y:50%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  grid-template-columns:50px 1fr;
  gap:16px;
  padding:19px 20px;
  border-color:rgba(166,217,245,.095);
  border-radius:19px;
  background:linear-gradient(135deg,rgba(255,255,255,.072),rgba(255,255,255,.020));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .25s var(--premium-ease),border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.home-service-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(260px circle at var(--card-x) var(--card-y),rgba(83,205,255,.16),transparent 62%);
  transition:opacity .24s ease;
}
.home-service-card::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(104,212,255,.65),transparent);
  transition:opacity .25s ease;
}
.home-service-card:hover {
  transform:translateY(-4px) translateZ(8px);
  border-color:rgba(109,212,255,.30);
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.028));
  box-shadow:0 18px 38px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04);
}
.home-service-card:hover::before,.home-service-card:hover::after { opacity:1; }
.home-service-icon {
  width:50px;
  height:50px;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(47,178,242,.17),rgba(17,103,192,.07));
  border-color:rgba(104,212,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 24px rgba(0,0,0,.08);
  transition:transform .25s var(--premium-ease),box-shadow .25s ease,border-color .25s ease;
}
.home-service-card:hover .home-service-icon { transform:translateY(-1px) scale(1.04); border-color:rgba(104,212,255,.33); box-shadow:0 0 24px rgba(41,182,246,.08),inset 0 1px 0 rgba(255,255,255,.06); }
.service-icon-svg { width:23px; height:23px; stroke-width:1.65; }
.home-service-content { display:block; }
.home-service-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.home-service-kicker { margin:0; font-size:9.5px; }
.home-service-index { color:#547793; font-size:9px; font-weight:850; letter-spacing:.12em; }
.home-service-title { margin-top:4px; font-size:19px; letter-spacing:-.018em; }
.home-service-copy { margin-top:4px; color:#91acc3; font-size:12px; }
.home-service-action { margin-top:8px; color:#e5f7ff; font-size:10.5px; }
.card-arrow { display:inline-flex; }
.home-service-card:hover .card-arrow { transform:translateX(5px); }
.home-panel-footer {
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:11px;
  align-items:center;
  margin-top:13px;
  padding:12px 14px;
  border:1px solid rgba(104,212,255,.08);
  border-radius:15px;
  background:rgba(2,10,18,.22);
  color:#9cb6cb;
  transition:border-color .22s ease,background .22s ease,transform .22s var(--premium-ease);
}
.home-panel-footer:hover { transform:translateY(-1px); border-color:rgba(104,212,255,.19); background:rgba(7,29,48,.35); }
.home-panel-footer-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:rgba(41,182,246,.08); color:var(--cyan-300); border:1px solid rgba(104,212,255,.10); font-size:12px; font-weight:900; }
.home-panel-footer-copy { display:grid; gap:0; min-width:0; }
.home-panel-footer-title { color:#d9ebf8; font-size:10.5px; }
.home-panel-footer-text { color:#6f91aa; font-size:9.5px; }
.home-panel-footer-arrow { color:var(--cyan-300); transition:transform .22s var(--premium-ease); }
.home-panel-footer:hover .home-panel-footer-arrow { transform:translateX(4px); }

/* Entrada controlada: elegante y rápida */
.page-home .reveal { opacity:0; }
.page-home .reveal-1 { animation:premiumCopyIn .82s var(--premium-ease) .08s forwards; }
.page-home .reveal-2 { animation:premiumPanelIn .92s var(--premium-ease) .19s forwards; }
.page-home .home-service-card { animation:premiumCardIn .65s var(--premium-ease) both; }
.page-home .home-service-card:nth-child(1) { animation-delay:.43s; }
.page-home .home-service-card:nth-child(2) { animation-delay:.50s; }
.page-home .home-service-card:nth-child(3) { animation-delay:.57s; }
@keyframes premiumCopyIn {
  from { opacity:0; filter:blur(4px); }
  to { opacity:1; filter:blur(0); }
}
@keyframes premiumPanelIn {
  from { opacity:0; filter:blur(5px); }
  to { opacity:1; filter:blur(0); }
}
@keyframes premiumCardIn {
  from { opacity:0; }
  to { opacity:1; }
}

@media (max-width:1100px) {
  .main-nav { gap:17px; }
  .home-container { gap:40px; }
}

@media (max-width:980px) {
  .home-container { min-height:auto; padding-top:70px; padding-bottom:70px; }
  .home-copy { max-width:760px; }
  .home-panel { max-width:760px; width:100%; transform:none !important; }
  .home-view::after { display:none; }
}

@media (max-width:820px) {
  .site-header { background:rgba(5,13,24,.94); }
  .main-nav { background:rgba(5,13,24,.98); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .brand-text { font-size:19px; }
}

@media (max-width:640px) {
  .home-container { padding-top:50px; padding-bottom:52px; gap:40px; }
  .home-eyebrow { margin-bottom:17px; font-size:9.5px; letter-spacing:.145em; }
  .home-title { font-size:clamp(45px,14vw,60px); margin-bottom:20px; }
  .home-description { font-size:16px; line-height:1.7; }
  .home-actions { gap:10px; }
  .home-badges { gap:8px; }
  .home-badge { width:100%; justify-content:flex-start; }
  .home-credibility { gap:8px 0; }
  .credibility-item:not(:last-child)::after { margin-inline:8px; }
  .home-panel { padding:15px; border-radius:24px; }
  .home-panel-chrome { margin-bottom:13px; }
  .home-panel-heading { align-items:flex-start; flex-direction:column; gap:9px; }
  .home-panel-location { align-self:flex-start; }
  .home-service-card { grid-template-columns:45px 1fr; gap:13px; padding:17px 16px; }
  .home-service-icon { width:45px; height:45px; border-radius:13px; }
  .home-service-title { font-size:17px; }
  .home-service-copy { font-size:11.5px; }
  .home-panel-footer { grid-template-columns:30px 1fr auto; padding:11px 12px; }
  .home-panel-footer-icon { width:30px; height:30px; }
}

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

/* =========================================================
   DN TECH — WEB SHOWCASE / PORTFOLIO EXPERIENCE
   Cada bloque mantiene ID + clases reutilizables.
   ========================================================= */

/* La cabecera se integra visualmente con las páginas oscuras. */
.site-header {
  background:rgba(5,13,24,.96);
  box-shadow:0 12px 36px rgba(0,0,0,.16);
}
.header-cta { min-height:40px; padding-inline:16px; }

.page-web {
  --web-bg:#050d18;
  --web-panel:#0a1828;
  --web-panel-2:#0d2035;
  --web-line:rgba(139,211,250,.14);
  --web-muted:#91abc1;
  --web-soft:#c7d8e7;
  background:var(--web-bg);
  color:#f7fbff;
}
.page-web .site-footer { border-top:1px solid rgba(104,212,255,.08); }
.premium-web-main { background:var(--web-bg); }
.premium-web-view {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  padding:0;
  background:
    radial-gradient(circle at 80% 16%,rgba(30,151,235,.14),transparent 28%),
    radial-gradient(circle at 12% 72%,rgba(26,96,205,.07),transparent 31%),
    linear-gradient(145deg,#050d18 0%,#0a1b2e 100%);
}
.premium-web-view::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.13;
  pointer-events:none;
  background-image:linear-gradient(rgba(104,212,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.09) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 78% 36%,#000 0%,rgba(0,0,0,.72) 28%,transparent 72%);
  mask-image:radial-gradient(circle at 78% 36%,#000 0%,rgba(0,0,0,.72) 28%,transparent 72%);
}
.premium-web-view::after {
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  right:-260px;
  top:8%;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(104,212,255,.05);
  box-shadow:0 0 0 90px rgba(104,212,255,.016),0 0 0 180px rgba(104,212,255,.010);
}
.web-showcase-container {
  min-height:calc(100vh - var(--header-h));
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:54px;
  align-items:center;
  padding-top:48px;
  padding-bottom:48px;
}
.web-showcase-copy { min-width:0; max-width:610px; }
.web-showcase-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#4cc8ff;
  font-size:10px;
  letter-spacing:.17em;
}
.web-status-dot {
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:#4ae0ad;
  box-shadow:0 0 0 5px rgba(74,224,173,.07),0 0 16px rgba(74,224,173,.36);
}
.web-showcase-title {
  margin:0 0 22px;
  max-width:610px;
  color:#f9fcff;
  font-size:clamp(46px,5vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
}
.web-title-accent {
  display:inline;
  color:transparent;
  background:linear-gradient(90deg,#28a9ff 0%,#62d5ff 58%,#9be7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.web-showcase-subtitle,
.web-projects-subtitle,
.web-process-subtitle,
.web-plans-subtitle {
  margin:0;
  max-width:650px;
  color:#aebfd0;
  font-size:16px;
  line-height:1.78;
}
.web-showcase-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; }
.web-primary-button,.web-secondary-button { min-height:52px; }
.web-feature-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.web-feature-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(151,213,246,.10);
  border-radius:999px;
  background:rgba(255,255,255,.032);
  color:#91adc3;
  font-size:10.5px;
  font-weight:700;
}
.web-feature-check { color:#6ddcff; text-shadow:0 0 12px rgba(104,212,255,.35); }
.web-showcase-subnav {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:26px;
}
.web-subnav-link {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(151,213,246,.08);
  border-radius:13px;
  background:rgba(255,255,255,.021);
  transition:transform .24s var(--premium-ease),border-color .24s ease,background .24s ease;
}
.web-subnav-link:hover { transform:translateY(-2px); border-color:rgba(104,212,255,.23); background:rgba(30,93,136,.12); }
.web-subnav-index { color:#4b718f; font-size:8px; font-weight:900; letter-spacing:.1em; }
.web-subnav-copy { display:grid; min-width:0; }
.web-subnav-title { color:#dceaf6; font-size:10px; }
.web-subnav-note { overflow:hidden; color:#66849d; font-size:8.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.web-subnav-arrow { color:#55cfff; font-size:10px; transition:transform .22s ease; }
.web-subnav-link:hover .web-subnav-arrow { transform:translate(2px,-1px); }

/* Demo principal */
.web-demo-column { min-width:0; }
.web-demo-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
  padding-inline:3px;
}
.web-demo-toolbar-copy { display:flex; align-items:center; gap:8px; min-width:0; }
.web-demo-live-dot { width:6px; height:6px; border-radius:50%; background:#4ae0ad; box-shadow:0 0 12px rgba(74,224,173,.52); }
.web-demo-toolbar-label { color:#dceaf5; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.web-demo-toolbar-project { color:#5f819c; font-size:9px; }
.web-device-switcher {
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(138,210,247,.10);
  border-radius:11px;
  background:rgba(3,12,21,.48);
}
.web-device-button {
  display:grid;
  place-items:center;
  width:31px;
  height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  color:#62839d;
  background:transparent;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
.web-device-button:hover { color:#bceaff; }
.web-device-button.is-active { color:#7addff; background:rgba(41,182,246,.11); box-shadow:inset 0 0 0 1px rgba(104,212,255,.13); }
.web-device-icon { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.web-demo-stage {
  --demo-x:55%;
  --demo-y:25%;
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
  padding:28px;
  overflow:hidden;
  border:1px solid rgba(109,212,255,.17);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(15,40,67,.88),rgba(5,15,27,.96));
  box-shadow:0 42px 95px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
  transform-style:preserve-3d;
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease;
}
.web-demo-stage::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 25%,transparent 76%,rgba(41,182,246,.03));
}
.web-demo-stage::after {
  content:"";
  position:absolute;
  top:0;
  left:13%;
  right:13%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(118,222,255,.72),transparent);
  box-shadow:0 0 20px rgba(67,203,255,.3);
}
.web-demo-stage:hover { border-color:rgba(109,212,255,.27); box-shadow:0 46px 105px rgba(0,0,0,.43),0 0 52px rgba(32,150,225,.035),inset 0 1px 0 rgba(255,255,255,.05); }
.web-demo-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(380px circle at var(--demo-x) var(--demo-y),rgba(70,202,255,.12),transparent 65%); }
.web-browser-frame {
  position:relative;
  width:100%;
  max-width:720px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#f4f0e9;
  box-shadow:0 28px 60px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.025);
  transition:width .48s var(--premium-ease),border-radius .48s var(--premium-ease),transform .48s var(--premium-ease);
}
.web-browser-chrome {
  height:35px;
  display:grid;
  grid-template-columns:70px 1fr 38px;
  align-items:center;
  padding:0 10px;
  background:#e9e5de;
  border-bottom:1px solid rgba(35,35,35,.08);
}
.web-browser-dots { display:flex; gap:5px; }
.browser-dot { width:7px; height:7px; border-radius:50%; background:#bab5ae; }
.web-browser-address {
  justify-self:center;
  min-width:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#716c66;
  font-size:8px;
}
.web-browser-lock { color:#6d9a75; font-size:5px; }
.web-browser-action { justify-self:end; color:#9b958f; font-size:10px; letter-spacing:2px; }
.web-demo-site {
  position:relative;
  min-height:430px;
  overflow:hidden;
  background:#f4f0e9;
  color:#1b1a18;
}
.aurea-demo-nav {
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid rgba(32,28,24,.09);
}
.aurea-demo-brand { font-family:Georgia,serif; font-size:15px; letter-spacing:.16em; }
.aurea-brand-dot { color:#a87655; }
.aurea-demo-links { display:flex; gap:21px; color:#777068; font-size:7.5px; text-transform:uppercase; letter-spacing:.12em; }
.aurea-demo-menu { display:none; }
.aurea-demo-hero { min-height:318px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; padding:28px; gap:28px; }
.aurea-demo-copy { position:relative; z-index:2; }
.aurea-demo-kicker { color:#9b6f52; font-size:7px; font-weight:700; letter-spacing:.18em; }
.aurea-demo-title { margin:13px 0 13px; max-width:300px; font-family:Georgia,serif; font-size:34px; line-height:1.03; font-weight:500; letter-spacing:-.035em; }
.aurea-demo-title em { color:#a87655; font-weight:400; }
.aurea-demo-text { max-width:270px; margin:0; color:#706a63; font-size:9px; line-height:1.65; }
.aurea-demo-cta { display:inline-flex; align-items:center; gap:8px; margin-top:17px; padding-bottom:4px; border-bottom:1px solid #342f2a; font-size:8px; font-weight:700; }
.aurea-demo-art { position:relative; height:246px; }
.aurea-art-card { position:absolute; overflow:hidden; box-shadow:0 17px 35px rgba(79,59,45,.16); }
.aurea-art-card-main { inset:0 23px 10px 26px; background:linear-gradient(145deg,#d9cbbd,#b49b84); }
.aurea-art-light { position:absolute; width:95px; height:180px; right:12px; top:-15px; background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,244,220,.7)); transform:skewX(-17deg); filter:blur(1px); }
.aurea-art-sofa { position:absolute; left:34px; right:45px; bottom:38px; height:63px; border-radius:4px 4px 12px 12px; background:#8f7a66; box-shadow:0 12px 0 -5px #6f6256; }
.aurea-art-sofa::before,.aurea-art-sofa::after { content:""; position:absolute; bottom:10px; width:46%; height:42px; border-radius:5px 5px 1px 1px; background:#a48e78; }
.aurea-art-sofa::before { left:2px; }.aurea-art-sofa::after { right:2px; }
.aurea-art-table { position:absolute; right:35px; bottom:29px; width:55px; height:18px; border-radius:50%; background:#c5a783; box-shadow:0 18px 0 -7px #675443; }
.aurea-art-card-small { width:95px; height:108px; right:-2px; bottom:-2px; border:7px solid #f4f0e9; background:#6c786d; }
.aurea-art-arch { position:absolute; width:54px; height:88px; left:13px; bottom:-8px; border-radius:34px 34px 0 0; background:#c8c0af; }
.aurea-art-caption { position:absolute; left:13px; bottom:-4px; color:#7b7167; font-size:6.5px; letter-spacing:.08em; transform:rotate(-90deg); transform-origin:left bottom; }
.aurea-demo-stats { min-height:54px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(32,28,24,.09); }
.aurea-demo-stats span { display:grid; align-content:center; padding:8px 20px; border-right:1px solid rgba(32,28,24,.09); }
.aurea-demo-stats span:last-child { border-right:0; }
.aurea-demo-stats strong { font-family:Georgia,serif; font-size:11px; font-weight:500; }
.aurea-demo-stats small { color:#8d857c; font-size:6.5px; text-transform:uppercase; letter-spacing:.13em; }
.web-demo-badge {
  position:absolute;
  left:22px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(104,212,255,.11);
  border-radius:999px;
  background:rgba(3,11,20,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#6f91aa;
  font-size:8px;
}
.web-demo-badge-dot { width:5px; height:5px; border-radius:50%; background:#6ddcff; box-shadow:0 0 9px rgba(104,212,255,.5); }

/* Simulación responsive del proyecto */
.web-demo-stage[data-preview-device="tablet"] .web-browser-frame { width:70%; max-width:500px; }
.web-demo-stage[data-preview-device="tablet"] .aurea-demo-links { display:none; }
.web-demo-stage[data-preview-device="tablet"] .aurea-demo-menu { display:block; color:#716a63; font-size:12px; }
.web-demo-stage[data-preview-device="tablet"] .aurea-demo-hero { grid-template-columns:1fr; min-height:430px; align-content:center; }
.web-demo-stage[data-preview-device="tablet"] .aurea-demo-art { height:160px; }
.web-demo-stage[data-preview-device="tablet"] .aurea-demo-title { font-size:30px; }
.web-demo-stage[data-preview-device="mobile"] .web-browser-frame { width:40%; min-width:245px; max-width:285px; border-radius:24px; }
.web-demo-stage[data-preview-device="mobile"] .web-browser-chrome { grid-template-columns:45px 1fr 24px; height:30px; padding-inline:8px; }
.web-demo-stage[data-preview-device="mobile"] .web-browser-address { min-width:0; width:100%; padding-inline:6px; }
.web-demo-stage[data-preview-device="mobile"] .web-browser-dots { gap:3px; }.web-demo-stage[data-preview-device="mobile"] .browser-dot { width:5px; height:5px; }
.web-demo-stage[data-preview-device="mobile"] .aurea-demo-nav { height:48px; padding-inline:15px; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-links { display:none; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-menu { display:block; font-size:11px; }
.web-demo-stage[data-preview-device="mobile"] .aurea-demo-hero { grid-template-columns:1fr; min-height:420px; padding:23px 18px; gap:16px; align-content:center; }
.web-demo-stage[data-preview-device="mobile"] .aurea-demo-kicker { font-size:5.5px; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-title { margin-block:10px; font-size:27px; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-text { font-size:7.5px; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-art { height:135px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-card-main { inset:0 10px 0 8px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-card-small { width:62px; height:72px; right:-5px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-arch { width:34px; height:54px; left:7px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-sofa { left:20px; right:28px; bottom:21px; height:35px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-sofa::before,.web-demo-stage[data-preview-device="mobile"] .aurea-art-sofa::after { height:24px; }.web-demo-stage[data-preview-device="mobile"] .aurea-art-table { width:35px; right:18px; bottom:16px; }
.web-demo-stage[data-preview-device="mobile"] .aurea-demo-stats { grid-template-columns:1fr; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-stats span { display:none; }.web-demo-stage[data-preview-device="mobile"] .aurea-demo-stats span:first-child { display:grid; min-height:42px; border-right:0; }

/* Entrada de la página Web */
.web-reveal { opacity:0; }
.page-web-showcase .web-reveal-copy { animation:webCopyIn .78s var(--premium-ease) .06s forwards; }
.page-web-showcase .web-reveal-demo { animation:webDemoIn .92s var(--premium-ease) .16s forwards; }
@keyframes webCopyIn { from { opacity:0; transform:translateY(8px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes webDemoIn { from { opacity:0; transform:translateY(12px) scale(.99); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }

/* =========================================================
   PORTFOLIO CONCEPTUAL
   ========================================================= */
.web-projects-container,.web-process-container,.web-plans-container {
  min-height:calc(100vh - var(--header-h));
  display:grid;
  align-content:center;
  padding-top:46px;
  padding-bottom:46px;
}
.web-projects-heading,.web-process-heading,.web-plans-heading { max-width:880px; margin-bottom:28px; }
.web-projects-title,.web-process-title,.web-plans-title {
  margin:0 0 14px;
  color:#f8fbff;
  font-size:clamp(38px,4.3vw,60px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.web-projects-layout { display:grid; grid-template-columns:285px 1fr; gap:22px; align-items:stretch; }
.project-selector { display:grid; gap:9px; align-content:start; }
.project-tab {
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:10px;
  align-items:center;
  min-height:72px;
  padding:13px 14px;
  border:1px solid rgba(145,210,244,.09);
  border-radius:15px;
  text-align:left;
  color:#a5bbcf;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  transition:transform .22s var(--premium-ease),border-color .22s ease,background .22s ease,color .22s ease;
}
.project-tab:hover { transform:translateX(3px); border-color:rgba(104,212,255,.20); }
.project-tab.is-active { color:#edf8ff; border-color:rgba(104,212,255,.28); background:linear-gradient(135deg,rgba(36,149,255,.13),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.project-tab-index { color:#4d7592; font-size:9px; font-weight:900; }
.project-tab-copy { display:grid; }.project-tab-copy strong { font-size:12px; letter-spacing:.06em; }.project-tab-copy small { color:#6d8aa2; font-size:9px; }
.project-tab-arrow { color:#58ceff; transition:transform .22s ease; }.project-tab:hover .project-tab-arrow { transform:translateX(3px); }
.project-selector-note { display:flex; gap:10px; margin-top:8px; padding:14px; border:1px solid rgba(104,212,255,.07); border-radius:14px; background:rgba(1,9,17,.24); color:#67869f; }
.project-selector-note-mark { color:#5acfff; }.project-selector-note p { margin:0; font-size:9px; line-height:1.55; }.project-selector-note strong { color:#afc9dd; }
.project-preview-stage { min-width:0; }
.portfolio-preview { height:100%; }
.portfolio-preview[hidden] { display:none; }
.portfolio-browser { overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#fff; box-shadow:0 28px 65px rgba(0,0,0,.32); }
.portfolio-browser-bar { height:35px; display:grid; grid-template-columns:70px 1fr 50px; align-items:center; padding-inline:12px; background:#101824; color:#8797a8; }
.portfolio-dots { display:flex; gap:5px; }.portfolio-dots i { width:6px; height:6px; border-radius:50%; background:#394a5d; }
.portfolio-url { justify-self:center; padding:4px 16px; border-radius:999px; background:#182535; color:#70849a; font-size:7.5px; }.portfolio-browser-menu { justify-self:end; font-size:9px; letter-spacing:2px; }
.portfolio-screen { min-height:340px; }
.project-meta { display:grid; grid-template-columns:auto 1fr; gap:2px 15px; margin-top:12px; padding-inline:3px; }
.project-meta-label { grid-row:1 / span 2; align-self:start; padding-top:2px; color:#54cfff; font-size:8px; font-weight:900; letter-spacing:.14em; }.project-meta strong { color:#dceaf5; font-size:11px; }.project-meta small { color:#6d8aa2; font-size:9px; }
/* Aurea preview */
.aurea-project-screen { background:#f4f0e9; color:#211e1b; }.aurea-project-nav,.motor-project-nav,.nova-project-nav { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 25px; }.aurea-project-nav { border-bottom:1px solid rgba(40,30,20,.08); }.aurea-project-nav b { font-family:Georgia,serif; letter-spacing:.15em; font-size:13px; }.aurea-project-nav span { color:#766f68; font-size:6.5px; text-transform:uppercase; letter-spacing:.11em; }
.aurea-project-body { min-height:292px; display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; align-items:center; padding:24px 28px; }.project-kicker { color:#9b6f52; font-size:6px; font-weight:700; letter-spacing:.17em; }.aurea-project-body h2 { margin:10px 0; font-family:Georgia,serif; font-size:31px; line-height:1; font-weight:500; }.aurea-project-body h2 em { color:#a87655; font-weight:400; }.aurea-project-body p { max-width:250px; margin:0; color:#756d66; font-size:8px; line-height:1.65; }.aurea-project-body button { margin-top:15px; padding:8px 12px; border:0; background:#2c2926; color:#fff; font-size:7px; }.aurea-project-art { position:relative; height:220px; overflow:hidden; background:linear-gradient(145deg,#ddcfbf,#a98f78); }.aurea-project-sun { position:absolute; width:150px; height:260px; right:-10px; top:-55px; background:linear-gradient(90deg,transparent,rgba(255,244,220,.72)); transform:rotate(18deg); }.aurea-project-panel { position:absolute; left:40px; right:38px; bottom:38px; height:65px; background:#8d7864; border-radius:3px 3px 12px 12px; box-shadow:0 12px 0 -5px #63584f; }.aurea-project-floor { position:absolute; left:0; right:0; bottom:0; height:34px; background:#c0aa94; }
/* MotorLab preview */
.motor-project-screen { color:#f8fbff; background:#090b0e; }.motor-project-nav { border-bottom:1px solid rgba(255,255,255,.08); }.motor-project-nav b { font-size:13px; letter-spacing:.08em; }.motor-project-nav b span { color:#ff5d2f; }.motor-project-nav > span { color:#747c85; font-size:6.5px; text-transform:uppercase; letter-spacing:.11em; }.motor-project-body { position:relative; min-height:292px; padding:30px; overflow:hidden; background:radial-gradient(circle at 86% 30%,rgba(255,93,47,.19),transparent 32%),linear-gradient(120deg,#0a0d11,#11161b); }.motor-project-body::after { content:""; position:absolute; right:-55px; bottom:-95px; width:320px; height:320px; border:40px solid #191f25; border-radius:50%; box-shadow:0 0 0 18px #0c0f12,0 0 0 20px #2a3138; }.motor-tag { position:relative; z-index:2; color:#ff7047; font-size:6px; font-weight:800; letter-spacing:.2em; }.motor-project-body h2 { position:relative; z-index:2; margin:11px 0; font-size:36px; line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }.motor-project-body h2 em { color:#ff6840; font-style:normal; }.motor-project-body p { position:relative; z-index:2; max-width:280px; margin:0; color:#8f9aa5; font-size:8px; line-height:1.6; }.motor-actions { position:relative; z-index:2; display:flex; align-items:center; gap:13px; margin-top:18px; }.motor-actions button { padding:9px 12px; border:0; background:#ff5d2f; color:#fff; font-size:7px; font-weight:800; }.motor-actions span { color:#68747e; font-size:7px; }.motor-grid { position:absolute; z-index:3; right:25px; top:27px; display:grid; grid-template-columns:repeat(2,58px); gap:5px; }.motor-grid span { display:grid; place-items:center; min-height:48px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#71808b; font-size:6px; letter-spacing:.12em; }
/* Nova preview */
.nova-project-screen { color:#173148; background:#eff8f8; }.nova-project-nav { border-bottom:1px solid rgba(23,49,72,.08); }.nova-project-nav b { color:#173148; font-size:13px; }.nova-project-nav b span { color:#35b9b1; }.nova-project-nav > span { color:#66858b; font-size:6.5px; text-transform:uppercase; letter-spacing:.1em; }.nova-project-body { min-height:292px; display:grid; grid-template-columns:1fr .8fr; gap:24px; align-items:center; padding:28px; background:radial-gradient(circle at 78% 50%,rgba(53,185,177,.12),transparent 33%); }.nova-tag { color:#35a89f; font-size:6px; font-weight:800; letter-spacing:.16em; }.nova-project-body h2 { margin:10px 0; font-size:31px; line-height:1.02; letter-spacing:-.04em; }.nova-project-body h2 em { color:#35a89f; font-style:normal; }.nova-project-body p { max-width:280px; margin:0; color:#5d7a83; font-size:8px; line-height:1.65; }.nova-project-body button { margin-top:15px; padding:9px 13px; border:0; border-radius:999px; background:#173148; color:#fff; font-size:7px; }.nova-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.nova-cards span { display:grid; padding:15px; border:1px solid rgba(23,49,72,.08); border-radius:14px; background:rgba(255,255,255,.68); }.nova-cards b { font-size:17px; }.nova-cards small { color:#739095; font-size:6.5px; }.nova-card-main { grid-column:1 / -1; min-height:86px; align-content:end; background:linear-gradient(135deg,#d6efed,#fff) !important; }.nova-card-main b { color:#2b9e96; font-size:25px; }
.web-projects-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }

/* =========================================================
   PROCESO WEB
   ========================================================= */
.web-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.web-process-card { position:relative; min-height:245px; padding:22px; overflow:hidden; border:1px solid rgba(145,210,244,.10); border-radius:19px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:transform .24s var(--premium-ease),border-color .24s ease,background .24s ease; }
.web-process-card:hover { transform:translateY(-4px); border-color:rgba(104,212,255,.25); background:linear-gradient(145deg,rgba(36,149,255,.09),rgba(255,255,255,.025)); }.web-process-number { position:absolute; right:17px; top:15px; color:#426681; font-size:9px; font-weight:900; letter-spacing:.12em; }.web-process-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:31px; border:1px solid rgba(104,212,255,.15); border-radius:12px; background:rgba(41,182,246,.07); color:#64d6ff; font-size:12px; font-weight:850; }.web-process-card h2 { margin:0 0 8px; color:#eff8ff; font-size:18px; }.web-process-card p { margin:0; color:#809db4; font-size:11px; line-height:1.65; }.web-process-output { position:absolute; left:22px; right:22px; bottom:18px; padding-top:11px; border-top:1px solid rgba(255,255,255,.06); color:#557893; font-size:7.5px; font-weight:850; letter-spacing:.11em; }
.web-process-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:15px; padding:17px 20px; border:1px solid rgba(104,212,255,.09); border-radius:17px; background:rgba(2,10,18,.30); }.web-process-footer-copy { display:grid; }.web-process-footer-kicker { color:#4ecbff; font-size:7.5px; font-weight:900; letter-spacing:.14em; }.web-process-footer-copy strong { color:#dbeaf6; font-size:13px; }.web-process-footer-copy small { color:#68869e; font-size:9px; }.web-process-actions { display:flex; gap:10px; flex:none; }.web-process-actions .btn { min-height:42px; padding-inline:16px; font-size:10px; }

/* =========================================================
   PLANES WEB
   ========================================================= */
.web-plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.web-plan-card { position:relative; min-height:360px; padding:23px; border:1px solid rgba(145,210,244,.10); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.046),rgba(255,255,255,.016)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:transform .24s var(--premium-ease),border-color .24s ease,box-shadow .24s ease; }.web-plan-card:hover { transform:translateY(-4px); border-color:rgba(104,212,255,.22); }.web-plan-card-featured { border-color:rgba(104,212,255,.26); background:linear-gradient(145deg,rgba(27,121,198,.15),rgba(255,255,255,.025)); box-shadow:0 22px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04); }.web-plan-popular { position:absolute; right:17px; top:17px; padding:5px 7px; border-radius:999px; background:rgba(41,182,246,.10); color:#69d8ff; font-size:6.5px; font-weight:900; letter-spacing:.12em; }.web-plan-tag { display:inline-block; margin-bottom:19px; color:#55ccff; font-size:8px; font-weight:900; letter-spacing:.15em; }.web-plan-card h2 { min-height:48px; margin:0 0 14px; color:#edf7ff; font-size:19px; line-height:1.25; }.web-plan-price { display:flex; align-items:baseline; gap:7px; margin-bottom:12px; }.web-plan-price small { color:#617f98; font-size:8px; text-transform:uppercase; }.web-plan-price strong { color:#fff; font-size:29px; letter-spacing:-.04em; }.web-plan-card > p { margin:0 0 15px; color:#7f9ab0; font-size:10.5px; line-height:1.6; }.web-plan-card ul { margin:0; padding:0; list-style:none; }.web-plan-card li { padding:7px 0; border-bottom:1px solid rgba(255,255,255,.055); color:#a9bfd1; font-size:9.5px; }.web-plan-card li::before { content:"✓"; margin-right:7px; color:#5fd6ff; }.web-plan-cta { position:absolute; left:23px; right:23px; bottom:19px; display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); color:#e3f4ff; font-size:9px; font-weight:800; }.web-plan-cta span { color:#5fd6ff; transition:transform .2s ease; }.web-plan-cta:hover span { transform:translate(2px,-1px); }
.web-plans-maintenance { display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; margin-top:13px; padding:14px 17px; border:1px solid rgba(104,212,255,.08); border-radius:15px; background:rgba(2,10,18,.26); }.web-maintenance-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:rgba(41,182,246,.08); color:#64d6ff; font-size:17px; }.web-plans-maintenance div { display:grid; }.web-plans-maintenance strong { color:#dceaf6; font-size:11px; }.web-plans-maintenance small { color:#69879e; font-size:9px; }.web-plans-maintenance > a { color:#66d7ff; font-size:9px; font-weight:800; }

/* Responsive web premium */
@media (max-width:1080px) {
  .web-showcase-container { grid-template-columns:.9fr 1.1fr; gap:36px; }
  .web-showcase-subnav { grid-template-columns:1fr; }
  .web-subnav-note { white-space:normal; }
  .web-demo-stage { min-height:520px; padding:20px; }
  .web-projects-layout { grid-template-columns:240px 1fr; }
}
@media (max-width:980px) {
  .web-showcase-container { min-height:auto; grid-template-columns:1fr; padding-top:66px; padding-bottom:66px; }
  .web-showcase-copy { max-width:760px; }
  .web-showcase-subnav { grid-template-columns:repeat(3,1fr); }
  .web-demo-column { max-width:820px; width:100%; }
  .web-demo-stage { transform:none !important; }
  .web-projects-container,.web-process-container,.web-plans-container { min-height:auto; padding-top:64px; padding-bottom:64px; }
  .web-projects-layout { grid-template-columns:1fr; }
  .project-selector { grid-template-columns:repeat(3,1fr); }.project-selector-note { grid-column:1/-1; }
  .web-process-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .web-showcase-subnav { grid-template-columns:1fr; }
  .web-demo-toolbar { align-items:flex-start; }
  .web-demo-toolbar-project { display:none; }
  .web-demo-stage { min-height:500px; padding:15px; }
  .web-browser-frame { max-width:100%; }
  .aurea-demo-title { font-size:29px; }
  .aurea-demo-hero { grid-template-columns:1fr; min-height:410px; }.aurea-demo-art { height:150px; }
  .project-selector { grid-template-columns:1fr; }.project-selector-note { grid-column:auto; }
  .portfolio-screen { min-height:390px; }.aurea-project-body,.nova-project-body { grid-template-columns:1fr; }.aurea-project-art { height:150px; }.motor-grid { opacity:.6; right:-12px; }.nova-cards { grid-template-columns:repeat(3,1fr); }.nova-card-main { grid-column:auto; }
  .web-process-grid,.web-plans-grid { grid-template-columns:1fr; }.web-process-card { min-height:220px; }.web-process-footer { align-items:flex-start; flex-direction:column; }.web-process-actions { width:100%; }.web-process-actions .btn { flex:1; }.web-plan-card { min-height:340px; }
}
@media (max-width:640px) {
  .web-showcase-container { padding-top:48px; padding-bottom:50px; gap:38px; }
  .web-showcase-title { font-size:clamp(43px,13vw,58px); }
  .web-showcase-subtitle,.web-projects-subtitle,.web-process-subtitle,.web-plans-subtitle { font-size:15px; line-height:1.7; }
  .web-showcase-actions { flex-direction:column; }.web-showcase-actions .btn { width:100%; }
  .web-feature-chip { width:100%; justify-content:flex-start; }
  .web-demo-stage[data-preview-device="desktop"] .web-browser-frame { width:100%; }
  .web-browser-chrome { grid-template-columns:48px 1fr 28px; }.web-browser-address { min-width:0; width:100%; }.aurea-demo-links { display:none; }.aurea-demo-menu { display:block; }
  .web-projects-title,.web-process-title,.web-plans-title { font-size:clamp(38px,11vw,52px); }
  .project-meta { grid-template-columns:1fr; }.project-meta-label { grid-row:auto; }
  .web-projects-actions { flex-direction:column; }.web-projects-actions .btn { width:100%; }
  .web-process-actions { flex-direction:column; }.web-plans-maintenance { grid-template-columns:34px 1fr; }.web-plans-maintenance > a { grid-column:2; }
}

@media (prefers-reduced-motion:reduce) {
  .page-web .web-reveal { opacity:1; animation:none !important; }
  .web-demo-stage { transform:none !important; }
}


/* =========================================================
   DN TECH — PREMIUM V4 / HOME ART DIRECTION POLISH
   Último pulido de portada: jerarquía, densidad y conversión.
   ========================================================= */

/* Header: el CTA acompaña, no compite con el hero */
.header-cta {
  min-height:38px;
  padding-inline:15px;
  border-radius:11px;
  font-size:11.5px;
  background:linear-gradient(135deg,rgba(23,126,239,.94),rgba(16,166,239,.94));
  box-shadow:0 9px 24px rgba(14,126,226,.19),inset 0 1px 0 rgba(255,255,255,.14);
}
.header-cta:hover {
  box-shadow:0 12px 28px rgba(14,126,226,.26),0 0 0 1px rgba(112,214,255,.08);
}

/* Monograma: D exterior más reconocible + N interior contrastada */
.brand-symbol-d { stroke-width:2.25; }
.brand-symbol-n { stroke-width:2.35; }
.brand-mark { box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08),0 0 30px rgba(41,182,246,.10); }

/* Iluminación ambiental más intencional y asimétrica */
.home-view {
  background:
    radial-gradient(circle at 84% 18%,rgba(25,146,229,.15),transparent 31%),
    radial-gradient(circle at 30% 48%,rgba(34,191,255,.055),transparent 24%),
    radial-gradient(circle at 8% 88%,rgba(31,92,201,.065),transparent 29%),
    linear-gradient(118deg,#06101d 0%,#07182a 52%,#0a2036 100%);
}
.home-ambient-orb-1 { width:430px; height:430px; right:5%; top:5%; opacity:.20; }
.home-ambient-orb-2 { width:270px; height:270px; left:1%; bottom:-3%; opacity:.055; }
.home-ambient-orb-3 {
  width:330px;
  height:230px;
  left:23%;
  top:42%;
  background:#28c8ff;
  opacity:.055;
  filter:blur(100px);
}

/* Hero: limpia la zona de confianza y deja respirar el titular */
.home-eyebrow { letter-spacing:.155em; }
.home-description { max-width:615px; }
.home-badges { margin-top:1px; }
.home-credibility {
  margin-top:14px;
  color:#7597b2;
  font-size:10.25px;
  font-weight:700;
  letter-spacing:.005em;
}
.credibility-item:not(:last-child)::after {
  width:3px;
  height:3px;
  margin:0 11px;
  background:rgba(104,212,255,.34);
}
.credibility-status-dot {
  width:5px;
  height:5px;
  margin-right:7px;
}

/* Panel: misma presencia, menos masa visual */
.home-panel {
  padding:20px;
}
.home-panel-chrome { margin-bottom:14px; }
.home-panel-heading { margin-bottom:13px; }
.home-service-links {
  position:relative;
  gap:10px;
}
/* Línea de sistema: solo asoma entre tarjetas y conecta 01/02/03 */
.home-service-links::before {
  content:"";
  position:absolute;
  z-index:0;
  top:20px;
  bottom:20px;
  right:22px;
  width:1px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(92,198,244,.19) 14%,rgba(92,198,244,.19) 86%,transparent);
  box-shadow:0 0 10px rgba(71,190,246,.055);
}
.home-service-card {
  z-index:1;
  grid-template-columns:46px 1fr;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
}
.home-service-card:hover {
  transform:translateY(-3px) translateZ(7px);
  border-color:rgba(109,212,255,.34);
  box-shadow:0 16px 34px rgba(0,0,0,.15),0 0 28px rgba(40,184,242,.035),inset 0 1px 0 rgba(255,255,255,.045);
}
.home-service-icon {
  width:46px;
  height:46px;
  border-radius:14px;
}
.home-service-card:hover .home-service-icon {
  transform:translateY(-2px) scale(1.035);
  border-color:rgba(104,212,255,.38);
  box-shadow:0 0 27px rgba(41,182,246,.105),inset 0 1px 0 rgba(255,255,255,.065);
}
.service-icon-svg { width:22px; height:22px; }
.home-service-kicker { font-size:9px; letter-spacing:.13em; }
.home-service-index {
  position:relative;
  z-index:2;
  padding-left:8px;
  color:#62829c;
  font-size:8.5px;
  background:linear-gradient(90deg,transparent,rgba(9,24,40,.86) 30%);
}
.home-service-title {
  margin-top:3px;
  font-size:18px;
  font-weight:720;
  letter-spacing:-.014em;
}
.home-service-copy { margin-top:3px; color:#98b1c6; font-size:11.6px; }
.home-service-action { margin-top:7px; font-size:10px; }
.home-service-card .card-arrow { transition:transform .24s var(--premium-ease),color .24s ease; }
.home-service-card:hover .card-arrow { transform:translateX(6px); color:#8de1ff; }
.home-service-card:hover .home-service-index { color:#85cce9; }
.home-panel-footer { margin-top:11px; padding:11px 13px; }

@media (max-width:980px) {
  .header-cta { min-height:38px; padding-inline:14px; }
}
@media (max-width:640px) {
  .home-service-links::before { right:19px; }
  .home-service-card { grid-template-columns:44px 1fr; padding:16px 15px; }
  .home-service-icon { width:44px; height:44px; }
  .home-service-title { font-size:17px; }
  .home-credibility { line-height:1.7; }
}


/* =========================================================
   DN TECH — PREMIUM V5 / HOME FINAL EDITORIAL POLISH
   Menos ruido, más jerarquía, marca y sensación de producto.
   ========================================================= */

/* Jerarquía global del header */
.main-nav { font-weight:640; }
.nav-link { color:#c3d0dc; }
.nav-link:hover,.nav-link.active { color:#f7fbff; }
.header-cta {
  min-height:37px;
  padding-inline:14px;
  font-size:11px;
  font-weight:740;
  background:linear-gradient(135deg,rgba(28,126,221,.90),rgba(20,156,224,.90));
  border-color:rgba(118,207,244,.13);
  box-shadow:0 8px 21px rgba(8,98,177,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.header-cta:hover {
  background:linear-gradient(135deg,rgba(31,137,235,.96),rgba(22,169,238,.96));
  box-shadow:0 11px 27px rgba(11,111,195,.23),0 0 0 1px rgba(113,211,255,.06);
}
.header-cta .btn-arrow { opacity:.76; }

/* Monograma más nítido: la D funciona como marco y la N como firma */
.brand-symbol-d { stroke:#6bc9ee; stroke-width:2.15; }
.brand-symbol-n { stroke:#f9fcff; stroke-width:2.45; }
.brand-mark {
  border-color:rgba(105,199,235,.26);
  background:linear-gradient(145deg,rgba(13,39,62,.98),rgba(5,18,31,.99));
  box-shadow:0 11px 28px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.07),0 0 24px rgba(50,169,220,.07);
}

/* Hero: la información termina en los tres argumentos de confianza */
.home-description {
  max-width:620px;
  color:#c2d0de;
  font-size:17px;
  line-height:1.76;
}
.home-actions { margin-bottom:23px; }
.home-badge {
  color:#aec5d8;
  border-color:rgba(163,211,237,.095);
  background:linear-gradient(145deg,rgba(255,255,255,.043),rgba(255,255,255,.018));
  font-weight:650;
}
.badge-check {
  color:#72c7e8;
  text-shadow:0 0 10px rgba(82,189,230,.20);
}

/* Azul brillante reservado para los focos de acción */
.home-eyebrow { color:#54bee9; }
.eyebrow-dot {
  background:#61c9ef;
  box-shadow:0 0 0 5px rgba(86,191,232,.055),0 0 14px rgba(77,188,231,.38);
}
.home-service-kicker { color:#76b9d5; font-weight:760; }
.home-panel-system { color:#5c7a91; }
.location-dot { background:#70c7e8; box-shadow:0 0 8px rgba(91,192,231,.34); }

/* Panel más editorial: menos cajas, mejor ritmo visual */
.home-panel {
  padding:20px;
  border-color:rgba(111,199,235,.135);
  background:linear-gradient(145deg,rgba(16,43,72,.80),rgba(5,15,27,.95));
  box-shadow:0 37px 84px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.038);
}
.home-panel-label { font-weight:760; }
.home-panel-note { color:#7690a6; }
.home-service-links {
  gap:9px;
  padding-right:0;
}
.home-service-links::before {
  z-index:3;
  top:35px;
  bottom:35px;
  right:18px;
  width:1px;
  opacity:.75;
  background:repeating-linear-gradient(180deg,rgba(107,190,226,.24) 0 5px,transparent 5px 11px);
  box-shadow:none;
}
.home-service-card {
  z-index:1;
  min-height:124px;
  padding:16px 18px;
  border-color:rgba(164,211,236,.062);
  background:linear-gradient(135deg,rgba(255,255,255,.057),rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.home-service-card:nth-child(2) {
  background:linear-gradient(135deg,rgba(255,255,255,.050),rgba(45,114,158,.012));
}
.home-service-card:nth-child(3) {
  background:linear-gradient(135deg,rgba(255,255,255,.043),rgba(255,255,255,.010));
}
.home-service-card:hover {
  transform:translateY(-3px) translateZ(6px);
  border-color:rgba(112,199,235,.26);
  background:linear-gradient(135deg,rgba(255,255,255,.078),rgba(39,131,182,.021));
  box-shadow:0 14px 32px rgba(0,0,0,.14),0 0 24px rgba(40,184,242,.025),inset 0 1px 0 rgba(255,255,255,.035);
}
.home-service-card::after { opacity:0 !important; }
.home-service-icon {
  color:#62c5eb;
  background:linear-gradient(145deg,rgba(46,163,217,.13),rgba(18,91,148,.055));
  border-color:rgba(105,194,229,.13);
}
.home-service-title {
  font-size:18px;
  font-weight:690;
  letter-spacing:-.012em;
}
.home-service-copy {
  color:#8fa8bc;
  font-size:11.4px;
  letter-spacing:.004em;
}
.home-service-action {
  color:#dcebf5;
  font-size:10px;
  font-weight:710;
}
.card-arrow { color:#74bddb; }

/* Timeline 01—03: números convertidos en nodos discretos */
.home-service-index {
  position:relative;
  z-index:4;
  min-width:28px;
  padding:2px 7px 2px 6px;
  border:1px solid rgba(110,190,224,.07);
  border-radius:999px;
  color:#668499;
  background:rgba(6,20,34,.88);
  font-size:8px;
  text-align:center;
  letter-spacing:.10em;
  transition:color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.home-service-index::after {
  content:"";
  position:absolute;
  top:50%;
  right:-7px;
  width:4px;
  height:4px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#5a9fbd;
  box-shadow:0 0 0 3px rgba(80,164,199,.045);
}
.home-service-card:hover .home-service-index {
  color:#96d4ea;
  border-color:rgba(112,199,235,.15);
  box-shadow:0 0 14px rgba(54,166,214,.055);
}
.home-service-card:hover .home-service-index::after { background:#7fd7f5; }

/* Pie del panel en segundo plano; sigue siendo una salida útil */
.home-panel-footer {
  margin-top:10px;
  border-color:rgba(105,194,229,.055);
  background:rgba(2,10,18,.17);
}
.home-panel-footer-title { font-weight:690; color:#cfe0ec; }
.home-panel-footer-icon { color:#69bcd9; background:rgba(41,182,246,.055); border-color:rgba(104,212,255,.07); }
.home-panel-footer-arrow { color:#70bad7; }

@media (max-width:640px) {
  .home-service-links::before { right:16px; }
  .home-service-card { min-height:0; }
}

/* =========================================================
   DN TECH PREMIUM V6 — Selector de servicios definitivo
   ========================================================= */

/* La cabecera del panel funciona ahora como una única unidad informativa. */
.page-home .home-panel-heading {
  display:block;
  margin:0 2px 15px;
}
.page-home .home-panel-heading-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.page-home .home-panel-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:22px;
}
.page-home .home-panel-note {
  color:#7892a8;
  font-size:10.5px;
}
.page-home .home-panel-meta-separator {
  color:rgba(116,166,193,.34);
  font-size:12px;
}
.page-home .home-panel-location {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:none;
  color:#91abc0;
  font-size:9.5px;
  font-weight:650;
  box-shadow:none;
}
.page-home .location-dot {
  width:5px;
  height:5px;
  flex:0 0 5px;
}

/* Ya no es una timeline: son tres áreas independientes. */
.page-home .home-service-links {
  display:grid;
  gap:10px;
  padding:0;
}
.page-home .home-service-links::before { display:none !important; }
.page-home .home-service-index { display:none !important; }

/* La tarjeta aprovecha el ancho completo: icono | contenido | capacidades. */
.page-home .home-service-card {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 92px;
  gap:15px;
  align-items:center;
  min-height:126px;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid rgba(160,209,233,.068);
  border-radius:19px;
  background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.page-home .home-service-card::before {
  width:62%;
  height:150%;
  left:-32%;
  top:-25%;
  opacity:0;
  background:radial-gradient(circle,rgba(75,187,230,.08),transparent 67%);
  transition:opacity .28s ease;
}
.page-home .home-service-card:hover::before { opacity:1; }
.page-home .home-service-card:hover {
  transform:translateY(-2px) translateZ(5px);
  border-color:rgba(112,199,235,.20);
  box-shadow:0 14px 32px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.03);
}

/* Desarrollo web recibe un acento propio, sin convertirse en una tarjeta publicitaria. */
.page-home .home-service-card-featured {
  border-color:rgba(94,190,229,.105);
  background:linear-gradient(128deg,rgba(42,132,178,.075),rgba(255,255,255,.018) 48%,rgba(58,145,185,.025));
}
.page-home .home-service-card-featured .home-service-icon {
  border-color:rgba(101,203,238,.19);
  background:linear-gradient(145deg,rgba(48,171,218,.16),rgba(18,91,148,.06));
}

.page-home .home-service-content {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:0;
}
.page-home .home-service-kicker {
  margin-bottom:5px;
  font-size:9px;
  letter-spacing:.15em;
}
.page-home .home-service-title {
  margin-bottom:4px;
  font-size:18px;
  line-height:1.18;
  font-weight:690;
}
.page-home .home-service-copy {
  max-width:340px;
  margin-bottom:9px;
  color:#8ea7ba;
  font-size:10.8px;
  line-height:1.45;
}
.page-home .home-service-action {
  width:max-content;
  font-size:9.7px;
}

/* Micro-capacidades: ocupan el vacío del lateral y hacen cada servicio escaneable. */
.page-home .home-service-features {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  min-width:0;
  padding-left:14px;
}
.page-home .home-service-features::before {
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(111,189,222,.13) 18%,rgba(111,189,222,.13) 82%,transparent);
}
.page-home .home-service-feature {
  position:relative;
  display:inline-flex;
  align-items:center;
  color:#738fa4;
  font-size:8.6px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:.025em;
  transition:color .22s ease,transform .22s ease;
}
.page-home .home-service-feature::before {
  content:"";
  width:3px;
  height:3px;
  margin-right:7px;
  border-radius:50%;
  background:#4e91ae;
  opacity:.7;
}
.page-home .home-service-card:hover .home-service-feature {
  color:#95b7ca;
  transform:translateX(2px);
}
.page-home .home-service-card:hover .home-service-feature::before {
  background:#70c9e8;
}

/* El bloque de ayuda cierra el selector sin competir con los servicios. */
.page-home .home-panel-footer {
  margin-top:11px;
  padding:12px 14px;
  border-color:rgba(105,194,229,.052);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(2,10,18,.22),rgba(11,30,47,.18));
}
.page-home .home-panel-footer:hover {
  border-color:rgba(106,197,231,.13);
  background:linear-gradient(90deg,rgba(5,17,28,.30),rgba(14,39,59,.23));
}

@media (max-width: 900px) {
  .page-home .home-service-card {
    grid-template-columns:46px minmax(0,1fr);
  }
  .page-home .home-service-features {
    grid-column:2;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 12px;
    padding:0;
    margin-top:-3px;
  }
  .page-home .home-service-features::before { display:none; }
}

@media (max-width: 640px) {
  .page-home .home-panel-meta { gap:6px; }
  .page-home .home-panel-meta-separator { display:none; }
  .page-home .home-panel-location { flex-basis:100%; }
  .page-home .home-service-card {
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    padding:15px;
  }
  .page-home .home-service-features { grid-column:1 / -1; margin:1px 0 0 54px; }
  .page-home .home-service-title { font-size:17px; }
  .page-home .home-service-copy { font-size:10.5px; }
}


/* =========================================================
   DN TECH PREMIUM V7 — Pulido final de Inicio
   Ajustes de contraste, legibilidad y cierre del selector.
   ========================================================= */

/* Un punto más de contraste sin añadir más azul eléctrico. */
.page-home .home-panel {
  border-color:rgba(122,204,238,.17);
  background:linear-gradient(145deg,rgba(18,47,78,.84),rgba(5,15,27,.96));
  box-shadow:0 38px 88px rgba(0,0,0,.37),inset 0 1px 0 rgba(255,255,255,.045);
}
.page-home .home-panel-label { color:#f2f7fb; }
.page-home .home-panel-note { color:#839db2; }
.page-home .home-panel-location { color:#9bb3c6; }

.page-home .home-service-card {
  border-color:rgba(165,213,237,.085);
}
.page-home .home-service-title { color:#f5f8fb; }
.page-home .home-service-copy { color:#99b0c3; }
.page-home .home-service-action { color:#e8f4fb; }

/* Capacidades laterales: un poco más grandes y con mayor respiración. */
.page-home .home-service-features {
  gap:7px;
  padding-left:13px;
}
.page-home .home-service-features::before {
  top:13px;
  bottom:13px;
  background:linear-gradient(180deg,transparent,rgba(111,189,222,.085) 22%,rgba(111,189,222,.085) 78%,transparent);
}
.page-home .home-service-feature {
  color:#7f9caf;
  font-size:9.6px;
  line-height:1.35;
}
.page-home .home-service-feature::before {
  opacity:.62;
}
.page-home .home-service-card:hover .home-service-feature {
  color:#a0bdcd;
}

/* El cierre del selector debe leerse como una acción útil, no como un pie. */
.page-home .home-panel-footer {
  padding:13px 14px;
  border-color:rgba(105,194,229,.07);
  background:linear-gradient(90deg,rgba(3,12,21,.28),rgba(13,35,53,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.page-home .home-panel-footer-title {
  color:#dceaf3;
  font-size:11.2px;
  font-weight:710;
}
.page-home .home-panel-footer-text {
  color:#7897ad;
  font-size:9.8px;
}
.page-home .home-panel-footer:hover {
  transform:translateY(-2px);
  border-color:rgba(111,205,239,.21);
  background:linear-gradient(90deg,rgba(7,22,35,.42),rgba(17,48,70,.34));
  box-shadow:0 10px 26px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(51,176,224,.035);
}
.page-home .home-panel-footer:hover .home-panel-footer-title { color:#f1f8fc; }
.page-home .home-panel-footer:hover .home-panel-footer-icon {
  border-color:rgba(111,205,239,.18);
  background:rgba(41,182,246,.09);
}

@media (max-width: 900px) {
  .page-home .home-service-feature { font-size:9.4px; }
}

/* =========================================================
   PREMIUM V8 — DESARROLLO WEB / SHOWCASE FINAL
   ========================================================= */
.page-web-showcase .web-showcase-container-v8 {
  grid-template-columns:.91fr 1.09fr;
  gap:46px;
  padding-top:38px;
  padding-bottom:38px;
}
.page-web-showcase .web-showcase-copy-v8 { max-width:600px; }
.page-web-showcase .web-showcase-eyebrow { margin-bottom:16px; }
.page-web-showcase .web-showcase-title-v8 {
  max-width:620px;
  margin-bottom:20px;
  font-size:clamp(44px,4.55vw,66px);
  line-height:.99;
  letter-spacing:-.052em;
}
.page-web-showcase .web-showcase-subtitle-v8 {
  max-width:590px;
  color:#a9bed0;
  font-size:15.5px;
  line-height:1.72;
}
.page-web-showcase .web-showcase-actions-v8 { margin-top:25px; }
.page-web-showcase .web-feature-chips-v8 { margin-top:19px; }
.page-web-showcase .web-feature-chips-v8 .web-feature-chip {
  padding:7px 11px;
  background:rgba(255,255,255,.025);
  color:#91aabf;
}

/* Navegación secundaria: más editorial y menos "tarjeta" */
.page-web-showcase .web-showcase-subnav-v8 {
  position:relative;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:25px;
  padding-top:2px;
  border-top:1px solid rgba(151,213,246,.10);
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
  position:relative;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  min-height:58px;
  padding:13px 12px 10px;
  border:0;
  border-radius:0;
  background:transparent;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link + .web-subnav-link::before {
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:9px;
  width:1px;
  background:rgba(151,213,246,.08);
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover {
  transform:none;
  background:linear-gradient(180deg,rgba(53,176,236,.055),transparent);
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-index { color:#456b88; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-title { color:#dcebf6; font-size:10.5px; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-note { color:#66839a; font-size:8.3px; }

/* Toolbar del concepto */
.page-web-showcase .web-demo-toolbar-v8 { margin-bottom:10px; }
.page-web-showcase .web-demo-toolbar-project {
  position:relative;
  padding-left:8px;
  color:#62819a;
}
.page-web-showcase .web-demo-toolbar-project::before {
  content:"/";
  position:absolute;
  left:0;
  color:#355975;
}

/* Escenario de diseño */
.page-web-showcase .web-demo-stage-v8 {
  min-height:575px;
  padding:30px 26px 50px;
  border-radius:30px;
  background:
    radial-gradient(circle at 76% 18%,rgba(57,183,255,.10),transparent 28%),
    linear-gradient(145deg,rgba(14,39,65,.91),rgba(4,14,25,.98));
}
.page-web-showcase .web-demo-stage-v8::after {
  left:16%;
  right:16%;
  opacity:.75;
}
.web-demo-grid-lines {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background-image:
    linear-gradient(rgba(100,211,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,211,255,.08) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(120deg,transparent 5%,#000 36%,#000 76%,transparent 100%);
  mask-image:linear-gradient(120deg,transparent 5%,#000 36%,#000 76%,transparent 100%);
}
.page-web-showcase .web-browser-frame-v8 {
  z-index:2;
  width:89%;
  max-width:none;
  margin-right:8%;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 32px 68px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025);
}
.page-web-showcase .web-browser-chrome { background:#ebe8e2; }
.page-web-showcase .web-demo-site { min-height:415px; }
.page-web-showcase .aurea-demo-hero { min-height:305px; }
.page-web-showcase .aurea-demo-stats { min-height:52px; }
.page-web-showcase .aurea-demo-stats strong { color:#36302b; font-size:9.3px; font-family:inherit; font-weight:800; }
.page-web-showcase .aurea-demo-stats small { margin-top:2px; }

/* Vista móvil simultánea: demuestra responsive sin explicarlo */
.web-mobile-companion {
  position:absolute;
  z-index:5;
  right:17px;
  bottom:56px;
  display:grid;
  justify-items:center;
  gap:8px;
  pointer-events:none;
  transform:translateZ(35px) rotate(1.4deg);
  transition:transform .36s var(--premium-ease),opacity .28s ease;
}
.web-demo-stage-v8:hover .web-mobile-companion { transform:translateZ(40px) rotate(.4deg) translateY(-3px); }
.web-mobile-phone {
  position:relative;
  width:132px;
  height:278px;
  padding:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:linear-gradient(145deg,#17222d,#02070d 70%);
  box-shadow:0 25px 50px rgba(0,0,0,.48),0 0 0 1px rgba(83,207,255,.07),inset 0 1px 0 rgba(255,255,255,.14);
}
.web-mobile-speaker {
  position:absolute;
  z-index:3;
  top:10px;
  left:50%;
  width:37px;
  height:8px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#070d12;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}
.web-mobile-screen {
  height:100%;
  overflow:hidden;
  border-radius:22px;
  background:#f4f0e9;
  color:#211e1b;
}
.web-mobile-nav {
  height:37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 10px 0;
  border-bottom:1px solid rgba(32,28,24,.07);
}
.web-mobile-brand { font-family:Georgia,serif; font-size:7.5px; letter-spacing:.13em; }
.web-mobile-brand > span { color:#a87655; }
.web-mobile-menu { color:#766f68; font-size:8px; }
.web-mobile-hero { padding:24px 12px 12px; }
.web-mobile-kicker { color:#9b6f52; font-size:4.5px; font-weight:800; letter-spacing:.15em; }
.web-mobile-title {
  display:block;
  margin:8px 0 7px;
  font-family:Georgia,serif;
  font-size:19px;
  line-height:1.01;
  font-weight:500;
  letter-spacing:-.035em;
}
.web-mobile-title em { color:#a87655; font-weight:400; }
.web-mobile-copy { margin:0; color:#766f68; font-size:5.8px; line-height:1.5; }
.web-mobile-art {
  position:relative;
  height:92px;
  margin-top:12px;
  overflow:hidden;
  background:linear-gradient(145deg,#d9cbbd,#b49b84);
  box-shadow:0 9px 17px rgba(79,59,45,.12);
}
.web-mobile-art-light {
  position:absolute;
  width:48px;
  height:100px;
  right:3px;
  top:-8px;
  transform:skewX(-17deg);
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,244,220,.66));
}
.web-mobile-art-sofa {
  position:absolute;
  left:14px;
  right:21px;
  bottom:16px;
  height:28px;
  border-radius:3px 3px 7px 7px;
  background:#8f7a66;
  box-shadow:0 7px 0 -3px #6f6256;
}
.web-mobile-caption {
  padding:5px 8px;
  border:1px solid rgba(104,212,255,.10);
  border-radius:999px;
  background:rgba(3,11,20,.80);
  color:#7896ad;
  font-size:6.8px;
  font-weight:750;
  letter-spacing:.02em;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Información inferior del escenario */
.page-web-showcase .web-demo-badge-v8 { left:21px; bottom:17px; }
.web-demo-capabilities {
  position:absolute;
  z-index:4;
  right:20px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:5px;
}
.web-demo-capability {
  padding:5px 7px;
  border:1px solid rgba(104,212,255,.08);
  border-radius:999px;
  background:rgba(4,13,22,.62);
  color:#6789a2;
  font-size:6.7px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Device states */
.page-web-showcase .web-demo-stage-v8[data-preview-device="desktop"] .web-browser-frame-v8 { width:89%; margin-right:8%; }
.page-web-showcase .web-demo-stage-v8[data-preview-device="desktop"] .web-mobile-companion { opacity:1; visibility:visible; }
.page-web-showcase .web-demo-stage-v8[data-preview-device="tablet"] .web-browser-frame-v8 { width:70%; max-width:500px; margin-right:0; }
.page-web-showcase .web-demo-stage-v8[data-preview-device="tablet"] .web-mobile-companion { opacity:0; visibility:hidden; }
.page-web-showcase .web-demo-stage-v8[data-preview-device="mobile"] .web-browser-frame-v8 { width:40%; min-width:245px; max-width:285px; margin-right:0; }
.page-web-showcase .web-demo-stage-v8[data-preview-device="mobile"] .web-mobile-companion { opacity:0; visibility:hidden; }

/* Responsive V8 */
@media (max-width:1080px) {
  .page-web-showcase .web-showcase-container-v8 { grid-template-columns:.9fr 1.1fr; gap:32px; }
  .web-mobile-phone { width:118px; height:248px; }
  .web-mobile-companion { right:11px; }
}
@media (max-width:980px) {
  .page-web-showcase .web-showcase-container-v8 { grid-template-columns:1fr; padding-top:58px; padding-bottom:58px; }
  .page-web-showcase .web-showcase-copy-v8 { max-width:760px; }
  .page-web-showcase .web-showcase-title-v8 { max-width:760px; }
  .page-web-showcase .web-showcase-subtitle-v8 { max-width:680px; }
  .page-web-showcase .web-demo-column-v8 { max-width:820px; }
  .web-mobile-companion { right:24px; }
}
@media (max-width:720px) {
  .page-web-showcase .web-showcase-container-v8 { padding-top:42px; padding-bottom:46px; }
  .page-web-showcase .web-showcase-title-v8 { font-size:clamp(40px,11vw,57px); }
  .page-web-showcase .web-showcase-subnav-v8 { grid-template-columns:1fr; border-top:0; }
  .page-web-showcase .web-showcase-subnav-v8 .web-subnav-link { border-top:1px solid rgba(151,213,246,.09); }
  .page-web-showcase .web-showcase-subnav-v8 .web-subnav-link + .web-subnav-link::before { display:none; }
  .web-demo-toolbar-project { display:none; }
  .page-web-showcase .web-demo-stage-v8 { min-height:500px; padding:20px 15px 48px; }
  .web-mobile-companion { display:none; }
  .page-web-showcase .web-demo-stage-v8[data-preview-device="desktop"] .web-browser-frame-v8 { width:100%; margin-right:0; }
  .page-web-showcase .web-demo-stage-v8[data-preview-device="tablet"] .web-browser-frame-v8 { width:78%; }
  .page-web-showcase .web-demo-stage-v8[data-preview-device="mobile"] .web-browser-frame-v8 { width:63%; min-width:220px; }
  .web-demo-capabilities { display:none; }
}

/* =========================================================
   DN TECH — PREMIUM V9 / HEADER FINAL POLISH
   Alcance: solo cabecera global y navegación.
   ========================================================= */

:root {
  --header-h:74px;
  --header-h-scrolled:66px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(5,13,24,.78);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
  border-bottom:1px solid rgba(108,202,241,.095);
  box-shadow:0 1px 0 rgba(255,255,255,.012),0 10px 34px rgba(0,0,0,.075);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.site-header::after {
  opacity:.52;
  transition:opacity .28s ease;
}

.site-header.is-scrolled {
  background:rgba(4,12,22,.94);
  border-bottom-color:rgba(108,202,241,.13);
  box-shadow:0 14px 42px rgba(0,0,0,.19);
}

.site-header.is-scrolled::after { opacity:.82; }

.nav-wrap {
  min-height:var(--header-h);
  gap:20px;
  transition:min-height .28s var(--premium-ease);
}

.site-header.is-scrolled .nav-wrap { min-height:var(--header-h-scrolled); }

/* Marca: más compacta, mejor alineada y con firma visual propia */
.brand {
  flex:0 0 auto;
  gap:10px;
  min-width:max-content;
  letter-spacing:-.025em;
  transition:transform .22s var(--premium-ease);
}

.brand:hover { transform:translateY(-1px); }

.brand-mark {
  width:42px;
  height:42px;
  border-radius:13px;
  border-color:rgba(104,201,239,.29);
  background:
    radial-gradient(circle at 38% 18%,rgba(72,197,244,.17),transparent 42%),
    linear-gradient(145deg,rgba(12,37,60,.99),rgba(4,16,28,.99));
  box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.075),0 0 20px rgba(50,169,220,.065);
  transition:width .28s var(--premium-ease),height .28s var(--premium-ease),border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.brand:hover .brand-mark {
  border-color:rgba(104,211,250,.43);
  box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.09),0 0 25px rgba(54,184,235,.105);
}

.site-header.is-scrolled .brand-mark { width:38px; height:38px; border-radius:12px; }
.brand-symbol { width:32px; height:32px; transition:width .28s var(--premium-ease),height .28s var(--premium-ease); }
.site-header.is-scrolled .brand-symbol { width:29px; height:29px; }
.brand-symbol-d { stroke:#70caee; stroke-width:2.15; }
.brand-symbol-n { stroke:#fbfdff; stroke-width:2.42; }

.brand-text {
  gap:4px;
  font-size:19px;
  line-height:1;
  white-space:nowrap;
  transition:font-size .28s var(--premium-ease);
}
.site-header.is-scrolled .brand-text { font-size:18px; }
.brand-tech { font-weight:735; color:#f6f9fc; }
.brand-city { font-weight:825; color:#35b8f2; }

/* Navegación: menos ruido visual y estado activo más editorial */
.main-nav {
  gap:23px;
  margin-left:auto;
  font-size:12.5px;
  font-weight:645;
  letter-spacing:-.005em;
}

.nav-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0;
  color:#c4d0dc;
  transition:color .2s ease,transform .2s var(--premium-ease);
}

.nav-link:hover {
  color:#f8fbfe;
  transform:translateY(-1px);
}

.nav-link::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:1px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#2495ff,#68d4ff);
  box-shadow:0 0 12px rgba(58,190,246,.30);
  transform:translateX(-50%);
  opacity:0;
  transition:width .23s var(--premium-ease),opacity .23s ease;
}

.nav-link:hover::before { width:16px; opacity:.45; }
.nav-link.active { color:#fff; }
.nav-link.active::before { width:28px; opacity:1; }
.nav-link.active::after { display:none; }

/* CTA de cabecera: acceso rápido, no protagonista del hero */
.header-cta {
  flex:0 0 auto;
  min-height:36px;
  padding-inline:13px;
  gap:8px;
  border-radius:10px;
  border:1px solid rgba(112,208,246,.14);
  color:#eef9ff;
  font-size:10.8px;
  font-weight:760;
  letter-spacing:.005em;
  background:linear-gradient(135deg,rgba(27,125,215,.84),rgba(18,155,220,.86));
  box-shadow:0 7px 18px rgba(8,91,157,.14),inset 0 1px 0 rgba(255,255,255,.11);
  transition:transform .22s var(--premium-ease),background .22s ease,border-color .22s ease,box-shadow .22s ease,min-height .28s var(--premium-ease);
}

.site-header.is-scrolled .header-cta { min-height:34px; }

.header-cta::before { opacity:0 !important; }
.header-cta:hover {
  transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(30,138,232,.94),rgba(20,170,234,.94));
  border-color:rgba(126,219,255,.25);
  box-shadow:0 10px 23px rgba(8,105,183,.22),inset 0 1px 0 rgba(255,255,255,.15);
}
.header-cta .btn-arrow {
  opacity:.72;
  transform:translate(0,0);
  transition:transform .22s var(--premium-ease),opacity .22s ease;
}
.header-cta:hover .btn-arrow { opacity:1; transform:translate(2px,-2px); }

/* Accesibilidad del header */
.brand:focus-visible,.menu-toggle:focus-visible {
  outline:2px solid var(--cyan-300);
  outline-offset:4px;
  border-radius:12px;
}

/* Menú móvil: componente limpio y coherente con la cabecera */
@media (max-width:860px) {
  :root { --header-h:68px; --header-h-scrolled:64px; }
  .nav-wrap { position:relative; gap:12px; }
  .brand-mark { width:39px; height:39px; border-radius:12px; }
  .brand-symbol { width:29px; height:29px; }
  .brand-text { font-size:18px; }
  .header-cta { display:none; }
  .menu-toggle {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin-left:auto;
    padding:0;
    border:1px solid rgba(112,208,246,.14);
    border-radius:11px;
    background:rgba(255,255,255,.035);
    color:#eaf7ff;
    font-size:0;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .menu-toggle::before,.menu-toggle::after {
    content:"";
    position:absolute;
    width:16px;
    height:1.5px;
    border-radius:999px;
    background:currentColor;
    transition:transform .22s var(--premium-ease),top .22s var(--premium-ease);
  }
  .menu-toggle::before { transform:translateY(-4px); }
  .menu-toggle::after { transform:translateY(4px); }
  .site-header.menu-open .menu-toggle::before { transform:rotate(45deg); }
  .site-header.menu-open .menu-toggle::after { transform:rotate(-45deg); }
  .menu-toggle:hover { background:rgba(104,212,255,.07); border-color:rgba(112,208,246,.24); }

  .main-nav {
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    width:100%;
    gap:2px;
    padding:10px var(--page-gutter-mobile) 16px;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    background:rgba(4,12,22,.985);
    border-top:1px solid rgba(104,201,239,.08);
    border-bottom:1px solid rgba(104,201,239,.10);
    box-shadow:0 24px 42px rgba(0,0,0,.25);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
  }
  .main-nav.open { display:flex; }
  .nav-link {
    width:100%;
    min-height:44px;
    padding:0 2px;
    font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.045);
  }
  .nav-link:last-child { border-bottom:0; }
  .nav-link::before { left:0; bottom:8px; transform:none; }
  .nav-link:hover::before { width:14px; }
  .nav-link.active::before { width:22px; }
}

@media (max-width:430px) {
  .brand-text { font-size:17px; }
  .brand-mark { width:37px; height:37px; }
  .brand-symbol { width:28px; height:28px; }
}

/* =========================================================
   DN TECH — PREMIUM V10 / HEADER DARK INTEGRATED
   Alcance: solo cabecera global. El resto de la home queda intacto.
   ========================================================= */

:root {
  --header-h:70px;
  --header-h-scrolled:64px;
}

.site-header {
  background:rgba(5,14,25,.945);
  -webkit-backdrop-filter:blur(18px) saturate(132%);
  backdrop-filter:blur(18px) saturate(132%);
  border-bottom-color:rgba(78,187,235,.085);
  box-shadow:0 1px 0 rgba(255,255,255,.010);
  transition:background .27s ease,border-color .27s ease,box-shadow .27s ease;
}

.site-header::after {
  opacity:.30;
  transition:opacity .27s ease;
}

.site-header.is-scrolled {
  background:rgba(4,12,22,.985);
  border-bottom-color:rgba(92,196,239,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.012);
}

.site-header.is-scrolled::after { opacity:.52; }

.nav-wrap {
  min-height:var(--header-h);
  gap:19px;
  transition:min-height .27s var(--premium-ease);
}

.site-header.is-scrolled .nav-wrap { min-height:var(--header-h-scrolled); }

/* Marca: misma identidad, ligeramente más contenida */
.brand { gap:9px; }
.brand-mark {
  width:40px;
  height:40px;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.07),0 0 18px rgba(50,169,220,.055);
}
.brand-symbol { width:30px; height:30px; }
.brand-text { font-size:18.5px; }
.site-header.is-scrolled .brand-mark { width:37px; height:37px; border-radius:11px; }
.site-header.is-scrolled .brand-symbol { width:28px; height:28px; }
.site-header.is-scrolled .brand-text { font-size:17.5px; }

/* Navegación: mayor claridad sin ganar peso visual */
.main-nav {
  gap:22px;
  font-size:12.3px;
  font-weight:635;
}

.nav-link {
  min-height:36px;
  color:#cbd7e2;
}

.nav-link:hover,.nav-link.active { color:#fbfdff; }
.nav-link:hover::before { width:14px; opacity:.40; }
.nav-link.active::before { width:22px; opacity:.95; }

/* CTA superior: visible, pero claramente secundario frente al hero */
.header-cta {
  min-height:34px;
  padding-inline:12px;
  gap:7px;
  border-radius:9px;
  font-size:10.4px;
  background:linear-gradient(135deg,rgba(24,116,204,.76),rgba(17,144,205,.79));
  border-color:rgba(112,208,246,.12);
  box-shadow:0 6px 15px rgba(8,91,157,.11),inset 0 1px 0 rgba(255,255,255,.09);
}

.site-header.is-scrolled .header-cta { min-height:33px; }

.header-cta:hover {
  background:linear-gradient(135deg,rgba(28,132,224,.90),rgba(19,162,224,.91));
  border-color:rgba(126,219,255,.21);
  box-shadow:0 9px 21px rgba(8,105,183,.18),inset 0 1px 0 rgba(255,255,255,.13);
}

/* Móvil: misma integración oscura y menor altura */
@media (max-width:860px) {
  :root { --header-h:64px; --header-h-scrolled:60px; }
  .site-header { background:rgba(5,14,25,.975); }
  .site-header.is-scrolled { background:rgba(4,12,22,.995); }
  .brand-mark { width:37px; height:37px; border-radius:11px; }
  .brand-symbol { width:28px; height:28px; }
  .brand-text { font-size:17px; }
  .main-nav {
    background:rgba(4,12,22,.995);
    border-top-color:rgba(104,201,239,.07);
    border-bottom-color:rgba(104,201,239,.09);
  }
}

@media (max-width:430px) {
  .brand-text { font-size:16.5px; }
  .brand-mark { width:36px; height:36px; }
  .brand-symbol { width:27px; height:27px; }
}

/* =========================================================
   DN TECH — PREMIUM V11 / DARK GLASS HEADER
   Alcance: solo tratamiento visual/material de la cabecera.
   Mantiene geometría, navegación y espaciados de V10.
   ========================================================= */

.site-header {
  background:
    linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.014) 44%,rgba(255,255,255,0) 100%),
    rgba(7,18,31,.58);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-top:1px solid rgba(255,255,255,.028);
  border-bottom:1px solid rgba(112,205,246,.105);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 9px 30px rgba(0,0,0,.075);
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    -webkit-backdrop-filter .28s ease,
    backdrop-filter .28s ease;
}

/* Fina firma luminosa inferior: visible sin parecer neón */
.site-header::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(88%,1180px);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.50;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(72,191,239,.02) 14%,
    rgba(72,191,239,.16) 50%,
    rgba(72,191,239,.02) 86%,
    transparent 100%);
  transition:opacity .28s ease;
}

.site-header.is-scrolled {
  background:
    linear-gradient(180deg,rgba(255,255,255,.042) 0%,rgba(255,255,255,.010) 46%,rgba(255,255,255,0) 100%),
    rgba(6,16,28,.76);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-top-color:rgba(255,255,255,.018);
  border-bottom-color:rgba(105,201,243,.135);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 14px 38px rgba(0,0,0,.18);
}

.site-header.is-scrolled::after { opacity:.68; }

/* El CTA se integra en el cristal y deja el protagonismo al hero */
.header-cta {
  background:linear-gradient(135deg,rgba(25,122,210,.72),rgba(18,149,211,.75));
  border-color:rgba(133,218,252,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 7px 18px rgba(7,92,160,.10);
}

.header-cta:hover {
  background:linear-gradient(135deg,rgba(28,138,230,.87),rgba(21,167,229,.88));
  border-color:rgba(145,226,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(8,112,191,.18);
}

/* En pantallas estrechas damos algo más de cuerpo al vidrio para legibilidad. */
@media (max-width:860px) {
  .site-header {
    background:
      linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.008)),
      rgba(6,16,28,.82);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
  }

  .site-header.is-scrolled {
    background:
      linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.006)),
      rgba(5,14,25,.91);
  }

  .main-nav {
    background:
      linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
      rgba(5,14,25,.92);
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
  }
}

/* Fallback: mismo lenguaje visual sin depender del blur. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .site-header {
    background:#091725;
  }
  .site-header.is-scrolled {
    background:#07131f;
  }
  @media (max-width:860px) {
    .main-nav { background:#07131f; }
  }
}

/* =========================================================
   DN TECH — PREMIUM V13 / HEADER OVER HERO FIX
   El problema no era solo el color: al ser sticky y estar en flujo,
   el header transparente mostraba el fondo del body (franja gris).
   En Inicio y Showcase pasa a superponerse realmente al hero.
   ========================================================= */

body.page-home .site-header,
body.page-web-showcase .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1000;
}

/* El hero debe vivir detrás del header, no debajo de una banda independiente. */
body.page-home .main-content,
body.page-web-showcase .main-content {
  padding-top:0;
}

body.page-home .home-view,
body.page-web-showcase .web-showcase-main {
  padding-top:0;
}

body.page-home .home-container {
  min-height:100vh;
  padding-top:calc(52px + var(--header-h));
}

/* Si existe la página showcase premium, también se compensa ahí. */
body.page-web-showcase .web-showcase-container,
body.page-web-showcase .web-showcase-container-v8 {
  min-height:100vh;
  padding-top:calc(48px + var(--header-h));
}

@media (max-width:980px) {
  body.page-home .home-container {
    min-height:auto;
    padding-top:calc(70px + var(--header-h));
  }

  body.page-web-showcase .web-showcase-container,
  body.page-web-showcase .web-showcase-container-v8 {
    min-height:auto;
    padding-top:calc(58px + var(--header-h));
  }
}

@media (max-width:640px) {
  body.page-home .home-container {
    padding-top:calc(50px + var(--header-h));
  }

  body.page-web-showcase .web-showcase-container,
  body.page-web-showcase .web-showcase-container-v8 {
    padding-top:calc(42px + var(--header-h));
  }
}

/* =========================================================
   DN TECH — PREMIUM V15 / ISOTIPO EN BLOQUE + TEXTO FUERA
   Header con icono en cuadrado redondeado y nombre DN TECH fuera.
   ========================================================= */

.brand-logo-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark {
  width:44px;
  height:44px;
  border-radius:14px;
  flex:none;
}

.brand-icon-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-text {
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-size:21px;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.brand-dn {
  color:#ffffff;
  font-weight:860;
}

.brand-tech {
  color:var(--cyan-300);
  font-weight:860;
}

.sr-only {
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.site-header.is-scrolled .brand-mark {
  width:39px;
  height:39px;
  border-radius:12px;
}

.site-header.is-scrolled .brand-text {
  font-size:18px;
}

@media (max-width:980px) {
  .brand-logo-link { gap:10px; }
  .brand-mark { width:41px; height:41px; border-radius:13px; }
  .brand-text { font-size:19px; }
  .site-header.is-scrolled .brand-mark { width:37px; height:37px; border-radius:11px; }
  .site-header.is-scrolled .brand-text { font-size:17px; }
}

@media (max-width:640px) {
  .brand-logo-link { gap:8px; }
  .brand-mark { width:36px; height:36px; border-radius:11px; }
  .brand-text { font-size:16.5px; }
  .site-header.is-scrolled .brand-mark { width:34px; height:34px; border-radius:10px; }
  .site-header.is-scrolled .brand-text { font-size:15.5px; }
}

@media (max-width:430px) {
  .brand-mark { width:33px; height:33px; border-radius:10px; }
  .brand-text { font-size:15px; }
  .site-header.is-scrolled .brand-mark { width:31px; height:31px; border-radius:9px; }
  .site-header.is-scrolled .brand-text { font-size:14.5px; }
}

/* =========================================================
   DN TECH — PREMIUM V17 / BRAND HEADER REFINADO
   Corrige escala del isotipo y jerarquía DN / TECH.
   ========================================================= */

.brand-logo-link {
  gap:10px;
}

.brand-mark {
  width:42px;
  height:42px;
  padding:6px;
  border-radius:13px;
  background:
    linear-gradient(145deg,rgba(18,45,73,.94),rgba(5,18,31,.98));
  border:1px solid rgba(99,213,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.18),
    0 0 18px rgba(41,182,246,.05);
  overflow:hidden;
}

.brand-icon-image {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(.88);
  transform-origin:center;
}

.brand-text {
  gap:4px;
  font-size:19px;
  line-height:1;
  letter-spacing:-.025em;
}

.brand-dn {
  color:#f7fbff !important;
  font-weight:820;
}

.brand-tech {
  color:#43c9ff !important;
  font-weight:820;
}

.site-header.is-scrolled .brand-mark {
  width:38px;
  height:38px;
  padding:5px;
  border-radius:11px;
}

.site-header.is-scrolled .brand-text {
  font-size:17px;
}

@media (max-width:980px) {
  .brand-mark { width:39px; height:39px; padding:5px; border-radius:12px; }
  .brand-text { font-size:18px; }
  .site-header.is-scrolled .brand-mark { width:36px; height:36px; }
  .site-header.is-scrolled .brand-text { font-size:16.5px; }
}

@media (max-width:640px) {
  .brand-logo-link { gap:8px; }
  .brand-mark { width:35px; height:35px; padding:4px; border-radius:10px; }
  .brand-text { font-size:16px; }
  .site-header.is-scrolled .brand-mark { width:33px; height:33px; }
  .site-header.is-scrolled .brand-text { font-size:15px; }
}

/* =========================================================
   DN TECH — PREMIUM V18 / AÑADIR MADRID AL BLOQUE DE MARCA
   ========================================================= */

.brand-logo-link {
  gap:14px;
}

.brand-text-stack {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:1px;
  line-height:1;
  min-width:0;
}

.brand-mainline {
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}

.brand-city {
  display:block;
  font-size:10px;
  font-weight:750;
  letter-spacing:.34em;
  color:rgba(116, 214, 249, .92);
  line-height:1;
  padding-left:1px;
  white-space:nowrap;
}

.site-header.is-scrolled .brand-mainline {
  font-size:16.8px;
}

.site-header.is-scrolled .brand-city {
  font-size:9.3px;
  letter-spacing:.31em;
}

@media (max-width:980px) {
  .brand-logo-link { gap:12px; }
  .brand-mainline { font-size:17px; }
  .brand-city { font-size:9.5px; letter-spacing:.30em; }
  .site-header.is-scrolled .brand-mainline { font-size:15.8px; }
  .site-header.is-scrolled .brand-city { font-size:8.9px; }
}

@media (max-width:640px) {
  .brand-logo-link { gap:10px; }
  .brand-mainline { font-size:15.5px; }
  .brand-city { font-size:8.4px; letter-spacing:.24em; }
  .site-header.is-scrolled .brand-mainline { font-size:14.6px; }
  .site-header.is-scrolled .brand-city { font-size:8px; }
}

@media (max-width:430px) {
  .brand-logo-link { gap:8px; }
  .brand-mainline { font-size:14.4px; }
  .brand-city { font-size:7.8px; letter-spacing:.20em; }
  .site-header.is-scrolled .brand-mainline { font-size:13.7px; }
  .site-header.is-scrolled .brand-city { font-size:7.4px; }
}

/* =========================================================
   DN TECH — PREMIUM V19 / REFINADO DEL BLOQUE DE MARCA
   - Isotipo un poco menos dominante
   - Glow y borde más sutiles
   - TECH con menos peso
   - MADRID más pequeño, más suave y con más aire
   ========================================================= */

.brand-logo-link {
  gap:13px;
}

.brand-mark {
  width:40px;
  height:40px;
  padding:7px;
  border-radius:13px;
  border:1px solid rgba(99,213,255,.18);
  background:linear-gradient(145deg,rgba(16,40,66,.92),rgba(6,17,29,.985));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.14),
    0 0 12px rgba(41,182,246,.035);
}

.brand-icon-image {
  transform:scale(.82);
}

.brand-text-stack {
  gap:4px;
}

.brand-mainline {
  gap:4px;
  font-size:18px;
}

.brand-dn {
  color:#fbfdff !important;
  font-weight:835;
}

.brand-tech {
  color:#4fc8fa !important;
  font-weight:765;
}

.brand-city {
  font-size:8.6px;
  font-weight:700;
  letter-spacing:.30em;
  color:rgba(132, 201, 227, .72);
  padding-left:2px;
}

.site-header.is-scrolled .brand-mark {
  width:36px;
  height:36px;
  padding:6px;
  border-radius:11px;
}

.site-header.is-scrolled .brand-icon-image {
  transform:scale(.82);
}

.site-header.is-scrolled .brand-mainline {
  font-size:16.5px;
}

.site-header.is-scrolled .brand-city {
  font-size:8px;
  letter-spacing:.28em;
}

@media (max-width:980px) {
  .brand-logo-link { gap:12px; }
  .brand-mark { width:38px; height:38px; padding:6px; border-radius:12px; }
  .brand-mainline { font-size:16.9px; }
  .brand-city { font-size:8.2px; letter-spacing:.28em; }
  .site-header.is-scrolled .brand-mark { width:35px; height:35px; padding:5px; }
  .site-header.is-scrolled .brand-mainline { font-size:15.7px; }
  .site-header.is-scrolled .brand-city { font-size:7.8px; }
}

@media (max-width:640px) {
  .brand-logo-link { gap:10px; }
  .brand-mark { width:34px; height:34px; padding:5px; border-radius:10px; }
  .brand-mainline { font-size:15px; }
  .brand-city { font-size:7.5px; letter-spacing:.22em; }
  .site-header.is-scrolled .brand-mark { width:32px; height:32px; padding:4px; }
  .site-header.is-scrolled .brand-mainline { font-size:14.2px; }
  .site-header.is-scrolled .brand-city { font-size:7.2px; }
}

@media (max-width:430px) {
  .brand-logo-link { gap:8px; }
  .brand-mark { width:31px; height:31px; padding:4px; border-radius:9px; }
  .brand-mainline { font-size:14px; }
  .brand-city { font-size:7px; letter-spacing:.18em; }
  .site-header.is-scrolled .brand-mark { width:29px; height:29px; }
  .site-header.is-scrolled .brand-mainline { font-size:13.3px; }
  .site-header.is-scrolled .brand-city { font-size:6.8px; }
}

/* =========================================================
   DN TECH — PREMIUM V20 / CIERRE DEFINITIVO DE INICIO
   Último pase: branding, jerarquía, CTA secundarios y contraste.
   ========================================================= */

/* Marca: un poco más presente sin competir con la navegación. */
.brand-logo-link { gap:11px; }
.brand-mainline { font-size:18.8px; }
.brand-city {
  font-size:8.8px;
  letter-spacing:.29em;
  color:rgba(136,203,229,.70);
}
.brand-tech { font-weight:760; }

.site-header.is-scrolled .brand-mainline { font-size:17px; }
.site-header.is-scrolled .brand-city { font-size:8.1px; }

/* Hero: ligeramente más de presencia a la izquierda. */
.page-home .home-container {
  grid-template-columns:1.045fr .955fr;
  gap:54px;
}
.page-home .home-copy { max-width:682px; }
.page-home .home-description {
  max-width:600px;
  color:#c7d5e2;
}

/* CTA secundario: más respuesta al hover sin competir con el principal. */
.page-home .btn-premium-secondary {
  border-color:rgba(170,214,239,.20);
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
}
.page-home .btn-premium-secondary:hover {
  border-color:rgba(112,205,241,.38);
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(34,124,170,.045));
  box-shadow:0 12px 28px rgba(0,0,0,.13),0 0 24px rgba(55,183,232,.045),inset 0 1px 0 rgba(255,255,255,.045);
}
.page-home .btn-premium-secondary:hover .btn-arrow { transform:translateX(3px); }

/* Argumentos de confianza: menos altura, mismo peso informativo. */
.page-home .home-badges { gap:9px; }
.page-home .home-badge {
  padding:6px 11px;
  font-size:11.5px;
  line-height:1.25;
}
.page-home .badge-check { font-size:10.5px; }

/* Selector: +5 % aprox. de contraste en secundarios y capacidades. */
.page-home .home-panel-note { color:#8ba4b7; }
.page-home .home-panel-location { color:#a2b9ca; }
.page-home .home-service-copy { color:#a0b6c8; }
.page-home .home-service-feature { color:#88a5b8; }
.page-home .home-service-card:hover .home-service-feature { color:#aec8d6; }

/* CTA inferior: se reconoce como acción incluso antes del hover. */
.page-home .home-panel-footer {
  min-height:58px;
  border-color:rgba(108,198,232,.085);
  background:linear-gradient(90deg,rgba(4,14,24,.32),rgba(15,40,60,.25));
}
.page-home .home-panel-footer-title { color:#e2eef6; }
.page-home .home-panel-footer-arrow {
  color:#7ac9e5;
  transform:translateX(-1px);
}
.page-home .home-panel-footer:hover .home-panel-footer-arrow { transform:translateX(4px); }

@media (max-width:980px) {
  .page-home .home-container { grid-template-columns:1fr; gap:40px; }
  .brand-mainline { font-size:17.2px; }
  .brand-city { font-size:8.2px; }
}

@media (max-width:640px) {
  .brand-logo-link { gap:9px; }
  .brand-mainline { font-size:15.2px; }
  .brand-city { font-size:7.4px; letter-spacing:.22em; }
  .page-home .home-badge { padding:6px 10px; font-size:11.2px; }
  .page-home .home-panel-footer { min-height:54px; }
}

/* =========================================================
   DN TECH — PREMIUM V21 / ÚLTIMO RETOQUE DE INICIO
   Ajustes vistos en navegador real. Sin cambios de estructura.
   ========================================================= */

/* 1) Marca: +5–7 % de presencia visual. */
.brand-mark {
  width:42px;
  height:42px;
  padding:7px;
}
.brand-mainline { font-size:19.6px; }
.brand-city {
  font-size:9.1px;
  letter-spacing:.29em;
}
.site-header.is-scrolled .brand-mark {
  width:38px;
  height:38px;
  padding:6px;
}
.site-header.is-scrolled .brand-mainline { font-size:17.6px; }
.site-header.is-scrolled .brand-city { font-size:8.35px; }

/* 2) CTA del header: más discreto que el CTA principal del hero. */
.header-cta {
  background:linear-gradient(135deg,rgba(22,111,190,.64),rgba(17,137,196,.66));
  border-color:rgba(126,207,241,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 6px 16px rgba(7,92,160,.075);
}
.header-cta:hover {
  background:linear-gradient(135deg,rgba(27,129,215,.78),rgba(19,155,213,.80));
  border-color:rgba(142,222,253,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 9px 21px rgba(8,110,187,.14);
}

/* 3) Panel: un punto más de legibilidad en pantallas reales. */
.page-home .home-panel-note { color:#93aabd; }
.page-home .home-panel-location { color:#aac0cf; }
.page-home .home-service-copy { color:#a9bdcd; }
.page-home .home-service-feature { color:#91adbf; }
.page-home .home-panel-footer-text { color:#819eb3; }
.page-home .home-service-card:hover .home-service-feature { color:#b7cedb; }

@media (max-width:980px) {
  .brand-mark { width:40px; height:40px; padding:6px; }
  .brand-mainline { font-size:18px; }
  .brand-city { font-size:8.5px; }
  .site-header.is-scrolled .brand-mark { width:36px; height:36px; padding:5px; }
  .site-header.is-scrolled .brand-mainline { font-size:16.3px; }
}

@media (max-width:640px) {
  .brand-mark { width:35px; height:35px; padding:5px; }
  .brand-mainline { font-size:15.6px; }
  .brand-city { font-size:7.6px; }
  .site-header.is-scrolled .brand-mark { width:33px; height:33px; padding:4px; }
  .site-header.is-scrolled .brand-mainline { font-size:14.7px; }
}

/* =========================================================
   DN TECH — PREMIUM V22 / CIERRE VISUAL DE INICIO
   Solo dos microajustes: MADRID + hover del CTA secundario.
   ========================================================= */

/* MADRID: un punto más legible sin competir con DN TECH. */
.brand-city {
  color:rgba(148,214,237,.80);
  text-shadow:0 0 10px rgba(63,188,234,.045);
}

/* Explorar servicios: hover algo más evidente y táctil. */
.page-home .btn-premium-secondary:hover {
  border-color:rgba(116,211,247,.46);
  background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(31,132,181,.07));
  box-shadow:
    0 13px 30px rgba(0,0,0,.14),
    0 0 0 1px rgba(84,193,236,.035),
    0 0 26px rgba(55,183,232,.065),
    inset 0 1px 0 rgba(255,255,255,.055);
  transform:translateY(-2px);
}

.page-home .btn-premium-secondary:hover .btn-arrow {
  transform:translateX(4px);
}

/* =========================================================
   DN TECH — PREMIUM V24 / SERVICIO TÉCNICO POR PÁGINAS
   Cada apartado principal vive en su propio HTML.
   ========================================================= */

/* El header de las páginas de servicio mantiene el acabado oscuro y evita
   que la transparencia deje ver el fondo claro de body. */
.page-services .site-header,
.page-services-list .site-header,
.page-services-process .site-header {
  background:rgba(5,13,24,.965);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}

.services-main,
.services-list-main,
.services-process-main {
  display:block;
}

.tech-hero-view {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,rgba(41,182,246,.18),transparent 28%),
    radial-gradient(circle at 16% 82%,rgba(22,119,255,.08),transparent 28%),
    linear-gradient(145deg,#06101d 0%,#0d2139 100%);
}
.tech-hero-view::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:linear-gradient(rgba(104,212,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.09) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.48) 48%,rgba(0,0,0,.84) 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.48) 48%,rgba(0,0,0,.84) 100%);
}
.tech-hero-container {
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:48px;
  align-items:center;
  padding-top:52px;
  padding-bottom:52px;
}
.tech-hero-copy { max-width:690px; }
.tech-hero-eyebrow { color:var(--cyan-300); }
.tech-hero-title { margin:0 0 22px; color:#fff; font-size:clamp(48px,5.8vw,76px); line-height:.98; letter-spacing:-.05em; }
.tech-hero-description { margin:0; max-width:650px; color:#c7d6e6; font-size:18px; line-height:1.75; }
.tech-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 24px; }
.tech-hero-badges { display:flex; flex-wrap:wrap; gap:12px; }
.tech-hero-badge { padding:8px 12px; border:1px solid rgba(255,255,255,.11); border-radius:999px; color:#b8d3e9; background:rgba(255,255,255,.045); font-size:12px; font-weight:700; }

.tech-diagnostic-panel { padding:22px; border:1px solid rgba(104,212,255,.16); border-radius:30px; background:linear-gradient(145deg,rgba(18,48,82,.90),rgba(6,17,30,.96)); box-shadow:0 35px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.025); }
.tech-diagnostic-top { display:flex; gap:7px; margin-bottom:14px; }
.tech-diagnostic-dot { width:9px; height:9px; border-radius:50%; background:#35516d; }
.tech-diagnostic-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 3px 18px; }
.tech-diagnostic-kicker { display:block; margin-bottom:4px; color:var(--cyan-300); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.tech-diagnostic-title { margin:0; color:#eef8ff; font-size:30px; line-height:1.08; letter-spacing:-.03em; }
.tech-diagnostic-status { color:#9fc0d8; font-size:12px; font-weight:750; }
.tech-diagnostic-list { display:grid; gap:13px; }
.tech-diagnostic-item { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; padding:19px 20px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.022)); }
.tech-diagnostic-item-kicker { display:block; margin-bottom:4px; color:var(--cyan-300); font-size:9.5px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.tech-diagnostic-item-title { margin:0; color:#fff; font-size:19px; line-height:1.25; }
.tech-diagnostic-item-text { margin:6px 0 0; color:#a6bfd2; font-size:12.5px; line-height:1.55; max-width:450px; }
.tech-diagnostic-item-tags { display:grid; gap:6px; min-width:110px; margin:0; padding:0; list-style:none; }
.tech-diagnostic-item-tag { color:#d3eefd; font-size:11.5px; font-weight:700; }
.tech-diagnostic-footer { display:grid; grid-template-columns:.75fr 1.25fr; gap:10px; margin-top:13px; }
.tech-diagnostic-process-link,.tech-diagnostic-contact-link { border:1px solid rgba(104,212,255,.11); border-radius:16px; background:rgba(5,18,31,.30); transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.tech-diagnostic-process-link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; }
.tech-diagnostic-contact-link { display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:center; padding:14px 16px; }
.tech-diagnostic-process-link:hover,.tech-diagnostic-contact-link:hover { transform:translateY(-2px); border-color:rgba(104,212,255,.26); background:rgba(8,25,42,.47); }
.tech-diagnostic-process-title,.tech-diagnostic-contact-title { color:#eaf7ff; font-size:11.5px; font-weight:800; }
.tech-diagnostic-contact-copy { color:#819fb5; font-size:9.5px; }
.tech-diagnostic-process-arrow,.tech-diagnostic-contact-arrow { color:var(--cyan-300); }
.tech-diagnostic-contact-arrow { grid-row:1 / span 2; }

/* Página independiente: catálogo de servicios */
.tech-services-page { min-height:calc(100vh - var(--header-h)); padding:64px 0 72px; background:#f7fbff; }
.tech-services-catalog-header { max-width:820px; margin-bottom:30px; }
.tech-services-catalog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.tech-service-card { padding:24px; border:1px solid rgba(214,227,238,.95); border-radius:20px; background:#fff; box-shadow:0 14px 34px rgba(6,23,43,.05); }
.tech-service-card-number { display:inline-flex; margin-bottom:13px; color:var(--blue-600); font-size:12px; font-weight:900; }
.tech-service-card-title { margin:0 0 7px; color:var(--text-900); font-size:20px; line-height:1.3; }
.tech-service-card-copy { margin:0; color:var(--text-700); font-size:14px; line-height:1.7; }
.tech-services-page-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }

/* Página independiente: proceso */
.tech-process-page { min-height:calc(100vh - var(--header-h)); padding:64px 0 72px; background:#f7fbff; }
.tech-process-intro { max-width:800px; margin-bottom:30px; }
.tech-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tech-process-step { padding:24px; border:1px solid rgba(214,227,238,.95); border-radius:22px; background:#fff; }
.tech-process-step-number { display:inline-flex; margin-bottom:14px; color:var(--blue-600); font-size:12px; font-weight:900; }
.tech-process-step-title { margin:0 0 8px; font-size:20px; line-height:1.25; letter-spacing:-.02em; }
.tech-process-step-copy { margin:0; color:var(--text-700); font-size:14px; line-height:1.7; }
.tech-process-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:22px; padding:28px 30px; border-radius:24px; background:linear-gradient(145deg,#08182a,#0d2947); box-shadow:var(--shadow); }
.tech-process-cta-title { margin:0 0 8px; color:#fff; font-size:28px; letter-spacing:-.03em; }
.tech-process-cta-text { margin:0; max-width:660px; color:#bdd3e6; }
.tech-process-cta-button { flex:none; }
.tech-process-page-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }

@media (max-width:1100px) { .tech-process-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px) {
  .tech-hero-container { min-height:auto; grid-template-columns:1fr; gap:42px; }
  .tech-services-catalog-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .tech-diagnostic-item { grid-template-columns:1fr; }
  .tech-diagnostic-item-tags { grid-template-columns:repeat(3,max-content); min-width:0; }
  .tech-diagnostic-footer { grid-template-columns:1fr; }
  .tech-process-grid { grid-template-columns:1fr; }
  .tech-process-cta { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .tech-hero-container { padding-top:40px; padding-bottom:40px; }
  .tech-hero-title { font-size:clamp(40px,12vw,58px); }
  .tech-diagnostic-header { flex-direction:column; align-items:flex-start; }
  .tech-diagnostic-title { font-size:26px; }
  .tech-diagnostic-item-tags { grid-template-columns:1fr; }
  .tech-services-page,.tech-process-page { padding-top:46px; padding-bottom:52px; }
  .tech-services-page-actions,.tech-process-page-actions { flex-direction:column; align-items:stretch; }
}

/* =========================================================
   DN TECH — PREMIUM V25 / FIX VISUAL SERVICIO TÉCNICO
   Scope fuerte para evitar colisiones con estilos globales antiguos.
   ========================================================= */

.page-services .services-hero-main {
  display:block;
  width:100%;
}

.page-services .tech-hero-view {
  width:100%;
  color:#fff;
}

/* Los enlaces .link tienen más especificidad que .btn; se fuerza el color
   correcto dentro de esta página para que los CTA nunca hereden texto oscuro. */
.page-services a.tech-hero-primary-button,
.page-services a.tech-hero-secondary-button {
  color:#fff;
}

.page-services a.tech-hero-primary-button {
  border-color:rgba(122,221,255,.18);
  background:linear-gradient(135deg,#187cff 0%,#0caeff 100%);
  box-shadow:0 14px 34px rgba(20,129,255,.27),inset 0 1px 0 rgba(255,255,255,.18);
}

.page-services a.tech-hero-secondary-button {
  border-color:rgba(181,221,247,.26);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.page-services a.tech-hero-secondary-button:hover {
  color:#fff;
  border-color:rgba(104,212,255,.42);
  background:rgba(255,255,255,.09);
  box-shadow:0 12px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06);
}

.page-services .tech-diagnostic-footer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:13px;
}

.page-services .tech-diagnostic-footer-card {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:3px 14px;
  align-items:center;
  min-height:70px;
  padding:14px 16px;
  border:1px solid rgba(104,212,255,.11);
  border-radius:16px;
  background:rgba(5,18,31,.30);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.page-services .tech-diagnostic-footer-card:hover {
  transform:translateY(-2px);
  border-color:rgba(104,212,255,.27);
  background:rgba(8,25,42,.48);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.page-services .tech-diagnostic-footer-kicker {
  grid-column:1;
  color:#6bcff5;
  font-size:8px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.page-services .tech-diagnostic-footer-title {
  grid-column:1;
  color:#eaf7ff;
  font-size:11.5px;
  line-height:1.25;
}

.page-services .tech-diagnostic-footer-arrow {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  color:var(--cyan-300);
  font-size:14px;
  transition:transform .18s ease;
}

.page-services .tech-diagnostic-footer-card:hover .tech-diagnostic-footer-arrow {
  transform:translateX(3px);
}

/* Un toque de equilibrio: el hero técnico no necesita superar al claim de Inicio. */
.page-services .tech-hero-title {
  max-width:690px;
  font-size:clamp(48px,5.3vw,70px);
}

.page-services .tech-diagnostic-item-tags {
  padding-left:17px;
  border-left:1px solid rgba(104,212,255,.08);
}

@media (max-width:820px) {
  .page-services .tech-diagnostic-footer {
    grid-template-columns:1fr;
  }
  .page-services .tech-diagnostic-item-tags {
    padding-left:0;
    border-left:0;
  }
}

/* =========================================================
   DN TECH — V34 / NOTA DE LICENCIAS EN CATÁLOGO
   ========================================================= */
.page-services-list .tech-services-license-note {
  margin:18px 0 0;
  padding:13px 15px;
  border:1px solid rgba(22,119,255,.10);
  border-radius:14px;
  background:#f2f8fd;
  color:#607a91;
  font-size:12px;
  line-height:1.55;
}

/* =========================================================
   DN TECH — V50 / SUBMENÚ GLOBAL SERVICIO TÉCNICO
   Escritorio: hover + focus. Móvil: navegación anidada visible.
   ========================================================= */

.nav-services-menu {
  position:relative;
  display:flex;
  align-items:center;
  align-self:stretch;
}

.nav-services-menu > .nav-link {
  gap:5px;
}

.nav-submenu-caret {
  display:inline-block;
  margin-top:-2px;
  color:#6f9cb7;
  font-size:11px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .2s ease,color .2s ease;
}

.nav-services-menu:hover .nav-submenu-caret,
.nav-services-menu:focus-within .nav-submenu-caret {
  color:#76d8fa;
  transform:translateY(0) rotate(180deg);
}

.nav-submenu {
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  z-index:1100;
  width:248px;
  padding:8px;
  border:1px solid rgba(112,205,246,.15);
  border-radius:16px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    rgba(6,18,31,.94);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  backdrop-filter:blur(24px) saturate(155%);
  box-shadow:0 22px 50px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.035);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px) scale(.985);
  transform-origin:50% 0;
  transition:opacity .18s ease,visibility .18s ease,transform .2s cubic-bezier(.2,.72,.22,1);
}

/* Puente invisible para que el cursor no pierda el hover entre enlace y panel. */
.nav-submenu::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

.nav-services-menu:hover .nav-submenu,
.nav-services-menu:focus-within .nav-submenu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}

.nav-submenu-link {
  position:relative;
  display:grid;
  gap:2px;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:11px;
  color:#dcebf5;
  background:transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}

.nav-submenu-link + .nav-submenu-link { margin-top:2px; }

.nav-submenu-link:hover,
.nav-submenu-link:focus-visible {
  color:#fff;
  background:rgba(74,195,245,.065);
  border-color:rgba(104,212,255,.12);
  transform:translateX(2px);
  outline:none;
}

.nav-submenu-link.active {
  background:rgba(41,182,246,.075);
  border-color:rgba(104,212,255,.14);
}

.nav-submenu-link.active::after {
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#68d8ff;
  box-shadow:0 0 10px rgba(104,216,255,.38);
  transform:translateY(-50%);
}

.nav-submenu-title {
  padding-right:14px;
  color:inherit;
  font-size:11.5px;
  font-weight:800;
  line-height:1.2;
}

.nav-submenu-copy {
  padding-right:14px;
  color:#7899ae;
  font-size:8.5px;
  font-weight:560;
  line-height:1.3;
}

.nav-submenu-link:hover .nav-submenu-copy,
.nav-submenu-link:focus-visible .nav-submenu-copy,
.nav-submenu-link.active .nav-submenu-copy {
  color:#91b3c8;
}

@media (max-width:860px) {
  .nav-services-menu {
    display:block;
    width:100%;
    align-self:auto;
    border-bottom:1px solid rgba(255,255,255,.045);
  }

  .nav-services-menu > .nav-link {
    border-bottom:0;
  }

  .nav-submenu-caret {
    margin-left:auto;
    color:#6ca7c5;
    transform:none;
  }

  .nav-services-menu:hover .nav-submenu-caret,
  .nav-services-menu:focus-within .nav-submenu-caret {
    transform:none;
  }

  .nav-submenu {
    position:static;
    width:100%;
    padding:0 0 8px 13px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .nav-submenu::before { display:none; }

  .nav-services-menu:hover .nav-submenu,
  .nav-services-menu:focus-within .nav-submenu { transform:none; }

  .nav-submenu-link {
    min-height:38px;
    padding:7px 10px;
    border-radius:9px;
  }

  .nav-submenu-title { font-size:11.5px; }
  .nav-submenu-copy { font-size:8.5px; }
}

@media (prefers-reduced-motion:reduce) {
  .nav-submenu,
  .nav-submenu-caret,
  .nav-submenu-link { transition:none !important; }
}

/* =========================================================
   DN TECH — V51 / REFINADO FINAL DEL SUBMENÚ
   ========================================================= */

/* Chevron real: abajo cerrado, arriba abierto. */
.nav-submenu-caret {
  position:relative;
  width:8px;
  height:8px;
  margin:0 0 2px 1px;
  font-size:0;
  color:transparent;
  transform:none;
}

.nav-submenu-caret::before {
  content:"";
  position:absolute;
  inset:0;
  width:6px;
  height:6px;
  border-right:1.5px solid #6f9cb7;
  border-bottom:1.5px solid #6f9cb7;
  transform:translateY(-2px) rotate(45deg); /* abajo */
  transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.2,.72,.22,1),border-color .18s ease;
}

.nav-services-menu:hover .nav-submenu-caret,
.nav-services-menu:focus-within .nav-submenu-caret {
  transform:none;
}

.nav-services-menu:hover .nav-submenu-caret::before,
.nav-services-menu:focus-within .nav-submenu-caret::before {
  border-color:#76d8fa;
  transform:translateY(2px) rotate(225deg); /* arriba */
}

.nav-services-menu > .nav-link {
  gap:6px;
}

.nav-services-menu:hover > .nav-link,
.nav-services-menu:focus-within > .nav-link {
  color:#f7fbff;
}

.nav-submenu {
  top:calc(100% + 9px);
  width:258px;
  padding:9px;
  border-color:rgba(112,205,246,.19);
  border-radius:16px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.008)),
    rgba(5,17,30,.975);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 24px 56px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translate(-50%,7px) scale(.99);
  transition:opacity .16s ease,visibility .16s ease,transform .22s cubic-bezier(.2,.72,.22,1);
}

.nav-submenu-link {
  padding:11px 12px;
  border-radius:11px;
}

.nav-submenu-link + .nav-submenu-link { margin-top:3px; }

.nav-submenu-title {
  font-size:12px;
  letter-spacing:-.01em;
}

.nav-submenu-copy {
  margin-top:1px;
  color:#85a7bc;
  font-size:9.1px;
  line-height:1.35;
}

.nav-submenu-link:hover .nav-submenu-copy,
.nav-submenu-link:focus-visible .nav-submenu-copy,
.nav-submenu-link.active .nav-submenu-copy {
  color:#a0bfd1;
}

.nav-submenu-link.active {
  background:linear-gradient(135deg,rgba(41,182,246,.095),rgba(41,182,246,.045));
  border-color:rgba(104,212,255,.2);
}

/* Escape puede bloquear temporalmente el desplegable aunque siga el puntero encima. */
.nav-services-menu.submenu-force-closed .nav-submenu {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%,7px) scale(.99) !important;
}

.nav-services-menu.submenu-force-closed .nav-submenu-caret::before {
  border-color:#6f9cb7 !important;
  transform:translateY(-2px) rotate(45deg) !important;
}

@media (max-width:860px) {
  /* En móvil los accesos secundarios ya están visibles dentro del menú: el caret sobra. */
  .nav-submenu-caret { display:none; }
  .nav-services-menu > .nav-link { gap:0; }
  .nav-submenu { width:100%; }
  .nav-submenu-link { padding:8px 10px; }
  .nav-submenu-title { font-size:11.7px; }
  .nav-submenu-copy { font-size:8.8px; }
}


/* =========================================================
   DN TECH — V53 / SUBMENÚ DESARROLLO WEB
   ========================================================= */
.nav-web-menu { position:relative; display:flex; align-items:center; align-self:stretch; }
.nav-web-menu > .nav-link { gap:6px; }
.nav-web-menu:hover > .nav-link,.nav-web-menu:focus-within > .nav-link { color:#f7fbff; }
.nav-web-menu:hover .nav-submenu,.nav-web-menu:focus-within .nav-submenu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0) scale(1); }
.nav-web-menu:hover .nav-submenu-caret::before,.nav-web-menu:focus-within .nav-submenu-caret::before { border-color:#76d8fa; transform:translateY(2px) rotate(225deg); }
.nav-web-menu.submenu-force-closed .nav-submenu { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translate(-50%,7px) scale(.99) !important; }
.nav-web-menu.submenu-force-closed .nav-submenu-caret::before { border-color:#6f9cb7 !important; transform:translateY(-2px) rotate(45deg) !important; }
.nav-web-submenu { width:266px; }
@media (max-width:860px) {
  .nav-web-menu { display:block; width:100%; align-self:auto; border-bottom:1px solid rgba(255,255,255,.045); }
  .nav-web-menu > .nav-link { border-bottom:0; gap:0; }
  .nav-web-menu .nav-submenu-caret { display:none; }
  .nav-web-menu .nav-submenu { position:static; width:100%; padding:0 0 8px 13px; border:0; border-radius:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav-web-menu .nav-submenu::before { display:none; }
}


/* =========================================================
   DN TECH — PREMIUM V59 / WEB PROYECTOS
   ========================================================= */
.page-web-projects .premium-web-main {
  background:
    radial-gradient(circle at 16% 14%,rgba(38,156,255,.12),transparent 28%),
    radial-gradient(circle at 84% 24%,rgba(92,209,255,.10),transparent 24%),
    linear-gradient(180deg,#050d18 0%,#081220 100%);
}

.web-projects-container {
  padding-top: 68px;
  padding-bottom: 56px;
}
.web-projects-heading { max-width: 980px; margin-bottom: 24px; }
.web-projects-breadcrumb {
  display:inline-flex; margin-bottom:12px; color:#6788a3; font-size:12px; font-weight:700; letter-spacing:.03em;
}
.web-projects-title { max-width: 760px; }
.web-projects-subtitle { max-width: 760px; color:#95aec3; }
.web-projects-header-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.web-projects-header-actions .btn-outline-light { color:#e6f4ff; }
.web-projects-layout { grid-template-columns:300px 1fr; gap:26px; align-items:start; }
.project-selector {
  position: sticky; top: calc(var(--header-h) + 26px);
  padding: 14px;
  border:1px solid rgba(145,210,244,.08);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.project-tab {
  min-height: 78px; padding: 15px 15px; border-radius: 16px;
}
.project-tab.is-active { box-shadow:0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); }
.project-tab-copy strong { font-size:13px; }
.project-tab-copy small { font-size:10px; }
.project-selector-note { margin-top:12px; padding:16px; border-radius:16px; background:rgba(1,9,17,.34); }
.project-selector-note p { font-size:11px; }
.project-preview-stage { min-width:0; }
.portfolio-preview {
  padding: 18px;
  border:1px solid rgba(145,210,244,.08);
  border-radius:24px;
  background: linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
  box-shadow: 0 28px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
.portfolio-browser { border-radius:22px; }
.project-meta { margin-top:14px; padding-inline:2px; }
.project-meta-label { font-size:9px; }
.project-meta strong { font-size:13px; }
.project-meta small { font-size:10px; }
.project-insights {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.project-insight-card {
  padding:16px;
  border:1px solid rgba(145,210,244,.08);
  border-radius:16px;
  background:rgba(255,255,255,.028);
}
.project-insight-label { display:block; margin-bottom:8px; color:#53ceff; font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.project-insight-card strong { display:block; margin-bottom:6px; color:#ecf7ff; font-size:14px; line-height:1.35; }
.project-insight-card p { margin:0; color:#87a3b8; font-size:11px; line-height:1.65; }
.web-projects-actions {
  justify-content:space-between; align-items:center; margin-top:18px; padding:18px 22px;
  border:1px solid rgba(145,210,244,.08); border-radius:18px; background:rgba(255,255,255,.022);
}
.web-projects-actions .btn-outline-light { color:#e7f5ff; }

@media (max-width: 1080px) {
  .web-projects-layout { grid-template-columns: 270px 1fr; }
  .project-insights { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  .web-projects-container { padding-top: 72px; padding-bottom: 64px; }
  .web-projects-layout { grid-template-columns:1fr; }
  .project-selector { position:relative; top:auto; }
}
@media (max-width: 700px) {
  .web-projects-header-actions, .web-projects-actions { flex-direction:column; align-items:stretch; }
  .web-projects-actions .btn, .web-projects-header-actions .btn { width:100%; }
  .project-selector { padding: 10px; }
  .project-tab { min-height: 70px; }
  .project-insight-card { padding:14px; }
}


/* =========================================================
   DN TECH — PREMIUM V60 / PROYECTOS POLISH
   ========================================================= */
.page-web-projects .site-header {
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),
    rgba(5,13,24,.965);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-bottom-color:rgba(105,201,243,.12);
}
.page-web-projects .site-header.is-scrolled {
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.004)),
    rgba(4,12,22,.985);
}

.page-web-projects .web-projects-container {
  min-height:auto;
  display:block;
  padding-top:54px;
  padding-bottom:52px;
}
.page-web-projects .web-projects-heading { max-width:920px; margin-bottom:20px; }
.page-web-projects .web-projects-breadcrumb {
  display:flex;
  width:max-content;
  margin-bottom:14px;
  color:#7897ae;
}
.page-web-projects .web-projects-heading .web-showcase-eyebrow {
  display:flex;
  width:max-content;
  margin-bottom:13px;
}
.page-web-projects .web-projects-title {
  max-width:760px;
  margin-bottom:12px;
  font-size:clamp(40px,4vw,56px);
  line-height:1.01;
}
.page-web-projects .web-projects-subtitle {
  max-width:720px;
  margin-bottom:0;
  font-size:14px;
  line-height:1.65;
}
.page-web-projects .web-projects-header-actions { margin-top:18px; }
.page-web-projects .web-projects-layout { margin-top:22px; }

.page-web-projects .project-tab.is-active {
  border-color:rgba(93,210,255,.42);
  background:linear-gradient(135deg,rgba(36,149,255,.16),rgba(255,255,255,.045));
  box-shadow:0 0 0 1px rgba(93,210,255,.045),0 16px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
}
.page-web-projects .portfolio-preview.is-active {
  animation:dnProjectPreviewIn .34s cubic-bezier(.22,.8,.24,1) both;
}
@keyframes dnProjectPreviewIn {
  from { opacity:0; transform:translateY(9px); filter:blur(3px); }
  to { opacity:1; transform:none; filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .page-web-projects .portfolio-preview.is-active { animation:none; }
}

/* Footer consistente con Desarrollo web. */
.page-web-projects .web-footer {
  border-top:1px solid rgba(104,212,255,.08);
  background:#030b14;
}
.page-web-projects .web-footer .footer-inner {
  min-height:88px;
  padding-top:18px;
  padding-bottom:18px;
}
.page-web-projects .footer-brand-new {
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.page-web-projects .footer-brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  overflow:hidden;
  border:1px solid rgba(104,212,255,.18);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(18,62,91,.72),rgba(5,17,30,.96));
}
.page-web-projects .footer-brand-icon {
  display:block;
  width:24px;
  height:24px;
  max-width:24px;
  max-height:24px;
  object-fit:contain;
}
.page-web-projects .footer-brand-copy { display:grid; line-height:1; }
.page-web-projects .footer-brand-main {
  color:#f2f9ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.035em;
}
.page-web-projects .footer-brand-city {
  margin-top:4px;
  color:#64cfff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.22em;
}

@media (max-width:980px) {
  .page-web-projects .web-projects-container { padding-top:64px; }
}
@media (max-width:700px) {
  .page-web-projects .web-projects-title { font-size:clamp(38px,11vw,50px); }
}


/* =========================================================
   DN TECH — PREMIUM V61 / PORTFOLIO EXPANDED
   ========================================================= */
body.page-web-projects .site-header {
  position:fixed;
  top:0; left:0; right:0; width:100%; z-index:1000;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),rgba(5,14,25,.975) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:rgba(105,201,243,.12);
}
body.page-web-projects .site-header.is-scrolled {
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),rgba(4,12,22,.992) !important;
}
body.page-web-projects .main-content { padding-top:0; }
body.page-web-projects .web-projects-container {
  padding-top:calc(var(--header-h) + 52px);
  padding-bottom:64px;
}

body.page-web-projects {
  --project-accent:104,212,255;
  --project-accent-soft:36,149,255;
}
body.page-web-projects[data-project-theme="motorlab"] { --project-accent:255,102,62; --project-accent-soft:255,75,31; }
body.page-web-projects[data-project-theme="nova"] { --project-accent:66,210,196; --project-accent-soft:50,178,165; }
body.page-web-projects[data-project-theme="nexus"] { --project-accent:139,111,255; --project-accent-soft:78,93,255; }
body.page-web-projects[data-project-theme="lumen"] { --project-accent:238,177,99; --project-accent-soft:205,127,52; }
body.page-web-projects[data-project-theme="atlas"] { --project-accent:180,207,195; --project-accent-soft:88,125,112; }
.page-web-projects .premium-web-main {
  background:
    radial-gradient(circle at 17% 16%,rgba(var(--project-accent),.10),transparent 28%),
    radial-gradient(circle at 87% 30%,rgba(var(--project-accent-soft),.12),transparent 25%),
    linear-gradient(180deg,#050d18 0%,#081524 100%);
  transition:background .45s ease;
}
.web-projects-heading { max-width:980px; }
.web-projects-title { max-width:850px; }
.web-projects-subtitle { max-width:790px; }
.web-projects-intro {
  display:flex; justify-content:space-between; align-items:end; gap:24px;
  margin:14px 0 18px; padding:15px 18px;
  border:1px solid rgba(var(--project-accent),.10); border-radius:16px;
  background:rgba(255,255,255,.022);
}
.web-projects-intro > div { display:grid; gap:3px; }
.web-projects-intro-kicker { color:rgb(var(--project-accent)); font-size:8px; font-weight:900; letter-spacing:.15em; }
.web-projects-intro strong { color:#dbeaf6; font-size:13px; }
.web-projects-intro-counter { flex:none; color:#6f8ca3; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.web-projects-layout { grid-template-columns:310px 1fr; gap:26px; }
.project-selector { gap:8px; max-height:calc(100vh - var(--header-h) - 42px); overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--project-accent),.25) transparent; }
.project-tab { min-height:72px; }
.project-tab.is-active {
  border-color:rgba(var(--project-accent),.42);
  background:linear-gradient(135deg,rgba(var(--project-accent-soft),.16),rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(var(--project-accent),.05),0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
.project-tab.is-active .project-tab-index,.project-tab.is-active .project-tab-arrow { color:rgb(var(--project-accent)); }
.project-selector-note-mark,.project-insight-label,.project-meta-label { color:rgb(var(--project-accent)); }
.portfolio-preview {
  border-color:rgba(var(--project-accent),.10);
  background:linear-gradient(145deg,rgba(var(--project-accent-soft),.035),rgba(255,255,255,.012));
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.portfolio-browser { box-shadow:0 30px 70px rgba(0,0,0,.36); }
.project-insight-card { min-height:128px; }
.project-insight-card strong { font-size:14px; }

/* AUREA — richer */
.aurea-mini-stats { display:flex; gap:18px; margin-top:18px; }
.aurea-mini-stats span { display:grid; }
.aurea-mini-stats b { font-family:Georgia,serif; font-size:15px; font-weight:500; color:#3d3630; }
.aurea-mini-stats small { color:#988b81; font-size:6px; text-transform:uppercase; letter-spacing:.12em; }
.aurea-project-frame { position:absolute; width:70px; height:90px; top:24px; right:22px; border:7px solid rgba(248,241,229,.8); box-shadow:0 10px 20px rgba(70,50,35,.12); transform:rotate(4deg); }

/* MOTORLAB — richer */
.motor-grid span { align-content:center; gap:2px; }
.motor-grid b { color:#a7b1ba; font-size:7px; }
.motor-grid small { color:#56616b; font-size:5px; }
.motor-car-silhouette { position:absolute; z-index:1; right:42px; bottom:25px; width:250px; height:66px; border-radius:46% 38% 16% 20%; background:linear-gradient(180deg,#262d33,#11161a); box-shadow:inset 0 -10px 0 #080a0c,0 18px 40px rgba(0,0,0,.35); opacity:.88; }
.motor-car-silhouette::before { content:""; position:absolute; left:52px; top:-26px; width:120px; height:40px; border-radius:58% 50% 0 0; background:#1c2329; transform:skewX(-18deg); }
.motor-car-silhouette::after { content:""; position:absolute; left:34px; right:28px; bottom:-15px; height:32px; background:radial-gradient(circle at 20% 50%,#07090b 0 13px,#3f464c 14px 18px,transparent 19px),radial-gradient(circle at 83% 50%,#07090b 0 13px,#3f464c 14px 18px,transparent 19px); }

/* NOVA — richer */
.nova-specialties { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
.nova-specialties span { padding:5px 8px; border:1px solid rgba(23,49,72,.08); border-radius:999px; color:#5b7a82; background:rgba(255,255,255,.55); font-size:6px; }

/* NEXUS */
.nexus-project-screen { color:#e9edff; background:radial-gradient(circle at 76% 30%,rgba(110,78,255,.22),transparent 32%),linear-gradient(135deg,#0b0d1a,#11162c 58%,#0a1020); }
.nexus-project-nav { min-height:48px; display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.nexus-project-nav b { font-size:13px; letter-spacing:.08em; }.nexus-project-nav b span { color:#8a7cff; }
.nexus-project-nav > span { color:#717a9b; font-size:6px; text-transform:uppercase; letter-spacing:.12em; }
.nexus-project-nav button { padding:7px 11px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.05); color:#dfe5ff; font-size:6px; }
.nexus-project-body { min-height:292px; display:grid; grid-template-columns:1fr 1.02fr; gap:22px; align-items:center; padding:25px 27px; }
.nexus-tag { color:#a99dff; font-size:6px; font-weight:800; letter-spacing:.17em; }.nexus-copy h2 { margin:10px 0; font-size:30px; line-height:.98; letter-spacing:-.04em; }.nexus-copy h2 em { color:#9a8bff; font-style:normal; }.nexus-copy p { max-width:320px; margin:0; color:#8992b4; font-size:8px; line-height:1.6; }
.nexus-actions { display:flex; align-items:center; gap:10px; margin-top:15px; }.nexus-actions button { padding:8px 12px; border:0; border-radius:8px; background:linear-gradient(135deg,#7869ff,#9a7bff); color:white; font-size:7px; font-weight:800; }.nexus-actions span { color:#717a99; font-size:6px; }
.nexus-trust { display:flex; gap:8px; margin-top:14px; }.nexus-trust span { color:#687295; font-size:6px; }
.nexus-dashboard { padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(10,13,28,.72); box-shadow:0 24px 50px rgba(0,0,0,.25); }
.nexus-topbar { display:flex; justify-content:space-between; color:#cfd6f7; font-size:8px; }.nexus-topbar small { color:#69d7b8; }
.nexus-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }.nexus-metrics span { display:grid; padding:9px; border-radius:9px; background:rgba(255,255,255,.035); }.nexus-metrics b { font-size:10px; }.nexus-metrics small { color:#667091; font-size:5px; text-transform:uppercase; }
.nexus-chart { display:flex; align-items:end; gap:5px; height:82px; margin:10px 0; padding:10px; border-radius:10px; background:rgba(255,255,255,.025); }.nexus-chart i { flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#9b7cff,#4e5eff); }.nexus-chart i:nth-child(1){height:34%}.nexus-chart i:nth-child(2){height:52%}.nexus-chart i:nth-child(3){height:43%}.nexus-chart i:nth-child(4){height:70%}.nexus-chart i:nth-child(5){height:58%}.nexus-chart i:nth-child(6){height:86%}.nexus-chart i:nth-child(7){height:76%}
.nexus-rows { display:grid; gap:5px; }.nexus-rows span { display:grid; grid-template-columns:8px 1fr auto; gap:6px; align-items:center; color:#848eae; font-size:6px; }.nexus-rows i { width:5px; height:5px; border-radius:50%; background:#7f72ff; }.nexus-rows b { color:#d5daf2; }

/* LUMEN */
.lumen-project-screen { position:relative; overflow:hidden; color:#f6efe7; background:linear-gradient(120deg,#130f10,#261616 48%,#120f12); }
.lumen-project-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 78% 45%,rgba(239,163,73,.26),transparent 25%),linear-gradient(100deg,transparent 48%,rgba(180,92,43,.16) 49% 68%,transparent 69%); }
.lumen-overlay { position:absolute; right:42px; top:72px; width:250px; height:190px; border-radius:130px 130px 24px 24px; background:linear-gradient(180deg,rgba(239,160,85,.33),rgba(78,38,30,.6)),radial-gradient(circle at 40% 38%,#d99b5e 0 6px,transparent 7px),linear-gradient(120deg,#57362d,#1b1717); box-shadow:0 28px 60px rgba(0,0,0,.35); }
.lumen-project-nav { position:relative; z-index:2; min-height:48px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.lumen-project-nav b { letter-spacing:.18em; font-size:12px; }.lumen-project-nav span { color:#a99183; font-size:6px; text-transform:uppercase; letter-spacing:.12em; }.lumen-project-nav button { padding:7px 11px; border:1px solid rgba(238,177,99,.35); border-radius:999px; background:rgba(238,177,99,.09); color:#efc08b; font-size:6px; }
.lumen-project-body { position:relative; z-index:2; min-height:292px; padding:28px; }.lumen-tag { color:#dfa56d; font-size:6px; font-weight:900; letter-spacing:.2em; }.lumen-project-body h2 { margin:10px 0; font-family:Georgia,serif; font-size:34px; line-height:.98; font-weight:500; }.lumen-project-body h2 em { color:#e6ad72; font-weight:400; }.lumen-project-body p { max-width:310px; margin:0; color:#b09d93; font-size:8px; line-height:1.6; }.lumen-actions { display:flex; gap:10px; align-items:center; margin-top:16px; }.lumen-actions button { padding:8px 12px; border:0; border-radius:999px; background:#e2a667; color:#211514; font-size:7px; font-weight:800; }.lumen-actions span { color:#806d65; font-size:6px; }.lumen-menu-strip { position:absolute; left:28px; bottom:24px; display:flex; gap:8px; }.lumen-menu-strip span { display:grid; min-width:72px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.035); }.lumen-menu-strip b { color:#dfaa73; font-size:7px; }.lumen-menu-strip small { color:#9c8880; font-size:6px; }

/* ATLAS */
.atlas-project-screen { color:#1e312b; background:#f0f2ed; }.atlas-project-nav { min-height:48px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:0 24px; border-bottom:1px solid rgba(30,49,43,.08); }.atlas-project-nav b { font-size:12px; letter-spacing:.08em; }.atlas-project-nav b span { color:#8da297; }.atlas-project-nav > span { color:#75877e; font-size:6px; text-transform:uppercase; letter-spacing:.1em; }.atlas-project-nav button { padding:7px 10px; border:1px solid rgba(30,49,43,.13); border-radius:999px; background:#243b34; color:white; font-size:6px; }
.atlas-project-body { min-height:292px; display:grid; grid-template-columns:1.1fr .9fr; gap:0; }.atlas-property-visual { position:relative; overflow:hidden; min-height:292px; background:linear-gradient(180deg,#dce6e2 0 48%,#c7d0ca 49% 100%); }.atlas-sky { position:absolute; inset:0 0 48% 0; background:linear-gradient(180deg,#e9f0ed,#d5e0dc); }.atlas-building { position:absolute; bottom:50px; background:linear-gradient(90deg,#a7b3ad,#8f9f97); box-shadow:inset -10px 0 rgba(255,255,255,.08); }.atlas-building::after { content:""; position:absolute; inset:14px 10px; background:repeating-linear-gradient(90deg,rgba(44,67,58,.34) 0 8px,transparent 8px 18px),repeating-linear-gradient(0deg,rgba(44,67,58,.18) 0 8px,transparent 8px 19px); }.atlas-building.a { left:24px; width:108px; height:126px; }.atlas-building.b { left:143px; width:92px; height:168px; }.atlas-building.c { left:244px; width:100px; height:108px; }
.atlas-price-card { position:absolute; left:18px; bottom:16px; display:grid; gap:2px; padding:10px 12px; border-radius:11px; background:rgba(249,251,248,.88); box-shadow:0 12px 30px rgba(28,49,41,.12); }.atlas-price-card small { color:#6a8177; font-size:5px; letter-spacing:.12em; }.atlas-price-card b { font-size:12px; }.atlas-price-card span { color:#788d84; font-size:6px; }
.atlas-search-panel { padding:26px 22px; background:#f8faf7; }.atlas-tag { color:#799186; font-size:6px; font-weight:900; letter-spacing:.16em; }.atlas-search-panel h2 { margin:9px 0; font-size:28px; line-height:1.02; letter-spacing:-.04em; }.atlas-search-panel h2 em { color:#789387; font-style:normal; }.atlas-search-panel p { margin:0; color:#70857d; font-size:8px; line-height:1.6; }.atlas-search { display:grid; grid-template-columns:1fr 1fr 1.2fr auto; gap:5px; margin-top:14px; }.atlas-search span { display:flex; align-items:center; padding:7px; border:1px solid rgba(30,49,43,.08); border-radius:7px; background:white; color:#72857d; font-size:5.5px; }.atlas-search button { border:0; border-radius:7px; background:#233a32; color:white; font-size:6px; padding:0 10px; }.atlas-stats { display:flex; gap:14px; margin-top:16px; }.atlas-stats span { display:grid; }.atlas-stats b { font-size:12px; }.atlas-stats small { color:#7c9087; font-size:5.5px; }

.projects-closing-cta {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
  margin-top:22px; padding:26px 28px;
  border:1px solid rgba(var(--project-accent),.14); border-radius:20px;
  background:linear-gradient(135deg,rgba(var(--project-accent-soft),.09),rgba(255,255,255,.022));
}
.projects-closing-kicker { color:rgb(var(--project-accent)); font-size:8px; font-weight:900; letter-spacing:.15em; }
.projects-closing-cta h2 { max-width:720px; margin:6px 0 6px; color:#f1f8ff; font-size:24px; line-height:1.18; letter-spacing:-.025em; }
.projects-closing-cta p { max-width:760px; margin:0; color:#86a2b7; font-size:11px; line-height:1.65; }
.projects-closing-actions { display:flex; gap:10px; }

@media (max-width:1180px) {
  .web-projects-layout { grid-template-columns:280px 1fr; }
  .project-tab { min-height:68px; }
  .nexus-project-body,.atlas-project-body { grid-template-columns:1fr; }
  .nexus-dashboard { display:none; }
  .atlas-property-visual { min-height:190px; }
}
@media (max-width:980px) {
  body.page-web-projects .web-projects-container { padding-top:calc(var(--header-h) + 42px); }
  .web-projects-intro { align-items:start; }
  .project-selector { max-height:none; overflow:visible; }
  .project-insights { grid-template-columns:1fr; }
  .projects-closing-cta { grid-template-columns:1fr; }
  .projects-closing-actions { justify-content:flex-start; }
}
@media (max-width:700px) {
  .web-projects-intro { flex-direction:column; }
  .projects-closing-actions { flex-direction:column; }
  .projects-closing-actions .btn { width:100%; }
  .nexus-project-body,.lumen-project-body,.atlas-search-panel { padding:20px; }
  .nexus-copy h2,.lumen-project-body h2,.atlas-search-panel h2 { font-size:26px; }
  .lumen-overlay { right:-50px; opacity:.55; }
  .atlas-search { grid-template-columns:1fr 1fr; }
  .atlas-search button { min-height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .page-web-projects .premium-web-main,.portfolio-preview,.project-tab { transition:none !important; }
}


/* =========================================================
   DN TECH — PREMIUM V62 / PORTFOLIO INTERACTIVE
   ========================================================= */
.page-web-projects .web-projects-heading { margin-bottom:16px; }
.page-web-projects .web-projects-intro {
  margin:10px 0 16px;
  padding:11px 16px;
  min-height:58px;
}
.page-web-projects .web-projects-intro-kicker { font-size:7px; }
.page-web-projects .web-projects-intro strong { font-size:12px; }
.page-web-projects .web-projects-intro-counter { font-size:8px; }

/* Identidad cromática visible antes de abrir cada concepto. */
.page-web-projects .project-tab { position:relative; overflow:hidden; padding-left:19px; }
.page-web-projects .project-tab::before {
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:rgba(104,212,255,.58);
  opacity:.55;
  transition:opacity .2s ease,box-shadow .2s ease,width .2s ease;
}
.page-web-projects .project-tab[data-project="aurea"]::before { background:#caa27e; }
.page-web-projects .project-tab[data-project="motorlab"]::before { background:#ff663e; }
.page-web-projects .project-tab[data-project="nova"]::before { background:#42d2c4; }
.page-web-projects .project-tab[data-project="nexus"]::before { background:#8b6fff; }
.page-web-projects .project-tab[data-project="lumen"]::before { background:#eeb163; }
.page-web-projects .project-tab[data-project="atlas"]::before { background:#b4cfc3; }
.page-web-projects .project-tab:hover::before,
.page-web-projects .project-tab.is-active::before { width:4px; opacity:1; box-shadow:0 0 14px currentColor; }

/* Toolbar: responsive real + ampliación. */
.project-preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.project-device-switch {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(var(--project-accent),.14);
  border-radius:12px;
  background:rgba(1,9,17,.50);
}
.project-device-btn,
.project-expand-btn {
  border:0;
  color:#7592a9;
  background:transparent;
  font:inherit;
  cursor:pointer;
}
.project-device-btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:31px;
  padding:0 10px;
  border-radius:8px;
  font-size:9px;
  font-weight:800;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.project-device-btn:hover { color:#d8efff; }
.project-device-btn.is-active {
  color:#eefaff;
  background:rgba(var(--project-accent),.10);
  box-shadow:inset 0 0 0 1px rgba(var(--project-accent),.18);
}
.project-device-dot { position:relative; display:inline-block; width:13px; height:9px; border:1px solid currentColor; border-radius:2px; opacity:.9; }
.project-device-dot.desktop::after { content:""; position:absolute; left:4px; right:4px; bottom:-4px; height:2px; border-top:1px solid currentColor; }
.project-device-dot.mobile { width:7px; height:12px; border-radius:2px; }
.project-expand-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(var(--project-accent),.12);
  border-radius:10px;
  color:#a4bfd3;
  font-size:9px;
  font-weight:850;
  background:rgba(255,255,255,.018);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.project-expand-btn:hover { color:#effaff; border-color:rgba(var(--project-accent),.30); background:rgba(var(--project-accent),.08); transform:translateY(-1px); }
.project-expand-btn span { color:rgb(var(--project-accent)); }

/* El navegador pasa realmente de desktop a móvil y sus componentes reaccionan por container query. */
.portfolio-preview .portfolio-browser {
  container-type:inline-size;
  width:100%;
  max-width:100%;
  margin-inline:auto;
  transition:max-width .42s cubic-bezier(.22,.8,.24,1),border-radius .3s ease,box-shadow .3s ease;
}
.portfolio-preview[data-device="mobile"] .portfolio-browser {
  max-width:430px;
  border-radius:30px;
  box-shadow:0 34px 78px rgba(0,0,0,.38),0 0 0 1px rgba(var(--project-accent),.08);
}
.portfolio-preview[data-device="mobile"] .portfolio-browser-bar { grid-template-columns:52px 1fr 34px; }

@container (max-width: 520px) {
  .aurea-project-nav span,.motor-project-nav > span,.nova-project-nav > span,.nexus-project-nav > span,.lumen-project-nav > span,.atlas-project-nav > span { display:none; }
  .aurea-project-nav,.motor-project-nav,.nova-project-nav { padding-inline:16px; }
  .nexus-project-nav,.lumen-project-nav,.atlas-project-nav { grid-template-columns:1fr auto; padding-inline:15px; gap:10px; }
  .aurea-project-body,.nova-project-body,.nexus-project-body,.atlas-project-body { grid-template-columns:1fr; }
  .aurea-project-body,.nova-project-body,.nexus-project-body { padding:22px 18px; }
  .aurea-project-body h2,.nova-project-body h2,.nexus-copy h2,.lumen-project-body h2,.atlas-search-panel h2 { font-size:27px; }
  .aurea-project-art { height:170px; }
  .motor-project-body { padding:24px 18px; }
  .motor-project-body h2 { font-size:30px; }
  .motor-grid { opacity:.42; right:-16px; top:40px; }
  .nova-cards { grid-template-columns:repeat(3,1fr); margin-top:4px; }
  .nova-card-main { grid-column:auto; min-height:auto; }
  .nexus-dashboard { margin-top:4px; }
  .nexus-metrics { grid-template-columns:1fr 1fr 1fr; }
  .lumen-overlay { right:-100px; opacity:.58; }
  .lumen-project-body { min-height:360px; padding:26px 18px; }
  .lumen-menu-strip { left:18px; right:18px; bottom:20px; }
  .lumen-menu-strip span { min-width:0; flex:1; }
  .atlas-property-visual { min-height:200px; }
  .atlas-search-panel { padding:22px 18px; }
  .atlas-search { grid-template-columns:1fr 1fr; }
  .atlas-search button { min-height:34px; }
}

/* CTA de cierre: el secundario ya no parece desactivado. */
.projects-closing-actions .projects-process-link {
  color:#eaf7ff;
  border-color:rgba(157,212,244,.28);
  background:rgba(255,255,255,.035);
}
.projects-closing-actions .projects-process-link:hover {
  color:#fff;
  border-color:rgba(var(--project-accent),.42);
  background:rgba(var(--project-accent),.08);
}
.projects-closing-actions .projects-process-link span { color:rgb(var(--project-accent)); }

/* Vista ampliada. */
.project-modal[hidden] { display:none; }
.project-modal {
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:34px;
}
.project-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(0,5,12,.82); -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px); cursor:zoom-out; }
.project-modal-dialog {
  position:relative;
  z-index:1;
  width:min(1320px,94vw);
  max-height:92vh;
  overflow:auto;
  padding:18px;
  border:1px solid rgba(var(--project-accent),.22);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(13,29,46,.98),rgba(5,14,25,.99));
  box-shadow:0 40px 120px rgba(0,0,0,.60),0 0 80px rgba(var(--project-accent),.08);
}
.project-modal-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:0 3px; }
.project-modal-head > div { display:grid; gap:2px; }
.project-modal-kicker { color:rgb(var(--project-accent)); font-size:7px; font-weight:900; letter-spacing:.14em; }
.project-modal-head strong { color:#eef9ff; font-size:15px; }
.project-modal-close { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.10); border-radius:11px; color:#c4d9e9; background:rgba(255,255,255,.04); font-size:22px; cursor:pointer; }
.project-modal-preview .portfolio-browser { width:100%; max-width:none !important; margin:0; }
body.project-modal-open { overflow:hidden; }

@media (max-width:700px) {
  .project-preview-toolbar { align-items:stretch; flex-direction:column; }
  .project-device-switch { align-self:flex-start; }
  .project-expand-btn { justify-content:center; width:100%; }
  .project-modal { padding:10px; }
  .project-modal-dialog { width:100%; max-height:94vh; padding:12px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-preview .portfolio-browser,.project-device-btn,.project-expand-btn { transition:none !important; }
}

/* =========================================================
   DN TECH — PREMIUM V63 / PORTFOLIO REALISTA
   ========================================================= */
body.page-web-projects[data-project-theme="lexia"] { --project-accent:211,176,103; --project-accent-soft:95,71,32; }
body.page-web-projects[data-project-theme="pulse"] { --project-accent:202,255,67; --project-accent-soft:114,235,58; }
body.page-web-projects[data-project-theme="marea"] { --project-accent:240,142,118; --project-accent-soft:214,95,99; }

.page-web-projects .project-tab[data-project="lexia"]::before { background:#d3b067; }
.page-web-projects .project-tab[data-project="pulse"]::before { background:#caff43; }
.page-web-projects .project-tab[data-project="marea"]::before { background:#f08e76; }

.page-web-projects .web-projects-title { max-width:900px; }
.page-web-projects .web-projects-subtitle { max-width:850px; }
.page-web-projects .project-selector { padding-bottom:10px; }

/* Las previews ahora se sienten como páginas reales: hero + segunda sección. */
.site-depth-section {
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  gap:1px;
  min-height:104px;
  border-top:1px solid rgba(0,0,0,.08);
}
.site-depth-section > article {
  display:grid;
  align-content:center;
  gap:4px;
  padding:17px 20px;
  min-width:0;
}
.site-depth-section b { font-size:10px; line-height:1.25; }
.site-depth-section small { font-size:6.5px; line-height:1.45; opacity:.72; }
.site-depth-section span { font-size:6px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.62; }
.aurea-project-screen .site-depth-section { background:#eee8df; color:#3a332d; border-color:rgba(43,31,20,.08); }
.aurea-project-screen .site-depth-section > article + article { border-left:1px solid rgba(43,31,20,.08); }
.motor-project-screen .site-depth-section { background:#0e1216; color:#d9e0e5; border-color:rgba(255,255,255,.07); }
.motor-project-screen .site-depth-section > article + article { border-left:1px solid rgba(255,255,255,.06); }
.nova-project-screen .site-depth-section { background:#e6f4f3; color:#173148; border-color:rgba(23,49,72,.08); }
.nova-project-screen .site-depth-section > article + article { border-left:1px solid rgba(23,49,72,.07); }
.nexus-project-screen .site-depth-section { background:#0b1020; color:#e3e8ff; border-color:rgba(255,255,255,.07); }
.nexus-project-screen .site-depth-section > article + article { border-left:1px solid rgba(255,255,255,.06); }
.lumen-project-screen .site-depth-section { position:relative; z-index:2; background:#171112; color:#f4e7dc; border-color:rgba(255,255,255,.07); }
.lumen-project-screen .site-depth-section > article + article { border-left:1px solid rgba(255,255,255,.06); }
.atlas-project-screen .site-depth-section { background:#e7ece8; color:#1c382d; border-color:rgba(28,56,45,.08); }
.atlas-project-screen .site-depth-section > article + article { border-left:1px solid rgba(28,56,45,.07); }

/* LEXIA — despacho jurídico */
.lexia-project-screen { color:#1d1c1a; background:#f2efe8; }
.lexia-topline { display:flex; justify-content:space-between; gap:15px; padding:7px 24px; color:#756f65; background:#e9e5dc; font-size:5.8px; letter-spacing:.08em; text-transform:uppercase; }
.lexia-project-nav { min-height:52px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:0 25px; border-bottom:1px solid rgba(43,37,29,.09); }
.lexia-project-nav b { font-family:Georgia,serif; font-size:15px; letter-spacing:.08em; }.lexia-project-nav b span { color:#b08e4a; }
.lexia-project-nav > span { color:#6e675e; font-size:6.5px; text-transform:uppercase; letter-spacing:.11em; }
.lexia-project-nav button { padding:8px 11px; border:1px solid #2f2b25; background:#2f2b25; color:#fff; font-size:6px; }
.lexia-project-body { min-height:310px; display:grid; grid-template-columns:1.22fr .78fr; gap:28px; align-items:center; padding:34px 30px 28px; }
.lexia-tag { color:#a17f3f; font-size:6px; font-weight:900; letter-spacing:.17em; }
.lexia-copy h2 { margin:11px 0; font-family:Georgia,serif; font-size:32px; line-height:1.02; font-weight:500; letter-spacing:-.025em; }.lexia-copy h2 em { color:#9a7942; font-weight:400; }
.lexia-copy p { max-width:355px; margin:0; color:#6f685f; font-size:8px; line-height:1.65; }
.lexia-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }.lexia-actions button { padding:9px 12px; border:0; background:#2e2b26; color:#fff; font-size:7px; font-weight:800; }.lexia-actions span { color:#8a8175; font-size:6.5px; }
.lexia-proof { display:flex; gap:20px; margin-top:20px; }.lexia-proof span { display:grid; }.lexia-proof b { font-family:Georgia,serif; font-size:16px; font-weight:500; }.lexia-proof small { color:#8a8277; font-size:5.8px; text-transform:uppercase; letter-spacing:.08em; }
.lexia-practice { padding:20px; border:1px solid rgba(50,42,31,.10); background:rgba(255,255,255,.46); box-shadow:0 20px 40px rgba(67,54,35,.08); }
.lexia-practice-kicker { display:block; margin-bottom:9px; color:#9a7a44; font-size:6px; font-weight:900; letter-spacing:.14em; }
.lexia-practice a { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(50,42,31,.09); color:#39342d; font-family:Georgia,serif; font-size:12px; }.lexia-practice a:last-child{border-bottom:0}.lexia-practice a b{color:#a17f3f}
.lexia-lower { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(43,37,29,.09); background:#e7e2d8; }
.lexia-lower article { display:grid; gap:3px; padding:16px 22px; }.lexia-lower article+article{border-left:1px solid rgba(43,37,29,.08)}.lexia-lower span{color:#a17f3f;font-size:6px;font-weight:900}.lexia-lower b{font-family:Georgia,serif;font-size:11px}.lexia-lower small{color:#7d7468;font-size:6.5px}

/* PULSE — fitness boutique */
.pulse-project-screen { color:#f4ffe9; background:radial-gradient(circle at 78% 15%,rgba(202,255,67,.16),transparent 28%),linear-gradient(135deg,#0a0d0b,#101611 58%,#0a0c0b); }
.pulse-project-nav { min-height:50px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.07); }
.pulse-project-nav b { font-size:14px; letter-spacing:.08em; }.pulse-project-nav b span{color:#caff43}.pulse-project-nav > span{color:#7c887d;font-size:6px;text-transform:uppercase;letter-spacing:.12em}.pulse-project-nav button{padding:8px 11px;border:0;border-radius:999px;background:#caff43;color:#0b100c;font-size:6px;font-weight:900}
.pulse-project-body { min-height:310px; display:grid; grid-template-columns:1fr .96fr; gap:28px; align-items:center; padding:30px 28px; }
.pulse-tag{color:#caff43;font-size:6px;font-weight:900;letter-spacing:.18em}.pulse-copy h2{margin:10px 0;font-size:38px;line-height:.94;letter-spacing:-.045em;text-transform:uppercase}.pulse-copy h2 em{color:#caff43;font-style:normal}.pulse-copy p{max-width:320px;margin:0;color:#88938a;font-size:8px;line-height:1.6}.pulse-actions{display:flex;align-items:center;gap:11px;margin-top:16px}.pulse-actions button{padding:9px 12px;border:0;border-radius:7px;background:#caff43;color:#071008;font-size:7px;font-weight:900}.pulse-actions span{color:#6f7c71;font-size:6px}
.pulse-schedule{padding:14px;border:1px solid rgba(202,255,67,.14);border-radius:15px;background:rgba(255,255,255,.035)}.pulse-schedule-head{display:flex;justify-content:space-between;padding-bottom:8px;color:#8c998d;font-size:6px}.pulse-schedule-head b{color:#caff43}.pulse-schedule article{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}.pulse-schedule time{color:#caff43;font-size:7px;font-weight:900}.pulse-schedule article>div{display:grid}.pulse-schedule article b{font-size:8px}.pulse-schedule article small{color:#748075;font-size:6px}.pulse-schedule article>span{padding:5px 8px;border:1px solid rgba(202,255,67,.18);border-radius:999px;color:#b9ceaa;font-size:5.5px}
.pulse-lower{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:1px;border-top:1px solid rgba(255,255,255,.07);background:#0d120e}.pulse-lower>span{display:grid;padding:14px 20px}.pulse-lower>span+span{border-left:1px solid rgba(255,255,255,.06)}.pulse-lower b{font-size:10px}.pulse-lower small{color:#6f7b71;font-size:6px}.pulse-lower button{align-self:stretch;padding:0 20px;border:0;background:#caff43;color:#09100a;font-size:7px;font-weight:900}

/* MAREA — e-commerce */
.marea-project-screen { color:#342625; background:#fbf5f1; }
.marea-promo { padding:7px 20px; text-align:center; color:#fff; background:#b95756; font-size:5.5px; font-weight:900; letter-spacing:.12em; }
.marea-project-nav { min-height:54px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; padding:0 24px; border-bottom:1px solid rgba(52,38,37,.08); }
.marea-project-nav b{font-family:Georgia,serif;font-size:15px;letter-spacing:.12em}.marea-project-nav b span{color:#d8756f}.marea-project-nav>span{color:#80716c;font-size:6px;text-transform:uppercase;letter-spacing:.1em}.marea-project-nav>div{display:flex;gap:5px}.marea-project-nav button{padding:7px 8px;border:1px solid rgba(52,38,37,.12);background:#fff9f5;color:#5b4a46;font-size:5.5px}
.marea-project-body { min-height:316px; display:grid; grid-template-columns:.78fr 1.22fr; gap:25px; align-items:center; padding:30px 28px 24px; }
.marea-tag{color:#b95756;font-size:6px;font-weight:900;letter-spacing:.15em}.marea-copy h2{margin:10px 0;font-family:Georgia,serif;font-size:34px;line-height:.98;font-weight:500}.marea-copy h2 em{color:#c66560;font-weight:400}.marea-copy p{max-width:310px;margin:0;color:#806d68;font-size:8px;line-height:1.65}.marea-copy>button{margin-top:15px;padding:9px 12px;border:0;background:#3a2d2a;color:#fff;font-size:7px;font-weight:800}.marea-rating{display:flex;align-items:center;gap:7px;margin-top:14px}.marea-rating span{color:#b95756;font-size:8px;letter-spacing:.1em}.marea-rating small{color:#8f7e78;font-size:6px}
.marea-products{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.marea-products article{display:grid;gap:3px;padding:10px;border:1px solid rgba(52,38,37,.08);background:rgba(255,255,255,.56)}.marea-products small{color:#a0877f;font-size:5.5px;letter-spacing:.1em}.marea-products b{font-size:8px}.marea-products span{color:#b95756;font-size:7px;font-weight:900}.marea-bottle{position:relative;height:145px;margin-bottom:6px;overflow:hidden;background:linear-gradient(160deg,#ead4ca,#c67f73)}.marea-bottle.sand{background:linear-gradient(160deg,#eadfce,#c7a27a)}.marea-bottle.rose{background:linear-gradient(160deg,#efd8d6,#bd777b)}.marea-bottle::before{content:"";position:absolute;left:50%;bottom:15px;width:50px;height:88px;border-radius:8px 8px 13px 13px;transform:translateX(-50%);background:rgba(255,249,244,.88);box-shadow:0 14px 22px rgba(75,50,45,.12)}.marea-bottle::after{content:"MAREA";position:absolute;left:50%;bottom:54px;transform:translateX(-50%);color:#a55f5a;font-family:Georgia,serif;font-size:7px;letter-spacing:.08em}.marea-bottle i{position:absolute;z-index:2;left:50%;bottom:99px;width:28px;height:17px;border-radius:5px 5px 2px 2px;transform:translateX(-50%);background:#3e302d}
.marea-lower{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(52,38,37,.08);background:#f2e8e2}.marea-lower span{display:grid;padding:14px 20px}.marea-lower span+span{border-left:1px solid rgba(52,38,37,.08)}.marea-lower b{font-size:8px}.marea-lower small{color:#89756e;font-size:6px}

/* Modal V63: case study con desktop + móvil + paleta. */
.project-modal-dialog { width:min(1480px,96vw); }
.project-modal-head small.project-modal-sector { margin-top:3px; color:#7895aa; font-size:9px; }
.project-modal-controls { display:flex; align-items:center; gap:7px; }
.project-modal-nav { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.10); border-radius:11px; color:#c4d9e9; background:rgba(255,255,255,.04); font-size:15px; cursor:pointer; }
.project-modal-nav:hover,.project-modal-close:hover{border-color:rgba(var(--project-accent),.35);color:#fff;background:rgba(var(--project-accent),.08)}
.project-modal-case { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; }
.project-modal-aside { display:grid; gap:12px; position:sticky; top:0; }
.project-modal-aside>div { padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.028); }
.project-modal-mini-kicker { display:block; margin-bottom:7px; color:rgb(var(--project-accent)); font-size:7px; font-weight:900; letter-spacing:.14em; }
.project-modal-aside p { margin:0; color:#8ca7bb; font-size:10px; line-height:1.65; }
.project-modal-palette { display:flex; gap:7px; }
.project-modal-palette i { width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.13); }
.project-modal-mobile { min-height:310px; display:grid; place-items:center; overflow:hidden; }
.project-modal-mobile .portfolio-browser { width:210px !important; max-width:210px !important; border-radius:24px; transform:translateZ(0); box-shadow:0 22px 48px rgba(0,0,0,.34); }
.project-modal-mobile .portfolio-screen { min-height:360px; }
.project-modal-mobile .portfolio-browser-bar { grid-template-columns:40px 1fr 26px; padding-inline:8px; }
.project-modal-mobile .portfolio-url { padding:3px 8px; font-size:5.5px; }

/* Responsive real de los conceptos nuevos y de la segunda sección. */
@container (max-width:520px) {
  .site-depth-section { grid-template-columns:1fr; }
  .site-depth-section > article + article { border-left:0 !important; border-top:1px solid rgba(127,127,127,.10); }
  .lexia-topline { display:none; }
  .lexia-project-nav,.pulse-project-nav,.marea-project-nav { grid-template-columns:1fr auto; padding-inline:15px; gap:10px; }
  .lexia-project-nav>span,.pulse-project-nav>span,.marea-project-nav>span { display:none; }
  .lexia-project-body,.pulse-project-body,.marea-project-body { grid-template-columns:1fr; padding:22px 18px; }
  .lexia-copy h2,.marea-copy h2 { font-size:28px; }
  .pulse-copy h2 { font-size:31px; }
  .lexia-practice,.pulse-schedule { margin-top:5px; }
  .lexia-proof { gap:12px; }
  .lexia-lower,.marea-lower { grid-template-columns:1fr; }
  .lexia-lower article+article,.marea-lower span+span { border-left:0; border-top:1px solid rgba(127,127,127,.12); }
  .pulse-lower { grid-template-columns:1fr 1fr; }
  .pulse-lower button { min-height:42px; grid-column:1/-1; }
  .marea-products { grid-template-columns:repeat(3,1fr); gap:5px; }
  .marea-products article { padding:6px; }
  .marea-bottle { height:95px; }
  .marea-bottle::before { width:34px; height:60px; bottom:10px; }
  .marea-bottle::after { bottom:36px; font-size:5px; }
  .marea-bottle i { bottom:68px; width:19px; height:12px; }
}

@media (max-width:980px) {
  .project-modal-case { grid-template-columns:1fr; }
  .project-modal-aside { position:relative; grid-template-columns:1fr 1fr; }
  .project-modal-mobile { min-height:260px; }
}
@media (max-width:700px) {
  .project-modal-aside { grid-template-columns:1fr; }
  .project-modal-controls { gap:5px; }
  .project-modal-nav,.project-modal-close { width:34px; height:34px; }
}


/* =========================================================
   DN TECH — PREMIUM V64 / PORTFOLIO EXPERIENCE
   ========================================================= */
.page-web-projects .project-selector {
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
}
.page-web-projects .project-selector::-webkit-scrollbar { width:0; height:0; display:none; }
.page-web-projects .project-tab.is-star .project-tab-copy::after {
  content:"DEMO COMPLETA";
  width:max-content;
  margin-top:5px;
  padding:3px 6px;
  border:1px solid rgba(var(--project-accent),.17);
  border-radius:999px;
  color:rgb(var(--project-accent));
  font-size:5.8px;
  font-weight:900;
  letter-spacing:.11em;
  opacity:.84;
}
.project-device-dot.tablet { width:9px; height:12px; border-radius:2px; }
.portfolio-preview[data-device="tablet"] .portfolio-browser {
  max-width:760px;
  border-radius:25px;
  box-shadow:0 32px 74px rgba(0,0,0,.34),0 0 0 1px rgba(var(--project-accent),.07);
}
.project-preview-toolbar { flex-wrap:wrap; }
.project-demo-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  margin-left:auto;
  border:1px solid rgba(var(--project-accent),.24);
  border-radius:10px;
  color:#effaff;
  background:linear-gradient(135deg,rgba(var(--project-accent),.12),rgba(255,255,255,.025));
  font-size:9px;
  font-weight:850;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.project-demo-link:hover {
  transform:translateY(-2px);
  border-color:rgba(var(--project-accent),.48);
  background:rgba(var(--project-accent),.16);
  box-shadow:0 12px 26px rgba(0,0,0,.18),0 0 24px rgba(var(--project-accent),.08);
}

/* Más realismo en la interacción de cada concepto. */
.portfolio-preview .portfolio-screen button,
.portfolio-preview .portfolio-screen a,
.portfolio-preview .portfolio-screen article,
.portfolio-preview .portfolio-screen .atlas-price-card,
.portfolio-preview .portfolio-screen .nexus-dashboard,
.portfolio-preview .portfolio-screen .pulse-schedule {
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease;
}
.portfolio-preview .portfolio-screen button:hover { transform:translateY(-1px); filter:brightness(1.06); }
.portfolio-preview-aurea .aurea-project-art:hover { transform:translateY(-3px) scale(1.01); }
.portfolio-preview-motorlab .motor-grid span:hover { transform:translateY(-3px); border-color:rgba(255,93,47,.32); }
.portfolio-preview-nova .nova-cards span:hover { transform:translateY(-3px); box-shadow:0 14px 26px rgba(28,104,108,.10); }
.portfolio-preview-nexus .nexus-dashboard:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(56,39,140,.20); }
.portfolio-preview-lumen .lumen-menu-strip span:hover { transform:translateY(-3px); }
.portfolio-preview-atlas .atlas-price-card:hover { transform:translateY(-4px); box-shadow:0 18px 32px rgba(24,54,42,.14); }
.portfolio-preview-lexia .lexia-practice a:hover { transform:translateX(4px); }
.portfolio-preview-pulse .pulse-schedule article:hover { transform:translateX(3px); }
.portfolio-preview-marea .marea-products article:hover { transform:translateY(-5px); box-shadow:0 16px 30px rgba(89,50,48,.12); }

@keyframes nexusBarRise { from { transform:scaleY(.15); opacity:.5; } to { transform:scaleY(1); opacity:1; } }
.portfolio-preview-nexus.is-active .nexus-chart i { transform-origin:bottom; animation:nexusBarRise .55s cubic-bezier(.22,.8,.24,1) both; }
.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(2){animation-delay:.05s}.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(3){animation-delay:.10s}.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(4){animation-delay:.15s}.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(5){animation-delay:.20s}.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(6){animation-delay:.25s}.portfolio-preview-nexus.is-active .nexus-chart i:nth-child(7){animation-delay:.30s}
@keyframes lumenGlowDrift { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-10px,4px,0) scale(1.035)} }
.portfolio-preview-lumen.is-active .lumen-overlay { animation:lumenGlowDrift 6s ease-in-out infinite; }

/* Tablet container behavior: no parece solo un desktop estrechado. */
@container (max-width:760px) and (min-width:521px) {
  .aurea-project-body,.nova-project-body,.nexus-project-body,.atlas-project-body,.lexia-project-body,.pulse-project-body,.marea-project-body { gap:16px; padding-inline:20px; }
  .aurea-project-body h2,.nova-project-body h2,.nexus-copy h2,.lexia-copy h2,.marea-copy h2 { font-size:29px; }
  .pulse-copy h2 { font-size:32px; }
  .nexus-dashboard { transform:scale(.96); transform-origin:right center; }
  .marea-products { gap:6px; }
  .marea-bottle { height:115px; }
}

/* Modal: case study real. */
.project-modal-case { grid-template-columns:minmax(0,1fr) 315px; }
.project-modal-aside { max-height:calc(92vh - 92px); overflow:auto; padding-right:2px; scrollbar-width:none; }
.project-modal-aside::-webkit-scrollbar { display:none; }
.project-modal-aside>div { position:relative; overflow:hidden; }
.project-modal-aside>div::after {
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:rgba(var(--project-accent),.52);
  opacity:.65;
}
.project-modal-demo-link {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  border:1px solid rgba(var(--project-accent),.28);
  border-radius:12px;
  color:#f3fbff;
  background:linear-gradient(135deg,rgba(var(--project-accent),.17),rgba(255,255,255,.03));
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.project-modal-demo-link:hover { transform:translateY(-2px); background:rgba(var(--project-accent),.20); border-color:rgba(var(--project-accent),.48); }
.project-modal-action-block { padding:0 !important; border:0 !important; background:transparent !important; }
.project-modal-action-block::after { display:none; }

@media (max-width:980px) {
  .project-demo-link { margin-left:0; }
  .project-modal-case { grid-template-columns:1fr; }
  .project-modal-aside { max-height:none; }
}
@media (max-width:700px) {
  .project-device-switch { width:100%; justify-content:space-between; }
  .project-device-btn { flex:1; justify-content:center; }
  .project-demo-link { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-preview-nexus.is-active .nexus-chart i,.portfolio-preview-lumen.is-active .lumen-overlay { animation:none !important; }
}


/* =========================================================
   DN TECH — PREMIUM V68 / PORTFOLIO RENDERIZADO
   ========================================================= */
.page-web-projects .portfolio-browser{background:#08111c}
.portfolio-render-screen{position:relative;overflow:hidden;width:100%;background:#101722;aspect-ratio:1.44/1;isolation:isolate}
.project-render-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:1;transform:scale(1);transition:opacity .18s ease,transform .32s cubic-bezier(.22,.8,.24,1)}
.project-render-image.is-changing{opacity:.35;transform:scale(.997)}
.project-render-badge{position:absolute;right:10px;bottom:10px;z-index:2;padding:5px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#e9f7ff;background:rgba(4,12,22,.76);backdrop-filter:blur(8px);font-size:6px;font-weight:900;letter-spacing:.12em;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.portfolio-preview[data-device="tablet"] .portfolio-render-screen{aspect-ratio:900/1100}
.portfolio-preview[data-device="mobile"] .portfolio-render-screen{aspect-ratio:390/844}
.portfolio-preview[data-device="mobile"] .project-render-badge{right:8px;bottom:8px;font-size:5px}
.project-preview-toolbar .project-expand-btn{margin-left:auto}

.project-render-explorer{display:grid;gap:10px;min-width:0}
.project-render-explorer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:2px}
.project-render-page-switch,.project-render-modal-devices{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.025)}
.project-render-page-switch button,.project-render-modal-devices button{min-height:30px;padding:0 10px;border:0;border-radius:8px;color:#7f9aae;background:transparent;font:inherit;font-size:8px;font-weight:850;cursor:pointer;transition:color .18s ease,background .18s ease,box-shadow .18s ease}
.project-render-page-switch button.is-active,.project-render-modal-devices button.is-active{color:#f3fbff;background:rgba(var(--project-accent),.13);box-shadow:inset 0 0 0 1px rgba(var(--project-accent),.20)}
.project-render-canvas{display:grid;place-items:start center;overflow:hidden;min-height:420px;max-height:68vh;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:radial-gradient(circle at 50% 0%,rgba(var(--project-accent),.08),transparent 42%),#07111c;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.project-render-canvas img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;object-position:top center;transition:width .3s ease,border-radius .3s ease,box-shadow .3s ease}
.project-render-explorer[data-device="tablet"] .project-render-canvas img{width:min(72%,760px);border-radius:0 0 18px 18px;box-shadow:0 18px 45px rgba(0,0,0,.24)}
.project-render-explorer[data-device="mobile"] .project-render-canvas img{width:min(38%,390px);border-radius:0 0 24px 24px;box-shadow:0 20px 48px rgba(0,0,0,.32)}
.project-render-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 3px;color:#718da2;font-size:8px;line-height:1.5}
.project-render-caption span{color:rgb(var(--project-accent));font-size:7px;font-weight:900;letter-spacing:.12em}
.project-modal-mobile{min-height:290px;padding:8px;background:radial-gradient(circle at 50% 0%,rgba(var(--project-accent),.08),transparent 55%),rgba(0,0,0,.10);border-radius:13px}
.project-modal-mobile img{display:block;width:100%;max-width:205px;height:auto;margin:auto;border-radius:20px;box-shadow:0 18px 42px rgba(0,0,0,.34)}
.project-modal-render-note{padding:12px 13px;border:1px solid rgba(var(--project-accent),.18);border-radius:13px;color:#8ea8bb;background:rgba(var(--project-accent),.055);font-size:8px;line-height:1.55}

@media (max-width:860px){
  .project-render-canvas{min-height:340px;max-height:58vh}
  .project-render-explorer[data-device="tablet"] .project-render-canvas img{width:min(90%,760px)}
  .project-render-explorer[data-device="mobile"] .project-render-canvas img{width:min(58%,390px)}
  .project-render-caption{align-items:flex-start;flex-direction:column;gap:3px}
}
@media (max-width:560px){
  .project-render-explorer-toolbar{align-items:stretch;flex-direction:column}
  .project-render-page-switch,.project-render-modal-devices{width:100%}
  .project-render-page-switch button,.project-render-modal-devices button{flex:1;padding-inline:6px}
  .project-render-canvas{min-height:300px;max-height:52vh;border-radius:14px}
  .project-render-explorer[data-device="mobile"] .project-render-canvas img{width:min(76%,390px)}
}
@media (prefers-reduced-motion:reduce){.project-render-image,.project-render-canvas img{transition:none!important}}

/* =========================================================
   DN TECH — PREMIUM V69 / PORTFOLIO EXPLORER
   ========================================================= */
.page-web-projects .web-projects-subtitle .web-projects-concept-note{
  display:block;
  margin-top:8px;
  color:#6f8ca3;
  font-size:10px;
  line-height:1.55;
}
.page-web-projects .web-projects-intro-counter{
  min-width:112px;
  color:rgb(var(--project-accent));
  transition:color .28s ease;
}

/* Selector: compacto cuando está inactivo, más informativo al activarse. */
.page-web-projects .project-tab{
  min-height:70px;
  transition:min-height .26s ease,border-color .24s ease,background .24s ease,transform .24s ease,box-shadow .24s ease;
}
.page-web-projects .project-tab.is-active{
  min-height:84px;
  box-shadow:0 18px 38px rgba(0,0,0,.18),inset 0 0 0 1px rgba(var(--project-accent),.06);
}
.project-tab-style{
  display:block;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  color:rgba(var(--project-accent),.86);
  font-size:6.5px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.06em;
  opacity:0;
  transform:translateY(-2px);
  transition:max-height .24s ease,margin-top .24s ease,opacity .2s ease,transform .24s ease;
}
.project-tab.is-active .project-tab-style{
  max-height:18px;
  margin-top:5px;
  opacity:1;
  transform:none;
}

/* Identidad visible de cada concepto antes de la pantalla. */
.project-preview-identity{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:9px;
  padding:0 2px;
}
.project-preview-identity-copy{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}
.project-preview-identity-copy>span{
  color:rgb(var(--project-accent));
  font-size:7px;
  font-weight:950;
  letter-spacing:.13em;
}
.project-preview-identity-copy>strong{
  color:#eef8ff;
  font-size:13px;
  letter-spacing:.01em;
}
.project-preview-identity-copy>small{
  color:#7895aa;
  font-size:8px;
}
.project-preview-palette{display:flex;align-items:center;gap:5px;flex:none}
.project-preview-palette i{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--swatch);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 2px rgba(255,255,255,.025);
}

/* Herramientas de la demo: responsive + página + recorrido + ampliación. */
.project-preview-toolbar{
  gap:8px;
  margin-bottom:10px;
}
.project-page-switch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(1,9,17,.38);
}
.project-page-switch button,
.project-tour-btn{
  border:0;
  color:#7894a9;
  background:transparent;
  font:inherit;
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.project-page-switch button{
  min-height:31px;
  padding:0 9px;
  border-radius:8px;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.project-page-switch button:hover{color:#dcefff}
.project-page-switch button.is-active{
  color:#effaff;
  background:rgba(var(--project-accent),.10);
  box-shadow:inset 0 0 0 1px rgba(var(--project-accent),.16);
}
.project-tour-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  margin-left:auto;
  padding:0 11px;
  border:1px solid rgba(var(--project-accent),.13);
  border-radius:10px;
  color:#9cb6c8;
  background:rgba(255,255,255,.018);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.project-tour-btn:hover{
  color:#f1fbff;
  border-color:rgba(var(--project-accent),.34);
  background:rgba(var(--project-accent),.08);
  transform:translateY(-1px);
}
.project-tour-btn.is-running{
  color:rgb(var(--project-accent));
  border-color:rgba(var(--project-accent),.34);
  background:rgba(var(--project-accent),.08);
}
.project-preview-toolbar .project-expand-btn{margin-left:0}

/* La pantalla ahora es un visor desplazable de un render FULL PAGE. */
.page-web-projects .portfolio-browser{
  position:relative;
  overflow:hidden;
  background:#08111c;
}
.portfolio-render-screen{
  position:relative;
  width:100%;
  height:540px;
  aspect-ratio:auto !important;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  scroll-behavior:smooth;
  background:#101722;
  cursor:ns-resize;
  isolation:isolate;
}
.portfolio-render-screen::-webkit-scrollbar{display:none;width:0;height:0}
.project-render-image{
  display:block;
  width:100%;
  height:auto !important;
  max-width:none;
  object-fit:initial !important;
  object-position:top center;
  transform-origin:top center;
  transition:opacity .20s ease,transform .30s cubic-bezier(.22,.8,.24,1),filter .20s ease;
}
.project-render-image.is-changing{
  opacity:.18;
  transform:translateY(5px) scale(.998);
  filter:blur(1px);
}
.portfolio-preview[data-device="tablet"] .portfolio-render-screen,
.portfolio-preview[data-device="mobile"] .portfolio-render-screen{
  height:560px;
  aspect-ratio:auto !important;
}
.project-render-badge{
  right:8px;
  top:8px;
  bottom:auto;
  padding:4px 7px;
  color:#bdd2e1;
  background:rgba(4,12,22,.52);
  border-color:rgba(255,255,255,.09);
  font-size:5px;
  letter-spacing:.11em;
  opacity:.42;
  transition:opacity .18s ease;
}
.portfolio-browser:hover .project-render-badge{opacity:.8}
.project-scroll-progress{
  position:absolute;
  z-index:7;
  top:50px;
  right:7px;
  width:3px;
  height:72px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  pointer-events:none;
}
.project-scroll-progress i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:rgb(var(--project-accent));
  transform:scaleY(.08);
  transform-origin:top;
  box-shadow:0 0 12px rgba(var(--project-accent),.5);
  transition:transform .08s linear;
}
.project-scroll-hint{
  position:absolute;
  z-index:7;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  color:#d4e5f1;
  background:rgba(4,12,22,.70);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  font-size:6px;
  font-weight:850;
  letter-spacing:.03em;
  pointer-events:none;
  opacity:.86;
  transition:opacity .2s ease,transform .2s ease,color .2s ease;
}
.project-scroll-hint>span{color:rgb(var(--project-accent));font-size:9px}
.project-scroll-hint.is-scrolled{opacity:.26;transform:translateY(2px)}
.project-scroll-hint.is-end{opacity:.74;color:#e6f4fc}

/* Modal casi a pantalla completa + comparador responsive. */
.project-modal{padding:10px}
.project-modal-dialog{
  width:min(1680px,98vw);
  max-height:96vh;
  padding:14px;
  border-radius:20px;
}
.project-modal-case{grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.project-render-canvas{
  display:block;
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:radial-gradient(circle at 50% 0%,rgba(var(--project-accent),.07),transparent 42%),#07111c;
}
.project-render-single{
  height:min(68vh,720px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--project-accent),.45) rgba(255,255,255,.05);
  border-radius:17px;
}
.project-render-single img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.project-render-explorer[data-device="tablet"] .project-render-single,
.project-render-explorer[data-device="mobile"] .project-render-single{
  display:grid;
  justify-items:center;
  background:rgba(0,0,0,.12);
}
.project-render-explorer[data-device="tablet"] .project-render-single img{width:min(72%,900px) !important}
.project-render-explorer[data-device="mobile"] .project-render-single img{width:min(38%,390px) !important}
.project-render-compare{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(180px,.72fr) minmax(120px,.36fr);
  gap:10px;
  padding:10px;
}
.project-render-compare[hidden],.project-render-single[hidden]{display:none !important}
.project-render-compare figure{
  min-width:0;
  margin:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:6px;
}
.project-render-compare figcaption{
  padding-left:2px;
  color:#7793a8;
  font-size:6px;
  font-weight:900;
  letter-spacing:.13em;
}
.project-render-compare-scroll{
  height:min(62vh,660px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(0,0,0,.12);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.project-render-compare-scroll::-webkit-scrollbar{display:none}
.project-render-compare-scroll img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.project-render-caption{padding:0 2px}
.project-render-caption span{white-space:nowrap}
.project-modal-mobile{
  height:290px;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.project-modal-mobile::-webkit-scrollbar{display:none}
.project-modal-mobile img{
  width:100%;
  max-width:205px;
  height:auto !important;
  margin:0 auto;
  border-radius:18px;
}

@media (max-width:1120px){
  .project-preview-toolbar{align-items:flex-start}
  .project-tour-btn{margin-left:0}
  .project-modal-case{grid-template-columns:1fr}
  .project-modal-aside{position:relative;grid-template-columns:repeat(2,1fr);max-height:none}
}
@media (max-width:860px){
  .project-preview-identity{align-items:flex-start;flex-direction:column;gap:8px}
  .project-preview-identity-copy{flex-wrap:wrap}
  .project-page-switch{order:3;width:100%}
  .project-page-switch button{flex:1}
  .project-tour-btn{flex:1}
  .project-expand-btn{flex:1;justify-content:center}
  .portfolio-render-screen,.portfolio-preview[data-device="tablet"] .portfolio-render-screen,.portfolio-preview[data-device="mobile"] .portfolio-render-screen{height:520px}
  .project-render-explorer[data-device="tablet"] .project-render-single img{width:min(88%,900px) !important}
  .project-render-explorer[data-device="mobile"] .project-render-single img{width:min(58%,390px) !important}
  .project-render-compare{grid-template-columns:1fr .62fr .42fr}
}
@media (max-width:620px){
  .page-web-projects .web-projects-subtitle .web-projects-concept-note{font-size:9px}
  .project-preview-toolbar{display:grid;grid-template-columns:1fr 1fr}
  .project-device-switch,.project-page-switch{grid-column:1/-1;width:100%}
  .project-device-btn,.project-page-switch button{flex:1;justify-content:center}
  .project-tour-btn,.project-expand-btn{width:100%;margin:0}
  .project-preview-identity-copy>small{width:100%}
  .portfolio-render-screen,.portfolio-preview[data-device="tablet"] .portfolio-render-screen,.portfolio-preview[data-device="mobile"] .portfolio-render-screen{height:470px}
  .project-modal{padding:4px}
  .project-modal-dialog{width:100%;max-height:98vh;padding:9px;border-radius:15px}
  .project-modal-aside{grid-template-columns:1fr}
  .project-render-modal-devices{width:100%}
  .project-render-modal-devices button{flex:1;padding-inline:5px}
  .project-render-single{height:58vh}
  .project-render-explorer[data-device="mobile"] .project-render-single img{width:min(82%,390px) !important}
  .project-render-compare{grid-template-columns:1fr;max-height:62vh;overflow:auto}
  .project-render-compare-scroll{height:320px}
  .project-render-caption{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .project-tab-style,.project-tab,.project-render-image,.project-scroll-hint,.project-tour-btn{transition:none !important}
  .portfolio-render-screen{scroll-behavior:auto}
}

/* =========================================================
   DN TECH — PREMIUM V70 / PORTFOLIO REFINEMENT
   ========================================================= */
.page-web-projects .web-projects-heading{
  max-width:980px;
}
.page-web-projects .web-projects-title{
  letter-spacing:-.045em;
}
.page-web-projects .web-projects-intro{
  margin-top:18px;
}

/* Selector más limpio: nombre + sector + acento, sin sobrecargar el activo. */
.page-web-projects .project-tab,
.page-web-projects .project-tab.is-active{
  min-height:72px;
}
.page-web-projects .project-tab.is-active{
  transform:translateX(2px);
}
.page-web-projects .project-tab-copy strong{
  letter-spacing:.035em;
}
.project-tab-style{display:none !important}

/* La identidad y las herramientas se leen como dos capas distintas. */
.project-preview-identity{
  margin-bottom:8px;
  min-height:26px;
}
.project-preview-identity-copy>strong{
  font-size:14px;
}
.project-preview-identity-copy>small{
  color:#7792a6;
  font-size:8.5px;
}
.project-preview-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
}
.project-preview-toolbar .project-device-switch{
  margin-right:auto;
}
.project-preview-toolbar .project-page-switch{
  margin-left:auto;
}
.project-preview-toolbar .project-expand-btn{
  flex:none;
}
.project-device-switch,
.project-page-switch{
  background:rgba(0,7,13,.38);
}
.project-page-switch button{
  min-width:58px;
}
.project-expand-btn{
  min-height:34px;
  padding-inline:12px;
}

/* Visor más alto y más inmersivo. */
.portfolio-render-screen,
.portfolio-preview[data-device="tablet"] .portfolio-render-screen,
.portfolio-preview[data-device="mobile"] .portfolio-render-screen{
  height:590px;
}
.project-render-badge{display:none !important}

/* Pista temporal: aparece al entrar y se retira sola. */
.project-scroll-hint{
  opacity:0;
  transform:translateY(5px);
  visibility:hidden;
  right:50%;
  bottom:16px;
  translate:50% 0;
  padding:7px 11px;
  font-size:6.5px;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.project-scroll-hint.is-visible{
  opacity:.92;
  transform:none;
  visibility:visible;
}
.project-scroll-hint.is-scrolled,
.project-scroll-hint.is-end{
  opacity:0;
}

/* Volver arriba solo cuando aporta valor. */
.project-backtop-btn{
  position:absolute;
  z-index:9;
  top:52px;
  right:16px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:#dcecf6;
  background:rgba(4,12,22,.78);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(0,0,0,.24),0 0 0 1px rgba(var(--project-accent),.04);
  font-size:14px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px) scale(.94);
  transition:opacity .18s ease,visibility .18s ease,transform .2s ease,border-color .18s ease,background .18s ease;
}
.project-backtop-btn:hover{
  border-color:rgba(var(--project-accent),.42);
  background:rgba(var(--project-accent),.12);
}
.project-backtop-btn.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* CTA contextual solo cuando el usuario llega al final de la demo. */
.project-end-cta{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:16px;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:calc(100% - 34px);
  padding:8px 9px 8px 13px;
  border:1px solid rgba(var(--project-accent),.22);
  border-radius:14px;
  color:#bdd1de;
  background:rgba(3,11,20,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 28px rgba(var(--project-accent),.07);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,8px) scale(.985);
  transition:opacity .22s ease,visibility .22s ease,transform .24s cubic-bezier(.22,.8,.24,1);
}
.project-end-cta.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
}
.project-end-cta>span{
  font-size:7.5px;
  font-weight:750;
}
.project-end-cta>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:9px;
  color:#041019;
  background:rgb(var(--project-accent));
  font-size:7.5px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.project-end-cta>a b{
  font-size:10px;
  transition:transform .18s ease;
}
.project-end-cta>a:hover b{transform:translateX(2px)}

/* Hover preview: orientación rápida sin abrir nada ni cargar código fuente. */
.project-hover-preview{
  position:fixed;
  z-index:120;
  width:250px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateX(-7px) scale(.985);
  transition:opacity .16s ease,visibility .16s ease,transform .2s cubic-bezier(.22,.8,.24,1);
}
.project-hover-preview.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.project-hover-preview-frame{
  overflow:hidden;
  padding:6px;
  border:1px solid rgba(var(--project-accent),.20);
  border-radius:15px;
  background:rgba(4,13,23,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 40px rgba(var(--project-accent),.05);
}
.project-hover-preview img{
  display:block;
  width:100%;
  height:128px;
  border-radius:10px;
  object-fit:cover;
  object-position:top center;
  background:#0a1118;
}
.project-hover-preview span{
  display:block;
  padding:8px 5px 4px;
  color:#c9dce8;
  font-size:7px;
  font-weight:800;
  letter-spacing:.02em;
}

/* Modal convertido en case study visual, con dirección creativa visible y navegación completa. */
.project-modal-head{
  margin-bottom:8px;
}
.project-modal-summary{
  display:grid;
  grid-template-columns:auto minmax(180px,.58fr) minmax(260px,1fr);
  align-items:center;
  gap:12px 18px;
  margin-bottom:12px;
  padding:11px 14px;
  border:1px solid rgba(var(--project-accent),.13);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(var(--project-accent),.07),rgba(255,255,255,.014));
}
.project-modal-summary>span{
  color:rgb(var(--project-accent));
  font-size:6.5px;
  font-weight:950;
  letter-spacing:.14em;
}
.project-modal-summary>strong{
  color:#eef8ff;
  font-size:11px;
}
.project-modal-summary>p{
  margin:0;
  color:#829db0;
  font-size:8px;
  line-height:1.55;
}
.project-modal-footer-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.project-modal-project-link{
  display:grid;
  gap:3px;
  min-height:50px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  color:#a6bdcc;
  background:rgba(255,255,255,.018);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.project-modal-project-link.next{text-align:right}
.project-modal-project-link>span{
  color:#617d91;
  font-size:5.8px;
  font-weight:900;
  letter-spacing:.14em;
}
.project-modal-project-link>strong{
  color:#dcebf4;
  font-size:9px;
}
.project-modal-project-link:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--project-accent),.28);
  background:rgba(var(--project-accent),.055);
}

/* El cambio de identidad ambiental acompaña al proyecto sin hacerse protagonista. */
.page-web-projects .web-projects-view::before,
.page-web-projects .project-preview-stage,
.page-web-projects .web-projects-intro{
  transition:border-color .28s ease,background .32s ease,box-shadow .32s ease;
}

@media (max-width:1120px){
  .project-preview-toolbar{
    flex-wrap:wrap;
  }
  .project-preview-toolbar .project-device-switch{
    margin-right:0;
  }
  .project-preview-toolbar .project-page-switch{
    margin-left:auto;
  }
  .project-modal-summary{
    grid-template-columns:auto 1fr;
  }
  .project-modal-summary>p{
    grid-column:1/-1;
  }
}
@media (max-width:860px){
  .portfolio-render-screen,
  .portfolio-preview[data-device="tablet"] .portfolio-render-screen,
  .portfolio-preview[data-device="mobile"] .portfolio-render-screen{
    height:540px;
  }
  .project-preview-toolbar{
    display:grid;
    grid-template-columns:1fr auto;
  }
  .project-device-switch{
    grid-column:1/-1;
  }
  .project-preview-toolbar .project-page-switch{
    margin:0;
  }
  .project-hover-preview{display:none !important}
  .project-modal-summary{
    grid-template-columns:1fr;
  }
  .project-modal-summary>p{grid-column:auto}
}
@media (max-width:620px){
  .page-web-projects .project-tab,
  .page-web-projects .project-tab.is-active{
    min-height:68px;
  }
  .portfolio-render-screen,
  .portfolio-preview[data-device="tablet"] .portfolio-render-screen,
  .portfolio-preview[data-device="mobile"] .portfolio-render-screen{
    height:480px;
  }
  .project-preview-toolbar{
    grid-template-columns:1fr 1fr;
    padding:7px;
  }
  .project-device-switch,
  .project-page-switch{
    grid-column:1/-1;
  }
  .project-expand-btn{
    grid-column:1/-1;
    width:100%;
  }
  .project-end-cta{
    gap:8px;
    width:calc(100% - 24px);
    padding:7px;
    border-radius:12px;
  }
  .project-end-cta>span{
    flex:1;
    font-size:6.6px;
  }
  .project-end-cta>a{
    padding:7px 8px;
    font-size:6.6px;
  }
  .project-backtop-btn{
    top:48px;
    right:11px;
    width:32px;
    height:32px;
  }
  .project-modal-footer-nav{
    grid-template-columns:1fr;
  }
  .project-modal-project-link.next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .project-backtop-btn,.project-end-cta,.project-hover-preview,.project-modal-project-link{transition:none !important}
}

/* =========================================================
   DN TECH — PREMIUM V71 / NATURAL SCROLL HANDOFF
   El scroll de los visores y del selector se libera hacia la página
   al alcanzar sus extremos para evitar zonas que "atrapen" la rueda.
   ========================================================= */
.page-web-projects .project-selector,
.page-web-projects .portfolio-render-screen{
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto !important;
}

/* Un feedback casi imperceptible en los extremos, sin añadir controles. */
.page-web-projects .portfolio-browser::after{
  content:"";
  position:absolute;
  z-index:7;
  left:14px;
  right:14px;
  bottom:0;
  height:18px;
  pointer-events:none;
  opacity:.42;
  background:linear-gradient(to top,rgba(2,9,16,.34),transparent);
  transition:opacity .2s ease;
}
.page-web-projects .portfolio-browser.is-at-bottom::after{opacity:0}
.page-web-projects .portfolio-browser.is-at-top .project-scroll-progress i{
  opacity:.58;
}

/* En pantallas táctiles dejamos el encadenado nativo del navegador. */
@media (hover:none),(pointer:coarse){
  .page-web-projects .project-selector,
  .page-web-projects .portfolio-render-screen{
    overscroll-behavior-y:auto !important;
  }
}

/* =========================================================
   DN TECH — PREMIUM V72 / PROJECTS FINAL POLISH
   ========================================================= */

/* Selector: scroll independiente, sin scroll-chaining hacia la página. */
.page-web-projects .project-selector{
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:contain !important;
  scroll-behavior:smooth;
  transition:mask-image .18s ease,-webkit-mask-image .18s ease;
}
.page-web-projects .project-selector.can-scroll-after:not(.can-scroll-before){
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.page-web-projects .project-selector.can-scroll-before:not(.can-scroll-after){
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 100%);
}
.page-web-projects .project-selector.can-scroll-before.can-scroll-after{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}

/* El visor mantiene el handoff natural al documento en sus extremos. */
.page-web-projects .portfolio-render-screen{
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:auto !important;
  scrollbar-gutter:stable;
}

/* Estados activos algo más claros sin aumentar el ruido visual. */
.page-web-projects .project-device-btn.is-active,
.page-web-projects .project-page-switch button.is-active{
  color:#f5fbff;
  border-color:rgba(var(--project-accent),.30);
  background:linear-gradient(180deg,rgba(var(--project-accent),.17),rgba(var(--project-accent),.09));
  box-shadow:inset 0 0 0 1px rgba(var(--project-accent),.10),0 6px 18px rgba(var(--project-accent),.06);
}
.page-web-projects .project-device-btn:focus-visible,
.page-web-projects .project-page-switch button:focus-visible,
.page-web-projects .project-expand-btn:focus-visible,
.page-web-projects .project-tab:focus-visible,
.page-web-projects .project-backtop-btn:focus-visible,
.page-web-projects .project-modal-project-link:focus-visible{
  outline:2px solid rgba(var(--project-accent),.82);
  outline-offset:3px;
}

/* El hover del selector recoge el acento de cada concepto con mucha sutileza. */
.page-web-projects .project-tab:not(.is-active):hover{
  border-color:rgba(var(--project-accent),.18);
  background:linear-gradient(135deg,rgba(var(--project-accent),.045),rgba(255,255,255,.025));
}

/* Menos trabajo de pintura fuera de pantalla en una página con muchos renders. */
.page-web-projects .portfolio-preview[hidden],
.page-web-projects .project-insight-card{
  content-visibility:auto;
}
.page-web-projects .project-render-image{
  image-rendering:auto;
}

/* Tablet: convertimos el selector en carrusel horizontal en vez de una columna extensa. */
@media (max-width:860px){
  .page-web-projects .web-projects-layout{
    grid-template-columns:1fr;
  }
  .page-web-projects .project-selector{
    display:flex;
    align-items:stretch;
    gap:9px;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 10px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:none !important;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .page-web-projects .project-selector.can-scroll-after:not(.can-scroll-before){
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .page-web-projects .project-selector.can-scroll-before:not(.can-scroll-after){
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
  }
  .page-web-projects .project-selector.can-scroll-before.can-scroll-after{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  }
  .page-web-projects .project-tab,
  .page-web-projects .project-tab.is-active{
    flex:0 0 228px;
    min-height:68px;
    scroll-snap-align:center;
  }
  .page-web-projects .project-selector-note{
    flex:0 0 270px;
    margin-top:0;
  }
}

@media (max-width:620px){
  .page-web-projects .web-projects-title{
    font-size:clamp(40px,12vw,56px);
    line-height:.98;
  }
  .page-web-projects .web-projects-intro{
    gap:10px;
    padding:13px 14px;
  }
  .page-web-projects .project-tab,
  .page-web-projects .project-tab.is-active{
    flex-basis:205px;
  }
  .page-web-projects .project-selector-note{
    flex-basis:245px;
  }
  .page-web-projects .project-preview-identity{
    align-items:flex-start;
  }
  .page-web-projects .project-preview-palette{
    gap:4px;
  }
  .page-web-projects .project-preview-palette i{
    width:10px;
    height:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-web-projects .project-selector{scroll-behavior:auto}
}

/* =========================================================
   DN TECH — PREMIUM V73 / MOBILE NAVIGATION
   Drawer táctil, submenús en acordeón y scroll del fondo bloqueado.
   ========================================================= */
.mobile-nav-backdrop { display:none; }
.mobile-nav-cta,.nav-accordion-toggle { display:none; }

@media (max-width:860px) {
  html.mobile-nav-open,
  body.mobile-nav-open { overflow:hidden; }

  .site-header { z-index:1200; }
  .nav-wrap { position:relative; }

  .mobile-nav-backdrop {
    display:block;
    position:fixed;
    inset:var(--mobile-nav-top,68px) 0 0;
    z-index:1180;
    width:100%;
    padding:0;
    border:0;
    background:rgba(0,6,13,.58);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .mobile-nav-backdrop.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .menu-toggle {
    position:relative;
    z-index:1225;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .main-nav {
    display:flex;
    position:fixed;
    top:var(--mobile-nav-top,68px);
    right:0;
    bottom:0;
    left:auto;
    z-index:1220;
    width:min(92vw,420px);
    max-height:none;
    margin:0;
    padding:14px 16px max(20px,env(safe-area-inset-bottom));
    gap:0;
    flex-direction:column;
    align-items:stretch;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    background:
      radial-gradient(circle at 100% 0%,rgba(41,182,246,.08),transparent 34%),
      linear-gradient(180deg,rgba(5,16,29,.995),rgba(4,12,22,.995));
    border-top:1px solid rgba(104,212,255,.08);
    border-left:1px solid rgba(104,212,255,.10);
    box-shadow:-24px 20px 60px rgba(0,0,0,.34);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    backdrop-filter:blur(24px) saturate(140%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(105%,0,0);
    transition:transform .28s cubic-bezier(.2,.72,.22,1),opacity .2s ease,visibility .28s ease;
  }
  .main-nav.open {
    display:flex;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }

  .main-nav > .nav-link,
  .nav-services-menu > .nav-link,
  .nav-web-menu > .nav-link {
    display:flex;
    align-items:center;
    width:100%;
    min-height:52px;
    padding:0 13px;
    margin:0;
    border:0;
    border-radius:12px;
    color:#d5e2ed;
    font-size:14px;
    font-weight:720;
    line-height:1.25;
    transform:none;
  }
  .main-nav > .nav-link { border-bottom:1px solid rgba(255,255,255,.045); border-radius:0; }
  .main-nav > .nav-link:hover,
  .main-nav > .nav-link:focus-visible,
  .main-nav > .nav-link.active,
  .nav-services-menu > .nav-link:hover,
  .nav-services-menu > .nav-link:focus-visible,
  .nav-web-menu > .nav-link:hover,
  .nav-web-menu > .nav-link:focus-visible {
    color:#fff;
    background:rgba(104,212,255,.055);
  }
  .main-nav .nav-link::before,
  .main-nav .nav-link::after { display:none !important; }

  .nav-services-menu,
  .nav-web-menu {
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    width:100%;
    align-items:center;
    align-self:auto;
    border-bottom:1px solid rgba(255,255,255,.045);
  }
  .nav-services-menu > .nav-link,
  .nav-web-menu > .nav-link { grid-column:1; min-width:0; }
  .nav-services-menu > .nav-link .nav-submenu-caret,
  .nav-web-menu > .nav-link .nav-submenu-caret { display:none !important; }

  .nav-accordion-toggle {
    display:grid;
    grid-column:2;
    grid-row:1;
    place-items:center;
    width:40px;
    height:40px;
    justify-self:end;
    padding:0;
    border:1px solid rgba(104,212,255,.10);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    color:#91cce5;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
  }
  .nav-accordion-toggle:hover,
  .nav-accordion-toggle:focus-visible {
    color:#dff7ff;
    background:rgba(104,212,255,.075);
    border-color:rgba(104,212,255,.22);
    outline:none;
  }
  .nav-accordion-toggle:focus-visible { box-shadow:0 0 0 2px rgba(41,182,246,.24); }
  .nav-accordion-icon {
    width:8px;
    height:8px;
    border-right:1.7px solid currentColor;
    border-bottom:1.7px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .22s cubic-bezier(.2,.72,.22,1);
  }
  .mobile-submenu-open > .nav-accordion-toggle .nav-accordion-icon {
    transform:translateY(2px) rotate(225deg);
  }

  .nav-services-menu > .nav-submenu,
  .nav-web-menu > .nav-submenu {
    display:grid;
    grid-column:1 / -1;
    position:static;
    width:100%;
    max-height:0;
    margin:0;
    padding:0 6px 0 14px;
    gap:3px;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none !important;
    transition:max-height .3s cubic-bezier(.2,.72,.22,1),opacity .18s ease,padding .25s ease,visibility .25s ease;
  }
  .nav-services-menu.mobile-submenu-open > .nav-submenu,
  .nav-web-menu.mobile-submenu-open > .nav-submenu {
    max-height:340px;
    padding-top:2px;
    padding-bottom:11px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-submenu::before { display:none !important; }
  .nav-submenu-link {
    min-height:48px;
    padding:9px 11px;
    border-radius:11px;
    transform:none !important;
  }
  .nav-submenu-title { font-size:12.2px; }
  .nav-submenu-copy { margin-top:2px; font-size:9.4px; line-height:1.35; }

  .mobile-nav-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    margin-top:16px;
    padding:0 16px;
    border:1px solid rgba(104,212,255,.18);
    border-radius:13px;
    color:#06111e;
    background:linear-gradient(135deg,#2495ff,#20b7f5);
    box-shadow:0 12px 26px rgba(21,137,220,.20);
    font-size:13px;
    font-weight:850;
  }

  .site-header.menu-open .menu-toggle {
    background:rgba(104,212,255,.085);
    border-color:rgba(104,212,255,.24);
  }
}

@media (max-width:480px) {
  .main-nav {
    width:100%;
    border-left:0;
    padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  }
  .mobile-nav-backdrop { background:rgba(0,6,13,.34); }
}

@media (prefers-reduced-motion:reduce) {
  .main-nav,.mobile-nav-backdrop,.nav-submenu,.nav-accordion-icon { transition:none !important; }
}

/* =========================================================
   DN TECH — PREMIUM V74 / MOBILE NAV FIX
   Evita que el drawer fixed quede contenido por el backdrop-filter
   del header en navegadores móviles. El panel se ancla al nav-wrap
   y ocupa el alto restante del viewport.
   ========================================================= */
@media (max-width:860px) {
  .main-nav {
    position:absolute;
    top:100%;
    right:calc((100vw - 100%) / -2);
    bottom:auto;
    left:auto;
    height:calc(100vh - var(--mobile-nav-top,68px));
    height:calc(100dvh - var(--mobile-nav-top,68px));
    max-height:calc(100vh - var(--mobile-nav-top,68px));
    max-height:calc(100dvh - var(--mobile-nav-top,68px));
  }
}

@media (max-width:480px) {
  .main-nav {
    width:100vw;
  }
}

/* =========================================================
   DN TECH — PREMIUM V76 / MOBILE NAV POSITION + SHARP FIX
   El drawer vive fuera del header y queda fijado al viewport justo
   debajo de la cabecera. El fondo puede difuminarse; el panel no.
   ========================================================= */
@media (max-width:860px) {
  .main-nav.mobile-nav-portal {
    position:fixed !important;
    top:var(--mobile-nav-top,68px) !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    z-index:1220;
    width:min(92vw,420px);
    height:calc(100vh - var(--mobile-nav-top,68px));
    height:calc(100dvh - var(--mobile-nav-top,68px));
    max-height:calc(100vh - var(--mobile-nav-top,68px));
    max-height:calc(100dvh - var(--mobile-nav-top,68px));
    margin:0 !important;
    overflow-x:hidden;
    overflow-y:auto;
    background:
      radial-gradient(circle at 100% 0%,rgba(41,182,246,.075),transparent 34%),
      linear-gradient(180deg,#06111f 0%,#040c16 100%);
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    isolation:isolate;
    will-change:transform,opacity;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
  }

  .main-nav.mobile-nav-portal::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(104,212,255,.018),transparent 28%);
  }

  .main-nav.mobile-nav-portal,
  .main-nav.mobile-nav-portal * {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

@media (max-width:480px) {
  .main-nav.mobile-nav-portal {
    width:100vw;
    border-left:0;
  }
}

/* =========================================================
   DN TECH — PREMIUM V77 / MOBILE COMPARE NATURAL FLOW
   En móvil, Comparar deja de usar tres scrolls anidados. El modal
   se convierte en una secuencia natural: Escritorio → Tablet → Móvil.
   ========================================================= */
@media (max-width:620px){
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-canvas{
    display:block;
    min-height:0;
    max-height:none;
    overflow:visible;
    border-color:rgba(255,255,255,.08);
    background:radial-gradient(circle at 50% 0%,rgba(var(--project-accent),.06),transparent 28%),#07111c;
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    width:100%;
    max-height:none;
    overflow:visible;
    padding:14px 10px 22px;
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figure{
    display:grid;
    grid-template-rows:auto auto;
    justify-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    margin:0;
    scroll-margin-top:14px;
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figure + figure{
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figcaption{
    justify-self:start;
    width:100%;
    padding:0 4px;
    color:rgba(var(--project-accent),.92);
    font-size:8px;
    letter-spacing:.15em;
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare-scroll{
    height:auto;
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
    margin-inline:auto;
    scrollbar-width:none;
    border-radius:16px;
    background:rgba(0,0,0,.14);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare-scroll.desktop{
    width:100%;
  }
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare-scroll.tablet{
    width:min(86%,760px);
  }
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare-scroll.mobile{
    width:min(62%,390px);
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare-scroll img{
    display:block;
    width:100% !important;
    height:auto !important;
    margin:0 auto;
    border-radius:15px !important;
  }

  /* El modal es el único contenedor que desplaza toda la comparación. */
  .project-modal-preview .project-render-explorer[data-device="compare"]{
    overflow:visible;
  }
}

/* =========================================================
   DN TECH — PREMIUM V78 / MODAL CASE STUDY FINAL
   Un único visor, comparador responsive continuo y sin previews
   duplicadas. Los controles se mantienen accesibles durante el scroll.
   ========================================================= */
.project-modal-preview .project-render-explorer-toolbar{
  position:sticky;
  top:-1px;
  z-index:18;
  margin:-2px -2px 8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(7,17,28,.98),rgba(7,17,28,.93));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.project-modal-preview .project-render-modal-devices button,
.project-modal-preview .project-render-page-switch button{
  white-space:nowrap;
}

/* El case study ya no crea un segundo scroll lateral ni repite móvil. */
.project-modal-aside{
  top:74px;
  max-height:none !important;
  overflow:visible !important;
}
.project-modal-mobile-block,
.project-modal-mobile{display:none !important}

.project-modal-footer-nav{
  grid-template-columns:1fr minmax(190px,.72fr) 1fr;
  align-items:stretch;
}
.project-modal-contact-link{
  display:grid;
  place-content:center;
  gap:3px;
  min-height:50px;
  padding:10px 13px;
  border:1px solid rgba(var(--project-accent),.24);
  border-radius:13px;
  color:#dff7ff;
  background:linear-gradient(135deg,rgba(var(--project-accent),.13),rgba(41,182,246,.08));
  text-align:center;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.project-modal-contact-link span{
  color:rgba(var(--project-accent),.92);
  font-size:5.8px;
  font-weight:900;
  letter-spacing:.14em;
}
.project-modal-contact-link strong{font-size:9px}
.project-modal-contact-link:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--project-accent),.42);
  background:linear-gradient(135deg,rgba(var(--project-accent),.18),rgba(41,182,246,.11));
}

/* Navegador discreto de progreso; solo cobra protagonismo en Comparar. */
.project-compare-progress{display:none}

@media (max-width:860px){
  .project-modal-footer-nav{grid-template-columns:1fr 1fr}
  .project-modal-contact-link{grid-column:1/-1;grid-row:1}
}

@media (max-width:620px){
  .project-modal-preview .project-render-explorer-toolbar{
    top:-1px;
    margin:0 0 8px;
    padding:7px;
    border-radius:12px;
  }
  .project-modal-preview .project-render-modal-devices{
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .project-modal-preview .project-render-modal-devices::-webkit-scrollbar{display:none}
  .project-modal-preview .project-render-modal-devices button{
    flex:0 0 auto;
    min-width:70px;
  }
  .project-modal-preview .project-render-modal-devices button[data-modal-render-device="compare"]{
    min-width:124px;
  }

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-compare-progress{
    position:sticky;
    top:82px;
    z-index:17;
    display:flex;
    width:max-content;
    max-width:calc(100% - 12px);
    margin:0 6px -40px auto;
    padding:4px;
    gap:3px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(5,14,24,.94);
    box-shadow:0 10px 28px rgba(0,0,0,.25);
  }
  .project-compare-progress button{
    display:flex;
    align-items:center;
    gap:4px;
    min-height:28px;
    padding:0 8px;
    border:0;
    border-radius:999px;
    color:#6f899d;
    background:transparent;
    font:inherit;
    font-size:6.5px;
    font-weight:850;
    cursor:pointer;
    transition:color .18s ease,background .18s ease;
  }
  .project-compare-progress button span{
    color:#506b80;
    font-size:5.5px;
    font-weight:950;
  }
  .project-compare-progress button.is-active{
    color:#effaff;
    background:rgba(var(--project-accent),.13);
  }
  .project-compare-progress button.is-active span{color:rgb(var(--project-accent))}

  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare{
    padding-top:52px;
  }
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figcaption{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:28px;
  }
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figcaption::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(var(--project-accent),.35),transparent);
  }

  .project-modal-footer-nav{grid-template-columns:1fr}
  .project-modal-contact-link{grid-column:auto;grid-row:auto;order:2}
  .project-modal-project-link.prev{order:1}
  .project-modal-project-link.next{order:3}
}

@media (prefers-reduced-motion:reduce){
  .project-modal-contact-link,.project-compare-progress button{transition:none !important}
}

/* =========================================================
   DN TECH — PREMIUM V79 / MOBILE MODAL STABILITY FIX
   Corrige solapes del comparador, desplazamiento del case study y
   entrega una jerarquía móvil limpia sin scrolls ni capas superpuestas.
   ========================================================= */
@media (max-width:1120px){
  /* Cuando el aside deja de ser sticky no debe conservar offset visual. */
  .project-modal-aside{
    top:auto !important;
  }
}

@media (max-width:620px){
  /* Toolbar sticky compacta y en flujo: nunca tapa el contenido. */
  .project-modal-preview .project-render-explorer-toolbar{
    position:sticky;
    top:0;
    z-index:30;
    margin:0 0 8px;
    padding:7px;
    background:#07111c;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
  }

  /* La guía responsive ocupa su propia fila, sin márgenes negativos ni solapes. */
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-compare-progress{
    position:sticky;
    top:var(--compare-progress-top,108px);
    z-index:29;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    max-width:none;
    margin:0 0 10px;
    padding:4px;
    gap:3px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:#06101b;
    box-shadow:0 8px 18px rgba(0,0,0,.20);
  }
  .project-compare-progress button{
    justify-content:center;
    min-width:0;
    min-height:30px;
    padding:0 5px;
    font-size:6.4px;
  }

  /* El contenido empieza justo después de la guía; nada se esconde debajo. */
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare{
    padding:8px 8px 22px;
  }
  .project-modal-preview .project-render-explorer[data-device="compare"] .project-render-compare figure{
    scroll-margin-top:calc(var(--compare-progress-top,108px) + 42px);
  }

  /* El case study continúa inmediatamente tras el visor. */
  .project-modal-aside{
    position:relative !important;
    top:auto !important;
    margin-top:12px;
    gap:10px;
  }
  .project-modal-aside>div{
    padding:14px 15px;
  }

  /* Esta nota ya está explicada bajo el visor; en móvil era redundante y podía
     mezclarse visualmente con la navegación inferior. */
  .project-modal-action-block{
    display:none !important;
  }

  .project-modal-footer-nav{
    position:relative;
    z-index:1;
    margin-top:16px;
    gap:9px;
  }
  .project-modal-project-link,
  .project-modal-contact-link{
    min-height:58px;
  }
}

/* =========================================================
   DN TECH — PREMIUM V80 / FULL PROJECT SELECTOR
   En escritorio los 9 conceptos quedan completamente visibles.
   La columna ya no necesita scroll interno porque el visor principal
   es más alto y permite una composición lateral más equilibrada.
   ========================================================= */
@media (min-width:861px){
  .page-web-projects .project-selector{
    position:relative;
    top:auto;
    max-height:none !important;
    overflow:visible !important;
    overscroll-behavior:auto !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    scrollbar-width:none;
  }
  .page-web-projects .project-selector.can-scroll-before,
  .page-web-projects .project-selector.can-scroll-after,
  .page-web-projects .project-selector.can-scroll-before.can-scroll-after{
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
}

/* =========================================================
   DN TECH — PREMIUM V81 / WEB PROCESS EXPERIENCE
   Proceso narrativo, visible y navegable por fases.
   ========================================================= */
.page-web-process .web-process-v81-container{
  min-height:auto;
  display:block;
  padding-top:42px;
  padding-bottom:70px;
}
.web-process-breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:26px;
  color:#698aa4;
  font-size:10px;
  font-weight:750;
}
.web-process-breadcrumb a{color:#83a9c6;transition:color .18s ease}
.web-process-breadcrumb a:hover{color:#dff6ff}
.web-process-breadcrumb span[aria-hidden="true"]{color:#385771}

.web-process-v81-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  gap:48px;
  align-items:center;
  min-height:540px;
  padding-bottom:58px;
}
.web-process-v81-hero-copy{max-width:680px;min-width:0}
.web-process-v81-title{
  margin:0 0 20px;
  max-width:720px;
  color:#f8fbff;
  font-size:clamp(48px,5vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
}
.web-process-v81-subtitle{
  margin:0;
  max-width:650px;
  color:#9bb2c6;
  font-size:15.5px;
  line-height:1.78;
}
.web-process-v81-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.web-process-v81-actions .btn{min-height:50px;font-size:11px}
.web-process-hero-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:25px;
}
.web-process-hero-facts>span{
  min-width:0;
  padding:12px 12px 11px;
  border:1px solid rgba(129,207,249,.09);
  border-radius:13px;
  background:rgba(255,255,255,.022);
}
.web-process-hero-facts strong,.web-process-hero-facts small{display:block}
.web-process-hero-facts strong{color:#dff4ff;font-size:10px;font-weight:850}
.web-process-hero-facts small{margin-top:2px;color:#66859e;font-size:7.5px}

.web-process-map{
  position:relative;
  overflow:hidden;
  min-height:430px;
  padding:22px;
  border:1px solid rgba(104,212,255,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 74% 22%,rgba(44,174,250,.13),transparent 34%),
    linear-gradient(145deg,rgba(14,38,64,.92),rgba(5,15,27,.96));
  box-shadow:0 34px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
}
.web-process-map::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(104,212,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.09) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(120deg,transparent 3%,#000 52%,transparent 100%);
  mask-image:linear-gradient(120deg,transparent 3%,#000 52%,transparent 100%);
}
.web-process-map-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.web-process-map-top>div{display:grid}
.web-process-map-kicker{color:#55ceff;font-size:7px;font-weight:950;letter-spacing:.16em}
.web-process-map-top strong{margin-top:3px;color:#e8f6ff;font-size:17px;letter-spacing:-.02em}
.web-process-map-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(104,212,255,.10);border-radius:999px;background:rgba(3,12,21,.42);color:#7fa1bb;font-size:7px;font-weight:800}
.web-process-map-status i{width:5px;height:5px;border-radius:50%;background:#4ae0ad;box-shadow:0 0 10px rgba(74,224,173,.55)}
.web-process-route{position:relative;z-index:2;display:grid;align-content:center;gap:0;min-height:288px;padding:22px 4px 8px}
.web-process-route-line{position:absolute;left:24px;top:36px;bottom:28px;width:1px;background:linear-gradient(#50cfff,rgba(80,207,255,.12))}
.web-process-route-pulse{position:absolute;left:20.5px;top:40px;width:8px;height:8px;border-radius:50%;background:#71ddff;box-shadow:0 0 0 5px rgba(80,207,255,.07),0 0 18px rgba(80,207,255,.55);animation:webProcessPulse 7s ease-in-out infinite}
@keyframes webProcessPulse{0%,8%{transform:translateY(0)}24%{transform:translateY(58px)}42%{transform:translateY(116px)}62%{transform:translateY(174px)}82%,100%{transform:translateY(232px)}}
.web-process-map-node{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;min-height:58px;padding-left:1px}
.web-process-map-node b{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(104,212,255,.12);border-radius:12px;background:#081726;color:#68d4ff;font-size:8px;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.web-process-map-node span{align-self:end;color:#e8f6ff;font-size:11px;font-weight:850}
.web-process-map-node small{align-self:start;color:#66879f;font-size:7.5px}
.web-process-map-footer{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06)}
.web-process-map-footer span{display:flex;align-items:flex-start;gap:7px;color:#7d9bb2;font-size:7.8px;line-height:1.5}
.web-process-map-footer i{font-style:normal;color:#59d6ff}

.web-process-section-heading{max-width:760px;margin-bottom:24px}
.web-process-section-kicker{display:block;margin-bottom:8px;color:#52ceff;font-size:7.5px;font-weight:950;letter-spacing:.17em}
.web-process-section-heading h2,.web-process-after h2,.web-process-closing h2{
  margin:0;
  color:#f4f9fd;
  font-size:clamp(31px,3.3vw,46px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.web-process-section-heading h2 span,.web-process-after h2 span,.web-process-closing h2 span{color:#5bd1ff}
.web-process-section-heading>p{margin:12px 0 0;max-width:690px;color:#819db4;font-size:12.5px;line-height:1.7}
.web-process-overview{padding:62px 0 26px;border-top:1px solid rgba(104,212,255,.07)}
.web-process-workflow{display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;align-items:start}

.web-process-rail{
  position:sticky;
  top:calc(var(--header-h) + 22px);
  display:grid;
  gap:7px;
  padding:14px;
  border:1px solid rgba(104,212,255,.11);
  border-radius:22px;
  background:rgba(6,18,31,.75);
  box-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
}
.web-process-rail-progress{position:absolute;left:31px;top:33px;bottom:112px;width:1px;background:rgba(104,212,255,.10);overflow:hidden}
.web-process-rail-progress span{display:block;width:100%;height:0;background:linear-gradient(#5bd5ff,#269cff);box-shadow:0 0 10px rgba(72,202,255,.45);transition:height .35s ease}
.web-process-rail-step{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:9px;
  align-items:center;
  min-height:58px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:14px;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.web-process-rail-step:hover{transform:translateX(2px);background:rgba(255,255,255,.025)}
.web-process-rail-step>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(104,212,255,.10);border-radius:10px;background:#071522;color:#577892;font-size:7px;font-weight:950}
.web-process-rail-step div{display:grid;min-width:0}
.web-process-rail-step strong{color:#a8bfd1;font-size:10px}
.web-process-rail-step small{color:#4f718a;font-size:7.5px}
.web-process-rail-step.is-active{border-color:rgba(104,212,255,.19);background:linear-gradient(90deg,rgba(32,149,225,.11),rgba(255,255,255,.02))}
.web-process-rail-step.is-active>span{border-color:rgba(104,212,255,.30);background:rgba(41,182,246,.11);color:#73dcff;box-shadow:0 0 20px rgba(41,182,246,.08)}
.web-process-rail-step.is-active strong{color:#f0f8ff}
.web-process-rail-step.is-active small{color:#7ea4bf}
.web-process-rail-note{display:grid;grid-template-columns:20px 1fr;gap:8px;margin-top:4px;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.055)}
.web-process-rail-note>span{color:#60d3ff;font-size:10px}
.web-process-rail-note p{margin:0;color:#6f8da5;font-size:7.8px;line-height:1.58}
.web-process-rail-note strong{color:#a9c1d4}

.web-process-phases{display:grid;gap:15px}
.web-workflow-step{
  position:relative;
  overflow:hidden;
  min-height:480px;
  padding:26px;
  border:1px solid rgba(132,205,245,.10);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.044),rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.web-workflow-step::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 88% 12%,rgba(52,187,255,.12),transparent 32%);transition:opacity .25s ease}
.web-workflow-step.is-active{border-color:rgba(104,212,255,.22);background:linear-gradient(145deg,rgba(23,94,146,.11),rgba(255,255,255,.016));box-shadow:0 22px 50px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.03)}
.web-workflow-step.is-active::before{opacity:1}
.web-workflow-step>*{position:relative;z-index:1}
.web-workflow-step-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.web-workflow-step-index{color:#55d0ff;font-size:7px;font-weight:950;letter-spacing:.16em}
.web-workflow-step-status{padding:5px 8px;border:1px solid rgba(104,212,255,.08);border-radius:999px;background:rgba(4,13,22,.35);color:#64859e;font-size:6.5px;font-weight:800}
.web-workflow-step h3{margin:0;max-width:700px;color:#f3f9fe;font-size:clamp(25px,2.5vw,36px);line-height:1.08;letter-spacing:-.035em}
.web-workflow-step-lead{margin:13px 0 22px;max-width:780px;color:#89a4ba;font-size:12px;line-height:1.72}
.web-workflow-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.web-workflow-step-grid>div{min-height:118px;padding:16px;border:1px solid rgba(255,255,255,.055);border-radius:16px;background:rgba(3,12,21,.27)}
.web-workflow-mini-label{display:block;margin-bottom:8px;color:#4fcaff;font-size:6.5px;font-weight:950;letter-spacing:.14em}
.web-workflow-step-grid strong{display:block;color:#dceaf5;font-size:11px}
.web-workflow-step-grid p{margin:5px 0 0;color:#6f8da5;font-size:8.5px;line-height:1.6}
.web-workflow-deliverables{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.web-workflow-deliverables span{padding:6px 9px;border:1px solid rgba(104,212,255,.08);border-radius:999px;background:rgba(41,182,246,.045);color:#7ea4bd;font-size:7px;font-weight:750}
.web-workflow-output{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.web-workflow-output span{color:#4ecbff;font-size:6.5px;font-weight:950;letter-spacing:.14em}
.web-workflow-output strong{color:#bcd1e2;font-size:9.5px;font-weight:750}

.web-process-preparation{padding:70px 0 36px}
.web-process-section-heading-compact{max-width:820px}
.web-process-preparation-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.web-process-preparation-card{padding:24px;border:1px solid rgba(104,212,255,.10);border-radius:22px;background:rgba(255,255,255,.025)}
.web-process-preparation-card-accent{background:linear-gradient(145deg,rgba(25,125,197,.11),rgba(255,255,255,.025));border-color:rgba(104,212,255,.19)}
.web-process-preparation-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:22px;border:1px solid rgba(104,212,255,.14);border-radius:12px;background:rgba(41,182,246,.07);color:#69d9ff;font-size:8px;font-weight:950}
.web-process-preparation-card h3{margin:0 0 14px;color:#eaf5fd;font-size:19px;letter-spacing:-.02em}
.web-process-preparation-card ul{margin:0;padding:0;list-style:none}
.web-process-preparation-card li{display:grid;grid-template-columns:90px 1fr;gap:15px;padding:11px 0;border-top:1px solid rgba(255,255,255,.055)}
.web-process-preparation-card li span{color:#4ecbff;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.web-process-preparation-card li strong{color:#839fb5;font-size:9px;font-weight:650}

.web-process-principles{padding:62px 0 30px}
.web-process-section-heading-row{max-width:none;display:grid;grid-template-columns:1fr .72fr;gap:30px;align-items:end}
.web-process-section-heading-row p{margin:0;max-width:470px;justify-self:end}
.web-process-principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.web-process-principle-card{position:relative;min-height:210px;padding:22px;border:1px solid rgba(104,212,255,.09);border-radius:20px;background:rgba(255,255,255,.022);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.web-process-principle-card:hover{transform:translateY(-3px);border-color:rgba(104,212,255,.20);background:rgba(24,101,154,.07)}
.web-process-principle-card>span{display:inline-grid;place-items:center;width:31px;height:31px;margin-bottom:28px;border-radius:10px;background:rgba(41,182,246,.07);color:#5ad1ff;font-size:7px;font-weight:950}
.web-process-principle-card h3{margin:0 0 8px;color:#e8f4fc;font-size:16px}
.web-process-principle-card p{margin:0;color:#7895ac;font-size:9.5px;line-height:1.65}

.web-process-after{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
  margin-top:42px;
  padding:28px;
  border:1px solid rgba(104,212,255,.12);
  border-radius:24px;
  background:linear-gradient(120deg,rgba(18,79,123,.13),rgba(4,14,24,.36));
}
.web-process-after-copy p{margin:12px 0 0;max-width:620px;color:#7f9cb2;font-size:10.5px;line-height:1.68}
.web-process-after-points{display:grid;gap:9px}
.web-process-after-points>span{display:grid;grid-template-columns:31px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.055);border-radius:15px;background:rgba(3,12,21,.26)}
.web-process-after-points i{grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:rgba(41,182,246,.07);color:#61d4ff;font-style:normal;font-size:9px}
.web-process-after-points strong{align-self:end;color:#d8e8f3;font-size:10px}
.web-process-after-points small{align-self:start;color:#68869e;font-size:7.5px;line-height:1.45}

.web-process-closing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:58px;
  padding:28px 30px;
  border:1px solid rgba(104,212,255,.16);
  border-radius:23px;
  background:linear-gradient(120deg,rgba(16,65,104,.32),rgba(7,23,39,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.web-process-closing-copy{max-width:760px}
.web-process-closing-copy h2{font-size:clamp(27px,3vw,40px)}
.web-process-closing-copy p{margin:9px 0 0;color:#7f9db4;font-size:10.5px}
.web-process-closing-actions{display:flex;gap:10px;flex:none}
.web-process-closing-actions .btn{min-height:46px;padding-inline:18px;font-size:10px}

@media (max-width:1040px){
  .web-process-v81-hero{grid-template-columns:1fr;gap:32px;min-height:auto;padding-bottom:48px}
  .web-process-v81-hero-copy{max-width:760px}
  .web-process-map{max-width:820px;width:100%;min-height:390px}
  .web-process-workflow{grid-template-columns:240px 1fr}
  .web-process-rail{top:calc(var(--header-h) + 14px)}
}
@media (max-width:860px){
  .page-web-process .web-process-v81-container{padding-top:54px;padding-bottom:58px}
  .web-process-workflow{grid-template-columns:1fr}
  .web-process-rail{position:sticky;top:var(--header-h);z-index:20;grid-template-columns:repeat(5,1fr);gap:5px;padding:8px;border-radius:15px;background:rgba(5,15,26,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .web-process-rail-progress,.web-process-rail-note{display:none}
  .web-process-rail-step{display:grid;grid-template-columns:1fr;justify-items:center;min-height:44px;padding:5px 3px;text-align:center}
  .web-process-rail-step>span{width:27px;height:27px}
  .web-process-rail-step div{display:none}
  .web-workflow-step{min-height:auto;padding:22px}
  .web-process-preparation-grid,.web-process-after{grid-template-columns:1fr}
  .web-process-section-heading-row{grid-template-columns:1fr}
  .web-process-section-heading-row p{justify-self:start}
  .web-process-principles-grid{grid-template-columns:1fr 1fr}
  .web-process-closing{align-items:flex-start;flex-direction:column}
  .web-process-closing-actions{width:100%}
  .web-process-closing-actions .btn{flex:1}
}
@media (max-width:620px){
  .page-web-process .web-process-v81-container{padding-top:36px;padding-bottom:48px}
  .web-process-breadcrumb{margin-bottom:20px}
  .web-process-v81-title{font-size:clamp(41px,12.2vw,54px)}
  .web-process-v81-subtitle{font-size:14px;line-height:1.7}
  .web-process-v81-actions{flex-direction:column}
  .web-process-v81-actions .btn{width:100%}
  .web-process-hero-facts{grid-template-columns:1fr 1fr}
  .web-process-map{min-height:410px;padding:17px;border-radius:23px}
  .web-process-map-footer{grid-template-columns:1fr}
  .web-process-route{min-height:286px;padding-top:18px}
  .web-process-overview{padding-top:50px}
  .web-process-section-heading h2,.web-process-after h2,.web-process-closing h2{font-size:clamp(29px,9vw,39px)}
  .web-process-rail{top:72px}
  .web-workflow-step{padding:18px;border-radius:20px}
  .web-workflow-step-head{align-items:flex-start;flex-direction:column;gap:7px;margin-bottom:16px}
  .web-workflow-step h3{font-size:27px}
  .web-workflow-step-grid{grid-template-columns:1fr}
  .web-workflow-step-grid>div{min-height:auto}
  .web-workflow-output{grid-template-columns:1fr;gap:5px}
  .web-process-preparation{padding-top:54px}
  .web-process-preparation-card{padding:19px}
  .web-process-preparation-card li{grid-template-columns:72px 1fr;gap:10px}
  .web-process-principles{padding-top:50px}
  .web-process-principles-grid{grid-template-columns:1fr}
  .web-process-principle-card{min-height:auto}
  .web-process-after{margin-top:34px;padding:21px}
  .web-process-closing{margin-top:42px;padding:22px}
  .web-process-closing-actions{flex-direction:column}
  .web-process-closing-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .web-process-route-pulse{animation:none;top:272px}
  .web-process-rail-progress span{transition:none}
}

/* =========================================================
   DN TECH — PREMIUM V82 / COMPACT PROCESS
   Un único panel por fase en escritorio + acordeón en móvil.
   ========================================================= */
.page-web-process .web-process-v81-container{padding-top:38px;padding-bottom:54px}
.web-process-v81-hero{
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:42px;
  min-height:470px;
  padding-bottom:44px;
}
.web-process-v81-hero-copy{max-width:730px}
.web-process-v81-title{max-width:780px;font-size:clamp(47px,4.65vw,66px);line-height:.98;margin-bottom:17px}
.web-process-v81-subtitle{max-width:680px;font-size:14px;line-height:1.7}
.web-process-v81-actions{margin-top:22px}
.web-process-hero-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;
  margin-top:20px;color:#7897ae;font-size:8px;font-weight:720;
}
.web-process-hero-summary strong{color:#d9edf9;font-weight:850}
.web-process-hero-summary i{color:#3d6079;font-style:normal}
.web-process-map{min-height:365px;padding:20px 21px}
.web-process-route{min-height:235px;padding:14px 4px 5px}
.web-process-map-node{min-height:47px}
.web-process-route-line{top:28px;bottom:22px}
.web-process-route-pulse{top:32px;animation:webProcessPulseV82 7s ease-in-out infinite}
@keyframes webProcessPulseV82{0%,8%{transform:translateY(0)}24%{transform:translateY(47px)}42%{transform:translateY(94px)}62%{transform:translateY(141px)}82%,100%{transform:translateY(188px)}}

.web-process-overview-v82{padding:48px 0 22px}
.web-process-section-heading-v82{max-width:820px;margin-bottom:20px}
.web-process-workflow-v82{grid-template-columns:270px minmax(0,1fr);gap:20px}
.web-process-rail-v82{position:relative;top:auto;align-self:stretch;padding:12px;gap:6px}
.web-process-rail-v82 .web-process-rail-step{min-height:54px}
.web-process-rail-v82 .web-process-rail-note{margin-top:auto;padding-top:13px}
.web-process-rail-v82 .web-process-rail-progress{display:none}

.web-process-phases-v82{display:block;min-width:0}
.web-process-phases-v82 .web-workflow-step{display:none;min-height:0;padding:25px 26px}
.web-process-phases-v82 .web-workflow-step.is-active{display:block;animation:webProcessPanelIn .28s ease both}
@keyframes webProcessPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.web-workflow-accordion-trigger{display:none}
.web-process-phases-v82 .web-workflow-step-head{margin-bottom:17px}
.web-process-phases-v82 .web-workflow-step h3{max-width:760px;font-size:clamp(27px,2.25vw,34px)}
.web-process-phases-v82 .web-workflow-step-lead{margin:11px 0 17px;line-height:1.63}
.web-process-phases-v82 .web-workflow-step-grid>div{min-height:102px;padding:14px 15px}
.web-process-phases-v82 .web-workflow-deliverables{margin-top:13px}
.web-process-phases-v82 .web-workflow-output{margin-top:14px;padding-top:14px}

.web-process-support{padding:50px 0 22px}
.web-process-support-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);gap:35px;align-items:end;margin-bottom:18px}
.web-process-support-intro .web-process-section-kicker{grid-column:1/-1;margin-bottom:-24px}
.web-process-support-intro h2{margin:0;color:#f4f9fd;font-size:clamp(29px,3vw,42px);line-height:1.04;letter-spacing:-.045em}
.web-process-support-intro h2 span{color:#5bd1ff}
.web-process-support-intro p{margin:0;color:#819db4;font-size:10.5px;line-height:1.7}
.web-process-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.web-process-support-card{padding:20px 21px;border:1px solid rgba(104,212,255,.10);border-radius:20px;background:rgba(255,255,255,.024)}
.web-process-support-card-accent{border-color:rgba(104,212,255,.18);background:linear-gradient(145deg,rgba(25,125,197,.10),rgba(255,255,255,.023))}
.web-process-support-label{display:block;margin-bottom:8px;color:#52ceff;font-size:6.8px;font-weight:950;letter-spacing:.15em}
.web-process-support-card h3{margin:0 0 14px;color:#eaf5fd;font-size:17px;letter-spacing:-.02em}
.web-process-support-items{display:flex;flex-wrap:wrap;gap:7px}
.web-process-support-items span{padding:7px 9px;border:1px solid rgba(104,212,255,.07);border-radius:999px;background:rgba(4,14,24,.3);color:#7898af;font-size:7.6px;font-weight:720}
.web-process-principles-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}
.web-process-principles-inline>span{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:12px 13px;border:1px solid rgba(104,212,255,.075);border-radius:15px;background:rgba(255,255,255,.018)}
.web-process-principles-inline b{grid-row:1/3;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(41,182,246,.07);color:#5bd2ff;font-size:6.5px}
.web-process-principles-inline strong{align-self:end;color:#cfe2ef;font-size:9px}
.web-process-principles-inline small{align-self:start;color:#63839a;font-size:7px;line-height:1.35}

.web-process-after-v82{margin-top:34px;padding:22px 24px;gap:22px;border-radius:20px}
.web-process-after-v82 h2{font-size:clamp(26px,2.5vw,36px)}
.web-process-after-v82 .web-process-after-copy p{margin-top:8px;font-size:9.5px}
.web-process-after-points-v82{grid-template-columns:1fr 1fr;gap:8px}
.web-process-after-points-v82>span{padding:11px 12px}
.web-process-closing-v82{margin-top:34px;padding:24px 26px}
.web-process-closing-v82 .web-process-closing-copy h2{font-size:clamp(26px,2.6vw,37px)}

@media (max-width:1040px){
  .web-process-v81-hero{grid-template-columns:1fr;gap:26px;min-height:auto;padding-bottom:38px}
  .web-process-map{max-width:none;min-height:340px}
  .web-process-workflow-v82{grid-template-columns:235px minmax(0,1fr)}
  .web-process-support-intro{grid-template-columns:1fr .85fr}
}
@media (max-width:860px){
  .page-web-process .web-process-v81-container{padding-top:48px;padding-bottom:50px}
  .web-process-v81-title{max-width:760px}
  .web-process-overview-v82{padding-top:42px}
  .web-process-workflow-v82{display:block}
  .web-process-rail-v82{display:none}
  .web-process-phases-v82{display:grid;gap:8px}
  .web-process-phases-v82 .web-workflow-step,
  .web-process-phases-v82 .web-workflow-step.is-active{display:block;padding:0;border-radius:18px;animation:none;background:rgba(255,255,255,.021);box-shadow:none}
  .web-process-phases-v82 .web-workflow-step::before{display:none}
  .web-workflow-accordion-trigger{
    position:relative;z-index:2;display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 15px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;
  }
  .web-workflow-accordion-trigger>span{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-width:0}
  .web-workflow-accordion-trigger b{grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(104,212,255,.12);border-radius:10px;background:#071522;color:#67d5ff;font-size:7px}
  .web-workflow-accordion-trigger strong{color:#dcebf5;font-size:10.5px}
  .web-workflow-accordion-trigger small{color:#587991;font-size:7.4px}
  .web-workflow-accordion-trigger i{color:#6c91aa;font-size:16px;font-style:normal;transition:transform .2s ease,color .2s ease}
  .web-workflow-step.is-active .web-workflow-accordion-trigger i{transform:rotate(180deg);color:#66d5ff}
  .web-workflow-step-body{display:none;padding:0 18px 19px}
  .web-workflow-step.is-active .web-workflow-step-body{display:block;animation:webProcessAccordionIn .22s ease both}
  @keyframes webProcessAccordionIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .web-process-phases-v82 .web-workflow-step-head{display:none}
  .web-process-phases-v82 .web-workflow-step h3{font-size:26px}
  .web-process-support-intro{grid-template-columns:1fr;gap:10px}
  .web-process-support-intro .web-process-section-kicker{grid-column:auto;margin-bottom:0}
  .web-process-support-grid{grid-template-columns:1fr}
  .web-process-principles-inline{grid-template-columns:1fr 1fr 1fr}
  .web-process-after-v82{grid-template-columns:1fr}
}
@media (max-width:620px){
  .page-web-process .web-process-v81-container{padding-top:34px;padding-bottom:44px}
  .web-process-breadcrumb{margin-bottom:18px}
  .web-process-v81-title{font-size:clamp(39px,11.5vw,50px);line-height:1.01}
  .web-process-v81-subtitle{font-size:13.5px}
  .web-process-v81-actions{margin-top:19px}
  .web-process-hero-summary{gap:6px 8px;font-size:7.3px}
  .web-process-map{min-height:335px;padding:16px;border-radius:21px}
  .web-process-route{min-height:228px}
  .web-process-map-node{min-height:45px}
  .web-process-overview-v82{padding-top:38px}
  .web-process-section-heading-v82{margin-bottom:17px}
  .web-process-section-heading-v82 h2{font-size:clamp(29px,8.8vw,37px)}
  .web-process-section-heading-v82>p{font-size:11px}
  .web-process-phases-v82 .web-workflow-step-grid{grid-template-columns:1fr}
  .web-process-phases-v82 .web-workflow-step-grid>div{min-height:auto}
  .web-process-phases-v82 .web-workflow-step h3{font-size:24px}
  .web-process-phases-v82 .web-workflow-step-lead{font-size:10.8px}
  .web-process-support{padding-top:42px}
  .web-process-support-intro h2{font-size:clamp(28px,8.8vw,37px)}
  .web-process-support-card{padding:17px}
  .web-process-principles-inline{grid-template-columns:1fr}
  .web-process-after-v82{margin-top:28px;padding:19px}
  .web-process-after-points-v82{grid-template-columns:1fr}
  .web-process-closing-v82{margin-top:28px;padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .web-process-phases-v82 .web-workflow-step.is-active,.web-workflow-step.is-active .web-workflow-step-body{animation:none}
  .web-process-route-pulse{animation:none}
}

/* =========================================================
   DN TECH — PREMIUM V83 / PROCESS FINAL POLISH
   Navegación de fases, mapa interactivo y consistencia global.
   ========================================================= */

/* Header consistente con Proyectos: dark glass desde el primer píxel. */
.page-web-process .site-header{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),
    rgba(5,13,24,.965);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-bottom-color:rgba(105,201,243,.12);
}
.page-web-process .site-header.is-scrolled{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.004)),
    rgba(4,12,22,.985);
}

/* CTAs secundarios deben parecer acciones, no estados desactivados. */
.page-web-process #web-process-projects-button,
.page-web-process #web-process-plans-link{
  color:#e7f5ff;
  border-color:rgba(122,199,238,.34);
  background:rgba(255,255,255,.035);
  opacity:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.page-web-process #web-process-projects-button:hover,
.page-web-process #web-process-plans-link:hover{
  color:#fff;
  border-color:rgba(91,210,255,.58);
  background:rgba(50,164,226,.09);
  transform:translateY(-1px);
}

/* El mapa del hero también funciona como navegación. */
.page-web-process .web-process-map-node{
  width:100%;
  border:0;
  font:inherit;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:pointer;
  border-radius:13px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.page-web-process .web-process-map-node:hover,
.page-web-process .web-process-map-node:focus-visible{
  outline:0;
  transform:translateX(3px);
  background:linear-gradient(90deg,rgba(65,190,255,.07),transparent 72%);
}
.page-web-process .web-process-map-node:focus-visible b{
  box-shadow:0 0 0 2px rgba(83,206,255,.22),0 10px 22px rgba(0,0,0,.18);
}
.page-web-process .web-process-map-node.is-active b{
  border-color:rgba(104,212,255,.42);
  color:#c7f1ff;
  background:rgba(41,182,246,.15);
  box-shadow:0 0 0 1px rgba(104,212,255,.06),0 0 22px rgba(41,182,246,.13);
}
.page-web-process .web-process-map-node.is-active span{color:#fff}
.page-web-process .web-process-map-node.is-active small{color:#85abc4}

/* Señal explícita de interacción en la lista lateral. */
.page-web-process .web-process-rail-cue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 8px 7px;
  color:#597991;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-web-process .web-process-rail-cue i{
  color:#55cfff;
  font-size:10px;
  font-style:normal;
  transition:transform .18s ease;
}
.page-web-process .web-process-rail:hover .web-process-rail-cue i{transform:translateX(2px)}
.page-web-process .web-process-rail-step{padding-right:28px}
.page-web-process .web-process-rail-step::after{
  content:"→";
  position:absolute;
  right:11px;
  top:50%;
  color:#3f6984;
  font-size:10px;
  opacity:.38;
  transform:translate(-3px,-50%);
  transition:opacity .18s ease,transform .18s ease,color .18s ease;
}
.page-web-process .web-process-rail-step:hover::after,
.page-web-process .web-process-rail-step.is-active::after{
  opacity:1;
  color:#65d5ff;
  transform:translate(0,-50%);
}

/* Barra de progreso del panel activo. */
.page-web-process .web-process-phases-v82{position:relative}
.page-web-process .web-process-panel-progress{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  margin:0 3px 9px;
}
.page-web-process .web-process-panel-progress-track{
  display:block;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(104,212,255,.08);
}
.page-web-process .web-process-panel-progress-fill{
  display:block;
  width:20%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2baaf6,#6addff);
  box-shadow:0 0 14px rgba(58,189,255,.28);
  transition:width .3s cubic-bezier(.22,.8,.24,1);
}
.page-web-process .web-process-panel-progress-label{
  color:#63859d;
  font-size:7px;
  letter-spacing:.1em;
}

/* Navegación anterior / siguiente dentro de cada fase. */
.page-web-process .web-workflow-step-nav{
  display:grid;
  grid-template-columns:minmax(130px,1fr) auto minmax(130px,1fr);
  align-items:center;
  gap:10px;
  margin-top:17px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.055);
}
.page-web-process .web-workflow-step-nav-spacer{min-height:32px}
.page-web-process .web-workflow-step-nav-count{
  color:#52728a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.page-web-process .web-workflow-step-nav-btn{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  width:max-content;
  max-width:100%;
  padding:0 12px;
  border:1px solid rgba(104,212,255,.12);
  border-radius:10px;
  background:rgba(3,13,22,.28);
  color:#8aa8bd;
  font:inherit;
  font-size:8px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}
.page-web-process .web-workflow-step-nav-btn.is-prev{justify-self:start}
.page-web-process .web-workflow-step-nav-btn.is-next{justify-self:end;color:#dff6ff;border-color:rgba(104,212,255,.22);background:rgba(41,182,246,.07)}
.page-web-process .web-workflow-step-nav-btn:hover,
.page-web-process .web-workflow-step-nav-btn:focus-visible{
  outline:0;
  color:#fff;
  border-color:rgba(104,212,255,.42);
  background:rgba(41,182,246,.11);
  transform:translateY(-1px);
}

/* Compactación final: mantiene aire pero evita altura gratuita. */
.page-web-process .web-process-support{padding-top:42px}
.page-web-process .web-process-support-card{padding:17px 19px}
.page-web-process .web-process-support-card h3{margin-bottom:11px}
.page-web-process .web-process-after-v82{margin-top:28px;padding-top:19px;padding-bottom:19px}
.page-web-process .web-process-closing-v82{margin-top:28px}

/* Footer compacto y consistente con Proyectos. */
.page-web-process .web-footer{
  border-top:1px solid rgba(104,212,255,.08);
  background:#030b14;
}
.page-web-process .web-footer .footer-inner{
  min-height:88px;
  padding-top:18px;
  padding-bottom:18px;
}
.page-web-process .footer-brand-new{display:inline-flex;align-items:center;gap:10px}
.page-web-process .footer-brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  overflow:hidden;
  border:1px solid rgba(104,212,255,.18);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(18,62,91,.72),rgba(5,17,30,.96));
}
.page-web-process .footer-brand-icon{
  display:block;
  width:24px;
  height:24px;
  max-width:24px;
  max-height:24px;
  object-fit:contain;
}
.page-web-process .footer-brand-copy{display:grid;line-height:1}
.page-web-process .footer-brand-main{color:#f2f9ff;font-size:12px;font-weight:900;letter-spacing:.035em}
.page-web-process .footer-brand-city{margin-top:4px;color:#64cfff;font-size:7px;font-weight:900;letter-spacing:.2em}

@media (max-width:860px){
  .page-web-process .web-process-panel-progress{display:none}
  .page-web-process .web-workflow-step-nav{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    padding-top:13px;
  }
  .page-web-process .web-workflow-step-nav-count{display:none}
  .page-web-process .web-workflow-step-nav-spacer{display:none}
  .page-web-process .web-workflow-step-nav-btn{
    width:100%;
    min-height:42px;
    justify-content:center;
    font-size:9px;
  }
  .page-web-process .web-workflow-step-nav-btn.is-prev{grid-column:1;justify-self:stretch}
  .page-web-process .web-workflow-step-nav-btn.is-next{grid-column:2;justify-self:stretch}
  .page-web-process .web-workflow-step-nav:has(.web-workflow-step-nav-spacer) .is-next{grid-column:1/-1}
}
@media (max-width:620px){
  .page-web-process .web-process-map-node{min-height:45px}
  .page-web-process .web-workflow-step-nav{grid-template-columns:1fr}
  .page-web-process .web-workflow-step-nav-btn.is-prev,
  .page-web-process .web-workflow-step-nav-btn.is-next{grid-column:1}
  .page-web-process .web-footer .footer-inner{min-height:auto;gap:15px}
}
@media (prefers-reduced-motion:reduce){
  .page-web-process .web-process-panel-progress-fill,
  .page-web-process .web-process-map-node,
  .page-web-process .web-workflow-step-nav-btn{transition:none}
}

/* =========================================================
   DN TECH — PREMIUM V84 / PROCESS CLOSING POLISH
   Hero-flow visual (no navegación duplicada), CTA a detalle,
   mejor jerarquía del soporte y microajustes finales.
   ========================================================= */

/* El resumen del hero es una pieza visual, no una segunda navegación. */
.page-web-process .web-process-map-static .web-process-map-top>div small{
  margin-top:5px;
  max-width:320px;
  color:#6f90a8;
  font-size:7.6px;
  line-height:1.5;
}
.page-web-process .web-process-map-static .web-process-route{
  min-height:286px;
  padding-top:18px;
  padding-bottom:8px;
}
.page-web-process .web-process-map-static .web-process-map-node{
  display:grid;
  grid-template-columns:42px minmax(88px,.48fr) minmax(150px,1fr);
  grid-template-rows:1fr;
  column-gap:12px;
  min-height:52px;
  padding:0 7px 0 1px;
  border:0;
  border-radius:13px;
  background:transparent;
  cursor:default;
  transform:none;
  transition:background .35s ease;
}
.page-web-process .web-process-map-static .web-process-map-node:hover,
.page-web-process .web-process-map-static .web-process-map-node:focus-visible{
  transform:none;
  background:transparent;
}
.page-web-process .web-process-map-static .web-process-map-node b{
  grid-row:auto;
  align-self:center;
  transition:border-color .35s ease,color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s ease;
  animation:webProcessNodeGlow 10s ease-in-out infinite;
}
.page-web-process .web-process-map-static .web-process-map-node span{
  align-self:center;
  color:#dcecf7;
  font-size:10.5px;
}
.page-web-process .web-process-map-static .web-process-map-node small{
  align-self:center;
  color:#67879f;
  font-size:7.6px;
  line-height:1.45;
}
.page-web-process .web-process-map-static .web-process-map-node[data-flow-step="0"] b{animation-delay:0s}
.page-web-process .web-process-map-static .web-process-map-node[data-flow-step="1"] b{animation-delay:2s}
.page-web-process .web-process-map-static .web-process-map-node[data-flow-step="2"] b{animation-delay:4s}
.page-web-process .web-process-map-static .web-process-map-node[data-flow-step="3"] b{animation-delay:6s}
.page-web-process .web-process-map-static .web-process-map-node[data-flow-step="4"] b{animation-delay:8s}
@keyframes webProcessNodeGlow{
  0%,13%{
    border-color:rgba(104,212,255,.48);
    color:#ddf8ff;
    background:rgba(41,182,246,.17);
    box-shadow:0 0 0 1px rgba(104,212,255,.07),0 0 24px rgba(41,182,246,.18);
    transform:scale(1.03);
  }
  19%,100%{
    border-color:rgba(104,212,255,.12);
    color:#68d4ff;
    background:#081726;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    transform:none;
  }
}
.page-web-process .web-process-map-static .web-process-route-pulse{
  animation:webProcessPulseV84 10s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes webProcessPulseV84{
  0%,12%{transform:translateY(0)}
  20%,32%{transform:translateY(52px)}
  40%,52%{transform:translateY(104px)}
  60%,72%{transform:translateY(156px)}
  80%,100%{transform:translateY(208px)}
}
.page-web-process .web-process-map-static .web-process-route-line{
  top:31px;
  bottom:27px;
  background:linear-gradient(180deg,#60d6ff 0%,rgba(80,207,255,.34) 58%,rgba(80,207,255,.09) 100%);
  box-shadow:0 0 12px rgba(76,201,255,.07);
}
.page-web-process .web-process-map-static .web-process-route-pulse{top:35px}

.page-web-process .web-process-map-static .web-process-map-footer{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.page-web-process .web-process-map-trust{
  min-width:0;
}
.page-web-process .web-process-map-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:35px;
  padding:0 12px;
  border:1px solid rgba(104,212,255,.20);
  border-radius:11px;
  background:rgba(41,182,246,.07);
  color:#dff6ff;
  font-size:7.8px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.page-web-process .web-process-map-cta span{color:#62d5ff;transition:transform .18s ease}
.page-web-process .web-process-map-cta:hover,
.page-web-process .web-process-map-cta:focus-visible{
  outline:0;
  color:#fff;
  border-color:rgba(104,212,255,.44);
  background:rgba(41,182,246,.12);
  transform:translateY(-1px);
}
.page-web-process .web-process-map-cta:hover span,
.page-web-process .web-process-map-cta:focus-visible span{transform:translateY(2px)}
.page-web-process #web-process-overview{scroll-margin-top:calc(var(--header-h) + 16px)}

/* El selector detallado ya se entiende por su estado activo y flechas. */
.page-web-process .web-process-rail-v82{padding-top:14px}

/* Relación visual entre lo que aporta el cliente y lo que ordena DN TECH. */
.page-web-process .web-process-support{padding-top:36px}
.page-web-process .web-process-support-intro{margin-bottom:14px}
.page-web-process .web-process-support-grid{
  position:relative;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.page-web-process .web-process-support-grid::after{
  content:"→";
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(104,212,255,.15);
  border-radius:999px;
  background:#071725;
  color:#5fd4ff;
  font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 18px rgba(41,182,246,.07);
  transform:translate(-50%,-50%);
}
.page-web-process .web-process-support-card{padding:15px 18px}
.page-web-process .web-process-support-card h3{margin-bottom:9px}
.page-web-process .web-process-support-items{gap:6px}
.page-web-process .web-process-principles-inline{margin-top:9px}
.page-web-process .web-process-principles-inline>span{padding:10px 12px}
.page-web-process .web-process-principles-inline b{
  border:1px solid rgba(104,212,255,.10);
  background:rgba(41,182,246,.06);
}
.page-web-process .web-process-principles-inline b svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:#5fd4ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Banda posterior y CTA: compactos y con lectura más directa. */
.page-web-process .web-process-after-v82{margin-top:25px}
.page-web-process .web-process-closing-v82{margin-top:25px}
.page-web-process .web-process-closing-v82 .web-process-closing-copy p{max-width:650px}

/* Cambiar de fase debe sentirse como avanzar, sin espectáculo innecesario. */
.page-web-process .web-process-phases-v82 .web-workflow-step.is-active{
  animation:webProcessPanelInV84 .3s cubic-bezier(.22,.8,.24,1) both;
}
@keyframes webProcessPanelInV84{
  from{opacity:.35;transform:translateX(7px);filter:saturate(.82)}
  to{opacity:1;transform:none;filter:none}
}

@media (max-width:860px){
  .page-web-process .web-process-map-static .web-process-map-node{
    grid-template-columns:40px 1fr;
    grid-template-rows:auto auto;
    min-height:48px;
    column-gap:10px;
    padding-right:2px;
  }
  .page-web-process .web-process-map-static .web-process-map-node b{grid-row:1/3}
  .page-web-process .web-process-map-static .web-process-map-node span{align-self:end}
  .page-web-process .web-process-map-static .web-process-map-node small{align-self:start}
  .page-web-process .web-process-map-static .web-process-map-footer{grid-template-columns:1fr}
  .page-web-process .web-process-map-cta{justify-self:stretch}
  .page-web-process .web-process-support-grid{grid-template-columns:1fr;gap:10px}
  .page-web-process .web-process-support-grid::after{display:none}
  .page-web-process .web-process-support-card{padding:16px}
  .page-web-process .web-process-phases-v82 .web-workflow-step.is-active{animation:webProcessAccordionIn .22s ease both}
}

@media (max-width:620px){
  .page-web-process .web-process-map-static .web-process-map-top>div small{font-size:7.2px}
  .page-web-process .web-process-map-static .web-process-route{min-height:246px}
  .page-web-process .web-process-map-static .web-process-map-node{min-height:45px}
  .page-web-process .web-process-map-static .web-process-route-pulse{animation-name:webProcessPulseV84Mobile}
  @keyframes webProcessPulseV84Mobile{
    0%,12%{transform:translateY(0)}
    20%,32%{transform:translateY(45px)}
    40%,52%{transform:translateY(90px)}
    60%,72%{transform:translateY(135px)}
    80%,100%{transform:translateY(180px)}
  }
  .page-web-process .web-process-map-static .web-process-map-footer{padding-top:10px}
  .page-web-process .web-process-map-cta{min-height:38px;font-size:8px}
}

@media (prefers-reduced-motion:reduce){
  .page-web-process .web-process-map-static .web-process-route-pulse,
  .page-web-process .web-process-map-static .web-process-map-node b{animation:none !important}
  .page-web-process .web-process-phases-v82 .web-workflow-step.is-active{animation:none}
}


/* =========================================================
   DN TECH — PREMIUM V85 / PROCESS FINAL FINE TUNING
   Nodos sólidos + glow sincronizado, aterrizaje exacto al detalle
   y señales discretas de interacción.
   ========================================================= */

/* Los números 01–05 son piezas sólidas; solo se iluminan al llegar el pulso. */
.page-web-process .web-process-map-static .web-process-map-node b{
  position:relative;
  overflow:hidden;
  border-color:#173b51;
  background:linear-gradient(180deg,#0a1c2b 0%,#071522 100%);
  color:#72cfee;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.22);
}
.page-web-process .web-process-map-static .web-process-map-node b::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(116,224,255,.26),rgba(41,182,246,.02) 65%);
  opacity:0;
  transition:opacity .22s ease;
}
@keyframes webProcessNodeGlow{
  0%,13%{
    border-color:rgba(112,221,255,.72);
    color:#effcff;
    background:linear-gradient(180deg,#12354a 0%,#0b2638 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 1px rgba(104,212,255,.10),
      0 0 26px rgba(41,182,246,.28),
      0 10px 24px rgba(0,0,0,.22);
    transform:scale(1.045);
  }
  19%,100%{
    border-color:#173b51;
    color:#72cfee;
    background:linear-gradient(180deg,#0a1c2b 0%,#071522 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 8px 18px rgba(0,0,0,.22);
    transform:none;
  }
}

/* El CTA del flow deja claro que el detalle vive justo debajo. */
.page-web-process .web-process-map-cta{
  min-width:164px;
  border-color:rgba(104,212,255,.22);
  background:linear-gradient(180deg,rgba(41,182,246,.10),rgba(41,182,246,.055));
}
.page-web-process .web-process-map-cta::before{
  content:"DETALLE";
  color:#4ecbfa;
  font-size:5.7px;
  font-weight:950;
  letter-spacing:.16em;
}

/* La navegación detallada comunica explícitamente que sus fases son pulsables. */
.page-web-process .web-process-rail-hint{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 7px 9px;
  color:#64849b;
  font-size:6.4px;
  font-weight:820;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.page-web-process .web-process-rail-hint span{
  color:#55d0ff;
  font-size:10px;
  transform:translateY(-1px);
}
.page-web-process .web-process-rail-step{
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.page-web-process .web-process-rail-step:hover{
  transform:translateX(2px);
}

/* Al llegar desde el hero, el propio cuadro recibe un destello breve de orientación. */
.page-web-process .web-process-workflow-v82.is-arrival-focus{
  animation:webProcessArrivalV85 .9s cubic-bezier(.22,.8,.24,1) both;
}
@keyframes webProcessArrivalV85{
  0%{filter:brightness(.93);}
  35%{filter:brightness(1.07);}
  100%{filter:none;}
}

/* Último ajuste de ritmo: menos aire entre el detalle y el siguiente bloque. */
.page-web-process .web-process-overview-v82{padding-bottom:16px}
.page-web-process .web-process-support{padding-top:30px}

@media (max-width:860px){
  .page-web-process .web-process-rail-hint{display:none}
  .page-web-process .web-process-map-cta::before{display:none}
  .page-web-process .web-process-map-cta{min-width:0}
  .page-web-process .web-process-support{padding-top:34px}
}

@media (prefers-reduced-motion:reduce){
  .page-web-process .web-process-workflow-v82.is-arrival-focus{animation:none}
  .page-web-process .web-process-rail-step:hover{transform:none}
}

/* =========================================================
   DN TECH — PREMIUM V86 / PROCESS SCREEN RHYTHM
   Tres actos claros, tipografía más legible y continuidad entre
   secciones sin forzar scroll-snap ni romper alturas pequeñas.
   ========================================================= */

/* El contenedor ya no añade altura gratuita: cada acto controla su propio ritmo. */
.page-web-process .web-process-v81-container{
  padding-top:0;
  padding-bottom:34px;
}
.page-web-process .web-process-screen{
  position:relative;
  scroll-margin-top:calc(var(--header-h) + 1px);
}

/* 01 — Hero / resumen. */
.page-web-process .web-process-screen-hero{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 0 34px;
}
.page-web-process .web-process-screen-hero .web-process-breadcrumb{
  margin-bottom:20px;
}
.page-web-process .web-process-screen-hero .web-process-v81-hero{
  min-height:0;
  padding-bottom:0;
}

/* 02 — Proceso detallado. */
.page-web-process .web-process-screen-detail{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:32px;
  padding-bottom:32px;
}
.page-web-process .web-process-screen-detail .web-process-section-heading-v82{
  margin-bottom:18px;
}
.page-web-process .web-process-stage-next{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.page-web-process .web-process-stage-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:268px;
  min-height:48px;
  padding:8px 12px 8px 15px;
  border:1px solid rgba(104,212,255,.22);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(41,182,246,.095),rgba(41,182,246,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 28px rgba(0,0,0,.14);
  color:#e8f7ff;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.page-web-process .web-process-stage-link span{display:grid;gap:2px}
.page-web-process .web-process-stage-link small{
  color:#55d0ff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}
.page-web-process .web-process-stage-link strong{
  color:#eaf7ff;
  font-size:11px;
  font-weight:850;
}
.page-web-process .web-process-stage-link i{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:0 0 31px;
  border:1px solid rgba(104,212,255,.13);
  border-radius:10px;
  background:#071725;
  color:#65d7ff;
  font-size:12px;
  font-style:normal;
  transition:transform .18s ease,background .18s ease;
}
.page-web-process .web-process-stage-link:hover,
.page-web-process .web-process-stage-link:focus-visible{
  outline:0;
  transform:translateY(-2px);
  border-color:rgba(104,212,255,.48);
  background:linear-gradient(180deg,rgba(41,182,246,.15),rgba(41,182,246,.075));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 16px 34px rgba(0,0,0,.18),0 0 22px rgba(41,182,246,.08);
}
.page-web-process .web-process-stage-link:hover i,
.page-web-process .web-process-stage-link:focus-visible i{transform:translateY(2px);background:#0a2132}

/* 03 — Entrega, continuidad y conversión final. */
.page-web-process .web-process-screen-guidance{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 0 30px;
  border-top:1px solid rgba(104,212,255,.06);
}
.page-web-process .web-process-screen-guidance::before{
  content:"";
  position:absolute;
  inset:0 -8vw auto;
  height:56%;
  pointer-events:none;
  background:radial-gradient(circle at 72% 28%,rgba(41,182,246,.055),transparent 45%);
  z-index:-1;
}
.page-web-process .web-process-screen-guidance .web-process-support{
  padding-top:0;
}

/* Cada acto ocupa aproximadamente el área útil del navegador en escritorio.
   min-height mantiene la página segura si el contenido necesita crecer. */
@media (min-width:1041px) and (min-height:700px){
  .page-web-process .web-process-screen{
    min-height:calc(100vh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
  }
}

/* ---------------------------------------------------------
   LEGIBILIDAD — subimos los textos que habían quedado demasiado pequeños.
   --------------------------------------------------------- */
.page-web-process .web-process-breadcrumb{font-size:11px}
.page-web-process .web-process-v81-subtitle{font-size:15.5px;line-height:1.72}
.page-web-process .web-process-hero-summary{font-size:9.2px;gap:8px 12px}
.page-web-process .web-process-map-kicker{font-size:8px}
.page-web-process .web-process-map-top strong{font-size:18px}
.page-web-process .web-process-map-static .web-process-map-top>div small{font-size:9px;line-height:1.55}
.page-web-process .web-process-map-status{font-size:8.2px}
.page-web-process .web-process-map-static .web-process-map-node b{font-size:9px}
.page-web-process .web-process-map-static .web-process-map-node span{font-size:12px}
.page-web-process .web-process-map-static .web-process-map-node small{font-size:9px;line-height:1.45}
.page-web-process .web-process-map-footer span{font-size:9px}
.page-web-process .web-process-map-cta{font-size:9.3px;min-height:39px;padding-inline:14px}
.page-web-process .web-process-map-cta::before{font-size:6.6px}

.page-web-process .web-process-section-kicker{font-size:8.5px}
.page-web-process .web-process-section-heading>p,
.page-web-process .web-process-section-heading-v82>p{font-size:13.5px;line-height:1.68}
.page-web-process .web-process-rail-hint{font-size:7.5px}
.page-web-process .web-process-rail-step>span{font-size:8px}
.page-web-process .web-process-rail-step strong{font-size:11.2px}
.page-web-process .web-process-rail-step small{font-size:8.5px}
.page-web-process .web-process-rail-note p{font-size:8.8px;line-height:1.58}
.page-web-process .web-process-panel-progress-label{font-size:8px}
.page-web-process .web-workflow-step-index{font-size:8px}
.page-web-process .web-workflow-step-status{font-size:7.6px}
.page-web-process .web-process-phases-v82 .web-workflow-step h3{font-size:clamp(29px,2.35vw,36px)}
.page-web-process .web-process-phases-v82 .web-workflow-step-lead{font-size:13px;line-height:1.66}
.page-web-process .web-workflow-mini-label{font-size:7.7px}
.page-web-process .web-workflow-step-grid strong{font-size:12px}
.page-web-process .web-workflow-step-grid p{font-size:10px;line-height:1.62}
.page-web-process .web-workflow-deliverables span{font-size:8.4px;padding:7px 10px}
.page-web-process .web-workflow-output span{font-size:7.6px}
.page-web-process .web-workflow-output strong{font-size:10.8px}
.page-web-process .web-workflow-step-nav-count{font-size:8px}
.page-web-process .web-workflow-step-nav-btn{font-size:9px;min-height:36px}

.page-web-process .web-process-support-intro p{font-size:12px;line-height:1.65}
.page-web-process .web-process-support-label{font-size:7.8px}
.page-web-process .web-process-support-card h3{font-size:18px}
.page-web-process .web-process-support-items span{font-size:9px;padding:7px 10px}
.page-web-process .web-process-principles-inline strong{font-size:10.4px}
.page-web-process .web-process-principles-inline small{font-size:8.5px;line-height:1.4}
.page-web-process .web-process-after-v82 .web-process-after-copy p{font-size:11.5px;line-height:1.6}
.page-web-process .web-process-after-points strong{font-size:11px}
.page-web-process .web-process-after-points small{font-size:8.8px;line-height:1.45}
.page-web-process .web-process-closing-v82 .web-process-closing-copy p{font-size:11.5px;line-height:1.55}

/* Más separación tonal entre fondo y paneles sin cambiar la identidad. */
.page-web-process .web-process-map,
.page-web-process .web-process-phases-v82 .web-workflow-step.is-active,
.page-web-process .web-process-rail-v82,
.page-web-process .web-process-support-card,
.page-web-process .web-process-after-v82,
.page-web-process .web-process-closing-v82{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 22px 52px rgba(0,0,0,.13);
}
.page-web-process .web-process-phases-v82 .web-workflow-step-grid>div{
  background:rgba(3,14,24,.42);
  border-color:rgba(104,212,255,.075);
}

/* El paso seleccionado se siente protagonista, no una simple tabla. */
.page-web-process .web-process-workflow-v82{grid-template-columns:285px minmax(0,1fr);gap:22px}
.page-web-process .web-process-phases-v82 .web-workflow-step{padding:28px 28px}
.page-web-process .web-process-rail-v82 .web-process-rail-step{min-height:58px}
.page-web-process .web-process-rail-step.is-active{
  box-shadow:inset 3px 0 0 rgba(86,210,255,.50),0 8px 24px rgba(0,0,0,.10);
}

/* Tercer acto algo más comercial y compacto. */
.page-web-process .web-process-support-intro{margin-bottom:16px}
.page-web-process .web-process-support-card{padding:17px 19px}
.page-web-process .web-process-principles-inline{margin-top:10px}
.page-web-process .web-process-after-v82{margin-top:22px}
.page-web-process .web-process-closing-v82{margin-top:22px}
.page-web-process #web-process-final-contact{
  box-shadow:0 12px 30px rgba(31,160,235,.18);
}

@media (max-width:1040px){
  .page-web-process .web-process-screen{min-height:0}
  .page-web-process .web-process-screen-hero{padding-top:34px;padding-bottom:38px}
  .page-web-process .web-process-screen-detail{padding-top:40px;padding-bottom:32px}
  .page-web-process .web-process-screen-guidance{padding-top:38px;padding-bottom:26px}
  .page-web-process .web-process-workflow-v82{grid-template-columns:235px minmax(0,1fr)}
}

@media (max-width:860px){
  .page-web-process .web-process-v81-container{padding-top:0}
  .page-web-process .web-process-screen-hero{padding-top:34px}
  .page-web-process .web-process-stage-next{justify-content:stretch;margin-top:16px}
  .page-web-process .web-process-stage-link{width:100%;min-width:0}
  .page-web-process .web-process-section-heading>p,
  .page-web-process .web-process-section-heading-v82>p{font-size:12px}
  .page-web-process .web-process-map-static .web-process-map-node span{font-size:11px}
  .page-web-process .web-process-map-static .web-process-map-node small{font-size:8.4px}
  .page-web-process .web-process-map-footer span{font-size:8.5px}
  .page-web-process .web-process-phases-v82 .web-workflow-step h3{font-size:27px}
  .page-web-process .web-process-phases-v82 .web-workflow-step-lead{font-size:11.8px}
  .page-web-process .web-workflow-step-grid p{font-size:9.5px}
  .page-web-process .web-process-support-intro p{font-size:11.3px}
  .page-web-process .web-process-support-items span{font-size:8.7px}
  .page-web-process .web-process-principles-inline small{font-size:8px}
}

@media (max-width:620px){
  .page-web-process .web-process-screen-hero{padding-top:27px;padding-bottom:32px}
  .page-web-process .web-process-screen-detail{padding-top:34px;padding-bottom:27px}
  .page-web-process .web-process-screen-guidance{padding-top:32px;padding-bottom:24px}
  .page-web-process .web-process-v81-subtitle{font-size:14px}
  .page-web-process .web-process-hero-summary{font-size:8.2px}
  .page-web-process .web-process-map-static .web-process-map-top>div small{font-size:8.2px}
  .page-web-process .web-process-map-cta{font-size:8.8px}
  .page-web-process .web-process-stage-link strong{font-size:10px}
  .page-web-process .web-process-stage-link small{font-size:7.4px}
}

@media (prefers-reduced-motion:reduce){
  .page-web-process .web-process-stage-link,
  .page-web-process .web-process-stage-link i{transition:none}
}


/* =========================================================
   DN TECH — PREMIUM V87 / PROCESS FINAL POLISH
   Cursor light, 3-act progress, directional transitions.
   ========================================================= */
.page-web-process .web-process-screen{
  position:relative;
}

/* 01 / 03 — 03 / 03: discreet narrative marker */
.page-web-process .web-process-act-index{
  position:absolute;
  top:18px;
  right:0;
  z-index:7;
  display:flex;
  align-items:baseline;
  gap:5px;
  color:rgba(164,193,211,.58);
  font-size:8px;
  letter-spacing:.12em;
  font-weight:800;
  pointer-events:none;
}
.page-web-process .web-process-act-index b{
  color:#62d4ff;
  font-size:10px;
  letter-spacing:.08em;
}
.page-web-process .web-process-act-index small{
  margin-left:5px;
  font-size:7px;
  color:rgba(133,176,201,.52);
  letter-spacing:.18em;
}

/* Discreet right-hand 3-act navigator on desktop. */
.page-web-process .web-process-act-rail{
  position:fixed;
  z-index:30;
  right:max(18px,calc((100vw - 1240px)/2 - 42px));
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:10px;
  padding:10px 7px;
  border:1px solid rgba(102,205,248,.10);
  border-radius:999px;
  background:rgba(5,17,29,.62);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:.76;
  transition:opacity .22s ease,border-color .22s ease;
}
.page-web-process .web-process-act-rail:hover{opacity:1;border-color:rgba(102,205,248,.20)}
.page-web-process .web-process-act-rail a{
  position:relative;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  color:rgba(148,181,201,.55);
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  text-decoration:none;
  transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.page-web-process .web-process-act-rail a i{
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:11px;
  background:rgba(79,183,230,.13);
  transform:translateX(-50%);
  pointer-events:none;
}
.page-web-process .web-process-act-rail a:last-child i{display:none}
.page-web-process .web-process-act-rail a.is-active{
  color:#ecfbff;
  background:rgba(51,183,239,.15);
  box-shadow:inset 0 0 0 1px rgba(86,211,255,.24),0 0 18px rgba(53,187,243,.13);
  transform:scale(1.05);
}

/* Pointer-following light: localized to premium interactive surfaces. */
.page-web-process .process-pointer-glow{
  --process-glow-x:50%;
  --process-glow-y:50%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-web-process .process-pointer-glow::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(230px circle at var(--process-glow-x) var(--process-glow-y),rgba(52,191,250,.115),rgba(41,172,232,.040) 34%,transparent 70%);
  opacity:0;
  transition:opacity .24s ease;
}
.page-web-process .process-pointer-glow:hover::after,
.page-web-process .process-pointer-glow:focus-within::after{opacity:1}
.page-web-process .process-pointer-glow > *{position:relative;z-index:3}
.page-web-process .process-pointer-glow{
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.page-web-process .process-pointer-glow:hover{
  border-color:rgba(94,210,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 54px rgba(0,0,0,.15),0 0 30px rgba(40,171,230,.045);
}

/* A small pointer halo on primary/secondary process CTAs. */
.page-web-process .process-pointer-button{
  --process-glow-x:50%;
  --process-glow-y:50%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-web-process .process-pointer-button::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90px circle at var(--process-glow-x) var(--process-glow-y),rgba(255,255,255,.22),transparent 67%);
  opacity:0;
  transition:opacity .18s ease;
}
.page-web-process .process-pointer-button:hover::after{opacity:.65}
.page-web-process .process-pointer-button > *{position:relative;z-index:1}

/* Slightly different light atmosphere by act, but same DN language. */
.page-web-process .web-process-screen-hero::before,
.page-web-process .web-process-screen-detail::before,
.page-web-process .web-process-screen-guidance::before{
  content:"";
  position:absolute;
  inset:10% -8% 8% 28%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 60% 45%,rgba(33,155,218,.045),transparent 64%);
}
.page-web-process .web-process-screen-detail::before{background:radial-gradient(ellipse at 62% 42%,rgba(43,185,241,.060),transparent 64%)}
.page-web-process .web-process-screen-guidance::before{background:radial-gradient(ellipse at 58% 48%,rgba(58,168,223,.040),transparent 66%)}

/* Directional phase transition: forward from right, backward from left. */
.page-web-process .web-process-phases-v82.is-forward-change .web-workflow-step.is-active .web-workflow-step-body{
  animation:processStepInForward .28s cubic-bezier(.2,.75,.3,1) both;
}
.page-web-process .web-process-phases-v82.is-backward-change .web-workflow-step.is-active .web-workflow-step-body{
  animation:processStepInBackward .28s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes processStepInForward{from{opacity:.2;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes processStepInBackward{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* Keep long copy easy to scan after increasing typography in V86. */
.page-web-process .web-process-v81-subtitle{max-width:680px}
.page-web-process .web-process-section-heading-v82>p{max-width:710px}
.page-web-process .web-workflow-step-lead{max-width:900px}
.page-web-process .web-process-support-intro>p{max-width:560px}

/* Slightly stronger process progress. */
.page-web-process .web-process-panel-progress-track{
  height:2px;
  background:rgba(74,170,215,.13);
}
.page-web-process .web-process-panel-progress-fill{
  box-shadow:0 0 14px rgba(67,199,255,.34);
}

@media (max-width:1180px){
  .page-web-process .web-process-act-rail{display:none}
}
@media (max-width:860px){
  .page-web-process .web-process-act-index{display:none}
  .page-web-process .process-pointer-glow::after,
  .page-web-process .process-pointer-button::after{display:none}
  .page-web-process .process-pointer-glow:hover{transform:none;box-shadow:inherit}
}
@media (prefers-reduced-motion:reduce){
  .page-web-process .web-process-phases-v82.is-forward-change .web-workflow-step.is-active .web-workflow-step-body,
  .page-web-process .web-process-phases-v82.is-backward-change .web-workflow-step.is-active .web-workflow-step-body{animation:none}
  .page-web-process .process-pointer-glow,
  .page-web-process .process-pointer-glow::after,
  .page-web-process .process-pointer-button::after,
  .page-web-process .web-process-act-rail a{transition:none}
}


/* =========================================================
   DN TECH — PREMIUM V88 / PROCESS AMBIENT CURSOR
   Luz ambiental global: sigue al puntero por la página, no dentro
   de la caja inicial ni de cards individuales.
   ========================================================= */
.page-web-process .web-process-view{
  position:relative;
  isolation:isolate;
}
.page-web-process .web-process-v81-container{
  position:relative;
  z-index:1;
}
.page-web-process .process-page-cursor-light{
  --process-page-x:50vw;
  --process-page-y:42vh;
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(560px circle at var(--process-page-x) var(--process-page-y),
      rgba(69,199,255,.105) 0%,
      rgba(37,158,224,.050) 28%,
      rgba(25,105,180,.020) 48%,
      transparent 72%);
  opacity:0;
  transition:opacity .24s ease;
  will-change:opacity,background;
}
.page-web-process .process-page-cursor-light.is-visible{opacity:1}

/* V87 local halos are intentionally retired on Proceso. Cards keep their
   normal border/hover behavior while the light now belongs to the page. */
.page-web-process .process-pointer-glow::after,
.page-web-process .process-pointer-button::after{display:none!important}
.page-web-process .process-pointer-glow:hover{
  box-shadow:inherit!important;
}

@media (max-width:860px), (hover:none), (pointer:coarse){
  .page-web-process .process-page-cursor-light{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .page-web-process .process-page-cursor-light{display:none!important}
}


/* =========================================================
   DN TECH — PREMIUM V89 / WEB FAMILY CONSISTENCY
   Unifica el dark-glass del header y mantiene la navegación estable
   mientras las páginas de Desarrollo web cambian lateralmente.
   ========================================================= */
body.page-web-showcase .site-header,
body.page-web-projects .site-header,
body.page-web-process .site-header,
body.page-web-plans .site-header{
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),
    rgba(5,14,25,.975) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:rgba(105,201,243,.12);
}
body.page-web-showcase .site-header.is-scrolled,
body.page-web-projects .site-header.is-scrolled,
body.page-web-process .site-header.is-scrolled,
body.page-web-plans .site-header.is-scrolled{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    rgba(4,12,22,.992) !important;
}

/* =========================================================
   DN TECH — PREMIUM V90 / WEB HEADER EXACT MATCH
   Fondo opaco compartido para evitar que el contenido de cada página
   altere visualmente el color del header a través del backdrop-filter.
   ========================================================= */
body.page-web-showcase .site-header,
body.page-web-projects .site-header,
body.page-web-process .site-header,
body.page-web-plans .site-header{
  background:linear-gradient(180deg,#09141f 0%,#07111b 100%) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom-color:rgba(105,201,243,.12) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.012),0 10px 30px rgba(0,0,0,.12) !important;
}
body.page-web-showcase .site-header.is-scrolled,
body.page-web-projects .site-header.is-scrolled,
body.page-web-process .site-header.is-scrolled,
body.page-web-plans .site-header.is-scrolled{
  background:linear-gradient(180deg,#07111b 0%,#050e18 100%) !important;
  border-bottom-color:rgba(105,201,243,.14) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.012) !important;
}
/* Mantiene el fino acento cyan inferior, idéntico en toda la familia web. */
body.page-web-showcase .site-header::after,
body.page-web-projects .site-header::after,
body.page-web-process .site-header::after,
body.page-web-plans .site-header::after{
  opacity:.42 !important;
}
body.page-web-showcase .site-header.is-scrolled::after,
body.page-web-projects .site-header.is-scrolled::after,
body.page-web-process .site-header.is-scrolled::after,
body.page-web-plans .site-header.is-scrolled::after{
  opacity:.54 !important;
}


/* =========================================================
   DN TECH — PREMIUM V91 / PLANES & PRECIOS
   Jerarquía comercial, legibilidad, mantenimiento y coherencia visual.
   ========================================================= */
.page-web-plans .web-plans-container{padding-top:54px;padding-bottom:62px;position:relative}
.page-web-plans .web-plans-heading-v91{max-width:940px;margin-bottom:30px}
.page-web-plans .web-plans-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:#718da5;font-size:11px;font-weight:700}
.page-web-plans .web-plans-breadcrumb a{color:#718da5;text-decoration:none;transition:color .2s ease}.page-web-plans .web-plans-breadcrumb a:hover{color:#b9d8ed}.page-web-plans .web-plans-breadcrumb span{opacity:.45}.page-web-plans .web-plans-breadcrumb strong{font-weight:750;color:#8eabc1}
.page-web-plans .web-plans-title{max-width:900px;margin:12px 0 14px;font-size:clamp(43px,5vw,68px);line-height:1.02;letter-spacing:-.055em;color:#f5f9fd}
.page-web-plans .web-plans-subtitle{max-width:790px;margin:0;color:#95adbf;font-size:15px;line-height:1.65}
.page-web-plans .web-plans-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:20px;color:#7896ac;font-size:10px;font-weight:750}.page-web-plans .web-plans-hero-meta i{font-style:normal;color:#28506c}.page-web-plans .web-plans-pricing{position:relative}
.page-web-plans .web-plans-grid-v91{gap:16px;align-items:stretch}
.page-web-plans .web-plan-card-v91{min-height:510px;padding:26px 25px 23px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(7,22,36,.55));border-color:rgba(128,204,240,.13)}
.page-web-plans .web-plan-card-v91::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-165px;top:-145px;background:radial-gradient(circle,rgba(52,185,255,.13),transparent 68%);pointer-events:none;opacity:.7;transition:transform .35s ease,opacity .35s ease}.page-web-plans .web-plan-card-v91:hover::after{transform:translate(-8px,8px);opacity:1}
.page-web-plans .web-plan-card-featured{transform:translateY(-5px);border-color:rgba(83,202,255,.34);background:linear-gradient(145deg,rgba(21,108,174,.19),rgba(8,25,41,.66));box-shadow:0 28px 65px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.045)}.page-web-plans .web-plan-card-featured:hover{transform:translateY(-9px)}
.page-web-plans .web-plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.page-web-plans .web-plan-tag{margin:0;font-size:8px}.page-web-plans .web-plan-index{color:#42647e;font-size:9px;font-weight:900;letter-spacing:.16em}
.page-web-plans .web-plan-popular{top:18px;right:52px;padding:6px 9px;font-size:7px;background:rgba(45,189,255,.12);border:1px solid rgba(81,204,255,.16)}
.page-web-plans .web-plan-card-v91 h2{min-height:auto;margin-bottom:17px;font-size:22px;line-height:1.2;letter-spacing:-.025em}.page-web-plans .web-plan-price{margin-bottom:15px}.page-web-plans .web-plan-price small{font-size:9px}.page-web-plans .web-plan-price strong{font-size:36px}.page-web-plans .web-plan-card-v91>p{min-height:74px;margin-bottom:15px;font-size:11.5px;line-height:1.65;color:#8ea8bb}.page-web-plans .web-plan-card-v91 li{padding:9px 0;font-size:10.5px;color:#b4c7d5}.page-web-plans .web-plan-card-v91 li::before{margin-right:9px}
.page-web-plans .web-plan-cta{left:25px;right:25px;bottom:21px;align-items:center;padding:13px 4px 0;color:#eaf7ff;font-size:10.5px;opacity:1}.page-web-plans .web-plan-cta b{font-size:14px;color:#5dd4ff;transition:transform .2s ease}.page-web-plans .web-plan-cta:hover{color:#6bd8ff}.page-web-plans .web-plan-cta:hover b{transform:translate(3px,-2px)}
.page-web-plans .web-plans-price-note{margin:13px 3px 0;color:#6f8ba1;font-size:9.5px;line-height:1.55}
.page-web-plans .web-plans-section-kicker{display:inline-block;color:#5bd1ff;font-size:7.5px;font-weight:900;letter-spacing:.17em}.page-web-plans .web-plans-section-heading{max-width:570px}.page-web-plans .web-plans-section-heading h2,.page-web-plans .web-plans-extras-copy h2,.page-web-plans .web-plans-closing-v91 h2{margin:8px 0 7px;color:#f2f8fd;font-size:28px;line-height:1.13;letter-spacing:-.035em}.page-web-plans .web-plans-section-heading p,.page-web-plans .web-plans-extras-copy p,.page-web-plans .web-plans-closing-v91 p{margin:0;color:#819caf;font-size:11px;line-height:1.65}
.page-web-plans .web-plans-common-v91{margin-top:38px;padding:26px;border:1px solid rgba(104,212,255,.11);border-radius:22px;background:linear-gradient(135deg,rgba(8,27,44,.72),rgba(5,17,29,.55))}.page-web-plans .web-plans-common-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:21px}.page-web-plans .web-plans-common-grid article{display:grid;grid-template-columns:35px 1fr;column-gap:10px;align-items:center;min-height:88px;padding:13px;border:1px solid rgba(255,255,255,.055);border-radius:15px;background:rgba(2,12,22,.32)}.page-web-plans .web-plans-common-grid article>span{grid-row:1/3;display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:rgba(44,180,244,.09);color:#66d7ff;font-size:15px}.page-web-plans .web-plans-common-grid strong{color:#dcebf6;font-size:10.5px}.page-web-plans .web-plans-common-grid small{color:#6f8da3;font-size:8.5px;line-height:1.45}
.page-web-plans .web-plans-extras-v91{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:center;margin-top:16px;padding:24px 26px;border:1px solid rgba(104,212,255,.09);border-radius:20px;background:rgba(3,15,26,.35)}.page-web-plans .web-plans-extras-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.page-web-plans .web-plans-extras-list span{padding:8px 11px;border:1px solid rgba(110,200,239,.1);border-radius:999px;background:rgba(20,47,67,.42);color:#94b4c9;font-size:9px;font-weight:750}
.page-web-plans .web-plans-maintenance-v91{grid-template-columns:46px minmax(0,1.35fr) minmax(260px,.85fr) auto;margin-top:16px;padding:22px 24px;border-radius:20px;border-color:rgba(85,201,255,.13);background:linear-gradient(125deg,rgba(8,34,54,.76),rgba(3,14,25,.55))}.page-web-plans .web-plans-maintenance-v91 .web-maintenance-icon{width:46px;height:46px;border-radius:14px;font-size:20px}.page-web-plans .web-maintenance-copy h2{margin:5px 0 5px;color:#edf8ff;font-size:19px;letter-spacing:-.02em}.page-web-plans .web-maintenance-copy h2 strong{color:#61d5ff}.page-web-plans .web-maintenance-copy p{margin:0;max-width:610px;color:#7795aa;font-size:9.5px;line-height:1.55}.page-web-plans .web-maintenance-points{display:flex;flex-wrap:wrap;gap:6px}.page-web-plans .web-maintenance-points span{padding:7px 9px;border-radius:999px;background:rgba(32,72,98,.4);border:1px solid rgba(102,193,234,.08);color:#89aabd;font-size:8.5px}.page-web-plans .web-maintenance-button{white-space:nowrap}.page-web-plans .web-maintenance-footnote{grid-column:2/-1;margin-top:-4px;color:#547187;font-size:7.5px}
.page-web-plans .web-plans-closing-v91{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:16px;padding:28px;border:1px solid rgba(83,199,255,.18);border-radius:22px;background:linear-gradient(120deg,rgba(7,41,65,.9),rgba(4,20,34,.78));box-shadow:0 20px 55px rgba(0,0,0,.14)}.page-web-plans .web-plans-closing-v91>div:first-child{max-width:710px}.page-web-plans .web-plans-closing-v91 h2 span{color:#5dd4ff}.page-web-plans .web-plans-closing-actions{display:flex;gap:10px;flex-shrink:0}
.page-web-plans .footer-brand-new{display:inline-flex;align-items:center;gap:10px}.page-web-plans .footer-brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(75,193,244,.22);border-radius:10px;background:linear-gradient(145deg,rgba(24,80,108,.7),rgba(4,20,31,.86));overflow:hidden}.page-web-plans .footer-brand-icon{width:24px!important;height:24px!important;max-width:24px!important;object-fit:contain;display:block}.page-web-plans .footer-brand-copy{display:grid;line-height:1}.page-web-plans .footer-brand-main{color:#f2f9ff;font-size:12px;font-weight:900;letter-spacing:.035em}.page-web-plans .footer-brand-city{margin-top:4px;color:#64cfff;font-size:7px;font-weight:900;letter-spacing:.2em}
/* ambient light for plans */
.page-web-plans .premium-web-view{isolation:isolate}.page-web-plans .plans-page-cursor-light{position:fixed;left:0;top:0;z-index:-1;width:520px;height:520px;transform:translate(calc(var(--plans-page-x,50vw) - 50%),calc(var(--plans-page-y,45vh) - 50%));border-radius:50%;background:radial-gradient(circle,rgba(38,176,245,.11) 0%,rgba(30,145,222,.055) 28%,rgba(16,93,159,.018) 52%,transparent 72%);filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .25s ease}.page-web-plans .plans-page-cursor-light.is-visible{opacity:1}
/* prices page consistency */
.page-prices #prices-actions{display:flex;gap:10px;flex-wrap:wrap}.page-prices #prices-actions .btn{min-width:0}.page-prices .web-pricing-card .price-note{line-height:1.6}
@media(max-width:980px){.page-web-plans .web-plans-common-grid{grid-template-columns:repeat(2,1fr)}.page-web-plans .web-plans-extras-v91{grid-template-columns:1fr}.page-web-plans .web-plans-extras-list{justify-content:flex-start}.page-web-plans .web-plans-maintenance-v91{grid-template-columns:46px 1fr}.page-web-plans .web-maintenance-points,.page-web-plans .web-maintenance-button,.page-web-plans .web-maintenance-footnote{grid-column:2}.page-web-plans .web-plans-closing-v91{align-items:flex-start;flex-direction:column}.page-web-plans .web-plan-card-featured{transform:none}.page-web-plans .web-plan-card-featured:hover{transform:translateY(-4px)}}
@media(max-width:720px){.page-web-plans .web-plans-container{padding-top:34px;padding-bottom:42px}.page-web-plans .web-plans-title{font-size:clamp(38px,11vw,54px)}.page-web-plans .web-plans-subtitle{font-size:13px}.page-web-plans .web-plans-hero-meta{gap:7px;font-size:8.5px}.page-web-plans .web-plan-card-v91{min-height:0;padding-bottom:72px}.page-web-plans .web-plan-card-v91>p{min-height:0}.page-web-plans .web-plans-common-v91,.page-web-plans .web-plans-extras-v91,.page-web-plans .web-plans-maintenance-v91,.page-web-plans .web-plans-closing-v91{padding:20px}.page-web-plans .web-plans-common-grid{grid-template-columns:1fr}.page-web-plans .web-plans-maintenance-v91{grid-template-columns:40px 1fr}.page-web-plans .web-maintenance-points{gap:5px}.page-web-plans .web-maintenance-button{width:100%;justify-content:center}.page-web-plans .web-plans-closing-actions{width:100%;flex-direction:column}.page-web-plans .web-plans-closing-actions .btn{width:100%;justify-content:center}.page-web-plans .plans-page-cursor-light{display:none!important}}
@media(prefers-reduced-motion:reduce){.page-web-plans .plans-page-cursor-light{display:none!important}}

/* =========================================================
   DN TECH — PREMIUM V92 / PLANES FINAL POLISH
   ========================================================= */
.page-web-plans .web-plans-grid-v91{
  gap:18px;
}
.page-web-plans .web-plan-card-v91{
  min-height:520px;
  display:grid;
  grid-template-rows:auto auto auto auto 1fr auto;
  padding:27px 26px 24px;
  border-color:rgba(132,206,241,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.048),rgba(6,20,33,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 16px 38px rgba(0,0,0,.10);
}
.page-web-plans .web-plan-card-v91:hover{
  border-color:rgba(96,211,255,.27);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 50px rgba(0,0,0,.17);
}
.page-web-plans .web-plan-card-featured{
  border-color:rgba(86,206,255,.48);
  background:linear-gradient(145deg,rgba(18,105,173,.24),rgba(6,24,40,.76));
  box-shadow:0 28px 68px rgba(0,0,0,.24),0 0 0 1px rgba(78,203,255,.055),inset 0 1px 0 rgba(255,255,255,.05);
}
.page-web-plans .web-plan-card-featured::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(65,210,255,.09),transparent 31%,transparent 68%,rgba(77,169,255,.05));
  opacity:.8;
}
.page-web-plans .web-plan-card-featured:hover{
  border-color:rgba(101,219,255,.62);
  box-shadow:0 34px 78px rgba(0,0,0,.27),0 0 32px rgba(33,176,238,.075),inset 0 1px 0 rgba(255,255,255,.06);
}
.page-web-plans .web-plan-card-top{
  margin-bottom:18px;
}
.page-web-plans .web-plan-card-v91 h2{
  min-height:54px;
  margin-bottom:13px;
  font-size:23px;
  line-height:1.18;
}
.page-web-plans .web-plan-price{
  margin-bottom:16px;
}
.page-web-plans .web-plan-price small{
  font-size:8.5px;
  letter-spacing:.08em;
}
.page-web-plans .web-plan-price strong{
  font-size:38px;
}
.page-web-plans .web-plan-card-v91>p{
  min-height:76px;
  margin-bottom:18px;
  color:#91aabd;
  font-size:11.5px;
  line-height:1.65;
}
.page-web-plans .web-plan-card-v91 ul{
  display:grid;
  align-content:start;
  gap:11px;
  margin:0 0 20px;
  padding:0;
}
.page-web-plans .web-plan-card-v91 li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:0;
  border:0!important;
  color:#b5c9d8;
  font-size:10.5px;
  line-height:1.45;
}
.page-web-plans .web-plan-card-v91 li::before{
  flex:0 0 auto;
  margin:0;
  color:#61d6ff;
  transform:translateY(1px);
}
.page-web-plans .web-plan-cta{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  align-self:end;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  margin-top:auto;
  padding:0 14px;
  border:1px solid rgba(101,200,239,.12)!important;
  border-radius:13px;
  background:rgba(9,31,48,.58);
  color:#e9f7ff;
  font-size:10.5px;
  font-weight:850;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease;
}
.page-web-plans .web-plan-cta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(180px circle at var(--plan-x,50%) var(--plan-y,50%),rgba(56,197,255,.12),transparent 65%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.page-web-plans .web-plan-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(92,210,255,.28)!important;
  background:rgba(10,40,62,.72);
  box-shadow:0 10px 26px rgba(0,0,0,.15);
  color:#6cdbff;
}
.page-web-plans .web-plan-cta:hover::before{opacity:1}
.page-web-plans .web-plan-cta b{
  position:relative;
  z-index:1;
  font-size:15px;
}
.page-web-plans .web-plan-cta span{
  position:relative;
  z-index:1;
}
.page-web-plans .web-plan-card-featured .web-plan-cta{
  border-color:rgba(91,213,255,.23)!important;
  background:linear-gradient(135deg,rgba(20,111,174,.32),rgba(10,44,69,.72));
}
.page-web-plans .web-plans-price-note{
  margin-top:15px;
  font-size:9.5px;
}

/* Maintenance — complementary service rather than a fourth pricing card */
.page-web-plans .web-plans-maintenance-v91{
  grid-template-columns:50px minmax(0,1.3fr) minmax(260px,.85fr) auto;
  padding:23px 24px;
  border-color:rgba(86,203,255,.16);
  background:linear-gradient(125deg,rgba(8,37,59,.82),rgba(3,15,26,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.page-web-plans .web-plans-maintenance-v91 .web-maintenance-icon{
  width:50px;
  height:50px;
  background:linear-gradient(145deg,rgba(40,174,233,.15),rgba(15,71,101,.14));
  border:1px solid rgba(83,202,250,.13);
}
.page-web-plans .web-maintenance-copy h2{
  font-size:20px;
}
.page-web-plans .web-maintenance-copy p{
  color:#809db1;
  font-size:10px;
}
.page-web-plans .web-maintenance-button{
  border-color:rgba(97,205,247,.18);
  background:rgba(10,31,46,.74);
  color:#dff4ff;
}
.page-web-plans .web-maintenance-button:hover{
  border-color:rgba(97,213,255,.35);
  background:rgba(13,49,73,.82);
}

/* Closing — clearer bridge from pricing to conversation */
.page-web-plans .web-plans-closing-v91{
  padding:29px 28px;
  border-color:rgba(83,199,255,.2);
}
.page-web-plans .web-plans-closing-v91 h2{
  max-width:760px;
  font-size:30px;
}
.page-web-plans .web-plans-closing-v91 p{
  max-width:690px;
  color:#8ca6b9;
  font-size:10.5px;
}

@media(max-width:980px){
  .page-web-plans .web-plan-card-v91{
    min-height:0;
  }
  .page-web-plans .web-plans-maintenance-v91{
    grid-template-columns:46px 1fr;
  }
}
@media(max-width:720px){
  .page-web-plans .web-plan-card-v91{
    display:block;
    padding:23px;
  }
  .page-web-plans .web-plan-card-v91 h2,
  .page-web-plans .web-plan-card-v91>p{
    min-height:0;
  }
  .page-web-plans .web-plan-cta{
    margin-top:22px;
  }
}

/* =========================================================
   DN TECH — PREMIUM V93 / PLANES FINAL CLOSE
   ========================================================= */
.page-web-plans .web-plan-needs{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(104,212,255,.10);
  border-radius:16px;
  background:rgba(4,18,30,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.page-web-plans .web-plan-needs-label{
  color:#79dfff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.page-web-plans .web-plan-needs-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.page-web-plans .web-plan-need{
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(109,195,234,.10);
  border-radius:11px;
  background:rgba(13,37,54,.42);
  color:#8facbf;
  font:inherit;
  font-size:9.5px;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.page-web-plans .web-plan-need:hover,
.page-web-plans .web-plan-need.is-active{
  color:#eefaff;
  border-color:rgba(86,210,255,.30);
  background:rgba(20,83,119,.46);
  box-shadow:0 7px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.03);
}
.page-web-plans .web-plan-need:hover{transform:translateY(-1px)}
.page-web-plans .web-plan-needs>small{
  max-width:250px;
  color:#648298;
  font-size:8px;
  line-height:1.45;
}
.page-web-plans .web-plan-card-v91{
  transition:transform .24s var(--premium-ease),border-color .24s ease,box-shadow .24s ease,filter .24s ease;
}
.page-web-plans .web-plan-card-v91.is-guided{
  transform:translateY(-7px);
  border-color:rgba(98,216,255,.42);
  box-shadow:0 28px 64px rgba(0,0,0,.23),0 0 28px rgba(42,177,238,.08),inset 0 1px 0 rgba(255,255,255,.05);
}
.page-web-plans .web-plan-card-v91:not(.is-guided).is-dimmed{filter:saturate(.82) brightness(.93)}
.page-web-plans .web-plan-fit{
  display:block;
  min-height:30px;
  margin:-7px 0 13px;
  color:#65cff3;
  font-size:9px;
  font-weight:800;
  line-height:1.45;
}
.page-web-plans .web-plan-card-featured .web-plan-fit{color:#8ee5ff}
.page-web-plans .web-plan-card-v91>p{
  color:#a2b8c8;
}
.page-web-plans .web-plan-card-v91 li{
  color:#c0d0dc;
}
.page-web-plans .web-plan-card-featured .web-plan-cta{
  border-color:rgba(101,222,255,.33)!important;
  background:linear-gradient(135deg,rgba(22,133,202,.50),rgba(10,56,87,.80));
  color:#f3fbff;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.page-web-plans .web-plan-card-featured .web-plan-cta:hover{
  background:linear-gradient(135deg,rgba(25,153,226,.62),rgba(11,67,102,.88));
  box-shadow:0 14px 34px rgba(0,0,0,.19),0 0 22px rgba(45,194,251,.07);
}
.page-web-plans .web-plans-compare{
  margin-top:16px;
  padding:15px 16px;
  border:1px solid rgba(104,212,255,.09);
  border-radius:16px;
  background:rgba(3,15,26,.38);
}
.page-web-plans .web-plans-compare-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:11px;
}
.page-web-plans .web-plans-compare-head span{
  color:#dcecf7;
  font-size:10px;
  font-weight:900;
}
.page-web-plans .web-plans-compare-head small{
  color:#638096;
  font-size:8px;
}
.page-web-plans .web-plans-compare-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.page-web-plans .web-plans-compare-grid article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:12px;
  background:rgba(7,24,38,.42);
  transition:border-color .2s ease,background .2s ease,transform .2s ease,opacity .2s ease;
}
.page-web-plans .web-plans-compare-grid article strong{
  color:#e7f4fc;
  font-size:9.5px;
}
.page-web-plans .web-plans-compare-grid article span{
  color:#7794a8;
  font-size:8px;
  line-height:1.4;
}
.page-web-plans .web-plans-compare-grid article.is-guided{
  border-color:rgba(92,210,255,.24);
  background:rgba(11,48,72,.56);
  transform:translateY(-2px);
}
.page-web-plans .web-plans-extras-v91{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
}
.page-web-plans .web-plans-extras-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.page-web-plans .web-plans-extra-group{
  min-width:0;
  padding:12px;
  border:1px solid rgba(105,196,236,.075);
  border-radius:13px;
  background:rgba(7,25,39,.38);
}
.page-web-plans .web-plans-extra-group>strong{
  display:block;
  margin-bottom:8px;
  color:#cfe9f8;
  font-size:9px;
  font-weight:900;
}
.page-web-plans .web-plans-extra-group>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.page-web-plans .web-plans-extra-group span{
  padding:6px 8px;
  border:1px solid rgba(110,200,239,.08);
  border-radius:999px;
  background:rgba(20,47,67,.36);
  color:#8eacbf;
  font-size:7.8px;
  font-weight:750;
  line-height:1.2;
}
.page-web-plans .maintenance-limit{
  display:inline;
  color:#9db5c6;
  font-weight:750;
}
.page-web-plans .web-plans-price-note{
  color:#7b98ac;
}

@media(max-width:980px){
  .page-web-plans .web-plan-needs{grid-template-columns:1fr}
  .page-web-plans .web-plan-needs>small{max-width:none}
  .page-web-plans .web-plans-extras-v91{grid-template-columns:1fr}
}
@media(max-width:720px){
  .page-web-plans .web-plan-needs{padding:12px}
  .page-web-plans .web-plan-needs-options{grid-template-columns:1fr}
  .page-web-plans .web-plan-need{min-height:42px;text-align:left}
  .page-web-plans .web-plan-fit{min-height:0;margin-top:-5px}
  .page-web-plans .web-plans-compare-grid{grid-template-columns:1fr}
  .page-web-plans .web-plans-extras-groups{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .page-web-plans .web-plan-need,.page-web-plans .web-plan-card-v91,.page-web-plans .web-plans-compare-grid article{transition:none!important}
}


/* =========================================================
   DN TECH — PREMIUM V94 / PLANES CLOSED
   ========================================================= */
.page-web-plans .web-plan-needs{display:none!important}
.page-web-plans .web-plan-orientation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 0 20px;
  padding:15px 17px;
  border:1px solid rgba(104,212,255,.10);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(4,18,30,.62),rgba(8,34,51,.46));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.page-web-plans .web-plan-orientation-copy{
  display:grid;
  grid-template-columns:auto auto;
  align-items:baseline;
  gap:4px 13px;
  min-width:0;
}
.page-web-plans .web-plan-orientation-kicker{
  grid-column:1/-1;
  color:#79dfff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.page-web-plans .web-plan-orientation-copy strong{
  color:#eef8fe;
  font-size:12px;
  font-weight:900;
  line-height:1.3;
}
.page-web-plans .web-plan-orientation-copy small{
  color:#7f9bad;
  font-size:9px;
  line-height:1.45;
}
.page-web-plans .web-plan-orientation-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 13px;
  border:1px solid rgba(92,210,255,.12);
  border-radius:11px;
  color:#9bdfff;
  background:rgba(12,45,66,.42);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.page-web-plans .web-plan-orientation-link:hover{
  transform:translateY(-1px);
  border-color:rgba(92,210,255,.30);
  background:rgba(18,69,98,.54);
  color:#eaf9ff;
}
.page-web-plans .web-plan-card-v91{
  transition:transform .24s var(--premium-ease),border-color .24s ease,box-shadow .24s ease,filter .24s ease,opacity .24s ease;
}
@media (hover:hover) and (pointer:fine){
  .page-web-plans .web-plans-grid-v91:hover .web-plan-card-v91:not(:hover){
    filter:saturate(.90) brightness(.96);
    opacity:.88;
  }
  .page-web-plans .web-plans-grid-v91 .web-plan-card-v91:hover{
    transform:translateY(-4px);
    border-color:rgba(91,211,255,.27);
    box-shadow:0 24px 58px rgba(0,0,0,.18),0 0 24px rgba(42,177,238,.055),inset 0 1px 0 rgba(255,255,255,.04);
  }
  .page-web-plans .web-plans-grid-v91 .web-plan-card-featured:hover{
    border-color:rgba(101,222,255,.45);
    box-shadow:0 28px 66px rgba(0,0,0,.22),0 0 30px rgba(42,177,238,.09),inset 0 1px 0 rgba(255,255,255,.05);
  }
}
@media(max-width:980px){
  .page-web-plans .web-plan-orientation{align-items:flex-start;flex-direction:column;gap:12px}
  .page-web-plans .web-plan-orientation-link{white-space:normal}
}
@media(max-width:720px){
  .page-web-plans .web-plan-orientation{padding:14px}
  .page-web-plans .web-plan-orientation-copy{grid-template-columns:1fr;gap:5px}
  .page-web-plans .web-plan-orientation-copy strong{font-size:11.5px}
  .page-web-plans .web-plan-orientation-copy small{font-size:9px}
  .page-web-plans .web-plan-orientation-link{width:100%;justify-content:space-between;min-height:42px}
}
@media(prefers-reduced-motion:reduce){
  .page-web-plans .web-plan-orientation-link,.page-web-plans .web-plan-card-v91{transition:none!important}
}

/* =========================================================
   DN TECH — PREMIUM V95 / POR QUÉ DN TECH
   ========================================================= */
body.page-why-dn{
  --why-cyan:#48cfff;
  --why-cyan-2:#25aef2;
  --why-line:rgba(105,205,246,.13);
  --why-panel:rgba(7,25,39,.76);
  --why-panel-2:rgba(10,34,52,.68);
  background:#050d18;
  color:#eff8fe;
}
body.page-why-dn .site-header,
body.page-why-dn .site-header.is-scrolled{
  background:linear-gradient(180deg,#09141f 0%,#07111b 100%) !important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom-color:rgba(105,201,243,.12)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.012),0 10px 30px rgba(0,0,0,.12)!important;
}
body.page-why-dn .site-header.is-scrolled{
  background:linear-gradient(180deg,#07111b 0%,#050e18 100%)!important;
  border-bottom-color:rgba(105,201,243,.14)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.012)!important;
}
body.page-why-dn .site-header::after{opacity:.42!important}
body.page-why-dn .site-header.is-scrolled::after{opacity:.54!important}
.page-why-dn .why-main{display:block;width:100%;position:relative;overflow:hidden;background:
  radial-gradient(circle at 88% 14%,rgba(24,111,166,.17),transparent 31%),
  radial-gradient(circle at 18% 59%,rgba(21,80,120,.09),transparent 28%),
  #050d18;
}
.page-why-dn .why-main::after{
  content:"";position:absolute;right:-22vw;top:120px;width:58vw;height:58vw;border:1px solid rgba(79,185,232,.045);border-radius:50%;pointer-events:none;box-shadow:0 0 0 9vw rgba(42,143,195,.018),0 0 0 18vw rgba(42,143,195,.012)
}
.page-why-dn .why-section{position:relative;z-index:2}
.page-why-dn .why-hero{min-height:calc(100vh - 74px);display:flex;align-items:center;padding:54px 0 42px;border-bottom:1px solid rgba(103,196,238,.08)}
.page-why-dn .why-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:62px;align-items:center}
.page-why-dn .why-breadcrumb{display:flex;gap:10px;align-items:center;margin-bottom:29px;color:#66869b;font-size:10px;font-weight:700}.page-why-dn .why-breadcrumb strong{color:#87a9bd}.page-why-dn .why-breadcrumb span:nth-child(2){color:#315069}
.page-why-dn .why-eyebrow,.page-why-dn .why-section-kicker{display:inline-flex;align-items:center;gap:10px;color:#59d5ff;font-size:8.5px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}.page-why-dn .why-eyebrow i{width:7px;height:7px;border-radius:50%;background:#52e1bc;box-shadow:0 0 0 7px rgba(63,217,180,.08),0 0 16px rgba(63,217,180,.28)}
.page-why-dn .why-hero h1{max-width:800px;margin:24px 0 20px;font-size:clamp(46px,5.2vw,78px);line-height:.98;letter-spacing:-.045em}.page-why-dn .why-hero h1 span,.page-why-dn .why-section-heading h2 span,.page-why-dn .why-two-worlds-head h2 span,.page-why-dn .why-fit-copy h2 span,.page-why-dn .why-closing-card h2 span{background:linear-gradient(90deg,#27b7f7,#70ddff);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-why-dn .why-hero-copy>p{max-width:690px;margin:0;color:#94afc1;font-size:15px;line-height:1.72}
.page-why-dn .why-hero-actions{display:flex;gap:12px;margin-top:28px}.page-why-dn .why-primary,.page-why-dn .why-secondary{min-height:50px;padding:0 20px;border-radius:14px;font-size:11px;font-weight:900}.page-why-dn .why-secondary{border:1px solid rgba(111,204,245,.22);background:rgba(7,25,39,.62);color:#e7f6ff}.page-why-dn .why-secondary:hover{border-color:rgba(95,213,255,.43);background:rgba(11,43,63,.74);transform:translateY(-2px)}
.page-why-dn .why-hero-meta{display:flex;align-items:center;gap:12px;margin-top:22px;color:#718fa3;font-size:9px;font-weight:750}.page-why-dn .why-hero-meta b{color:#28536d;font-weight:400}
.page-why-dn .why-manifesto{position:relative;padding:25px;border:1px solid rgba(94,203,247,.18);border-radius:25px;background:linear-gradient(145deg,rgba(9,37,58,.94),rgba(4,18,31,.84));box-shadow:0 28px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
.page-why-dn .why-manifesto::before{content:"";position:absolute;width:300px;height:300px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(38,177,236,.13),transparent 67%);pointer-events:none}
.page-why-dn .why-manifesto-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid rgba(114,202,241,.09)}.page-why-dn .why-manifesto-head small{color:#61d6ff;font-size:7.5px;font-weight:950;letter-spacing:.16em}.page-why-dn .why-manifesto-head h2{margin:7px 0 0;font-size:22px;line-height:1.15}.page-why-dn .why-manifesto-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(99,204,248,.1);border-radius:999px;background:rgba(3,16,27,.5);color:#84a4b7;font-size:7.5px;font-weight:800;white-space:nowrap}.page-why-dn .why-manifesto-badge i{width:6px;height:6px;border-radius:50%;background:#50ddb7;box-shadow:0 0 11px rgba(80,221,183,.4)}
.page-why-dn .why-manifesto-list{display:grid;gap:7px;padding:16px 0}.page-why-dn .why-manifesto-step{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;padding:11px 12px;border:1px solid transparent;border-radius:14px;transition:background .25s ease,border-color .25s ease,transform .25s ease}.page-why-dn .why-manifesto-step>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(89,198,242,.15);border-radius:12px;background:#071827;color:#6ccff2;font-size:9px;font-weight:900}.page-why-dn .why-manifesto-step strong{display:block;margin-bottom:3px;font-size:11.5px}.page-why-dn .why-manifesto-step small{color:#7593a7;font-size:8.5px;line-height:1.4}.page-why-dn .why-manifesto-step.is-active{border-color:rgba(78,205,255,.22);background:rgba(19,76,108,.26);transform:translateX(4px)}.page-why-dn .why-manifesto-step.is-active>span{border-color:rgba(73,213,255,.42);background:rgba(19,86,120,.58);color:#edfbff;box-shadow:0 0 24px rgba(52,191,246,.12)}
.page-why-dn .why-manifesto-foot{display:flex;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid rgba(114,202,241,.09);color:#708da0;font-size:8px;font-weight:800}
.page-why-dn .why-principles-section{padding:88px 0 70px}.page-why-dn .why-section-heading{max-width:860px;margin-bottom:32px}.page-why-dn .why-section-heading h2,.page-why-dn .why-two-worlds-head h2,.page-why-dn .why-fit-copy h2{margin:10px 0 10px;font-size:clamp(32px,3.2vw,48px);line-height:1.04;letter-spacing:-.035em}.page-why-dn .why-section-heading p,.page-why-dn .why-fit-copy>p{max-width:680px;margin:0;color:#7898ad;font-size:12px;line-height:1.65}
.page-why-dn .why-principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.page-why-dn .why-principle-card{position:relative;min-height:270px;padding:23px;border:1px solid rgba(107,204,245,.1);border-radius:20px;background:linear-gradient(155deg,rgba(11,35,52,.76),rgba(5,19,31,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;overflow:hidden}.page-why-dn .why-principle-card::after{content:"";position:absolute;inset:auto -70px -90px auto;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(51,187,242,.08),transparent 68%);opacity:0;transition:opacity .25s ease}.page-why-dn .why-principle-card:hover{transform:translateY(-4px);border-color:rgba(83,211,255,.25);background:linear-gradient(155deg,rgba(13,45,66,.83),rgba(6,22,35,.76));box-shadow:0 20px 48px rgba(0,0,0,.15)}.page-why-dn .why-principle-card:hover::after{opacity:1}.page-why-dn .why-card-index{position:absolute;right:18px;top:18px;color:#41657b;font-size:8px;font-weight:900;letter-spacing:.1em}.page-why-dn .why-card-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:30px;border:1px solid rgba(84,202,248,.12);border-radius:12px;background:rgba(15,73,104,.24);color:#68d9ff;font-size:15px;font-weight:900}.page-why-dn .why-principle-card h3{margin:0 0 10px;font-size:18px;line-height:1.15}.page-why-dn .why-principle-card p{margin:0;color:#829fb2;font-size:10.5px;line-height:1.6}.page-why-dn .why-principle-card small{position:absolute;left:23px;right:23px;bottom:21px;padding-top:12px;border-top:1px solid rgba(110,197,235,.08);color:#5cbfe5;font-size:8px;font-weight:850}
.page-why-dn .why-two-worlds-section{padding:42px 0 84px}.page-why-dn .why-two-worlds-shell{padding:28px;border:1px solid rgba(96,205,248,.14);border-radius:25px;background:linear-gradient(145deg,rgba(7,28,44,.91),rgba(4,17,29,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.page-why-dn .why-two-worlds-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding-bottom:22px;border-bottom:1px solid rgba(106,201,241,.08)}.page-why-dn .why-two-worlds-head h2{max-width:730px;margin-bottom:0}.page-why-dn .why-mode-tabs{display:flex;gap:6px;padding:5px;border:1px solid rgba(92,201,244,.1);border-radius:13px;background:rgba(3,15,25,.5)}.page-why-dn .why-mode-tab{min-height:38px;padding:0 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:#7796aa;font:inherit;font-size:9px;font-weight:850;cursor:pointer;transition:.2s ease}.page-why-dn .why-mode-tab:hover{color:#dff6ff}.page-why-dn .why-mode-tab.is-active{border-color:rgba(83,210,255,.25);background:rgba(19,78,110,.54);color:#f0fbff;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.page-why-dn .why-mode-panel{padding-top:24px}.page-why-dn .why-mode-panel.is-switching{animation:whyPanelIn .28s ease both}@keyframes whyPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.page-why-dn .why-mode-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:42px;align-items:end}.page-why-dn .why-mode-intro>span{grid-column:1/-1;color:#5cd5ff;font-size:8px;font-weight:950;letter-spacing:.14em}.page-why-dn .why-mode-intro h3{margin:9px 0 0;font-size:27px;line-height:1.08;letter-spacing:-.025em}.page-why-dn .why-mode-intro>p{margin:9px 0 0;color:#819eb1;font-size:10.5px;line-height:1.6}.page-why-dn .why-mode-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}.page-why-dn .why-mode-tags span{padding:7px 9px;border:1px solid rgba(93,200,242,.09);border-radius:999px;background:rgba(12,42,61,.42);color:#83a4b8;font-size:7.8px;font-weight:800}
.page-why-dn .why-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin-top:24px}.page-why-dn .why-flow article{min-height:110px;padding:15px;border:1px solid rgba(95,198,239,.09);border-radius:15px;background:rgba(7,24,38,.52)}.page-why-dn .why-flow article b{display:block;margin-bottom:18px;color:#5bd7ff;font-size:8px}.page-why-dn .why-flow article strong{display:block;font-size:13px}.page-why-dn .why-flow article small{display:block;margin-top:5px;color:#6f8ea1;font-size:8px}.page-why-dn .why-flow>i{color:#2e6b8a;font-style:normal;font-size:14px}.page-why-dn .why-mode-actions{display:flex;justify-content:flex-end;gap:18px;margin-top:20px}.page-why-dn .why-mode-actions a{color:#7fdfff;font-size:9px;font-weight:850}.page-why-dn .why-mode-actions a:hover{color:#fff}
.page-why-dn .why-fit-section{padding:0 0 78px}.page-why-dn .why-fit-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px;padding:30px;border:1px solid rgba(96,205,248,.12);border-radius:24px;background:rgba(5,22,36,.66)}.page-why-dn .why-fit-copy h2{margin-top:10px}.page-why-dn .why-inline-link{display:inline-flex;margin-top:20px;color:#65d8ff;font-size:9px;font-weight:900}.page-why-dn .why-fit-list{display:grid;gap:9px}.page-why-dn .why-fit-list article{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;padding:15px;border:1px solid rgba(96,197,238,.08);border-radius:14px;background:rgba(9,30,46,.48)}.page-why-dn .why-fit-list article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(15,72,100,.3);color:#5bd8ff;font-size:8px;font-weight:900}.page-why-dn .why-fit-list strong{display:block;font-size:11.5px}.page-why-dn .why-fit-list small{display:block;margin-top:4px;color:#7392a6;font-size:8.5px}
.page-why-dn .why-closing-section{padding:0 0 72px}.page-why-dn .why-closing-card{display:flex;justify-content:space-between;align-items:center;gap:34px;padding:31px;border:1px solid rgba(86,203,249,.2);border-radius:24px;background:linear-gradient(135deg,rgba(8,43,66,.82),rgba(6,24,38,.75));box-shadow:0 20px 48px rgba(0,0,0,.12)}.page-why-dn .why-closing-card h2{max-width:760px;margin:9px 0 7px;font-size:31px;line-height:1.08;letter-spacing:-.03em}.page-why-dn .why-closing-card p{margin:0;color:#809db0;font-size:10px}.page-why-dn .why-closing-actions{display:flex;gap:10px;flex:0 0 auto}.page-why-dn .why-closing-actions .btn{min-height:48px;padding:0 18px;border-radius:13px;font-size:10px;font-weight:900}
.page-why-dn .why-page-cursor-light{position:fixed;z-index:0;left:0;top:0;width:520px;height:520px;transform:translate(calc(var(--why-x,50vw) - 50%),calc(var(--why-y,40vh) - 50%));border-radius:50%;background:radial-gradient(circle,rgba(49,184,239,.10),rgba(49,184,239,.045) 26%,transparent 68%);filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease;will-change:transform}.page-why-dn .why-page-cursor-light.is-visible{opacity:1}
@media(max-width:1080px){.page-why-dn .why-hero-grid{grid-template-columns:1fr;gap:34px}.page-why-dn .why-hero{min-height:auto;padding-top:46px}.page-why-dn .why-manifesto{max-width:760px}.page-why-dn .why-principles-grid{grid-template-columns:repeat(2,1fr)}.page-why-dn .why-mode-intro{grid-template-columns:1fr}.page-why-dn .why-mode-intro>p{grid-column:1}.page-why-dn .why-fit-grid{grid-template-columns:1fr}.page-why-dn .why-closing-card{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.page-why-dn .why-hero{padding:32px 0 38px}.page-why-dn .why-breadcrumb{margin-bottom:22px}.page-why-dn .why-hero h1{font-size:44px}.page-why-dn .why-hero-copy>p{font-size:13px}.page-why-dn .why-hero-actions{flex-direction:column}.page-why-dn .why-hero-actions .btn{width:100%;justify-content:center}.page-why-dn .why-hero-meta{flex-wrap:wrap}.page-why-dn .why-manifesto{padding:18px;border-radius:20px}.page-why-dn .why-manifesto-head{flex-direction:column}.page-why-dn .why-manifesto-foot{flex-direction:column}.page-why-dn .why-principles-section{padding:62px 0 50px}.page-why-dn .why-principles-grid{grid-template-columns:1fr}.page-why-dn .why-principle-card{min-height:240px}.page-why-dn .why-two-worlds-section{padding-bottom:58px}.page-why-dn .why-two-worlds-shell{padding:18px}.page-why-dn .why-two-worlds-head{align-items:stretch;flex-direction:column}.page-why-dn .why-mode-tabs{width:100%}.page-why-dn .why-mode-tab{flex:1}.page-why-dn .why-flow{grid-template-columns:1fr}.page-why-dn .why-flow>i{transform:rotate(90deg);justify-self:center}.page-why-dn .why-flow article{min-height:0}.page-why-dn .why-mode-actions{justify-content:flex-start;flex-direction:column}.page-why-dn .why-fit-grid{padding:20px}.page-why-dn .why-closing-card{padding:22px}.page-why-dn .why-closing-card h2{font-size:27px}.page-why-dn .why-closing-actions{width:100%;flex-direction:column}.page-why-dn .why-closing-actions .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.page-why-dn .why-manifesto-step,.page-why-dn .why-principle-card,.page-why-dn .why-mode-tab,.page-why-dn .why-secondary{transition:none!important}.page-why-dn .why-mode-panel.is-switching{animation:none!important}}


/* =========================================================
   DN TECH — PREMIUM V97 / POR QUÉ DN TECH — FINAL POLISH
   ========================================================= */
.page-why-dn .why-principles-section{padding:102px 0 92px}
.page-why-dn .why-two-worlds-section{padding:52px 0 104px}
.page-why-dn .why-fit-section{padding:0 0 94px}
.page-why-dn .why-closing-section{padding:0 0 86px}

/* The service/web switch reads clearly as an actual control. */
.page-why-dn .why-mode-switch{display:grid;gap:8px;justify-items:end;flex:0 0 auto}
.page-why-dn .why-mode-hint{color:#54768b;font-size:7px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.page-why-dn .why-mode-tabs{position:relative;padding:5px;background:rgba(2,14,23,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px rgba(0,0,0,.12)}
.page-why-dn .why-mode-tab{position:relative;min-width:112px;overflow:hidden}
.page-why-dn .why-mode-tab::after{content:"";position:absolute;left:18%;right:18%;bottom:4px;height:1px;border-radius:999px;background:#5bd8ff;transform:scaleX(0);opacity:0;transition:transform .22s ease,opacity .22s ease}
.page-why-dn .why-mode-tab.is-active::after{transform:scaleX(1);opacity:.72}
.page-why-dn .why-mode-tab.is-active{box-shadow:0 8px 28px rgba(20,148,207,.08),inset 0 0 28px rgba(54,194,247,.035)}

/* More visual rhythm in the actual workflow. */
.page-why-dn .why-flow article{position:relative;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.page-why-dn .why-flow article::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,rgba(80,207,255,.055) 48%,transparent 78%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none}
.page-why-dn .why-flow article:hover{transform:translateY(-3px);border-color:rgba(91,215,255,.22);background:rgba(9,35,52,.74);box-shadow:0 15px 34px rgba(0,0,0,.12)}
.page-why-dn .why-flow article:hover::after{transform:translateX(120%)}
.page-why-dn .why-mode-panel.is-switching .why-flow article{animation:whyFlowCardIn .38s ease both}
.page-why-dn .why-mode-panel.is-switching .why-flow article:nth-of-type(2){animation-delay:.045s}
.page-why-dn .why-mode-panel.is-switching .why-flow article:nth-of-type(3){animation-delay:.09s}
.page-why-dn .why-mode-panel.is-switching .why-flow article:nth-of-type(4){animation-delay:.135s}
@keyframes whyFlowCardIn{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-why-dn .why-mode-actions a{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:9px;transition:background .2s ease,color .2s ease,transform .2s ease}
.page-why-dn .why-mode-actions a:hover{background:rgba(67,190,239,.08);transform:translateY(-1px)}

/* The fit cards are easier to scan and the price link is now a real secondary CTA. */
.page-why-dn .why-fit-grid{padding:34px 34px 32px;gap:50px}
.page-why-dn .why-fit-list article{min-height:76px;padding:17px 18px;border-color:rgba(96,197,238,.10);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.page-why-dn .why-fit-list article:hover{transform:translateX(3px);border-color:rgba(82,210,255,.22);background:rgba(11,39,59,.64)}
.page-why-dn .why-fit-list article>span{width:42px;height:42px}
.page-why-dn .why-inline-cta{align-items:center;gap:18px;min-height:44px;margin-top:22px;padding:0 15px;border:1px solid rgba(93,204,246,.18);border-radius:12px;background:rgba(8,31,47,.58);color:#bceeff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease}
.page-why-dn .why-inline-cta i{font-style:normal;font-size:14px;transition:transform .2s ease}
.page-why-dn .why-inline-cta:hover{transform:translateY(-2px);border-color:rgba(82,212,255,.34);background:rgba(14,55,79,.68);color:#fff!important}
.page-why-dn .why-inline-cta:hover i{transform:translateX(3px)}

/* Stronger, cleaner close. */
.page-why-dn .why-closing-card{padding:38px 36px;border-color:rgba(83,209,255,.24);background:linear-gradient(135deg,rgba(8,47,72,.91),rgba(5,25,40,.86));box-shadow:0 24px 58px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.03)}
.page-why-dn .why-closing-card h2{max-width:800px;font-size:clamp(31px,2.7vw,39px)}
.page-why-dn .why-closing-card p{max-width:720px;font-size:10.8px;line-height:1.6}
.page-why-dn .why-closing-actions .btn-primary{min-width:188px;box-shadow:0 12px 30px rgba(29,158,234,.16)}
.page-why-dn .why-closing-actions .why-secondary{min-width:122px}

/* Keep the footer visually subordinate and consistent with Projects / Process / Plans. */
.page-why-dn .web-footer{padding:22px 0;border-top:1px solid rgba(104,212,255,.08);background:#020b14}
.page-why-dn .web-footer .footer-inner{min-height:58px}
.page-why-dn .footer-brand-new{display:inline-flex;align-items:center;gap:10px}
.page-why-dn .footer-brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(75,193,244,.22);border-radius:10px;background:linear-gradient(145deg,rgba(24,80,108,.7),rgba(4,20,31,.86));overflow:hidden}
.page-why-dn .footer-brand-icon{display:block;width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;object-fit:contain;opacity:.92}
.page-why-dn .footer-brand-copy{display:grid;line-height:1}
.page-why-dn .footer-brand-main{color:#f2f9ff;font-size:12px;font-weight:900;letter-spacing:.035em}
.page-why-dn .footer-brand-city{margin-top:4px;color:#64cfff;font-size:7px;font-weight:900;letter-spacing:.2em}
.page-why-dn .web-footer .footer-links{display:flex;gap:22px}
.page-why-dn .web-footer .footer-link,.page-why-dn .web-footer .footer-copyright{font-size:10px;color:#7893a7}

@media(max-width:1080px){
  .page-why-dn .why-mode-switch{justify-items:start}
  .page-why-dn .why-fit-grid{gap:30px}
}
@media(max-width:720px){
  .page-why-dn .why-principles-section{padding:66px 0 58px}
  .page-why-dn .why-two-worlds-section{padding:36px 0 62px}
  .page-why-dn .why-fit-section{padding-bottom:62px}
  .page-why-dn .why-closing-section{padding-bottom:58px}
  .page-why-dn .why-mode-switch{width:100%;justify-items:stretch}
  .page-why-dn .why-mode-hint{text-align:left}
  .page-why-dn .why-mode-tab{min-width:0}
  .page-why-dn .why-fit-grid{padding:22px;gap:26px}
  .page-why-dn .why-inline-cta{width:100%;justify-content:space-between}
  .page-why-dn .why-closing-card{padding:25px 22px}
  .page-why-dn .web-footer .footer-inner{min-height:auto}
  .page-why-dn .web-footer .footer-links{gap:14px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .page-why-dn .why-flow article,.page-why-dn .why-inline-cta,.page-why-dn .why-fit-list article,.page-why-dn .why-mode-actions a{transition:none!important;animation:none!important}
}

/* =========================================================
   DN TECH — V98 / POR QUÉ DN TECH · LEGIBILIDAD
   Refuerzo de tipografía secundaria dentro de paneles/cards.
   ========================================================= */
.page-why-dn .why-manifesto-head small{font-size:8.5px}
.page-why-dn .why-manifesto-badge{font-size:8.5px}
.page-why-dn .why-manifesto-step strong{font-size:13px;line-height:1.35}
.page-why-dn .why-manifesto-step small{font-size:10.5px;line-height:1.55;color:#8eabbc}
.page-why-dn .why-manifesto-foot{font-size:9.5px;color:#819eaf}

.page-why-dn .why-principle-card h3{font-size:19px;line-height:1.2}
.page-why-dn .why-principle-card p{font-size:12.5px;line-height:1.65;color:#91adbe}
.page-why-dn .why-principle-card small{font-size:9.5px;line-height:1.45;color:#72d1f1}
.page-why-dn .why-card-index{font-size:9px}

.page-why-dn .why-mode-tab{font-size:10.5px}
.page-why-dn .why-mode-intro>span{font-size:9px}
.page-why-dn .why-mode-intro h3{font-size:29px}
.page-why-dn .why-mode-intro>p{font-size:12.5px;line-height:1.65;color:#91adbe}
.page-why-dn .why-mode-tags span{font-size:9.5px;line-height:1.2;padding:8px 11px;color:#91adbe}
.page-why-dn .why-flow article{min-height:124px;padding:17px}
.page-why-dn .why-flow article b{font-size:9.5px;margin-bottom:19px}
.page-why-dn .why-flow article strong{font-size:14.5px;line-height:1.3}
.page-why-dn .why-flow article small{font-size:10px;line-height:1.45;color:#829faf}
.page-why-dn .why-mode-actions a{font-size:10.5px}

.page-why-dn .why-fit-list strong{font-size:13px;line-height:1.35}
.page-why-dn .why-fit-list small{font-size:10.5px;line-height:1.5;color:#86a3b5}
.page-why-dn .why-fit-list article>span{font-size:9px}
.page-why-dn .why-inline-cta{font-size:10.5px}

.page-why-dn .why-closing-card p{font-size:12px;line-height:1.6;color:#91adbe}
.page-why-dn .why-closing-actions .btn{font-size:11px}

@media (max-width: 720px){
  .page-why-dn .why-manifesto-step strong{font-size:14px}
  .page-why-dn .why-manifesto-step small{font-size:11.5px}
  .page-why-dn .why-principle-card p{font-size:13px}
  .page-why-dn .why-principle-card small{font-size:10px}
  .page-why-dn .why-mode-intro>p{font-size:13px}
  .page-why-dn .why-mode-tags span{font-size:10px}
  .page-why-dn .why-flow article strong{font-size:15px}
  .page-why-dn .why-flow article small{font-size:10.5px}
  .page-why-dn .why-fit-list strong{font-size:13.5px}
  .page-why-dn .why-fit-list small{font-size:11px}
}

/* =========================================================
   DN TECH — PREMIUM V99 / PRECIOS GLOBAL
   ========================================================= */
.page-prices{background:#050d18;color:#eef7ff}.page-prices .site-header{background:#06101d!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:rgba(104,212,255,.10)}
.page-prices .prices-main-v99{display:block;background:#050d18}.page-prices .prices-page-v99{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 87% 8%,rgba(31,135,205,.15),transparent 25%),radial-gradient(circle at 16% 45%,rgba(13,82,132,.08),transparent 31%),#050d18}.page-prices .prices-page-v99:after{content:"";position:absolute;width:760px;height:760px;right:-320px;top:180px;border:1px solid rgba(72,177,230,.055);border-radius:50%;pointer-events:none}.page-prices .prices-shell-v99{position:relative;z-index:1;padding-top:62px;padding-bottom:66px}.page-prices .prices-hero-v99{min-height:calc(100vh - var(--header-h) - 20px);display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding:42px 0 70px}.page-prices .prices-breadcrumb-v99{display:flex;gap:11px;margin-bottom:34px;color:#6e8ca4;font-size:10px;font-weight:750}.page-prices .prices-breadcrumb-v99 a:hover{color:#bfeaff}.page-prices .prices-kicker-v99,.page-prices .prices-section-kicker-v99{display:flex;align-items:center;gap:9px;color:#5fd7ff;font-size:8px;font-weight:950;letter-spacing:.17em}.page-prices .prices-kicker-v99 i{width:8px;height:8px;border-radius:50%;background:#57e2c0;box-shadow:0 0 0 6px rgba(87,226,192,.08),0 0 18px rgba(87,226,192,.35)}.page-prices .prices-hero-copy-v99 h1{max-width:710px;margin:24px 0 17px;color:#f4f9fd;font-size:clamp(52px,5.2vw,76px);line-height:.98;letter-spacing:-.052em}.page-prices .prices-hero-copy-v99 h1 span{background:linear-gradient(90deg,#23b2ff,#70d8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.page-prices .prices-hero-copy-v99>p{max-width:700px;margin:0;color:#93adbf;font-size:15.5px;line-height:1.72}.page-prices .prices-hero-actions-v99{display:flex;gap:11px;flex-wrap:wrap;margin-top:27px}.page-prices .prices-hero-meta-v99{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;color:#7895aa;font-size:9px;font-weight:800}.page-prices .prices-hero-meta-v99 i{font-style:normal;color:#28516f}
.page-prices .prices-overview-v99{padding:25px;border:1px solid rgba(94,205,255,.19);border-radius:25px;background:linear-gradient(150deg,rgba(12,42,65,.93),rgba(5,18,31,.94));box-shadow:0 28px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)}.page-prices .prices-overview-head-v99{display:flex;justify-content:space-between;align-items:end;padding:1px 3px 17px;border-bottom:1px solid rgba(255,255,255,.07)}.page-prices .prices-overview-head-v99 span{color:#59d2ff;font-size:7px;font-weight:950;letter-spacing:.17em}.page-prices .prices-overview-head-v99 b{font-size:17px;color:#eef8ff}.page-prices .prices-overview-row-v99{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:20px 3px;border-bottom:1px solid rgba(255,255,255,.065);transition:background .2s ease,padding .2s ease}.page-prices .prices-overview-row-v99:hover{padding-left:10px;padding-right:10px;background:rgba(76,196,246,.045)}.page-prices .prices-overview-row-v99>span{display:grid;grid-template-columns:27px 1fr;column-gap:9px}.page-prices .prices-overview-row-v99 small{grid-row:1/3;display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(91,206,255,.18);border-radius:9px;color:#5fd4ff;font-size:7px;font-weight:900}.page-prices .prices-overview-row-v99 strong{color:#eaf6ff;font-size:13px}.page-prices .prices-overview-row-v99 em{color:#66879f;font-size:8.5px;font-style:normal}.page-prices .prices-overview-row-v99>b{color:#fff;font-size:18px;letter-spacing:-.03em}.page-prices .prices-overview-foot-v99{display:flex;justify-content:space-between;gap:15px;padding:17px 3px 0;color:#6e8ca3;font-size:8px;font-weight:750}
.page-prices .prices-section-v99{padding:78px 0;scroll-margin-top:calc(var(--header-h) + 14px)}.page-prices .prices-section-v99+.prices-section-v99{border-top:1px solid rgba(83,176,222,.08)}.page-prices .prices-section-heading-v99{display:grid;grid-template-columns:1.18fr .82fr;gap:60px;align-items:end;margin-bottom:30px}.page-prices .prices-section-heading-v99 h2{max-width:700px;margin:12px 0 0;color:#f2f8fc;font-size:clamp(34px,3.4vw,49px);line-height:1.04;letter-spacing:-.04em}.page-prices .prices-section-side-v99{max-width:470px;justify-self:end}.page-prices .prices-section-side-v99 p{margin:0 0 9px;color:#7895aa;font-size:11px;line-height:1.65}.page-prices .prices-section-side-v99 a{color:#61d5ff;font-size:9px;font-weight:850}.page-prices .prices-section-side-v99 a:hover{color:#d5f5ff}
.page-prices .prices-tech-grid-v99{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.page-prices .prices-tech-card-v99,.page-prices .prices-web-card-v99,.page-prices .prices-factors-v99,.page-prices .prices-maintenance-v99{border:1px solid rgba(119,196,233,.12);background:linear-gradient(145deg,rgba(19,45,67,.78),rgba(6,20,33,.89));box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.page-prices .prices-tech-card-v99:hover,.page-prices .prices-web-card-v99:hover{transform:translateY(-3px);border-color:rgba(93,209,255,.27);box-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.028)}.page-prices .prices-tech-card-v99{padding:25px;border-radius:21px}.page-prices .prices-card-head-v99{display:flex;gap:13px;min-height:86px;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.065)}.page-prices .prices-card-head-v99>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid rgba(82,197,245,.18);border-radius:11px;color:#5bd5ff;font-size:8px;font-weight:900}.page-prices .prices-card-head-v99 small{color:#5bd5ff;font-size:7px;font-weight:950;letter-spacing:.14em}.page-prices .prices-card-head-v99 h3{margin:6px 0 0;color:#edf7ff;font-size:17px;line-height:1.25}.page-prices .prices-list-v99{display:grid;margin-top:9px}.page-prices .prices-list-v99>div{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:12px 0}.page-prices .prices-list-v99 span{color:#9ab2c4;font-size:10.5px;line-height:1.45}.page-prices .prices-list-v99 strong{flex:none;color:#edf8ff;font-size:11px}.page-prices .prices-inline-note-v99{margin:14px 2px 0;color:#607f96;font-size:9px}
.page-prices .prices-web-grid-v99{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.page-prices .prices-web-card-v99{position:relative;display:flex;flex-direction:column;min-height:475px;padding:28px;border-radius:22px}.page-prices .prices-web-card-v99.is-featured{border-color:rgba(76,205,255,.36);background:linear-gradient(145deg,rgba(14,64,94,.88),rgba(5,24,40,.94));box-shadow:0 22px 54px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)}.page-prices .prices-web-number-v99{position:absolute;right:23px;top:25px;color:#40657f;font-size:8px;font-weight:950}.page-prices .prices-web-card-v99>small{display:flex;align-items:center;gap:8px;color:#5bd5ff;font-size:8px;font-weight:950;letter-spacing:.14em}.page-prices .prices-web-card-v99>small b{padding:5px 8px;border-radius:999px;background:rgba(42,184,246,.11);color:#7addff;font-size:6.5px;letter-spacing:.09em}.page-prices .prices-web-card-v99 h3{min-height:64px;margin:17px 0 5px;color:#f0f8fd;font-size:22px;line-height:1.2;letter-spacing:-.025em}.page-prices .prices-web-price-v99{display:flex;align-items:baseline;gap:7px;margin:10px 0 15px}.page-prices .prices-web-price-v99 em{color:#5e7f97;font-size:8px;font-style:normal;text-transform:uppercase}.page-prices .prices-web-price-v99 strong{color:#fff;font-size:36px;letter-spacing:-.04em}.page-prices .prices-web-card-v99>p{min-height:67px;margin:0 0 13px;color:#8faabd;font-size:11px;line-height:1.62}.page-prices .prices-web-card-v99 ul{margin:0;padding:0;list-style:none}.page-prices .prices-web-card-v99 li{position:relative;padding:7px 0 7px 18px;color:#b3c7d6;font-size:10px}.page-prices .prices-web-card-v99 li:before{content:"✓";position:absolute;left:0;color:#5ed5ff}.page-prices .prices-card-cta-v99{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:14px 15px;border:1px solid rgba(88,203,250,.14);border-radius:13px;background:rgba(4,20,33,.35);color:#65d7ff;font-size:10px;font-weight:900;transition:background .2s ease,border-color .2s ease}.page-prices .prices-card-cta-v99:hover{border-color:rgba(94,211,255,.32);background:rgba(37,151,203,.10)}.page-prices .prices-card-cta-v99 span{font-size:15px}.page-prices .prices-web-card-v99.is-featured .prices-card-cta-v99{background:linear-gradient(135deg,rgba(31,139,203,.35),rgba(31,174,231,.18));border-color:rgba(87,214,255,.35);color:#e9faff}.page-prices .prices-web-bridge-v99{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:15px;padding:16px 19px;border:1px solid rgba(91,197,241,.12);border-radius:16px;background:rgba(8,29,46,.62)}.page-prices .prices-web-bridge-v99>span{color:#61d7ff;font-size:7px;font-weight:950;letter-spacing:.14em}.page-prices .prices-web-bridge-v99 p{margin:0;color:#8aa5b9;font-size:10px}.page-prices .prices-web-bridge-v99 a{color:#cdefff;font-size:9px;font-weight:850}
.page-prices .prices-continuity-v99{display:grid;grid-template-columns:1.12fr .88fr;gap:15px}.page-prices .prices-continuity-main-v99{padding:0 0 0}.page-prices .prices-continuity-main-v99>h2{max-width:660px;margin:12px 0 10px;color:#f1f8fd;font-size:clamp(34px,3.3vw,48px);line-height:1.06;letter-spacing:-.04em}.page-prices .prices-continuity-main-v99>p{max-width:640px;margin:0 0 23px;color:#7e9aaf;font-size:11.5px;line-height:1.66}.page-prices .prices-maintenance-v99{display:grid;grid-template-columns:42px 1fr auto;gap:16px;align-items:center;padding:21px;border-radius:19px}.page-prices .prices-maintenance-v99>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(26,139,196,.12);color:#62d7ff;font-size:22px}.page-prices .prices-maintenance-v99 small{display:block;color:#5bd5ff;font-size:7px;font-weight:950;letter-spacing:.13em}.page-prices .prices-maintenance-v99 strong{display:block;margin:4px 0;color:#fff;font-size:19px}.page-prices .prices-maintenance-v99 p{margin:0;max-width:570px;color:#7795aa;font-size:9.5px;line-height:1.55}.page-prices .prices-maintenance-v99 a{color:#63d8ff;font-size:9px;font-weight:900}.page-prices .prices-factors-v99{padding:25px;border-radius:21px}.page-prices .prices-factors-v99 h3{margin:12px 0 18px;color:#edf7ff;font-size:21px;line-height:1.24}.page-prices .prices-factor-tags-v99{display:flex;flex-wrap:wrap;gap:8px}.page-prices .prices-factor-tags-v99 span{padding:8px 10px;border:1px solid rgba(88,198,240,.12);border-radius:999px;background:rgba(38,112,150,.07);color:#9cb7ca;font-size:8.5px;font-weight:750}.page-prices .prices-factors-v99>p{margin:18px 0 0;color:#6d8ba1;font-size:9.5px;line-height:1.58}
.page-prices .prices-closing-v99{display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center;margin-top:18px;padding:31px;border:1px solid rgba(88,206,255,.18);border-radius:23px;background:linear-gradient(130deg,rgba(13,55,82,.84),rgba(5,22,37,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.page-prices .prices-closing-v99 h2{max-width:800px;margin:10px 0 7px;color:#f4faff;font-size:32px;line-height:1.1;letter-spacing:-.035em}.page-prices .prices-closing-v99 h2 span{color:#55ccff}.page-prices .prices-closing-v99 p{margin:0;color:#7897ac;font-size:10px}.page-prices .prices-closing-actions-v99{display:flex;gap:9px}.page-prices .site-footer{border-top:1px solid rgba(104,212,255,.08);background:#030b14}.page-prices .footer-brand-new{display:inline-flex;align-items:center;gap:10px}.page-prices .footer-brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(75,193,244,.22);border-radius:10px;background:linear-gradient(145deg,rgba(24,80,108,.7),rgba(4,20,31,.86));overflow:hidden}.page-prices .footer-brand-icon{display:block;width:24px!important;height:24px!important;max-width:24px!important;object-fit:contain}.page-prices .footer-brand-copy{display:grid;line-height:1}.page-prices .footer-brand-main{color:#f2f9ff;font-size:12px;font-weight:900;letter-spacing:.035em}.page-prices .footer-brand-city{margin-top:4px;color:#64cfff;font-size:7px;font-weight:900;letter-spacing:.2em}
.page-prices .prices-page-cursor-light{position:fixed;z-index:0;left:0;top:0;width:620px;height:620px;pointer-events:none;border-radius:50%;opacity:0;transform:translate(calc(var(--prices-x,50vw) - 50%),calc(var(--prices-y,40vh) - 50%));background:radial-gradient(circle,rgba(48,190,255,.075) 0,rgba(24,129,195,.035) 28%,transparent 68%);filter:blur(3px);transition:opacity .25s ease}.page-prices .prices-page-cursor-light.is-visible{opacity:1}
@media(max-width:980px){.page-prices .prices-hero-v99{grid-template-columns:1fr;min-height:auto;gap:34px;padding-top:28px}.page-prices .prices-section-heading-v99{grid-template-columns:1fr;gap:13px}.page-prices .prices-section-side-v99{justify-self:start}.page-prices .prices-tech-grid-v99,.page-prices .prices-web-grid-v99{grid-template-columns:1fr}.page-prices .prices-web-card-v99{min-height:auto}.page-prices .prices-web-card-v99 h3,.page-prices .prices-web-card-v99>p{min-height:0}.page-prices .prices-continuity-v99{grid-template-columns:1fr}.page-prices .prices-web-bridge-v99{grid-template-columns:1fr;gap:7px}.page-prices .prices-closing-v99{grid-template-columns:1fr}.page-prices .prices-closing-actions-v99{justify-content:flex-start}}
@media(max-width:640px){.page-prices .prices-shell-v99{padding-top:34px}.page-prices .prices-hero-v99{padding-bottom:50px}.page-prices .prices-hero-copy-v99 h1{font-size:44px}.page-prices .prices-hero-copy-v99>p{font-size:14px}.page-prices .prices-overview-v99{padding:18px}.page-prices .prices-overview-row-v99{grid-template-columns:1fr;gap:8px}.page-prices .prices-overview-row-v99>b{padding-left:36px}.page-prices .prices-section-v99{padding:56px 0}.page-prices .prices-section-heading-v99 h2{font-size:34px}.page-prices .prices-tech-card-v99,.page-prices .prices-web-card-v99,.page-prices .prices-factors-v99{padding:20px}.page-prices .prices-list-v99>div{gap:10px}.page-prices .prices-list-v99 span{font-size:10px}.page-prices .prices-list-v99 strong{max-width:45%;text-align:right;font-size:10px}.page-prices .prices-maintenance-v99{grid-template-columns:38px 1fr}.page-prices .prices-maintenance-v99>a{grid-column:2}.page-prices .prices-closing-v99{padding:24px 20px}.page-prices .prices-closing-v99 h2{font-size:28px}.page-prices .prices-closing-actions-v99{display:grid;grid-template-columns:1fr}.page-prices .prices-closing-actions-v99 .btn{width:100%}}


/* =========================================================
   DN TECH — PREMIUM V100 / PRECIOS COMPLETOS
   Catálogo ampliado de soporte + extras web con precio.
   ========================================================= */
.page-prices .prices-tech-grid-v100{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.page-prices .prices-tech-card-v100{display:flex;flex-direction:column;min-height:100%}
.page-prices .prices-tech-card-v100 .prices-card-head-v99{min-height:92px}
.page-prices .prices-tech-card-v100 .prices-list-v99{margin-top:10px}
.page-prices .prices-tech-card-v100 .prices-list-v99>div{min-height:43px;border-bottom:1px solid rgba(255,255,255,.045)}
.page-prices .prices-tech-card-v100 .prices-list-v99>div:last-child{border-bottom:0}
.page-prices .prices-tech-card-v100 .prices-list-v99 span{font-size:10.8px;color:#9fb7c8}
.page-prices .prices-tech-card-v100 .prices-list-v99 strong{font-size:10.8px;color:#f0f9ff;text-align:right}
.page-prices .prices-legal-band-v100{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px;padding:16px 18px;border:1px solid rgba(96,199,241,.11);border-radius:16px;background:rgba(6,25,40,.7)}
.page-prices .prices-legal-band-v100 p{margin:0;color:#7897ac;font-size:9.5px;line-height:1.6}
.page-prices .prices-legal-band-v100 strong{color:#bfeaff}
.page-prices .prices-web-extras-v100{margin-top:17px;padding:24px;border:1px solid rgba(99,202,245,.13);border-radius:21px;background:linear-gradient(145deg,rgba(15,42,62,.62),rgba(5,19,32,.82))}
.page-prices .prices-web-extras-head-v100{display:grid;grid-template-columns:.62fr 1.38fr;gap:28px;align-items:end;margin-bottom:17px}
.page-prices .prices-web-extras-head-v100 h3{margin:0;color:#eef8ff;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.page-prices .prices-web-extras-grid-v100{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.page-prices .prices-web-extras-grid-v100>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 13px;border:1px solid rgba(92,199,242,.09);border-radius:12px;background:rgba(6,25,40,.48);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.page-prices .prices-web-extras-grid-v100>div:hover{transform:translateY(-2px);border-color:rgba(94,211,255,.24);background:rgba(21,76,103,.18)}
.page-prices .prices-web-extras-grid-v100 span{color:#9eb8c9;font-size:9.5px;line-height:1.35}
.page-prices .prices-web-extras-grid-v100 strong{flex:none;color:#dff6ff;font-size:9.5px}
.page-prices .prices-web-extras-v100>p{margin:14px 0 0;color:#66869d;font-size:8.7px;line-height:1.55}
@media(max-width:1180px){.page-prices .prices-tech-grid-v100{grid-template-columns:repeat(2,minmax(0,1fr))}.page-prices .prices-web-extras-grid-v100{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.page-prices .prices-tech-grid-v100{grid-template-columns:1fr}.page-prices .prices-legal-band-v100{grid-template-columns:1fr}.page-prices .prices-web-extras-head-v100{grid-template-columns:1fr;gap:8px}.page-prices .prices-web-extras-grid-v100{grid-template-columns:1fr}.page-prices .prices-tech-card-v100 .prices-card-head-v99{min-height:0}.page-prices .prices-tech-card-v100 .prices-list-v99>div{min-height:0}}

/* =========================================================
   DN TECH — PREMIUM V101 / PRECIOS FINAL POLISH
   Legibilidad, limpieza y jerarquía final.
   ========================================================= */

.page-prices .prices-card-head-v99 small{
  font-size:8.5px;
  line-height:1.35;
}
.page-prices .prices-card-head-v99 h3{
  font-size:18.5px;
  line-height:1.28;
}
.page-prices .prices-tech-card-v100 .prices-list-v99{
  gap:4px;
}
.page-prices .prices-tech-card-v100 .prices-list-v99>div{
  min-height:0;
  padding:10px 11px;
  border-bottom:0;
  border-radius:10px;
  transition:background .18s ease,transform .18s ease;
}
.page-prices .prices-tech-card-v100 .prices-list-v99>div:hover{
  background:rgba(72,183,231,.055);
  transform:translateX(2px);
}
.page-prices .prices-tech-card-v100 .prices-list-v99 span{
  font-size:12.2px;
  line-height:1.48;
  color:#a9c0d0;
}
.page-prices .prices-tech-card-v100 .prices-list-v99 strong{
  font-size:12px;
  line-height:1.42;
  color:#f1f9ff;
}
.page-prices .prices-section-side-v99 p{
  font-size:12.2px;
  line-height:1.7;
  color:#8da8ba;
}
.page-prices .prices-section-side-v99 a{
  font-size:10.5px;
}
.page-prices .prices-legal-band-v100 p{
  font-size:10.8px;
  line-height:1.62;
}
.page-prices .prices-tech-help-v101{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  margin-top:15px;
  padding:20px 22px;
  border:1px solid rgba(98,204,246,.14);
  border-radius:18px;
  background:linear-gradient(130deg,rgba(12,47,70,.64),rgba(5,22,36,.83));
}
.page-prices .prices-tech-help-v101 h3{
  margin:8px 0 5px;
  color:#eff9ff;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.page-prices .prices-tech-help-v101 p{
  margin:0;
  max-width:760px;
  color:#89a5b8;
  font-size:11.5px;
  line-height:1.6;
}
.page-prices .prices-tech-help-v101 .btn{
  white-space:nowrap;
}
.page-prices .prices-web-card-v99>p{
  font-size:12px;
  line-height:1.66;
  color:#9bb4c5;
}
.page-prices .prices-web-card-v99 li{
  font-size:11.2px;
  line-height:1.46;
  padding-top:8px;
  padding-bottom:8px;
}
.page-prices .prices-card-cta-v99{
  font-size:11.2px;
  padding:15px 16px;
}
.page-prices .prices-web-extras-grid-v100 span,
.page-prices .prices-web-extras-grid-v100 strong{
  font-size:10.7px;
}
.page-prices .prices-web-extras-v100>p{
  font-size:10px;
  line-height:1.6;
}
.page-prices .prices-maintenance-v99 p,
.page-prices .prices-factors-v99>p{
  font-size:10.8px;
  line-height:1.62;
}
.page-prices .prices-factor-tags-v99 span{
  font-size:9.5px;
}
.page-prices .prices-closing-v99 p{
  font-size:11px;
  line-height:1.6;
}
@media(max-width:760px){
  .page-prices .prices-tech-help-v101{grid-template-columns:1fr;gap:14px;padding:18px}
  .page-prices .prices-tech-help-v101 .btn{width:100%}
  .page-prices .prices-tech-card-v100 .prices-list-v99 span{font-size:11.5px}
  .page-prices .prices-tech-card-v100 .prices-list-v99 strong{font-size:11.2px}
}

/* =========================================================
   DN TECH — PREMIUM V102 / PRECIOS CIERRE
   Packs, navegación local, extras agrupados y móvil compacto.
   ========================================================= */
.page-prices .prices-local-nav-v102{
  position:sticky;
  top:calc(var(--header-h) + 10px);
  z-index:18;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:-20px 0 16px;
  padding:8px;
  border:1px solid rgba(91,201,244,.13);
  border-radius:16px;
  background:rgba(4,18,30,.88);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
}
.page-prices .prices-local-nav-v102 a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:11px;
  color:#7f9bae;
  font-size:10.5px;
  font-weight:850;
  text-align:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.page-prices .prices-local-nav-v102 a span{color:#4ecfff;font-size:8px;font-weight:950;letter-spacing:.08em}
.page-prices .prices-local-nav-v102 a:hover,
.page-prices .prices-local-nav-v102 a.is-active{
  color:#f0f9ff;
  border-color:rgba(92,210,255,.22);
  background:rgba(31,130,178,.13);
}
.page-prices .prices-local-nav-v102 a:hover{transform:translateY(-1px)}

.page-prices .prices-tech-card-v100 .prices-card-head-v99{position:relative;padding-right:34px}
.page-prices .prices-tech-card-toggle-v102{
  display:none;
  position:absolute;
  right:0;
  top:1px;
  width:32px;
  height:32px;
  place-items:center;
  border:1px solid rgba(92,204,247,.18);
  border-radius:10px;
  background:rgba(20,79,108,.12);
  color:#7bdfff;
  cursor:pointer;
}
.page-prices .prices-tech-card-toggle-v102 span{display:block;transition:transform .2s ease}
.page-prices .prices-tech-card-v100.is-open .prices-tech-card-toggle-v102 span{transform:rotate(180deg)}
.page-prices .prices-tech-card-link-v102{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding:14px 11px 2px;
  color:#67d8ff;
  font-size:10px;
  font-weight:900;
  transition:color .18s ease,transform .18s ease;
}
.page-prices .prices-tech-card-link-v102:hover{color:#e1f8ff;transform:translateX(2px)}
.page-prices .prices-tech-card-link-v102 span{font-size:14px}

.page-prices .prices-packs-v102{
  margin-top:18px;
  padding:24px;
  border:1px solid rgba(96,203,246,.14);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(12,40,59,.7),rgba(5,20,33,.86));
}
.page-prices .prices-packs-head-v102{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:34px;
  align-items:end;
  margin-bottom:18px;
}
.page-prices .prices-packs-head-v102 h3{
  max-width:700px;
  margin:9px 0 0;
  color:#eff9ff;
  font-size:24px;
  line-height:1.22;
  letter-spacing:-.025em;
}
.page-prices .prices-packs-head-v102>p{
  justify-self:end;
  max-width:430px;
  margin:0;
  color:#819eb1;
  font-size:11px;
  line-height:1.62;
}
.page-prices .prices-packs-grid-v102{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.page-prices .prices-packs-grid-v102 article{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  min-height:180px;
  padding:18px;
  border:1px solid rgba(87,193,236,.11);
  border-radius:16px;
  background:rgba(6,25,40,.54);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.page-prices .prices-packs-grid-v102 article:hover{transform:translateY(-2px);border-color:rgba(93,211,255,.24);background:rgba(18,62,84,.20)}
.page-prices .prices-packs-grid-v102 article>span{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  border:1px solid rgba(89,203,247,.17);color:#5ed8ff;font-size:8px;font-weight:950
}
.page-prices .prices-packs-grid-v102 small{display:block;color:#65d9ff;font-size:7.5px;font-weight:950;letter-spacing:.12em}
.page-prices .prices-packs-grid-v102 strong{display:block;margin:8px 0 7px;color:#fff;font-size:22px;line-height:1.05}
.page-prices .prices-packs-grid-v102 p{margin:0;color:#8da8ba;font-size:10.5px;line-height:1.55}
.page-prices .prices-packs-grid-v102 a{grid-column:2;align-self:end;color:#c7efff;font-size:9.5px;font-weight:850}
.page-prices .prices-piece-note-v102{margin:16px 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.055);color:#7694a9;font-size:10.5px;line-height:1.6}
.page-prices .prices-piece-note-v102 strong{color:#c9efff}

.page-prices .prices-web-extras-groups-v102{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:10px}
.page-prices .prices-web-extras-groups-v102>section{
  padding:14px;
  border:1px solid rgba(91,199,242,.08);
  border-radius:15px;
  background:rgba(4,20,33,.24);
}
.page-prices .prices-web-extras-groups-v102>section>small{
  display:block;
  margin:1px 1px 10px;
  color:#5bd5ff;
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.14em;
}
.page-prices .prices-web-extras-groups-v102 .prices-web-extras-grid-v100{grid-template-columns:1fr}
.page-prices .prices-web-extras-groups-v102>section:first-child .prices-web-extras-grid-v100{grid-template-columns:repeat(2,minmax(0,1fr))}

.page-prices .prices-maintenance-v99 em{
  display:block;
  margin-top:7px;
  color:#6f8ea4;
  font-size:9.5px;
  line-height:1.5;
  font-style:normal;
}
.page-prices .prices-factor-groups-v102{display:grid;gap:16px}
.page-prices .prices-factor-groups-v102>div+div{padding-top:14px;border-top:1px solid rgba(255,255,255,.055)}
.page-prices .prices-factor-groups-v102 small{display:block;margin-bottom:8px;color:#62d7ff;font-size:7.5px;font-weight:950;letter-spacing:.13em}

.page-prices .prices-bundle-v102{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  margin:18px 0 0;
  padding:28px 30px;
  border:1px solid rgba(95,209,255,.15);
  border-radius:22px;
  background:linear-gradient(130deg,rgba(15,54,78,.76),rgba(5,22,36,.9));
}
.page-prices .prices-bundle-v102 h2{max-width:800px;margin:9px 0 7px;color:#f3faff;font-size:29px;line-height:1.12;letter-spacing:-.03em}
.page-prices .prices-bundle-v102 h2 span{color:#55ceff}
.page-prices .prices-bundle-v102 p{max-width:820px;margin:0;color:#86a2b5;font-size:11px;line-height:1.62}
.page-prices .prices-bundle-v102 .btn{white-space:nowrap}

.page-prices .prices-hero-actions-v99 .btn-outline-light,
.page-prices .prices-closing-actions-v99 .btn-outline-light,
.page-prices .prices-tech-help-v101 .btn-outline-light,
.page-prices .prices-bundle-v102 .btn-outline-light{
  color:#e7f6ff;
  border-color:rgba(128,205,240,.32);
  background:rgba(10,33,50,.58);
}
.page-prices .prices-hero-actions-v99 .btn-outline-light:hover,
.page-prices .prices-closing-actions-v99 .btn-outline-light:hover,
.page-prices .prices-tech-help-v101 .btn-outline-light:hover,
.page-prices .prices-bundle-v102 .btn-outline-light:hover{
  color:#fff;border-color:rgba(91,211,255,.52);background:rgba(23,89,119,.24)
}

@media(max-width:1180px){
  .page-prices .prices-local-nav-v102{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-prices .prices-packs-grid-v102{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-prices .prices-web-extras-groups-v102{grid-template-columns:1fr 1fr}
  .page-prices .prices-web-extras-groups-v102>section:first-child{grid-column:1/-1}
}
@media(max-width:760px){
  .page-prices .prices-local-nav-v102{
    top:calc(var(--header-h) + 6px);
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    margin:-8px 0 8px;
    padding:6px;
  }
  .page-prices .prices-local-nav-v102::-webkit-scrollbar{display:none}
  .page-prices .prices-local-nav-v102 a{flex:0 0 auto;min-width:156px;min-height:39px;font-size:10px}
  .page-prices .prices-tech-card-toggle-v102{display:grid}
  .page-prices .prices-tech-card-v100:not(.is-open) .prices-list-v99,
  .page-prices .prices-tech-card-v100:not(.is-open) .prices-tech-card-link-v102{display:none}
  .page-prices .prices-tech-card-v100 .prices-card-head-v99{min-height:0;margin:0;padding-bottom:12px;border-bottom:0;cursor:pointer}
  .page-prices .prices-tech-card-v100.is-open .prices-card-head-v99{border-bottom:1px solid rgba(255,255,255,.06)}
  .page-prices .prices-tech-card-v100{padding:18px}
  .page-prices .prices-packs-v102{padding:18px}
  .page-prices .prices-packs-head-v102{grid-template-columns:1fr;gap:8px}
  .page-prices .prices-packs-head-v102>p{justify-self:start}
  .page-prices .prices-packs-grid-v102{grid-template-columns:1fr}
  .page-prices .prices-packs-grid-v102 article{min-height:0}
  .page-prices .prices-web-extras-groups-v102{grid-template-columns:1fr}
  .page-prices .prices-web-extras-groups-v102>section:first-child{grid-column:auto}
  .page-prices .prices-web-extras-groups-v102>section:first-child .prices-web-extras-grid-v100{grid-template-columns:1fr}
  .page-prices .prices-bundle-v102{grid-template-columns:1fr;gap:16px;padding:23px 20px}
  .page-prices .prices-bundle-v102 h2{font-size:25px}
  .page-prices .prices-bundle-v102 .btn{width:100%}
}


/* =========================================================
   DN TECH — PREMIUM V103 / PRECIOS NAV + HERO COMPACTO
   Subnavegación flotante bajo header y primera pantalla más directa.
   ========================================================= */
.page-prices .prices-shell-v99{
  padding-top:12px;
}
.page-prices .prices-local-nav-v102{
  top:calc(var(--header-h) + 8px);
  z-index:32;
  margin:0 0 8px;
  padding:6px;
  gap:6px;
  border-color:rgba(91,201,244,.16);
  border-radius:15px;
  background:rgba(5,18,30,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
}
.page-prices .prices-local-nav-v102 a{
  min-height:38px;
  padding:8px 11px;
  border-radius:10px;
  font-size:10px;
}
.page-prices .prices-local-nav-v102 a.is-active{
  border-color:rgba(94,214,255,.31);
  background:linear-gradient(180deg,rgba(28,113,157,.25),rgba(17,68,98,.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 22px rgba(46,183,241,.045);
}
.page-prices .prices-hero-v99{
  min-height:auto;
  gap:58px;
  align-items:center;
  padding:30px 0 54px;
}
.page-prices .prices-breadcrumb-v99{
  margin-bottom:24px;
}
.page-prices .prices-hero-copy-v99 h1{
  margin-top:20px;
}
.page-prices .prices-overview-row-v99{
  border-radius:10px;
}
.page-prices .prices-overview-row-v99.is-active{
  margin-inline:-7px;
  padding-left:10px;
  padding-right:10px;
  border-bottom-color:transparent;
  background:rgba(64,188,241,.065);
  box-shadow:inset 3px 0 0 rgba(74,207,255,.68);
}
.page-prices .prices-overview-row-v99.is-active strong,
.page-prices .prices-overview-row-v99.is-active>b{
  color:#f3fbff;
}
.page-prices #precios-servicio,
.page-prices #precios-web,
.page-prices #precios-continuidad,
.page-prices #precios-factores{
  scroll-margin-top:calc(var(--header-h) + 78px);
}
@media(max-width:980px){
  .page-prices .prices-shell-v99{padding-top:8px}
  .page-prices .prices-local-nav-v102{top:calc(var(--header-h) + 6px);margin-bottom:6px}
  .page-prices .prices-hero-v99{padding-top:22px;gap:30px;padding-bottom:46px}
  .page-prices .prices-breadcrumb-v99{margin-bottom:20px}
}
@media(max-width:760px){
  .page-prices .prices-local-nav-v102{
    top:calc(var(--header-h) + 5px);
    margin-inline:-2px;
    padding:5px;
    border-radius:13px;
  }
  .page-prices .prices-local-nav-v102 a{min-width:145px;min-height:38px;padding:8px 10px}
  .page-prices .prices-hero-v99{padding-top:18px;padding-bottom:42px}
  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{scroll-margin-top:calc(var(--header-h) + 68px)}
}


/* =========================================================
   DN TECH — PREMIUM V104 / PRECIOS NAV REALMENTE FLOTANTE
   La navegación sale del flujo y permanece sobre el contenido,
   justo debajo del header global durante todo el scroll.
   ========================================================= */
body.page-prices-premium .prices-local-nav-v102{
  position:fixed !important;
  top:calc(var(--header-h) + 9px) !important;
  left:50%;
  z-index:46;
  width:min(1040px,calc(100% - 48px));
  margin:0 !important;
  transform:translateX(-50%);
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:7px;
  border:1px solid rgba(91,201,244,.18);
  border-radius:16px;
  background:rgba(4,17,29,.90);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
  backdrop-filter:blur(18px) saturate(128%);
  box-shadow:0 16px 42px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.025) inset;
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
body.page-prices-premium .prices-local-nav-v102::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(40,184,244,.07),transparent 35%,transparent 65%,rgba(40,184,244,.055));
}
body.page-prices-premium .prices-local-nav-v102 a{
  min-height:40px;
}
/* Reserva solo el espacio real necesario bajo la barra flotante: el hero
   empieza antes que en V103, sin quedar escondido bajo la navegación. */
body.page-prices-premium .prices-shell-v99{
  padding-top:76px !important;
}
body.page-prices-premium .prices-hero-v99{
  padding-top:10px !important;
}
body.page-prices-premium .prices-breadcrumb-v99{
  margin-bottom:20px !important;
}
body.page-prices-premium .prices-hero-copy-v99 h1{
  margin-top:17px !important;
}
/* Cuando se abre el menú móvil global, la barra de precios se aparta para
   no competir con el drawer. */
body.page-prices-premium.mobile-nav-open .prices-local-nav-v102{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-10px);
}
@media(max-width:980px){
  body.page-prices-premium .prices-local-nav-v102{
    top:calc(var(--header-h) + 7px) !important;
    width:min(760px,calc(100% - 28px));
    grid-template-columns:repeat(4,minmax(130px,1fr));
  }
  body.page-prices-premium .prices-shell-v99{padding-top:72px !important}
}
@media(max-width:760px){
  body.page-prices-premium .prices-local-nav-v102{
    top:calc(var(--header-h) + 6px) !important;
    left:12px;
    right:12px;
    width:auto;
    transform:none;
    display:flex;
    gap:6px;
    padding:5px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    border-radius:13px;
  }
  body.page-prices-premium .prices-local-nav-v102::-webkit-scrollbar{display:none}
  body.page-prices-premium .prices-local-nav-v102 a{
    flex:0 0 auto;
    min-width:142px;
    min-height:38px;
    padding:8px 10px;
  }
  body.page-prices-premium .prices-shell-v99{padding-top:68px !important}
  body.page-prices-premium.mobile-nav-open .prices-local-nav-v102{
    transform:translateY(-10px);
  }
}

/* =========================================================
   DN TECH — PREMIUM V105 / PRECIOS NAV MOBILE COMPACTA
   Barra flotante más ligera en móvil, etiquetas cortas y activo centrado.
   ========================================================= */
body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{
  color:#4ecfff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
  flex:0 0 auto;
}
body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  min-width:0;
}
body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-short{display:none}

@media(max-width:760px){
  body.page-prices-premium .prices-local-nav-v102{
    top:calc(var(--header-h) + 3px) !important;
    left:8px;
    right:8px;
    gap:4px;
    padding:4px;
    min-height:48px;
    border-radius:12px;
    background:rgba(4,17,29,.96);
    box-shadow:0 10px 28px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.025) inset;
    scroll-padding-inline:4px;
    -webkit-overflow-scrolling:touch;
  }
  body.page-prices-premium .prices-local-nav-v102 a{
    flex:0 0 auto;
    min-width:auto;
    min-height:38px;
    padding:7px 11px;
    gap:6px;
    border-radius:9px;
    font-size:10.5px;
    white-space:nowrap;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{font-size:8px}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-full{display:none}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-short{display:inline}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-servicio"]{min-width:92px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-web"]{min-width:72px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-continuidad"]{min-width:118px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-factores"]{min-width:92px}
  body.page-prices-premium .prices-shell-v99{padding-top:56px !important}
  body.page-prices-premium .prices-hero-v99{padding-top:12px !important}
  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{scroll-margin-top:calc(var(--header-h) + 58px)}
}

@media(max-width:430px){
  body.page-prices-premium .prices-local-nav-v102{
    left:6px;
    right:6px;
  }
  body.page-prices-premium .prices-local-nav-v102 a{
    min-height:36px;
    padding:6px 9px;
    font-size:10px;
  }
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-servicio"]{min-width:86px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-web"]{min-width:66px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-continuidad"]{min-width:108px}
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-factores"]{min-width:86px}
}

/* =========================================================
   DN TECH — PREMIUM V106 / PRECIOS MOBILE NAV + QUICK VIEW
   En móvil la navegación ocupa todo el ancho sin scroll horizontal.
   Vista rápida no conserva selección persistente.
   ========================================================= */
@media(max-width:760px){
  body.page-prices-premium .prices-local-nav-v102{
    left:8px;
    right:8px;
    width:auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    overflow:visible;
    padding:4px;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-servicio"],
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-web"],
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-continuidad"],
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section="precios-factores"]{
    min-width:0;
    width:100%;
    min-height:38px;
    padding:7px 5px;
    gap:4px;
    justify-content:center;
    text-align:center;
    overflow:hidden;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{
    font-size:7.5px;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:9.4px;
    letter-spacing:0;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-short{
    display:inline;
    white-space:nowrap;
  }
}
@media(max-width:390px){
  body.page-prices-premium .prices-local-nav-v102{
    left:5px;
    right:5px;
    gap:3px;
    padding:3px;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    padding-inline:3px;
    gap:3px;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{font-size:7px}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{font-size:8.7px}
}

/* La vista rápida es navegación, no un segundo indicador de sección activa. */
body.page-prices-premium .prices-overview-row-v99.is-active{
  margin-inline:0;
  padding-left:3px;
  padding-right:3px;
  border-bottom-color:rgba(255,255,255,.065);
  background:transparent;
  box-shadow:none;
}
body.page-prices-premium .prices-overview-row-v99.is-active strong,
body.page-prices-premium .prices-overview-row-v99.is-active>b{
  color:inherit;
}
body.page-prices-premium .prices-overview-row-v99:focus{
  outline:none;
}
body.page-prices-premium .prices-overview-row-v99:focus:not(:focus-visible){
  background:transparent;
  box-shadow:none;
}
body.page-prices-premium .prices-overview-row-v99:focus-visible{
  outline:2px solid rgba(75,207,255,.58);
  outline-offset:3px;
}


/* =========================================================
   DN TECH — PREMIUM V107 / PRECIOS MOBILE NAV FINAL
   Barra compacta a ancho completo. En móvil no existe estado
   seleccionado persistente: solo interacción momentánea.
   ========================================================= */
@media(max-width:760px){
  body.page-prices-premium .prices-local-nav-v102{
    left:6px !important;
    right:6px !important;
    width:auto !important;
    top:calc(var(--header-h) + 2px) !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:2px !important;
    min-height:0 !important;
    height:auto !important;
    padding:3px !important;
    overflow:hidden !important;
    border-radius:10px !important;
    background:rgba(4,17,29,.965) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:31px !important;
    height:31px !important;
    padding:3px 2px !important;
    gap:3px !important;
    border:1px solid transparent !important;
    border-radius:7px !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    color:#9db6c6 !important;
    font-size:9px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    -webkit-tap-highlight-color:transparent;
  }
  body.page-prices-premium .prices-local-nav-v102 a.is-active,
  body.page-prices-premium .prices-local-nav-v102 a:focus,
  body.page-prices-premium .prices-local-nav-v102 a:focus:not(:focus-visible){
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#9db6c6 !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a:active{
    border-color:rgba(83,207,255,.18) !important;
    background:rgba(27,105,145,.10) !important;
    color:#eaf8ff !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a:focus-visible{
    outline:1px solid rgba(83,207,255,.50) !important;
    outline-offset:-2px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{
    flex:0 0 auto !important;
    font-size:6.8px !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{
    min-width:0 !important;
    font-size:8.4px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-full{display:none !important}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-short{display:inline !important}
  body.page-prices-premium .prices-shell-v99{padding-top:43px !important}
  body.page-prices-premium .prices-hero-v99{padding-top:9px !important}
  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{scroll-margin-top:calc(var(--header-h) + 46px) !important}
}

@media(max-width:410px){
  body.page-prices-premium .prices-local-nav-v102{
    left:4px !important;
    right:4px !important;
    gap:1px !important;
    padding:2px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    min-height:29px !important;
    height:29px !important;
    padding-inline:1px !important;
    gap:2px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{font-size:6.3px !important}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{font-size:7.7px !important}
  body.page-prices-premium .prices-shell-v99{padding-top:39px !important}
}


/* =========================================================
   DN TECH — PREMIUM V108 / PRECIOS MOBILE NAV BREAKPOINT FIX
   El submenú de precios comparte el breakpoint real del menú móvil global
   (860px). Cuatro pestañas iguales, compactas y sin selección persistente.
   ========================================================= */
@media (max-width:860px){
  body.page-prices-premium .prices-local-nav-v102{
    position:fixed !important;
    top:calc(var(--header-h) + 2px) !important;
    left:50vw !important;
    right:auto !important;
    width:calc(100vw - 12px) !important;
    max-width:none !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:2px !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:32px !important;
    gap:2px !important;
    overflow:hidden !important;
    border-radius:10px !important;
    border:1px solid rgba(91,201,244,.16) !important;
    background:rgba(4,17,29,.975) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025) !important;
    -webkit-backdrop-filter:blur(16px) saturate(125%) !important;
    backdrop-filter:blur(16px) saturate(125%) !important;
    z-index:1190 !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 2px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    border:1px solid transparent !important;
    border-radius:7px !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    color:#93adbd !important;
    font-size:9px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a.is-active,
  body.page-prices-premium .prices-local-nav-v102 a:hover,
  body.page-prices-premium .prices-local-nav-v102 a:focus,
  body.page-prices-premium .prices-local-nav-v102 a:focus:not(:focus-visible){
    color:#93adbd !important;
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a:active{
    color:#eefaff !important;
    border-color:rgba(83,207,255,.16) !important;
    background:rgba(31,130,178,.10) !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a:focus-visible{
    outline:1px solid rgba(83,207,255,.48) !important;
    outline-offset:-2px !important;
  }

  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{
    flex:0 0 auto !important;
    color:#4ecfff !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{
    min-width:0 !important;
    overflow:hidden !important;
    color:inherit !important;
    font-size:8.8px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-overflow:clip !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-full{display:none !important}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label-short{display:inline !important}

  /* En táctil, Vista rápida nunca conserva el pseudo-hover tras tocar. */
  body.page-prices-premium .prices-overview-row-v99:hover,
  body.page-prices-premium .prices-overview-row-v99.is-active,
  body.page-prices-premium .prices-overview-row-v99:focus,
  body.page-prices-premium .prices-overview-row-v99:focus:not(:focus-visible){
    margin-inline:0 !important;
    padding-left:3px !important;
    padding-right:3px !important;
    border-bottom-color:rgba(255,255,255,.065) !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.page-prices-premium .prices-overview-row-v99:hover strong,
  body.page-prices-premium .prices-overview-row-v99:hover>b,
  body.page-prices-premium .prices-overview-row-v99.is-active strong,
  body.page-prices-premium .prices-overview-row-v99.is-active>b{
    color:inherit !important;
  }

  body.page-prices-premium .prices-shell-v99{padding-top:42px !important}
  body.page-prices-premium .prices-hero-v99{padding-top:8px !important}
  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{scroll-margin-top:calc(var(--header-h) + 44px) !important}
}

@media (max-width:390px){
  body.page-prices-premium .prices-local-nav-v102{
    width:calc(100vw - 8px) !important;
    height:34px !important;
    min-height:34px !important;
    grid-template-rows:30px !important;
    gap:1px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    height:30px !important;
    min-height:30px !important;
    gap:2px !important;
    padding-inline:1px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{font-size:6.2px !important}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{font-size:7.7px !important}
  body.page-prices-premium .prices-shell-v99{padding-top:39px !important}
}

/* =========================================================
   DN TECH — PREMIUM V109 / PRECIOS MOBILE UX FINAL
   - Vista rápida usa botones: sin :visited ni estado residual.
   - En móvil la navegación local es sticky de verdad: nace en el
     flujo, deja aire respecto al header y flota al hacer scroll.
   ========================================================= */
body.page-prices-premium .prices-overview-row-v99{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border-top:0;
  border-left:0;
  border-right:0;
  border-radius:10px;
  background:transparent;
  color:#eef7ff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
body.page-prices-premium .prices-overview-row-v99 strong{color:#eaf6ff !important}
body.page-prices-premium .prices-overview-row-v99>b{color:#fff !important}
body.page-prices-premium .prices-overview-row-v99 em{color:#66879f !important}
body.page-prices-premium .prices-overview-row-v99:focus:not(:focus-visible){outline:none}

@media (hover:hover) and (pointer:fine){
  body.page-prices-premium .prices-overview-row-v99:hover{
    padding-left:10px;
    padding-right:10px;
    background:rgba(76,196,246,.045);
  }
}

@media (max-width:860px){
  /* Sticky en vez de fixed: al principio forma parte de la página y,
     al alcanzar el header, queda flotando con aire alrededor. */
  body.page-prices-premium .prices-local-nav-v102{
    position:sticky !important;
    top:calc(var(--header-h-scrolled) + 10px) !important;
    left:auto !important;
    right:auto !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    margin:10px auto 0 !important;
    padding:2px !important;
    transform:none !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:30px !important;
    gap:2px !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background:rgba(4,17,29,.94) !important;
    -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
    backdrop-filter:blur(18px) saturate(128%) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.03) !important;
    z-index:46 !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    height:30px !important;
    min-height:30px !important;
    padding:0 2px !important;
    border-radius:8px !important;
    gap:2px !important;
    color:#a5bdcc !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{
    font-size:6.6px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{
    font-size:8.2px !important;
    font-weight:850 !important;
  }

  /* Ya no hay que reservar espacio para una barra fixed. */
  body.page-prices-premium .prices-shell-v99{
    padding-top:14px !important;
  }
  body.page-prices-premium .prices-hero-v99{
    padding-top:10px !important;
  }

  /* En móvil ninguna interacción deja color residual en Vista rápida. */
  body.page-prices-premium .prices-overview-row-v99,
  body.page-prices-premium .prices-overview-row-v99:hover,
  body.page-prices-premium .prices-overview-row-v99:active,
  body.page-prices-premium .prices-overview-row-v99:focus,
  body.page-prices-premium .prices-overview-row-v99.is-active{
    margin-inline:0 !important;
    padding-left:3px !important;
    padding-right:3px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#eef7ff !important;
    border-bottom-color:rgba(255,255,255,.065) !important;
  }
  body.page-prices-premium .prices-overview-row-v99 strong,
  body.page-prices-premium .prices-overview-row-v99:hover strong,
  body.page-prices-premium .prices-overview-row-v99:active strong,
  body.page-prices-premium .prices-overview-row-v99:focus strong,
  body.page-prices-premium .prices-overview-row-v99.is-active strong{
    color:#eaf6ff !important;
    opacity:1 !important;
  }
  body.page-prices-premium .prices-overview-row-v99>b,
  body.page-prices-premium .prices-overview-row-v99:hover>b,
  body.page-prices-premium .prices-overview-row-v99:active>b,
  body.page-prices-premium .prices-overview-row-v99:focus>b,
  body.page-prices-premium .prices-overview-row-v99.is-active>b{
    color:#fff !important;
    opacity:1 !important;
  }
  body.page-prices-premium .prices-overview-row-v99 em{
    color:#7898ad !important;
    opacity:1 !important;
  }
  body.page-prices-premium .prices-overview-row-v99:focus-visible{
    outline:1px solid rgba(83,207,255,.46) !important;
    outline-offset:2px !important;
  }

  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{
    scroll-margin-top:calc(var(--header-h-scrolled) + 58px) !important;
  }

  body.page-prices-premium.mobile-nav-open .prices-local-nav-v102{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(-8px) !important;
  }
}

@media (max-width:390px){
  body.page-prices-premium .prices-local-nav-v102{
    width:calc(100% - 16px) !important;
    height:32px !important;
    min-height:32px !important;
    grid-template-rows:28px !important;
    margin-top:8px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    height:28px !important;
    min-height:28px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-index{font-size:6px !important}
  body.page-prices-premium .prices-local-nav-v102 .prices-nav-label{font-size:7.6px !important}
}

/* =========================================================
   DN TECH — PREMIUM V110 / PRECIOS MOBILE FLOAT ROBUSTO
   Fixed real + offset dinámico del header. Evita fallos de sticky al
   navegar por anclas y elimina cualquier franja clara detrás.
   ========================================================= */
body.page-prices-premium,
html:has(body.page-prices-premium){
  background:#050d18;
}

@media (max-width:860px){
  body.page-prices-premium .prices-local-nav-v102{
    position:fixed !important;
    top:var(--prices-nav-top,72px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:2px !important;
    transform:none !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:30px !important;
    gap:2px !important;
    overflow:hidden !important;
    border:1px solid rgba(91,201,244,.16) !important;
    border-radius:12px !important;
    background:rgba(4,17,29,.94) !important;
    -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
    backdrop-filter:blur(18px) saturate(128%) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.03) !important;
    z-index:1190 !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    height:30px !important;
    min-height:30px !important;
    padding:0 2px !important;
    border:1px solid transparent !important;
    border-radius:8px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#a5bdcc !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a.is-active,
  body.page-prices-premium .prices-local-nav-v102 a:hover,
  body.page-prices-premium .prices-local-nav-v102 a:focus,
  body.page-prices-premium .prices-local-nav-v102 a:focus:not(:focus-visible){
    color:#a5bdcc !important;
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.page-prices-premium .prices-local-nav-v102 a:active{
    color:#eefaff !important;
    background:rgba(31,130,178,.10) !important;
    border-color:rgba(83,207,255,.16) !important;
  }

  /* Reserva únicamente el espacio necesario para la barra fixed. */
  body.page-prices-premium .prices-main-v99{
    padding-top:48px !important;
    background:#050d18 !important;
  }
  body.page-prices-premium .prices-shell-v99{
    padding-top:10px !important;
  }
  body.page-prices-premium .prices-hero-v99{
    padding-top:8px !important;
  }

  body.page-prices-premium.mobile-nav-open .prices-local-nav-v102{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-6px) !important;
  }

  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{
    scroll-margin-top:calc(var(--header-h-scrolled) + 56px) !important;
  }
}

@media (max-width:390px){
  body.page-prices-premium .prices-local-nav-v102{
    left:8px !important;
    right:8px !important;
    height:32px !important;
    min-height:32px !important;
    grid-template-rows:28px !important;
  }
  body.page-prices-premium .prices-local-nav-v102 a,
  body.page-prices-premium .prices-local-nav-v102 a[data-prices-section]{
    height:28px !important;
    min-height:28px !important;
  }
  body.page-prices-premium .prices-main-v99{padding-top:44px !important}
}

/* =========================================================
   DN TECH — PREMIUM V111 / PRECIOS MOBILE SIMPLIFICADO
   En móvil se elimina por completo la navegación local de precios.
   Vista rápida queda como único acceso interno a las secciones.
   ========================================================= */
@media (max-width:860px){
  body.page-prices-premium .prices-local-nav-v102{
    display:none !important;
  }

  /* Ya no existe una barra flotante que reservar bajo el header. */
  body.page-prices-premium .prices-main-v99{
    padding-top:0 !important;
  }
  body.page-prices-premium .prices-shell-v99{
    padding-top:18px !important;
  }
  body.page-prices-premium .prices-hero-v99{
    padding-top:10px !important;
  }

  .page-prices #precios-servicio,
  .page-prices #precios-web,
  .page-prices #precios-continuidad,
  .page-prices #precios-factores{
    scroll-margin-top:calc(var(--header-h-scrolled) + 14px) !important;
  }
}

@media (max-width:390px){
  body.page-prices-premium .prices-shell-v99{
    padding-top:14px !important;
  }
}

/* =========================================================
   DN TECH — PREMIUM V112 / PRECIOS MOBILE NO X-OVERFLOW
   El apartado de precios no debe ensanchar el viewport en móvil.
   ========================================================= */
@media (max-width:860px){
  html:has(body.page-prices-premium),
  body.page-prices-premium{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
  }

  body.page-prices-premium .prices-main-v99,
  body.page-prices-premium .prices-page-v99,
  body.page-prices-premium .prices-shell-v99,
  body.page-prices-premium .prices-hero-v99,
  body.page-prices-premium .prices-hero-copy-v99,
  body.page-prices-premium .prices-overview-v99,
  body.page-prices-premium .prices-section-v99,
  body.page-prices-premium .prices-section-heading-v99,
  body.page-prices-premium .prices-tech-grid-v99,
  body.page-prices-premium .prices-tech-grid-v100,
  body.page-prices-premium .prices-tech-card-v99,
  body.page-prices-premium .prices-tech-card-v100,
  body.page-prices-premium .prices-packs-v102,
  body.page-prices-premium .prices-web-grid-v99,
  body.page-prices-premium .prices-web-card-v99,
  body.page-prices-premium .prices-web-extras-v100,
  body.page-prices-premium .prices-web-extras-groups-v102,
  body.page-prices-premium .prices-web-extras-grid-v100,
  body.page-prices-premium .prices-web-bridge-v99,
  body.page-prices-premium .prices-continuity-v99,
  body.page-prices-premium .prices-maintenance-v99,
  body.page-prices-premium .prices-factors-v99,
  body.page-prices-premium .prices-bundle-v102,
  body.page-prices-premium .prices-closing-v99,
  body.page-prices-premium .prices-legal-band-v100,
  body.page-prices-premium .prices-tech-help-v101{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  body.page-prices-premium .prices-page-v99,
  body.page-prices-premium .prices-main-v99{
    overflow-x:clip !important;
  }

  body.page-prices-premium .prices-list-v99>div,
  body.page-prices-premium .prices-card-head-v99,
  body.page-prices-premium .prices-packs-grid-v102 article,
  body.page-prices-premium .prices-web-extras-grid-v100>div,
  body.page-prices-premium .prices-factor-tags-v99,
  body.page-prices-premium .prices-closing-actions-v99{
    min-width:0 !important;
    max-width:100% !important;
  }

  body.page-prices-premium .prices-list-v99 span,
  body.page-prices-premium .prices-list-v99 strong,
  body.page-prices-premium .prices-web-extras-grid-v100 span,
  body.page-prices-premium .prices-web-extras-grid-v100 strong,
  body.page-prices-premium .prices-card-head-v99 h3,
  body.page-prices-premium .prices-bundle-v102 h2,
  body.page-prices-premium .prices-closing-v99 h2{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* No hay carruseles horizontales en Precios móvil: el gesto se reserva al scroll vertical. */
  body.page-prices-premium .prices-page-v99{
    touch-action:pan-y pinch-zoom;
  }
}


/* =========================================================
   DN TECH — PREMIUM V113 / PRECIOS CIERRE PREMIUM
   Navegación contextual desktop, filas de tarifa accionables y notas claras.
   ========================================================= */
@media (min-width:861px){
  body.page-prices-premium .prices-local-nav-v102{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:min(900px,calc(100% - 64px)) !important;
    margin:10px auto 0 !important;
    transform:none !important;
    padding:5px !important;
    gap:5px !important;
    border-radius:14px !important;
    background:rgba(5,19,31,.74) !important;
    border-color:rgba(87,204,249,.14) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025) !important;
    -webkit-backdrop-filter:blur(16px) saturate(118%) !important;
    backdrop-filter:blur(16px) saturate(118%) !important;
    opacity:1;
    visibility:visible;
    transition:opacity .2s ease,transform .24s ease,box-shadow .2s ease,background .2s ease;
  }
  body.page-prices-premium .prices-local-nav-v102 a{
    min-height:34px !important;
    padding:7px 9px !important;
    border-radius:9px !important;
    font-size:8.5px !important;
  }
  body.page-prices-premium.prices-nav-floating-v113 .prices-local-nav-v102{
    position:fixed !important;
    top:calc(var(--header-h-scrolled) + 10px) !important;
    left:50% !important;
    width:min(860px,calc(100% - 72px)) !important;
    margin:0 !important;
    transform:translateX(-50%) translateY(0) !important;
    z-index:47 !important;
    background:rgba(4,17,29,.89) !important;
    border-color:rgba(93,209,255,.19) !important;
    box-shadow:0 14px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03) !important;
  }
  body.page-prices-premium.prices-nav-floating-v113.prices-nav-ending-v113 .prices-local-nav-v102{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(-8px) !important;
  }
  body.page-prices-premium .prices-nav-placeholder-v113{display:none;height:0}
  body.page-prices-premium.prices-nav-floating-v113 .prices-nav-placeholder-v113{display:block;height:54px}
  body.page-prices-premium .prices-shell-v99{padding-top:14px !important}
}

/* Tarifas: menos aspecto de tabla y más lectura/acción. */
.page-prices .prices-list-v99>div{
  position:relative;
  margin:1px -9px;
  padding:11px 30px 11px 9px;
  border-radius:10px;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,color .18s ease;
}
.page-prices .prices-list-v99>div::after{
  content:"→";
  position:absolute;
  right:9px;
  top:50%;
  transform:translate(-4px,-50%);
  color:#60d8ff;
  font-size:12px;
  font-weight:900;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
.page-prices .prices-list-v99>div:hover,
.page-prices .prices-list-v99>div:focus-visible{
  background:rgba(54,180,232,.075);
  transform:translateX(2px);
  outline:none;
}
.page-prices .prices-list-v99>div:hover::after,
.page-prices .prices-list-v99>div:focus-visible::after{
  opacity:1;
  transform:translate(0,-50%);
}
.page-prices .prices-list-v99>div:hover span,
.page-prices .prices-list-v99>div:focus-visible span{color:#c5d9e7}
.page-prices .prices-list-v99>div:hover strong,
.page-prices .prices-list-v99>div:focus-visible strong{color:#fff}
.page-prices .prices-row-note-v113{
  display:block;
  margin-top:3px;
  color:#5f8298;
  font-size:8px;
  line-height:1.35;
  font-style:normal;
}
.page-prices .prices-tech-card-link-v102{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(86,205,250,.12);
  border-radius:10px;
  background:rgba(4,20,33,.25);
}
.page-prices .prices-tech-card-link-v102:hover{
  border-color:rgba(86,205,250,.28);
  background:rgba(50,172,224,.08);
}

/* Packs: una recomendación práctica sin claims de ventas. */
.page-prices .prices-packs-grid-v102 article.is-recommended-v113{
  border-color:rgba(86,211,255,.30);
  background:linear-gradient(145deg,rgba(14,58,83,.72),rgba(6,25,40,.86));
  box-shadow:0 16px 34px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.025);
}
.page-prices .prices-packs-grid-v102 article.is-recommended-v113 small b{
  display:inline-flex;
  margin-left:5px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(54,187,240,.11);
  color:#7edfff;
  font-size:6px;
  letter-spacing:.08em;
}

/* Notas legales/operativas algo más visibles. */
.page-prices .prices-piece-note-v102{
  padding-top:12px;
  color:#7f9caf;
  font-size:10px;
}
.page-prices .prices-piece-note-v102 strong{color:#d8f4ff}
.page-prices .prices-legal-band-v100{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.page-prices .prices-legal-band-v100 p{font-size:9.8px;line-height:1.65}
.page-prices .prices-web-extras-groups-v102>section>small{color:#72d9ff !important}

/* Bundle y cierre: diferenciar capítulos. */
.page-prices .prices-bundle-v102{
  background:linear-gradient(135deg,rgba(8,44,65,.76),rgba(5,24,39,.82));
  border-color:rgba(86,205,250,.18);
}
.page-prices .prices-closing-v99{
  box-shadow:0 20px 48px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.025);
}

@media(max-width:860px){
  /* V111 sigue mandando: sin submenú local en móvil. */
  body.page-prices-premium .prices-local-nav-v102,
  body.page-prices-premium .prices-nav-placeholder-v113{display:none !important}
  .page-prices .prices-list-v99>div{padding-right:12px;cursor:default}
  .page-prices .prices-list-v99>div::after{display:none}
  .page-prices .prices-list-v99>div:hover,
  .page-prices .prices-list-v99>div:focus-visible{transform:none;background:transparent}
  .page-prices .prices-tech-card-link-v102{padding:11px 12px}
  .page-prices .prices-legal-band-v100{grid-template-columns:1fr}
  .page-prices .prices-row-note-v113{font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .page-prices .prices-list-v99>div,
  body.page-prices-premium .prices-local-nav-v102{transition:none !important}
}

/* =========================================================
   DN TECH — PREMIUM V116 / PRECIOS · LOGÍSTICA DEL EQUIPO
   ========================================================= */
.page-prices .prices-logistics-v116{
  margin-top:18px;
  padding:22px;
  border:1px solid rgba(96,201,240,.18);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(9,40,59,.82),rgba(5,23,37,.88));
  box-shadow:0 16px 40px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.025);
}
.page-prices .prices-logistics-head-v116{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:28px;
  align-items:end;
  padding-bottom:18px;
  border-bottom:1px solid rgba(133,196,222,.10);
}
.page-prices .prices-logistics-head-v116 h3{
  margin:7px 0 0;
  max-width:720px;
  color:#f3f8fb;
  font-size:clamp(22px,2vw,31px);
  line-height:1.12;
}
.page-prices .prices-logistics-head-v116 p{
  margin:0;
  color:#8ea9ba;
  font-size:12px;
  line-height:1.7;
}
.page-prices .prices-logistics-grid-v116{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.page-prices .prices-logistics-grid-v116 article{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:17px;
  border:1px solid rgba(106,183,216,.14);
  border-radius:16px;
  background:rgba(5,24,39,.55);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.page-prices .prices-logistics-grid-v116 article:hover{
  transform:translateY(-2px);
  border-color:rgba(78,202,247,.28);
  background:rgba(9,39,58,.72);
}
.page-prices .prices-logistics-grid-v116 article>span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(77,203,250,.22);
  border-radius:12px;
  color:#61d6ff;
  font-size:9px;
  font-weight:800;
}
.page-prices .prices-logistics-grid-v116 strong{
  display:block;
  color:#edf7fb;
  font-size:13px;
  line-height:1.35;
}
.page-prices .prices-logistics-grid-v116 p{
  margin:7px 0 0;
  color:#819daf;
  font-size:10.5px;
  line-height:1.6;
}
.page-prices .prices-logistics-foot-v116{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid rgba(133,196,222,.09);
  color:#7592a4;
  font-size:9.8px;
  line-height:1.55;
}
.page-prices .prices-logistics-foot-v116 .link{
  flex:0 0 auto;
  color:#6ddcff;
  font-weight:800;
  text-decoration:none;
}

@media(max-width:980px){
  .page-prices .prices-logistics-head-v116{grid-template-columns:1fr;gap:10px}
  .page-prices .prices-logistics-grid-v116{grid-template-columns:1fr}
}
@media(max-width:860px){
  .page-prices .prices-logistics-v116{padding:17px;border-radius:18px}
  .page-prices .prices-logistics-head-v116 h3{font-size:22px}
  .page-prices .prices-logistics-head-v116 p{font-size:11.5px}
  .page-prices .prices-logistics-grid-v116 article{padding:15px}
  .page-prices .prices-logistics-grid-v116 strong{font-size:13px}
  .page-prices .prices-logistics-grid-v116 p{font-size:11px}
  .page-prices .prices-logistics-foot-v116{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .page-prices .prices-logistics-grid-v116 article{transition:none}
}


/* =========================================================
   DN TECH V120 - LANGUAGE SWITCH + BROCHURE
   ========================================================= */
html, body { background:#06101d !important; }
.nav-brochure {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:7px 12px !important; border:1px solid rgba(54,215,255,.28);
  border-radius:999px; background:rgba(54,215,255,.07); color:#eafaff !important;
  white-space:nowrap; text-decoration:none;
}
.nav-brochure:hover { background:rgba(54,215,255,.14); border-color:rgba(54,215,255,.5); }
.nav-brochure::after { display:none !important; }
.language-switch {
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:4px 8px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.045);
}
.lang-option { border:0; background:transparent; color:#8295a8; font:inherit; font-size:11px; font-weight:800; letter-spacing:.08em; cursor:pointer; padding:3px 2px; }
.lang-option:hover,.lang-option.is-active { color:#42ddff; }
.lang-separator { color:rgba(255,255,255,.2); font-size:11px; }
.google-translate-host { position:fixed !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; left:-9999px !important; top:-9999px !important; }
.goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame { display:none !important; }
body { top:0 !important; }
@media (max-width: 1100px) {
  .main-nav .nav-brochure { width:auto; margin-top:5px; padding:8px 12px !important; }
  .main-nav .language-switch { margin-top:7px; }
}

/* =========================================================
   DN TECH — V124 / PRECIOS MOBILE CONTROLS
   Unifica acordeones de precios con el breakpoint móvil global (860px).
   ========================================================= */
@media (max-width:860px){
  .page-prices .prices-tech-card-toggle-v102{display:grid}
  .page-prices .prices-tech-card-v100:not(.is-open) .prices-list-v99,
  .page-prices .prices-tech-card-v100:not(.is-open) .prices-tech-card-link-v102{display:none}
  .page-prices .prices-tech-card-v100 .prices-card-head-v99{cursor:pointer}
  .page-prices .prices-tech-card-v100.is-open .prices-card-head-v99{border-bottom:1px solid rgba(255,255,255,.06)}
}


/* ===== DN TECH · contacto flotante global ===== */
.floating-contact{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;flex-direction:column;gap:11px;align-items:center}
.floating-contact-btn{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.floating-contact-btn svg{width:27px;height:27px;fill:currentColor}
.floating-contact-whatsapp{background:#25D366;color:#fff}
.floating-contact-email{background:#0b6fbf;color:#fff}
.floating-contact-btn:hover,.floating-contact-btn:focus-visible{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px rgba(0,0,0,.34);filter:brightness(1.06)}
.floating-contact-btn:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:3px}
@media(max-width:700px){.floating-contact{right:14px;bottom:14px;gap:9px}.floating-contact-btn{width:50px;height:50px}.floating-contact-btn svg{width:25px;height:25px}}


/* DN TECH V133 · Hero labels unified */
.dn-unified-eyebrow{display:inline-flex!important;align-items:center!important;gap:10px!important}
.dn-unified-dot,
.page-why-dn .why-eyebrow i,
.page-prices .prices-kicker-v99 i,
.svc-eyebrow-dot,
.services-catalog-eyebrow-dot,
.prc-eyebrow-dot,
.web-status-dot,
.eyebrow-dot{width:8px!important;height:8px!important;min-width:8px!important;border-radius:50%!important;background:#55d6ff!important;box-shadow:0 0 0 7px rgba(85,214,255,.08),0 0 16px rgba(85,214,255,.28)!important}
.page-why-dn .why-eyebrow,.page-prices .prices-kicker-v99,.svc-eyebrow,.services-catalog-eyebrow,.prc-eyebrow,.web-showcase-eyebrow{display:inline-flex!important;align-items:center!important;gap:10px!important}

/* DN TECH V134 · Etiquetas principales totalmente unificadas */
.dn-unified-eyebrow,
.page-why-dn .why-eyebrow,
.page-prices .prices-kicker-v99,
.svc-eyebrow,
.services-catalog-eyebrow,
.prc-eyebrow,
.web-showcase-eyebrow {
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:18px!important;
  color:#69d9ff!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.dn-unified-dot,
.page-why-dn .why-eyebrow i,
.page-prices .prices-kicker-v99 i,
.svc-eyebrow-dot,
.services-catalog-eyebrow-dot,
.prc-eyebrow-dot,
.web-status-dot,
.eyebrow-dot {
  display:inline-block!important;
  flex:0 0 10px!important;
  width:10px!important;
  height:10px!important;
  min-width:10px!important;
  border-radius:50%!important;
  background:#52e1bc!important;
  box-shadow:0 0 0 7px rgba(82,225,188,.09),0 0 18px rgba(82,225,188,.34)!important;
}
@media(max-width:700px){
  .dn-unified-eyebrow,
  .page-why-dn .why-eyebrow,
  .page-prices .prices-kicker-v99,
  .svc-eyebrow,
  .services-catalog-eyebrow,
  .prc-eyebrow,
  .web-showcase-eyebrow {
    gap:10px!important;
    font-size:11px!important;
    line-height:1.4!important;
    letter-spacing:.12em!important;
  }
  .dn-unified-dot,
  .page-why-dn .why-eyebrow i,
  .page-prices .prices-kicker-v99 i,
  .svc-eyebrow-dot,
  .services-catalog-eyebrow-dot,
  .prc-eyebrow-dot,
  .web-status-dot,
  .eyebrow-dot {flex-basis:9px!important;width:9px!important;height:9px!important;min-width:9px!important}
}

/* DN TECH V136 · ajuste fino etiqueta principal + destello sutil por contracción */
.dn-unified-eyebrow,
.page-why-dn .why-eyebrow,
.page-prices .prices-kicker-v99,
.svc-eyebrow,
.services-catalog-eyebrow,
.prc-eyebrow,
.web-showcase-eyebrow {
  font-size:11.5px!important;
}
.dn-unified-dot,
.page-why-dn .why-eyebrow i,
.page-prices .prices-kicker-v99 i,
.svc-eyebrow-dot,
.services-catalog-eyebrow-dot,
.prc-eyebrow-dot,
.web-status-dot,
.eyebrow-dot {
  animation:dnTechDotPulse 2.8s ease-in-out infinite!important;
  transform-origin:center!important;
}
@keyframes dnTechDotPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 7px rgba(82,225,188,.09),0 0 18px rgba(82,225,188,.34);filter:brightness(1)}
  50%{transform:scale(.965);box-shadow:0 0 0 6px rgba(82,225,188,.075),0 0 15px rgba(82,225,188,.28);filter:brightness(.97)}
}
@media(max-width:700px){
  .dn-unified-eyebrow,
  .page-why-dn .why-eyebrow,
  .page-prices .prices-kicker-v99,
  .svc-eyebrow,
  .services-catalog-eyebrow,
  .prc-eyebrow,
  .web-showcase-eyebrow {font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .dn-unified-dot,
  .page-why-dn .why-eyebrow i,
  .page-prices .prices-kicker-v99 i,
  .svc-eyebrow-dot,
  .services-catalog-eyebrow-dot,
  .prc-eyebrow-dot,
  .web-status-dot,
  .eyebrow-dot {animation:none!important}
}

/* DN TECH V137 · punto principal ligeramente más pequeño */
.dn-unified-dot,
.page-why-dn .why-eyebrow i,
.page-prices .prices-kicker-v99 i,
.svc-eyebrow-dot,
.services-catalog-eyebrow-dot,
.prc-eyebrow-dot,
.web-status-dot,
.eyebrow-dot {
  flex:0 0 8px!important;
  width:8px!important;
  height:8px!important;
  min-width:8px!important;
  box-shadow:0 0 0 6px rgba(82,225,188,.085),0 0 15px rgba(82,225,188,.30)!important;
}
@keyframes dnTechDotPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 6px rgba(82,225,188,.085),0 0 15px rgba(82,225,188,.30);filter:brightness(1)}
  50%{transform:scale(.965);box-shadow:0 0 0 5px rgba(82,225,188,.07),0 0 13px rgba(82,225,188,.25);filter:brightness(.97)}
}
@media(max-width:700px){
  .dn-unified-dot,
  .page-why-dn .why-eyebrow i,
  .page-prices .prices-kicker-v99 i,
  .svc-eyebrow-dot,
  .services-catalog-eyebrow-dot,
  .prc-eyebrow-dot,
  .web-status-dot,
  .eyebrow-dot {flex-basis:7px!important;width:7px!important;height:7px!important;min-width:7px!important}
}

/* DN TECH V138 — contacto flotante compacto SOLO en móvil */
.floating-contact-toggle{display:none}
@media(max-width:700px){
  .floating-contact{right:14px;bottom:14px;gap:8px;align-items:flex-end}
  .floating-contact-btn{width:46px;height:46px}
  .floating-contact-btn svg{width:23px;height:23px}
  .floating-contact-toggle{display:flex;width:50px;height:50px;border:1px solid rgba(255,255,255,.18);border-radius:50%;align-items:center;justify-content:center;background:#0b6fbf;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;order:3;padding:0}
  .floating-contact-toggle svg{width:24px;height:24px;fill:currentColor}
  .floating-contact-toggle:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:3px}
  .floating-contact .floating-contact-btn{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px) scale(.94);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
  .floating-contact.is-open .floating-contact-btn{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
  .floating-contact.is-open .floating-contact-toggle{transform:scale(.96)}
}


/* DN TECH V144 — utilidades compactas SOLO escritorio. Móvil permanece V138. */
.desktop-utilities-v144{display:none}
@media (min-width:861px){
  .main-nav .nav-brochure,.main-nav .language-switch{display:none !important}
  .desktop-utilities-v144{position:fixed;left:18px;bottom:18px;z-index:9998;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  .desktop-util-v144{box-sizing:border-box;height:32px;padding:3px 10px 3px 4px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(5,17,29,.88);color:#f2f8fc;text-decoration:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:11px;font-weight:800;line-height:1;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.20);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .18s ease,border-color .18s ease,background .18s ease}
  .desktop-lang-v144{min-width:66px}
  .desktop-brochure-v144{min-width:104px}
  .desktop-util-v144:hover,.desktop-util-v144:focus-visible{transform:translateY(-1px);border-color:rgba(54,215,255,.45);background:rgba(8,25,42,.94)}
  .desktop-util-v144:focus-visible{outline:2px solid rgba(66,221,255,.8);outline-offset:2px}
  .desktop-util-icon-v144{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;background:#19c4e5;color:#052031;font-size:13px;font-weight:900}
}

/* DN TECH V145: presupuesto flotante solo escritorio; móvil conserva V138/V144 */
@media (min-width: 769px){
  #header-contact-button{display:none !important;}
  .desktop-quote-v145{border-color:rgba(47,214,255,.26);}
}

/* DN TECH V146 — navegación centrada + header unificado con Inicio */
.site-header,
.site-header.is-scrolled,
body.page-web-showcase .site-header,
body.page-web-projects .site-header,
body.page-web-process .site-header,
body.page-web-plans .site-header,
body.page-why-dn .site-header,
body.page-why-dn .site-header.is-scrolled,
.page-prices .site-header {
  background:
    linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.014) 44%,rgba(255,255,255,0) 100%),
    rgba(7,18,31,.58) !important;
  -webkit-backdrop-filter:blur(22px) saturate(155%) !important;
  backdrop-filter:blur(22px) saturate(155%) !important;
  border-top:1px solid rgba(255,255,255,.028) !important;
  border-bottom:1px solid rgba(112,205,246,.105) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 9px 30px rgba(0,0,0,.075) !important;
}
.site-header.is-scrolled,
body.page-web-showcase .site-header.is-scrolled,
body.page-web-projects .site-header.is-scrolled,
body.page-web-process .site-header.is-scrolled,
body.page-web-plans .site-header.is-scrolled,
body.page-why-dn .site-header.is-scrolled {
  background:
    linear-gradient(180deg,rgba(255,255,255,.042) 0%,rgba(255,255,255,.010) 46%,rgba(255,255,255,0) 100%),
    rgba(6,16,28,.76) !important;
}
@media (min-width:861px){
  .site-header .nav-wrap{position:relative}
  .site-header .main-nav{
    position:absolute;
    left:50%;
    margin-left:0 !important;
    transform:translateX(-50%);
    justify-content:center;
    white-space:nowrap;
  }
}

/* =========================================================
   DN TECH V148 — MOBILE HORIZONTAL OVERFLOW GUARD
   Prevents decorative/fixed layers from making the mobile
   document wider than the viewport. Does not alter content width.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
@media (max-width: 860px) {
  body, main, .site-main, .page, .page-shell, .container {
    max-width: 100%;
  }
  img, video, svg, canvas, iframe {
    max-width: 100%;
  }
}