/* ==========================================================================
   responsive.css - Adaptacion a pantallas pequenas
   GlaciarCMS - publish/css/responsive.css
   Debe cargarse SIEMPRE el ultimo: sus reglas corrigen a las anteriores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portatiles pequenos y tablets horizontales (hasta 1100 px)
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --pad-x: 32px; }

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

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

  .navbar__nav { gap: 20px; font-size: 12px; }

  .navbar__logo { height: 60px; }

  .navbar__name { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Tablets verticales (hasta 900 px)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px var(--pad-x);
  }

  .services,
  .works { padding: 80px var(--pad-x); }

  .contact__panel { padding: 64px 28px; }

  .footer__top { grid-template-columns: 1fr; gap: 32px; }

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

/* --------------------------------------------------------------------------
   Moviles (hasta 700 px)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    --pad-x: 20px;
    --nav-h: 72px;
  }

  /* La navegacion se pliega tras el boton hamburguesa */
  .navbar__toggle { display: flex; }

  .navbar__nav,
  .navbar__actions {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px var(--pad-x);
    background: rgba(15, 39, 71, .98);
    border-top: 1px solid rgba(245, 241, 232, .12);
  }

  .navbar.is-open .navbar__nav { display: flex; }

  .navbar.is-open .navbar__actions {
    display: flex;
    top: calc(var(--nav-h) + 220px);
  }

  .navbar__buttons { flex-direction: column; align-items: stretch; }

  .nav-btn { text-align: center; }

  .navbar__social { justify-content: center; }

  .navbar__logo { height: 48px; }

  .navbar__name { font-size: 19px; }

  .hero {
    height: auto;
    min-height: 78vh;
  }

  .hero__content { padding: 60px var(--pad-x) 90px; }

  .hero__subtitle { font-size: 16px; }

  .hero__buttons .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .hero__arrow { display: none; }

  .services__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .work-card { flex-basis: 260px; }

  .works__arrow { display: none; }

  .section-head { margin-bottom: 40px; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookies {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cookies__buttons { justify-content: flex-end; }

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