/* =========================================================
   DN TECH — DESARROLLO WEB / V53
   Estilos aislados de la portada de Desarrollo web.
   ========================================================= */

.page-web-showcase {
  --web52-cyan:#57d5ff;
  --web52-blue:#238dff;
  --web52-line:rgba(116,213,255,.16);
  --web52-panel:rgba(11,31,52,.78);
  --web52-muted:#9bb4c9;
  background:#050d18;
}

.page-web-showcase .site-header {
  background:linear-gradient(180deg,rgba(5,15,27,.91),rgba(5,15,27,.82));
  border-bottom:1px solid rgba(105,207,255,.11);
  box-shadow:none;
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
}

.page-web-showcase .premium-web-view {
  --web-pointer-x:76%;
  --web-pointer-y:32%;
  min-height:calc(100vh - var(--header-h));
  background:
    radial-gradient(620px circle at var(--web-pointer-x) var(--web-pointer-y),rgba(41,182,246,.10),transparent 58%),
    radial-gradient(circle at 86% 14%,rgba(26,132,231,.15),transparent 27%),
    radial-gradient(circle at 12% 82%,rgba(27,85,176,.08),transparent 31%),
    linear-gradient(145deg,#050d18 0%,#0a1c30 100%);
}

.page-web-showcase .premium-web-view::before {
  opacity:.11;
  background-size:56px 56px;
}

.page-web-showcase .premium-web-view::after {
  width:690px;
  height:690px;
  right:-330px;
  top:5%;
  opacity:.8;
}

.page-web-showcase .web-showcase-container-v8 {
  min-height:calc(100vh - var(--header-h));
  grid-template-columns:.91fr 1.09fr;
  gap:50px;
  padding-top:52px;
  padding-bottom:54px;
}

.page-web-showcase .web-showcase-copy-v8 {
  max-width:610px;
}

.page-web-showcase .web-showcase-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#65d8ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.page-web-showcase .web-status-dot {
  width:7px;
  height:7px;
  background:#59d9ff;
  box-shadow:0 0 0 5px rgba(89,217,255,.075),0 0 18px rgba(89,217,255,.34);
}

.page-web-showcase .web-showcase-title-v8 {
  max-width:620px;
  margin-bottom:22px;
  font-size:clamp(48px,4.55vw,70px);
  line-height:.99;
  letter-spacing:-.052em;
}

.page-web-showcase .web-title-accent {
  background:linear-gradient(90deg,#26a7ff 0%,#59d4ff 55%,#a2eaff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.page-web-showcase .web-showcase-subtitle-v8 {
  max-width:605px;
  color:#b4c7d7;
  font-size:16.5px;
  line-height:1.72;
}

.page-web-showcase .web-showcase-actions-v8 {
  margin-top:28px;
  gap:12px;
}

.page-web-showcase .web-primary-button,
.page-web-showcase .web-secondary-button {
  min-height:51px;
  border-radius:13px;
}

.page-web-showcase .web-secondary-button {
  border-color:rgba(157,216,247,.26);
  background:rgba(255,255,255,.022);
}

.page-web-showcase .web-secondary-button:hover {
  transform:translateY(-2px);
  border-color:rgba(100,213,255,.42);
  background:rgba(37,133,205,.12);
  box-shadow:0 13px 28px rgba(0,0,0,.18),0 0 24px rgba(62,190,255,.05);
}

.page-web-showcase .web-feature-chips-v8 {
  gap:8px;
  margin-top:20px;
}

.page-web-showcase .web-feature-chips-v8 .web-feature-chip {
  padding:7px 11px;
  border-color:rgba(151,213,246,.13);
  background:rgba(255,255,255,.036);
  color:#a8c1d5;
  font-size:10.5px;
}

/* Navegación contextual: parece un pequeño dashboard, no tres botones grandes. */
.page-web-showcase .web-showcase-subnav-v8 {
  margin-top:27px;
  padding-top:15px;
  border-top:1px solid rgba(151,213,246,.10);
}

.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
  min-height:54px;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
}

.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover {
  transform:translateY(-2px);
  background:rgba(31,114,172,.10);
  box-shadow:inset 0 0 0 1px rgba(103,210,255,.12);
}

.page-web-showcase .web-showcase-subnav-v8 .web-subnav-index {
  color:#527b98;
  font-size:8.5px;
}

.page-web-showcase .web-showcase-subnav-v8 .web-subnav-title {
  color:#e2f2fc;
  font-size:11px;
}

.page-web-showcase .web-showcase-subnav-v8 .web-subnav-note {
  color:#7795ab;
  font-size:8.6px;
}

/* Showcase a la derecha */
.page-web-showcase .web-demo-column-v8 {
  min-width:0;
  max-width:760px;
  justify-self:end;
  width:100%;
}

.page-web-showcase .web-demo-toolbar-v8 {
  margin:0 4px 11px;
}

.page-web-showcase .web-demo-toolbar-label {
  color:#d9ebf7;
}

.page-web-showcase .web-demo-toolbar-project {
  color:#7694aa;
}

.page-web-showcase .web-demo-stage-v8 {
  min-height:535px;
  padding:25px;
  border-color:rgba(109,212,255,.19);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(17,47,78,.88),rgba(5,15,27,.97));
  box-shadow:0 42px 92px rgba(0,0,0,.39),0 0 55px rgba(36,159,228,.035),inset 0 1px 0 rgba(255,255,255,.045);
}

.page-web-showcase .web-demo-stage-v8:hover {
  border-color:rgba(109,212,255,.31);
  box-shadow:0 48px 106px rgba(0,0,0,.44),0 0 62px rgba(36,159,228,.065),inset 0 1px 0 rgba(255,255,255,.055);
}

.page-web-showcase .web-browser-frame-v8 {
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 28px 58px rgba(0,0,0,.29),0 0 0 1px rgba(0,0,0,.04);
}

.page-web-showcase .web-mobile-companion {
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));
}

.page-web-showcase .web-demo-badge-v8,
.page-web-showcase .web-demo-capability {
  border-color:rgba(117,213,255,.14);
  background:rgba(5,18,31,.79);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.page-web-showcase .web-device-switcher {
  border-color:rgba(138,210,247,.14);
  background:rgba(3,12,21,.62);
}

.page-web-showcase .web-device-button:focus-visible,
.page-web-showcase .web-subnav-link:focus-visible,
.page-web-showcase .web-primary-button:focus-visible,
.page-web-showcase .web-secondary-button:focus-visible {
  outline:2px solid rgba(103,216,255,.75);
  outline-offset:3px;
}

/* Footer ya utiliza la identidad nueva. */
.page-web-showcase .web-footer {
  border-top:1px solid rgba(104,212,255,.08);
  background:#030b14;
}

.page-web-showcase .web-footer .footer-inner {
  min-height:88px;
  padding-top:18px;
  padding-bottom:18px;
}

.page-web-showcase .footer-brand-new {
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.page-web-showcase .footer-brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  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-showcase .footer-brand-icon {
  width:24px;
  height:24px;
  object-fit:contain;
}

.page-web-showcase .footer-brand-copy {
  display:grid;
  line-height:1;
}

.page-web-showcase .footer-brand-main {
  color:#f2f9ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.035em;
}

.page-web-showcase .footer-brand-city {
  margin-top:4px;
  color:#64cfff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.22em;
}

/* Cursor light únicamente en esta página. */
@media (hover:hover) and (pointer:fine) {
  .page-web-showcase .premium-web-view {
    transition:background .08s linear;
  }
}

@media (max-width:1180px) {
  .page-web-showcase .web-showcase-container-v8 {
    grid-template-columns:.88fr 1.12fr;
    gap:34px;
  }
  .page-web-showcase .web-showcase-title-v8 { font-size:clamp(45px,5.2vw,64px); }
  .page-web-showcase .web-demo-stage-v8 { min-height:505px; padding:20px; }
}

@media (max-width:980px) {
  .page-web-showcase .web-showcase-container-v8 {
    min-height:auto;
    grid-template-columns:1fr;
    gap:46px;
    padding-top:58px;
    padding-bottom:58px;
  }
  .page-web-showcase .web-showcase-copy-v8,
  .page-web-showcase .web-showcase-title-v8,
  .page-web-showcase .web-showcase-subtitle-v8 { max-width:760px; }
  .page-web-showcase .web-demo-column-v8 { justify-self:start; max-width:850px; }
  .page-web-showcase .web-demo-stage-v8 { transform:none !important; }
}

@media (max-width:700px) {
  .page-web-showcase .web-showcase-container-v8 {
    gap:38px;
    padding-top:42px;
    padding-bottom:46px;
  }
  .page-web-showcase .web-showcase-title-v8 {
    font-size:clamp(40px,12vw,57px);
    line-height:1;
  }
  .page-web-showcase .web-showcase-subtitle-v8 { font-size:15.5px; }
  .page-web-showcase .web-showcase-actions-v8 { flex-direction:column; }
  .page-web-showcase .web-showcase-actions-v8 .btn { width:100%; }
  .page-web-showcase .web-feature-chip { width:100%; justify-content:flex-start; }
  .page-web-showcase .web-showcase-subnav-v8 { grid-template-columns:1fr; }
  .page-web-showcase .web-demo-stage-v8 { min-height:470px; padding:14px; border-radius:23px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-web-showcase .premium-web-view { --web-pointer-x:76%; --web-pointer-y:32%; }
}

.page-web-showcase .web-subnav-link { position:relative; overflow:hidden; }
.page-web-showcase .web-subnav-link::after {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  left:calc(var(--local-x,50%) - 60px);
  top:calc(var(--local-y,50%) - 60px);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(84,207,255,.11),transparent 70%);
  transition:opacity .22s ease;
}
.page-web-showcase .web-subnav-link:hover::after { opacity:1; }


/* =========================================================
   V53 — REFINADO DE PORTADA / SHOWCASE
   ========================================================= */
.page-web-showcase .premium-web-view { min-height:auto; }
.page-web-showcase .web-showcase-container-v8 { min-height:auto; grid-template-rows:auto auto; align-items:center; padding-top:48px; padding-bottom:30px; }
.page-web-showcase .web-showcase-copy-v8 { align-self:center; }
.page-web-showcase .web-showcase-title-v8 { max-width:605px; font-size:clamp(47px,4.35vw,68px); }
.page-web-showcase .web-title-accent { white-space:normal; }
.page-web-showcase .web-showcase-subtitle-v8 { max-width:590px; color:#bdd0df; }
.page-web-showcase .web-secondary-button { color:#f2f8fd !important; border-color:rgba(157,216,247,.31); background:rgba(255,255,255,.035); }
.page-web-showcase .web-secondary-button .btn-label,.page-web-showcase .web-secondary-button .btn-arrow { color:inherit; }
.page-web-showcase .web-secondary-button:hover { color:#fff !important; border-color:rgba(100,213,255,.52); background:rgba(37,133,205,.15); }
.page-web-showcase .web-feature-chips-v8 .web-feature-chip { color:#b2cada; background:rgba(255,255,255,.04); }
.page-web-showcase .web-showcase-subnav-v8 { gap:6px; margin-top:25px; padding-top:16px; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link { min-height:61px; padding:11px 13px; border:1px solid transparent; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover { border-color:rgba(103,210,255,.13); background:rgba(31,114,172,.12); }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-index { color:#5b89a7; font-size:9px; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-title { color:#edf8ff; font-size:11.7px; }
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-note { color:#87a5ba; font-size:9.2px; }
.page-web-showcase .web-subnav-arrow { color:#65d7ff; transition:transform .18s ease,color .18s ease; }
.page-web-showcase .web-subnav-link:hover .web-subnav-arrow { transform:translate(2px,-2px); color:#a8ecff; }
.page-web-showcase .web-device-controls { display:flex; align-items:center; gap:8px; }
.page-web-showcase .web-device-state { color:#7899ae; font-size:7.5px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.page-web-showcase .web-device-button { transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.page-web-showcase .web-device-button:hover { transform:translateY(-1px); }
.page-web-showcase .web-browser-frame-v8 { transition:width .52s cubic-bezier(.2,.72,.22,1),max-width .52s cubic-bezier(.2,.72,.22,1),margin .52s cubic-bezier(.2,.72,.22,1),border-radius .52s cubic-bezier(.2,.72,.22,1),transform .52s cubic-bezier(.2,.72,.22,1); }
.page-web-showcase .web-proof-strip { grid-column:1 / -1; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:20px; overflow:hidden; border:1px solid rgba(112,205,246,.11); border-radius:18px; background:linear-gradient(135deg,rgba(18,51,80,.52),rgba(5,17,30,.68)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.page-web-showcase .web-proof-item { min-width:0; display:grid; gap:3px; padding:13px 16px; position:relative; }
.page-web-showcase .web-proof-item + .web-proof-item::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:1px; background:rgba(112,205,246,.08); }
.page-web-showcase .web-proof-item strong { color:#e7f5fe; font-size:9.5px; font-weight:850; }
.page-web-showcase .web-proof-item small { color:#7f9db2; font-size:7.8px; line-height:1.35; }
.page-web-showcase .web-footer .footer-link { color:#819db1; }
.page-web-showcase .web-footer .footer-link:hover { color:#dff5ff; }
@media (max-width:980px) {
  .page-web-showcase .web-showcase-container-v8 { padding-top:54px; padding-bottom:34px; }
  .page-web-showcase .web-proof-strip { grid-template-columns:repeat(3,1fr); }
  .page-web-showcase .web-proof-item:nth-child(4),.page-web-showcase .web-proof-item:nth-child(5) { border-top:1px solid rgba(112,205,246,.08); }
}
@media (max-width:700px) {
  .page-web-showcase .web-device-state { display:none; }
  .page-web-showcase .web-proof-strip { grid-template-columns:1fr; margin-top:12px; }
  .page-web-showcase .web-proof-item + .web-proof-item::before { top:0; right:0; bottom:auto; width:auto; height:1px; }
  .page-web-showcase .web-proof-item { padding:11px 13px; }
}


/* =========================================================
   V54 — ACABADO INTERACTIVO / SHOWCASE FINAL
   Alcance: solo portada de Desarrollo web.
   ========================================================= */
.page-web-showcase .web-showcase-title-v8 {
  line-height:.955;
  letter-spacing:-.05em;
  margin-bottom:20px;
}

.page-web-showcase .web-title-accent {
  background:linear-gradient(90deg,#259fe8 0%,#49bdec 58%,#79d2ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.page-web-showcase .web-demo-toolbar-project {
  color:#89a9bd;
}

/* El selector no es decorativo: muestra con claridad la vista activa. */
.page-web-showcase .web-device-switcher {
  padding:3px;
  gap:2px;
  border-color:rgba(138,210,247,.18);
  background:rgba(2,10,18,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.16);
}
.page-web-showcase .web-device-button {
  border:1px solid transparent;
  border-radius:7px;
}
.page-web-showcase .web-device-button.is-active {
  color:#a9edff;
  border-color:rgba(104,212,255,.22);
  background:linear-gradient(145deg,rgba(35,144,207,.22),rgba(19,83,128,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 18px rgba(60,193,245,.10);
}
.page-web-showcase .web-device-button.is-active .web-device-icon {
  filter:drop-shadow(0 0 5px rgba(89,215,255,.24));
}
.page-web-showcase .web-device-state {
  color:#90aec2;
}

/* Profundidad localizada: el producto flota, no todo el panel. */
.page-web-showcase .web-demo-stage-v8 {
  overflow:visible;
}
.page-web-showcase .web-demo-stage-v8::before {
  border-radius:inherit;
}
.page-web-showcase .web-demo-stage-v8 .web-demo-glow::after {
  content:"";
  position:absolute;
  z-index:0;
  left:18%;
  right:16%;
  bottom:20px;
  height:62px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(31,147,218,.22),rgba(31,147,218,.07) 38%,transparent 72%);
  filter:blur(19px);
  opacity:.72;
}
.page-web-showcase .web-browser-frame-v8 {
  box-shadow:0 35px 74px rgba(0,0,0,.45),0 13px 30px rgba(11,57,88,.16),0 0 0 1px rgba(255,255,255,.025);
}

/* El cambio de dispositivo debe percibirse como una demo real. */
.page-web-showcase .web-demo-stage-v8[data-preview-device="tablet"] .web-browser-frame-v8 {
  transform:translateY(3px);
  box-shadow:0 34px 72px rgba(0,0,0,.43),0 10px 28px rgba(13,62,94,.14);
}
.page-web-showcase .web-demo-stage-v8[data-preview-device="mobile"] .web-browser-frame-v8 {
  transform:translateY(5px);
  box-shadow:0 32px 68px rgba(0,0,0,.45),0 10px 24px rgba(13,62,94,.12);
}

/* Accesos internos: navegación secundaria, no simple metadata. */
.page-web-showcase .web-showcase-subnav-v8 {
  margin-top:29px;
  padding-top:17px;
  gap:8px;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
  min-height:66px;
  padding:12px 14px;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-title {
  font-size:12px;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-note {
  margin-top:2px;
  color:#8aa9bc;
  font-size:9.4px;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover {
  transform:translateY(-2px);
  border-color:rgba(103,210,255,.17);
  background:linear-gradient(180deg,rgba(53,176,236,.09),rgba(24,86,130,.035));
  box-shadow:0 10px 24px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.025);
}

/* Cierre ligero: reduce el aire muerto antes del footer sin convertirlo en otra sección. */
.page-web-showcase .web-proof-strip {
  margin-top:16px;
}
.page-web-showcase .web-proof-item {
  padding-top:12px;
  padding-bottom:12px;
}

@media (hover:hover) and (pointer:fine) {
  .page-web-showcase .web-mobile-companion {
    will-change:transform;
  }
}

@media (max-width:980px) {
  .page-web-showcase .web-demo-stage-v8 { overflow:hidden; }
}

@media (max-width:700px) {
  .page-web-showcase .web-showcase-title-v8 {
    line-height:.98;
  }
  .page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
    min-height:58px;
  }
}

/* =========================================================
   V55 — MICROAJUSTES FINALES DE PORTADA WEB
   Alcance: precisión visual e interacción de la portada.
   ========================================================= */
@media (min-width:981px) {
  .page-web-showcase .web-showcase-container-v8 {
    padding-bottom:44px;
  }

  /* Menos altura visual sin perder el impacto del titular. */
  .page-web-showcase .web-showcase-title-v8 {
    max-width:625px;
    font-size:clamp(46px,4.25vw,66px);
    line-height:.94;
    letter-spacing:-.049em;
    margin-bottom:19px;
  }

  /* Alinea un poco mejor la masa visual del showcase con el titular. */
  .page-web-showcase .web-demo-column-v8 {
    transform:translateY(-10px);
  }
}

/* Cian algo más editorial y menos luminoso. */
.page-web-showcase .web-title-accent {
  background:linear-gradient(90deg,#2498df 0%,#45b6e5 58%,#70cae6 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* El selector sigue siendo legible incluso cuando una vista no está activa. */
.page-web-showcase .web-device-state {
  color:#9bb7c9;
  font-weight:900;
  letter-spacing:.095em;
}
.page-web-showcase .web-device-button {
  color:#88a9bd;
  border-color:rgba(128,199,235,.055);
  background:rgba(255,255,255,.012);
}
.page-web-showcase .web-device-button:hover {
  color:#d2f3ff;
  border-color:rgba(111,215,255,.18);
  background:rgba(46,143,199,.08);
}
.page-web-showcase .web-device-button.is-active {
  color:#b7efff;
  border-color:rgba(104,212,255,.31);
  background:linear-gradient(145deg,rgba(35,144,207,.27),rgba(19,83,128,.17));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 0 20px rgba(60,193,245,.13);
}

/* Más profundidad localizada bajo el trabajo, no un glow general de la sección. */
.page-web-showcase .web-demo-stage-v8 {
  box-shadow:0 44px 96px rgba(0,0,0,.42),0 18px 38px rgba(8,50,80,.12),inset 0 1px 0 rgba(255,255,255,.045);
}
.page-web-showcase .web-demo-stage-v8 .web-demo-glow::after {
  left:20%;
  right:18%;
  bottom:15px;
  height:70px;
  opacity:.78;
}

/* El CTA secundario responde como una acción real, sin competir con el primario. */
.page-web-showcase .web-secondary-button:hover {
  border-color:rgba(100,213,255,.56);
  background:linear-gradient(180deg,rgba(44,154,219,.18),rgba(22,94,145,.11));
  box-shadow:0 14px 30px rgba(0,0,0,.19),0 0 27px rgba(62,190,255,.065),inset 0 1px 0 rgba(255,255,255,.035);
}

/* Proyectos / Proceso / Planes se sienten como navegación, no metadata. */
.page-web-showcase .web-showcase-subnav-v8 {
  margin-top:31px;
  padding-top:18px;
  margin-bottom:16px;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
  min-height:68px;
  cursor:pointer;
  border-color:rgba(104,212,255,.045);
  background:rgba(255,255,255,.008);
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover {
  transform:translateY(-3px);
  border-color:rgba(103,210,255,.22);
  background:linear-gradient(180deg,rgba(53,176,236,.115),rgba(24,86,130,.045));
  box-shadow:0 13px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.03);
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover .web-subnav-title {
  color:#fff;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover .web-subnav-note {
  color:#9fc1d5;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover .web-subnav-arrow {
  transform:translate(4px,-3px);
}

/* Un poco más de separación antes de la franja de confianza. */
.page-web-showcase .web-proof-strip {
  margin-top:20px;
}

@media (max-width:980px) {
  .page-web-showcase .web-demo-column-v8 {
    transform:none;
  }
  .page-web-showcase .web-showcase-container-v8 {
    padding-bottom:40px;
  }
}

@media (max-width:700px) {
  .page-web-showcase .web-showcase-subnav-v8 {
    margin-bottom:12px;
  }
}


/* =========================================================
   V56 — CIERRE TIPOGRÁFICO DE PORTADA WEB
   Ajusta composición del titular y microdetalles finales.
   ========================================================= */
@media (min-width:981px) {
  .page-web-showcase .web-showcase-copy-v8 {
    max-width:650px;
  }
  .page-web-showcase .web-showcase-title-v8 {
    max-width:650px;
    font-size:clamp(45px,4.05vw,64px);
    line-height:.985;
    letter-spacing:-.046em;
    margin-bottom:21px;
  }
  .page-web-showcase .web-title-line {
    display:block;
    white-space:nowrap;
  }
}

/* La marca del concepto debe leerse sin competir con el titular principal. */
.page-web-showcase .web-demo-toolbar-project {
  color:#9bb8c9;
}

/* Un poco más de aire entre beneficios y navegación contextual. */
.page-web-showcase .web-feature-chips-v8 {
  margin-bottom:8px;
}
.page-web-showcase .web-showcase-subnav-v8 {
  margin-top:35px;
}

/* Refuerzo final de la navegación secundaria. */
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link {
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-link:hover {
  transform:translateY(-4px);
  border-color:rgba(103,210,255,.28);
  background:linear-gradient(180deg,rgba(60,185,242,.14),rgba(22,90,138,.055));
  box-shadow:0 16px 34px rgba(0,0,0,.15),0 0 24px rgba(62,190,255,.045),inset 0 1px 0 rgba(255,255,255,.035);
}

@media (max-width:1180px) and (min-width:981px) {
  .page-web-showcase .web-showcase-title-v8 {
    font-size:clamp(43px,4.45vw,58px);
  }
}

@media (max-width:980px) {
  .page-web-showcase .web-title-line {
    display:inline;
    white-space:normal;
  }
  .page-web-showcase .web-title-line::after {
    content:" ";
  }
}

/* =========================================================
   V57 — CIERRE REAL DEL HERO / FIX DESCENDENTES
   Corrige clipping tipográfico y remata microcontraste.
   ========================================================= */
@media (min-width:981px) {
  .page-web-showcase .web-showcase-title-v8 {
    /* Un poco más de caja vertical para letras con descendente (g, y, p). */
    line-height:1.02;
    overflow:visible;
    margin-bottom:25px;
  }

  .page-web-showcase .web-title-line {
    overflow:visible;
  }

  .page-web-showcase .web-title-accent.web-title-line {
    /* Evita que la cola de la “g” quede recortada por la caja de línea. */
    display:block;
    overflow:visible;
    padding-bottom:.075em;
    margin-bottom:-.075em;
  }
}

/* CTA secundario: algo más presente en reposo, sin competir con el primario. */
.page-web-showcase .web-secondary-button {
  color:#f5fbff !important;
  border-color:rgba(157,216,247,.37);
  background:rgba(255,255,255,.042);
}
.page-web-showcase .web-secondary-button:hover {
  border-color:rgba(100,213,255,.62);
  background:linear-gradient(180deg,rgba(44,154,219,.20),rgba(22,94,145,.12));
}

/* Navegación contextual: subtítulos y flechas un punto más legibles. */
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-note {
  color:#93b1c5;
}
.page-web-showcase .web-showcase-subnav-v8 .web-subnav-arrow {
  color:#73dcff;
}

@media (max-width:980px) {
  .page-web-showcase .web-showcase-title-v8 {
    overflow:visible;
  }
  .page-web-showcase .web-title-accent {
    overflow:visible;
    padding-bottom:.04em;
  }
}

/* =========================================================
   V58 — FIX DEFINITIVO DESCENDENTE “g” EN «negocio»
   Chrome/Windows puede recortar ligeramente el fondo de texto
   en descendentes cuando background-clip:text usa una caja muy
   ajustada. Se amplía únicamente la caja del acento final.
   ========================================================= */
@media (min-width:981px) {
  .page-web-showcase #web-showcase-title-accent.web-title-accent.web-title-line {
    display:inline-block !important;
    width:max-content;
    max-width:100%;
    line-height:1.15 !important;
    padding:0 .035em .20em .01em !important;
    margin:0 0 -.035em 0 !important;
    overflow:visible !important;
    vertical-align:top;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    -webkit-text-fill-color:transparent;
  }

  .page-web-showcase #web-showcase-title {
    overflow:visible !important;
    padding-bottom:.03em;
  }

  .page-web-showcase #web-showcase-copy {
    overflow:visible !important;
  }
}