/* Estilos Personalizados para El Plomero Website */

/* Aplicar la fuente Garet a todo el cuerpo del documento */
body {
    font-family: 'Garet', sans-serif;
}

.text-color {
    color: #25527c !important;
}

/* Color primario personalizado: #25527c (Sección 1 y 5) */
.bg-primary-custom {
    background-color: #25527c !important;
}

/* Color secundario (botones) y línea de testimonio: #ff004d */
.btn-secondary-custom {
    background-color: #ff004d;
    border-color: #ff004d;
    color: white;
    /* Para asegurar que el color se mantenga en hover/focus si es necesario */
    transition: background-color 0.3s ease;
}

.btn-secondary-custom:hover, .btn-secondary-custom:focus {
    background-color: #e60045; /* Un tono un poco más oscuro para hover */
    border-color: #e60045;
    color: white;
}

/* Estilo para los botones de WhatsApp (si deseas un color diferente, como verde o el mismo secundario) */
.btn-whatsapp {
    background-color: #ff004d; /* Se usa el color del botón principal */
    border-color: #ff004d;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-whatsapp:hover, .btn-whatsapp:focus {
    background-color: #e60045;
    border-color: #e60045;
    color: white;
}

/* Estilo para la línea roja de los testimonios */
.red-line {
    width: 50px; /* Ancho de la línea */
    height: 5px; /* Altura de la línea */
    background-color: #ff004d;
    margin: 0 auto; /* Centrar la línea */
}

/* Estilos para que los iconos de la sección 4 no se vean extraños sin una imagen */
.col:has() {
    min-height: 100px; /* Altura mínima para asegurar el espacio */
}

/* Opcional: Estilo para la imagen del plomero en la sección 1 (simulación de un recorte) */
#seccion1 img {
    /* Eliminado el width: 30% original, ahora es 100% en el HTML para mejor respuesta */
    height: auto;
    max-width: 100%;
}

/* Estilo para el texto en la sección 1 para simular el diseño del PDF */
#seccion1 h1 {
    line-height: 1.2;
}
#seccion1 h1 span {
    font-size: 0.7em; /* Para que el texto "Multiservicios confiables Monterrey" sea más pequeño */
    font-weight: normal;
    display: block; /* Asegura el salto de línea */
}


/* 🚩 Requerimiento 2: Media Query para móvil (max-width: 767px es el breakpoint de Bootstrap para sm y abajo) */
@media (max-width: 767.98px) {
    /* 🚩 Requerimiento 2: Centrar el texto en toda la página en mobile
       Esto centra el texto que no está afectado por las clases de alineación de Bootstrap (como text-md-start)
       y corrige la alineación de listas y elementos no manejados con flexbox. */
    body {
        text-align: center;
    }

    /* Ajuste específico para el navbar-nav para que la lista se centre si no está en un col */
    .navbar-nav {
        width: 100%;
        text-align: center; /* Asegura que el texto dentro del menú desplegable se centre */
    }

    /* Asegurar que las secciones de la lista se centren en mobile */
    #seccion7 ul {
        list-style-position: inside; /* Mueve la viñeta dentro, ayudando a centrar */
        padding-left: 0;
        /* Estilos opcionales para lista, si el padding del ul interfiere con el centrado del texto en body */
    }

    /* Remover los bordes de la sección FAQ en mobile (para evitar el doble borde) */
    #seccion6 .col-lg-6 {
        border-right: none !important;
        border-left: none !important;
    }

    /* Remover el padding-left en mobile para las preguntas del lado derecho */
    .padding-left-lg-5 {
        padding-left: 0 !important;
    }
}


/* Usamos media queries para deshacer las propiedades de mobile en lg, pero ya están cubiertas por las clases de Bootstrap (text-lg-start, d-none d-lg-block, etc.) */
/* Agregamos una clase para el borde en desktop de la sección FAQ */
@media (min-width: 992px) {
    #seccion6 .col-lg-6:first-child {
        border-right: 2px solid #e60045 !important;
        border-left: none !important; /* Asegurar que no haya borde a la izquierda */
    }
    #seccion6 .col-lg-6:last-child {
        border-left: 2px solid #e60045 !important;
        border-right: none !important; /* Asegurar que no haya borde a la derecha */
    }
    .padding-left-lg-5 {
        padding-left: 5% !important; /* Reestablecer el padding en lg+ */
    }
}