/* ══════════════════════════════════════
   TABLET (≤ 1024px)
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .proyectos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .proyecto-card {
    height: 350px;
  }

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

  .valores-cert__grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   MOBILE (≤ 768px)
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --navbar-height: 64px;
    --container-padding: 1rem;
  }

  /* Navbar mobile: 2 columnas (logo + toggle) */
  .navbar__inner {
    display: flex;
    justify-content: space-between;
  }

  .navbar__toggle {
    display: flex;
  }

  /* Ocultar CTA desktop en mobile */
  .navbar > .navbar__inner > .navbar__cta {
    display: none;
  }

  /* Mostrar CTA mobile dentro del menú */
  .navbar__cta--mobile {
    display: inline-block;
  }

  .navbar__menu {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }

  .navbar__menu--open {
    transform: translateX(0);
  }

  .navbar__menu--open .navbar__link {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.05);
  }

  /* Hero */
  .hero {
    min-height: 500px;
  }

  .hero__title {
    font-size: 2rem;
  }

  /* Grids */
  .futuro__grid,
  .familias__grid {
    grid-template-columns: 1fr;
  }

  .futuro__img,
  .familias__img {
    height: 250px;
  }

  .proyectos__header {
    flex-direction: column;
  }

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

  .proyecto-card {
    height: 300px;
  }

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

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

/* ══════════════════════════════════════
   SMALL MOBILE (≤ 480px)
   ══════════════════════════════════════ */
@media (max-width: 480px) {
  .valores__item {
    font-size: 1.25rem;
  }

  .valores__item--active {
    font-size: 1.5rem;
  }

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