/* ============================================================
   RESPONSIVE MOBILE FIX — PanalBit
   Full audit fix: ≤768px breakpoint
   Covers: honey ornaments, confianza hex, por-que, clientes,
   panalsuite section, demo section, stats, carousels, logo, footer
============================================================ */

/* ─── 1. HONEY ORNAMENTS — scale down on mobile, don't hide ──
   Keep them visible but make them smaller and push them to corners
   so they don't overlap text                                        */
@media (max-width: 768px) {
  .honey-ornament {
    transform: scale(0.55) !important;
    transform-origin: top right;
    opacity: 0.5 !important;
    right: 0.5rem !important;
    top: 0.5rem !important;
    left: auto !important;
  }
  /* For left-aligned ornaments specifically */
  .honey-ornament[style*="left:2rem"],
  .honey-ornament[style*="left: 2rem"] {
    transform-origin: top left;
    left: 0.25rem !important;
    right: auto !important;
  }
}

/* ─── 2. HERO ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero {
    padding-top: 7rem !important;
    padding-bottom: 4rem !important;
    min-height: 100svh;
  }
  #hero-hook {
    padding-inline: 1.25rem !important;
  }
  .hero-eyebrow {
    font-size: 0.6rem !important;
    max-width: 90% !important;
    margin-inline: auto;
    line-height: 1.6 !important;
  }
  #hero-hook .line1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  #hero-hook .line2 {
    font-size: clamp(1.15rem, 5vw, 1.6rem) !important;
    line-height: 1.35 !important;
    max-width: 95% !important;
  }
  #hero-hook .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem !important;
  }
  #hero-hook .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── 3. LOGO HEADER ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .logo-mask {
    width: 2.8rem !important;
    height: 2.3rem !important;
    transition: none !important;
  }
  .brand-text {
    font-size: 1.4rem !important;
    transition: none !important;
  }
  /* Kill the scroll transition on mobile — keep it compact always */
  #hdr.scrolled .brand-text {
    font-size: 1.4rem !important;
  }
  #hdr.scrolled .nav-logo .logo-mask {
    width: 2.8rem !important;
    height: 2.3rem !important;
  }
  .nav-logo, .ftr-logo {
    filter: drop-shadow(0 2px 6px rgba(225, 166, 25, 0.4)) !important;
    transform: none !important;
  }
}

/* ─── 4. PANALSUITE SECTION (Product grid) ──────────────────── */
@media (max-width: 768px) {
  #panalsuite {
    padding-block: 3rem 4rem !important;
    overflow: hidden !important;
  }
  /* Kill the deco blobs that overflow */
  #panalsuite .prod-deco {
    display: none !important;
  }
  /* Kill the honeycomb SVG background from overflowing */
  #panalsuite-bg-pattern {
    opacity: 0.5 !important;
  }
  /* Glow orbs */
  .hero-glow-1, .hero-glow-2 {
    width: 60vw !important;
    height: 60vw !important;
    opacity: 0.15 !important;
  }
  /* Product grid → single column, image on top */
  .prod-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .vis-col {
    order: -1 !important;
  }
  /* Make the dashboard image normal width on mobile */
  .sladesk-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0.75rem !important;
  }
  /* Feature bullet cards */
  .prod-grid > div:last-child > div[style*="flex-direction:column"] > div {
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
  }
  /* Buttons row */
  .prod-grid div[style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .prod-grid div[style*="flex-wrap:wrap"] a {
    text-align: center;
    justify-content: center;
  }
}

/* ─── 4b. SLADESK SECTION ───────────────────────────────────── */
@media (max-width: 768px) {
  #sladesk {
    padding-block: 3rem 4rem !important;
    overflow: hidden !important;
  }
  #sladesk .prod-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #sladesk .vis-col {
    order: -1 !important;
  }
  #sladesk .sladesk-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  #sladesk div[style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #sladesk div[style*="flex-wrap:wrap"] a {
    text-align: center;
    justify-content: center;
  }
}

/* ─── 13. SLADESK ANIMATED DASHBOARD (mobile) ───────────────── */
@media (max-width: 768px) {
  .sd-dashboard {
    max-width: 100% !important;
    border-radius: 0.875rem !important;
  }
  .sd-body {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Show only the first two columns on mobile */
  .sd-col:last-child {
    display: none !important;
  }
  .sd-col {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 0.75rem !important;
  }
  .sd-col:last-of-type {
    border-bottom: none !important;
  }
  .sd-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .sd-stats .sd-stat:last-child {
    display: none !important;
  }
  .sd-ticket-title {
    font-size: 0.7rem !important;
  }
  .sd-topbar {
    padding: 0.6rem 1rem !important;
  }
  .sd-title {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 768px) {
  #confianza {
    padding-block: 3rem !important;
    overflow: hidden !important;
  }
  /* Grid → single column */
  #confianza > .container > div {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  /* Section header text */
  #confianza .section-header h2 {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }
  /* Kill the hexagons from being absolutely positioned out of flow */
  .split-hex-wrapper {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    position: relative !important;
  }
  /* Override absolute positioning on hexagons */
  .hex-cell {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 200px !important;
    height: 228px !important;
  }
  .hex-cell:hover {
    transform: translateY(-4px) !important;
  }
  /* No hover transform interference */
  .hex-1, .hex-2 {
    transform: none !important;
  }
  /* Cert images smaller on mobile */
  .cert-icon.img-cert {
    width: 60px !important;
  }
  .cert-title {
    font-size: 1rem !important;
  }
  /* Honeycomb bg — hide on mobile to avoid overflow issues */
  #confianza .hero-hex-svg {
    display: none !important;
  }
}

/* ─── 6. POR QUÉ PANALBIT ───────────────────────────────────── */
@media (max-width: 768px) {
  #por-que {
    padding-block: 3rem !important;
    overflow: hidden !important;
  }
  /* Grid → single column */
  #por-que > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Hide honeycomb background on mobile to avoid overflow */
  #por-que .hero-hex-svg {
    display: none !important;
  }
  /* Deco blobs behind bounds */
  #por-que .prod-deco {
    display: none !important;
  }
  /* Heading */
  #por-que .section-header h2 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }
  /* Law warning card */
  #por-que div[style*="background:linear-gradient(135deg,#FFF7ED"] {
    padding: 1.25rem !important;
    font-size: 0.9rem !important;
  }
  /* Diferenciadores card */
  #por-que div[style*="background:#ffffff"] {
    padding: 1.5rem 1.25rem !important;
    border-radius: 1rem !important;
  }
}

/* ─── 7. CLIENTES & TRACCIÓN (#clientes) ────────────────────── */
@media (max-width: 768px) {
  #clientes {
    padding-block: 2.5rem !important;
  }
  /* Section header */
  #clientes .section-header h2 {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }
  /* Stats row → 2 columns grid on mobile */
  #clientes .reveal[style*="display:flex; flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 1rem !important;
    padding: 1.5rem 0 !important;
  }
  /* Stat numbers */
  #clientes .reveal[style*="display:flex; flex-wrap:wrap"] > div > div:first-child {
    font-size: 2.5rem !important;
  }
  /* Stat labels */
  #clientes .reveal[style*="display:flex; flex-wrap:wrap"] > div > div:last-child {
    font-size: 0.875rem !important;
  }
  /* Carousels */
  .client-marquee {
    margin-inline: -1rem;
  }
  .marquee-logo {
    height: 28px !important;
    max-width: 100px !important;
  }
  .marquee-track {
    gap: 2rem !important;
    animation-duration: 18s !important;
  }
  /* Carousel titles */
  #clientes h3 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ─── 8. DEMO SECTION (CTA) ──────────────────────────────────── */
@media (max-width: 768px) {
  #demo {
    padding-block: 3rem !important;
  }
  .demo-wrap {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .demo-copy h2 {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  .demo-copy p {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
  }
  .demo-form-card {
    padding: 2.5rem 1.5rem !important;
    border-radius: 1.25rem !important;
  }
  /* WhatsApp button full width fix */
  .demo-form-card a.dfc-submit {
    font-size: 1rem !important;
    padding: 1rem !important;
  }
  /* Contact links */
  #demo div[style*="flex-direction:column"] a {
    font-size: 0.9rem !important;
    gap: 0.65rem !important;
  }
}

/* ─── 9. FOOTER ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ftr-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ftr-logo .logo-mask {
    width: 2.2rem !important;
    height: 1.8rem !important;
  }
  .ftr-logo .brand-text {
    font-size: 1.2rem !important;
  }
  .ftr-desc {
    max-width: 100% !important;
    font-size: 0.875rem !important;
  }
  .ftr-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
}

/* ─── 10. SOLUCIONES PAGES (Sector cards inside subpages) ──── */
@media (max-width: 768px) {
  /* Mega menu is hidden on mobile — handled by drawer already */
  .nav-dropdown {
    display: none !important;
  }

  /* Generic section containers used in solution pages */
  .sol-container {
    grid-template-columns: 1fr !important;
  }
  .sol-left {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }
}

/* ─── 11. GENERAL OVERFLOW PROTECTION ───────────────────────── */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
  }
  .container {
    padding-inline: 1.25rem !important;
  }
  /* All section headers */
  .section-header h2 {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
  /* Pill labels */
  .pill {
    font-size: 0.7rem !important;
  }
  /* Any absolutely-positioned decorative SVGs that might overflow */
  section > svg[style*="position:absolute"],
  section > div[class*="prod-deco"] {
    overflow: hidden;
    pointer-events: none;
  }
}

/* ─── 12. TABLET (769–1024px) — minor tweaks ─────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  #confianza > .container > div {
    gap: 2.5rem !important;
  }
  .hex-cell {
    width: 210px !important;
    height: 240px !important;
  }
  .demo-wrap {
    gap: 3rem !important;
  }
  #por-que > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}