/* ============================================
   EVCARGO Services - Responsive y accesibilidad
   Media queries, fixes mobile/tablet, impresion y a11y
   ============================================ */

/* === RESPONSIVE === */

@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__visual {
    display: none;
  }

  .hero__text {
    margin: 0 auto var(--space-2xl);
  }

  .hero__stats {
    justify-content: center;
  }

  .btn-group {
    justify-content: center;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .feature-row--reverse {
    direction: ltr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --space-4xl: 3.5rem;
    --space-3xl: 2.5rem;
  }

  .container {
    padding: 0 var(--space-lg);
  }

  /* Mobile Nav */
  .header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
    transition: right var(--transition-base);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }

  .header__nav.open {
    right: 0;
  }

  .header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .header__links > li {
    width: 100%;
  }

  .header__links > li > a {
    padding: var(--space-md) 0;
    width: 100%;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: block;
    color: var(--white);
  }

  .header__phone {
    color: var(--white);
  }

  .header__links > li > a::after {
    display: none;
  }

  .dropdown::after {
    display: none;
  }

  .dropdown:hover .dropdown__menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .dropdown__menu {
    position: static;
    transform: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-sm);
    margin: var(--space-sm) 0;
    min-width: 100%;
    display: none;
    z-index: auto;
  }

  .dropdown.open .dropdown__menu {
    display: block;
  }

  .dropdown__menu a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem;
  }

  .dropdown__menu a:hover {
    background: rgba(201, 160, 66, 0.1) !important;
    color: var(--gold) !important;
  }

  .dropdown__toggle svg {
    transition: transform var(--transition-fast);
  }

  .dropdown.open .dropdown__toggle svg {
    transform: rotate(180deg);
  }

  .header__cta {
    flex-direction: column;
    width: 100%;
    margin-top: var(--space-lg);
  }

  .header__phone {
    font-size: 0.9rem;
  }

  .menu-toggle {
    display: flex;
  }

  .header__nav {
    z-index: 1002;
  }

  /* Hero Mobile */
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);
  }

  .hero .container {
    min-height: auto;
  }

  .hero__title {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }

  .hero__stats {
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
  }

  .hero__stat {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .hero__stat h3 {
    font-size: 1.6rem;
  }

  /* Grid adjustments */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .countries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-item {
    padding: var(--space-md);
  }

  .stat-item__number {
    font-size: 2rem;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plan-card--featured {
    transform: none;
  }

  .tracking-input-group {
    flex-direction: column;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 1.8rem;
  }

  .hero__text {
    font-size: 1rem;
  }

  .btn--lg {
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
  }

  .countries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card {
    padding: var(--space-xl);
  }

  .section-header h2 {
    font-size: 1.6rem;
  }

  .page-hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-2xl);
  }

  .page-hero h1 {
    font-size: 1.8rem;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* --- Print Styles --- */
@media print {
  .header, .footer, .whatsapp-float, .menu-toggle {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: var(--space-xl) 0;
  }

  .section {
    padding: var(--space-xl) 0;
  }

  body {
    color: #000;
    background: #fff;
  }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-children > * {
    opacity: 1;
    transform: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ============================================
   RESPONSIVE FIXES (mobile + tablet)
   ============================================ */

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

@media (max-width: 1024px) {
  /* Force single-column layouts earlier on tablet */
  .feature-modern,
  .why-grid,
  .contact-modern { grid-template-columns: 1fr !important; }

  .why-cards { grid-template-columns: repeat(2, 1fr); }

  .why-card:nth-child(even) { transform: none; }
  .why-card:nth-child(even):hover { transform: translateY(-6px); }

  .service-detail__benefits--row { flex-wrap: wrap; }
  .service-detail__benefits--row > * { flex: 1 1 260px; max-width: 360px; }
}

@media (max-width: 768px) {
  /* Header / mobile menu polish */
  .header__nav { height: 100dvh; padding-top: calc(var(--header-height) + var(--space-lg)); }
  body.menu-open { overflow: hidden; }

  /* Page hero spacing */
  .page-hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .page-hero p { font-size: 0.95rem; }

  /* Feature modern (image+text) */
  .feature-modern { gap: var(--space-xl); }
  .feature-modern__media { padding: 18px 18px 24px 0; }
  .feature-modern__media::before { left: 18px; bottom: 36px; border-radius: 18px; }
  .feature-modern__media::after { width: 80px; height: 80px; }
  .feature-modern__image-wrap { border-radius: 16px; }
  .feature-modern__image-wrap img { aspect-ratio: 16/10; }
  .feature-modern__badge {
    top: var(--space-md); left: var(--space-md);
    padding: 10px 14px;
  }
  .feature-modern__badge strong { font-size: 1.4rem; }
  .feature-modern__badge span { font-size: 0.65rem; }
  .feature-modern__pill {
    bottom: var(--space-md); right: var(--space-md);
    padding: 8px 14px; font-size: 0.75rem;
  }
  .feature-modern__pill svg { width: 14px; height: 14px; }
  .feature-modern__content h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* Why section */
  .why-section { padding: var(--space-3xl) 0; }
  .why-cards { grid-template-columns: 1fr; gap: var(--space-md); }
  .why-card { padding: var(--space-lg); }
  .why-card__num { font-size: 2.2rem; top: var(--space-sm); right: var(--space-md); }
  .why-stats { gap: var(--space-md); }
  .why-stat strong { font-size: 1.5rem; }

  /* Modern benefit cards (subpages) */
  .service-detail__benefits--modern .benefit-card {
    padding: var(--space-xl) var(--space-lg);
  }
  .service-detail__benefits--modern .benefit-card::before {
    font-size: 2.4rem;
    top: var(--space-sm);
    right: var(--space-md);
  }
  .service-detail__benefits--modern .benefit-card__icon,
  .service-detail__benefits--modern .benefit-card > svg {
    width: 56px; height: 56px; padding: 14px;
  }

  /* Contact modern */
  .contact-modern { border-radius: 18px; }
  .contact-modern__side,
  .contact-modern__form { padding: var(--space-xl); }
  .contact-modern__side h2 { font-size: 1.4rem; }
  .contact-modern__form h3 { font-size: 1.25rem; }
  .contact-modern__map iframe { height: 180px; }
  .contact-modern__cards { grid-template-columns: 1fr; }
  .contact-mini-card { padding: var(--space-md); }
  .contact-mini-card__icon { width: 44px; height: 44px; border-radius: 12px; }
  .contact-mini-card__icon svg { width: 20px; height: 20px; }
  .contact-mini-card strong { font-size: 0.85rem; }

  /* Generic safety */
  img, iframe, video { max-width: 100%; height: auto; }
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .btn { white-space: normal; }
  .btn-group { flex-wrap: wrap; }
  table { display: block; overflow-x: auto; }

  /* Section header text */
  .section-header h2,
  .section__header h2 { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
}

/* Mobile menu / dropdown hard fixes */
@media (max-width: 768px) {
  .header__nav {
    width: min(88%, 340px);
    max-width: 340px;
    padding: calc(var(--header-height, 80px) + var(--space-lg)) var(--space-lg) var(--space-2xl);
    overscroll-behavior: contain;
  }

  .header__links { gap: 0; width: 100%; }

  .header__links > li { width: 100%; }

  .dropdown { width: 100%; }

  .dropdown__toggle {
    width: 100%;
    justify-content: space-between;
  }

  .dropdown__menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
    margin: 0 0 var(--space-sm) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
  }

  .dropdown__menu a {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    white-space: normal;
    word-break: break-word;
    gap: 10px;
  }

  .dropdown__menu a svg { width: 16px; height: 16px; flex-shrink: 0; }

  .header__cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .header__cta .btn { width: 100%; text-align: center; justify-content: center; }
  .header__phone { justify-content: flex-start; }

  /* lang-toggle vs whatsapp-float collision */
  .whatsapp-float { right: 16px; bottom: 16px; }
  .lang-toggle { left: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .feature-modern__badge { padding: 8px 12px; }
  .feature-modern__badge strong { font-size: 1.2rem; }
  .feature-modern__pill span { display: none; }
  .feature-modern__pill { padding: 10px; border-radius: 50%; }

  .contact-modern__side,
  .contact-modern__form { padding: var(--space-lg); }

  .why-card { padding: var(--space-md); }
  .why-stat strong { font-size: 1.3rem; }

  .service-detail__benefits--modern .benefit-card { padding: var(--space-lg) var(--space-md); }
  .service-detail__benefits--modern .benefit-card::before { font-size: 2rem; }

  .btn--lg { padding: 0.8rem 1.4rem; font-size: 0.9rem; }

  .breadcrumb { font-size: 0.8rem; flex-wrap: wrap; }
}