/*
Theme Name: Tatiana Perez
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: Carlos Macías
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.1.4.1764280242
Updated: 2025-11-27 21:50:42

*/

a.btn-transversal {
  font-size: 16px;
  font-family: "Raleway", Arial, sans-serif;
  line-height: 1.55;
  font-weight: 300;
  border-radius: 0px 0px 0px 0px;
  background-color: #040601;
  color: #fff;
  padding: 20px 80px;
  transition: all 0.25s ease-out;
  cursor: pointer;
  display: inline-block;
}

a.btn-transversal:hover {
  transform: translateY(-3px);
}

.title-transversal {
  color: #040601;
  font-size: 68px;
  font-weight: 300;
  line-height: normal;
}
ul.content-productos li h3 {
  font-size: 20px;
  color: #3f3f3f;
  font-family: "Raleway";
  font-weight: 600;
  margin: 0;
}
/*---------- HEADER ----------------*/

/*---------- HEADER ----------------*/

/*---------- HEADER ----------------*/

header#site-header {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0);
  height: auto;
  z-index: 9999;
}

/* Contenedor principal del header interno */
#header-main {
  position: relative;
  z-index: 999;
  font-family: inherit;
}

/*=============================
  BARRA FIJA (TÍTULO + BOTÓN)
==============================*/

.scroll-header__bar {
  position: fixed;
  top: 10dvh;              /* MÁS ABAJITO AL INICIO */
  width: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 115px;
  border-radius: 0;
  background-color: transparent;
  z-index: 10001;
  transition: 
    background-color 0.25s ease,
    top 0.25s ease;       /* animar cuando sube */
}

/* Título dentro de la barra */
.scroll-header__title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.scroll-header__title a {
  color: #fff;
  text-decoration: none;
}

/* Al hacer scroll (cuando JS añade .active-header) */
#site-header.active-header .scroll-header__bar {
  top: 0;                                  /* SE SUBE ARRIBA */
  background-color: rgba(0, 0, 0, 0.7);    /* fondo negro con opacidad */
}

#site-header.active-header .scroll-header__title {
  opacity: 1;
  pointer-events: auto;
}

/* Ocultar título cuando el menú está abierto (opcional) */
#header-main.is-open .scroll-header__title {
  opacity: 0;
  pointer-events: none;
}

/* Ocultar el botón MENU cuando el menú está abierto (solo dejamos la X del panel) */
#header-main.is-open .header-main__toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/*=============================
  BOTÓN MENU
==============================*/

.header-main__toggle {
  position: static; /* dentro de la barra fija */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-main__toggle-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Texto MENU */
.header-main__toggle-label {
  display: inline-block;
}

/* Icono hamburguesa */
.header-main__toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.header-main__toggle-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

/*=============================
  BOTÓN X DENTRO DEL MENÚ
==============================*/

.header-main__close {
  position: absolute;
top: 8%;
    right: 33px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10001;
}

.header-main__close-icon {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
}

.header-main__close-icon span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #000; /* negro sobre fondo blanco del menú */
  border-radius: 1px;
  transform-origin: center;
}

.header-main__close-icon span:first-child {
  transform: translateY(-50%) rotate(45deg);
}

.header-main__close-icon span:last-child {
  transform: translateY(-50%) rotate(-45deg);
}

/*=============================
  OVERLAY Y MENÚ LATERAL
==============================*/

/* Overlay negro a pantalla completa */
.header-main__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Overlay visible cuando el menú está abierto */
#header-main.is-open .header-main__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Menú lateral derecho */
.header-main__menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 30vw;
  max-width: 420px;
  height: 100dvh;
  background-color: #ffffff;
  color: #000000;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 10000;
}

/* Mostrar menú cuando está abierto */
#header-main.is-open .header-main__menu {
  transform: translateX(0);
}

/* Contenido interno del menú */
.header-main__menu-content {
  min-height: 100%;
  padding: 28px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Parte superior: título + nav */
.header-main__menu-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10%;
}

.header-main__title {
  font-size: 53px;
  margin: 0 0 8px;
  line-height: 50px;
  font-weight: 300;
  text-transform: uppercase;
}

ul.header-main__nav li a {
  font-family: 'Cormorant Garamond', Arial, sans-serif;
  font-size: 21px;
  display: block;
  margin: 0;
  color: #000000;
}

/* Navegación principal */
.header-main__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-main__nav li {
  margin-bottom: 6px;
}

.header-main__nav a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
}

.header-main__nav a:hover {
  text-decoration: underline;
}

/* Parte inferior: redes + idioma */
.header-main__menu-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Redes sociales */
.t-sociallinks__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Cambiador de idioma */
.header-main__lang-switch {
  font-size: 13px;
}

.header-main__lang-switch a {
  color: #000;
  text-decoration: none;
}

.header-main__lang-switch a:hover {
  text-decoration: underline;
}

/*=============================
  RESPONSIVE (max-width)
==============================*/

@media (max-width: 767px) {
  .header-main__menu {
    width: 70vw; /* Más ancho en pantallas pequeñas */
  }

  .header-main__menu-content {
    padding: 20px;
  }

  .header-main__title {
    font-size: 28px;
    line-height: 29px;
  }

  .scroll-header__bar {
    top: 9dvh;
        left: 1%;
        right: 5%;
        padding: 6px 14px;
  }

  .scroll-header__title {
    font-size: 16px;
  }
}




/*---------- PRESS ----------------*/
ul.press-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-flow: wrap;
  gap: 50px;
  padding-top: 3%;
}

li.press-item {
  width: 47%;
}
.content-img-press {
  width: 100%;
  min-height: 350px;
  background-position: center 16%;
  background-size: cover;
}

.content-text-press a {
  font-family: "Cormorant Garamond";
  line-height: normal;
  background: #000;
  color: #fff;
  padding: 12px 26px;
}
.content-text-press h2 {
  font-size: 20px;
  line-height: 1.5;
  color: #3f3f3f;
  font-family: "Raleway";
  font-weight: 400;
  padding-top: 20px;
}
.content-text-press p {
  font-size: 16px;
  line-height: 1.2;
  color: #6a6a6a;
  font-family: "Raleway";
  font-weight: 400;
  padding-bottom: 20px;
}
section#press {
  padding-top: 7%;
}
.content-btn {
  text-align: center;
  padding-top: 7%;
}

.content-btn a {
  color: #040601;
  border-style: solid !important;
  border-color: #040601 !important;
  border: 1px solid #040601;
  padding: 14px 50px;
  box-shadow: none !important;
  font-family: Raleway;
  font-weight: 400;
  font-size: 15px;
  transition-duration: 0.2s;
  transition-property: background-color, color, border-color, box-shadow,
    opacity, transform, gap;
  transition-timing-function: ease-in-out;
}

.content-btn a:hover {
  background-color: #040601;
  color: #fff;
  border-color: #040601 !important;
  transform: translateY(-3px);
}

@media (width <= 1024px) {
  li.press-item {
    width: 46%;
  }
}

@media (width <= 875px) {
  li.press-item {
    width: 100%;
  }
}

@media (width <= 500px) {
  .content-text-press h2 {
    font-size: 18px;
  }
  .content-btn {
    text-align: center;
    padding-top: 21%;
  }
}

/*---------- CONTACT ----------------*/

section#contact {
  padding-top: 8%;
}
.content-form {
  display: flex;
  gap: 5%;
}
.content-text-form {
  width: 50%;
}
.content-text-form h3 {
  color: #040601;
  font-family: "Cormorant Garamond";
  font-weight: 400;
  font-size: 31px;
}
.content-text-form a {
  font-size: 24px;
  line-height: 1.8;
  color: #040601;
  font-family: "Raleway";
  font-weight: 300;
}
ul.t-sociallinks__wrapper {
  margin: 0;
  display: flex;
  list-style: none;
  gap: 1px;
  margin-top: 20px;
}
.content-object-form {
  width: 50%;
}

button.forminator-button.forminator-button-submit {
  background: #000;
  color: #fff;
  padding: 18px 50px !important;
}

@media (width <= 875px) {
  .content-form {
    flex-direction: column;
  }
  .content-text-form {
    width: 100%;
  }
  .content-object-form {
    width: 100%;
  }
}

@media (width <= 500px) {
  section#contact {
    padding-top: 15%;
  }
  .content-text-form h3 {
    font-size: 26px;
  }
  .content-text-form a {
    font-size: 20px;
  }
}

/*----------FOOTER----------------*/
footer#foorter-main {
  background-color: #000;
  padding: 5% 0;
      margin-top: 5%;
}
.content-footer-main {
  display: flex;
}
.item-footer-1 h2 {
  color: #f9f9f9;
  font-size: 124px;
  font-family: "Cormorant Garamond", Arial, sans-serif;
  font-weight: 300;
  line-height: 117px;
  margin: 0;
}
.content-footer-main {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: end;
}
.item-footer-2 ul {
    gap: 10px;
}

.item-footer-3 {
    color: #f9f9f9;
}
.item-footer-3 p {
    margin: 0;
}
.item-footer-3 {
    color: #f9f9f9;
}
.item-footer-3  a{
    color: #f9f9f9;
}
.item-footer-4 ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.item-footer-4 ul li a {
    color: #f9f9f9;
}
@media (width <= 1080px){
.content-footer-main {
    flex-direction: column;
    align-items: flex-start;
}
}
@media (width <= 875px){
.content-footer-main {
    flex-direction: column;
    align-items: flex-start;
}
.item-footer-1 h2 {
    font-size: 75px;
    line-height: 75px;
    margin: 0;
}
footer#foorter-main {
    padding: 8% 0;
    padding-top: 11%;
}
}
@media (width <= 500px){
.item-footer-1 h2 {
    font-size: 57px;
    line-height: 57px;
    margin: 0;
}
.content-footer-main {
    gap: 20px;
}
}


/*---------- SCHEDULE ----------------*/
#upcoming-concerts {
  padding-top: 10%;
  display: block;
}
ul.content-productos {
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 4%;
}
ul.content-productos li a h5 {
  margin-top: 12px;
  margin-bottom: 15px;
  font-size: 16px;
  color: #6a6a6a;
  font-family: "Raleway";
  font-weight: 400;
}
ul.content-productos li {
  border-bottom: 1px solid #ddd; /* lo que quieras */
  padding: 10px 0; /* opcional, para espacio */
}

ul.content-productos li:last-child {
  border-bottom: none;
}
ul.content-productos li p {
  margin-bottom: 15px;
}
ul.content-productos li h3 {
  font-size: 20px;
  color: #3f3f3f;
  font-family: "Raleway";
  font-weight: 600;
  margin: 0;
  transition: 0.2s;
}
ul.content-productos li a:hover h3 {
  font-size: 25px;
}

@media (width <= 875px) {
  .title-transversal {
    font-size: 50px;
  }
}

@media (width <= 700px) {
  .title-transversal {
    font-size: 35px;
  }
  .page-template-schedule .content-text-banne-trasnversal h1 {
    font-size: 32px;
}
}
@media (width <= 500px) {
  #upcoming-concerts {
    padding-top: 20%;
    display: block;
  }
  .title-transversal {
    font-size: 40px;
  }
}
.previous-concerts {
    padding-top: 7%;
}

@media (width <= 350px) {
.page-template-schedule .content-text-banne-trasnversal h1 {
    font-size: 28px;
}
}
/*----------BANNER TRASNVERSAL---------------*/


section#banner-trasnversal-all {
    min-height: 600px;
    height: 100dvh;
    position: relative;
    background-position: center 25%;
    background-size: cover;
}

.content-banner-trasnversal-all {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 600px;
    height: 100dvh;
    width: 85%;
    margin: 0 auto;
    padding-bottom: 3%;
    padding-top: 3%;
    position: relative;
}

.content-down-banner-trasnversal {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.content-text-banne-trasnversal h1 {
    color: #f9f9f9;
    font-weight: 300;
    margin: 0;
    font-size: 88px;
    line-height: 80px;
}
.content-flag-banner-trasnversal a {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
}
.content-up-banner-trasnversal {
    padding-top: 4%;
}
.content-up-banner-trasnversal a {
    color: #fff;
    font-weight: 300;
    margin: 0;
    z-index: 999999;
    position: relative;
}
.content-up-banner-trasnversal {
    padding-top: 40px;
}
@media (width <= 850px) {
    .content-text-banne-trasnversal  {
        width: 65%;
    }
}
@media (width <= 500px) {
    .content-banner-trasnversal-all  {
        width: 85%;
        margin: 0 auto;
        padding-bottom: 8%;
        padding-top: 5%;
    }
    .content-down-banner-trasnversal {
    flex-direction: column-reverse;
    align-items: baseline;
    gap: 17px;
    padding-bottom: 15px;
}
.content-text-banne-trasnversal h1 {
    margin: 0;
    font-size: 35px;
}
      
}

/*---------- ABOUT HOME ----------------*/

.content-text-about-home h2 {
  color: #040601;
  font-size: 55px;
  font-weight: 300;
  line-height: normal;
}
.content-text-about-home p {
  margin-bottom: 40px;
}
.content-about-home {
  display: flex;
  gap: 5%;
  padding-top: 11%;
}
.content-img-about-home {
  width: 30%;
  height: 500px;
}
.content-img-about-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.content-text-about-home {
  width: 70%;
  padding-top: 1%;
}
@media (width <= 1180px) {
  .content-text-about-home h2 {
    font-size: 45px;
  }
}

@media (width <= 1080px) {
  .content-about-home {
    flex-direction: column;
  }
  .content-img-about-home {
    width: 45%;
    height: 500px;
  }
  .content-text-about-home {
    width: 100%;
    padding-top: 4%;
  }
}

@media (width <= 850px) {
  .content-img-about-home {
    width: 60%;
    height: 500px;
  }
}
@media (width <= 500px) {
  .content-img-about-home {
    width: 80%;
    height: 500px;
  }
  .content-text-about-home h2 {
    font-size: 40px;
  }
}
@media (width <= 350px) {
  .content-img-about-home {
    width: 100%;
  }
  .content-text-about-home h2 {
    font-size: 28px;
  }
  .content-text-about-home {
    padding-top: 10%;
  }
}


/*---------- PRESS----------------*/
.content-press-main {
    width: 65%;
    margin: 0 auto;
    padding-top: 3%;
}

.content-press-main ul {
    justify-content: center;
}

@media (width <= 1366px) {
    .content-press-main {
    width: 75%;
    margin: 0 auto;
    padding-top: 3%;
}
}

@media (width <= 500px) {
    .content-press-main {
    width: 90%;
    padding-top: 10%;
    padding-bottom: 10%;
}
}