/* Styles for medium screens (min-width: 768px) */

@media (min-width: 768px) {
    header {
        padding: 0 2.5rem;
    }
    .hero-text h2 {
        font-size: 2rem;
    }
    .hero-text p {
        font-size: 1.2rem;
    }

    /* Hamburger oculto en pantallas grandes */
    .hamburger {
        display: none;
    }

    /* Nav horizontal en desktop */
    nav ul.menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        position: static;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        min-width: unset;
        gap: 0.25rem;
    }

    nav ul.menu li {
        margin: 0;
    }

    nav ul.menu li a {
        font-family: var(--font-secondary);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ffffff;
        padding: 0.45rem 0.8rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 4px;
        transition: color 0.25s ease, border-bottom-color 0.25s ease,
                    background-color 0.25s ease;
    }

    nav ul.menu li a:hover {
        color: var(--tertiary-color);
        background-color: rgba(239, 164, 35, 0.08);
        padding-left: 0.8rem;
        border-bottom-color: var(--tertiary-color);
        border-left-color: transparent;
    }

    nav ul.menu li a.active {
        color: var(--tertiary-color);
        border-bottom-color: var(--tertiary-color);
        border-left-color: transparent;
        background-color: rgba(239, 164, 35, 0.07);
    }
    .weather-card {
        margin-top: 2rem;
    }

    .businesses-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en pantallas grandes */
    }
    /* Ensure smooth transition of nav between medium and large screens */
    .membership-benefits {
        flex: 1;
        border-left: 1px solid #ccc;
        padding-left: 1rem;
    }

    /* Nosotros — tablet+ */
    .nos-historia {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }

    .nos-historia-texto h2 {
        font-size: 1.85rem;
    }

    .nos-historia-img {
        aspect-ratio: 4 / 3;
    }

    .nos-refran-band {
        height: 250px;
    }

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

    .nos-experiencia-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nos-visitanos {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }

    /* Galería — tablet */
    .gal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Index — tablet */
    .especialidades-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .index-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contáctanos — tablet */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .contacto-tarjetas {
        grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Styles for larger screens (min-width: 1024px) */
  @media (min-width: 1024px) {
    header {
        padding: 0 3rem;
    }

    nav ul.menu {
        gap: 0.5rem;
    }

    nav ul.menu li a {
        font-size: 0.88rem;
        padding: 0.5rem 1rem;
        letter-spacing: 0.08em;
    }
  
    /* Adjust main content padding */
    main {
        padding: 3rem 5%;
    }
  
    /* Hero full bleed — cancela el padding de main (3rem 5%) */
    .hero {
        width: calc(100% + 10%);
        margin-top: -3rem;
        margin-left: -5%;
    }
    .hero-text h2 {
        font-size: 3rem;
    }
    .hero-text p {
        font-size: 1.5rem;
    }
  
    /* Expand news grid to display more columns */
    .news-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
  
    /* Biography and Weather Section */
    .biography-weather {
        display: flex;
        flex-direction: row; /* Align sections side by side */
        justify-content: space-between;
        gap: 2rem; /* Space between the columns */
    }
    
    .biography,
    .weather-card {
        flex: 1; /* Each section takes up equal space */
        padding: 2rem; /* Increase padding for larger screens */
    }
    
    .weather-card .info-content {
        display: flex;
        flex-direction: row; /* Align weather info horizontally */
        justify-content: space-around; /* Distribute items evenly */
        gap: 1.5rem; /* Add space between items */
    }
   
    /* About Section - Ensure equal alignment */
    .about-grid {
        display: flex;
        flex-direction: row; /* Ensure items are in a single row */
        justify-content: space-between; /* Distribute items evenly */
        align-items: flex-start; /* Align items at the top */
        gap: 2rem; /* Add spacing between items */
    }
  
    .about-us,
    .social-networks,
    .contact {
        flex: 1; /* Ensure equal width for all items */
        max-width: 30%; /* Prevent excessive stretching */
        padding: 2rem;
        text-align: center; /* Center text alignment */
    }
  
    .about-us h2,
    .social-networks h2,
    .contact h2 {
        margin-bottom: 1rem; /* Add spacing below titles */
    }
  
    .about-us p,
    .social-networks p,
    .contact p {
        line-height: 1.5; /* Improve text readability */
        color: var(--text-color);
    }
    .discover-layout {
        grid-template-columns: 1fr 2fr;
    }

    /* Nosotros — desktop */
    .nos-historia-texto h2 {
        font-size: 2rem;
    }

    .nos-valores-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nos-valores-grid .valor-card:nth-child(7) {
        grid-column: 1 / -1;
        max-width: 380px;
        justify-self: center;
    }

    .nos-refran-band {
        height: 300px;
        width: calc(100% + 10%);
        margin-left: -5%;
    }

    .nos-visitanos {
        gap: 5rem;
    }

    /* Galería — desktop */
    .gal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Contáctanos — desktop */
    .contacto-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Index — desktop */
    .especialidades-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
  }

/* Pantallas muy anchas (1600px+) */
@media (min-width: 1600px) {
    header {
        height: 80px;
        padding: 0 5rem;
    }

    header .logo img {
        width: 56px;
        height: 56px;
    }

    header h1 {
        font-size: 1.35rem;
        color: #ffffff;
    }

    header h1 span {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
    }

    nav ul.menu li a {
        font-size: 1rem;
        padding: 0.55rem 1.1rem;
        letter-spacing: 0.09em;
    }
}

/* Pantallas ultra anchas (1920px+) */
@media (min-width: 1920px) {
    header {
        height: 90px;
        padding: 0 7rem;
    }

    header .logo img {
        width: 64px;
        height: 64px;
    }

    header h1 {
        font-size: 1.55rem;
        color: #ffffff;
    }

    header h1 span {
        font-size: 0.85rem;
        letter-spacing: 0.16em;
        color: rgba(255, 255, 255, 0.6);
    }

    .brand {
        gap: 1rem;
    }

    nav ul.menu {
        gap: 0.75rem;
    }

    nav ul.menu li a {
        font-size: 1.05rem;
        padding: 0.6rem 1.25rem;
    }
}