/* ==========================================================
   ANANTEC - INICIO
   CSS LIMPIO Y EDITABLE
   ==========================================================

   COMO MOVER ELEMENTOS:
   X positivo  = derecha
   X negativo  = izquierda
   Y positivo  = abajo
   Y negativo  = arriba

   Cambia SOLO las variables de :root para ajustes rápidos.
   ========================================================== */

:root {
  /* ---------- CONTENEDOR GENERAL ---------- */
  --content-max: 1240px;
  --page-padding: 24px;

  /* ---------- BARRA SUPERIOR ---------- */
  --topbar-height: 38px;
  --topbar-font-size: 13.5px;

  --email-x: 0px;
  --email-y: 0px;
  --email-icon-size: 22px;

  --social-x: 0px;
  --social-y: 0px;
  --social-icon-size: 22px;
  --social-gap: 16px;

  /* ---------- HEADER PRINCIPAL ---------- */
  --header-height: 66px;

  --logo-width: 185px;
  --logo-x: 0px;
  --logo-y: 0px;

  --nav-font-size: 15px;
  --nav-gap: 34px;
  --nav-x: 0px;
  --nav-y: 0px;

  --contact-width: 174px;
  --contact-height: 38px;
  --contact-font-size: 14px;
  --contact-x: 0px;
  --contact-y: 0px;
  --whatsapp-icon-size: 24px;

  /* ---------- HERO ---------- */
  --hero-height: clamp(620px, 82vh, 950px);
  --hero-image-x: 50%;
  --hero-image-y: 20%;

  --hero-content-width: 640px;
  --hero-x: 0px;
  --hero-y: 0px;

  --hero-title-size: 43px;
  --hero-title-line-height: 1.08;

  /* ---------- TITULO HERO POR SEPARADO ---------- */
  --hero-title-top-size: 46px;
  --hero-title-top-x: 0px;
  --hero-title-top-y: -50px;

  --hero-title-bottom-size: 46px;
  --hero-title-bottom-x: 0px;
  --hero-title-bottom-y: -50px;

  /* ---------- BOTONES HERO ---------- */
  --services-btn-width: 290px;
  --services-btn-height: 50px;
  --services-btn-x: 0px;
  --services-btn-y: 0px;

  --quote-btn-width: 290px;
  --quote-btn-height: 50px;
  --quote-btn-x: 0px;
  --quote-btn-y: 0px;

  --hero-buttons-gap: 14px;
  --hero-buttons-top-gap: 22px;

  /* ---------- CAJA “15 AÑOS” ---------- */
  --trust-width: 568px;
  --trust-height: 55px;
  --trust-x: 0px; /* usa el mismo X que los títulos para alinear el borde izquierdo */
  --trust-y: 50px;
  --trust-font-size: 17px;
  --trust-top-gap: 22px;
  --trust-padding-y: 8px;
  --trust-padding-x: 18px;
  --trust-icon-size: 40px;

  /* ---------- COPYRIGHT / LEGAL ---------- */
  --legal-x: 0px;
  --legal-y: 0px;
  --legal-width: 100%;
  --legal-font-size: 11px;
  --legal-bottom: 10px;

  /* ---------- COLORES ---------- */
  --ink: #0b1633;
  --blue-deep: #38409a;
  --blue: #2d7fc0;
  --cyan: #25add8;
  --line: #e6e9ef;
  --soft: #f8f9fb;
}

/* ==========================================================
   BASE
   ========================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

strong,
b {
  font-weight: 400;
}

.container {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--content-max));
  margin-inline: auto;
}

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

/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

.topbar {
  height: var(--topbar-height);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--topbar-font-size);
}
.topbar__inner .social {
  margin-left: auto;
}

.email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  transform: translate(var(--email-x), var(--email-y));
}

.email__icon {
  width: var(--email-icon-size);
  height: var(--email-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex: 0 0 auto;
}

.social {
  display: flex;
  align-items: center;
  gap: var(--social-gap);
  color: var(--blue);
  transform: translate(var(--social-x), var(--social-y));
}

.social a {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--blue);
  transition: transform .2s ease, opacity .2s ease;
}

.social a:hover {
  transform: translateY(-1px);
  opacity: .78;
}

.social svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}

.icon-instagram {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.icon-instagram .fill-dot {
  fill: currentColor;
  stroke: none;
}

.icon-facebook,
.icon-tiktok {
  fill: currentColor;
  stroke: none;
}

/* ==========================================================
   HEADER
   ========================================================== */

.header {
  height: var(--header-height);
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.header__inner {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  transform: translate(var(--logo-x), var(--logo-y));
}

.brand__word {
  width: var(--logo-width);
  height: auto;
  object-fit: contain;
}

.nav {
  position: absolute;
  left: 50%;
  transform: translate(calc(-50% + var(--nav-x)), var(--nav-y));
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  font-size: var(--nav-font-size);
  font-weight: 400;
  white-space: nowrap;
}

.nav a {
  position: relative;
  padding: 15px 0;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-deep), var(--cyan));
  transform: scaleX(0);
  transition: transform .2s ease;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}

.contact-btn {
  width: var(--contact-width);
  height: var(--contact-height);
  border-radius: 11px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  background: linear-gradient(110deg, var(--blue-deep), var(--blue), var(--cyan));
  box-shadow: 0 8px 20px rgba(45,127,192,.18);
  transform: translate(var(--contact-x), var(--contact-y));
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-btn svg {
  width: 21px;
  height: 21px;
  fill: #fff;
  flex: 0 0 auto;
}

.contact-btn:hover {
  transform: translate(var(--contact-x), calc(var(--contact-y) - 2px));
  box-shadow: 0 12px 24px rgba(45,127,192,.24);
}

.menu-toggle {
  display: none;
}

/* ==========================================================
   HERO
   ========================================================== */

.hero {
  height: var(--hero-height);
  min-height: 480px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-image-x) var(--hero-image-y);
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.57) 34%,
      rgba(255,255,255,.10) 62%,
      rgba(255,255,255,0) 100%
    );
}

.hero__content {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero__copy {
  width: min(100%, var(--hero-content-width));
  transform: translate(var(--hero-x), var(--hero-y));
}

.hero h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: var(--hero-title-line-height);
  letter-spacing: -.02em;
  font-weight: 500;
  color: #090d17;
}

/* SOLUCIONES TECNOLÓGICAS */
.hero h1 > span:first-child {
  display: block;
  font-size: var(--hero-title-top-size);
  transform: translate(var(--hero-title-top-x), var(--hero-title-top-y));
}

/* PARA TU HOGAR Y EMPRESA */
.hero h1 > span:nth-child(2) {
  display: block;
  font-size: var(--hero-title-bottom-size);
  transform: translate(var(--hero-title-bottom-x), var(--hero-title-bottom-y));
}

.hero h1 strong {
  font-weight: 400;
  color: transparent;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==========================================================
   BOTONES HERO
   ========================================================== */

.hero__actions {
  margin-top: var(--hero-buttons-top-gap);
  display: grid;
  gap: var(--hero-buttons-gap);
  justify-items: start;
}

.btn {
  border-radius: 12px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn span {
  font-size: 24px;
  line-height: 1;
}

.btn--primary {
  width: var(--services-btn-width);
  min-height: var(--services-btn-height);
  color: #fff;
  background: linear-gradient(110deg, var(--blue-deep), var(--blue), var(--cyan));
  box-shadow: 0 8px 20px rgba(45,127,192,.16);
  transform: translate(var(--services-btn-x), var(--services-btn-y));
}

.btn--primary:hover {
  transform: translate(calc(var(--services-btn-x) + 3px), var(--services-btn-y));
}

.btn--secondary {
  width: var(--quote-btn-width);
  min-height: var(--quote-btn-height);
  color: #174cb4;
  background: rgba(255,255,255,.88);
  border: none;
  outline: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(11,22,51,.10);
  transform: translate(var(--quote-btn-x), var(--quote-btn-y));
}

.btn--secondary:hover {
  transform: translate(calc(var(--quote-btn-x) + 3px), var(--quote-btn-y));
}


.btn--order {
  width: var(--quote-btn-width);
  min-height: var(--quote-btn-height);
  color: #174cb4;
  background: rgba(255,255,255,.88);
  border: none;
  outline: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(11,22,51,.10);
  transform: translate(var(--quote-btn-x), var(--quote-btn-y));
}

.btn--order:hover {
  transform: translate(calc(var(--quote-btn-x) + 3px), var(--quote-btn-y));
}

/* ==========================================================
   CAJA “MÁS DE 15 AÑOS”
   ========================================================== */

.trust-card {
  width: min(100%, var(--trust-width));
  min-height: var(--trust-height);
  height: var(--trust-height);
  margin-top: var(--trust-top-gap);
  padding: var(--trust-padding-y) var(--trust-padding-x);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(11,22,51,.12);
  backdrop-filter: blur(14px);
  transform: translate(var(--trust-x), var(--trust-y));
}

.trust-card__icon {
  flex: 0 0 var(--trust-icon-size);
  width: var(--trust-icon-size);
  height: var(--trust-icon-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  background: linear-gradient(145deg, var(--blue-deep), var(--cyan));
  box-shadow: 0 6px 14px rgba(45,127,192,.18);
}

.trust-card p {
  margin: 0;
  font-size: var(--trust-font-size);
  line-height: 1.15;
  color: #171d2a;
  white-space: nowrap;
}

/* ==========================================================
   COPYRIGHT / LEGAL
   ========================================================== */

.hero__legal {
  position: absolute;
  left: 50%;
  bottom: var(--legal-bottom);
  width: min(calc(100% - (var(--page-padding) * 2)), var(--legal-width));
  transform: translate(calc(-50% + var(--legal-x)), var(--legal-y));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(11,22,51,.82);
  font-size: var(--legal-font-size);
  text-align: center;
}

.hero__legal p {
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.hero__legal a:hover {
  color: var(--blue);
}

.anchor-target {
  display: block;
  scroll-margin-top: var(--header-height);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  :root {
    --page-padding: 20px;
    --topbar-height: 34px;
    --header-height: 62px;
    --logo-width: 165px;
    --hero-height: 680px;
    --trust-width: 100%;
    --trust-height: auto;
  }

  .contact-btn {
    width: 50px;
    height: 50px;
    border-radius: 11px;
  }

  .contact-btn span {
    display: none;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: none;
    display: none;
    padding: 16px var(--page-padding) 22px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 16px 25px rgba(11,22,51,.08);
  }

  .nav.open {
    display: grid;
    gap: 4px;
  }

  .menu-toggle {
    justify-self: end;
    display: grid;
    gap: 5px;
    width: 42px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    height: 2px;
    background: var(--ink);
    border-radius: 99px;
  }

  .hero__shade {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.90),
        rgba(255,255,255,.58) 65%,
        rgba(255,255,255,.15)
      );
  }

  .trust-card {
    height: auto;
    min-height: 58px;
  }

  .trust-card p {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  :root {
    --page-padding: 18px;
    --topbar-height: 32px;
    --header-height: 58px;
    --logo-width: 140px;
    --email-icon-size: 18px;
    --social-icon-size: 20px;
    --whatsapp-icon-size: 22px;
    --hero-height: 690px;
    --hero-content-width: 100%;
    --services-btn-width: 100%;
    --quote-btn-width: 100%;
    --legal-font-size: 9px;
    --legal-bottom: 7px;
  }

  .email {
    font-size: 11px;
  }

  .social {
    gap: 10px;
  }

  .header__inner {
    gap: 10px;
  }

  .contact-btn {
    display: none;
  }

  .hero__content {
    align-items: flex-start;
    padding-top: 62px;
  }

  .hero__copy {
    width: 100%;
    transform: none;
  }

  .hero h1 > span:first-child {
    font-size: clamp(32px, 9vw, var(--hero-title-top-size));
  }

  .hero h1 > span:nth-child(2) {
    font-size: clamp(32px, 9vw, var(--hero-title-bottom-size));
  }

  .hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.72) 48%,
        rgba(255,255,255,.16) 100%
      );
  }

  .trust-card {
    padding: 10px 12px;
    gap: 10px;
  }

  .hero__legal p {
    gap: 5px;
  }
}


/* ---------- MONITORES GRANDES ---------- */
@media (min-width: 1400px) {
  :root {
    --content-max: 1380px;
    --hero-height: clamp(820px, 80vh, 1000px);
  }
}


/* ==========================================================
   BARRA SUPERIOR COMPARTIDA - INICIO / NOSOTROS
   Alinea correo con el logo y redes con Contáctanos.
   ========================================================== */
.topbar__inner {
  position: relative;
}

.email {
  width: var(--logo-width);
  justify-content: flex-start;
}

.social {
  min-width: var(--contact-width);
  justify-content: flex-end;
}

.social__label {
  margin-right: 4px;
  color: var(--blue);
  font-size: var(--topbar-font-size);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .email {
    width: auto;
  }

  .social {
    min-width: auto;
  }
}

@media (max-width: 640px) {
  .social__label {
    display: none;
  }
}


/* ==========================================================
   TIPOGRAFÍA V7 - MEJOR LEGIBILIDAD ENTRE MONITORES
   ========================================================== */

/* Inter webfont cargada desde Google Fonts */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Textos pequeños: un poco más de presencia en monitores de menor densidad */
.topbar__inner,
.nav,
.contact-btn,
.btn,
.hero__legal,
.trust-card p {
  font-weight: 450;
}

/* Mantener títulos limpios y corporativos */
.hero h1,
.hero h1 strong {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* ==========================================================
   V8 - HEADER PRINCIPAL FIJO
   La barra de logo + navegación + Contáctanos permanece visible.
   ========================================================== */
.header {
  position: sticky;
  top: var(--topbar-height);
  z-index: 70;
}


/* ==========================================================
   V9 - CABECERA COMPLETA ANCLADA
   Correo/redes + logo/navegación permanecen visibles.
   ========================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
}

.header {
  position: sticky;
  top: var(--topbar-height);
  z-index: 80;
  box-shadow: 0 6px 18px rgba(11, 22, 51, .045);
}


/* ==========================================================
   V11 - EQUILIBRIO DE BARRA SUPERIOR
   Correo alineado con el área del logo.
   "Síguenos:" + redes alineados con el área de Contáctanos.
   ========================================================== */
.topbar {
  min-height: var(--topbar-height);
}

.topbar__inner {
  min-height: var(--topbar-height);
  line-height: 1;
}

.email {
  width: var(--logo-width);
  min-width: var(--logo-width);
  justify-content: flex-start;
  font-size: var(--topbar-font-size);
  gap: 9px;
}

.email__icon {
  width: var(--email-icon-size);
  height: var(--email-icon-size);
}

.social {
  width: var(--contact-width);
  min-width: var(--contact-width);
  justify-content: flex-end;
  gap: var(--social-gap);
}

.social__label {
  margin-right: 1px;
  font-size: var(--topbar-font-size);
  font-weight: 500;
}

.social a {
  width: 26px;
  height: 26px;
}

.social svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}

@media (max-width: 900px) {
  .email {
    width: auto;
    min-width: 0;
  }

  .social {
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .topbar__inner {
    font-size: 11px;
  }

  .email__icon {
    width: 19px;
    height: 19px;
  }

  .social a {
    width: 23px;
    height: 23px;
  }
}


/* ==========================================================
   V15 - COLOR ÚNICO PARA TÍTULOS
   Color tomado del azul/índigo principal del logo ANANTEC.
   ========================================================== */
:root {
  --anantec-title-color: #38409a;
}

/* Títulos principales del Inicio */
.hero__title,
.hero__title *,
.hero h1,
.hero h1 *,
main h1,
main h2,
main h3 {
  color: var(--anantec-title-color) !important;
  -webkit-text-fill-color: var(--anantec-title-color) !important;
  background: none !important;
  background-image: none !important;
}


/* ==========================================================
   V16 - IDENTIDAD DE TÍTULOS
   El hero de Inicio conserva su tratamiento original.
   ========================================================== */

/* SOLUCIONES TECNOLÓGICAS: oscuro, como estaba antes */
.hero h1,
.hero__title {
  color: #090d17 !important;
  -webkit-text-fill-color: #090d17 !important;
  background: none !important;
  background-image: none !important;
}

.hero h1 > span:first-child {
  color: #090d17 !important;
  -webkit-text-fill-color: #090d17 !important;
  background: none !important;
  background-image: none !important;
}

/* "PARA" permanece oscuro */
.hero h1 > span:nth-child(2) {
  color: #090d17 !important;
  -webkit-text-fill-color: #090d17 !important;
  background: none !important;
  background-image: none !important;
}

/* TU HOGAR Y EMPRESA recupera el degradado original del logo */
.hero h1 strong {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--cyan)) !important;
  background-image: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--cyan)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Texto general se mantiene en el gris azulado aprobado */
body {
  color: #30384a;
}


/* ==========================================================
   V26 - CONTROLES ÚNICOS / LÍNEA DE SERVICIOS DEL INICIO
   ----------------------------------------------------------
   Este es el ÚNICO bloque que controla esta frase.
   Ningún @media posterior vuelve a cambiar estas variables.

   Movimiento:
   +X = derecha / -X = izquierda
   +Y = abajo   / -Y = arriba
   ========================================================== */
:root {
  /* Ancho: queda exactamente dentro del mismo bloque del título */
  --hero-services-width: 100%;
  --hero-services-max-width: 100%;

  /* Tipografía editable.
     font-size = tamaño máximo en escritorio.
     font-min  = mínimo permitido en pantallas muy pequeñas. */
  --hero-services-font-size: 10px;
  --hero-services-font-min: 8.4px;
  --hero-services-line-height: 1.35;
  --hero-services-weight: 500;
  --hero-services-letter-spacing: -0.01em;
  --hero-services-color: #303b50;

  /* Espacio vertical. Se dejan iguales para que la frase quede
     visualmente centrada entre el título y los botones. */
  --hero-services-gap-top: 22px;
  --hero-services-gap-bottom: 22px;

  /* Movimiento manual, siempre activo en cualquier pantalla */
  --hero-services-move-x: 0px;
  --hero-services-move-y: 0px;
}

.hero__services-line {
  box-sizing: border-box;
  width: var(--hero-services-width);
  max-width: var(--hero-services-max-width);
  margin-top: var(--hero-services-gap-top);
  margin-right: 0;
  margin-bottom: var(--hero-services-gap-bottom);
  margin-left: 0;

  /* Misma alineación izquierda y mismo ancho útil que el título */
  text-align: left;
  color: var(--hero-services-color);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Responsive automático SIN sobrescribir tu variable.
     En monitor toma el máximo; en laptop/celular reduce de forma fluida. */
  font-size: clamp(var(--hero-services-font-min), 1vw, var(--hero-services-font-size));
  font-weight: var(--hero-services-weight);
  line-height: var(--hero-services-line-height);
  letter-spacing: var(--hero-services-letter-spacing);

  /* Conservamos la frase en una sola línea. */
  white-space: nowrap;

  /* Tus controles X/Y funcionan en desktop, laptop y celular. */
  transform: translate(var(--hero-services-move-x), var(--hero-services-move-y));
}

.hero__services-line span {
  display: inline-block;
  margin-inline: .20em;
  opacity: .72;
}

/* Ajuste puramente estructural para pantallas angostas.
   NO modifica ninguna de las variables anteriores. */
@media (max-width: 640px) {
  .hero__services-line {
    width: 100%;
    max-width: 100%;
  }
}


/* ==========================================================
   V27 - PANEL MAESTRO SIN BLOQUEOS / INICIO + HEADER
   ESTE BLOQUE VA AL FINAL A PROPÓSITO.
   Edita SOLO estas variables para mover elementos.
   +X derecha / -X izquierda | +Y abajo / -Y arriba
   Las variables NO son redefinidas por @media posteriores.
   ========================================================== */
:root {
  /* Topbar completa */
  --v27-topbar-x: 0px;
  --v27-topbar-y: 0px;

  /* Header completo */
  --v27-header-x: 0px;
  --v27-header-y: 0px;

  /* Hero completo */
  --v27-hero-copy-x: 0px;
  --v27-hero-copy-y: 0px;

  /* Título: bloque completo */
  --v27-hero-title-x: 0px;
  --v27-hero-title-y: 0px;

  /* Línea Climatización · Redes... */
  --v27-services-line-x: 0px;
  --v27-services-line-y: 0px;
  --v27-services-line-font-size: 14.5px;
  --v27-services-line-font-min: 8.4px;
  --v27-services-line-weight: 500;
  --v27-services-line-letter-spacing: -0.01em;
  --v27-services-line-gap-top: 22px;
  --v27-services-line-gap-bottom: 22px;

  /* Grupo de botones */
  --v27-hero-actions-x: 0px;
  --v27-hero-actions-y: 0px;

  /* Legal / copyright */
  --v27-legal-x: 0px;
  --v27-legal-y: 0px;
}

.topbar {
  translate: var(--v27-topbar-x) var(--v27-topbar-y);
}

.site-header {
  translate: var(--v27-header-x) var(--v27-header-y);
}

.hero__copy {
  translate: var(--v27-hero-copy-x) var(--v27-hero-copy-y);
}

.hero h1,
.hero__title {
  translate: var(--v27-hero-title-x) var(--v27-hero-title-y);
}

.hero__services-line {
  --hero-services-font-size: var(--v27-services-line-font-size);
  --hero-services-font-min: var(--v27-services-line-font-min);
  --hero-services-weight: var(--v27-services-line-weight);
  --hero-services-letter-spacing: var(--v27-services-line-letter-spacing);
  --hero-services-gap-top: var(--v27-services-line-gap-top);
  --hero-services-gap-bottom: var(--v27-services-line-gap-bottom);
  translate: var(--v27-services-line-x) var(--v27-services-line-y);
}

.hero__actions {
  translate: var(--v27-hero-actions-x) var(--v27-hero-actions-y);
}

.hero__legal {
  translate: var(--v27-legal-x) var(--v27-legal-y);
}
.hero__services-line {
    font-size: 13.5px !important;
    transform: translate(0px, 0px) !important;
}
.hero__services-line {
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
}
/* ==========================================================
   AJUSTE MÓVIL FINAL — LÍNEA DE SERVICIOS DEL HERO
   En escritorio conserva la línea única aprobada.
   ========================================================== */
@media (max-width: 700px) {
  .hero__services-line {
    width: calc(100% - 36px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transform: none !important;
    translate: none !important;
  }

  .hero__services-line span {
    margin-inline: .22em !important;
  }
}

/* ==========================================================
   AJUSTE MÓVIL FINAL V5 — TÍTULO PRINCIPAL DEL INICIO
   Solo teléfonos. Desktop y tablet permanecen intactos.
   ========================================================== */
@media (max-width: 700px) {
  .hero h1 {
    width: calc(100% - 36px) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    translate: none !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
  }

  .hero h1 > span:first-child {
    font-size: clamp(27px, 7.7vw, 33px) !important;
    line-height: 1.12 !important;
  }

  .hero h1 > span:nth-child(2) {
    margin-top: 5px !important;
    font-size: clamp(29px, 8.2vw, 35px) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 768px) {
  .topbar__inner {
    justify-content: center !important;
  }

  .topbar__inner .social {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .topbar .topbar__inner {
    display: flex !important;
    justify-content: center !important;
  }

  .topbar .topbar__inner .social {
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
  }
}

/* ==========================================================
   AJUSTE FINAL TOPBAR + WHATSAPP — 2026-09-09
   PC: redes alineadas al ancho de CONTÁCTANOS.
   Móvil: redes centradas en todas las páginas.
   ========================================================== */
.topbar__inner {
  display: flex !important;
  align-items: center !important;
}

.topbar__inner .social {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: var(--contact-width) !important;
  min-width: var(--contact-width) !important;
  justify-content: flex-end !important;
}

@media (max-width: 768px) {
  .topbar__inner {
    justify-content: center !important;
  }

  .topbar__inner .social {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    transform: none !important;
    translate: none !important;
  }

  .mobile-whatsapp {
    animation: anantec-whatsapp-pulse 2.2s ease-in-out infinite !important;
    transform-origin: center !important;
    will-change: transform, box-shadow;
  }
}

@keyframes anantec-whatsapp-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 22px rgba(11,22,51,.22), 0 0 0 0 rgba(37,211,102,.34);
  }
  45% {
    transform: scale(1.07);
    box-shadow: 0 10px 25px rgba(11,22,51,.24), 0 0 0 10px rgba(37,211,102,0);
  }
  55% {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-whatsapp {
    animation: none !important;
  }
}


/* ==========================================================
   ANANTEC — AJUSTE VISUAL 2026-09-10
   SOLO COLOR: gris frío integrado, sin cambios de estructura.
   ========================================================== */
:root {
  --line: #dbe2ea;
  --soft: #edf1f5;
}

body {
  background: #eef2f6;
}

.topbar {
  background: #e9eef3;
  border-bottom-color: #d8e0e8;
}

.header {
  background: rgba(248, 250, 252, .985);
  border-bottom-color: #dfe5ec;
}

.hero__shade {
  background:
    linear-gradient(90deg,
      rgba(247,249,252,.88) 0%,
      rgba(244,247,250,.62) 34%,
      rgba(239,244,248,.12) 62%,
      rgba(239,244,248,0) 100%
    );
}


/* ==========================================================
   ANANTEC — AJUSTE FINAL TOPBAR + HERO + WHATSAPP — 2026-09-10
   Mantiene estructura; solo escala/color de topbar y animación.
   ========================================================== */
:root {
  --topbar-height: 30.4px;       /* 80% de 38px */
  --topbar-font-size: 10.8px;    /* 80% de 13.5px */
  --social-icon-size: 17.6px;    /* 80% de 22px */
  --social-gap: 12.8px;          /* 80% de 16px */
}

/* Mismo fondo que el header; conserva una línea divisoria fina. */
.topbar {
  background: rgba(248, 250, 252, .985) !important;
  border-bottom: 1px solid #dfe5ec !important;
}

/* En PC, el bloque social conserva exactamente el ancho de CONTÁCTANOS. */
.topbar__inner .social {
  width: var(--contact-width) !important;
  min-width: var(--contact-width) !important;
  justify-content: flex-end !important;
}

.social a {
  width: 18px !important;
  height: 18px !important;
}

/* Móvil: barra también al 80% de su altura previa y redes centradas. */
@media (max-width: 768px) {
  :root {
    --topbar-height: 25.6px;     /* 80% de 32px */
    --topbar-font-size: 10.8px;
    --social-icon-size: 16px;    /* 80% de 20px */
    --social-gap: 12px;
  }

  .topbar__inner .social {
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Doble latido más visible y rápido, sin mover la posición del botón. */
  .mobile-whatsapp {
    animation: anantec-whatsapp-heartbeat 1.55s ease-in-out infinite !important;
    transform-origin: center !important;
    will-change: transform, box-shadow;
  }
}

@keyframes anantec-whatsapp-heartbeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 22px rgba(11,22,51,.22), 0 0 0 0 rgba(37,211,102,.42);
  }
  12% {
    transform: scale(1.14);
    box-shadow: 0 11px 27px rgba(11,22,51,.25), 0 0 0 16px rgba(37,211,102,0);
  }
  24% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.10);
    box-shadow: 0 10px 25px rgba(11,22,51,.24), 0 0 0 12px rgba(37,211,102,0);
  }
  48%, 100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-whatsapp {
    animation: none !important;
  }
}

/* ==========================================================
   ANANTEC — ALINEACIÓN FINAL REDES / CONTÁCTANOS — 2026-09-10
   Escritorio: el contenido social ocupa visualmente el mismo ancho
   que el botón CONTÁCTANOS. Móvil conserva redes centradas.
   ========================================================== */
@media (min-width: 769px) {
  .topbar__inner .social {
    width: var(--contact-width) !important;
    min-width: var(--contact-width) !important;
    max-width: var(--contact-width) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: space-between !important;
    gap: 0 !important;
    transform: none !important;
    translate: none !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================
   ANANTEC — HERO MÓVIL V5 — 2026-09-14
   Conserva imagen/encuadre; reduce la capa clara para mostrar mejor
   los equipos y mantiene el color original del segundo título.
   ========================================================== */
@media (max-width: 700px) {
  .hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(247,249,252,.84) 0%,
        rgba(247,249,252,.72) 23%,
        rgba(244,247,250,.48) 42%,
        rgba(239,244,248,.14) 62%,
        rgba(239,244,248,0) 82%
      ) !important;
    pointer-events: none;
  }

  .hero h1,
  .hero__services-line {
    position: relative;
    z-index: 1;
  }

  .hero h1 > span:first-child,
  .hero__services-line {
    text-shadow:
      0 1px 1px rgba(255,255,255,.90),
      0 2px 7px rgba(255,255,255,.62),
      0 1px 9px rgba(11,22,51,.12);
  }

  /* Mantener "QUE INTEGRAN TU ENTORNO" con su degradado original. */
  .hero h1 > span:nth-child(2),
  .hero h1 > span:nth-child(2) strong {
    text-shadow: none !important;
  }

  .hero h1 > span:nth-child(2) strong {
    color: transparent !important;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--cyan)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .hero__services-line {
    color: #0b1633 !important;
    font-weight: 600 !important;
  }
}


/* ==========================================================
   TIENDA ANANTEC - botón gemelo de CONTÁCTANOS
   Escritorio: junto a Contáctanos. Móvil: entre logo y menú.
   ========================================================== */
.shop-btn {
  position: absolute;
  top: 50%;
  right: calc(var(--contact-width) + 16px);
  transform: translateY(-50%);
  width: var(--contact-width);
  height: var(--contact-height);
  padding: 0 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  background: linear-gradient(110deg, var(--blue-deep), var(--blue), var(--cyan));
  box-shadow: 0 8px 20px rgba(45,127,192,.18);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  z-index: 4;
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-btn svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}
.shop-label-mobile { display: none; }
.shop-btn:hover {
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 12px 24px rgba(45,127,192,.24);
}

@media (max-width: 1100px) and (min-width: 901px) {
  .shop-btn {
    width: var(--contact-width);
    height: var(--contact-height);
    right: calc(var(--contact-width) + 10px);
    font-size: 11px;
    padding: 0 8px;
    gap: 6px;
  }
  .shop-btn svg { width: 17px; height: 17px; }
}

@media (max-width: 900px) {
  .header__inner {
    justify-content: flex-start;
  }
  .brand { order: 1; }
  .shop-btn {
    order: 2;
    position: static;
    transform: none;
    margin-left: auto;
    width: auto;
    min-width: 92px;
    height: 38px;
    padding: 0 11px;
    border-radius: 10px;
    gap: 6px;
    font-size: 11px;
  }
  .shop-btn:hover { transform: translateY(-1px); }
  .shop-label-desktop { display: none; }
  .shop-label-mobile { display: inline; }
  .menu-toggle {
    order: 3;
    margin-left: 2px;
  }
  .nav { order: 4; }
  .contact-btn { order: 5; }
}

@media (max-width: 640px) {
  .shop-btn {
    min-width: 76px;
    height: 34px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 9px;
  }
  .shop-btn svg { width: 15px; height: 15px; }
}

@media (max-width: 370px) {
  .shop-btn {
    min-width: 34px;
    width: 34px;
    padding: 0;
  }
  .shop-label-mobile { display: none; }
}



/* V8H: consistencia global de cabecera en todas las páginas */
@media (min-width: 901px) {
  .shop-btn,
  .contact-btn {
    width: var(--contact-width) !important;
    min-width: var(--contact-width) !important;
    max-width: var(--contact-width) !important;
    height: var(--contact-height) !important;
    min-height: var(--contact-height) !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .shop-btn svg,
  .contact-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: block !important;
    align-self: center !important;
  }
  .shop-btn .shop-label-desktop,
  .contact-btn span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  .shop-btn .shop-label-mobile { display: none !important; }
}


/* ==========================================================
   PARCHE 2026-09-16 — HERO / ACCESOS ANANTEC
   Solo textos, color de accesos y alineación del título.
   ========================================================== */
.btn--order {
  color: #fff;
  background: linear-gradient(110deg, var(--cyan), var(--blue), var(--blue-deep));
  box-shadow: 0 8px 20px rgba(45,127,192,.18);
}

/* ==========================================================
   PARCHE HERO 2026-09-16 — ALINEACIÓN FINAL DEL TÍTULO
   Mantiene SOLUCIONES TECNOLÓGICAS en una sola línea y ambas
   líneas con el mismo tamaño, tanto en escritorio como móvil.
   ========================================================== */
.hero__copy {
  --hero-content-width: 700px;
}

.hero h1 > span:first-child,
.hero h1 > span:nth-child(2) {
  font-size: 48px !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

@media (max-width: 700px) {
  .hero h1 {
    width: calc(100% - 28px) !important;
    max-width: 520px !important;
    text-align: center !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    width: 100% !important;
    font-size: clamp(24px, 7.15vw, 34px) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    text-align: center !important;
    transform: none !important;
  }

  .hero h1 > span:nth-child(2) {
    margin-top: 5px !important;
  }
}

@media (max-width: 360px) {
  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    font-size: 23px !important;
  }
}

/* ==========================================================
   PARCHE 2026-09-16 — CONTRASTE Y ANCHO UNIFORME ACCESOS HERO
   Los tres accesos conservan su posición y dimensiones.
   ========================================================== */
.hero__actions .btn--primary,
.hero__actions .btn--secondary,
.hero__actions .btn--order {
  width: var(--services-btn-width) !important;
  min-height: var(--services-btn-height) !important;
  box-sizing: border-box !important;
}

/* Degradado concentrado visualmente en el centro. */
.hero__actions .btn--secondary {
  color: #fff !important;
  background: linear-gradient(110deg,
    var(--blue-deep) 0%,
    var(--blue) 30%,
    var(--cyan) 50%,
    var(--blue) 70%,
    var(--blue-deep) 100%) !important;
  box-shadow: 0 8px 20px rgba(45,127,192,.18) !important;
  font-size: 13px !important;
}

@media (max-width: 700px) {
  .hero__actions {
    width: 100% !important;
  }

  .hero__actions .btn--primary,
  .hero__actions .btn--secondary,
  .hero__actions .btn--order {
    width: 100% !important;
    min-height: var(--services-btn-height) !important;
  }

  .hero__actions .btn--secondary {
    font-size: 12.5px !important;
  }
}

/* ==========================================================
   MICROPARCHE 2026-09-16 — HERO: DESKTOP CORREGIDO / MÓVIL RESTAURADO
   ========================================================== */
@media (min-width: 701px) {
  .hero__copy {
    --hero-content-width: 700px;
  }
  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    font-size: 46px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
}

/* Recupera exactamente el comportamiento móvil aprobado de la base Web (1). */
@media (max-width: 700px) {
  .hero h1 {
    width: calc(100% - 36px) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    translate: none !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hero h1 > span:first-child {
    font-size: clamp(27px, 7.7vw, 33px) !important;
    line-height: 1.12 !important;
  }

  .hero h1 > span:nth-child(2) {
    margin-top: 5px !important;
    font-size: clamp(29px, 8.2vw, 35px) !important;
    line-height: 1.1 !important;
  }
}

/* ==========================================================
   ANANTEC — AJUSTE FINAL HERO PC 2026-09-16
   Solo escritorio: las tres líneas comparten el mismo ancho visual.
   Móvil conserva exactamente el comportamiento aprobado anterior.
   ========================================================== */
@media (min-width: 701px) {
  .hero__copy {
    --hero-content-width: 700px;
    width: min(100%, var(--hero-content-width)) !important;
  }

  .hero h1 {
    width: 100% !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 46px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    text-align: left !important;
    transform-origin: left center !important;
  }

  /* Ajuste óptico: ambas líneas llegan al mismo borde derecho sin
     cambiar la altura tipográfica de una respecto de la otra. */
  .hero h1 > span:first-child {
    letter-spacing: -0.035em !important;
  }
  .hero h1 > span:nth-child(2) {
    letter-spacing: -0.052em !important;
  }

  .hero__services-line {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11.8px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap !important;
    text-align: justify !important;
    text-align-last: justify !important;
  }
}

/* ==========================================================
   ANANTEC — CORRECCIÓN DEFINITIVA HERO PC 2026-09-16
   Solo escritorio. Móvil queda intacto.
   Tres líneas con exactamente el mismo borde izquierdo/derecho.
   ========================================================== */
@media (min-width: 701px) {
  .hero__copy {
    --hero-align-width: 700px;
    width: min(100%, var(--hero-align-width)) !important;
    max-width: var(--hero-align-width) !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 46px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    text-align: justify !important;
    text-align-last: justify !important;
  }

  .hero__services-line {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 12.2px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    text-align: justify !important;
    text-align-last: justify !important;
  }
}

/* ==========================================================
   ANANTEC — HERO PC VERIFICADO 2026-09-16 V5
   SOLO ESCRITORIO. No altera el diseño móvil aprobado.
   Igual altura tipográfica y borde visual izquierdo/derecho.
   ========================================================== */
@media (min-width: 701px) {
  .hero__copy {
    --hero-align-width: 674px;
    width: var(--hero-align-width) !important;
    max-width: var(--hero-align-width) !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 1.08 !important;
    text-align: left !important;
  }

  .hero h1 > span:first-child,
  .hero h1 > span:nth-child(2) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    white-space: nowrap !important;
    font-size: 46px !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-align-last: auto !important;
  }

  .hero h1 > span:first-child {
    letter-spacing: 0 !important;
  }

  .hero h1 > span:nth-child(2) {
    letter-spacing: .62px !important;
  }

  .hero h1 > span:nth-child(2) strong {
    font: inherit !important;
    font-weight: 500 !important;
  }

  .hero__services-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    translate: none !important;
    white-space: nowrap !important;
    font-size: 14.26px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-align-last: auto !important;
  }
}

/* ==========================================================
   ANANTEC — MICROAJUSTE HERO PC 2026-09-16 V6
   Solo escritorio: sube ligeramente el título y reduce la
   línea de servicios para igualar su ancho visual al título.
   Móvil permanece intacto.
   ========================================================== */
@media (min-width: 701px) {
  .hero h1 {
    position: relative !important;
    top: -6px !important;
  }

  .hero__services-line {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12.35px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
}