/* ===================================================================
   responsive-nuevo.css — Ruspanets theme
   Adaptación móvil/tablet de la home y resto del sitio.
   Carga DESPUÉS de styles.css y style.css para sobrescribir lo necesario.
   =================================================================== */


/* =====================================================================
   GLOBAL (escritorio + móvil): correcciones del header de la home
   ===================================================================== */

/* Ocultar el menú hamburguesa por defecto. Solo se muestra dentro del
   @media (max-width: 768px) más abajo. */
.mobile-menu-toggle,
.mobile-menu-overlay,
.mobile-menu-card {
  display: none !important;
}

/* Eliminar el hueco entre la barra de navegación y el hero
   (era la franja blanca que aparecía arriba). Solo aplica al
   <main id="site-main"> de la home — NO a otras páginas como
   privacy-policy o data-consent que usan <main class="legal-main">
   con su propio centrado. */
#site-main {
  margin: 0 !important;
  padding-top: 0 !important;
}
.navbar-top { margin: 0 !important; }
body section.hero { margin-top: 0 !important; }


/* =====================================================================
   TABLET PORTRAIT (769px - 1024px) — iPad/Galaxy Tab en vertical
   Versión escritorio adaptada al ancho: sin hamburguesa, sin tabs
   transformadas, pero CON los bloques borde a borde (sin franja blanca
   lateral). Aplica solo entre móvil (768) y tablet horizontal (1024).
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Body negro solo en la home (igual que en móvil): así si hay
     algún hueco lateral mínimo, no se ve blanco. */
  body.home { background: #000 !important; }

  /* Quitar padding lateral del contenedor principal: las secciones
     ocupan el 100% del ancho del viewport. */
  #site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Sections con padding interno respiran pero el background llega
     a borde de pantalla. */
  body > main > section,
  body > section,
  #site-main > section {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Quitar admin-bar margin (igual que en móvil) por si acaso. */
  html { margin-top: 0 !important; }
  body { margin-top: 0 !important; padding-top: 0 !important; }
}


/* =====================================================================
   TABLETS (769px - 1199px) — portrait Y landscape
   Padding-bottom al footer para que el botón flotante de Telemako
   no tape los enlaces del footer ("К началу ↑", contactos, etc.).
   No aplica a escritorio normal (>=1200) donde la página suele ser
   más larga y el solape no se nota.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1199px) {
  footer {
    padding-bottom: 70px !important;
  }
}


/* =====================================================================
   TABLET (max-width: 1024px) — iPad horizontal y similares
   ===================================================================== */
@media (max-width: 1024px) {

  /* Reduce padding general del contenido */
  #site-main {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Tipografía hero un poco más pequeña que en escritorio */
  body section.hero h1 {
    font-size: 44px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  body #hero-logo { height: 200px !important; }

  /* Píldoras del menú un poco más juntas */
  .navbar-top { gap: 8px; padding: 12px 16px; }
  .navbar-top .nav-pill { font-size: 13px; padding: 8px 24px; }
}


/* =====================================================================
   MÓVIL (max-width: 768px) — todos los teléfonos
   ===================================================================== */
@media (max-width: 768px) {

  /* ----- Fondo del body NEGRO solo en la HOME ----------------------- */
  /* En la home los bloques principales son negros: ponemos el body
     negro para que cualquier hueco se vea uniforme. En el resto de
     páginas (privacy-policy, blog, etc.) dejamos el body blanco para
     que no se pierda el texto negro de fondo. */
  body.home { background: #000 !important; }

  /* ----- Eliminar franja blanca arriba en todas las páginas --------- */
  /* WordPress reserva margin-top en <html> cuando hay admin-bar
     habilitado, aunque el usuario no lo vea. En móvil son ~46px y
     se ven como franja blanca antes del primer bloque (visible sobre
     todo en /ai-assistants/, donde el primer bloque es azul). */
  html { margin-top: 0 !important; }
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body > main,
  body > #site-main {
    margin-top: 0 !important;
  }


  /* ----- Hero ------------------------------------------------------- */
  /* Sobrescribe los !important inline del front-page.php usando
     mayor especificidad (body section.hero …). */
  body section.hero {
    /* padding-top más generoso (44px) para que el logo no toque
       el halo de la hamburguesa flotante de la esquina derecha. */
    padding: 44px 16px 48px !important;
  }
  body section.hero .logo-wrap {
    margin-bottom: 24px !important;
  }
  body section.hero h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    padding: 0 4px;
    max-width: 100% !important;
  }
  /* Quitamos los <br> dentro del h1 y .lead en móvil para que el
     navegador reparta el texto naturalmente y no se parta raro. */
  body section.hero h1 br,
  body section.hero .lead br { display: none !important; }
  body section.hero .lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 0 4px;
    max-width: 100% !important;
  }
  body #hero-logo { height: 130px !important; }


  /* ----- Sections borde a borde del viewport ------------------------ */
  /* CLAVE: el <main id="site-main"> tenía padding 24px que dejaba
     ver el body por los lados. Lo quitamos para que las secciones
     ocupen el 100% del ancho de la pantalla. */
  #site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Las secciones a 100% del viewport. El background de cada section
     llega al borde, pero conservamos un padding interno de 16px para
     que el texto no se pegue al borde de la pantalla. */
  body > main > section,
  body > section,
  #site-main > section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ----- Apilado vertical de bloques de 2 columnas ------------------ */
  /* Casi todas las secciones de la home tienen un <div> hijo con
     display: flex en el atributo style. Forzamos columna en móvil. */
  section > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
  }
  /* Caso específico de .section-pwa (no usa style inline en el div) */
  .pwa-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  /* En móvil ponemos el TEXTO arriba y las fotos DEBAJO (orden invertido
     respecto al desktop). Así el bloque de arriba (que acaba en imagen) y
     éste no quedan con dos fotos pegadas: texto de por medio. */
  .pwa-text { order: 1 !important; }
  /* Las dos capturas siguen LADO A LADO en móvil, solo más pequeñas
     (no apiladas). .pwa-phones es nieto de section, así que la regla
     global "section > div { flex-direction: column }" no le afecta. */
  .pwa-phones {
    order: 2 !important;
    flex: 0 0 auto !important;
    gap: 12px !important;
    justify-content: center !important;
  }
  .pwa-phone { max-width: 160px !important; }

  /* Bloque "инструмент продаж": al apilarse, la imagen ocupa ancho
     completo pero limitada y centrada (no estirada a lo alto). */
  .tool-img-wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Excepción: la franja negra de iconos sociales del footer del blog
     NO debe apilarse en columna — sus 3 iconos siguen en fila y
     centrados horizontalmente. */
  section.social-bar-dark > div {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  /* Altura de la franja negra en móvil: padding-top corto y
     padding-bottom muy generoso. Los iconos quedan en la parte alta
     (cerca de los datos legales del footer) para ganar aire respecto
     a los botones flotantes (К началу + Telemako) que ocupan la zona
     inferior. La altura total de la franja se mantiene constante
     (top + bottom ≈ 118px) — solo cambia DÓNDE caen los iconos. */
  section.social-bar-dark {
    padding-top: 14px !important;
    padding-bottom: 104px !important;
  }


  /* ----- Imágenes dentro de secciones ------------------------------- */
  /* Todas las imágenes responsivas por defecto */
  section img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* La foto circular de Pedro (border-radius: 50%) - tamaño limitado */
  section img[style*="border-radius: 50%"] {
    width: 220px !important;
    height: 220px !important;
    object-fit: cover;
    margin: 0 auto;
  }
  /* Imágenes con ancho fijo (width: 420px en foto Pedro, etc.) */
  section img[style*="width: 420px"],
  section img[style*="width:420px"] {
    width: 220px !important;
    height: 220px !important;
  }


  /* ----- Tipografía general dentro de secciones --------------------- */
  /* Sobrescribe los font-size grandes inline (38px, 42px, 36px) */
  section h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
  }
  section h3 { font-size: 18px !important; line-height: 1.3 !important; }
  section p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  /* Excepciones: textos "pequeños" del formulario */
  section .form-section p,
  section form p { font-size: 13px !important; }


  /* ----- Botones de las secciones ----------------------------------- */
  section a[style*="border-radius: 30px"],
  section a[style*="border-radius:30px"],
  section button[type="submit"] {
    padding: 14px 28px !important;
    font-size: 15px !important;
    display: inline-block !important;
  }


  /* ----- Inputs y formulario --------------------------------------- */
  /* font-size >= 16px evita que iOS haga zoom al enfocar */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
  }


  /* ----- Footer ---------------------------------------------------- */
  /* Todo el footer centrado en móvil */
  footer {
    text-align: center !important;
  }
  footer > div,
  footer > div > div,
  footer .footer-cols,
  .footer-white .footer-cols,
  .footer-dark .footer-cols {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important;
  }
  /* También los divs que tengan display: flex inline */
  footer div[style*="display: flex"],
  footer div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }


  /* ----- Tablas (single.php) con scroll horizontal si hace falta --- */
  .post-content table,
  .article table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }


  /* =================================================================
     MENÚ HAMBURGUESA — visible solo en móvil
     ================================================================= */

  /* Ocultar la barra horizontal de tabs */
  .navbar-top { display: none !important; }

  /* ----- Botón hamburguesa (3 barras cian) ------------------------- */
  /* Cuadrado con esquinas redondeadas, fondo negro semitransparente
     (deja ver lo que hay detrás según el scroll). */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    z-index: 10000;
    /* Halo cian inicial (estado de "respiración") */
    box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.45),
                0 0 14px rgba(43, 228, 242, 0.45),
                0 0 28px rgba(43, 228, 242, 0.25);
    /* Pulse + halo: animaciones MUY suaves cada 3s */
    animation: hamburguesaPulse 3s ease-in-out infinite,
               hamburguesaHalo  3s ease-in-out infinite;
    transition: transform .3s ease, background .25s ease;
  }
  .mobile-menu-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #2be4f2;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(43, 228, 242, 0.7);
    transition: transform .25s ease, opacity .25s ease;
  }

  /* Estado abierto: 3 barras se transforman en X */
  .mobile-menu-toggle.is-open {
    background: rgba(0, 0, 0, 0.8);
    /* Pausamos el pulse cuando está abierto para no marear */
    animation: none;
    box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.7),
                0 0 18px rgba(43, 228, 242, 0.7);
  }
  .mobile-menu-toggle.is-open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-menu-toggle.is-open .bar:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.is-open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Pulse: muy suave, escala 1 → 1.04 → 1 cada 3s */
  @keyframes hamburguesaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  /* Halo: glow cian que respira con el pulse */
  @keyframes hamburguesaHalo {
    0%, 100% {
      box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.45),
                  0 0 14px rgba(43, 228, 242, 0.45),
                  0 0 28px rgba(43, 228, 242, 0.25);
    }
    50% {
      box-shadow: 0 0 0 1.5px rgba(43, 228, 242, 0.65),
                  0 0 22px rgba(43, 228, 242, 0.7),
                  0 0 44px rgba(43, 228, 242, 0.45);
    }
  }


  /* ----- Velo oscuro detrás del menú ------------------------------- */
  .mobile-menu-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9998;
  }
  .mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }


  /* ----- Tarjeta del menú móvil ------------------------------------ */
  .mobile-menu-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    position: fixed;
    top: 80px;
    right: 14px;
    width: calc(100vw - 28px);
    max-width: 320px;
    padding: 20px;
    background: rgba(12, 14, 22, 0.96);
    border: 1px solid rgba(43, 228, 242, 0.35);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(43, 228, 242, 0.12);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.96);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .mobile-menu-card.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .mobile-menu-card .nav-pill {
    display: block !important;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid rgba(43, 228, 242, 0.4);
    background: transparent;
    color: #fff !important;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
    /* Halo + pulse SUTILES (más débiles que la hamburguesa).
       Cada píldora arranca con un pequeño retraso para crear cascada. */
    box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.18),
                0 0 8px rgba(43, 228, 242, 0.20);
    animation: pillPulse 3.5s ease-in-out infinite,
               pillHalo  3.5s ease-in-out infinite;
  }
  .mobile-menu-card .nav-pill:nth-child(2) { animation-delay: 0.35s, 0.35s; }
  .mobile-menu-card .nav-pill:nth-child(3) { animation-delay: 0.70s, 0.70s; }
  .mobile-menu-card .nav-pill:nth-child(4) { animation-delay: 1.05s, 1.05s; }
  .mobile-menu-card .nav-pill:nth-child(5) { animation-delay: 1.40s, 1.40s; }

  .mobile-menu-card .nav-pill:hover,
  .mobile-menu-card .nav-pill:active {
    background: rgba(43, 228, 242, 0.18);
    color: #2be4f2 !important;
  }

  /* Pulse y halo de las píldoras: más sutiles que la hamburguesa */
  @keyframes pillPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
  }
  @keyframes pillHalo {
    0%, 100% {
      box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.18),
                  0 0 8px rgba(43, 228, 242, 0.20);
    }
    50% {
      box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.40),
                  0 0 14px rgba(43, 228, 242, 0.45);
    }
  }


  /* =================================================================
     PÁGINA IA-asistentes: robot Telemako bien colocado en móvil
     ================================================================= */
  .ai-hero {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
  }
  .ai-hero .robot {
    width: 260px !important;
    height: 260px !important;
    max-width: 80% !important;
    margin: 0 auto -8px !important; /* margin-bottom negativo: acerca al h1 */
  }
  .ai-hero .robot img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  .ai-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
  /* Texto de los <p> sin nowrap: permite que las palabras hagan wrap
     y no se corte el texto por la derecha en móvil. */
  .ai-hero p {
    white-space: normal !important;
    max-width: 100% !important;
    padding: 0 4px !important;
  }


  /* =================================================================
     BOTÓN "К НАЧАЛУ ↑" con el mismo estilo que la hamburguesa
     (cuadrado redondeado, fondo oscuro semitransparente, halo cian
     con pulse). Va abajo a la izquierda, paralelo al Telemako.
     ================================================================= */
  footer a[href="#top"] {
    position: fixed !important;
    left: 14px !important;
    bottom: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #2be4f2 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    z-index: 9990 !important;
    box-shadow: 0 0 0 1px rgba(43, 228, 242, 0.45),
                0 0 14px rgba(43, 228, 242, 0.45),
                0 0 28px rgba(43, 228, 242, 0.25) !important;
    animation: hamburguesaPulse 3s ease-in-out infinite,
               hamburguesaHalo  3s ease-in-out infinite !important;
  }


  /* =================================================================
     Padding-bottom al footer en móvil: por defecto, generoso
     (100px) para que Telemako no tape el teléfono/email. EXCEPCIÓN:
     en la página del blog hay franja negra .social-bar-dark justo
     debajo del footer, que ya hace de "colchón" — ahí reducimos el
     padding del footer a casi nada para no dejar un hueco blanco.
     ================================================================= */
  footer {
    padding-bottom: 100px !important;
  }
  body.page-template-page-blog footer {
    padding-bottom: 20px !important;
  }


  /* =================================================================
     BOTÓN FLOTANTE TELEMAKO — más grande en móvil
     ================================================================= */
  #telemako-toggle {
    height: 72px !important;
    padding: 0 26px 0 6px !important;
    border-radius: 36px !important;
  }
  #telemako-toggle .tm-avatar {
    width: 60px !important;
    height: 60px !important;
  }
  #telemako-toggle .tm-label {
    font-size: 17px !important;
  }
  /* Posición: separado del borde para no chocar con la hamburguesa */
  #telemako-widget {
    right: 16px !important;
    bottom: 16px !important;
  }
}


/* =====================================================================
   MÓVIL ESTRECHO (max-width: 380px) — galaxy a52 antiguos, etc.
   ===================================================================== */
@media (max-width: 380px) {

  body section.hero h1 { font-size: 26px !important; }
  body #hero-logo { height: 110px !important; }

  section h2 { font-size: 23px !important; }
  section p  { font-size: 15px !important; }

  .mobile-menu-card { max-width: calc(100vw - 28px); }
}