/* ================================================================
   MADMED — Responsive Fixes
   Comprehensive mobile/tablet responsive overrides
   Covers: 344px (Galaxy Z Fold 5) to 1024px (iPad Pro)
   ================================================================ */

/* ── Global: Prevent horizontal scroll ──────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── NAVBAR ──────────────────────────────────────────────────── */

/* Make sure nav content doesn't overflow on small screens */
nav .max-w-7xl {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 640px) {
  nav .max-w-7xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Logo sizing for small screens */
@media (max-width: 360px) {
  nav img[alt*="MADMED"] {
    height: 32px !important;
    max-height: 32px !important;
  }
}

@media (max-width: 430px) {
  nav img[alt*="MADMED"] {
    height: 36px !important;
    max-height: 36px !important;
  }
}

/* Ensure hamburger and cart buttons have proper touch targets */
nav button {
  min-width: 44px;
  min-height: 44px;
}

/* Mobile menu: ensure proper background and spacing */
@media (max-width: 1023px) {
  nav + div[class*="fixed"][class*="inset-x-0"],
  div[class*="fixed"][class*="inset-x-0"][class*="top-20"] {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile menu container */
  div[class*="fixed"][class*="inset-x-0"][class*="top-20"] > div {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}

/* ── HERO SECTION (#inicio) ─────────────────────────────────── */

/* Fix hero title sizes for small screens */
#inicio h1,
section[id="inicio"] h1 {
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 360px) {
  #inicio h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  #inicio .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 414px) {
  #inicio h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 430px) {
  #inicio h1 {
    font-size: 2.125rem !important;
    line-height: 1.2 !important;
  }
}

/* Hero padding: less top padding on small screens to make room */
@media (max-width: 640px) {
  #inicio .pt-32 {
    padding-top: 6rem !important;
  }

  #inicio .pb-24 {
    padding-bottom: 7rem !important;
  }
}

@media (max-width: 430px) {
  #inicio .pt-32 {
    padding-top: 5.5rem !important;
  }

  #inicio .pb-24 {
    padding-bottom: 7.5rem !important;
  }
}

/* Hero CTA buttons: smaller on mobile */
@media (max-width: 640px) {
  #inicio .px-8 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  #inicio .py-6 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }

  #inicio button.text-lg,
  #inicio a.text-lg,
  #inicio [class*="text-lg"][class*="rounded-xl"] {
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 360px) {
  #inicio .px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  #inicio .py-6 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* Hero CTA container: proper spacing on mobile */
@media (max-width: 640px) {
  #inicio .mb-10 {
    margin-bottom: 1.5rem !important;
  }

  #inicio .mb-6 {
    margin-bottom: 1rem !important;
  }

  #inicio .mb-8 {
    margin-bottom: 1.25rem !important;
  }
}

/* Hero badge - smaller on very small screens */
@media (max-width: 360px) {
  #inicio .rounded-full[class*="bg-sky-100"] {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
  }
}

/* Hero certifications - wrap properly */
@media (max-width: 430px) {
  #inicio .flex-wrap {
    gap: 0.5rem !important;
  }

  #inicio .flex-wrap .text-sm {
    font-size: 0.75rem !important;
  }
}

/* ── HERO MOBILE STATS BAR ──────────────────────────────────── */

/* Positioned at bottom of hero - prevent overlap with content */
@media (max-width: 1023px) {
  #inicio > .absolute.bottom-8,
  #inicio .absolute[class*="bottom-8"][class*="lg:hidden"] {
    bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media (max-width: 430px) {
  /* Stats card inner padding */
  #inicio .absolute[class*="bottom"] .glass-card-strong,
  #inicio .absolute[class*="bottom"] .rounded-2xl {
    padding: 0.625rem !important;
  }

  /* Stats grid gaps */
  #inicio .absolute[class*="bottom"] .grid-cols-2 {
    gap: 0.375rem !important;
  }

  /* Stats numbers */
  #inicio .absolute[class*="bottom"] .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Stats labels */
  #inicio .absolute[class*="bottom"] .text-xs {
    font-size: 0.625rem !important;
  }
}

@media (max-width: 360px) {
  #inicio .absolute[class*="bottom"] .text-2xl {
    font-size: 1.125rem !important;
  }

  #inicio .absolute[class*="bottom"] .glass-card-strong,
  #inicio .absolute[class*="bottom"] .rounded-2xl {
    padding: 0.5rem !important;
  }
}

/* ── SERVICES SECTION (#servicios) ──────────────────────────── */

/* Section padding */
@media (max-width: 640px) {
  #servicios {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #servicios .mb-16 {
    margin-bottom: 2rem !important;
  }
}

/* Services title */
@media (max-width: 360px) {
  #servicios h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  #servicios .text-lg {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 430px) {
  #servicios h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
}

/* Service cards grid: single column on small mobile */
@media (max-width: 640px) {
  #servicios .grid {
    gap: 1.25rem !important;
  }
}

/* Service card internal spacing */
@media (max-width: 430px) {
  #servicios .p-6 {
    padding: 1rem !important;
  }

  /* Service card image height */
  #servicios .h-48 {
    height: 10rem !important;
  }

  /* Service card title */
  #servicios .text-xl {
    font-size: 1.0625rem !important;
  }

  /* Features text */
  #servicios .text-sm {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 360px) {
  #servicios .h-48 {
    height: 9rem !important;
  }

  #servicios .p-6 {
    padding: 0.875rem !important;
  }
}

/* Service card button: proper touch target */
#servicios button,
#servicios [role="button"] {
  min-height: 44px;
}

/* ── PROCESS SECTION (#proceso) ─────────────────────────────── */

/* Section padding */
@media (max-width: 640px) {
  #proceso,
  .proceso-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #proceso .mb-20 {
    margin-bottom: 2.5rem !important;
  }
}

/* Process title */
@media (max-width: 360px) {
  #proceso h2,
  .proceso-section .pr-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 430px) {
  #proceso h2,
  .proceso-section .pr-title {
    font-size: 1.75rem !important;
  }
}

/* Process step cards: prevent overflow on small screens */
@media (max-width: 640px) {
  #proceso .space-y-16 {
    margin-top: 0 !important;
  }

  #proceso .space-y-16 > * + * {
    margin-top: 2.5rem !important;
  }

  /* Process glass cards */
  #proceso .glass-card-strong,
  #proceso .rounded-3xl {
    padding: 1.25rem !important;
  }

  #proceso .text-2xl {
    font-size: 1.25rem !important;
  }
}

/* Mobile timeline fixes */
@media (max-width: 430px) {
  .pr-m-step {
    gap: 0.75rem !important;
  }

  .pr-m-node {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.875rem !important;
  }

  .pr-mobile-line,
  .pr-mobile-progress {
    left: 19px !important;
  }

  .pr-m-card {
    padding: 0.75rem 0.75rem 0.75rem 0.875rem !important;
  }

  .pr-m-title {
    font-size: 0.875rem !important;
  }

  .pr-m-desc {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 360px) {
  .pr-m-node {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.8125rem !important;
  }

  .pr-mobile-line,
  .pr-mobile-progress {
    left: 17px !important;
  }
}

/* ── TECHNOLOGY SECTION (#tecnologia) ───────────────────────── */

@media (max-width: 640px) {
  #tecnologia,
  .tc-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 360px) {
  #tecnologia h2,
  .tc-section .tc-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 430px) {
  #tecnologia h2,
  .tc-section .tc-title {
    font-size: 1.75rem !important;
  }
}

/* Tech cards: proper spacing on mobile */
@media (max-width: 430px) {
  .tc-card {
    padding: 1.25rem 1rem 1rem !important;
  }

  .tc-illust {
    width: 130px !important;
    height: 130px !important;
  }

  .tc-card-title {
    font-size: 0.9375rem !important;
  }

  .tc-spec-val {
    font-size: 0.75rem !important;
  }

  .tc-spec-label {
    font-size: 0.625rem !important;
  }
}

@media (max-width: 360px) {
  .tc-illust {
    width: 110px !important;
    height: 110px !important;
  }

  .tc-specs {
    gap: 0.25rem !important;
  }

  .tc-spec {
    padding: 0.5rem 0.25rem !important;
  }
}

/* Validation block on mobile */
@media (max-width: 430px) {
  .tc-validation {
    padding: 1rem !important;
  }

  .tc-val-item {
    font-size: 0.75rem !important;
  }

  .tc-val-list {
    gap: 0.5rem 0.75rem !important;
  }
}

/* ── CONTACT SECTION (#contacto) ────────────────────────────── */

@media (max-width: 640px) {
  #contacto {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #contacto .mb-16 {
    margin-bottom: 2rem !important;
  }
}

/* Contact title */
@media (max-width: 360px) {
  #contacto h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  #contacto .text-lg {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 430px) {
  #contacto h2 {
    font-size: 1.75rem !important;
  }
}

/* Contact grid: stack on mobile with less gap */
@media (max-width: 1023px) {
  #contacto .grid[class*="lg:grid-cols-5"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #contacto .lg\:col-span-2,
  #contacto [class*="lg:col-span-2"] {
    grid-column: span 1 !important;
  }

  #contacto .lg\:col-span-3,
  #contacto [class*="lg:col-span-3"] {
    grid-column: span 1 !important;
  }
}

/* Contact info cards on mobile */
@media (max-width: 430px) {
  #contacto .glass-card-strong,
  #contacto .rounded-2xl[class*="p-5"] {
    padding: 0.875rem !important;
  }

  /* Contact icon containers */
  #contacto .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
  }

  #contacto .w-12.h-12 svg,
  #contacto .w-12.h-12 .w-5 {
    width: 1rem !important;
    height: 1rem !important;
  }
}

/* Form inputs: ensure they don't overflow */
@media (max-width: 640px) {
  #contacto input,
  #contacto select,
  #contacto textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  /* Form grid: stack fields on very small screens */
  #contacto form .grid[class*="sm:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 640px) {
  #contacto form .grid[class*="sm:grid-cols-2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form container: proper padding */
@media (max-width: 430px) {
  #contacto form {
    gap: 1rem !important;
  }

  #contacto form .space-y-6 > * + * {
    margin-top: 1rem !important;
  }

  /* Submit button area */
  #contacto form button[type="submit"],
  #contacto form [class*="bg-green"] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }
}

/* WhatsApp card in contact section */
@media (max-width: 430px) {
  #contacto a[href*="wa.me"] .flex {
    gap: 0.75rem !important;
  }
}

/* ── FOOTER ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  footer .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Footer grid: stack with less gap */
  footer .grid[class*="lg:grid-cols"] {
    gap: 2rem !important;
  }

  /* Footer sub-grid */
  footer .grid[class*="sm:grid-cols-3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 360px) {
  footer .grid[class*="sm:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Footer logo in footer */
@media (max-width: 430px) {
  footer img[alt*="MADMED"] {
    height: 36px !important;
    max-height: 36px !important;
  }
}

/* Footer bottom bar */
@media (max-width: 430px) {
  footer .text-sm {
    font-size: 0.75rem !important;
  }

  footer .gap-4 {
    gap: 0.75rem !important;
  }
}

/* Social icons: proper touch targets */
footer a[class*="w-10"][class*="h-10"],
footer a[class*="rounded-full"] {
  min-width: 44px;
  min-height: 44px;
}

/* ── WHATSAPP FLOATING BUTTON ───────────────────────────────── */

/* Ensure it doesn't overlap with other elements */
@media (max-width: 430px) {
  a[href*="wa.me"][class*="fixed"],
  div[class*="fixed"][class*="bottom"][class*="right"] a[href*="wa.me"] {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* ── SCROLL TO TOP BUTTON ───────────────────────────────────── */
@media (max-width: 430px) {
  button[class*="fixed"][class*="bottom"][class*="right"],
  div[class*="fixed"][class*="bottom-8"][class*="right-8"] button {
    bottom: 1rem !important;
    right: 4.5rem !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── GLASS CARD STYLES: ensure no overflow ──────────────────── */
.glass-card,
.glass-card-strong {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── DECORATIVE ELEMENTS: prevent overflow ──────────────────── */
@media (max-width: 768px) {
  /* Large decorative gradient circles in hero */
  #inicio .absolute[class*="rounded-full"][class*="w-[600px]"],
  #inicio .absolute[class*="rounded-full"][class*="w-[500px]"],
  #inicio .absolute[class*="rounded-full"][class*="w-[800px]"] {
    display: none !important;
  }
}

/* ── IMAGES: responsive behavior ────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* Preserve explicit heights for card images */
#servicios .h-48 img,
#servicios [class*="h-48"] img {
  height: 100%;
  object-fit: cover;
}

/* ── CART DRAWER: mobile friendly ───────────────────────────── */
@media (max-width: 430px) {
  div[class*="fixed"][class*="right-0"][class*="max-w-md"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── TYPOGRAPHY: prevent text overflow globally ─────────────── */
@media (max-width: 430px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Reduce large gap values on mobile */
  .gap-12 {
    gap: 2rem !important;
  }

  .gap-8 {
    gap: 1.5rem !important;
  }
}

@media (max-width: 360px) {
  .gap-12 {
    gap: 1.5rem !important;
  }

  .gap-8 {
    gap: 1.25rem !important;
  }
}

/* ── TABLETS (768px - 1024px) ───────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Services grid: 2 columns on tablet */
  #servicios .grid[class*="md:grid-cols-2"] {
    gap: 1.25rem !important;
  }

  /* Contact section grid adjustments for tablet */
  #contacto .grid[class*="lg:grid-cols-5"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid on tablet */
  footer .grid[class*="lg:grid-cols-5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* Hero: slightly smaller text */
  #inicio h1 {
    font-size: 2.5rem !important;
  }
}

/* ── Surface Duo (540px) ────────────────────────────────────── */
@media (min-width: 431px) and (max-width: 540px) {
  #inicio h1 {
    font-size: 2.25rem !important;
  }

  #servicios h2,
  #proceso h2,
  #tecnologia h2,
  #contacto h2 {
    font-size: 1.875rem !important;
  }
}

/* ── LANDSCAPE MODE FIXES ───────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  #inicio {
    min-height: auto !important;
  }

  #inicio .min-h-screen {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  /* Stats bar: adjust position in landscape */
  #inicio .absolute[class*="bottom-8"][class*="lg:hidden"] {
    position: relative !important;
    bottom: auto !important;
    margin-top: 1rem !important;
  }
}

/* ── TOUCH TARGET MINIMUM SIZES ─────────────────────────────── */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="submit"], select {
    min-height: 44px;
  }

  /* Nav links in mobile menu */
  nav a[class*="rounded-xl"] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── SMOOTH THEME TRANSITIONS ───────────────────────────────── */
body,
nav,
#inicio,
#servicios,
#proceso,
#tecnologia,
#contacto,
footer,
.glass-card,
.glass-card-strong,
.tc-card,
.pr-card,
.pr-m-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── iOS SPECIFIC FIXES ─────────────────────────────────────── */

/* Prevent iOS from zooming on input focus */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 430px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Fix iOS momentum scrolling */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   MADMED — Highlight 24/7 stat in hero
   ================================================================ */
.madmed-stat-highlight {
  position: relative;
  background: rgba(14,165,233,0.12);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  animation: madmed-pulse-glow 2s ease-in-out infinite;
}
@keyframes madmed-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.35); }
  50% { box-shadow: 0 0 20px 4px rgba(14,165,233,0.25); }
}
.madmed-stat-highlight .text-2xl,
.madmed-stat-highlight .text-3xl {
  color: #0284c7 !important;
  font-weight: 800 !important;
}