/* 
Theme Name: Panasur WordPress Theme
Theme URI: https://monkey.pe/
Description: A Hello Elementor child theme created by Monkey.
Author: Monkey
Author URI: https://monkey.pe/
Template: hello-elementor
Version: 1.0.0
Text Domain: panasur-project-theme
*/

/*Oculta el header y footer de las paginas*/
#content .page-header,
#site-footer .footer-inner {
    display: none;
}

/*Formulario de contacto*/
.dm-form {
  max-width: 100%;
}

.dm-form .dm-row.two-cols {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dm-form .dm-row.two-cols .dm-field {
  flex: 1 1 calc(50% - 8px);
}

.dm-form .dm-field {
  margin-bottom: 18px;
}

.dm-form .two-cols .dm-field {
	margin-bottom: 9px !important;
}

.dm-form .dm-field label {
  display: block;
  font-size: 16px;
  color: #696C80;
  margin-bottom: 8px;
  font-weight: 400;
}

.dm-form input[type="text"],
.dm-form input[type="email"],
.dm-form input[type="tel"],
.dm-form textarea {
  width: 100%;
  border: 1px solid #D3D7E5;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px;
  color: #374151;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s ease;
}

.dm-form input[type="text"]:focus,
.dm-form input[type="email"]:focus,
.dm-form input[type="tel"]:focus,
.dm-form textarea:focus {
  border-color: #c7d2fe;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.08);
}

.dm-form textarea {
  min-height: 60px !important;
 height: 120px;
}

.dm-form input::placeholder,
.dm-form textarea::placeholder {
  color: #696C80;
}

.dm-form .dm-submit {
  margin-top: 8px;
}

.dm-form input[type="submit"] {
  background: #EF6D14;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease;
}

.dm-form input[type="submit"]:hover {
  background: #EF6D14;
}

@media (max-width: 767px) {
  .dm-form .dm-row.two-cols {
    display: block;
  }

  .dm-form .dm-row.two-cols .dm-field {
    flex: 1 1 100%;
  }
}

/*Timeline*/
.timeline-item {
  position: relative;
}

/* Contenido oculto por defecto */
.timeline-item .timeline-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Punto por defecto gris */
.timeline-item .timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #626D84;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
}

/* Hover del item */
.timeline-item:hover .timeline-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.timeline-item:hover .timeline-dot {
  background: #EF6D14;
}

/* Estado activo por click */
.timeline-item.is-active .timeline-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.timeline-item.is-active .timeline-dot {
  background: #EF6D14;
}

/* Año por defecto gris */
.timeline-item .timeline-year p {
  color: #626D84;
  transition: all 0.3s ease;
}

/* Año en hover */
.timeline-item:hover .timeline-year p {
  color: #EF6D14;
}

/* Año en estado activo por click */
.timeline-item.is-active .timeline-year p {
  color: #EF6D14;
}

/*Arrow slide*/
.custom-arrow {
  cursor: pointer;
  transition: opacity .25s ease, filter .25s ease;
  opacity: 1;
}

.custom-arrow.is-disabled img {
  opacity: .50;
  cursor: default;
  pointer-events: none;
}

/*Hero principal*/
/* 1. El Track Gigante */
.scroll-track {
    position: relative !important;
    width: 100% !important;
    /* Elementor a veces añade padding, lo quitamos */
    padding: 0 !important; 
}

/* 2. El Hero Pegajoso*/
.sticky-hero {
    position: sticky !important;
    /* Cambia el 80px por el alto real de tu cabecera */
    top: 96px !important; 
    /* Restamos el alto de la cabecera para que la imagen no se corte abajo */
    height: calc(100vh - 96px) !important; 
    width: 100% !important;
    overflow: hidden !important; 
}

/* 3. Las capas (Idénticas a antes) */
/* Buses: Ajustado para que GSAP lo anime desde la izquierda */
.hero-buses {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    
    /* ¡BORRAMOS EL TRANSFORM DE AQUÍ! */
    
    width: 100% !important;
    z-index: 5 !important;
    
    /* Lo ocultamos al inicio para evitar parpadeos */
    opacity: 0;
    visibility: hidden;
}

/* Ocultamos el SVG y el texto final POR DEFECTO */
.hero-logo-svg,
.hero-main-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* ¡BORRAMOS EL TRANSFORM DE AQUÍ! GSAP se encargará de esto */
    
    width: 100% !important;
    max-width: 1000px !important;
    opacity: 0;
    visibility: hidden;
}
.hero-logo-svg { z-index: 4 !important; }
.hero-main-content { z-index: 10 !important; }

/* =========================================
   AJUSTES EXCLUSIVOS PARA MÓVILES (Celulares)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Usamos 'svh' para que la barra de direcciones del celular no corte el diseño. 
          También restamos los 80px de tu cabecera. */
    .sticky-hero {
        height: calc(100svh - 80px) !important; 
    }

    /* 2. Engrandecemos el bus para que se vea imponente y no como un juguete.
          GSAP se encargará de mantenerlo centrado aunque sea más ancho que la pantalla. */
    .hero-buses {
        width: 220% !important; /* Ajusta este % si lo quieres más grande o más chico */
        max-width: none !important;
        bottom: 2% !important; /* Lo despegamos un poquito del borde inferior */
    }

    /* 3. Le damos un margen seguro a los textos y al logo 
          para que no choquen contra los bordes del teléfono */
    .hero-logo-svg,
    .hero-main-content {
        width: 90% !important; 
    }
}

@media (max-width: 768px) {
  .hero-buses {
    /* Mueve el bus hacia la derecha para revelar la parte delantera */
    left: 10% !important; 
  }
}

/* =========================================
   AJUSTES PARA PANTALLAS CORTAS DE ALTO 
   (Laptops pequeñas o ventanas tipo 1280x540)
   ========================================= */
@media (max-height: 700px) and (min-width: 769px) {
    
    /* 1. Subimos el punto de anclaje de los textos para alejarlos del bus */
    .hero-logo-svg,
    .hero-main-content {
        top: 35% !important; /* Subimos el centro del 50% al 35% */
        max-width: 700px !important; /* Las hacemos un poco más pequeñas para que encajen mejor */
    }

    /* 2. Reducimos ligeramente el ancho del bus para que no sea tan alto */
    .hero-buses {
        width: 85% !important; 
    }
}

/*Blog*/
.single-post .footer {
  border-radius: 0;
}

/*Menu*/
@media screen and (min-width: 768px){
	nav ul li.btn-mobile{
	display: none !important;
}
}