/* =====================================================
   TESH-SB - FIX FINAL MOBILE RESPONSIVE
   Pegar al FINAL de /assets/css/main.css
   o cargarlo después de todos tus CSS.
===================================================== */

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

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

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

h1,
h2,
h3,
p,
a,
span,
strong,
li {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {

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

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section,
  .public-section,
  .legal-section,
  .catalog-section,
  .familia-section,
  .quienes-intro-section,
  .quienes-story-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }

  /* HEADER / TOPBAR */
  .topbar,
  .site-topbar,
  .header-topbar {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 8px 14px !important;
    min-height: auto !important;
  }

  .topbar .container,
  .site-topbar .container,
  .header-topbar .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

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

  .navbar,
  .site-navbar,
  .main-navbar {
    min-height: 96px !important;
    padding: 12px 0 !important;
  }

  .navbar .container,
  .site-navbar .container,
  .main-navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .logo,
  .site-logo,
  .navbar-logo {
    max-width: 155px !important;
    width: 155px !important;
    flex: 0 0 auto !important;
  }

  .logo img,
  .site-logo img,
  .navbar-logo img,
  .admin-brand img {
    max-width: 155px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .menu-toggle,
  .nav-toggle,
  .hamburger {
    flex: 0 0 auto !important;
  }

  /* HERO / BANNERS */
  .hero,
  .home-hero,
  .page-hero,
  .category-hero,
  .legal-page .page-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 42px 0 38px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #070707 !important;
  }

  .hero::before,
  .home-hero::before,
  .page-hero::before,
  .category-hero::before {
    opacity: .66 !important;
  }

  .hero .container,
  .home-hero .container,
  .page-hero .container,
  .category-hero .container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-grid,
  .home-hero-grid,
  .hero-content,
  .home-hero-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .eyebrow,
  .eyebrow-dark,
  .hero .eyebrow,
  .home-hero .eyebrow,
  .page-hero .eyebrow,
  .section-head .eyebrow,
  .section-head .eyebrow-dark {
    display: inline-block !important;
    max-width: calc(100vw - 36px) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .7px !important;
    padding: 8px 10px !important;
    transform: rotate(-2deg) !important;
    margin-bottom: 12px !important;
  }

  .hero h1,
  .home-hero h1,
  .page-hero h1,
  .category-hero h1,
  .legal-page .page-hero h1 {
    max-width: calc(100vw - 36px) !important;
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: .9 !important;
    letter-spacing: -1.8px !important;
    margin: 0 0 14px !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero p,
  .home-hero p,
  .page-hero p,
  .category-hero p,
  .legal-page .page-hero p {
    max-width: calc(100vw - 36px) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
  }

  .hero-actions,
  .home-hero-actions,
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 280px !important;
  }

  .hero-actions .btn,
  .home-hero-actions .btn,
  .hero-buttons .btn,
  .hero .btn,
  .home-hero .btn,
  .page-hero .btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 14px 16px !important;
  }

  .hero-card,
  .home-hero-card,
  .hero-highlight,
  .skate-hero-card {
    width: 100% !important;
    max-width: calc(100vw - 36px) !important;
    margin: 22px 0 0 !important;
    padding: 18px 16px !important;
    transform: rotate(1deg) !important;
  }

  .hero-card h2,
  .home-hero-card h2,
  .hero-highlight h2,
  .skate-hero-card h2 {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .hero-card p,
  .home-hero-card p,
  .hero-highlight p,
  .skate-hero-card p {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* TITULOS SECCION */
  .section-head,
  .catalog-toolbar,
  .familia-head,
  .quienes-head {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .section-head h2,
  .catalog-toolbar h2,
  .familia-head h2,
  .quienes-head h2,
  .benefits-section h2,
  .featured-section h2,
  .newsletter h2,
  .legal-card h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: .95 !important;
    letter-spacing: -1.2px !important;
  }

  .section-head p,
  .catalog-toolbar p,
  .familia-head p,
  .quienes-head p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* BENEFICIOS */
  .benefits-section,
  .why-section {
    overflow-x: hidden !important;
  }

  .benefits-layout,
  .why-layout,
  .benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .benefit-card,
  .why-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 12px !important;
  }

  .benefit-card span,
  .why-card span {
    font-size: 12px !important;
    padding: 7px 9px !important;
  }

  .benefit-card h3,
  .why-card h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
    margin: 12px 0 8px !important;
  }

  .benefit-card p,
  .why-card p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .benefits-board,
  .why-board,
  .benefits-center,
  .why-center {
    max-width: 170px !important;
    margin: 0 auto 18px !important;
  }

  .benefits-board img,
  .why-board img,
  .benefits-center img,
  .why-center img {
    max-height: 300px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .benefits-columns,
  .why-columns {
    display: block !important;
  }

  /* CATEGORIAS */
  .categories-section,
  .home-categories,
  .catalog-sidebar,
  .filters {
    width: 100% !important;
    max-width: 100% !important;
  }

  .catalog-layout,
  .home-shop-layout,
  .shop-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .catalog-sidebar,
  .filters,
  .category-menu {
    margin-bottom: 24px !important;
    padding: 18px !important;
  }

  .catalog-category-list a,
  .category-menu a,
  .filters a {
    font-size: 12px !important;
    padding: 12px 0 !important;
  }

  /* PRODUCTOS */
  .product-grid,
  .catalog-product-grid,
  .featured-products-grid,
  .products-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-card,
  .product-item,
  .card-product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .product-card img,
  .product-item img,
  .card-product img {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .product-card .product-image,
  .product-item .product-image,
  .card-product .product-image {
    min-height: auto !important;
    height: auto !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
  }

  .product-card h3,
  .product-item h3,
  .card-product h3 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .product-card .price,
  .product-item .price,
  .card-product .price {
    font-size: 24px !important;
  }

  /* FICHA PRODUCTO */
  .product-page-layout,
  .product-detail-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-side-nav {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
  }

  .product-gallery,
  .product-info {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-main-image-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 18px !important;
  }

  .main-product-img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: contain !important;
  }

  .product-info h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: .9 !important;
    letter-spacing: -1.5px !important;
  }

  .product-actions-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .product-actions-row .btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* PAGINAS INTERNAS */
  .quienes-intro-grid,
  .quienes-story-grid,
  .familia-grid,
  .blog-grid,
  .contact-layout,
  .auth-layout,
  .account-layout,
  .public-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .quienes-image-card,
  .quienes-content-card,
  .familia-card,
  .blog-card,
  .public-card,
  .contact-form-card,
  .auth-card,
  .cart-summary-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .quienes-image-card img,
  .familia-image img,
  .blog-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* NEWSLETTER */
  .newsletter,
  .newsletter-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .newsletter-inner {
    display: block !important;
    padding: 24px 18px !important;
  }

  .newsletter h2 {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: .95 !important;
  }

  .newsletter p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .newsletter form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .newsletter input,
  .newsletter button {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }

  /* FOOTER */
  .site-footer,
  .footer {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .footer-grid,
  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .footer-logo img {
    max-width: 150px !important;
    height: auto !important;
  }

  /* LEGALES */
  .legal-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .legal-card,
  .legal-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .legal-card {
    padding: 22px 16px !important;
  }

  .legal-card h2 {
    font-size: clamp(26px, 8vw, 38px) !important;
  }

  .legal-card p,
  .legal-card li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 420px) {

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero h1,
  .home-hero h1,
  .page-hero h1,
  .category-hero h1 {
    font-size: clamp(31px, 10vw, 42px) !important;
    letter-spacing: -1.4px !important;
  }

  .eyebrow,
  .eyebrow-dark,
  .hero .eyebrow,
  .home-hero .eyebrow,
  .page-hero .eyebrow {
    font-size: 10px !important;
    padding: 7px 9px !important;
  }

  .benefits-layout,
  .why-layout,
  .benefits-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .benefit-card,
  .why-card {
    padding: 13px 10px !important;
  }

  .benefit-card h3,
  .why-card h3 {
    font-size: 15px !important;
  }

  .benefit-card p,
  .why-card p {
    font-size: 12px !important;
  }

  .product-card img,
  .product-item img,
  .card-product img {
    max-height: 360px !important;
  }

  .hero-card,
  .home-hero-card,
  .hero-highlight,
  .skate-hero-card {
    max-width: calc(100vw - 28px) !important;
  }
}

@media (max-width: 768px) {
  main,
  section,
  article,
  aside,
  div {
    max-width: 100%;
  }

  table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }
}

/* =====================================================
   TESH-SB - FIX MOBILE HERO + BENEFICIOS 3 COLUMNAS
   Pegar al FINAL de /assets/css/mobile-fix-final.css
   o al FINAL de /assets/css/main.css
===================================================== */

/* =====================================================
   1) HERO PRINCIPAL MOBILE: TITULOS MUCHO MAS PEQUEÑOS
===================================================== */

@media (max-width: 768px) {

  .home-hero,
  .hero,
  .page-hero {
    min-height: 360px !important;
    padding: 32px 0 28px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .home-hero .container,
  .hero .container,
  .page-hero .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .home-hero .eyebrow,
  .hero .eyebrow,
  .page-hero .eyebrow {
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: .45px !important;
    padding: 6px 8px !important;
    margin-bottom: 9px !important;
    max-width: 245px !important;
    transform: rotate(-2deg) !important;
  }

  .home-hero h1,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(24px, 8.5vw, 34px) !important;
    line-height: .88 !important;
    letter-spacing: -1.2px !important;
    max-width: 310px !important;
    margin-bottom: 10px !important;
  }

  .home-hero p,
  .hero p,
  .page-hero p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 300px !important;
    margin-bottom: 12px !important;
  }

  .home-hero .btn,
  .hero .btn,
  .page-hero .btn {
    font-size: 10px !important;
    padding: 10px 12px !important;
    min-height: 38px !important;
  }

  .home-hero-actions,
  .hero-actions,
  .hero-buttons {
    max-width: 230px !important;
    gap: 8px !important;
  }

  .home-hero-card,
  .hero-card,
  .hero-highlight,
  .skate-hero-card {
    max-width: 260px !important;
    padding: 12px 12px !important;
    margin-top: 14px !important;
  }

  .home-hero-card h2,
  .hero-card h2,
  .hero-highlight h2,
  .skate-hero-card h2 {
    font-size: 18px !important;
    line-height: .95 !important;
    margin-bottom: 6px !important;
  }

  .home-hero-card p,
  .hero-card p,
  .hero-highlight p,
  .skate-hero-card p {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
}

/* Pantallas muy chicas */
@media (max-width: 420px) {

  .home-hero,
  .hero,
  .page-hero {
    min-height: 330px !important;
    padding: 26px 0 24px !important;
  }

  .home-hero h1,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(22px, 8vw, 30px) !important;
    max-width: 275px !important;
    line-height: .88 !important;
  }

  .home-hero p,
  .hero p,
  .page-hero p {
    font-size: 10px !important;
    max-width: 270px !important;
  }

  .home-hero .eyebrow,
  .hero .eyebrow,
  .page-hero .eyebrow {
    font-size: 7.5px !important;
    max-width: 220px !important;
  }

  .home-hero-card,
  .hero-card,
  .hero-highlight,
  .skate-hero-card {
    max-width: 235px !important;
  }
}

/* =====================================================
   2) BENEFICIOS: MANTENER LOOK DE WEB EN 3 COLUMNAS
      Estructura esperada:
      izquierda tarjetas / centro tabla / derecha tarjetas
===================================================== */

@media (max-width: 768px) {

  .benefits-section,
  .why-section {
    overflow: hidden !important;
  }

  .benefits-section .container,
  .why-section .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Contenedor principal de beneficios en 3 columnas */
  .benefits-layout,
  .why-layout,
  .benefits-columns,
  .why-columns {
    display: grid !important;
    grid-template-columns: 1fr 92px 1fr !important;
    gap: 7px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Columnas laterales */
  .benefits-left,
  .benefits-right,
  .why-left,
  .why-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Centro con tabla */
  .benefits-center,
  .why-center,
  .benefits-board,
  .why-board {
    width: 92px !important;
    max-width: 92px !important;
    min-width: 92px !important;
    margin: 0 auto !important;
    align-self: center !important;
    grid-column: auto !important;
  }

  .benefits-center img,
  .why-center img,
  .benefits-board img,
  .why-board img {
    width: 92px !important;
    max-width: 92px !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Si tu HTML no tiene columnas nombradas y usa grid directo */
  .benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr 92px 1fr !important;
    gap: 7px !important;
    align-items: center !important;
  }

  /* Tarjetas pequeñas */
  .benefit-card,
  .why-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 9px 7px !important;
    border-right-width: 4px !important;
    border-bottom-width: 4px !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,.16) !important;
  }

  .benefit-card span,
  .why-card span {
    font-size: 8px !important;
    padding: 4px 5px !important;
    margin-bottom: 6px !important;
  }

  .benefit-card h3,
  .why-card h3 {
    font-size: 10px !important;
    line-height: 1.02 !important;
    letter-spacing: -.25px !important;
    margin: 5px 0 4px !important;
  }

  .benefit-card p,
  .why-card p {
    font-size: 7.8px !important;
    line-height: 1.32 !important;
    margin: 0 !important;
  }

  /* Encabezado de la sección más compacto */
  .benefits-section .section-head,
  .why-section .section-head {
    margin-bottom: 16px !important;
  }

  .benefits-section .section-head h2,
  .why-section .section-head h2 {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: .9 !important;
    max-width: 330px !important;
  }

  .benefits-section .section-head p,
  .why-section .section-head p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 330px !important;
  }

  .benefits-section .eyebrow,
  .benefits-section .eyebrow-dark,
  .why-section .eyebrow,
  .why-section .eyebrow-dark {
    font-size: 8px !important;
    padding: 6px 8px !important;
    max-width: 235px !important;
  }
}

/* Pantallas ultra chicas: sigue en 3 columnas, más compacto */
@media (max-width: 420px) {

  .benefits-layout,
  .why-layout,
  .benefits-columns,
  .why-columns,
  .benefits-grid {
    grid-template-columns: 1fr 78px 1fr !important;
    gap: 5px !important;
  }

  .benefits-center,
  .why-center,
  .benefits-board,
  .why-board {
    width: 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
  }

  .benefits-center img,
  .why-center img,
  .benefits-board img,
  .why-board img {
    width: 78px !important;
    max-width: 78px !important;
    max-height: 260px !important;
  }

  .benefit-card,
  .why-card {
    padding: 8px 6px !important;
  }

  .benefit-card h3,
  .why-card h3 {
    font-size: 9px !important;
  }

  .benefit-card p,
  .why-card p {
    font-size: 7px !important;
    line-height: 1.25 !important;
  }

  .benefit-card span,
  .why-card span {
    font-size: 7px !important;
    padding: 3px 5px !important;
  }
}

/* =====================================================
   3) CORRECCION SI EL FIX ANTERIOR FORZO 2 COLUMNAS
===================================================== */

@media (max-width: 768px) {
  .benefits-layout .benefit-card,
  .why-layout .why-card,
  .benefits-columns .benefit-card,
  .why-columns .why-card {
    grid-column: auto !important;
  }
}