/* Importa la fuente Montserrat desde Google Fonts 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
*/
/* Estilos generales */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el scroll horizontal */
}
section {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.margen4rem{
    margin-top: 4rem !important;
}
.text-3xl {
    font-size: 1.7rem !important;
   
}
.bg-blue-800 {
    background-color: rgba(12, 27, 75, 1) !important;
}
.flex2 {
  display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Aligns items horizontally in the center */
  align-items:flex-end; /* Aligns items vertically in the center */
}
.flex-2 {
  display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Aligns items horizontally in the center */
  align-items: center; /* Aligns items vertically in the center */
}
.flex-2 span{
    width: auto;
    margin-left: .5rem;
}

/*CABECERA*/
 .logo{
            display: flex;
            justify-content: space-around;
            justify-items: center;
            align-items: center;
            
        }

.hero-img {
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
/* Animación de fade-in para secciones al aparecer */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animación para el brillo de la caldera en el hero (similar al logo) */
@keyframes boiler-hero-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 140, 0, 0.8)); }
}
.boiler-hero-icon {
    animation: boiler-hero-glow 2s infinite ease-in-out;
}

/* Estilo para el icono de teléfono SVG */
.phone-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Estilos para los pseudo-elementos de la llama */
.flame-container {
    position: relative;
    width: 2em; /* Tamaño base de la llama */
    height: 3em;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-right: .4em;
}

.flame {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(4px); /* Aumentar el desenfoque para un efecto más suave */
    transform-origin: bottom center;
    animation: flame-pulse 1.8s infinite ease-in-out;
}

.flame:nth-child(1) {
    background-color: rgba(255, 99, 71, 0.7); /* Tomato */
    height: 100%;
    animation-delay: 0s;
}
.flame:nth-child(2) {
    background-color: rgba(255, 140, 0, 0.8); /* DarkOrange */
    height: 75%;
    animation-delay: 0.2s;
}
.flame:nth-child(3) {
    background-color: rgba(255, 215, 0, 0.9); /* Gold */
    height: 50%;
    animation-delay: 0.4s;
}

@keyframes flame-pulse {
  0% {
    transform: scale(0.9) translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: scale(1.1) translateY(-10px) rotate(2deg);
    opacity: 1;
  }
  50% {
    transform: scale(1) translateY(-5px) rotate(-1deg);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.05) translateY(-8px) rotate(1deg);
    opacity: 0.95;
  }
  100% {
    transform: scale(0.9) translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
}

/* Estilos específicos para el menú móvil */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%; /* Ancho del menú desplegable */
    max-width: 300px; /* Ancho máximo para pantallas más grandes */
    height: 100%;
    background-color: #1a202c; /* Mismo color que la navegación */
    color: white;
    transform: translateX(100%); /* Oculto por defecto */
    transition: transform 0.3s ease-in-out;
    z-index: 60; /* Mayor que la navegación principal */
    padding-top: 4rem; /* Espacio para que no se superponga con la barra de navegación */
    box-shadow: -4px 0 10px rgba(0,0,0,0.3);
}
.mobile-menu.open {
    transform: translateX(0); /* Visible */
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 55;
    display: none; /* Oculto por defecto */
}
.mobile-menu-overlay.open {
    display: block;
}

/* Estilos para el carrusel de marcas */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-item {
    min-width: 100%; /* Una imagen por vista en móviles */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

 
@media (min-width: 640px) { /* sm */
    .carousel-item {
        min-width: 50%; /* Dos imágenes por vista en tabletas */
    }
    
}
@media (min-width: 1024px) { /* lg */
    .carousel-item {
        min-width: 33.33%; /* Tres imágenes por vista en escritorio */
    }   
}
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}
.carousel-button:hover {
    background-color: rgba(0,0,0,0.7);
}
.carousel-button.prev {
    left: 10px;
}
.carousel-button.next {
    right: 10px;
}

/*top*/
.faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

/* --- Nuevos Estilos para el Botón ScrollToTop con Transición Suave --- */
/* Ocultar el botón inicialmente con opacidad y sin eventos de puntero */
.hidden-flecha {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Un ligero desplazamiento hacia abajo para el efecto */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s ease-out;
}

/* Clase para hacer el botón visible */
.show-flecha {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
}  

  .emoji-comentario {
    font-size: 5em;
    position: absolute;
    top: 0;   /* Alinea con la parte superior del contenedor */
    right: 0;  /* Alinea con la parte izquierda del contenedor */
    margin-top: -4rem;
    /* margin-right: 0; */ /* Esto ya no es necesario o puede eliminarse */
    z-index: 99; /* Asegura que el emoji esté por encima de otros elementos */
}

/*retoques*/
.py-16{
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 0rem !important;
}
.notas{
    
    width: 80%;
    margin: 0 auto;
    padding-top: 6rem;
}
.idiomas{
    position: absolute;     
    top: 55%; /* Lo coloca justo debajo del elemento padre */
    align-items: center;
    margin-left: 3% !important;/*Regula donde lo quiero dejar*/    
    font-size: 16px; 
    padding: 5px 10px;  /* Opcional: un poco de espacio interno */    
    z-index: 1000; /* Asegura que quede por encima */
    
}
@media (max-width: 640px) { /* sm */
    .idiomas{
        left: 12%;
        top: 70%;
    }
}
.tel{
    margin-right: 1rem;
}
.p-4{
    padding: 1.5rem !important;
}
.items-center2{
    align-items: top;

}

#animacion {
    /* Aseguramos que el elemento se comporte como un bloque y pueda ser transformado */
    display: block; /* Importante para que ocupe su propio espacio */
        /* La animación */
    animation: zoomInFullLoop 7s ease-out infinite; /* Nombre, duración (2s animación + 5s pausa = 7s), tipo de easing, repetición */
    transform-origin: center center; /* El zoom y la escala se centran en el medio del texto */
    
    /* Configuración inicial (invisible y pequeño) solo si no hay animación activa */
    /* Estas propiedades se manejan ahora completamente por el @keyframes */
    opacity: 0; 
    transform: scale(0.1); 
}

@keyframes zoomInFullLoop {
    /* Inicia la animación (estado "invisible y pequeño") */
    0% {
        opacity: 0; 
        transform: scale(0.1); 
    }
    /* Termina la fase de "zoom-in" a los 2 segundos */
    28.57% { /* (2 segundos / 7 segundos de duración total) * 100% = ~28.57% */
        opacity: 1; 
        transform: scale(1); 
    }
    /* Mantiene el estado "visible y normal" durante los siguientes 5 segundos */
    100% {
        opacity: 1; 
        transform: scale(1); 
    }
}
.nota{
    text-align: center;
    margin-top: -30px;
    margin-bottom: 10px;
}

/* Define la animación de zarandeo SÓLO de derecha a izquierda, con movimientos más rápidos */
@keyframes fast-horizontal-shake {
  0%, 100% {
    transform: translate(0, 0); /* Posición original */
  }
  5% {
    transform: translate(-12px, 0); /* Izquierda (más intenso) */
  }
  10% {
    transform: translate(12px, 0); /* Derecha (más intenso) */
  }
  15% {
    transform: translate(-10px, 0);
  }
  20% {
    transform: translate(10px, 0);
  }
  25% {
    transform: translate(-8px, 0);
  }
  30% {
    transform: translate(8px, 0);
  }
  35% {
    transform: translate(-5px, 0);
  }
  40% {
    transform: translate(5px, 0);
  }
  45% {
    transform: translate(-3px, 0);
  }
  50% {
    transform: translate(3px, 0);
  }
  55% {
    transform: translate(0, 0); /* Vuelve a la posición original */
  }
}

/* Combina el zarandeo horizontal MUY rápido y la pausa de 10 segundos */
@keyframes super-fast-shake-then-pause {
  /* Fase de zarandeo (aproximadamente los primeros 0.5 - 1 segundo de la animación total) */
  0% { transform: translate(0, 0); }
  0.5% { transform: translate(-12px, 0); } /* Izquierda */
  1% { transform: translate(12px, 0); }  /* Derecha */
  1.5% { transform: translate(-10px, 0); }
  2% { transform: translate(10px, 0); }
  2.5% { transform: translate(-8px, 0); }
  3% { transform: translate(8px, 0); }
  3.5% { transform: translate(-5px, 0); }
  4% { transform: translate(5px, 0); }
  4.5% { transform: translate(-3px, 0); }
  5% { transform: translate(3px, 0); }
  5.5% { transform: translate(0, 0); } /* Vuelve a la posición original al final del shake */

  /* Fase de pausa (del 5.51% al 100% de la animación total) */
  5.51% { transform: translate(0, 0); } /* Asegura que se queda quieto */
  100% { transform: translate(0, 0); } /* Permanece quieto hasta el final del ciclo */
}

.hero-img {
  /* La duración total es el tiempo de zarandeo (muy rápido, aprox. 0.5s) + la pausa (10s) = 10.5s */
  animation: super-fast-shake-then-pause 10.5s ease-in-out infinite;
}