/**
 * Ajustes responsivos transversales. Los componentes ya son mobile-first;
 * aquí se afinan casos que requieren simplificarse en pantallas pequeñas
 * (menos elementos decorativos, tipografía y espaciados de hero).
 * Breakpoints de referencia — ver variables.css:
 *   360 / 600 / 768 / 1024 / 1200 / 1440
 */

/* ---- Móviles pequeños (< 600px): simplificar decoración ---- */
@media (max-width: 599px) {
  .hero {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .hero__shape--two,
  .hero-interior__shape {
    display: none;
  }

  .hero__shape--one {
    width: 260px;
    height: 260px;
    top: -100px;
    right: -100px;
  }

  .hero__visual {
    margin-top: var(--space-lg);
  }

  .hero__mascot {
    width: min(78%, 340px);
    margin-inline: auto;
  }

  .hero__visual-background {
    inset: 4% 6%;
  }

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

  .bento-grid {
    gap: var(--space-sm);
  }

  .growth-path__dot {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-sm);
  }

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

/* ---- Tablet (600–1023px) ---- */
@media (min-width: 600px) and (max-width: 1023px) {
  .hero__grid {
    gap: var(--space-lg);
  }
}

/* ---- Escritorio grande (>= 1440px): más aire, sin dejar de usar el ancho ---- */
@media (min-width: 1440px) {
  .hero__title {
    letter-spacing: -0.02em;
  }
}

/* ---- Escritorio muy grande (>= 1800px): permitir que los contenedores
   anchos respiren un poco más en vez de quedarse fijos ---- */
@media (min-width: 1800px) {
  :root {
    --container-wide: 1640px;
  }
}

/* ---- Reglas de impresión mínimas ---- */
@media print {
  .site-header,
  .whatsapp-fab,
  .cookie-banner,
  .menu-backdrop,
  .hero__shape,
  .hero-interior__shape {
    display: none !important;
  }
}