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

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  src: local("Syne Regular");
  src: local("Syne-Regular");
  src: url("/assets/fonts/Syne-Regular.otf") format("opentype"); }

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  src: local("Syne Bold");
  src: local("Syne-Bold");
  src: url("/assets/fonts/Syne-Bold.otf") format("opentype"); }

:root {
  --clr-main-a: #3567A7;
  --clr-main-b: #D13130;
  --clr-light-a: #fff;
  --clr-light-b: #EEEFF0;
  --clr-dark-a: #000;
  --clr-dark-b: #2B2B2B;
  --clr-dark-c: #606060;
  --clr-dark-d: #808080;
  --maxw: 1380px;
  --alto-img-layout-home: 10rem; }
  @media (min-width: 1440px) {
    :root {
      --maxw: 1280px; } }
  @media (min-width: 1920px) {
    :root {
      --maxw: 1480px; } }

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  --gutter: 3.5rem; }

body {
  background-color: var(--clr-light-a);
  overflow-x: hidden; }

ul {
  list-style: none; }

a {
  text-decoration: none;
  color: inherit; }

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

section {
  margin: 0; }

img {
  display: block; }

.wrapper {
  --page-padding: 50px;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding); }
  @media screen and (min-width: 1920px) {
    .wrapper {
      --page-padding: 0; } }

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw); }

input, textarea, select {
  display: block;
  border: 0;
  background: transparent;
  padding: .5rem .5rem .5rem 1rem;
  font-size: .7rem;
  font-weight: 500;
  resize: none; }
  input::placeholder, textarea::placeholder, select::placeholder {
    font-family: var(--ff);
    font-weight: 500;
    font-size: .8rem;
    line-height: .7rem;
    color: #2b2b2b; }

button, .btn-cta {
  display: block;
  border: 0;
  color: var(--clr-light-a);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  padding: .4rem .6rem;
  background: linear-gradient(90deg, #d13130 0%, #3567a7 100%);
  cursor: pointer;
  height: fit-content; }

html {
  --fs: 16px;
  --ff: 'Syne', sans-serif;
  font-size: var(--fs);
  font-family: var(--ff);
  color: var(--clr-dark-a);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; }

h1, h2, h3, h4, h5 {
  line-height: 1.1;
  font-weight: 700;
  text-transform: capitalize; }

@media (min-width: 280px) {
  h2 {
    color: var(--clr-dark-b);
    line-height: 1.8; }
    h2 {
      font-size: 23px; } }
    @media screen and (min-width: 280px) and (min-width: 280px) {
      h2 {
        font-size: calc(23px + 9 * ((100vw - 280px) / 95)); } }
    @media screen and (min-width: 280px) and (min-width: 375px) {
      h2 {
        font-size: 32px; } }

@media (min-width: 375px) {
  h1 {
    text-transform: initial;
    color: var(--clr-light-b); }
    h1 {
      font-size: 39px; } }
    @media screen and (min-width: 375px) and (min-width: 375px) {
      h1 {
        font-size: calc(39px + 23 * ((100vw - 375px) / 393)); } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      h1 {
        font-size: 62px; } }

@media (min-width: 375px) {
  h2 {
    color: var(--clr-dark-b);
    line-height: 1.8; }
    h2 {
      font-size: 32px; } }
    @media screen and (min-width: 375px) and (min-width: 375px) {
      h2 {
        font-size: calc(32px + 10 * ((100vw - 375px) / 393)); } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      h2 {
        font-size: 42px; } }

@media (min-width: 375px) {
  h3 {
    color: var(--clr-main-a);
    text-transform: uppercase; }
    h3 {
      font-size: 20px; } }
    @media screen and (min-width: 375px) and (min-width: 375px) {
      h3 {
        font-size: calc(20px + 2 * ((100vw - 375px) / 393)); } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      h3 {
        font-size: 22px; } }

@media (min-width: 375px) {
  h4 {
    font-size: 24px; }
  h5 {
    color: var(--clr-dark-b); }
    h5 {
      font-size: 18px; } }
    @media screen and (min-width: 375px) and (min-width: 375px) {
      h5 {
        font-size: calc(18px + 10 * ((100vw - 375px) / 393)); } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      h5 {
        font-size: 28px; } }

@media (min-width: 375px) {
  .topbar p {
    font-size: .93rem;
    line-height: 1.2; }
    .topbar p:nth-child(even) {
      color: var(--clr-light-a); }
    .topbar p span {
      font-weight: 700; }
  nav .main-nav a {
    font-size: 1.125rem;
    text-transform: capitalize; }
  .banner h1 {
    line-height: .92; }
  .banner .horario, .banner .separador, .banner .sub-titulo {
    line-height: 1; }
  .banner .horario, .banner .separador {
    font-size: 18px; } }
  @media screen and (min-width: 375px) and (min-width: 375px) {
    .banner .horario, .banner .separador {
      font-size: calc(18px + 10 * ((100vw - 375px) / 393)); } }
  @media screen and (min-width: 375px) and (min-width: 768px) {
    .banner .horario, .banner .separador {
      font-size: 28px; } }

@media (min-width: 375px) {
  .banner .sub-titulo, .banner .conductores {
    font-size: 13px; } }
  @media screen and (min-width: 375px) and (min-width: 375px) {
    .banner .sub-titulo, .banner .conductores {
      font-size: calc(13px + 7 * ((100vw - 375px) / 393)); } }
  @media screen and (min-width: 375px) and (min-width: 768px) {
    .banner .sub-titulo, .banner .conductores {
      font-size: 20px; } }

@media (min-width: 375px) {
  .banner .sub-titulo {
    font-weight: 700; }
  .banner .conductores {
    line-height: 1.38; }
  .banner .btn-cta {
    font-size: 14px; } }
  @media screen and (min-width: 375px) and (min-width: 375px) {
    .banner .btn-cta {
      font-size: calc(14px + 1 * ((100vw - 375px) / 393)); } }
  @media screen and (min-width: 375px) and (min-width: 768px) {
    .banner .btn-cta {
      font-size: 15px; } }

@media (min-width: 375px) {
  .about main p {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: .25px;
    color: var(--clr-dark-c); }
  .about main span {
    font-size: 16px;
    font-weight: 800; } }

@media screen and (min-width: 375px) and (min-width: 768px) {
  .about .since-box p {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-light-a); }
  .about main p, .about main span {
    font-size: 16px; } }
  @media screen and (min-width: 375px) and (min-width: 768px) and (min-width: 768px) {
    .about main p, .about main span {
      font-size: calc(16px + 2 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 375px) and (min-width: 768px) and (min-width: 1920px) {
    .about main p, .about main span {
      font-size: 18px; } }

@media screen and (min-width: 375px) and (min-width: 1440px) {
  .about .since-box p {
    font-size: 30px; }
  .about main p {
    line-height: 1.95; } }

@media (min-width: 375px) {
  .agenda p {
    font-size: 23px; }
  .programas h2 {
    line-height: 2; }
  .programas .horario {
    color: var(--clr-dark-d); }
    .programas .horario {
      font-size: 10px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      .programas .horario {
        font-size: calc(10px + 8 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      .programas .horario {
        font-size: 18px; } }

@media (min-width: 375px) {
  .programas .conductores {
    font-size: 11px; } }
  @media screen and (min-width: 375px) and (min-width: 768px) {
    .programas .conductores {
      font-size: calc(11px + 9 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 375px) and (min-width: 1920px) {
    .programas .conductores {
      font-size: 20px; } }

@media (min-width: 375px) {
  .programas .conductores span {
    color: var(--clr-main-a);
    text-transform: capitalize; }
  .contacto p {
    font-size: 11px; } }
  @media screen and (min-width: 375px) and (min-width: 768px) {
    .contacto p {
      font-size: calc(11px + 9 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 375px) and (min-width: 1920px) {
    .contacto p {
      font-size: 20px; } }

@media (min-width: 375px) {
  .contacto input, .contacto textarea {
    font-family: var(--ff); }
    .contacto input, .contacto textarea {
      font-size: 12px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      .contacto input, .contacto textarea {
        font-size: calc(12px + 3 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      .contacto input, .contacto textarea {
        font-size: 15px; } }

@media (min-width: 375px) {
  .contacto ::placeholder {
    color: #929292;
    line-height: 1; }
    .contacto ::placeholder {
      font-size: 10px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      .contacto ::placeholder {
        font-size: calc(10px + 5 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      .contacto ::placeholder {
        font-size: 15px; } }

@media (min-width: 375px) {
  .contacto button {
    text-align: initial; }
    .contacto button {
      font-size: 14px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      .contacto button {
        font-size: calc(14px + 3 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      .contacto button {
        font-size: 17px; } }

@media (min-width: 375px) {
  footer header a {
    color: var(--clr-light-a);
    font-size: 1.25rem; }
    footer header a span {
      font-family: 'Montserrat', sans-serif; }
  footer main p, footer main a {
    line-height: 28px;
    text-align: center; }
    footer main p, footer main a {
      font-size: 17px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      footer main p, footer main a {
        font-size: calc(17px + 3 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      footer main p, footer main a {
        font-size: 20px; } }

@media (min-width: 375px) {
  footer .bottom-bar {
    color: var(--clr-dark-d);
    text-align: center; }
    footer .bottom-bar {
      font-size: 15px; } }
    @media screen and (min-width: 375px) and (min-width: 768px) {
      footer .bottom-bar {
        font-size: calc(15px + 1 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 375px) and (min-width: 1920px) {
      footer .bottom-bar {
        font-size: 16px; } }

@media (min-width: 768px) {
  h1 {
    font-size: 62px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    h1 {
      font-size: calc(62px + 18 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    h1 {
      font-size: 80px; } }

@media (min-width: 768px) {
  h2 {
    font-size: 42px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    h2 {
      font-size: calc(42px + 10 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    h2 {
      font-size: 52px; } }

@media (min-width: 768px) {
  h3 {
    font-size: 22px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    h3 {
      font-size: calc(22px + 2 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    h3 {
      font-size: 24px; } }

@media (min-width: 768px) {
  h5 {
    font-size: 28px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    h5 {
      font-size: calc(28px + 2 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    h5 {
      font-size: 30px; } }

@media (min-width: 768px) {
  .banner .horario, .banner .separador {
    font-size: 28px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .banner .horario, .banner .separador {
      font-size: calc(28px + 10 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .banner .horario, .banner .separador {
      font-size: 38px; } }

@media (min-width: 768px) {
  .banner .conductores {
    line-height: 1.9; }
  .banner .sub-titulo, .banner .conductores {
    font-size: 20px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .banner .sub-titulo, .banner .conductores {
      font-size: calc(20px + 6 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .banner .sub-titulo, .banner .conductores {
      font-size: 26px; } }

@media (min-width: 768px) {
  .banner .btn-cta {
    font-size: 15px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .banner .btn-cta {
      font-size: calc(15px + 7 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .banner .btn-cta {
      font-size: 22px; } }

@media (min-width: 768px) {
  .programas .horario {
    font-size: 18px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .programas .horario {
      font-size: calc(18px + 2 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .programas .horario {
      font-size: 20px; } }

@media (min-width: 768px) {
  .programas .conductores {
    font-size: 20px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .programas .conductores {
      font-size: calc(20px + 3 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .programas .conductores {
      font-size: 23px; } }

@media (min-width: 768px) {
  .contacto p {
    font-size: 20px; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .contacto p {
      font-size: calc(20px + 3 * ((100vw - 768px) / 1152)); } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .contacto p {
      font-size: 23px; } }

@media (min-width: 768px) {
  .contacto input, .contacto textarea {
    font-family: var(--ff); }
    .contacto input, .contacto textarea {
      font-size: 15px; } }
    @media screen and (min-width: 768px) and (min-width: 768px) {
      .contacto input, .contacto textarea {
        font-size: calc(15px + 5 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 768px) and (min-width: 1920px) {
      .contacto input, .contacto textarea {
        font-size: 20px; } }

@media (min-width: 768px) {
  .contacto ::placeholder {
    color: #929292; }
    .contacto ::placeholder {
      font-size: 15px; } }
    @media screen and (min-width: 768px) and (min-width: 768px) {
      .contacto ::placeholder {
        font-size: calc(15px + 5 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 768px) and (min-width: 1920px) {
      .contacto ::placeholder {
        font-size: 20px; } }

@media (min-width: 768px) {
  .contacto button {
    text-align: initial; }
    .contacto button {
      font-size: 17px; } }
    @media screen and (min-width: 768px) and (min-width: 768px) {
      .contacto button {
        font-size: calc(17px + 3 * ((100vw - 768px) / 1152)); } }
    @media screen and (min-width: 768px) and (min-width: 1920px) {
      .contacto button {
        font-size: 20px; } }

@media (min-width: 768px) {
  footer .bottom-bar {
    text-align: left; } }

@media (min-width: 1920px) {
  .banner h1 {
    line-height: .94; } }

button {
  font-family: var(--ff); }

body > svg {
  position: absolute;
  width: 0;
  height: 0; }

.topbar {
  background: var(--clr-main-a);
  padding: .6rem 0; }
  .topbar marquee p {
    display: inline-block;
    margin-right: 5rem; }
  @media screen and (min-width: 1440px) {
    .topbar {
      padding: .88rem 0; } }

nav .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  --padding: 1.3rem;
  padding-top: var(--padding);
  padding-bottom: var(--padding); }
  nav .wrapper svg.logo-site {
    width: 5.18rem;
    height: 2.12rem; }
  nav .wrapper svg.icon-burger {
    width: 1.39rem;
    height: 1.1rem;
    cursor: pointer; }
    nav .wrapper svg.icon-burger:hover {
      fill: var(--clr-main-b); }
  nav .wrapper .nav-wrapper {
    display: none; }
  @media screen and (min-width: 768px) {
    nav .wrapper {
      --padding: 1.65rem; }
      nav .wrapper svg.logo-site {
        width: 7.31rem;
        height: 3rem; }
      nav .wrapper svg.icon-burger {
        width: 1.68rem;
        height: 1.37rem; } }
  @media (min-width: 1440px) {
    nav .wrapper {
      --padding: 2.7rem;
      display: grid;
      grid-template-columns: 1fr 2fr; }
      nav .wrapper svg.logo-site {
        width: 9.62rem;
        height: 4rem; }
      nav .wrapper svg.icon-burger {
        display: none; }
      nav .wrapper .nav-wrapper {
        display: grid;
        grid-template-columns: max-content min-content;
        justify-self: end;
        column-gap: 3.75rem; }
        nav .wrapper .nav-wrapper .main-nav {
          display: flex; }
          nav .wrapper .nav-wrapper .main-nav li + li {
            margin-left: 3.31rem; }
          nav .wrapper .nav-wrapper .main-nav li a:hover {
            border-bottom: 2px solid var(--clr-main-b); }
        nav .wrapper .nav-wrapper .social-icons {
          display: flex; }
          nav .wrapper .nav-wrapper .social-icons li + li {
            margin-left: 1rem; }
          nav .wrapper .nav-wrapper .social-icons li svg {
            fill: var(--clr-main-b);
            transition: transform .5s; }
            nav .wrapper .nav-wrapper .social-icons li svg:hover {
              fill: var(--clr-main-a);
              transform: scale(1.5); }
          nav .wrapper .nav-wrapper .social-icons li:first-child svg {
            width: .95rem;
            height: .95rem; }
          nav .wrapper .nav-wrapper .social-icons li:nth-child(2) svg {
            width: 1.01rem;
            height: 1.01rem; }
          nav .wrapper .nav-wrapper .social-icons li:nth-child(3) svg {
            width: 1.1rem;
            height: .91rem; }
          nav .wrapper .nav-wrapper .social-icons li:last-child svg {
            width: 1.33rem;
            height: .93rem; } }

.mobilemenu {
  z-index: 999;
  position: absolute;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  background: linear-gradient(45deg, var(--clr-main-b) 0%, var(--clr-main-a) 100%);
  transition: all .2s; }
  .mobilemenu .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%; }
    .mobilemenu .wrapper .mobile-nav li {
      text-align: center; }
      .mobilemenu .wrapper .mobile-nav li a {
        color: var(--clr-light-a);
        font-size: clamp(23px, 1vw, 50px);
        text-transform: capitalize;
        font-weight: 700; }
        .mobilemenu .wrapper .mobile-nav li a:hover {
          border-bottom: 5px solid var(--clr-main-a); }
        @media screen and (min-width: 360px) {
          .mobilemenu .wrapper .mobile-nav li a {
            font-size: clamp(31px, 4vh, 70px); } }
      .mobilemenu .wrapper .mobile-nav li + li {
        margin-top: 3vh; }
    .mobilemenu .wrapper .social-icons {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      --vhsize: 3vh; }
      .mobilemenu .wrapper .social-icons li svg {
        fill: var(--clr-light-a);
        width: var(--vhsize);
        height: var(--vhsize); }
      .mobilemenu .wrapper .social-icons li:hover:nth-child(odd) svg {
        fill: var(--clr-main-a); }
      .mobilemenu .wrapper .social-icons li:hover:nth-child(even) svg {
        fill: var(--clr-main-b); }
      .mobilemenu .wrapper .social-icons li:last-child svg {
        width: calc(1.28 * var(--vhsize)); }
      @media screen and (min-width: 360px) {
        .mobilemenu .wrapper .social-icons {
          --vhsize: 4vh; } }
      @media screen and (min-width: 768px) {
        .mobilemenu .wrapper .social-icons {
          width: 60%; } }

footer {
  position: relative; }
  footer header {
    background: linear-gradient(45deg, var(--clr-main-b) 0%, var(--clr-main-a) 100%);
    padding: 5rem 0 6.5rem; }
    footer header ul {
      display: grid;
      grid-gap: 4rem; }
      footer header ul li {
        display: grid;
        justify-items: center; }
        footer header ul li svg {
          width: 119px;
          height: 119px;
          display: block;
          fill: var(--clr-light-a);
          margin-bottom: 1rem; }
        footer header ul li:nth-child(3) a:last-child {
          margin-top: .3rem; }
        footer header ul li:nth-child(2) a {
          text-align: center;
          line-height: 1.4; }
        footer header ul li a:hover {
          color: var(--clr-main-a); }
  footer main {
    background-color: var(--clr-dark-b);
    padding: 4.1rem 0 7rem;
    color: var(--clr-light-b); }
    footer main .wrapper {
      display: grid;
      justify-items: center; }
      footer main .wrapper > svg {
        fill: var(--clr-light-b);
        margin-bottom: 3rem;
        width: 131px;
        height: 153px; }
      footer main .wrapper .data-fm {
        margin-bottom: 2rem;
        display: grid;
        justify-items: center; }
        footer main .wrapper .data-fm a:hover {
          color: var(--clr-main-b); }
      footer main .wrapper ul {
        margin-top: 1.5rem;
        display: flex; }
        footer main .wrapper ul li + li {
          margin-left: 1.75rem; }
        footer main .wrapper ul li:first-child svg {
          width: 1.25rem;
          height: 1.25rem; }
        footer main .wrapper ul li:nth-child(2) svg {
          width: 1.37rem;
          height: 1.37rem; }
        footer main .wrapper ul li:nth-child(3) svg {
          width: 1.5rem;
          height: 1.25rem; }
        footer main .wrapper ul li:last-child svg {
          width: 1.81rem;
          height: 1.25rem; }
        footer main .wrapper ul a svg {
          fill: var(--clr-light-b); }
        footer main .wrapper ul a:hover svg {
          fill: var(--clr-main-b); }
  footer .bottom-bar {
    background-color: var(--clr-dark-a);
    padding: 1.3rem 0; }
    footer .bottom-bar .wrapper {
      display: grid;
      justify-items: center;
      grid-gap: 1rem; }
      footer .bottom-bar .wrapper a:hover {
        color: var(--clr-main-a); }
  @media (min-width: 768px) {
    footer header {
      padding: 4.7rem 0; }
      footer header ul {
        grid-template-columns: repeat(3, 1fr); }
        footer header ul li {
          grid-auto-rows: max-content; }
          footer header ul li svg {
            margin-bottom: 2.25rem; }
    footer main {
      padding: 6rem 0; }
      footer main .wrapper {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: max-content;
        gap: 1rem; }
        footer main .wrapper svg {
          grid-column: 1;
          grid-row: 1 / 3;
          align-self: center;
          margin: 0; }
        footer main .wrapper > *:not(svg) {
          grid-column: 2;
          justify-self: left; }
        footer main .wrapper .data-fm {
          justify-items: left;
          grid-auto-rows: min-content;
          margin: 0; }
    footer .bottom-bar .wrapper {
      grid-template-columns: 1fr 1fr; }
      footer .bottom-bar .wrapper p:last-child {
        justify-self: right; } }
  @media (min-width: 1440px) {
    footer header {
      padding: 4.3rem 0; }
    footer main .wrapper {
      display: flex;
      width: 100%;
      justify-content: space-evenly; }
      footer main .wrapper svg {
        grid-row: auto; }
      footer main .wrapper > *:not(svg) {
        grid-column: auto;
        justify-self: initial; }
      footer main .wrapper .data-fm, footer main .wrapper > p, footer main .wrapper ul {
        margin-top: 3.5rem; }
      footer main .wrapper ul li + li {
        margin-left: 1.75rem; } }

.btn-whatsapp {
  --svg-size: 2.25rem;
  position: fixed;
  top: auto;
  bottom: calc(var(--svg-size) + 3.5rem);
  right: var(--gutter);
  color: white;
  background-color: #4dc247;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  opacity: 1;
  border-radius: 50%;
  height: auto;
  border: 0;
  z-index: 100; }
  .btn-whatsapp:hover {
    opacity: 0.8; }
  .btn-whatsapp svg {
    width: calc(var(--svg-size) + .75rem);
    height: calc(var(--svg-size) + .75rem);
    padding: .75rem;
    fill: white;
    vertical-align: middle; }
  @media (min-width: 768px) {
    .btn-whatsapp {
      --svg-size: 2.75rem; } }
  @media (min-width: 1440px) {
    .btn-whatsapp {
      --svg-size: 3.25rem; } }

section.banner {
  position: relative;
  overflow: hidden; }
  section.banner picture {
    background: var(--clr-dark-a);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1; }
    section.banner picture img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  section.banner .wrapper {
    z-index: 1;
    padding-top: 4.3rem;
    padding-bottom: 5.7rem; }
    section.banner .wrapper .info-show-wrapper {
      --fade-time: 1s;
      color: var(--clr-light-a); }
      section.banner .wrapper .info-show-wrapper.fade-text-out {
        animation: fade-text-out var(--fade-time); }
      section.banner .wrapper .info-show-wrapper.fade-text-in {
        animation: fade-text-in var(--fade-time); }
      section.banner .wrapper .info-show-wrapper h1 {
        margin-bottom: .7rem;
        width: 60%; }
      section.banner .wrapper .info-show-wrapper .horario, section.banner .wrapper .info-show-wrapper .separador, section.banner .wrapper .info-show-wrapper .sub-titulo {
        margin-bottom: .35rem; }
    section.banner .wrapper .btn-radio-wrapper {
      margin-top: 1.8rem;
      display: grid;
      gap: 1.2rem;
      width: max-content; }
      section.banner .wrapper .btn-radio-wrapper .btn-play {
        cursor: pointer; }
        section.banner .wrapper .btn-radio-wrapper .btn-play svg {
          fill: var(--clr-light-a);
          width: 5.5rem;
          height: 5.5rem; }
        section.banner .wrapper .btn-radio-wrapper .btn-play:hover svg {
          fill: var(--clr-main-a); }
      section.banner .wrapper .btn-radio-wrapper .btn-cta {
        padding: .37rem .74rem; }
        section.banner .wrapper .btn-radio-wrapper .btn-cta:hover {
          color: var(--clr-dark-b); }
      section.banner .wrapper .btn-radio-wrapper img {
        display: none;
        width: 6.98rem;
        height: 1.8rem; }
  @media (min-width: 768px) {
    section.banner:before {
      background-image: url(../img/banner/slider1-tablet.jpg); }
    section.banner .wrapper {
      padding-top: 0;
      padding-bottom: 3.2rem;
      display: grid;
      grid-template-columns: 1fr 1fr; }
      section.banner .wrapper .info-show-wrapper {
        grid-column: 1 / -1; }
        section.banner .wrapper .info-show-wrapper h1, section.banner .wrapper .info-show-wrapper .horario, section.banner .wrapper .info-show-wrapper .separador, section.banner .wrapper .info-show-wrapper .sub-titulo, section.banner .wrapper .info-show-wrapper .conductores {
          margin-bottom: 0; }
        section.banner .wrapper .info-show-wrapper h1 {
          margin-top: 2.4rem;
          width: 100%; }
        section.banner .wrapper .info-show-wrapper .horario {
          margin-top: 1rem; }
        section.banner .wrapper .info-show-wrapper .separador {
          margin-top: .8rem; }
        section.banner .wrapper .info-show-wrapper .sub-titulo {
          margin-top: .8rem; }
        section.banner .wrapper .info-show-wrapper .conductores {
          margin-top: .8rem;
          width: 80%; }
      section.banner .wrapper .btn-radio-wrapper {
        justify-self: center;
        grid-row: 1;
        grid-column: 2;
        grid-gap: 2.05rem;
        margin: 0;
        justify-items: center; }
        section.banner .wrapper .btn-radio-wrapper .btn-cta, section.banner .wrapper .btn-radio-wrapper img {
          grid-row: 1; }
        section.banner .wrapper .btn-radio-wrapper .btn-cta {
          padding: .29rem .82rem; }
        section.banner .wrapper .btn-radio-wrapper .btn-play {
          grid-row: 2; }
          section.banner .wrapper .btn-radio-wrapper .btn-play svg {
            width: 10.34rem;
            height: 10.34rem; }
        section.banner .wrapper .btn-radio-wrapper img {
          width: 7.48rem;
          height: 1.705rem; } }
  @media (min-width: 1440px) {
    section.banner .wrapper {
      padding-top: 10.5rem;
      padding-bottom: 15rem;
      grid-gap: 0;
      grid-auto-rows: max-content; }
      section.banner .wrapper .info-show-wrapper {
        grid-column: 1;
        grid-row: auto;
        margin: 0;
        line-height: 1;
        width: initial; }
        section.banner .wrapper .info-show-wrapper h1 {
          margin-top: -.5rem; }
        section.banner .wrapper .info-show-wrapper .horario {
          margin-top: .5rem; }
        section.banner .wrapper .info-show-wrapper .separador, section.banner .wrapper .info-show-wrapper .sub-titulo {
          margin-top: 0; }
        section.banner .wrapper .info-show-wrapper .sub-titulo {
          margin-top: .5rem; }
        section.banner .wrapper .info-show-wrapper .conductores {
          margin-top: .5rem; }
      section.banner .wrapper .btn-radio-wrapper {
        justify-self: right;
        margin-right: 2rem;
        grid-row: 1 / 6; }
        section.banner .wrapper .btn-radio-wrapper .btn-play {
          grid-row: 1; }
          section.banner .wrapper .btn-radio-wrapper .btn-play svg {
            margin: 0;
            width: 17.62rem;
            height: 17.62rem; }
        section.banner .wrapper .btn-radio-wrapper .btn-cta, section.banner .wrapper .btn-radio-wrapper img {
          grid-row: 2; }
        section.banner .wrapper .btn-radio-wrapper .btn-cta {
          padding: .48rem .88rem; }
        section.banner .wrapper .btn-radio-wrapper img {
          width: 9.2rem;
          height: 2.396rem; } }
  @media (min-width: 1920px) {
    section.banner:before {
      background-image: url(../img/banner/slider1-desktop.jpg); } }

section.about {
  padding-top: 2rem;
  padding-bottom: 5.8rem; }
  section.about .since-box {
    display: none; }
  section.about main p {
    margin: .8rem 0 1.5rem;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  section.about main button {
    padding: 2px; }
    section.about main button div {
      background: var(--clr-light-a);
      color: var(--clr-dark-b);
      padding: .4rem 1rem; }
  section.about .imgs {
    --gap: 3rem;
    display: grid;
    padding-top: var(--gap);
    grid-row-gap: var(--gap); }
    section.about .imgs picture {
      height: 0;
      overflow: hidden;
      padding-top: 100%;
      background: white;
      position: relative; }
      section.about .imgs picture img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
  @media (min-width: 768px) {
    section.about {
      padding-top: 0;
      padding-bottom: 6.8rem; }
      section.about .since-box {
        margin-top: -1.5rem;
        display: grid;
        grid-template-columns: min-content 1fr;
        transition: all 1s ease;
        z-index: 99; }
        section.about .since-box:hover {
          box-shadow: 0.3rem 0.3rem 0.3rem var(--clr-dark-d); }
        section.about .since-box .svg-container {
          background-color: var(--clr-main-b);
          display: grid;
          justify-items: center;
          align-items: center; }
          section.about .since-box .svg-container svg {
            fill: var(--clr-light-a);
            width: 33.5px;
            height: 52px;
            margin: 1.31rem 1.89rem; }
        section.about .since-box .span-container {
          background-color: var(--clr-main-a);
          display: grid;
          align-items: center;
          justify-items: end; }
          section.about .since-box .span-container p {
            margin-right: 2rem; }
      section.about main {
        margin-top: 2.1rem; }
        section.about main p {
          display: block;
          columns: 2;
          column-gap: 3rem;
          margin-top: 1.8rem; }
        section.about main button {
          display: none; }
      section.about .imgs {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem; }
        section.about .imgs picture:first-child {
          grid-column: 1 / -1;
          padding-top: 41%; } }
  @media (min-width: 1440px) {
    section.about {
      padding-bottom: 8rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas: "banner info info" "images images images";
      --column-gap: 5.7rem;
      column-gap: var(--column-gap); }
      section.about .since-box {
        grid-area: banner;
        grid-template-columns: initial;
        grid-template-rows: 1fr min-content;
        margin-top: -2.5rem; }
        section.about .since-box .svg-container svg {
          width: 7.25rem;
          height: 11.25rem; }
        section.about .since-box .span-container {
          justify-content: center; }
          section.about .since-box .span-container p {
            margin: 2.72rem 0; }
      section.about main {
        grid-area: info; }
        section.about main p {
          column-gap: var(--column-gap);
          margin-top: 0;
          margin-bottom: 0; }
      section.about .imgs {
        margin-top: 5rem;
        grid-area: images;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 25rem; }
        section.about .imgs picture:first-child, section.about .imgs picture {
          padding-top: initial;
          height: initial; }
        section.about .imgs picture:first-child {
          grid-column: span 3; }
        section.about .imgs picture:nth-child(4) {
          grid-column: span 2; } }

section.agenda {
  background: var(--clr-light-b);
  padding-bottom: 4rem; }
  section.agenda header {
    display: grid;
    padding: 3.8rem 0; }
    section.agenda header h3 {
      grid-row: 1;
      color: var(--clr-main-b); }
  section.agenda main section {
    margin-bottom: 2.5rem; }
    section.agenda main section:last-child {
      margin-bottom: 0; }
    section.agenda main section .dias {
      background-color: var(--clr-main-a);
      margin-bottom: .7rem;
      --padding: 1.35rem;
      padding-top: var(--padding);
      padding-bottom: var(--padding); }
      section.agenda main section .dias h4 {
        color: var(--clr-light-a);
        text-transform: uppercase; }
    section.agenda main section ul {
      color: var(--clr-light-b);
      padding-top: 1.5rem;
      padding-bottom: 5rem; }
      section.agenda main section ul li {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid var(--clr-light-a); }
        section.agenda main section ul li p:nth-child(even) {
          font-weight: 700; }
        section.agenda main section ul li span {
          font-size: .8rem; }
    section.agenda main section:nth-child(1) ul {
      background: linear-gradient(45deg, var(--clr-main-b) 0%, var(--clr-main-a) 100%); }
    section.agenda main section:nth-child(2) ul, section.agenda main section:nth-child(4) ul {
      background: linear-gradient(-45deg, var(--clr-main-a) 0%, var(--clr-main-b) 100%); }
    section.agenda main section:nth-child(3) ul {
      background: linear-gradient(-45deg, var(--clr-main-b) 0%, var(--clr-main-a) 100%); }
  @media (min-width: 768px) {
    section.agenda {
      padding-bottom: 8rem; }
      section.agenda main {
        width: auto;
        margin: 0; }
        section.agenda main section {
          display: grid;
          grid-template-columns: 1fr 1fr;
          --col-gap: 3.8rem;
          column-gap: var(--col-gap);
          --padding-inside: 1.5rem; }
          section.agenda main section .dias {
            display: block;
            margin-left: 0;
            margin-right: 0;
            margin-right: calc(var(--padding-inside) * -1);
            padding-left: var(--padding-inside);
            padding-right: 0; }
          section.agenda main section ul {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: var(--col-gap);
            margin-left: 0;
            margin-right: 0;
            padding: 0 var(--padding-inside) 3.75rem; }
            section.agenda main section ul li {
              grid-column: auto;
              padding: 2.5rem 0; } }
  @media (min-width: 1440px) {
    section.agenda header {
      justify-content: right; }
      section.agenda header h3 {
        text-align: right; }
    section.agenda main section {
      --col-gap: 12rem;
      --col-gap: 6rem;
      --padding-inside: 3rem;
      grid-template-columns: repeat(3, 1fr); }
      section.agenda main section .dias {
        grid-row: 1;
        grid-column: 1 / -3; }
      section.agenda main section ul {
        grid-template-columns: repeat(3, 1fr); }
        section.agenda main section ul li {
          width: 100%; }
      /*
      section.agenda main section:nth-child(2) ul {
        margin-right: calc(var(--padding-inside) * -1);
        grid-row: 2;
        grid-column: span 1;
        grid-template-columns: 1fr; } }
      */

section.staff {
  background-color: var(--clr-main-a);
  color: var(--clr-light-b);
  padding: 3rem 0 6rem; }
  section.staff header h2 {
    margin-bottom: .8rem;
    color: var(--clr-light-b);
    text-align: center; }
  section.staff main ul li {
    text-align: center;
    padding: 3rem 0 1.8rem;
    border-bottom: 1px solid var(--clr-light-a); }
    section.staff main ul li svg {
      --svg-size: 60px;
      width: var(--svg-size);
      height: var(--svg-size);
      margin-bottom: .5rem;
      fill: var(--clr-light-b); }
    section.staff main ul li p:nth-child(even) {
      font-size: 23px;
      line-height: 1.6;
      font-weight: 700;
      text-transform: capitalize; }
    section.staff main ul li p:nth-child(odd) {
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 1px; }
  @media (min-width: 768px) {
    section.staff main ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2rem; }
      section.staff main ul li {
        margin: 0;
        width: auto; }
        section.staff main ul li svg {
          width: 5.68rem;
          height: 5.68rem;
          margin-bottom: 2rem; }
        section.staff main ul li p:nth-child(even) {
          font-size: 1.43rem; }
        section.staff main ul li p:nth-child(odd) {
          font-size: 1.25rem; } }
  @media (min-width: 1440px) {
    section.staff main ul {
      grid-template-columns: repeat(4, 1fr);
      column-gap: 4rem; }
      section.staff main ul li:nth-child(9) {
        grid-column: 2 / 3; }
      section.staff main ul li:nth-child(10) {
        grid-column: 3 / 4; } }

section.programas {
  padding: 3.7rem 0 2.7rem; }
  section.programas header {
    display: grid;
    padding-bottom: 2.5rem; }
    section.programas header h3 {
      grid-row: 1; }
  section.programas main {
    display: grid;
    grid-auto-flow: column;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding-bottom: 1rem; }
    section.programas main:before, section.programas main:after {
      content: ''; }
    section.programas main section {
      width: calc(100vw - var(--gutter) * 2); }
      section.programas main section + section {
        margin-left: calc(var(--gutter) / 2); }
      section.programas main section picture img {
        width: auto;
        object-fit: cover; }
      section.programas main section .horario {
        margin: .7rem 0 0; }
      section.programas main section .conductores {
        margin: 1.4rem 0 1rem; }
      section.programas main section a svg {
        width: 2.3rem;
        height: 2.3rem; }
      section.programas main section a:hover:nth-child(even) svg {
        fill: var(--clr-main-a); }
      section.programas main section a:hover:nth-child(odd) svg {
        fill: var(--clr-main-b); }
  @media (min-width: 768px) {
    section.programas main {
      padding-bottom: 3.75rem; }
      section.programas main section {
        width: calc(50vw - var(--gutter) * 1.5); }
        section.programas main section .conductores {
          margin: 1rem 0 1.5rem; }
        section.programas main section a svg {
          width: 3.6rem;
          height: 3.6rem; } }
  @media (min-width: 1440px) {
    section.programas main section .horario {
      margin-top: 2.7rem; } }

section.contacto {
  background: var(--clr-light-b);
  padding: 1.8rem 0 4rem; }
  section.contacto header p {
    margin-top: -.3rem; }
  section.contacto main {
    padding-top: 2.7rem; }
    section.contacto main picture {
      display: block;
      height: 0;
      overflow: hidden;
      padding-top: 86%;
      background: #fff;
      position: relative; }
      section.contacto main picture img {
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%; }
    section.contacto main form {
      padding-top: 2.2rem; }
      section.contacto main form input, section.contacto main form textarea {
        width: 100%;
        margin-bottom: 1.2rem;
        border: 1px solid #b3b3b3;
        padding: .66rem; }
      section.contacto main form button {
        background: var(--clr-main-a);
        padding: .32rem 1.72rem .32rem 1rem; }
  @media (min-width: 768px) {
    section.contacto {
      padding: 3.5rem 0 6.5rem; }
      section.contacto header p {
        margin-top: .25rem; }
      section.contacto main {
        padding-top: 4.5rem;
        display: grid;
        --form-gap: 1.37rem;
        gap: 0 var(--form-gap);
        grid-template-columns: 1fr 1fr; }
        section.contacto main picture {
          height: 100%;
          padding: 0; }
        section.contacto main form {
          padding: 0; }
          section.contacto main form input, section.contacto main form textarea {
            padding: .9rem;
            margin-bottom: var(--form-gap); }
          section.contacto main form textarea {
            height: 20.5rem; }
          section.contacto main form button {
            padding: .38rem 1.85rem .38rem 1.3rem; } }
  @media (min-width: 1440px) {
    section.contacto {
      padding: 5rem 0 5.75rem; }
      section.contacto header p {
        margin-top: -.3rem; }
      section.contacto main {
        --form-gap: 3.5rem; }
        section.contacto main form input, section.contacto main form textarea {
          padding: 1.54rem;
          margin-bottom: 2.5rem; }
        section.contacto main form textarea {
          height: 12rem; }
        section.contacto main form button {
          margin-left: auto;
          padding: 1.5rem 7.4rem; } }

.go-top {
  --svg-size: 3rem;
  display: none;
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--svg-size) / 2);
  z-index: 999; }
  .go-top a svg {
    width: var(--svg-size);
    height: var(--svg-size);
    fill: var(--clr-light-a);
    stroke: var(--clr-dark-b);
    stroke-miterlimit: 10;
    stroke-width: 2px;
    transition: all ease .3s; }
  .go-top:hover svg {
    fill: var(--clr-main-a);
    stroke: var(--clr-light-b); }
  @media (min-width: 768px) {
    .go-top {
      --svg-size: 3.5rem; } }
  @media (min-width: 1440px) {
    .go-top {
      --svg-size: 4rem; } }