/* ═══════════════════════════════════════════════════
   ARCHIVO: css/responsive.css  —  Grupo Mira Almería
   Tablet → 1024px  |  Móvil → 768px  |  Móvil S → 480px
═══════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ─────────────────────────── */
@media (max-width: 1024px) {
  .ferias-grid      { grid-template-columns: repeat(2,1fr); }
  .trust-grid       { grid-template-columns: repeat(2,1fr); }
  .trust-item       { border-right:none; border-bottom:1px solid rgba(255,255,255,0.15); }
  .trust-item:last-child, .trust-item:nth-child(2) { border-bottom:none; }
  .footer-grid      { grid-template-columns: repeat(2,1fr); gap:2rem; }
  .gallery-grid     { grid-template-columns: repeat(2,1fr); }
  .gallery-wide     { grid-column: span 2; }
}

/* ── MÓVIL (≤768px) ─────────────────────────── */
@media (max-width: 768px) {

  /* HEADER → mostrar hamburguesa, ocultar menú desktop */
  .main-nav, .lang-switcher { display:none; }
  .menu-toggle  { display:flex; }
  .mobile-menu  { display:flex; }

  /* TOPBAR → ocultar en móvil; el header sube a top:0 */
  .topbar       { display:none; }
  .site-header  { top:0; }

  /* HERO */
  .hero-title { font-size:2.2rem; }
  .hero-btns  { flex-direction:column; align-items:center; }
  .btn-primary, .btn-ghost { width:100%; max-width:280px; text-align:center; }

  /* MARCAS → 3 columnas en móvil */
  .brands-grid { gap:1rem; }
  .brand-item  { padding:0.75rem; }
  .brand-item img { height:44px; }

  /* FERIAS → 1 columna */
  .ferias-grid { grid-template-columns:1fr; }

  /* GALERÍA → 1 columna */
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:200px; }
  .gallery-wide { grid-column:span 1; }

  /* SOBRE EL GRUPO → 1 columna */
  .about-grid  { grid-template-columns:1fr; gap:2rem; }
  .about-image img { height:260px; }

  /* CONFIANZA → 2 columnas */
  .trust-grid { grid-template-columns:repeat(2,1fr); }

  /* FOOTER → 1 columna */
  .footer-grid { grid-template-columns:1fr; gap:2rem; padding:2.5rem 0; }
  .footer-brand p { max-width:100%; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
  .legal-links { flex-wrap:wrap; justify-content:center; gap:1rem; }

  /* CTA */
  .cta-btns { flex-direction:column; align-items:center; }
  .btn-cta-primary, .btn-cta-ghost { width:100%; max-width:300px; text-align:center; }

  /* COOKIES */
  .cookie-banner { flex-direction:column; align-items:flex-start; width:calc(100% - 24px); bottom:12px; }
  .cookie-actions { width:100%; }
  .btn-cookie-accept, .btn-cookie-reject { flex:1; text-align:center; }

  /* OCULTAR en móvil */
  .access-panel  { display:none; }
  .premium-cursor{ display:none; }
}

/* ── MÓVIL PEQUEÑO (≤480px) ─────────────────── */
@media (max-width: 480px) {
  .trust-grid { grid-template-columns:1fr; }
  .hero-title { font-size:1.8rem; }
  .brands-grid{ gap:0.75rem; }
  .brand-item img { height:36px; }
}

/* ── MOVIMIENTO REDUCIDO (accesibilidad) ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}
/* BLOQUE 1 · HERO TITLE · MOBILE */
@media (max-width: 768px) {
  .hero-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    line-height: 1.1;
  }

  .hero-sub {
    max-width: 100%;
  }
}

/* ── Vídeo ficha feria — mobile ─────────────── */
@media (max-width: 768px) {
  .feria-detalle-img {
    aspect-ratio: 4 / 3;   /* más vertical en móvil, más protagonismo */
  }
}

@media (max-width: 480px) {
  .feria-detalle-img {
    aspect-ratio: 3 / 2;
  }
}

/* ── Vídeo Toyo Ferial — mobile ─────────────── */
@media (max-width: 768px) {
  .feria-detalle-img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .feria-detalle-img {
    aspect-ratio: 3 / 2;
  }
}