/* ══════════════════════════════════════════════════════
   SECCIÓN "SOLUCIONES ESPECIALIZADAS" — reducir padding
   Neutraliza padding de blocks.css y base.css en todos
   los niveles de la cadena de contenedores.
   ══════════════════════════════════════════════════════ */
/* 1. Wrapper externo (24px de blocks.css) */
.wp-container-core-group-is-layout-12243e0f:has(.wp-elements-e3f76a031b87d1023d08832cf1e2034c) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 2. Wrapper interno */
.wp-elements-e3f76a031b87d1023d08832cf1e2034c {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* 3. Filas de columnas (32px de base.css) */
.wp-elements-e3f76a031b87d1023d08832cf1e2034c > .wp-block-columns {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 4. Columnas individuales (16px vertical de base.css) */
.wp-elements-e3f76a031b87d1023d08832cf1e2034c .wp-block-column {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════
   SECCIÓN "SERVICIOS" (8 tarjetas) — full width + sin gaps
   ══════════════════════════════════════════════════════ */
/* 1. Outer wrapper: quitar padding vertical */
.wp-container-core-group-is-layout-12243e0f:has(.wp-elements-203785a261b58ce45732bb2950760f34) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 2. Contenedor general: full width */
.wp-elements-203785a261b58ce45732bb2950760f34 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
/* 3. Grid de columnas: sin gap ni padding en ninguna dirección */
.wp-elements-203785a261b58ce45732bb2950760f34 > .wp-block-columns {
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 4. Contenedores individuales: sin margen externo, padding inferior
      ampliado para que la tarjeta no toque el borde ni clipe el hover */
.wp-elements-203785a261b58ce45732bb2950760f34 .wp-block-column {
  padding: 8px 8px 20px 8px !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════
   TIPOGRAFÍA FLUIDA — aplica a todas las pantallas
   ══════════════════════════════════════════════════════ */
.hero-headline    { font-size: clamp(1.25rem, 4vw + 0.4rem,  2.7rem) !important; }
.hero-subheadline { font-size: clamp(0.95rem, 2vw + 0.5rem,  1.8rem) !important; }
.cta-button       { font-size: clamp(0.875rem, 1.5vw + 0.4rem, 1.4rem) !important; }
.tech-title       { font-size: clamp(1.1rem,  3vw + 0.4rem,  2.8rem) !important; }
.metric-value     { font-size: clamp(1.4rem,  3vw + 0.5rem,  2.5rem) !important; }
.newsletter-title { font-size: clamp(1.4rem,  3.5vw + 0.4rem, 2.8rem) !important; }
.faq-headline     { font-size: clamp(1.25rem, 3.5vw + 0.3rem, 2.5rem) !important; }
.contact-headline { font-size: clamp(1.25rem, 3.5vw + 0.3rem, 2.5rem) !important; }
.dp-title         { white-space: normal !important;
                    font-size: clamp(1rem, 2.5vw + 0.5rem, 1.5rem) !important; }

/* ══════════════════════════════════════════════════════
   HERO — REDISEÑO COMPLETO PARA MÓVIL
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Toda la cadena de contenedores del hero:
        base.css pone height:100svh !important en hero-flex-container
        y hero-tabs-container globalmente — hay que pisar eso aquí */
  .wp-block-cover__inner-container,
  .hero-flex-container,
  .hero-tabs-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* El cover externo puede seguir siendo alto, pero sin clipar */
  .wp-block-cover {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    align-items: flex-start !important;
  }

  /* hero-flex-container: flex column para que crezca hacia abajo */
  .hero-flex-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
  }

  /* hero-tabs-container: igual */
  .hero-tabs-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }

  /* 2. Las secciones de contenido de cada tab son position:absolute
        en desktop. En móvil las pasamos a flujo normal para
        que el contenedor crezca con ellas (solo 1 visible a la vez) */
  .hero-tab-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* El overlay de fondo de cada tab puede seguir siendo absoluto
     pero dentro del tab-content que ahora es relativo */
  .hero-content-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  /* 3. El contenido del hero tiene transform:-175px en desktop
        para centrarlo visualmente. En móvil lo eliminamos */
  .hero-content {
    transform: none !important;
    padding: 16px 16px 0 !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  /* 4. Las tabs (position:absolute; top:63%) se convierten en
        una barra de navegación horizontal con scroll al fondo */
  .hero-tabs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    margin: 16px 0 0 0 !important;
    border-radius: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    flex-shrink: 0 !important;
  }
  .hero-tabs::-webkit-scrollbar { display: none; }

  /* 5. Cada tab item: más pequeño, sin transform scale */
  .hero-tabs li {
    width: 80px !important;
    min-width: 72px !important;
    height: auto !important;
    min-height: 90px !important;
    padding: 10px 6px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
    transform: none !important;
  }
  /* Ocultar iconos ::after en móvil para ahorrar espacio */
  .hero-tabs li::after {
    display: none !important;
  }
  /* Tab activo: sin scale que desborde */
  .hero-tabs li.active {
    transform: none !important;
  }

  /* 6. USP boxes: scroll horizontal sin wrap */
  .usp-box {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    justify-content: flex-start !important;
    margin-top: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .usp-box::-webkit-scrollbar { display: none; }

  .usp-item {
    min-width: 110px !important;
    flex-shrink: 0 !important;
    padding: 10px 8px !important;
  }
  .usp-title { font-size: 0.875rem !important; }
  .usp-text  { font-size: 0.75rem !important; }

  /* 7. El header indicador superior ("tech-hero-header")
        tiene position:absolute — lo reposicionamos */
  .tech-hero-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 12px auto !important;
    width: fit-content !important;
  }
}

/* ══════════════════════════════════════════════════════
   HERO — FIX PARA LAPTOPS (viewport bajo, ancho normal)

   Layout original intacto. Solo se ajustan fuentes, márgenes
   y posición del dock. El sticky JS congela el dock en su
   posición visual al primer scroll, permitiendo leer las
   tarjetas que quedan parcialmente detrás.
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-height: 900px) {

  /* Banner pegado al borde superior */
  .tech-hero-header {
    top: 1px !important;
  }

  /* Contenido: desde arriba, despejando el banner */
  .hero-tab-content.active {
    justify-content: flex-start !important;
    padding-top: 42px !important;
  }

  /* Eliminar transform que desplazaba hacia arriba */
  .hero-content {
    transform: translateY(0) !important;
    margin-top: 0 !important;
  }

  /* Dock: posición original + bajado 8px */
  .hero-tabs {
    top: calc(63% + 8px) !important;
  }

  /* Items más anchos */
  .hero-tabs li {
    width: 185px !important;
  }

  /* Cuando el JS activa el sticky, solo se necesita position y z-index;
     top/left/width/transform los setea el JS con inline !important */
  .hero-tabs.is-sticky {
    position: fixed !important;
    z-index: 1000 !important;
  }

  /* Reducir fuentes */
  .hero-headline {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem) !important;
    margin-bottom: 10px !important;
  }

  .hero-subheadline {
    font-size: clamp(0.875rem, 1.2vw, 1.2rem) !important;
    margin-bottom: 12px !important;
  }

  .cta-button {
    font-size: 1rem !important;
    padding: 8px 28px !important;
  }

  .cta-trust-badge {
    font-size: 0.8rem !important;
    margin-top: 4px !important;
  }

  /* USP box: tarjetas anchas → menos líneas → más compactas */
  .usp-box {
    margin-top: 16px !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  .usp-item {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }

  .usp-text {
    max-width: none !important;
    font-size: 0.875rem !important;
  }

  .usp-title {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }

  .usp-icon {
    margin-bottom: 6px !important;
  }
}

/* ══════════════════════════════════════════════════════
   NEWSLETTER: el truco left:50%/-50vw causa overflow
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nexal-newsletter-section {
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════
   SECCIONES: reducir padding en móvil
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-section     { padding: 40px 16px !important; }
  .contact-section { padding: 40px 16px !important; }
  .contact-form    { padding: 24px 16px !important; }
  .dp-wrapper      { padding: 20px 16px !important; }
}

/* ══════════════════════════════════════════════════════
   MEDIA: nunca desbordar el viewport
   ══════════════════════════════════════════════════════ */
img, video, iframe, canvas, svg { max-width: 100%; }

/* ══════════════════════════════════════════════════════
   OVERFLOW HORIZONTAL: prevención general
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wp-block-group,
  .wp-block-columns,
  .wp-block-cover__inner-container,
  section {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }
  /* Pero las listas con scroll horizontal NO deben cortar */
  .hero-tabs,
  .usp-box {
    overflow-x: auto !important;
  }
}