/* mobile_hotfix_v3 */
/* PDFPrivado - Hotfix responsive movil v3
   Mas prudente que v1/v2: corrige movil sin forzar el escritorio. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Restauracion escritorio: evita tarjetas diminutas si algun hotfix anterior dejo reglas agresivas. */
@media (min-width: 821px) {
  .tools-grid,
  .tool-grid,
  .grid-tools,
  .tools-list,
  .cards-grid.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    width: min(1180px, calc(100% - 3rem));
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .tool-card,
  a.tool-card,
  .tools-grid > a,
  .tool-grid > a,
  .grid-tools > a {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .tool-card *,
  a.tool-card *,
  .tools-grid > a *,
  .tool-grid > a *,
  .grid-tools > a * {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body > *,
  main,
  .main,
  .page,
  .page-content,
  .content,
  .site-content,
  .container,
  .wrapper,
  .wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* HEADER movil: el objetivo es que PDFPrivado no quede pegado a Inicio/Ayuda. */
  header,
  .header,
  .site-header,
  .topbar,
  .navbar,
  .main-header {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  header .container,
  .header .container,
  .site-header .container,
  .topbar .container,
  .navbar .container,
  .nav-container,
  .navbar-inner,
  .header-inner {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 14px !important;
  }

  .logo,
  .brand,
  .navbar-brand,
  .site-logo,
  .logo-link,
  a.logo,
  a.brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 58vw !important;
    overflow: visible !important;
    white-space: nowrap !important;
    margin-right: 10px !important;
  }

  .logo img,
  .brand img,
  .navbar-brand img,
  .site-logo img,
  .logo-link img {
    flex: 0 0 auto !important;
    max-width: 34px !important;
    height: auto !important;
    margin-right: 6px !important;
  }

  /* Si Inicio/Ayuda estan en un nav, pasan a segunda linea y se ven limpios. */
  header nav,
  .header nav,
  .site-header nav,
  .navbar nav,
  .main-nav,
  .nav-links,
  .menu,
  .main-menu,
  .navbar-nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header nav a,
  .header nav a,
  .site-header nav a,
  .navbar nav a,
  .main-nav a,
  .nav-links a,
  .menu a,
  .main-menu a,
  .navbar-nav a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: clamp(0.95rem, 3.9vw, 1.08rem) !important;
  }

  /* Si Inicio/Ayuda NO estan dentro de nav, al menos separamos enlaces consecutivos del header. */
  header a[href]:not(.logo):not(.brand):not(.navbar-brand):not(.site-logo):not(.logo-link),
  .site-header a[href]:not(.logo):not(.brand):not(.navbar-brand):not(.site-logo):not(.logo-link),
  .navbar a[href]:not(.logo):not(.brand):not(.navbar-brand):not(.site-logo):not(.logo-link) {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  .language-selector,
  .lang-selector,
  .language-switcher,
  .language-dropdown,
  .lang-dropdown,
  .dropdown.language,
  .language-menu,
  [class*="language"],
  [class*="lang"] {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    max-width: 140px !important;
    margin-left: auto !important;
  }

  .language-selector button,
  .lang-selector button,
  .language-switcher button,
  .language-dropdown button,
  .lang-dropdown button,
  .language-menu button {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
  }

  /* El CTA de escritorio/pro solo se oculta dentro del header movil. */
  header .desktop-app,
  header .app-desktop,
  header .desktop-app-link,
  header .pro-header,
  header .pro-cta-header,
  header .header-pro,
  header .cta-desktop,
  header .btn-desktop,
  header .btn-pro,
  header a[href*="desktop"],
  header a[href*="Desktop"],
  header a[href*="escritorio"],
  header a[href*="Escritorio"],
  header a[href*="pro"],
  header a[href*="Pro"] {
    display: none !important;
  }

  /* HERO movil: centrado y sin desplazar la pagina. */
  main > section:first-child,
  .hero,
  .home-hero,
  .hero-section,
  .landing-hero,
  .privacy-hero,
  .main-hero,
  .hero-wrapper,
  .hero-container,
  section[class*="hero"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden !important;
  }

  .hero *,
  .home-hero *,
  .hero-section *,
  .landing-hero *,
  .privacy-hero *,
  .main-hero *,
  .hero-wrapper *,
  .hero-container * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero h1,
  .home-hero h1,
  .hero-section h1,
  .landing-hero h1,
  .main-hero h1,
  h1.hero-title,
  .hero-title {
    font-size: clamp(2rem, 8.7vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

  .hero p,
  .home-hero p,
  .hero-section p,
  .landing-hero p,
  .main-hero p,
  .hero-subtitle,
  .hero-card,
  .challenge,
  .challenge-banner {
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

  .hero-card,
  .challenge,
  .challenge-banner,
  .privacy-box,
  .hero-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero img,
  .home-hero img,
  .hero-section img,
  .landing-hero img,
  .main-hero img,
  .hero video,
  .home-hero video,
  .hero-section video,
  .landing-hero video,
  .main-hero video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tools-grid,
  .tool-grid,
  .grid-tools,
  .tools-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tool-card,
  a.tool-card,
  .tools-grid > a,
  .tool-grid > a,
  .grid-tools > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tool-card *,
  a.tool-card *,
  .tools-grid > a *,
  .tool-grid > a *,
  .grid-tools > a * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 430px) {
  header .container,
  .header .container,
  .site-header .container,
  .topbar .container,
  .navbar .container,
  .nav-container,
  .navbar-inner,
  .header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px 10px !important;
  }

  .logo,
  .brand,
  .navbar-brand,
  .site-logo,
  .logo-link,
  a.logo,
  a.brand {
    max-width: 56vw !important;
    margin-right: 8px !important;
  }

  header nav,
  .header nav,
  .site-header nav,
  .navbar nav,
  .main-nav,
  .nav-links,
  .menu,
  .main-menu,
  .navbar-nav {
    gap: 6px 18px !important;
  }
}

/* PDFPrivado header móvil v4 - inicio */
@media (max-width: 760px) {
  /* El ajuste es solo para móvil: evita que el header vuelva a empujar la página. */
  body,
  html {
    max-width: 100%;
    overflow-x: hidden;
  }

  header,
  .site-header,
  .main-header,
  .navbar,
  .topbar,
  .header {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  header .container,
  header .header-inner,
  header .nav-container,
  header .navbar-inner,
  header .topbar-inner,
  .site-header .container,
  .main-header .container,
  .navbar .container,
  .topbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 72px !important;
    padding-left: 14px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Logo: deja un aire real antes de Inicio. */
  header .brand,
  header .logo,
  header .site-logo,
  header .navbar-brand,
  header a.logo,
  header a.brand,
  .site-header .brand,
  .site-header .logo,
  .main-header .brand,
  .main-header .logo {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-right: 14px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Cuando Inicio va justo después del logo, forzamos separación. */
  header .brand + a,
  header .logo + a,
  header .site-logo + a,
  header .navbar-brand + a,
  header a.logo + a,
  header a.brand + a,
  .site-header .brand + a,
  .site-header .logo + a,
  .main-header .brand + a,
  .main-header .logo + a {
    margin-left: 12px !important;
  }

  /* Navegación principal móvil: Inicio y Ayuda más juntos entre sí. */
  header nav,
  header .nav,
  header .nav-links,
  header .main-nav,
  header .menu,
  .site-header nav,
  .main-header nav {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .main-nav a,
  header .menu a,
  .site-header nav a,
  .main-header nav a {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Selector de idioma: centrado verticalmente y pegado a la derecha sin salirse. */
  header .language-selector,
  header .lang-selector,
  header .language-switcher,
  header .lang-switcher,
  header .lang-switch,
  header .language-menu,
  header .locale-selector,
  header .i18n-selector,
  header [class*="language"],
  header [class*="lang"] {
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 72px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  header .language-selector > *,
  header .lang-selector > *,
  header .language-switcher > *,
  header .lang-switcher > *,
  header .lang-switch > *,
  header .language-menu > *,
  header .locale-selector > *,
  header .i18n-selector > *,
  header [class*="language"] > *,
  header [class*="lang"] > * {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 430px) {
  header .container,
  header .header-inner,
  header .nav-container,
  header .navbar-inner,
  header .topbar-inner,
  .site-header .container,
  .main-header .container,
  .navbar .container,
  .topbar .container {
    padding-left: 10px !important;
  }

  header .brand,
  header .logo,
  header .site-logo,
  header .navbar-brand,
  header a.logo,
  header a.brand,
  .site-header .brand,
  .site-header .logo,
  .main-header .brand,
  .main-header .logo {
    margin-right: 10px !important;
  }

  header nav,
  header .nav,
  header .nav-links,
  header .main-nav,
  header .menu,
  .site-header nav,
  .main-header nav {
    gap: 14px !important;
  }
}
/* PDFPrivado header móvil v4 - fin */