/* ============================================
   VARIABLES CSS
   ============================================ */

:root {
   /* Colores */
   --color-primary: #1a3a52;
   --color-accent: #c9a961;
   --color-bg-main: #f5f1e8;
   --color-bg-alt: #ffffff;
   --color-text: #2c3e50;
   --color-text-secondary: #596673;

   /* Tipografía */
   --font-serif: 'Playfair Display', serif;
   --font-sans: 'Inter', sans-serif;

   /* Escala tipográfica */
   --text-xs: 0.875rem;
   --text-sm: 1rem;
   --text-md: 1.125rem;
   --text-lg: 1.25rem;
   --text-xl: 1.5rem;
   --text-2xl: 2rem;
   --text-3xl: 2.25rem;
   --text-4xl: 3rem;

   /* Espaciado */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;
   --spacing-2xl: 3rem;
   --spacing-3xl: 4rem;

   /* Transiciones */
   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;

   /* Sombras */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

   /* Border radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
}

/* ============================================
   RESET Y BASE
   ============================================ */

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 100%;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   line-height: 1.6;
   color: var(--color-text);
   background-color: var(--color-bg-main);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   text-decoration: none;
}

ul {
   list-style: none;
}

/* ============================================
   ACCESIBILIDAD - FOCUS
   ============================================ */

:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
}

/* ============================================
   ACCESIBILIDAD - SKIP LINK
   ============================================ */

.skip-link {
   position: absolute;
   top: -100%;
   left: var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--color-primary);
   color: var(--color-bg-alt);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-weight: 600;
   z-index: 1000;
   transition: top var(--transition-fast);
}

.skip-link:focus {
   top: var(--spacing-md);
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
}

/* ============================================
   UTILIDADES DE ACCESIBILIDAD
   ============================================ */

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */

h1,
h2 {
   font-family: var(--font-serif);
   color: var(--color-primary);
   line-height: 1.2;
   margin-bottom: var(--spacing-lg);
}

h1 {
   font-size: var(--text-2xl);
   font-weight: 700;
}

h2 {
   font-size: var(--text-xl);
   font-weight: 600;
}

h3,
h4 {
   font-family: var(--font-sans);
   color: var(--color-primary);
   font-weight: 600;
}

p {
   margin-bottom: var(--spacing-md);
}

/* ============================================
   LAYOUT
   ============================================ */

.main-section {
   padding: var(--spacing-2xl) var(--spacing-md);
   width: 100%;
}

.main-section--alt {
   background-color: var(--color-bg-alt);
}

.main-section_container {
   max-width: 1200px;
   margin: 0 auto;
}

/* ============================================
   HEADER
   ============================================ */

#mainHeader {
   background-color: var(--color-primary);
   padding: 0 var(--spacing-md);
   position: sticky;
   top: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 60px;
}

#logoHeaderContainer {
   display: flex;
   align-items: center;
}

#logoHeaderContainer img {
   height: 40px;
   width: auto;
}

#headerDeployIconContainer {
   cursor: pointer;
   padding: var(--spacing-sm);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
}

#headerDeployIconContainer svg {
   width: 24px;
   height: 24px;
}

#deployable {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background-color: var(--color-primary);
   padding: var(--spacing-md);
   box-shadow: var(--shadow-md);
}

#deployable.deployable--visible {
   display: block;
}

.link-container {
   list-style: none;
   margin-bottom: var(--spacing-xs);
}

.link-container:last-child {
   margin-bottom: 0;
}

.link {
   color: white;
   text-decoration: none;
   display: block;
   padding: var(--spacing-sm) var(--spacing-md);
   transition: color var(--transition-fast);
   min-height: 44px;
   display: flex;
   align-items: center;
}

.link:hover,
.link:focus {
   color: var(--color-accent);
}

.link--active {
   color: var(--color-accent);
   font-weight: 600;
}

/* ============================================
   STREAM DE TWITCH
   ============================================ */

#live-box {
   background-color: var(--color-bg-alt);
   text-align: center;
}

#live-box iframe {
   width: 100%;
   max-width: 854px;
   aspect-ratio: 16 / 9;
   height: auto;
   border: none;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
}

/* ============================================
   RADIO MARANATA
   ============================================ */

.radio-player {
   display: grid;
   grid-template-columns: 76px minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--spacing-lg);
   max-width: 920px;
   margin: 0 auto;
   padding: var(--spacing-xl);
   color: white;
   background-color: var(--color-primary);
   border-left: 5px solid var(--color-accent);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
}

.radio-player__logo {
   width: 76px;
   height: 92px;
   padding: var(--spacing-xs);
   object-fit: contain;
   background-color: white;
   border-radius: var(--radius-sm);
}

.radio-player__details {
   min-width: 0;
}

.radio-player__eyebrow {
   margin-bottom: var(--spacing-xs);
   color: var(--color-accent);
   font-size: var(--text-xs);
   font-weight: 600;
}

.radio-player__heading {
   margin-bottom: var(--spacing-xs);
   color: white;
   font-family: var(--font-serif);
   font-size: var(--text-xl);
}

.radio-player__description,
.radio-player__status {
   margin-bottom: 0;
   font-size: var(--text-xs);
}

.radio-player__description {
   color: rgba(255, 255, 255, 0.86);
}

.radio-player__status {
   margin-top: var(--spacing-sm);
   color: var(--color-accent);
}

.radio-player__controls {
   display: grid;
   grid-template-columns: 56px minmax(100px, 140px);
   align-items: center;
   column-gap: var(--spacing-md);
}

.radio-player__toggle {
   grid-row: span 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   color: var(--color-primary);
   background-color: var(--color-accent);
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.radio-player__toggle:hover {
   background-color: #dfc47d;
   transform: scale(1.04);
}

.radio-player__toggle:disabled {
   cursor: wait;
   opacity: 0.7;
}

.radio-player__icon {
   width: 26px;
   height: 26px;
}

.radio-player__volume-label {
   color: white;
   font-size: var(--text-xs);
}

.radio-player__volume {
   width: 100%;
   min-height: 24px;
   accent-color: var(--color-accent);
   cursor: pointer;
}

.radio-player__fallback {
   max-width: 920px;
   margin: var(--spacing-md) auto 0;
   color: var(--color-text-secondary);
   font-size: var(--text-xs);
   text-align: center;
}

.radio-player__fallback a {
   color: var(--color-primary);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 0.15em;
}

.radio-player__fallback a:hover {
   color: #315f7e;
}

@media (max-width: 640px) {
   .radio-player {
      grid-template-columns: 56px minmax(0, 1fr);
      gap: var(--spacing-md);
      padding: var(--spacing-lg);
   }

   .radio-player__logo {
      width: 56px;
      height: 70px;
   }

   .radio-player__heading {
      font-size: var(--text-lg);
   }

   .radio-player__controls {
      grid-column: 1 / -1;
      grid-template-columns: 56px minmax(0, 1fr);
   }
}

/* ============================================
   SECCIÓN SOBRE NOSOTROS
   ============================================ */

#about .main-section_container {
   max-width: 800px;
}

#about h1 {
   text-align: center;
}

#about .text-container p:last-child {
   margin-bottom: 0;
}

.about-text {
   font-size: var(--text-md);
}

/* ============================================
   HORARIO
   ============================================ */

#schedule h2 {
   text-align: center;
}

#schedule-box {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-md);
   margin-top: var(--spacing-lg);
}

.schedule-day-box {
   background-color: var(--color-bg-alt);
   padding: var(--spacing-lg);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   border-left: 4px solid var(--color-accent);
   transition: box-shadow var(--transition-normal);
}

.schedule-day-box:hover {
   box-shadow: var(--shadow-md);
}

.schedule-title {
   font-family: var(--font-sans);
   font-size: var(--text-lg);
   color: var(--color-primary);
   margin-bottom: var(--spacing-sm);
   text-transform: capitalize;
}

.schedule-list-element {
   list-style: none;
   padding: var(--spacing-xs) 0;
}

.schedule-text {
   margin: 0;
   color: var(--color-text);
}

.schedule-placeholder {
   color: var(--color-text-secondary);
   font-style: italic;
   margin: 0;
}

/* ============================================
   FOOTER
   ============================================ */

.main-footer {
   background-color: var(--color-primary);
   color: white;
   padding: var(--spacing-2xl) var(--spacing-md);
}

.location-container,
.contact-container,
.radio-container,
.contact-info-container {
   max-width: 1200px;
   margin: 0 auto var(--spacing-xl);
}

.location-container:last-child,
.contact-container:last-child,
.radio-container:last-child,
.contact-info-container:last-child {
   margin-bottom: 0;
}

.location-container h4,
.contact-container h4,
.radio-container h4,
.contact-info-container h4 {
   color: white;
   font-size: var(--text-md);
   margin-bottom: var(--spacing-md);
}

.location-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   background-color: white;
   border-radius: 50%;
   padding: var(--spacing-sm);
   transition: background-color var(--transition-fast);
}

.location-link:hover {
   background-color: var(--color-accent);
}

.location-link svg {
   width: 24px;
   height: 24px;
}

.watch-us-list {
   display: flex;
   gap: var(--spacing-md);
   flex-wrap: wrap;
}

.watch-us-element {
   list-style: none;
}

.watch-us-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: white;
   border-radius: 50%;
   padding: var(--spacing-sm);
   transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.watch-us-link:hover {
   transform: scale(1.1);
   background-color: var(--color-accent);
}

.watch-us-link svg {
   width: 100%;
   height: 100%;
}

/* Radio en vivo */
.radio-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: white;
   border-radius: 50%;
   padding: var(--spacing-sm);
   transition: transform var(--transition-fast);
}

.radio-link:hover {
   transform: scale(1.1);
}

.radio-link img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Contacto: teléfono y email */
.contact-info-list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.contact-info-element {
   list-style: none;
}

.contact-info-link {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-sm);
   color: white;
   text-decoration: none;
   font-size: var(--text-sm);
   min-height: 44px;
   transition: color var(--transition-fast);
}

.contact-info-link:hover {
   color: var(--color-accent);
}

.contact-info-link svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

/* ============================================
   MEDIA QUERIES - TABLET (768px+)
   ============================================ */

@media (min-width: 768px) {
   h1 {
      font-size: var(--text-3xl);
   }

   h2 {
      font-size: var(--text-2xl);
   }

   .main-section {
      padding: var(--spacing-3xl) var(--spacing-xl);
   }

   .main-footer {
      padding: var(--spacing-3xl) var(--spacing-xl);
   }

   #schedule-box {
      grid-template-columns: repeat(2, 1fr);
   }

   #mainHeader {
      min-height: 80px;
   }

   #logoHeaderContainer img {
      height: 50px;
   }

   .watch-us-link {
      width: 48px;
      height: 48px;
   }

   .radio-link {
      width: 48px;
      height: 48px;
   }
}

/* ============================================
   MEDIA QUERIES - DESKTOP (1024px+)
   ============================================ */

@media (min-width: 1024px) {
   h1 {
      font-size: var(--text-4xl);
   }

   h2 {
      font-size: var(--text-3xl);
   }

   .main-section {
      padding: 5rem var(--spacing-3xl);
   }

   .main-footer {
      padding: 5rem var(--spacing-3xl);
   }

   #schedule-box {
      grid-template-columns: repeat(3, 1fr);
   }

   /* Navegación horizontal en desktop */
   #headerDeployIconContainer {
      display: none;
   }

   #deployable {
      display: flex !important;
      position: static;
      background: none;
      padding: 0;
      gap: var(--spacing-lg);
      box-shadow: none;
   }

   .link-container {
      margin: 0;
   }

   .link {
      padding: var(--spacing-xs) var(--spacing-sm);
      min-height: auto;
      display: inline-flex;
   }

    .location-container,
    .contact-container,
    .radio-container,
    .contact-info-container {
       display: inline-block;
       vertical-align: top;
       margin-right: var(--spacing-3xl);
    }
}

/* ============================================
   MEDIA QUERIES - DESKTOP LARGE (1440px+)
   ============================================ */

@media (min-width: 1440px) {
   #schedule-box {
      grid-template-columns: repeat(4, 1fr);
   }
}