/* === CELULARES (hasta 767px) === */
@media (max-width: 767px) {
  .logo {
    width: 120px;
  }

  .hero {
    height: auto;
  }

  .hero img {
    height: 250px;
  }

  .hero-text {
    position: static;
    margin-top: 10px;
    text-align: center;
  }

  nav a {
    display: block;
    margin: 10px 0;
  }

  section {
    padding: 1em;
  }

  .sucursal-card iframe {
    width: 100% !important;
    height: 250px;
  }

  .slider {
    max-width: 100%;
    height: 250px;
  }

  .slides img {
    height: 250px;
  }
}

/* === TABLETS (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo {
    width: 140px;
  }

  .hero {
    height: 350px;
  }

  .hero img {
    height: 350px;
  }

  .hero-text {
    left: 20px;
    bottom: 15px;
  }

  .sucursal-card iframe {
    width: 90% !important;
  }

  .slider {
    max-width: 90%;
    height: 350px;
  }

  .slides img {
    height: 350px;
  }
}

/* === ESCRITORIOS (1024px en adelante) === */
@media (min-width: 1024px) {
  .logo {
    width: 150px;
  }

  .hero {
    height: 450px;
  }

  .hero img {
    height: 500px;
  }

  .hero-text {
    left: 40px;
    bottom: 20px;
  }

  .sucursal-card iframe {
    width: 60% !important;
  }

  .slider {
    max-width: 600px;
    height: 400px;
  }

  .slides img {
    height: 400px;
  }
}

@media screen and (max-width: 768px) {
    .hero-text {
        left: 10px;
        right: 10px;
        font-size: 1em;
        padding: 8px;
    }

    .hero img {
        aspect-ratio: 16 / 10;
    }
}