:root {
    /* CSS HEX */
    --black: #000000;
    --king-kong: #171210;
    --film-noir: #443932;
    --lunar-base: #868686;
    --big-fish-to-fry: #dadce0;
    --white: #ffffff;

    --oxford-blue: #0a1f44;
    --alice-blue: #f0f8ff;
    --yale-blue: #00356b;

    /* Fonts */

    --poppins-heading-font: "Poppins", sans-serif;
    --poppins-regular-font-weight: 400;
    --poppins-bold-font-weight: 700;
    --poppins-regular-font-style: normal;

    --open-sans-paragraph-font: "Open Sans", sans-serif;
    --open-sans-font-weight: 400;
    --open-sans-font-style: normal;

    --font-size-base: 1rem;
    --font-size-large: 1.25rem;
    --font-size-small: 0.875rem;
    --font-size-extra-large: 1.5rem;

    /* Text Colors */
    /* Headlines */
    --headline-color-on-white: var(--king-kong); /* On light backgrounds */
    --headline-color-on-color: var(--white); /* On dark backgrounds */

    /* Paragraph Text */
    --paragraph-color-on-white: var(--film-noir); /* On light backgrounds */
    --paragraph-color-on-color: var(--white); /* On dark backgrounds */

    /* Background Colors */
    --paragraph-background-color: var(--film-noir);
    --paragraph-background-white: var(--white);

    /* Navigation Colors */
    --nav-link-color: var(--film-noir);
    --nav-background-color: var(--white);
    --nav-hover-link-color: var(--white);
    --nav-hover-background-color: var(--film-noir);

    /* Button Colors */
    --btn-background-color: var(--king-kong); /* Primary button background */
    --btn-background-white: var(--white); /* Button background for white */
    --btn-font-on-color: var(--white); /* Text color on dark backgrounds */
    --btn-font-on-white: var(--lunar-base); /* Text color on white background */

    /* Common Styles */
    --box-shadow: 0 4px 8px var(--paragraph-background-color);
    --box-shadow-dark: 0 4px 8px var(--eerie-black);
    --border-radius: 10px;
    --transition: transform 0.2s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
button {
    font-family: var(--poppins-heading-font);
    font-weight: var(--poppins-bold-font-weight);
    font-style: var(--poppins-regular-font-style);
    font-size: var(--font-size-base);
}

p {
    font-family: var(--open-sans-paragraph-font);
    font-weight: var(--open-sans-font-weight);
    font-style: var(--open-sans-font-style);
}

/*Header */
header,
footer {
    background-color: #fcd116;
    color: var(--headline-color-on-white);
}

header {
    width: 100%;
    box-shadow: 0 10px 5px #44393267;
    font-size: var(--font-size-small);
}

.box-logo-header {
    display: flex;
    align-items: center;
    justify-content: left;
}

.box-logo-header h1 {
    display: inline-block;
}

.logo-chamber {
    width: 70px;
    padding: 10px 5px;
}

header h1 {
    display: inline-block;
    text-align: left;
    padding: 5px;
    font-size: var(--font-size-base);
}

/* mobile **************************/
/*Hamburger menu*/

#menu {
    display: block;
    font-size: 40px;
    text-decoration: none;
    padding: 8px 12px;
    background-color: var(--headline-color-on-color);
    color: var(--headline-color-on-white);
    font-family: var(--poppins-heading-font);
    position: absolute;
    top: 1.6rem;
    right: 1.5rem;
    cursor: pointer;
    border: 0;
    font-weight: bold;
}

#menu::before {
    content: "≡";
}

nav {
    background-color: var(--headline-color-on-color);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: none;
    font-family: var(--poppins-heading-font);
    font-weight: var(--poppins-bold-font-weight);
    font-style: var(--poppins-regular-font-style);
}

.nav-a {
    display: block;
    color: var(--headline-color-on-white);
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}

.nav-a:hover:not(.active) {
    background-color: var(--nav-hover-background-color);
    color: var(--nav-hover-link-color);
}

nav li:last-child {
    border-bottom: none;
}

.nav-a.active {
    background-color: var(--yale-blue);
    color: var(--alice-blue);
}

.open li {
    display: block;
}

#menu.open::before {
    content: "X";
}

/* Discover page */

/* Estilo general */
main.discover {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Una columna por defecto (para pantallas pequeñas) */
    gap: 20px;
    align-items: start;
    padding: 20px;
    max-width: 1200px; /* Máximo ancho para pantallas grandes */
    margin: 0 auto; /* Centrar el contenido en la pantalla */
    grid-template-rows: auto 1fr;
}

.discover h1{
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 20px;
}

/* Sidebar en una columna */
.discover .side-bar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Responsive Layout for Tablets */
@media (max-width: 768px) {
    main.discover {
        grid-template-columns: 1fr; /* Stack everything in one column */
        grid-template-rows: auto auto auto; /* One row for each section */
        text-align: center;
    }

    .discover .side-bar,
    .discover .cards-container {
        width: 100%;
        justify-content: center;
    }
}

/* Responsive Layout for Mobile */
@media (max-width: 480px) {
    main.discover {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .discover h1 {
        font-size: 1.5rem; /* Reduce heading size */
        padding: 10px;
    }

    .discover .side-bar,
    .discover .cards-container {
        width: 90%; /* Reduce width for better spacing */
    }
}


/* Artículos en la barra lateral */
.discover .side-bar article {
    background-color: var(--paragraph-background-white);
    border: 1px solid var(--big-fish-to-fry);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
}

/* Estilo para el artículo de evento futuro */
.article-02 img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.article-02 img.fade-in {
    opacity: 1;
}

.article-02 h3 {
    text-align: center;
    font-family: var(--poppins-heading-font);
    font-weight: var(--poppins-bold-font-weight);
    margin-bottom: 10px;
}

/* Estilos del calendario */
#calendar {
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 100%;
    border-collapse: collapse;
}

#calendar caption {
    text-align: left;
    padding: 5px 10px;
    background-color: #003366;
    color: #fff;
    font-weight: bold;
    font-size: medium;
}

#calendar th,
#calendar td {
    border: 1px solid var(--big-fish-to-fry);
    padding: 8px;
    text-align: center;
}

#calendar .hoy {
    background-color: red;
}

/* Cards Container */
.cards-container {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: 1fr; /* Mobile: 1 column */
  }
  
  /* Card Grid Areas */
  .card {
    background: var(--paragraph-background-white);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--box-shadow);
    display: grid;
    gap: 10px;
  
    /* Mobile Layout (Default) */
    grid-template-areas:
      "image"
      "title"
      "address"
      "description"
      "button";
  }
  
  .card img {
    grid-area: image;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
  }
  
  .card h3 { grid-area: title; margin: 0; color: var(--oxford-blue); }
  .card .address { grid-area: address; font-size: 0.9rem; color: var(--film-noir); }
  .card .description { grid-area: description; font-size: 0.9rem; }
  .card button {
    grid-area: button;
    background: var(--btn-background-color);
    color: var(--btn-font-on-color);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .calendar-nav {
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--oxford-blue);
}

.calendar-nav:hover {
    background-color: var(--big-fish-to-fry);
}
  
  /* Tablet Layout (750px) */
  @media (min-width: 750px) {
    .cards-container {
      grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
  
    .card {
      /* Tablet Grid Areas: Image on left, content on right */
      grid-template-areas:
        "image title"
        "image address"
        "image description"
        "button button";
      grid-template-columns: 1fr 2fr; /* Explicit column sizing */
    }
  }
  
  /* Desktop Layout (1024px) */
  @media (min-width: 1024px) {
    .cards-container {
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
  
    .card {
      /* Desktop Grid Areas: Image spans full width, title/address row */
      grid-template-areas:
        "image image"
        "title address"
        "description description"
        "button button";
      grid-template-columns: 1fr 1fr; /* Two equal columns */
    }
  }

  /* Hover Effect (Larger Views Only) */
@media (min-width: 860px) {
    .card img:hover {
        transform: scale(1.03);
        transition: var(--transition);
    }
}

/* Add to global.css */
.article-message {
    background-color: var(--paragraph-background-white);
    border: 1px solid var(--big-fish-to-fry);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
    font-family: var(--open-sans-paragraph-font);
  }
  
  #visit-message {
    margin: 0;
    color: var(--paragraph-color-on-white);
    font-size: var(--font-size-base);
  }

/* Sección de Demografía */
.article-01 {
    font-family: var(--open-sans-paragraph-font);
    font-weight: var(--open-sans-font-weight);
    background-color: var(--paragraph-background-white);
    border: 1px solid var(--big-fish-to-fry);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
}

.article-01 header h3 {
    font-family: var(--poppins-heading-font);
    font-weight: var(--poppins-bold-font-weight);
    color: var(--headline-color-on-white);
    font-size: var(--font-size-large);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--yale-blue);
    padding-bottom: 5px;
}

.article-01 ul {
    list-style-type: none; /* Quitar viñetas */
    padding: 0;
}

.article-01 li {
    font-size: var(--font-size-base);
    margin-bottom: 8px;
    color: var(--paragraph-color-on-white);
}

.article-01 strong {
    color: var(--king-kong);
    font-weight: var(--poppins-bold-font-weight);
}

/* Sección de fotos locales */
.local-photos {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    gap: 20px;
    margin: 20px 0;
    justify-items: center;
}

.local-photos figure {
    max-width: 100%;
    text-align: center;
}

.local-photos img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.local-photos img:not(.lazy-image) {
    opacity: 1;
}

.local-photos figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

/* Footer */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #00000051;
    padding: 10px;
}

footer p {
    margin: 0;
}

footer p:first-child {
    display: block;
    margin-top: 5px;
}

/* Larger Views ******************************/
@media (min-width: 860px) {
    header {
        flex-wrap: wrap;
        justify-content: left;
        gap: 10px;
        padding: 5px;
    }

    nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .logo-chamber {
        width: 80px;
    }

    header h1 {
        padding: 10px 0;
        font-size: var(--font-size-large);
    }
    nav ul {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav ul li {
        display: block;
        flex: 1 1 auto;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .nav-a {
        position: relative;
        transition: color 0.2s ease;
        text-align: center;
        padding: 8px 16px;
        text-decoration: none;
        margin-bottom: 5px;
    }

    /*nav a:hover:not(.active) {
    color: var(--nav-hover-link-color);
}*/
    .nav-a:hover {
        color: var(--nav-hover-link-color);
    }
    .nav-a:hover::after,
    .nav-a:hover::before {
        width: 100%;
        left: 0;
    }

    .nav-a::after,
    .nav-a::before {
        content: "";
        position: absolute;
        top: calc(100% + 5px);
        width: 0;
        right: 0;
        height: 3px;
    }

    .nav-a::before {
        transition: width 0.4s cubic-bezier(0.51, 0.18, 0, 0.88) 0.1s;
        background: var(--lunar-base);
    }

    .nav-a::after {
        transition: width 0.2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
        background: var(--king-kong);
    }

    nav li:last-child {
        border-bottom: none;
    }

    #menu {
        display: none;
    }

    /* ---- Discover Page ----*/


    main.discover {
        grid-template-columns: 1fr 3fr; /* Dos columnas: Sidebar 1/4 y contenido 3/4 */
    }

    .local-photos {
        grid-template-columns: repeat(
            auto-fit,
            minmax(200px, 1fr)
        ); /* Varias columnas para las fotos */
    }
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
   }
   
   .social-icons img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s;
   }
   
   .social-icons img:hover {
    transform: scale(1.2);
   }