:root {
  --teal: #00a093;
  --teal-dark: #007d74;
  --ink: #132126;
  --ink-2: #1a1d23;
  --muted: #667178;
  --surface: #f5f7f7;
  --line: #dfe5e5;
  --white: #ffffff;
  --shadow: 0 20px 55px rgba(19, 33, 38, .11);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
body.menu-abierto { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(19,33,38,.08);
  backdrop-filter: blur(12px);
}
.header-inner {
  width: min(1460px, calc(100% - 48px));
  min-height: 92px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand img { width: 230px; height: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 26px; }
.nav-list > li > a,
.nav-servicios-linea > a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  color: #263238;
  transition: color .2s ease;
}
.nav-list > li > a:hover,
.nav-servicios-linea > a:hover,
.nav-active { color: var(--teal) !important; }
.nav-contacto a {
  background: var(--ink);
  color: #fff !important;
  padding: 13px 20px;
  border-radius: 999px;
}
.nav-contacto a:hover { background: var(--teal); }
.nav-servicios { position: relative; }
.nav-servicios-linea { display: flex; align-items: center; gap: 5px; }
.servicios-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #263238;
  font-size: 14px;
  padding: 6px;
}
.servicios-dropdown {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-40%);
  width: 340px;
  list-style: none;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .22s ease;
}
.nav-servicios:hover .servicios-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-40%) translateY(-4px);
}
.servicios-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 12px;
  text-decoration: none;
}
.servicios-dropdown a:hover { background: #f2f8f7; }
.servicios-dropdown strong { font-size: 14px; color: var(--ink); }
.servicios-dropdown span { font-size: 12px; color: var(--muted); }
.redes-sociales { display: flex; align-items: center; gap: 12px; }
.redes-sociales a { font-size: 21px; color: #263238; transition: color .2s ease; }
.redes-sociales a:hover { color: var(--teal); }
.abrir-menu, .cerrar-menu, .nav-mobile-header, .nav-mobile-footer { display: none; }
.menu-overlay { display: none; }

/* GENERALES */
.section { width: min(1240px, calc(100% - 48px)); margin-inline: auto; padding: 100px 0; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading-row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-kicker, .eyebrow {
  display: inline-block;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-kicker.light, .light-heading .section-kicker { color: #70ded4; }
.section-heading h2, .automation-intro h2, .about-copy h2, .final-cta h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.section-heading p, .automation-intro p, .about-copy p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: .2s ease;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: #04b7a9; transform: translateY(-2px); }
.btn-outline { color: #fff; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.07); }
.btn-outline:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--teal); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #e9fffd; }
.btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 800; text-decoration: none; margin-top: 18px; }
.text-link i { transition: transform .2s ease; }
.text-link:hover i { transform: translateX(4px); }

/* HERO */
.hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; background: #0e171b; }
.hero-slides, .hero-slide, .hero-overlay, .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; }
.hero-overlay { background: linear-gradient(90deg, rgba(8,17,20,.94) 0%, rgba(8,17,20,.82) 43%, rgba(8,17,20,.34) 76%, rgba(8,17,20,.18) 100%); }
.hero-grid { opacity: .12; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to right, #000, transparent 80%); }
.hero-content { position: relative; z-index: 2; width: min(1240px, calc(100% - 48px)); margin: auto; padding: 95px 0; }
.eyebrow { color: #73ddd4; }
.hero h1 { max-width: 850px; color: #fff; font-size: clamp(46px, 6.3vw, 86px); line-height: .98; letter-spacing: -.05em; }
.hero-lead { max-width: 760px; color: rgba(255,255,255,.82); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; margin-top: 26px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-tags span { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); border-radius: 999px; padding: 9px 13px; font-size: 12px; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* SERVICIOS */
.servicios-resumen { padding-bottom: 110px; }
.servicios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  text-decoration: none;
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -90px; bottom: -90px; background: rgba(0,160,147,.08); transition: transform .3s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(0,160,147,.35); }
.service-card:hover::after { transform: scale(1.2); }
.service-card-featured { background: var(--ink); border-color: var(--ink); color: #fff; }
.service-card-featured p { color: rgba(255,255,255,.7) !important; }
.service-card-featured .service-number { color: rgba(255,255,255,.15); }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: #e9f8f6; color: var(--teal); font-size: 23px; margin-bottom: 45px; }
.service-card-featured .service-icon { background: var(--teal); color: #fff; }
.service-number { position: absolute; right: 24px; top: 25px; color: #d9e0e0; font-size: 36px; font-weight: 800; }
.service-card h3 { font-size: 23px; line-height: 1.15; margin-bottom: 14px; }
.service-card p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.card-link { margin-top: auto; padding-top: 24px; color: var(--teal); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }

/* AUTOMATIZACION */
.automation-focus { background: var(--ink-2); color: #fff; }
.automation-inner { padding-top: 105px; padding-bottom: 105px; }
.automation-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; margin-bottom: 46px; }
.automation-intro p { color: rgba(255,255,255,.68); margin-top: 0; }
.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tech-card { overflow: hidden; border-radius: 24px; background: #252a30; border: 1px solid rgba(255,255,255,.08); }
.tech-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; }
.tech-image-wrap { height: 250px; overflow: hidden; background: #111; }
.tech-card-wide .tech-image-wrap { height: 100%; min-height: 320px; }
.tech-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tech-card:hover img { transform: scale(1.04); }
.tech-body { padding: 30px; }
.tech-label { color: #73ddd4; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.tech-body h3 { font-size: 27px; margin-top: 10px; }
.tech-body p { margin-top: 14px; color: rgba(255,255,255,.68); line-height: 1.7; font-size: 15px; }

/* PROYECTOS */
.projects-shell { position: relative; }
.projects-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 14px; }
.projects-track::-webkit-scrollbar { display: none; }
.project-card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; position: relative; height: 380px; border-radius: 22px; overflow: hidden; background: #ddd; }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,21,.82), transparent 52%); }
.project-card figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: #fff; font-weight: 800; font-size: 16px; }
.project-card:hover img { transform: scale(1.04); }
.project-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); box-shadow: 0 9px 30px rgba(0,0,0,.18); cursor: pointer; font-size: 18px; }
.project-prev { left: -23px; }
.project-next { right: -23px; }
.mobile-project-btn { display: none; }

/* ABOUT */
.about-section { padding-top: 70px; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.about-copy p { font-size: 16px; }
.strong-link { margin-top: 24px; }
.about-image { position: relative; }
.about-image img { width: 100%; min-height: 470px; object-fit: cover; border-radius: 28px; }
.about-badge { position: absolute; left: -28px; bottom: 30px; min-width: 170px; padding: 22px; border-radius: 20px; background: var(--teal); color: #fff; box-shadow: var(--shadow); }
.about-badge strong { display: block; font-size: 44px; line-height: .95; }
.about-badge span { display: block; margin-top: 6px; font-size: 13px; }

/* WHY */
.why-section { background: #10191d; color: #fff; }
.why-inner { padding-top: 95px; padding-bottom: 95px; }
.light-heading h2 { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { padding: 30px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(255,255,255,.04); }
.why-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--teal); font-size: 21px; margin-bottom: 22px; }
.why-card h3 { font-size: 22px; margin-bottom: 13px; }
.why-card p { color: rgba(255,255,255,.66); line-height: 1.7; font-size: 14px; }

/* CLIENTES */
.clients-section { padding: 85px 0 90px; background: #fff; }
.compact-heading { margin-bottom: 34px; }
.clients-marquee { overflow: hidden; width: 100%; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.clients-track { display: flex; width: max-content; flex-shrink: 0; will-change: transform; animation: clients-scroll 28s linear infinite; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-set { display: flex; align-items: center; gap: 58px; padding-right: 58px; flex-shrink: 0; }
.clients-set img { width: 145px; height: 88px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: .2s ease; }
.clients-set img:hover { filter: none; opacity: 1; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* CTA */
.final-cta { width: min(1320px, calc(100% - 48px)); margin: 0 auto 90px; border-radius: 30px; overflow: hidden; background: linear-gradient(135deg, #0a756d, #00a093); color: #fff; }
.final-cta-inner { padding: 56px 60px; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.final-cta h2 { max-width: 760px; font-size: clamp(30px, 4vw, 48px); }
.final-cta p { margin-top: 14px; color: rgba(255,255,255,.78); line-height: 1.65; }
.final-cta-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* FOOTER */
.site-footer { background: #0d1518; color: #fff; }
.footer-main { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 66px 0 50px; display: grid; grid-template-columns: 1.3fr .8fr 1.1fr 1.2fr; gap: 48px; }
.footer-logo { display: block; width: min(210px, 100%); height: auto; object-fit: contain; background: #fff; padding: 8px; border-radius: 8px; }
.footer-brand-col p { margin-top: 18px; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 300px; font-size: 14px; }
.footer-col h2 { font-size: 14px; margin-bottom: 18px; color: #fff; }
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,.64); font-size: 13px; }
.footer-col a:hover { color: #74dfd6; }
.footer-contact-list li { color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.45; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 17px; }
.footer-socials a:hover { background: var(--teal); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding: 20px 24px; color: rgba(255,255,255,.5); font-size: 12px; }

/* WHATSAPP */
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px; border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-weight: 800; font-size: 13px; }
.whatsapp-icon { font-size: 23px; }

@media (max-width: 1100px) {
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .header-inner { width: min(100% - 30px, 1240px); min-height: 76px; }
  .brand img { width: 190px; }
  .abrir-menu, .cerrar-menu { display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
  .abrir-menu { font-size: 29px; color: var(--ink); }
  .cerrar-menu { font-size: 22px; color: var(--ink); }
  .nav { position: fixed; z-index: 1002; inset: 0 0 0 auto; width: min(390px, 88vw); height: 100dvh; padding: 0; background: #fff; display: flex; flex-direction: column; align-items: stretch; gap: 0; transform: translateX(105%); transition: transform .28s ease; box-shadow: -20px 0 45px rgba(0,0,0,.16); overflow-y: auto; }
  .nav.visible { transform: translateX(0); }
  .nav-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
  .nav-mobile-brand img { width: 180px; }
  .nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 22px; }
  .nav-list > li { border-bottom: 1px solid #edf0f0; }
  .nav-list > li > a, .nav-servicios-linea > a { display: block; padding: 16px 2px; font-size: 15px; }
  .nav-contacto { border: 0 !important; padding-top: 16px; }
  .nav-contacto a { text-align: center; padding: 14px 18px !important; }
  .nav-servicios-linea { justify-content: space-between; }
  .servicios-toggle { font-size: 16px; }
  .servicios-dropdown { position: static; width: 100%; padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; transform: none !important; display: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-servicios:hover .servicios-dropdown { transform: none; }
  .nav-servicios.submenu-abierto .servicios-dropdown { display: block; }
  .nav-servicios.submenu-abierto .servicios-toggle i { display: inline-block; transform: rotate(180deg); }
  .servicios-dropdown a { padding: 11px 12px; background: #f6f8f8; margin-top: 6px; }
  .desktop-socials { display: none; }
  .nav-mobile-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
  .menu-overlay { position: fixed; z-index: 1001; inset: 0; background: rgba(8,16,19,.48); opacity: 0; visibility: hidden; display: block; transition: .25s ease; }
  .menu-overlay.visible { opacity: 1; visibility: visible; }
  .hero { min-height: 650px; }
  .hero-overlay { background: rgba(8,17,20,.74); }
  .automation-intro { grid-template-columns: 1fr; gap: 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-image { max-width: 760px; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .section { width: min(100% - 30px, 1240px); padding: 72px 0; }
  .section-heading { margin-bottom: 34px; }
  .section-heading-row { display: block; }
  .desktop-project-btn { display: none; }
  .mobile-project-btn { display: block; margin-top: 24px; }
  .hero { min-height: 620px; }
  .hero-content { width: min(100% - 30px, 1240px); padding: 70px 0; }
  .hero h1 { font-size: clamp(42px, 13vw, 63px); }
  .hero-lead { font-size: 16px; }
  .hero-tags { gap: 7px; }
  .hero-tags span { font-size: 11px; padding: 8px 10px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; max-width: 360px; }
  .servicios-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 310px; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card-wide { grid-column: auto; display: block; }
  .tech-card-wide .tech-image-wrap { min-height: 0; height: 250px; }
  .project-card { flex-basis: 86%; height: 360px; }
  .project-arrow { display: none; }
  .about-image img { min-height: 360px; }
  .about-badge { left: 14px; bottom: 14px; }
  .why-grid { grid-template-columns: 1fr; }
  .clients-set { gap: 36px; padding-right: 36px; }
  .clients-set img { width: 120px; height: 72px; }
  .final-cta { width: calc(100% - 30px); margin-bottom: 65px; border-radius: 22px; }
  .final-cta-inner { padding: 38px 24px; gap: 30px; }
  .final-cta-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .footer-main { width: calc(100% - 30px); grid-template-columns: 1fr; gap: 32px; padding: 50px 0 40px; }
  .whatsapp-float { width: 52px; padding: 0; justify-content: center; }
  .whatsapp-text { display: none; }
}

@media (max-width: 480px) {
  .brand img { width: 165px; }
  .nav-mobile-brand img { width: 160px; }
  .hero { min-height: 600px; }
  .service-card { padding: 25px; }
  .tech-body { padding: 24px; }
  .project-card { flex-basis: 92%; height: 330px; }
  .about-badge strong { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* El carrusel de clientes se mantiene activo por decisión de diseño. */
  .clients-track {
    animation-name: clients-scroll !important;
    animation-duration: 28s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}


/* =========================================================
   V19 — REDISEÑO DEL INICIO / MOVIMIENTO Y JERARQUÍA
   ========================================================= */

.site-header {
  transition: box-shadow .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 10px 35px rgba(8, 20, 24, .09);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}

/* Entrada del hero */
.hero-content > * {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-enter .75s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-content > :nth-child(1) { animation-delay: .12s; }
.hero-content > :nth-child(2) { animation-delay: .22s; }
.hero-content > :nth-child(3) { animation-delay: .34s; }
.hero-content > :nth-child(4) { animation-delay: .44s; }
.hero-content > :nth-child(5) { animation-delay: .54s; }
@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0); }
}
.hero-grid {
  animation: hero-grid-drift 18s linear infinite alternate;
}
@keyframes hero-grid-drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(20px,14px,0); }
}

/* Reveal en scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .72s ease var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* SERVICIOS — AUTOMATIZACIÓN COMO PROTAGONISTA */
.services-showcase {
  padding-top: 112px;
  padding-bottom: 112px;
}
.services-showcase-head {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 50px;
}
.services-showcase-head h2 {
  max-width: 760px;
  margin-top: 11px;
  font-size: clamp(38px, 4.7vw, 66px);
  line-height: 1.01;
  letter-spacing: -.045em;
}
.services-showcase-intro p {
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
}
.services-showcase-intro .strong-link {
  margin-top: 20px;
}
.services-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 18px;
  align-items: stretch;
}
.service-main {
  position: relative;
  min-height: 590px;
  padding: 38px;
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 86% 14%, rgba(0,160,147,.28), transparent 28%),
    linear-gradient(145deg, #0f1d21 0%, #15282d 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 55px rgba(11, 30, 35, .14);
}
.service-main::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -150px;
  bottom: -170px;
  border: 1px solid rgba(93,224,212,.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 52px rgba(93,224,212,.05),
    0 0 0 104px rgba(93,224,212,.03);
  transition: transform .65s ease;
}
.service-main:hover::after { transform: scale(1.08); }
.service-main-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-main-number {
  color: rgba(255,255,255,.22);
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
}
.service-main-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--teal);
  font-size: 25px;
  box-shadow: 0 12px 34px rgba(0,160,147,.28);
}
.service-main-copy {
  position: relative;
  z-index: 2;
  max-width: 500px;
  margin-top: 118px;
}
.service-chip {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid rgba(115,221,212,.28);
  border-radius: 999px;
  color: #73ddd4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.service-main h3 {
  margin-top: 18px;
  font-size: clamp(42px, 4vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
}
.service-main p {
  max-width: 450px;
  margin-top: 21px;
  color: rgba(255,255,255,.67);
  line-height: 1.72;
  font-size: 15px;
}
.service-main-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  color: #72ded5;
  font-weight: 850;
  font-size: 13px;
}
.control-lines {
  position: absolute;
  z-index: 1;
  top: 108px;
  right: 26px;
  width: 39%;
  height: 190px;
  opacity: .32;
}
.control-lines span {
  position: absolute;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #63d7cf);
  animation: service-signal 2.8s ease-in-out infinite alternate;
}
.control-lines span:nth-child(1) { top: 22%; width: 88%; }
.control-lines span:nth-child(2) { top: 50%; width: 65%; animation-delay: .35s; }
.control-lines span:nth-child(3) { top: 78%; width: 100%; animation-delay: .7s; }
@keyframes service-signal {
  from { transform: translateX(-8px); opacity: .35; }
  to { transform: translateX(8px); opacity: 1; }
}

.service-secondary-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
}
.service-secondary {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr 26px;
  gap: 20px;
  align-items: center;
  min-height: 182px;
  padding: 26px 28px;
  border-radius: 24px;
  border: 1px solid #dfe6e6;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.service-secondary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .28s ease;
}
.service-secondary:hover {
  transform: translateY(-4px);
  border-color: rgba(0,160,147,.32);
  box-shadow: 0 18px 42px rgba(12, 30, 34, .09);
}
.service-secondary:hover::before { transform: scaleY(1); }
.service-secondary-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #e9f8f6;
  color: var(--teal);
  font-size: 21px;
}
.service-secondary-number {
  color: #a9b6b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.service-secondary h3 {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.1;
}
.service-secondary p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.58;
  font-size: 13px;
}
.service-secondary-arrow {
  align-self: start;
  margin-top: 4px;
  color: var(--teal);
  font-size: 18px;
  transition: transform .25s ease;
}
.service-secondary:hover .service-secondary-arrow {
  transform: translate(3px,-3px);
}

/* QUIÉNES SOMOS — VISUAL DE CONTROL EN VEZ DE IMAGEN GENÉRICA */
.about-control {
  padding-top: 108px;
  padding-bottom: 108px;
}
.about-control-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 86px;
  align-items: center;
}
.about-control-copy h2 {
  max-width: 650px;
  margin-top: 12px;
  font-size: clamp(40px, 4.5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.about-control-copy p {
  max-width: 650px;
  margin-top: 20px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}
.about-control-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.control-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 72% 18%, rgba(0,160,147,.23), transparent 29%),
    linear-gradient(145deg, #101b1f, #182a2f);
  box-shadow: 0 28px 65px rgba(8, 28, 33, .16);
}
.control-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 44px 44px;
}
.control-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,.15);
  animation: node-float 5s ease-in-out infinite;
}
.control-node small {
  display: block;
  color: #73ddd4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}
.control-node strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}
.node-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 13px;
  background: var(--teal);
}
.node-plc { top: 76px; left: 62px; }
.node-scada { top: 220px; right: 55px; animation-delay: .8s; }
.node-field { left: 88px; bottom: 70px; animation-delay: 1.5s; }
@keyframes node-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.signal-line {
  position: absolute;
  z-index: 2;
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(80,223,211,.15), #58d9cf, rgba(80,223,211,.15));
  transform-origin: left center;
  animation: signal-glow 2s ease-in-out infinite alternate;
}
.line-a {
  width: 47%;
  left: 31%;
  top: 180px;
  transform: rotate(21deg);
}
.line-b {
  width: 44%;
  left: 29%;
  top: 330px;
  transform: rotate(-19deg);
  animation-delay: .5s;
}
@keyframes signal-glow {
  from { opacity: .25; filter: drop-shadow(0 0 0 rgba(0,160,147,0)); }
  to { opacity: 1; filter: drop-shadow(0 0 7px rgba(0,160,147,.65)); }
}
.experience-badge {
  position: absolute;
  z-index: 4;
  right: 26px;
  bottom: 24px;
  width: 148px;
  padding: 20px 18px;
  border-radius: 22px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 17px 40px rgba(0,160,147,.27);
}
.experience-badge strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}
.experience-badge span {
  display: block;
  margin-top: 7px;
  font-size: 11px;
}

/* Más vida en tarjetas existentes */
.tech-card, .why-card, .project-card {
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.tech-card:hover {
  transform: translateY(-5px);
  border-color: rgba(115,221,212,.22);
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(115,221,212,.26);
  background: rgba(255,255,255,.065);
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(12,30,34,.16);
}

/* CLIENTES: cada bloque ocupa al menos una pantalla; elimina el hueco al reiniciar */
.clients-set {
  min-width: 100vw;
  justify-content: space-around;
}
.clients-track {
  animation-duration: 32s;
}

/* RESPONSIVE V19 */
@media (max-width: 1000px) {
  .services-showcase-head,
  .about-control-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .services-showcase-grid {
    grid-template-columns: 1fr;
  }
  .service-main {
    min-height: 500px;
  }
  .service-main-copy {
    margin-top: 86px;
  }
  .service-secondary-list {
    grid-template-rows: none;
  }
  .control-visual {
    min-height: 490px;
  }
}

@media (max-width: 700px) {
  .services-showcase,
  .about-control {
    padding-top: 78px;
    padding-bottom: 78px;
  }
  .services-showcase-head h2,
  .about-control-copy h2 {
    font-size: clamp(34px, 10vw, 46px);
  }
  .services-showcase-head {
    margin-bottom: 34px;
  }
  .service-main {
    min-height: 450px;
    padding: 28px 24px;
    border-radius: 24px;
  }
  .service-main-number {
    font-size: 42px;
  }
  .service-main-icon {
    width: 54px;
    height: 54px;
  }
  .service-main-copy {
    margin-top: 72px;
  }
  .service-main h3 {
    font-size: 42px;
  }
  .control-lines {
    opacity: .18;
    width: 46%;
  }
  .service-secondary {
    grid-template-columns: 48px 1fr 20px;
    gap: 14px;
    padding: 22px 18px;
    min-height: 0;
  }
  .service-secondary-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 18px;
  }
  .service-secondary h3 {
    font-size: 18px;
  }
  .service-secondary p {
    font-size: 12px;
  }

  .about-control-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .control-visual {
    min-height: 430px;
    border-radius: 26px;
  }
  .control-node {
    min-width: 148px;
    padding: 12px 13px;
  }
  .control-node strong {
    font-size: 13px;
  }
  .node-plc { top: 52px; left: 18px; }
  .node-scada { top: 174px; right: 16px; }
  .node-field { left: 24px; bottom: 62px; }
  .experience-badge {
    width: 122px;
    right: 16px;
    bottom: 15px;
    padding: 16px 14px;
  }
  .experience-badge strong {
    font-size: 34px;
  }
  .line-a { top: 145px; }
  .line-b { top: 278px; }

  .clients-set {
    min-width: max-content;
    justify-content: flex-start;
  }
}

/* Accesibilidad: se reducen animaciones decorativas; el carrusel de clientes sigue activo */
@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .hero-grid,
  .control-node,
  .signal-line,
  .control-lines span {
    animation: none !important;
  }
  .hero-content > *,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .clients-track {
    animation-name: clients-scroll !important;
    animation-duration: 32s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}


/* =========================================================
   V20 — QUIÉNES SOMOS CON IMAGEN ORIGINAL
   ========================================================= */

.about-logo-visual {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-logo-frame {
  width: min(100%, 650px);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 18%, rgba(0,160,147,.08), transparent 34%),
    #ffffff;
  border: 1px solid #e4ebeb;
  box-shadow: 0 22px 55px rgba(14, 34, 39, .08);
  overflow: hidden;
}

.about-logo-image {
  display: block;
  width: 100%;
  max-width: 590px;
  height: auto;
  object-fit: contain;
  transform: scale(1.02);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.about-logo-visual:hover .about-logo-image {
  transform: scale(1.055);
}

.about-experience-badge {
  right: 18px;
  bottom: 18px;
  animation: experience-float 4.2s ease-in-out infinite;
}

@keyframes experience-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1000px) {
  .about-logo-visual {
    min-height: 440px;
  }

  .about-logo-frame {
    min-height: 380px;
  }
}

@media (max-width: 700px) {
  .about-logo-visual {
    min-height: 365px;
  }

  .about-logo-frame {
    min-height: 330px;
    padding: 20px 16px 58px;
    border-radius: 24px;
  }

  .about-logo-image {
    width: 112%;
    max-width: none;
  }

  .about-experience-badge {
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-experience-badge {
    animation: none !important;
  }

  .about-logo-image {
    transition: none !important;
  }
}


/* =========================================================
   V21 — CORRECCIÓN DEL MENÚ MÓVIL
   ========================================================= */

/* Evita cualquier desplazamiento horizontal accidental. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Bloqueo real del documento mientras el menú está abierto. */
body.menu-abierto {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden !important;
  touch-action: none;
}

/* La capa oscura queda detrás del header/nav para no teñir de gris el panel. */
@media (max-width: 1000px) {
  .menu-overlay {
    z-index: 999 !important;
  }

  .site-header {
    z-index: 1000;
  }

  .nav {
    z-index: 1002 !important;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }

  /* Solo el área de enlaces puede desplazarse cuando se abre el submenú.
     El encabezado y "Síguenos" permanecen siempre en su sitio. */
  .nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-mobile-header,
  .nav-mobile-footer {
    flex: 0 0 auto;
    background: #fff;
    position: relative;
    z-index: 2;
  }

  .nav-mobile-footer {
    margin-top: 0 !important;
  }

  /* Impide arrastrar lateralmente el panel. */
  .nav,
  .nav-list,
  .nav-mobile-header,
  .nav-mobile-footer {
    touch-action: pan-y;
  }
}

/* En celulares bajos, reducimos ligeramente espacios para que el menú
   normal entre completo sin necesidad de desplazarse. */
@media (max-width: 700px) and (max-height: 720px) {
  .nav-mobile-header {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nav-list {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-list > li > a,
  .nav-servicios-linea > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-contacto {
    padding-top: 10px;
  }

  .nav-mobile-footer {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}


/* =========================================================
   V22 — GESTO LATERAL DEL MENÚ MÓVIL
   ========================================================= */

/* Mantiene el deslizamiento vertical normal de la página.
   El gesto de apertura se detecta solo desde los últimos 42px del borde derecho. */
@media (max-width: 1000px) {
  body:not(.menu-abierto) {
    touch-action: pan-y;
  }

  .nav.visible {
    touch-action: pan-y;
  }
}


/* =========================================================
   V23 — MENÚ MÓVIL RECONSTRUIDO (SIN ZONAS EN BLANCO)
   ========================================================= */
@media (max-width: 1000px) {
  .nav {
    /* Grid evita que el panel completo se desplace.
       Solo la fila central (links) puede hacer scroll. */
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch !important;
    gap: 0 !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    width: min(390px, 88vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: #fff !important;
    box-shadow: -20px 0 45px rgba(0,0,0,.16);
  }

  .nav-mobile-header {
    grid-row: 1;
    width: 100%;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
  }

  .nav-list {
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }

  .nav-mobile-footer {
    grid-row: 3;
    width: 100%;
    margin: 0 !important;
    position: relative !important;
    bottom: auto !important;
  }

  /* El panel y el fondo siempre ocupan exactamente la pantalla visible. */
  .menu-overlay {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Evita que reglas heredadas empujen el contenido interno. */
  .nav > *,
  .nav-list > * {
    transform: none;
  }
}

/* En Safari/iPhone, evita el rebote del documento mientras el menú está abierto. */
html:has(body.menu-abierto) {
  overflow: hidden;
  overscroll-behavior: none;
}

body.menu-abierto {
  overscroll-behavior: none;
}


/* =========================================================
   V24 — FIX DEFINITIVO DEL MENÚ AL ABRIR DESDE ABAJO
   ========================================================= */

/* El backdrop-filter del header crea un "containing block" para elementos
   fixed en algunos navegadores móviles. Eso hacía que el nav desapareciera
   cuando la página ya estaba desplazada hacia abajo. */
@media (max-width: 1000px) {
  .site-header,
  .site-header.is-scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
  }

  .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(390px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    z-index: 10005 !important;
    transform: translate3d(105%, 0, 0) !important;
    will-change: transform;
  }

  .nav.visible {
    transform: translate3d(0, 0, 0) !important;
  }

  .menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 10000 !important;
  }

  /* Se bloquea el contenido de fondo sin cambiar la posición del body. */
  html.menu-lock,
  body.menu-abierto {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.menu-abierto {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    touch-action: none;
  }

  .nav,
  .nav-list {
    touch-action: pan-y;
  }
}

/* Evita que la regla anterior :has() interfiera en navegadores móviles. */
@media (max-width: 1000px) {
  html:has(body.menu-abierto) {
    overflow: hidden !important;
  }
}


/* =========================================================
   V25 — CORRECCIÓN DE CAPAS DEL MENÚ MÓVIL
   ========================================================= */

/*
  El panel se veía gris porque el overlay oscuro estaba quedando
  por encima del <header>. Como el nav vive dentro del header,
  su z-index interno no podía superar ese contexto de apilamiento.
*/
@media (max-width: 1000px) {
  .menu-overlay {
    z-index: 9990 !important;
  }

  .site-header,
  .site-header.is-scrolled {
    z-index: 9995 !important;
  }

  .nav {
    z-index: 10000 !important;
    background: #ffffff !important;
    opacity: 0;
    visibility: hidden;
  }

  .nav.visible {
    opacity: 1 !important;
    visibility: visible !important;
    background: #ffffff !important;
  }

  .nav-mobile-header,
  .nav-list,
  .nav-mobile-footer {
    background: #ffffff !important;
  }

  /* La barra superior del sitio queda transparente al overlay,
     excepto el panel abierto, que permanece totalmente blanco. */
  body.menu-abierto .site-header {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.menu-abierto .nav {
    box-shadow: -18px 0 48px rgba(0, 0, 0, .22) !important;
  }
}


/* =========================================================
   V26 — MENÚ MÓVIL INDEPENDIENTE DEL HEADER
   ========================================================= */

.mobile-drawer {
  display: none;
}

@media (max-width: 1000px) {
  /* El nav original queda exclusivamente para escritorio. */
  .header-inner > .nav {
    display: none !important;
  }

  .abrir-menu {
    display: inline-grid !important;
    place-items: center;
    position: relative;
    z-index: 5;
  }

  .menu-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(7, 13, 16, .72) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .28s ease, visibility .28s ease !important;
    z-index: 30000 !important;
  }

  .menu-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-drawer {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(390px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    color: #132126 !important;
    opacity: 1 !important;

    transform: translate3d(102%, 0, 0) !important;
    transition: transform .32s cubic-bezier(.22,.75,.22,1) !important;
    box-shadow: -20px 0 55px rgba(0,0,0,.20) !important;

    overflow: hidden !important;
    z-index: 30010 !important;
    isolation: isolate;
  }

  .mobile-drawer.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    padding: 14px 22px;
    border-bottom: 1px solid #e7ecec;
    background: #fff;
  }

  .mobile-drawer-brand img {
    display: block;
    width: 150px;
    max-height: 52px;
    object-fit: contain;
  }

  .mobile-drawer-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #132126;
    font-size: 24px;
    cursor: pointer;
  }

  .mobile-drawer-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px 26px;
    background: #fff;
  }

  .mobile-drawer-list,
  .mobile-services-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-drawer-list > li {
    border-bottom: 1px solid #e8eded;
  }

  .mobile-drawer-list > li:last-child {
    border-bottom: 0;
  }

  .mobile-drawer-list > li > a,
  .mobile-services-row > a {
    display: block;
    padding: 18px 2px;
    color: #132126;
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
  }

  .mobile-drawer-list > li > a.mobile-active {
    color: #00a093;
  }

  .mobile-services-row {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
  }

  .mobile-services-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #132126;
    font-size: 16px;
    cursor: pointer;
  }

  .mobile-services-toggle i {
    transition: transform .25s ease;
  }

  .mobile-services.is-open .mobile-services-toggle i {
    transform: rotate(180deg);
  }

  .mobile-services-submenu {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s ease, opacity .22s ease;
  }

  .mobile-services-submenu > li {
    overflow: hidden;
  }

  .mobile-services.is-open .mobile-services-submenu {
    grid-template-rows: repeat(4, minmax(0, auto));
    opacity: 1;
    padding-bottom: 12px;
  }

  .mobile-services-submenu a {
    display: block;
    padding: 12px 14px;
    margin: 5px 0;
    border-radius: 12px;
    background: #f4f8f8;
    color: #132126;
    text-decoration: none;
  }

  .mobile-services-submenu strong,
  .mobile-services-submenu span {
    display: block;
  }

  .mobile-services-submenu strong {
    font-size: 13px;
  }

  .mobile-services-submenu span {
    margin-top: 4px;
    color: #718084;
    font-size: 11px;
    line-height: 1.4;
  }

  .mobile-contact {
    padding-top: 14px;
  }

  .mobile-contact > a {
    display: block !important;
    padding: 14px 20px !important;
    border-radius: 999px;
    background: #102226;
    color: #fff !important;
    text-align: center;
  }

  .mobile-drawer-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 22px;
    border-top: 1px solid #e7ecec;
    background: #fff;
    color: #657579;
    font-size: 12px;
  }

  .mobile-socials {
    display: flex;
    align-items: center;
    gap: 17px;
  }

  .mobile-socials a {
    color: #132126;
    font-size: 20px;
    text-decoration: none;
  }

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* El header nunca participa de las capas del drawer. */
  .site-header,
  .site-header.is-scrolled {
    z-index: 1000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (min-width: 1001px) {
  .mobile-drawer,
  .menu-overlay {
    display: none !important;
  }
}


/* =========================================================
   V27 FINAL — SEO TÉCNICO, RESILIENCIA Y ACCESIBILIDAD
   ========================================================= */

/* El contenido es visible incluso si JavaScript está deshabilitado.
   Solo se oculta para la animación cuando existe JS. */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(30px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enlaces de contacto del footer: mismos estilos visuales, mejor usabilidad. */
.footer-contact-list a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-contact-list a:hover,
.footer-contact-list a:focus-visible {
  color: #72ded5;
}

/* Estados de foco claros para teclado. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(0, 160, 147, .42);
  outline-offset: 4px;
}

/* Evita saltos visuales menores en imágenes. */
img {
  max-width: 100%;
}

/* Respeta reducción de movimiento sin ocultar contenido. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   V28 — PULIDO FINAL DE ACCESIBILIDAD / SEO VISUAL
   ========================================================= */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 40000;
  transform: translateY(-160%);
  padding: 11px 15px;
  border-radius: 10px;
  background: #132126;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  transition: transform .2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

.social-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: inherit;
  cursor: default;
}

.mobile-socials .social-placeholder {
  color: #132126;
  font-size: 20px;
}


/* =========================================================
   V29 — FIX MENÚ: INICIO + SUBMENÚ SERVICIOS
   ========================================================= */

@media (max-width: 1000px) {
  /* El submenú cerrado no ocupa espacio. */
  .mobile-services-submenu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transition:
      max-height .35s ease,
      opacity .22s ease,
      padding .35s ease !important;
  }

  .mobile-services-submenu > li {
    overflow: visible !important;
  }

  .mobile-services.is-open .mobile-services-submenu {
    max-height: 520px !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 0 12px !important;
  }

  /* Mantiene Proyectos inmediatamente después de Servicios
     cuando el submenú está cerrado. */
  .mobile-services:not(.is-open) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-drawer-body {
    padding-bottom: 20px !important;
  }
}


/* =========================================================
   V30 — MEJORA VISUAL Y DE CONTENIDO DEL INDEX
   ========================================================= */

/* Hero: un poco más de profundidad sin recargarlo */
.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(99, 215, 207, .14);
  box-shadow:
    0 0 0 70px rgba(99, 215, 207, .035),
    0 0 0 140px rgba(99, 215, 207, .018);
  pointer-events: none;
  z-index: 2;
}
.hero-content { z-index: 3; }

/* Barra de capacidades: conecta visualmente el hero con servicios */
.capabilities-strip {
  position: relative;
  z-index: 5;
  width: min(1180px, calc(100% - 48px));
  margin: -38px auto 0;
}
.capabilities-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 21px 26px;
  border: 1px solid #e1e9e9;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 50px rgba(10,31,36,.10);
  backdrop-filter: blur(12px);
}
.capability {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.capability-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 13px;
  background: #e9f8f6;
  color: var(--teal);
}
.capability small,
.capability strong {
  display: block;
}
.capability small {
  margin-bottom: 3px;
  color: #7d8c8f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.capability strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
}
.capability-line {
  width: 1px;
  height: 34px;
  background: #dfe7e7;
}

/* Servicios: mejor ritmo y presencia */
.services-showcase {
  padding-top: 126px;
}
.service-main {
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-main:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px rgba(11, 30, 35, .20);
}
.service-main-icon {
  animation: main-icon-pulse 3.6s ease-in-out infinite;
}
@keyframes main-icon-pulse {
  0%,100% { box-shadow: 0 12px 34px rgba(0,160,147,.28); }
  50% { box-shadow: 0 12px 44px rgba(0,160,147,.46); }
}

/* Flujo de integración */
.control-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 34px 0 34px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
}
.control-flow > i {
  color: #6cd8cf;
  font-size: 18px;
  animation: flow-arrow 1.8s ease-in-out infinite;
}
.control-flow > i:nth-of-type(2) { animation-delay: .22s; }
.control-flow > i:nth-of-type(3) { animation-delay: .44s; }
@keyframes flow-arrow {
  0%,100% { transform: translateX(0); opacity: .45; }
  50% { transform: translateX(5px); opacity: 1; }
}
.control-flow-step {
  min-width: 0;
}
.control-flow-step span,
.control-flow-step strong,
.control-flow-step small {
  display: block;
}
.control-flow-step span {
  color: #6cd8cf;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.control-flow-step strong {
  margin-top: 5px;
  color: #fff;
  font-size: 17px;
}
.control-flow-step small {
  margin-top: 4px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
}

/* Proyectos: más sensación editorial */
.project-card {
  position: relative;
  overflow: hidden;
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,20,24,.64) 100%);
  pointer-events: none;
  opacity: .65;
  transition: opacity .3s ease;
}
.project-card img {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover img {
  transform: scale(1.045);
}
.project-card:hover::after {
  opacity: .9;
}
.project-card figcaption {
  position: relative;
  z-index: 2;
}

/* Quiénes somos: menos caja, más protagonismo visual */
.about-logo-frame {
  position: relative;
}
.about-logo-frame::before {
  content: "AUTOMATIZACIÓN  •  CONTROL";
  position: absolute;
  top: 19px;
  left: 23px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

/* Por qué AUTOMA */
.why-card {
  position: relative;
  overflow: hidden;
}
.why-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(255,255,255,.10);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  transition: color .3s ease, transform .3s ease;
}
.why-card:hover .why-number {
  color: rgba(108,216,207,.22);
  transform: translateY(-3px);
}

/* CTA final con sutil textura técnica */
.final-cta {
  position: relative;
  overflow: hidden;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 42px 42px;
}
.final-cta-inner {
  position: relative;
  z-index: 2;
}

/* Responsive */
@media (max-width: 900px) {
  .capabilities-strip {
    width: min(720px, calc(100% - 32px));
    margin-top: -26px;
  }
  .capabilities-inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }
  .capability-line {
    display: none;
  }
  .control-flow {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .control-flow > i {
    display: none;
  }
}

@media (max-width: 560px) {
  .capabilities-strip {
    width: calc(100% - 28px);
    margin-top: -20px;
  }
  .capabilities-inner {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .capability {
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eeee;
  }
  .capability:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .services-showcase {
    padding-top: 86px;
  }
  .control-flow {
    grid-template-columns: 1fr;
  }
}

/* Si el usuario prefiere menos movimiento, conserva el diseño sin animación. */
@media (prefers-reduced-motion: reduce) {
  .service-main-icon,
  .control-flow > i {
    animation: none !important;
  }
}


/* =========================================================
   V31 — CONSERVAR POSICIÓN AL CERRAR EL MENÚ
   ========================================================= */
@media (max-width: 1000px) {
  html.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* El drawer es independiente del body/header y permanece en viewport. */
  .mobile-drawer,
  .menu-overlay {
    position: fixed !important;
  }
}


/* =========================================================
   V32 — DROPDOWN DE SERVICIOS ESTABLE EN ESCRITORIO
   Mismo comportamiento visual que servicios.html
   ========================================================= */

@media (min-width: 1001px) {
  .nav-servicios {
    position: relative !important;
  }

  /* Puente invisible entre el botón y el panel para no perder hover. */
  .nav-servicios::after {
    content: "";
    position: absolute;
    left: -18px;
    right: -40px;
    top: 100%;
    height: 30px;
    background: transparent;
  }

  .servicios-dropdown {
    top: calc(100% + 18px) !important;
    padding: 10px !important;
  }

  .nav-servicios:hover .servicios-dropdown,
  .nav-servicios:focus-within .servicios-dropdown,
  .nav-servicios.desktop-submenu-open .servicios-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-40%) translateY(-4px) !important;
  }

  .servicios-dropdown li {
    margin: 0 !important;
  }

  .servicios-dropdown a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 13px 15px 13px 18px !important;
    border-radius: 12px !important;
    color: #15262b !important;
    background: transparent !important;
    transition:
      background .22s ease,
      color .22s ease,
      transform .22s ease,
      box-shadow .22s ease !important;
  }

  .servicios-dropdown a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 3px;
    height: 0;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #00a093;
    transition: height .22s ease;
  }

  .servicios-dropdown a::after {
    content: "↗";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translate(-5px,-50%);
    opacity: 0;
    color: #00a093;
    font-size: 14px;
    transition: opacity .22s ease, transform .22s ease;
  }

  .servicios-dropdown a:hover,
  .servicios-dropdown a:focus-visible {
    background: #eaf7f5 !important;
    color: #008f85 !important;
    transform: translateX(4px) !important;
    box-shadow: inset 0 0 0 1px rgba(0,160,147,.10) !important;
  }

  .servicios-dropdown a:hover::before,
  .servicios-dropdown a:focus-visible::before {
    height: 58% !important;
  }

  .servicios-dropdown a:hover::after,
  .servicios-dropdown a:focus-visible::after {
    opacity: 1 !important;
    transform: translate(0,-50%) !important;
  }

  .servicios-dropdown a:hover strong,
  .servicios-dropdown a:focus-visible strong {
    color: #008f85 !important;
  }

  .servicios-dropdown a:hover span,
  .servicios-dropdown a:focus-visible span {
    color: #52716e !important;
  }
}

/* PageSpeed: keep mobile menu icons visible before external icon fonts load. */
.nav-inline-icon{display:block;flex:0 0 auto;}