:root{
 --amarillo: #cfb153;
 --rojo: #d90310;
 --beige: #fce38d;
 --beige-claro: #fef7dd;
 --beige-medio: #ece1bc;
 --borderadius: 10px;
 --borderadiusdos: 40px;
 --texto1: #3a2e05;
 --texto2: #9c7304;
}

.amarillo{color: var(--amarillo)!important;}
.rojo{color: var(--rojo)!important;}
.beige{color: var(--beige)!important;}
.texto1{color: var(--texto1)!important;}
.texto2{color: var(--texto2)!important;}

/* RESET CSS Josh W. Comeau*/

*, *::before, *::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
a {
  color: inherit;
  text-decoration: none;
}
#root, #__next {
  isolation: isolate;
}

/* FONTS */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
  url('../fonts/SourceSansPro-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Light.woff2') format('woff2'),
  url('../fonts/SourceSansPro-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Semibold.woff2') format('woff2'),
  url('../fonts/SourceSansPro-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
  url('../fonts/SourceSansPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: 16px;
  scroll-padding-top: 70px; /* Cambia 80px por la altura real de tu menú fijo */
  scroll-behavior: smooth; /* Opcional: Para un desplazamiento suave */
}

body{
 background-color: var(--amarillo);
 font-size: 1rem;
 font-family: 'Source Sans Pro';
 font-weight: 400;
 color: var(--texto1);
}

p, ul{
  margin-bottom: 1rem;
}

.m-0{
  margin: 0!important;
}

.contenedor {
  position: relative;
  padding: 0;
  display: block;
}

.navbar {      
  background: #fff;    
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav{
 width: 100%;
 background-color: white;
 height: 70px;
 position: sticky;
 top: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: end;
 padding: 0 2rem;
}

nav ul{
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  justify-content: end;
  margin: 0;
}

header{
 position: relative;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 20px;
 padding: 2rem;
}

header h1{
  font-weight: 600;
}

header h1 + p{
  font-size: 1.2rem;
}

.destacado, .destacado div{
  width: 100%;
}

.content-destacados-item{
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0px;
}

.destacado-item a{
  position: relative;
  flex: 1 0 0;
  border-radius: var(--borderadius);
  height: 140px;
  background-color: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.destacado-item img{
  max-width: 56px;
  margin-bottom: 0.3rem;
}

header .social{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

header .social div{
  display: flex;
}

header .social ul{
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
}

.social-right a,
.social-footer a{
  width: 26px;
  height: 26px;
  background-size: cover;
  display: inline-flex;
  text-indent: -9999px;
}

.social-hero a{
  width: 32px;
  height: 32px;
  background-size: cover;
  display: inline-flex;
  text-indent: -9999px;
}

.social-right a.fb,
.social-footer a.fb,
.social-hero a.fb{
  background-image: url('../img/facebook.png');
}
.social-right a.ins,
.social-footer a.ins,
.social-hero a.ins{
  background-image: url('../img/instagram.png');
}
.social-right a.ttk,
.social-footer a.ttk,
.social-hero a.ttk{
  background-image: url('../img/tiktok.png');
}

.social-footer ul{
  display: flex;
  gap: 10px;
}

main{
 position: relative;
 flex-shrink: 0;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 background-color: white;
 width: 100%;
}

/* HERO */

#hero{
  position: relative;
}

.hero-text{
  background: #ffffff;
  background: linear-gradient(90deg,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 96%);
  position: relative;
  padding: 2rem;
}

.content-logo{
  padding: 0 3rem;
}

.hero-text-items{
  margin-top: 2rem;
  display: flex;
}

.hero-text-item{
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 2rem;
 color: var(--texto2);
 font-size: .9rem;
 flex: 1 0 0;
 flex-direction: column;
 text-align: center;
}

.hero-text-item img{
  width: 60px;
}

.social-hero{
      position: absolute;
    right: 20px;
    bottom: 200px;
    z-index: 99;
}

.social-hero ul{
  list-style: none;
  padding-left: 0;
}

.social-hero ul li{
  padding: .1rem 0;
  margin-bottom: 1rem;
}

.social-hero a{
  display: flex;
  gap: 4px;
  align-items: center;
}

.social-hero svg,
.social-hero img{
  max-width: 16px;
}

.hero-whatsapp{
  position: absolute;
  right: 10px;
  bottom: 20px;
  width: 38px;
  z-index: 99;
}

/* NOSOTROS */
#nosotros{
  padding: 2rem;
  width: 100%;
}

.nosotros-top{
  background-color: var(--beige-claro);
  border-radius: var(--borderadiusdos);
  padding: 1rem;
}

.nosotros-top-heading-text{
  text-align: center;
}

.nosotros-top-heading-text p{
  margin-bottom: 0;
}

.nosotros-top-heading-inner{
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1rem 0rem 2rem;
 gap: 30px;
 flex-direction: column;
}
.nosotros-top-heading-inner img{
  max-width: 200px;
}

.nosotros-top-heading-inner h2{
  font-size: 2rem;
  font-weight: 600;
}

.nosotros-top-heading-inner p{
  font-size: 1.2rem;
}

.nosotros-top-text{
  text-align: left;
  padding: 0 1rem;
}

.nosotros-top-items,
.horarios-top-items{
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  width: 100%;
  text-align: center;
  flex-direction: column;
}

.nosotros-top-item,
.horarios-top-item{
  position: relative;
  flex: 1 0 0;
  border-radius: var(--borderadius);
  /*height: 140px;*/
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  border: 1px dashed var(--rojo);
  gap: 10px;
  font-size: .9rem;
  width: 100%;
}

.nosotros-top-item img,
.horarios-top-item img{
  max-width: 100px;
}

.nosotros-top-item a,
.horarios-top-item a{
  background-color: var(--texto2);
  color: white;
  padding: .4rem 1rem;
  border-radius: var(--borderadius);
}

.nosotros-bottom{
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.nosotros-bottom-item{
  display: flex;
  gap: 20px;
  color: var(--texto2);
}

.nosotros-bottom-item img{
  max-width: 100px;
}

.nosotros-bottom-item:first-child{
  background-color: var(--beige-claro);
  border-radius: var(--borderadius);
  padding: 2rem;
  border: 1px dashed var(--rojo);
}

.nosotros-bottom-item:last-child{
  background-color: #f9e1e2;
  border-radius: var(--borderadius);
  padding: 2rem;
  border: 1px dashed var(--rojo);
}

.horario-item{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rojo);
}

/* RUTAS */

#rutas{
  width: 100%;
  padding: 2rem;
}

/* Custom variables for quick customization */
:root {
  --primary-color: #2563eb;
  --border-color: #e5e7eb;
  --text-muted: #4b5563;
  --bg-active: #f3f4f6;
}

.tabs-container {
  width: 100%;
  font-family: system-ui, sans-serif;
}

/* Responsive horizontal navigation container */
.tabs-nav-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth mobile swipe momentum */
}

/* Keeps all tab triggers on a single row without wrapping */
.tabs-nav {
  display: flex;
  white-space: nowrap;
  min-width: max-content; 
  background: #f9e1e2;
  padding: .5rem;
  gap: 5px;
}

/* Button interactive styling */
.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto2);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--borderadius);
}

.tab-btn:hover {
  color: var(--texto2);
  background-color: var(--beige);
}

.tab-btn.active {
  color: var(--texto1);
  background-color: var(--amarillo);
}

/* Content Panel Visibility Rules */
.tab-panel {
  padding: 1.5rem 0.5rem;
}

.tab-panel[hidden] {
  display: none;
}

.rutas-items{
  border-radius: var(--borderadius);
  border: 1px dashed var(--rojo);
  overflow: hidden;
}

.rutas-header{
  align-items: center;
  text-align: center;
  background: var(--beige-claro);
  overflow: hidden;
  display: none;
}

.rutas-header p{
  flex: 1 0 24%;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 0;
  padding: .5rem;
}

.rutas-header p:nth-child(3),
.rutas-header p:nth-child(4){
  flex: 1 0 14%;
}

.rutas-header p span{
  font-size: .7rem;
  font-weight: 400;
}

.rutas-content-items{
  border-bottom: 1px dashed var(--rojo);
  padding: 1rem 0;
}

.rutas-content-items:last-child{
  border-bottom: 0;
}

.rutas-content-items.wbg{
    background-color: var(--beige-claro);
  }

.rutas-content-item{
  text-align: center;
}

.rutas-content-item p{
  color: var(--texto2);
  font-size: .9rem;
}

.rutas-content-item-img{
  display: none;
}

/* CTA */

#cta-ayuda{
  display: flex;
  width: 100%;
  background: var(--amarillo);
  padding: 2rem;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.cta-ayuda-text{
  display: flex;
  gap: 20px;
  align-items: center;
  flex-direction: column;
}

.cta-ayuda-text svg{
  width: 50px;
  height: 50px;
}

.cta-ayuda-text p{
  font-size: 1.2rem;
}

.cta-ayuda-text p strong{
  font-size: 1.6rem;
}

/* OFICINAS */

#oficinas{
  padding: 2rem;
  display: flex;
  gap: 20px;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
}

.oficinas-item{
  display: flex;
  border: 1px solid var(--rojo);
  border-radius: var(--borderadius);
  gap: 10px;
  padding: 1rem;
  color: var(--texto2);
  width: 100%;
}

.oficina-text a{
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.oficina-map iframe{
  height: 100%;
  border: 0;
  width: calc(100vw / 3);
  border-radius: 10px;
}

/* IMPORTANTE y RECOMENDACIONES */

#importante{
  padding: 0 2rem 2rem;
  width: 100%;
  color: var(--texto2);
}

.importante-content{
  border: 1px dashed var(--rojo);
  border-radius: var(--borderadius);
  width: 100%;
  display: flex;
  background: var(--beige-claro);
  padding: 1rem;
  gap: 30px;
  flex-direction: column;
}

.importante-info{
  display: flex;
  gap: 20px;
}

.importante-info img{
  width: 40px;
}

.importante-info-texto ul{
  padding-left: 18px;
}

.importante-cta{
  flex: 1 0 25%;
}

.recomendaciones-cta{
  margin-top: 1rem;
}

.importante-cta-content,
.recomendaciones-cta-content{
  display: flex;
  gap: 10px;
}

.importante-cta-icon,
.recomendaciones-cta-icon{
  width: 40px;
}

.importante-cta-texto p,
.recomendaciones-cta-icon p{
  font-size: .9rem;
}

.importante-cta a,
.recomendaciones-cta a{
  width: 100%;
  justify-content: center;
}

/* COMPRAR BOLETOS */

#comprar-boletos, #envios{
  background: var(--beige-claro);
  padding: 2rem;
}

.comprar-boletos-title, .envios-title{
  text-align: center;
}

.comprar-boletos-content, .envios-content{
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: start;
  margin-top: 2.6rem;
  flex-wrap: wrap;
}

.comprar-boletos-item, .envios-item{
  flex: 1 0 45%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  color: var(--texto2);
}

.boletos-number, .envios-number{
    width: 26px;
    height: 26px;
    background: var(--texto2);
    color: var(--beige-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: auto;
}

.comprar-boletos-content img, .envios-content img{
  width: 50px;
  margin: auto;
}

/* ENVIOS */

.envios-title{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.envios-number{
  background: var(--rojo);
}


/* FAQS */

#faqs{
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 2rem;
  flex-direction: column;
}

.container-faqs,
.cta-faqs{
  display: flex;
  flex: 1 0 0;
}

.faq-section {
  margin: auto;
  border-radius: var(--borderadius);
  border: 1px dashed var(--rojo);
  background: var(--beige-claro);
}

.faq-question {
  width: 100%;
  text-align: left;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--texto2);
  background-color: transparent;
}

.faq-item:last-child .faq-question {
  border-bottom: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 12px;
  color: var(--texto1);
}

.faq-answer.open {
  max-height: 200px; /* ajusta según contenido */
  padding: 12px;
}

.icon {
  font-weight: bold;
}

.cta-faqs{
  flex-direction: column;
  background: var(--beige-medio);
  padding: 1rem;
  border-radius: var(--borderadius);
  border: 1px solid var(--texto1);
  justify-content: center;
  gap: 20px;
}

.cta-faqs-text{
  display: flex;
  gap: 20px;
}

.cta-faqs-text img{
  max-width: 80px;
}

.cta-faqs-text p{
  font-size: 1.2rem;
  color: var(--texto2);
}

.cta-faqs-text strong{
  font-size: 1.6rem;
}
/* FLOTA */

#flota{
  padding: 2rem;
  width: 100%;
}

.flota-images{
  display: block;
}

.flota-img img,
.flota-images img{
  width: 100%;
}

.btn-whatsapp{
  background: #3aaa35;
  padding: 0.5rem 1rem;
  border-radius: var(--borderadius);
  display: flex;
  gap: 7px;
  color: white;
  align-items: center;
  width: fit-content;
}

.btn-whatsapp svg{
  fill: white;
} 

/* FOOTER */

footer{
  width: 100%;
  padding: 2rem;
  background-color: var(--beige-medio);
}

.footer-enlaces{
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.footer-item{
  flex: 1 0 0;
  color: var(--texto2);
}

.footer-item:first-child{
  flex: 1 0 10%;
}

.footer-item ul{
  list-style: none;
  padding-left: 0;
}

.footer-item ul li{
  padding: .1rem 0;
}

.footer-item a{
  display: flex;
  gap: 4px;
  align-items: center;
}

.footer-item svg,
.footer-item img{
  max-width: 16px;
}

.footer-item:first-child img{
  max-width: 250px;
}

.credits{
  padding: 1rem;
  text-align: center;
}

/* ENCOMIENDAS */

#encomiendas{
  padding: 2rem;
}

.encomiendas-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  gap: 20px;
  flex-direction: column;
  text-align: center;
}

.encomiendas-tarifas{
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: flex-start;
}

.tit-tarifas{
  margin-bottom: 1rem;
}

.encomiendas-tabla{
  flex: 1 0 70%;
  font-size: .9rem;
}

.encomiendas-tabla-contenido{
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--rojo);
  border-radius: var(--borderadius);
  background: var(--beige-claro);
  margin-bottom: 1rem;
}

.encomiendas-tabla-celda{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px solid var(--rojo);
  flex-direction: column;
  text-align: center;
  padding: 1rem;
}

.encomiendas-tabla-celda:last-child{
  border-bottom: 0;
}

.encomiendas-tabla-item{
  flex: 1 0 24%;
  text-align: center;
  margin-bottom: 0;
  padding: .4rem .3rem;
}


.encomiendas-recomendaciones{
  background: var(--beige-claro);
    padding: 1rem;
    border-radius: var(--borderadius);
    border: 1px dashed var(--rojo);
    font-size: .9rem;
}



/* CSS */
.hamburger, .navlogo {
  display: none;
  font-size: 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
}

.navlogo {
  font-size: 1rem;
}

/* TyC */
.encabezado-tyc{
  padding: 2rem;
  width: 100%;
}

.encabezado-tyc-contenido{
  background-color: var(--beige-claro);
  border-radius: var(--borderadius);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  border: 1px dashed var(--rojo);
  flex-direction: column;
}

.encabezado-tyc-text{
  text-align: center;
}

.encabezado-tyc-contenido img{
  max-width: 200px;
}

.tycpp{
  padding: 0 2rem;
}

.tycpp h2{
  font-size: 1.2rem;
  font-weight: 600;
}

#horarios{
  padding: 2rem;
  width: 100%;
}

/* MEDIA QUERIES */

@media screen and (min-width: 992px){
  .mobile{
    display: none;
  }
  .contenedor {
    padding: 0px 0px 0px 32vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header{
    position: fixed;
    gap: 20px;
    padding: 2rem 4rem;
    left: 0;
    right: auto;
    width: 32vw;
  }

  header h1 + p{
    font-size: 1.4rem;
  }

  nav .btn-whatsapp{
    margin-left: 3rem;
  }

  .hero-text-item{
    text-align: left;
  }

  .hero-text{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-width: 400px;
    padding: 2rem 8rem 2rem 2rem;
  }

  .content-logo{
    padding: 0;
  }

  .hero-text-items{
    flex-direction: column;
  }

  .nosotros-top-items,
  .nosotros-top-heading-inner,
  .hero-text-item,
  .nosotros-bottom,
  #faqs,
  .footer-enlaces,
  #oficinas,
  #cta-ayuda,
  .cta-ayuda-text,
  .horarios-top-items,
  .importante-content,
  .encomiendas-tabla-celda,
  .encomiendas-tarifas,
  .encomiendas-title,
  .envios-title,
  .encabezado-tyc-contenido{
    flex-direction: row;
  }

  .nosotros-logo{
    display: flex;
  }

  .nosotros-top-text{
    padding: 0 3rem;
  }

  .nosotros-top-heading-text{
    max-width: 30vw;
  }

  .oficinas-item{
    width: 31%;
  }

  .oficina-map iframe{
    width: calc(100vw / 14);
  }

  .nosotros-top-items,
  .horarios-top-items{
    justify-content: start;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .nosotros-top-item,
  .horarios-top-item{
    justify-content: start;
  }

  .nosotros-top-item p,
  .horarios-top-item p{
    color: var(--texto2);
  }

  .rutas-header{
    display: flex;
  }

  .rutas-content-items{
    display: flex;
  }
  .rutas-content-item{
    flex: 1 0 24%;
    border-right: 1px dashed var(--rojo);
    padding: .5rem .6rem;
  }

  .rutas-content-item:last-child{
    border-right: 0;
  } 

  .rutas-content-item:nth-child(1){
    display: flex;
    gap: 10px;
  }

  .rutas-content-item-img{
    width: 50px;
    height: 50px;
    display: flex;
  }

  .rutas-content-item:nth-child(3), 
  .rutas-content-item:nth-child(4) {
    flex: 1 0 14%;
  }

  .rutas-content-items{
    border-bottom: 0;
    padding: 0;
  }

  .rutas-ruta{
    text-align: left;
  }

  .rutas-content-item:last-child{
    text-align: left;
  } 

  .comprar-boletos-item, .envios-item{
    flex: 1 0 22%;
  }

  .encomiendas-texto {
    padding: 0 2rem 2rem;
  }

  .encomiendas-tabla-celda{
    padding: 0;
  }

  .tycpp{
    padding: 0 4rem;
  }
}


/* Responsive */
@media (max-width: 992px) {
  .desktop{
    display: none;
  }
  .hamburger, .navlogo {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    background: #fff;
    width: 200px;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .nav-links.active {
    display: flex;
    width: 100%;
    align-items: start;
  }

  .fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
  }
  .encomiendas-tabla-celda.encabezado{
    display: none;
  }
}

.swiper-pagination-bullet{
  width: 12px;
  height: 12px;
}

.swiper-pagination-bullet-active{
  background: var(--beige-claro);
}