/* Acabado de la web publica. Conserva la composicion y las demostraciones. */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans/PublicSans-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans/PublicSans-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans/PublicSans-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans/PublicSans-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0c1116;
  --panel: #151d25;
  --line: #ffffff1c;
  --text: #f0f1ed;
  --muted: #a8b1bc;
  --lime: #c4d3df;
  --cyan: #c4d3df;
  --purple: #aebdca;
  --brand-gradient: #e9ece7;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: var(--font);
  --accent: #c4d3df;
  --surface: #151d25;
  --surface-raised: #1b252f;
}

body {
  background: var(--bg);
  isolation: isolate;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* Circuito decorativo: pistas finas y pulsos de luz detras del contenido. */
.page-circuit {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, #000, #0006 28%, #0004 48%, #000a 78%, #000);
}
.page-circuit svg { display: block; width: 100%; height: 100%; }
.circuit-tracks, .circuit-signals { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuit-tracks use { stroke: #366b8c; stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; }
.circuit-signals use {
  stroke: #65ceff;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 45 955;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 4px #249cffe0);
  animation: circuit-flow 10s linear infinite;
}
.circuit-signals use:nth-child(3n) { animation-duration: 13s; animation-delay: -4s; }
.circuit-signals use:nth-child(3n + 1) { animation-delay: -7s; }
.circuit-signals use:nth-child(4n) { animation-duration: 8s; animation-delay: -2s; }
.circuit-nodes circle {
  fill: #0c1116;
  stroke: #4a9cc4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  animation: circuit-node 5s ease-in-out infinite;
}
.circuit-nodes circle:nth-child(2n) { animation-delay: -2.5s; }
@keyframes circuit-flow { to { stroke-dashoffset: 0; } }
@keyframes circuit-node {
  0%, 100% { stroke-opacity: .45; fill: #0c1116; }
  50% { stroke-opacity: 1; fill: #5dc5f2; }
}
::selection { background: #c4d3df; color: #0c1116; }
h1, h2, h3 { letter-spacing: -.035em; text-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #afc8df;
  outline-offset: 5px;
}

/* Jerarquia tipografica, sin relieve ni degradados en las letras. */
.hero h1.hero-direct-title {
  font-size: clamp(38px, 3.9vw, 62px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.045em;
  margin-top: 0;
  text-shadow: none;
  filter: none;
}
.gradient-text,
.hero h1.hero-direct-title .gradient-text {
  background: none;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
  font-weight: 500;
  text-shadow: none;
  filter: none;
}
.hero-direct-title .hero-title-benefit { margin-top: 14px; }
.hero-direct-title + .hero-description {
  color: #aeb9c4;
  font-size: 17px;
  letter-spacing: -.015em;
  line-height: 1.65;
}
.hero-grid, .hero-orbit, .art-glow { display: none; }
.hero { background: transparent; }
.header { background: var(--bg); border-color: #ffffff15; }
.header nav { font-size: 13px; font-weight: 500; color: #bac3cc; }
.header nav a:hover { color: #fff; }
.included { color: #bdc7d0; gap: 8px 19px; font-weight: 400; }
.included small { color: #82909f; }
.hero-bottom { color: #8e9aa8; }
.hero-bottom button { border-radius: 5px; border-color: #ffffff25; color: #a9b4be; }
.hero-art .orbit-label.label-top {
  color: #becbd6;
  text-shadow: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}
.floating-chip {
  background: #18212bee;
  border: 1px solid #ffffff25;
  border-radius: 6px;
  box-shadow: 0 8px 20px #0003;
  backdrop-filter: none;
  animation: float 6s ease-in-out infinite;
  transform: none;
  font-weight: 400;
  color: #d8e0e7;
}
.floating-chip.chip-design { animation-delay: -2s; }
.floating-chip.chip-code { animation-delay: -.8s; }
.floating-chip.chip-mail { animation-delay: -3.4s; }
.floating-chip.chip-live { animation-delay: -5s; }
.chip-design > span { color: #b6c8d8; }

/* Color solido en el boton; el neon recorre solamente las lineas del borde. */
.button, .button:not(.outline), .button.small {
  --button-neon: #66caff;
  --button-glow: #278eff55;
  position: relative;
  isolation: isolate;
  min-height: 46px;
  padding: 14px 20px;
  border: 1px solid #337de6;
  border-radius: 5px;
  background: #1656c5;
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  text-shadow: none;
  box-shadow: 0 5px 16px #03275255;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.button:hover, .button:not(.outline):hover {
  background: #2169dc;
  border-color: #6dbbff;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 20px #1264d744;
}
.button::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--button-neon), transparent) 0 0 / 44% 2px no-repeat,
    linear-gradient(180deg, transparent, var(--button-neon), transparent) 100% 0 / 2px 44% no-repeat,
    linear-gradient(270deg, transparent, var(--button-neon), transparent) 100% 100% / 44% 2px no-repeat,
    linear-gradient(0deg, transparent, var(--button-neon), transparent) 0 100% / 2px 44% no-repeat;
  animation: button-neon-lines 4.4s linear infinite;
}
.button::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--button-neon);
  border-radius: inherit;
  box-shadow: 0 0 12px var(--button-glow);
  pointer-events: none;
  animation: button-neon-pulse 3.2s ease-in-out infinite;
}
.button:hover::before, .button:focus-visible::before { animation-duration: 2.6s; }
@keyframes button-neon-lines {
  from { background-position: -120% 0, 100% -120%, 220% 100%, 0 220%; }
  to { background-position: 220% 0, 100% 220%, -120% 100%, 0 -120%; }
}
@keyframes button-neon-pulse {
  0%, 100% { opacity: .25; }
  50% { opacity: .8; }
}
.button:active { transform: translateY(0); }
.button span { font-size: 20px; font-weight: 400; }
.button.small { min-height: 42px; padding: 10px 17px; font-size: 13px; }
.button.outline {
  background: #193b63;
  border-color: #3977ad;
  color: #f2f7fc;
  box-shadow: none;
}
.button.outline:hover,
.plans-grid .plan:hover .button.outline {
  background: #235184;
  color: #fff;
  border-color: #69b4ee;
  box-shadow: none;
}
.hero-buttons > .button { min-height: 52px; padding: 16px 23px; font-size: 14px; }
.hero-buttons .text-button { font-size: 13px; color: #cbd3dc; gap: 11px; line-height: 1.5; }
.text-button .play { width: 30px; height: 30px; border-color: #ffffff35; color: #e8edf2; }
.text-button:hover { color: #fff; }

/* El color de las imagenes permanece en las muestras de trabajo. */
.section-heading h2, .experience h2, .faq h2, .contact h2 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.section-heading h2 > span, .faq h2 > span { color: #9ba9b8; }
.section-heading { position: relative; }
.section-heading::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #58baff, transparent) -160px 0 / 160px 1px no-repeat;
  background-color: #24405b;
  box-shadow: 0 0 7px #318ee52b;
  pointer-events: none;
  animation: section-neon-line 7s linear infinite;
}
@keyframes section-neon-line {
  from { background-position: -160px 0; }
  to { background-position: calc(100% + 160px) 0; }
}
.section-heading > p, .service-card > p, .experience-copy > p:not(.eyebrow),
.faq details p, .share-copy > p:not(.eyebrow) { color: #a8b3bf; }
.eyebrow, .creative-marketing-head .eyebrow, .creative-copy .eyebrow,
.explorer-copy .eyebrow, .welcome-copy .eyebrow {
  color: #aebfce;
  font-weight: 500;
  letter-spacing: .11em;
}
.status-dot {
  background: #70ddb8;
  box-shadow: 0 0 10px #48cf7d88;
  animation: status-light 3.6s ease-in-out infinite;
}
@keyframes status-light { 50% { opacity: .5; box-shadow: 0 0 4px #48cf7d44; } }
.service-card h3 { font-weight: 500; letter-spacing: -.03em; }
.service-art { border-radius: 8px; border-color: #ffffff20; box-shadow: 0 8px 24px #0002; }
.service-card:hover .service-art { transform: translateY(-3px); }
.creative-service.creative-marketing {
  background: var(--surface);
  border-color: #34414e;
  border-radius: 10px;
  box-shadow: 0 12px 32px #0003;
}
.creative-marketing-head h3 span,
.contact h2 > span:first-child,
.welcome-copy h2 span {
  background: none;
  color: #c4d3df;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.creative-marketing-head > p { color: #aeb9c4; }
.creative-marketing-head h3 { letter-spacing: -.035em; }
.title-star, .contact-star { display: none; }

/* Etapas y propuestas: superficies mates, sin resplandores de colores. */
.steps .process-card,
.steps .process-card:nth-child(n) {
  --stage: #b6c8d6;
  --stage-soft: transparent;
  background: var(--surface);
  border: 1px solid #ffffff1d;
  border-radius: 8px;
  box-shadow: 0 8px 20px #0002;
  animation: process-float 7s ease-in-out infinite;
}
.steps .process-card:nth-child(2) { animation-delay: -1.7s; }
.steps .process-card:nth-child(3) { animation-delay: -3.4s; }
.steps .process-card:nth-child(4) { animation-delay: -5.1s; }
.process-card::before, .process-card::after { display: none; }
.steps .process-card:hover { border-color: #607589; box-shadow: 0 8px 24px #0003; }
.process-number { color: #aabac9; text-shadow: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.process-label {
  color: #b4c2d0;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font-weight: 500;
}
.process-label i { display: none; }
.steps .process-card h3 { font-weight: 500; }
.steps .process-card p { color: #a9b5c2; }
.plans-grid .plan { background: #141c24; border-color: #303c48; border-radius: 8px; }
.plans-grid .plan.featured { background: #1a252f; border-color: #8395a5; }
.plans-grid .plan::before { display: none; }
.plans-grid .plan:hover, .plans-grid .plan:focus-within {
  border-color: #8b9caa;
  box-shadow: 0 12px 28px #0004;
  transform: translateY(-3px);
}
.plans-grid .plan-ribbon {
  background: #cbd5dd;
  color: #17232f;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  letter-spacing: .04em;
}
.plans-grid .plan-index, .plans-grid .plan:hover .plan-index,
.plans-grid .plan:focus-within .plan-index { color: #adbdcb; }
.plans-grid .plan .price, .plans-grid .plan:hover .price,
.plans-grid .plan:focus-within .price { color: #edf1f4; text-shadow: none; }
.plans-grid .plan h3 { font-weight: 500; }
.plans-grid .plan .button { min-height: 46px; font-size: 13px; }
.plans-grid .plan p, .plans-grid .plan ul, .pricing-note { color: #b5bfca; }
.plans-grid .plan ul li::before { color: #a7bbc9; }

.explorer-tabs { border-color: #34414f; border-radius: 8px; background: #141d26; }
.explorer-tabs button { font-weight: 500; color: #aebdcb; border-bottom-width: 2px; }
.explorer-tabs button[aria-selected='true'] {
  color: #edf1f3;
  background: #263440;
  border-bottom-color: #b3c7d8;
}
.explorer-tabs button:hover { background: #202d38; color: #fff; }
.explorer-tabs button:focus-visible, .explorer-panel:focus-visible { outline-color: #afc8df; }
.real-work-caption a { color: #c3d4e2; }
.faq summary { font-weight: 500; }
.faq summary::after { color: #bdcddb; }

/* Contacto, bienvenida y acciones auxiliares comparten la misma tipografia. */
.contact { background: #131c24; border-color: #ffffff19; }
.contact-whatsapp, .contact-number { color: #cad8e3; }
.contact-form { background: #10171e; border-color: #34424f; border-radius: 8px; }
.contact-form h3 { font-weight: 500; letter-spacing: -.035em; }
.contact-form input, .contact-form textarea, .contact-form select {
  background: #17212a;
  border-color: #3c4a57;
  color: #eef1f5;
}
.contact-form .contact-field input, .contact-form .contact-field select,
.contact-form .contact-field textarea { border-radius: 5px; }
.contact-form .button {
  --button-neon: #62e7ae;
  --button-glow: #2acb8755;
  background: #176d4b;
  border-color: #30956a;
  color: #fff;
  box-shadow: 0 5px 16px #052e2255;
}
.contact-form .button:hover {
  background: #1e835b;
  border-color: #65d9a3;
  box-shadow: 0 7px 20px #15744b44;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a6b4c1; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: 2px solid #9db9d1;
  outline-offset: 1px;
  border-color: #9db9d1;
}
#welcome-dialog { background: #151f29; border-color: #586979; border-radius: 10px; }
.welcome-copy h2 { font-weight: 500; line-height: 1.17; text-shadow: none; }
.welcome-copy > p:not(.eyebrow), .welcome-price > span, .welcome-price > small { color: #b2beca; }
.welcome-price { border-color: #ffffff20; }
.welcome-price > strong { color: #ecf0f3; font-weight: 500; }
.welcome-options > a { border-color: #ffffff20; color: #c3ced8; }
.welcome-options b, .welcome-continue { color: #c4d3df; font-weight: 500; }
.welcome-close, .video-close { background: #18222ce8; border-color: #ffffff30; color: #e6ecf1; }
.share-actions .button.share-facebook, .share-actions .button.share-instagram {
  background: #1656c5;
  border-color: #337de6;
  color: #fff;
  box-shadow: 0 5px 16px #03275255;
}
.share-actions .button.share-facebook:hover, .share-actions .button.share-instagram:hover {
  background: #2169dc;
  border-color: #6dbbff;
}
.share-copy-link, .instagram-share-help a, .video-quote { color: #c4d3df; }
.instagram-share-help { border-color: #586c7e; border-radius: 6px; }
.whatsapp-float { background: #247a58; box-shadow: 0 6px 20px #0005; border-color: #ffffff25; }
.footer, .footer p, .footer > a:not(.logo) { color: #9facb9; }

@media (min-width: 761px) and (max-width: 1100px) {
  .hero h1.hero-direct-title { font-size: 38px; }
}
@media (max-width: 760px) {
  .page-circuit { opacity: .8; }
  .circuit-signals use:nth-child(even) { display: none; }
  .hero h1.hero-direct-title {
    font-size: clamp(32px, 7.8vw, 49px);
    line-height: 1.16;
    letter-spacing: -.04em;
    text-shadow: none;
  }
  .hero-direct-title + .hero-description { font-size: 15px; }
  .hero-buttons > .button { font-size: 13px; min-height: 48px; padding: 14px 19px; }
  .hero-buttons .text-button { font-size: 12px; }
  .hero-art .orbit-label.label-top { font-size: 10px; letter-spacing: .1em; }
  .floating-chip { border-radius: 5px; }
  .contact-form .contact-field input, .contact-form .contact-field select,
  .contact-form .contact-field textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-signals { display: none; }
  .circuit-nodes circle, .floating-chip, .status-dot,
  .steps .process-card:nth-child(n) { animation: none; }
  .floating-chip { translate: none; }
  .button::before, .button::after, .section-heading::after { animation: none; }
  .button::before { opacity: 0; }
  .button::after { opacity: .35; }
  .button, .plans-grid .plan, .service-art { transition: none; }
  .button:hover, .plans-grid .plan:hover, .plans-grid .plan:focus-within,
  .service-card:hover .service-art { transform: none; }
}
.motion-paused .button::before, .motion-paused .button::after,
.motion-paused .section-heading::after { animation: none; }
.motion-paused .button::before { opacity: 0; }
.motion-paused .button::after { opacity: .35; }
.motion-paused .button:hover, .motion-paused .plans-grid .plan:hover,
.motion-paused .plans-grid .plan:focus-within, .motion-paused .service-card:hover .service-art { transform: none; }