/*!
Theme Name: radioperio
Theme URI: https://perio.unlp.edu.ar/
Author: Victor Amoresano
Theme URI: https://perio.unlp.edu.ar/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: radioperio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

radioperio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Fonts & Global Overrides
# Generic
  - Normalize
  - Box sizing
# Base
  - Typography
  - Elements
  - Links
  - Forms
# Layouts
# Components
  - Navigation
  - Posts and pages
  - Comments
  - Widgets
  - Media
  - Captions
  - Galleries
# Plugins
  - Jetpack infinite scroll
# Utilities
  - Accessibility
  - Alignments
# Radio Perio Custom Styles
  - Navbar & Header
  - Secciones y Contenedores
  - Tarjetas de Programas (Home/Lista)
  - Grilla de Programación (Pestañas y Tarjetas Par/Impar)
  - Footer Personalizado
  - Ficha de Programa Individual (Single)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Fonts & Global Overrides
--------------------------------------------------------------*/

/* Montserrat Medium (500) */

@font-face {
}

/* Montserrat SemiBold (600) */

@font-face {
}

/* Montserrat Bold (700) */

@font-face {
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* Box sizing */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: "Montserrat", sans-serif;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  font-size: 1em;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
  margin-bottom: 1.6em;
  line-height: 1.6;
  font-family: "Courier 10 Pitch", courier, monospace;
  background: #eee;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements */

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background: #fff;
}

hr {
  overflow: visible;
  box-sizing: content-box;
  margin-bottom: 1.5em;
  height: 1px;
  border: 0;
  background-color: #ccc;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

embed,
iframe,
object {
  max-width: 100%;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links */

a {
  background-color: transparent;
  color: #4169e1;
}

a:visited {
  color: #800080;
}

a:hover,
a:focus,
a:active {
  color: #191970;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  overflow: auto;
  width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.main-navigation {
  display: block;
  width: 100%;
  margin-left: 86px;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main {
  position: relative;
  z-index: 5;
}

.main-fondo {
  position: fixed;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Posts and pages */

.sticky {
  display: block;
}

.post,
.page {
  color: white;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments */

.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets */

.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media */

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

.custom-logo-link {
  display: inline-block;
}

/* Captions */

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries */

.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

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

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

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll */

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments */

.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Radio Perio Custom Styles
--------------------------------------------------------------*/

/* --- NAVBAR RADIO PERIO --- */

.navbar-radio {
  background-color: #00498d;
  width: 100%;
  position: relative;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 1. LOGO */

.site-branding .logo-text {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.4rem;
  text-decoration: none;
  text-transform: lowercase;
  line-height: 1;
}

/* 2. MENÚ DESKTOP */

#primary-menu {
  display: flex;
  align-items: flex-start;
  height: 36px;
  margin-top: 12px;
}

.main-navigation ul {
  padding-left: 0;
  gap: 30px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.main-navigation a {
  display: block;
  transition: opacity 0.2s ease;
  position: relative;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: #ffffff;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #d4e840;
  border-bottom: solid 5px #d4e840;
}

/* 3. REDES SOCIALES */

/* Contenedor de redes en el header */

.header-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-socials-mobile {
  display: none;
}

/* Estilo visual de los íconos */

.header-socials a {
  font-size: 22px;
  /* Tamaño del ícono */
  color: #ffffff;
  /* Color blanco (ajusta si tu header es claro) */
  transition: color 0.3s ease;
  text-decoration: none;
}

/* Efecto hover al pasar el cursor */

.header-socials a:hover {
  color: #00d1b2;
  /* Color de realce al pasar el mouse */
}

/* 4. MENÚ HAMBURGUESA & MOBILE */

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  background-color: #ffffff;
  height: 3px;
  width: 25px;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: relative;
}

.main-navigation.toggled + .menu-toggle .hamburger-icon,
.menu-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* MEDIA QUERY NAVBAR (MOBILE) */

/* --- SECCIONES Y CONTENEDORES --- */

.site {
  background: white;
}

.site main,
.site aside {
  max-width: 1212px;
  margin: auto;
}

.page-section {
  min-height: 100vh;
  padding: 40px 20px 140px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #333;
}

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

/* Page de Titular */

.page-title-container {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.page-title-wrap {
  border-left: 5px solid #d4e840;
  padding-left: 15px;
}

.page-title {
  font-size: 36px;
  color: #484d54;
  margin: 0;
  font-weight: 600;
}

.page-subtitle {
  font-size: 20px;
  color: #484d54;
  margin: 5px 0 0 0;
  font-weight: 500;
}

.page-template-grilla .page-title,
.page-template-grilla .page-subtitle {
  color: #484d54;
}

/* --- TARJETAS DE PROGRAMAS (LISTA/HOME) --- */

.programas-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
}

a.programa-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

a.programa-card-link:hover .programa-card {
  transform: translateY(-2px);
  transition: transform 0.2s ease-in-out;
}

.programa-card {
  background-color: #e8e5dd;
  border-radius: 12px;
  display: flex;
  align-items: stretch;
  color: #ffffff;
  box-shadow: 0px 0px 18px 0px #0000004d;
}

.programas-list .programa-card-link:nth-child(odd) .programa-card {
  background-color: #124b89;
}

.programas-list .programa-card-link:nth-child(even) .programa-card {
  background-color: #0885c5;
}

.programas-list .programa-card-link:nth-child(even) .programa-horario-badge {
  background-color: #124b89;
}

.programa-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: auto;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #fff;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}

.programa-thumb img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px 0 0 12px;
  padding: 10px;
}

.programa-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 25px;
}

.programa-categorias-container {
  display: flex;
  gap: 10px;
}

.programa-titulo {
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}

.programa-excerpt {
  font-size: 15px;
  margin-bottom: 10px;
}

.programa-integrantes-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.programa-integrantes {
  overflow: hidden;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  margin-bottom: 16px;
  font-size: 15px;
}

.programa-integrantes-text {
  display: inline;
}

.ver-mas-integrantes {
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  margin-left: -2px;
}

/* Cuando se expande, quitamos el límite de líneas */

/* Ocultar el ver más si el texto nunca se cortó */

.programa-integrantes-inner.no-overflow .ver-mas-integrantes {
  display: none !important;
}

/* Cuando se expande, removemos el límite de líneas */

.programa-integrantes.expanded .programa-integrantes-inner {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: inline;
}

.programa-integrantes strong {
  font-weight: 700;
}

.programa-horarios-container {
  margin-top: auto;
  padding-top: 10px;
}

/* --- GRILLA PROGRAMACIÓN (PESTAÑAS Y TARJETAS PAR/IMPAR) --- */

.grilla-tabs-nav {
  margin: 35px 0 25px;
}

.grilla-tabs {
  display: flex;
  gap: 20px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
}

.grilla-tab-item {
  margin: 0;
  padding-bottom: 8px;
  position: relative;
}

.grilla-tab-item a {
  color: #484d54;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s ease;
}

.grilla-tab-item.is-active a,
.grilla-tab-item a:hover {
  color: #484d54;
}

.grilla-tab-item.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #d4e840;
  border-radius: 2px;
}

.grilla-list {
  display: flex;
  flex-direction: column;
  gap: 27px;
  margin-top: 25px;
  max-width: 900px;
}

a.grilla-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.grilla-card {
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 110px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
}

a.grilla-card-link:nth-child(odd) .grilla-card {
  background-color: #0885c5;
}

a.grilla-card-link:nth-child(odd) .grilla-card .grilla-cat-badge {
  background-color: #124b89;
}

a.grilla-card-link:nth-child(even) .grilla-card {
  background-color: #124b89;
}

a.grilla-card-link:nth-child(even) .grilla-card .grilla-cat-badge {
  background-color: #0885c5;
}

a.grilla-card-link:hover .grilla-card {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.grilla-card-content {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  flex: 1;
}

.grilla-card-categorias-container {
  display: flex;
  gap: 0 5px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.grilla-cat-badge {
  display: inline-block;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  width: fit-content;
  margin-bottom: 6px;
  text-transform: capitalize;
}

.grilla-card-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.grilla-card-time {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

.grilla-card-media {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: 135px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 3;
}

.grilla-card-media img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
}

.grilla-empty {
  color: #ffffff;
  font-size: 1rem;
  padding: 20px 0;
}

/* Contenedor principal con fondo azul y bordes redondeados */

.wpcf7 {
  background-color: #2482c3;
  /* El tono azul de tu tarjeta */
  padding: 35px;
  border-radius: 12px;
  color: #ffffff;
}

/* Estructura en grilla */

.propuesta-form-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.propuesta-form-grid p {
  margin: 0;
}

.propuesta-campo-fila {
  display: flex;
  gap: 15px;
  width: 100%;
}

.propuesta-campo-fila > * {
  flex: 1;
}

.quienes-somos-page {
  max-width: 1000px !important;
}

/* Contenedor principal de la sección */

.suma-propuesta-section {
  background-color: #2482c3;
  /* Azul institucional */
  border-radius: 16px;
  padding: 30px;
  color: #ffffff;
  max-width: 1100px;
  margin: 40px auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Grilla de 2 columnas */

.suma-propuesta-container {
  display: flex;
  gap: 15px;
}

.suma-propuesta-form-wrap br {
  display: none;
  /* Oculta los saltos de línea dentro del contenedor */
}

/* Columna Izquierda */

.suma-propuesta-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  height: auto;
  width: 40%;
}

/* Título con la línea amarilla lateral izquierda */

.suma-propuesta-title {
  display: flex;
  flex-direction: column;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  padding-left: 15px;
  border-left: 4px solid #d1ec46;
  /* Línea vertical amarilla/lima */
}

.pregunta-principal {
  color: #d1ec46;
  /* Amarillo destacado */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.instruccion {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

.suma-propuesta-form-wrap {
  width: 60%;
}

.propuesta-form-grid .propuesta-campo-fila:first-of-type p {
  display: flex;
  gap: 5px;
}

/* Estilos internos para limpiar el fondo por defecto de Contact Form 7 dentro de esta caja */

.suma-propuesta-form-wrap .wpcf7 {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wpcf7-spinner {
  position: absolute;
  left: 50%;
  transform: translate(-37px, 8px);
}

/* Adaptación para celulares (Responsive) */

/* Estilo de los inputs y textareas */

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
  background-color: transparent !important;
  border: 1px solid #6ab0de !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
  width: 100%;
  font-size: 14px;
}

/* Color del texto de placeholder dentro de los inputs */

.wpcf7-form-control::placeholder {
  color: #d0e7f7 !important;
  opacity: 1;
}

/* Altura específica para el textarea grande */

.wpcf7-form-control.wpcf7-textarea {
  height: 120px;
  resize: none;
}

/* Botón de enviar (Verde Lima) */

.wpcf7-form-control.wpcf7-submit {
  background-color: #d1ec46 !important;
  /* El color lima del botón */
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px !important;
  width: 100%;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 15px;
  transition: opacity 0.2s ease;
}

.wpcf7-form-control.wpcf7-submit:hover {
  opacity: 0.9;
}

/* Margen al Footer Institucional para que el reproductor no lo tape */

.site-footer-custom {
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px;
  color: #ffffff;
  background-color: #00498d;
  margin-bottom: 85px;
  z-index: 5;
  position: relative;
}

/* Adaptación para celulares (responsivo) */

@media (max-width: 600px) {
  .grilla-tabs {
    white-space: nowrap;
    justify-content: flex-start;
    gap: 20px;
    font-size: 12px;
  }

  .grilla-tab-item a {
    font-size: 13px;
    font-weight: 500;
  }

  .grilla-card {
    min-height: auto;
  }

  .grilla-card-media {
    height: 105px;
  }

  .grilla-card-title {
    font-size: 1rem;
  }
  .grilla-card-content {
    padding: 12px;
  }
}

/* --- FOOTER PERSONALIZADO --- */

.site-footer {
  background-color: #00498d;
  color: #ffffff;
}

.site-footer-custom a {
  color: #ffffff;
  text-decoration: none;
}

/* Margen al Footer Institucional para que el reproductor no lo tape */

.twitch-link {
  text-decoration: none;
}

.footer-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-col {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.4;
}

.footer-col-logo {
  padding-right: 30px;
}

.footer-col-address {
  padding-right: 30px;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col-address p {
  margin: 0;
  font-weight: 500;
}

.footer-col-radio {
  gap: 15px;
}

.footer-col-radio .radio-logo {
  object-fit: contain;
  height: 75px;
}

.footer-col-radio .radio-info {
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

.footer-col-radio .radio-info a {
  text-decoration: none;
}

.footer-col-radio .radio-info a:hover {
  text-decoration: underline;
}

.footer-col img {
  max-width: 100%;
  height: auto;
}

.footer-col-logo .footer-perio-logo {
  height: 50px;
  width: auto;
}

/* ==========================================
   FICHA DE PROGRAMA INDIVIDUAL (SINGLE)
   ========================================== */

.programa-single-container {
  max-width: 1212px;
  margin: 0 auto;
}

/* Header Superior */

.programa-single-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 35px;
}

.programa-single-header-line {
  width: 4px;
  height: 48px;
  background-color: #9bcc2b;
  border-radius: 2px;
}

.programa-single-header-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 1;
}

.programa-single-header-subtitle {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 400;
  color: #e0e0e0;
}

/* Banner de la Tarjeta */

.programa-single-banner {
  max-width: 900px;
  position: relative;
  z-index: 5;
  background-color: #0086c7;
  border-radius: 20px;
  margin-top: 35px;
  margin-bottom: 40px;
  padding: 30px 35px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: visible !important;
}

.programa-single-banner-content {
  max-width: 375px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  height: stretch;
  justify-content: space-between;
}

.programa-single-banner-title {
  color: white;
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

/* Badge del Horario */

.programa-single-banner-badge {
  display: inline-flex;
  align-items: center;
  background-color: #2689ca;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  text-transform: uppercase;
}

.programa-single-badge-icon {
  display: flex;
  align-items: center;
}

.programa-single-badge-divider {
  opacity: 0.5;
  margin: 0 2px;
}

/* Contenedor e Imagen Desbordada */

.programa-single-banner-media {
  position: absolute;
  right: 0;
  bottom: 0;
  top: -25px;
  width: 50%;
  max-width: 380px;
  pointer-events: none;
  z-index: 10;
}

.programa-single-banner-background {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 400px;
  opacity: 0.5;
}

.programa-single-banner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* Información de la Parte Inferior */

.programa-single-info {
  margin-top: 20px;
}

.programa-single-info-title {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}

.programa-single-info-horario {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.programa-single-info-description {
  font-size: 15px;
  line-height: 1.6;
  max-width: 900px;
}

.programa-single-info-description p {
  margin-bottom: 15px;
}

/* Contenedor de las redes alineadas */

.programa-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  /* Separación exacta de 20px entre botones */
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Diseño de los botones redondos (Pills) */

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #0d47a1;
  /* Azul oscuro estilo de la imagen[cite: 3] */
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 50px;
  /* Borde ovalado[cite: 3] */
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.25s ease, transform 0.2s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* Sombreo suave[cite: 3] */
}

.social-pill svg {
  flex-shrink: 0;
  display: block;
}

/* Efecto al pasar el cursor (Hover) */

.social-pill:hover {
  background-color: #083378;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.social-pill:active,
.social-pill:focus,
.social-pill:visited {
  color: #ffffff;
}

/* Mobile Responsivo para Single Programa */

@media (max-width: 768px) {
  .programa-card {
    flex-direction: column;
  }

  .programa-thumb {
    width: 100%;
    height: 220px;
  }

  .suma-propuesta-container {
    flex-direction: column;
  }

  .suma-propuesta-section {
    padding: 25px;
  }

  .suma-propuesta-title {
    font-size: 20px;
  }

  .propuesta-campo-fila {
    flex-direction: column;
    gap: 25px;
  }

  .suma-propuesta-form-wrap,
  .suma-propuesta-info {
    width: 100%;
  }

  .pregunta-principal {
    font-size: 14px;
  }

  .propuesta-form-grid .propuesta-campo-fila:first-of-type p {
    flex-direction: column;
    gap: 15px;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .footer-col {
    border: none !important;
    padding: 0 !important;
    flex-direction: column;
    justify-content: center;
  }

  .footer-col-address {
    align-items: center;
  }

  .footer-col-radio {
    flex-direction: column;
    gap: 10px;
  }

  .programa-categorias-container {
    flex-wrap: wrap;
    gap: 5px;
  }

  .programa-single-banner {
    padding: 30px 20px;
    margin-top: 0;
    justify-content: center;
  }

  .programa-single-banner-content {
    max-width: 100%;
    width: 100%;
  }

  .programa-single-banner-media {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .programa-single-banner-img {
    max-height: 240px;
    object-position: center;
  }

  .programa-single-banner-title {
    font-size: 28px;
  }

  .programa-single-header-title {
    font-size: 22px;
  }

  .site-footer-custom {
    margin-bottom: 130px;
  }
}

/* ==========================================
   BADGE DE HORARIO GLOBAL (REUTILIZABLE)
   ========================================== */

.programa-horario-badge {
  gap: 8px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  border-radius: 20px;
  padding: 8px 18px;
  color: #ffffff;
  background-color: #2689ca;
  align-items: center;
  display: inline-flex;
}

.programa-horario-badge .clock-icon {
  flex-shrink: 0;
  stroke: #ffffff;
  height: 16px;
  width: 16px;
}

.programa-horario-badge .badge-divider {
  margin: 0 2px;
  color: #ffffff;
  opacity: 0.5;
}

.programa-single-banner .programa-horario-badge {
  background-color: #00498d;
}

/* ==========================================
   PLANTILLA PROGRAMACIÓN (RADIO PERIO) - AISLADO
   ========================================== */

/* Contenedor principal para aislar el scope */

.page-section-programacion {
  padding: 40px 0;
  background-color: #f8f9fa;
}

.page-section-programacion .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- TITULAR GENERAL DE PÁGINA --- */

.page-section-programacion .page-title-container {
  margin-bottom: 35px;
}

.page-section-programacion .page-title-wrap {
  border-left: 5px solid #d4e840;
  /* Línea verde lima */
  padding-left: 15px;
}

.page-section-programacion .page-title {
  font-size: 32px;
  font-weight: 800;
  color: #3b424a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.page-section-programacion .page-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
  margin: 6px 0 0 0;
}

/* --- LISTADO DE TARJETAS --- */

.page-section-programacion .programas-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-section-programacion .programa-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Tarjeta Blanca Base */

.page-section-programacion .programa-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 240px;
}

.page-section-programacion .programa-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* Sección Imagen (Izquierda) */

.page-section-programacion .programa-thumb {
  width: 280px;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #ffffff;
}

.page-section-programacion .programa-thumb img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 50%;
}

/* Sección Azul de Información (Derecha) */

.page-section-programacion .programa-info {
  flex: 1;
  background-color: #115395;
  /* Azul institucional Perio */
  color: #ffffff;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.programa-cat {
  min-width: fit-content;
  margin: 0;
  font-size: 15px;
  color: #ffffff;
}

/* Categoría arriba del título */

.page-section-programacion .programa-cat {
  font-size: 12px;
  font-weight: 700;
  color: #a3cbf0;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: block;
}

/* Título de la tarjeta */

.page-section-programacion .programa-titulo {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Extracto / Descripción */

.page-section-programacion .programa-excerpt {
  font-size: 13px;
  line-height: 1.45;
  color: #e0e6ed;
  margin-bottom: 12px;
}

.page-section-programacion .programa-excerpt p {
  margin: 0;
}

/* Integrantes */

.page-section-programacion .programa-integrantes {
  font-size: 12px;
  color: #cfdce8;
  margin-bottom: 16px;
  line-height: 1.4;
}

.page-section-programacion .programa-integrantes strong {
  color: #ffffff;
}

/* Container de Pastillas */

.page-section-programacion .programa-horarios-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Pastilla Azul Claro */

.page-section-programacion .programa-horario-badge {
  display: inline-flex;
  align-items: center;
  background-color: #2689ca;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 8px;
}

.page-section-programacion .programa-horario-badge .clock-icon {
  width: 15px;
  height: 15px;
  stroke: #ffffff;
  flex-shrink: 0;
}

.page-section-programacion .programa-horario-badge .badge-divider {
  opacity: 0.4;
  margin: 0 2px;
}

/* RESPONSIVE */

@media (max-width: 850px) {
  .page-section-programacion .programa-card {
    flex-direction: column;
    border-radius: 20px;
  }

  .page-section-programacion .programa-thumb {
    width: 100%;
    min-width: 100%;
    padding: 30px 20px;
  }

  .page-section-programacion .programa-info {
    border-radius: 0 0 20px 20px;
    padding: 20px;
  }

  .page-section-programacion .programa-titulo {
    font-size: 22px;
  }
}

/* ==========================================
   MENÚ MOBILE DE UNDERSCORES (COPY & PASTE)
   ========================================== */

/* 1. Ocultar el botón hamburguesa en Desktop */

.menu-toggle {
  z-index: 10000;
  padding: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  display: none;
}

/* 2. Estilos para el icono hamburguesa dentro del botón */

.hamburger-icon {
  display: inline-block;
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  position: relative;
  vertical-align: middle;
  transition: background 0.2s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  transition: transform 0.2s ease-in-out;
  position: absolute;
  background-color: #ffffff;
  height: 3px;
  width: 25px;
  display: block;
  content: "";
}

.hamburger-icon::before {
  top: -8px;
}

.hamburger-icon::after {
  top: 7px;
  bottom: -8px;
}

/* 3. Animación a "X" cuando el menú está abierto */

.main-navigation.toggled .hamburger-icon {
  background-color: transparent;
}

.main-navigation.toggled .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.main-navigation.toggled .hamburger-icon::after {
  transform: rotate(-45deg);
  bottom: 0;
}

.footer-divider {
  height: 60px;
  width: 1px;
  background-color: white;
}

/* CAROUSEL SLIDER */

.slide-custom-title {
  color: #ffffff;
  background: #6c6e71;
  border-radius: 0 0 10px 10px;
  padding: 5px;
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  margin: 0 !important;
}

.swiper-wrapper .figure {
  margin: 1em 0 0 0 !important;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  display: none !important;
}

.slc-logos .slc-logo-title {
  margin-top: 0;
}

.slc-logo {
  padding: 1px;
}

/* ==========================================
   REPRODUCTOR PERSISTENTE Y FLOTANTE
   ========================================== */

/* Barra del Reproductor Fija en la pantalla */

.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85px;
  background-color: #6385a1;
  /* Azul grisáceo/acero */
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  color: #ffffff;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
  z-index: 99999;
  /* Se asegura de estar siempre arriba de la web */
}

.player-container {
  width: 100%;
  max-width: 1212px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

/* Sección Izquierda: Logo y Textos */

.player-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.twitch-icon {
  width: 42px;
  height: 42px;
  stroke-width: 2.2;
  flex-shrink: 0;
}

.info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.info-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
}

.info-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
}
.info-subtitle:visited {
  color: rgba(255, 255, 255, 0.75);
}

/* Sección Central: Controles de Reproducción */

.player-center {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 20px;
}

.btn-step {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  transition: transform 0.1s ease;
}

.btn-step:hover {
  transform: scale(1.1);
}

.btn-play-main {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #d7e838;
  /* Verde lima */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, background-color 0.2s;
}

.btn-play-main:hover {
  transform: scale(1.06);
  background-color: #e2f244;
}

.btn-play-main i {
  color: #6385a1;
  fill: #6385a1;
}

/* Sección Derecha: Volumen y Compartir */

.player-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-volume {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Slider de volumen */

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d7e838;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d7e838;
  cursor: pointer;
  border: none;
}

.btn-share {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.1s ease;
}

.btn-share:hover {
  transform: scale(1.1);
}

/* ==========================================
   REPRODUCTOR PERSISTENTE Y FLOTANTE
   ========================================== */

@media (max-width: 800px) {
  .player-bar {
    height: fit-content;
  }

  .player-container {
    display: grid !important;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    /* Creamos áreas lógicas */
    grid-template-areas:
      "left left"
      "center right";
    justify-content: center;
    /* Centra todo el bloque inferior horizontalmente */
    align-items: center;
    gap: 12px 16px;
    /* 12px vertical, 16px horizontal entre centro y derecha */
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
  }

  /* 2. Fila 1: Ocupa todo el ancho arriba y se centra */

  .player-left {
    grid-area: left;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  /* 3. Fila 2, Columna 1: Los controles del centro */

  .player-center {
    grid-area: center;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    /* Los acerca hacia el medio */
    margin: 0;
  }

  /* 4. Fila 2, Columna 2: Los controles de la derecha */

  .player-right {
    grid-area: right;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    /* Los acerca hacia el medio para unirse con el centro */
    margin: 0;
  }

  /* Ajustes visuales opcionales para la versión móvil */

  .twitch-link {
    width: 40px;
    flex-shrink: 0;
  }

  .twitch-link img {
    width: 40px;
    height: auto;
  }
}

/* 4. Reglas Responsive para Mobile */

@media screen and (max-width: 768px) {
  #primary-menu {
    display: none;
  }

  .main-navigation a:hover,
  .main-navigation .current-menu-item > a,
  .main-navigation .current_page_item > a {
    color: #d4e840;
    border-bottom: none;
  }

  .main-navigation a:active {
    font-weight: 600;
  }

  .main-navigation {
    display: block;
    width: fit-content;
    margin-left: 0;
  }

  .header-socials {
    display: none;
  }

  .header-socials-mobile {
    display: flex;
    gap: 8px;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    padding: 6px 15px 0 0;
  }

  .site-branding {
    height: 60px;
  }

  .custom-logo-link img {
    max-width: 60px;
  }

  .page-title,
  .programa-titulo {
    font-size: 26px;
  }

  .programa-titulo {
    font-size: 24px;
    line-height: normal;
    margin: 5px 0;
  }

  .page-subtitle {
    font-size: 16px;
  }

  .programa-cat,
  .programa-horario-badge {
    font-size: 12px;
  }

  .programa-excerpt,
  .programa-integrantes {
    font-size: 12px;
  }

  .footer-divider {
    display: none;
  }

  .main-navigation.toggled {
    height: auto;
  }

  .main-navigation.toggled #primary-menu {
    height: auto !important;
    gap: 0;
    background: #10488d;
    left: -174px;
    width: 230px;
    max-width: 230px;
  }

  /* Asegurar que la barra del header tenga posición relativa para que el menú caiga bien */

  .site-header,
  .main-navigation {
    position: relative;
  }

  /* Mostrar botón hamburguesa */

  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  /* Ocultar el contenedor del menú por defecto en mobile */

  .main-navigation .menu,
  .main-navigation ul {
    display: none;
  }

  /* Desplegar el menú cuando Underscores activa la clase .toggled */

  .main-navigation.toggled .menu,
  .main-navigation.toggled ul {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #115395;
    /* Color de fondo del menú desplegable */
    padding: 15px 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .main-navigation.toggled li {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    display: block;
  }

  .main-navigation.toggled a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 5px 15px;
  }

  .main-navigation .current_page_item > a,
  .main-navigation .current_page_item > a:hover,
  .main-navigation .current_page_item > a:focus,
  .main-navigation .current_page_item > a:active {
    border: none;
  }

  .programa-thumb {
    border-radius: 12px 12px 0 0;
  }

  .programa-thumb img {
    border-radius: 12px 12px 0 0;
  }

  .programa-info {
    padding: 15px;
  }

  .player-left,
  .player-center,
  .player-right {
    justify-content: center;
  }

  .slide-custom-title {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .player-container .btn-share {
    display: none;
  }

  .player-container .volume-slider {
    width: 80px;
  }
}