/* public/assets/css/style.css */

:root {
    --public-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --public-font-family-base: var(--public-font-family-sans-serif);

    /* Paleta de Colores Business Card */
    --airclean-navy: #04142f;
    --airclean-teal: #50bec0;
    --airclean-teal-darker: #3E92CC;
    --airclean-white: #FFFFFF;
    --airclean-light-gray: #f0f4f8;
    --airclean-text-dark: #04142f;
    --airclean-text-light: #f8f9fa;
    --airclean-text-muted-on-dark: #adb5bd;

    /* Asignación a variables de tema público */
    --public-primary-color: var(--airclean-navy);
    --public-secondary-color: var(--airclean-teal);
    --public-light-bg: var(--airclean-light-gray);
    --public-white-color: var(--airclean-white);
    --public-dark-text: var(--airclean-text-dark);
    --public-link-color: var(--airclean-teal);
    --public-link-hover-color: var(--airclean-teal-darker);

    --public-border-radius: 0.375rem;
    --public-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --public-transition-speed: 0.3s ease;
}

body {
    font-family: var(--public-font-family-base);
    color: var(--public-dark-text);
    background-color: var(--public-white-color);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--public-primary-color);
    font-weight: 700;
}

a {
    color: var(--public-link-color);
    text-decoration: none;
    transition: color var(--public-transition-speed);
}
a:hover {
    color: var(--public-link-hover-color);
}

/* Botones */
.btn-primary { 
    background-color: var(--public-secondary-color);
    border-color: var(--public-secondary-color);
    color: var(--public-primary-color);
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    transition: all var(--public-transition-speed);
}
.btn-primary:hover {
    background-color: var(--public-link-hover-color);
    border-color: var(--public-link-hover-color);
    color: var(--public-primary-color);
    transform: translateY(-2px);
}
.btn-secondary {
    background-color: var(--public-primary-color);
    border-color: var(--public-primary-color);
    color: var(--public-white-color);
    font-weight: 500;
    padding: 0.65rem 1.5rem;
}
.btn-secondary:hover {
    background-color: #34495e;
    border-color: #34495e;
    color: var(--public-white-color);
    transform: translateY(-2px);
}
.btn-outline-primary {
    color: var(--public-secondary-color);
    border-color: var(--public-secondary-color);
    font-weight: 500;
}
.btn-outline-primary:hover {
    background-color: var(--public-secondary-color);
    color: var(--public-primary-color);
}

/* Header Glass con Resplandor */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--airclean-navy);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(85, 221, 224, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1),
                0 1px 0 rgba(85, 221, 224, 0.1) inset,
                0 -1px 8px rgba(85, 221, 224, 0.15);
    transition: all 0.4s ease;
}

.site-header .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: transparent !important;
}

.site-header .navbar-brand img.public-site-logo {
    max-height: 45px;
    width: auto;
    transition: all 0.3s ease;
}

.site-header .navbar-brand:not(:has(img)) {
    color: var(--public-white-color);
    font-weight: bold;
    font-size: 1.75rem;
}

.site-header .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: var(--public-border-radius);
    transition: all 0.3s ease;
    position: relative;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--public-white-color) !important;
    background-color: rgba(85, 221, 224, 0.15);
}

.site-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--public-secondary-color);
    transition: width 0.3s ease;
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    width: calc(100% - 2rem);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2885, 221, 224, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}

.navbar-dark .navbar-toggler:hover .navbar-toggler-icon {
    transform: rotate(90deg);
}

/* Menú desplegable */
.site-header .dropdown-menu {
    background-color: rgba(34, 47, 61, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(85, 221, 224, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.site-header .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.2s ease;
}

.site-header .dropdown-item:hover {
    background-color: rgba(85, 221, 224, 0.1);
    color: var(--public-white-color);
}

/* Carrusel de Slides */
#heroCarousel .carousel-item img {
    min-height: 350px;
    max-height: 70vh;
    object-fit: cover;
    width: 100%;
}

#heroCarousel .carousel-caption {
    background: linear-gradient(to top, rgba(34, 47, 61, 0.9) 0%, rgba(34, 47, 61, 0.7) 60%, rgba(34, 47, 61, 0) 100%);
    padding: 2rem;
    border-radius: 0;
    bottom: 0;
    left:0; right:0;
    text-align: left;
}

#heroCarousel .carousel-caption h5 {
    color: var(--public-white-color);
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

#heroCarousel .carousel-caption p {
    color: var(--airclean-light-gray);
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    max-width: 70%;
}

#heroCarousel .carousel-caption .btn-primary {
    background-color: var(--airclean-teal);
    border-color: var(--airclean-teal);
    color: var(--airclean-navy);
}

#heroCarousel .carousel-caption .btn-primary:hover {
    background-color: var(--airclean-teal-darker);
    border-color: var(--airclean-teal-darker);
}

/* Sección de Bienvenida */
.welcome-section {
    padding: 4rem 1rem;
}

.welcome-section h2.display-5 {
    color: var(--public-primary-color);
    margin-bottom: 1.5rem;
}

.welcome-section .lead {
    color: var(--admin-text-muted); /* Note: var(--admin-text-muted) might not be defined in public CSS */
    margin-bottom: 2.5rem;
}

.welcome-section .btn-lg {
    background-color: var(--public-secondary-color);
    border-color: var(--public-secondary-color);
    color: var(--public-primary-color);
}

.welcome-section .btn-lg:hover {
    background-color: var(--public-link-hover-color);
    border-color: var(--public-link-hover-color);
}

/* Servicios Destacados */
.featured-services { 
    background-color: var(--public-light-bg); 
    padding: 4rem 1rem;
}

.featured-services h2 {
    color: var(--public-primary-color);
    margin-bottom: 3rem;
}

.service-card {
    border: none;
    border-radius: var(--public-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform var(--public-transition-speed), box-shadow var(--public-transition-speed);
    background-color: var(--public-white-color);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.12); 
}

.service-card .card-img-top, .service-card .card-icon-top {
    border-top-left-radius: var(--public-border-radius);
    border-top-right-radius: var(--public-border-radius);
    height: 220px;
    object-fit: cover;
}

.service-card .card-icon-top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
}

.service-card .card-icon-top i {
    color: var(--public-secondary-color);
}

.service-card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-card .card-title a {
    font-size: 1.3rem;
    color: var(--public-primary-color);
    text-decoration: none;
    font-weight: 600;
}

.service-card .card-title a:hover {
    color: var(--public-secondary-color);
}

.service-card .card-text {
    font-size: 0.95rem;
    color: var(--admin-text-muted); /* Note: var(--admin-text-muted) might not be defined in public CSS */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.service-card .card-footer {
    background-color: transparent; 
    border-top: none;
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: auto;
}

.service-card .btn-outline-primary { 
    border-color: var(--public-secondary-color);
    color: var(--public-secondary-color);
    font-weight: 500;
}

.service-card .btn-outline-primary:hover {
    background-color: var(--public-secondary-color);
    color: var(--public-primary-color);
}

/* En public/assets/css/style.css */

/* --- Estilos del Footer Público (Refinados) --- */
.site-footer {
    background-color: var(--airclean-navy); 
    color: var(--airclean-text-muted-on-dark); 
    padding: 3rem 1rem 1.5rem 1rem; /* Padding ajustado */
    margin-top: 3rem; 
    font-size: 0.9rem; 
}
.site-footer .footer-main {
    padding-bottom: 1.5rem;
}
.site-footer h5 {
    color: var(--airclean-white);
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.05rem; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.site-footer .footer-about-text {
    font-size: 0.9rem; 
    line-height: 1.6;
}
.site-footer .social-links a {
    color: var(--airclean-text-muted-on-dark);
    font-size: 1.4rem; 
    transition: color 0.3s ease, transform 0.3s ease;
}
.site-footer .social-links a:hover {
    color: var(--airclean-teal);
    transform: translateY(-2px); 
}
.site-footer .footer-links a, .site-footer .footer-contact-info a {
    color: var(--airclean-text-muted-on-dark); 
    text-decoration: none;
    transition: color 0.3s ease;
}
.site-footer .footer-links a:hover, .site-footer .footer-contact-info a:hover {
    color: var(--airclean-teal); 
}
.site-footer .footer-contact-info i.fa-fw {
    color: var(--airclean-teal);
    width: 22px; /* Asegurar alineación */
    text-align: center;
}

/* Sección de Métodos de Pago */
.payment-methods-icons {
    color: #aeb1b5; /* Un gris claro para los iconos */
}
.payment-methods-icons i {
    margin-right: 0.8rem;
    font-size: 1.8rem; /* Iconos más grandes */
}

/* Sección Legal y Créditos Inferior */
.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 2rem 0 1.5rem;
}
.footer-legal-links {
    text-align: center;
}
.footer-legal-links a {
    color: var(--airclean-text-muted-on-dark);
    font-size: 0.8rem;
    margin: 0 10px;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    transition: color 0.3s ease;
}
.footer-legal-links a i {
    margin-right: 5px; 
}
.footer-legal-links a:hover {
    color: var(--airclean-teal);
}
.footer-bottom {
    padding-top: 1.5rem;
}
.footer-credits {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}
.developer-credit, .copyright-text {
    margin: 0;
    padding: 0.25rem 0;
}
/* Créditos del desarrollador sutiles pero realzados */
.developer-credit a {
    color: rgba(255,255,255,0.5); /* Color sutil */
    text-decoration: none;
    font-weight: 400; /* No tan grueso */
    transition: color 0.3s ease;
}
.developer-credit a:hover {
    color: var(--airclean-teal); /* Resalta al pasar el mouse */
}
.copyright-text {
    text-align: center; 
}

/* Ajustes para alinear créditos en pantallas más grandes */
@media (min-width: 576px) {
    .developer-credit { text-align: left; }
    .copyright-text { text-align: right; }
}

/* --- Botón Flotante de WhatsApp (CORREGIDO Y MEJORADO) --- */
.whatsapp-float-button {
    position: fixed; /* Clave para que flote */
    width: 60px;
    height: 60px;
    bottom: 30px; /* Ajusta según necesites */
    right: 30px;  /* Ajusta según necesites */
    background-color: #25D366; 
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px; /* Tamaño del icono */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    z-index: 1050; /* Asegurar que esté por encima de otros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--public-transition-speed), box-shadow var(--public-transition-speed);
    text-decoration: none; /* Quitar subrayado si es un <a> */
}
.whatsapp-float-button:hover {
    transform: scale(1.1) translateY(-3px); /* Efecto de elevación y zoom */
    box-shadow: 4px 4px 12px rgba(0,0,0,0.4);
    color: #FFF; 
    text-decoration: none;
}
.whatsapp-float-button i.fab.fa-whatsapp { /* Específico para el icono de FontAwesome */
    line-height: 1; /* Ayuda a centrar el icono si es necesario */
}


.section-padding { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Media Queries (tus estilos, mantenidos) */
@media (max-width: 992px) {
    .site-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .site-header .navbar-collapse { background-color: rgba(34, 47, 61, 0.98); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 1rem; margin-top: 0.5rem; border-radius: 0 0 var(--public-border-radius) var(--public-border-radius); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
    .site-header .nav-link { margin: 0.25rem 0; }
}
@media (max-width: 768px) {
    /* Estilos para el carrusel y bienvenida en pantallas más pequeñas, ya los tenías */
}
@media (max-width: 576px) {
    .site-header .navbar-brand img.public-site-logo { max-height: 40px; }
    .whatsapp-float-button { width: 50px; height: 50px; font-size: 24px; bottom: 20px; right: 20px; }
}

/* Añadir a public/assets/css/style.css */

/* --- Franja Publicitaria Roja con Transición --- */
.promo-banner {
    background-color: rgba(255, 0, 0, 0.75); /* Rojo con ligera transparencia */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--airclean-white);
    padding: 0.5rem 0;
    text-align: center;
    font-weight: 500;
    height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky; 
    top: var(--header-height, 70px); /* Se pega justo debajo del header */
    z-index: 1029; 
    overflow: hidden;
    transition: transform 0.4s ease-in-out; 
    font-size: 1.6rem; 
    font-style: italic;
}
.promo-banner.hidden {
    transform: translateY(-150%); /* Ocultar deslizando hacia arriba */
}
#promo-text-ticker {
    display: inline-block;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0; 
}

/* Nuevos Estilos para el Header CTA */
.header-cta-area {
    gap: 1rem;
    display: flex;
    align-items: center;
}
.btn-cta-header {
     background-color: var(--airclean-teal); /* Color turquesa */
    color: var(--airclean-navy) !important; /* Texto navy */
     white-space: nowrap; 
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.btn-cta-header:hover, .btn-cta-header:focus {
    box-shadow: 4px 4px 12px rgba(0,0,0,0.4);
    background-color: var(--airclean-teal-darker);
    color: var(--airclean-navy) !important;
    transform: scale(1.05); /* Efecto de crecimiento sutil */
}

/* Teléfono GRANDE, BOLD y BLANCO */
.header-phone-number {
    color: var(--airclean-white);
    font-size: 1.5rem; /* Más grande */
    font-weight: 700; /* BOLD */
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
}
.header-phone-number:hover {
    color: var(--airclean-teal); 
    text-decoration: none; 
}


/* --- Estilos para Botón Flotante de Citas (Izquierda) --- */
.floating-cta-button {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    left: 30px; /* Posicionado a la izquierda */
    background-color: var(--airclean-teal); /* Color turquesa */
    color: var(--airclean-navy) !important; /* Texto navy */
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--public-transition-speed), box-shadow var(--public-transition-speed), background-color var(--public-transition-speed);
    text-decoration: none;
    border: 2px solid var(--airclean-white); /* Borde blanco para destacar */
}
.floating-cta-button:hover {
    transform: scale(1.1);
    box-shadow: 4px 4px 12px rgba(0,0,0,0.4);
    background-color: var(--airclean-teal-darker);
    color: var(--airclean-navy) !important;
    text-decoration: none;
}
.floating-cta-button i.fas.fa-calendar-alt {
    line-height: 1;
}

/* En móvil, el menú colapsable de Bootstrap necesita espacio para los botones */
@media (max-width: 991.98px) {
    /* Ocultamos por defecto el botón y el teléfono del header en tablet/móvil */
     .promo-banner {
    font-size: 1rem; 
    font-style: italic;}
   
   .promo-banner.hidden {
    transform: translateY(-100%);
    top: var(--header-height, 70px); /* Se pega justo debajo del header */
    top: 0; /* Opcional, para que se oculte completamente arriba */
}

    /* Estilos para cuando los elementos CTA están dentro del menú hamburguesa colapsado */
    .site-header .navbar-collapse .header-cta-area {
        flex-direction: column; 
        align-items: flex-start !important;
        width: 100%;
        gap: 0.75rem; 
        margin-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 1rem;
    }
    .site-header .navbar-collapse .header-cta-area .btn-cta-header {
        width: 100%; /* Botón ocupa todo el ancho */
        text-align: center;
        display: flex; /* Para centrar el icono y texto */
        justify-content: center;
    }
    /* El teléfono no se muestra en móvil por defecto (d-none d-lg-block) */
    /* Si quisieras mostrarlo en el menú hamburguesa, quita esa clase de Bootstrap del HTML */
}

/* Ajuste para que los dos botones flotantes no se superpongan en móvil */
@media (max-width: 576px) {
    .whatsapp-float-button {
        /* ... tus estilos existentes para el botón de whatsapp en móvil ... */
        bottom: 20px;
        right: 20px;
    }
    .floating-cta-button {
        width: 50px;
        height: 50px;
        font-size: 22px;
        bottom: 20px;
        left: 20px; /* Posición del botón de citas en móvil */
    }

    .promo-banner {
    
    top: var(--header-height, 70px); /* Se pega justo debajo del header */
    top: 0; /* Opcional, para que se oculte completamente arriba */
}
    .my-5 {
    margin-top: 1rem !important; 
    margin-bottom: 1rem !important; 
}
    
}

.footer-social-icons a {
    color: var(--airclean-text-muted-on-dark);
    font-size: 1.2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.footer-social-icons a:hover {
    color: var(--airclean-teal);
    transform: scale(1.1);
}
.footer-legal-links a {
    color: var(--airclean-text-muted-on-dark);
    font-size: 0.8rem;
    margin: 0 10px;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    transition: color 0.3s ease;
}
.footer-legal-links a i {
    margin-right: 5px; 
}
.footer-legal-links a:hover {
    color: var(--airclean-teal);
}
.footer-bottom {
    padding-top: 1.5rem;
}
.footer-credits {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}
.developer-credit, .copyright-text {
    margin: 0;
    padding: 0.25rem 0;
}
/* Créditos del desarrollador sutiles pero realzados */
.developer-credit a {
    color: rgba(255,255,255,0.5); /* Color sutil */
    text-decoration: none;
    font-weight: 400; /* No tan grueso */
    transition: color 0.3s ease;
}
.developer-credit a:hover {
    color: var(--airclean-teal); /* Resalta al pasar el mouse */
}
.copyright-text {
    text-align: center; 
}

/* Ajustes para alinear créditos en pantallas más grandes */
@media (min-width: 576px) {
    .developer-credit { text-align: left; }
    .copyright-text { text-align: right; }
}

/* Añadir a public/assets/css/style.css */

/* --- Estilos para la Sección "Por Qué Elegirnos" --- */
.why-choose-us-section {
    background-color: var(--public-white-color);
}

.why-us-card {
    border: 1px solid #e9ecef;
    border-radius: var(--public-border-radius);
    transition: all var(--public-transition-speed);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.why-us-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 2rem rgba(4, 20, 47, 0.1);
    border-color: var(--public-secondary-color);
}

.why-us-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: rgba(80, 190, 192, 0.1); /* Turquesa muy transparente */
    color: var(--public-secondary-color); /* Icono turquesa */
    transition: all var(--public-transition-speed);
}

.why-us-card:hover .why-us-icon {
    background-color: var(--public-secondary-color); /* Fondo turquesa sólido */
    color: var(--public-white-color); /* Icono blanco */
    transform: scale(1.1) rotate(-10deg); /* Animación sutil del icono */
}

.why-us-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-us-card .card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--public-primary-color);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.why-us-card .card-text {
    font-size: 0.95rem;
    color: var(--admin-text-muted); /* Note: var(--admin-text-muted) might not be defined in public CSS */
    line-height: 1.6;
    flex-grow: 1; /* Para que el texto crezca y los cards se alineen si tienen diferentes alturas de texto */
}

/* --- Estilos para el Botón Central del Slide --- */
.carousel-item {
    position: relative; /* Necesario para posicionar el botón absolutamente dentro */
}

.carousel-caption-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
   justify-content: flex-end;
    align-items: center; /* Centrar horizontalmente el contenido */
    padding-bottom: 5rem; /* Empujar un poco hacia arriba desde el fondo */
}



.btn-slide-cta {
    background-color: rgba(255, 255, 255, 0.15); /* Fondo blanco semi-transparente */
    border: 2px solid var(--airclean-white); /* Borde blanco */
    color: var(--airclean-white);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 2rem;
    border-radius: 50px; /* Botón con bordes completamente redondeados */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all var(--public-transition-speed);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.btn-slide-cta:hover {
    background-color: var(--airclean-white); /* Fondo blanco sólido al pasar el mouse */
    color: var(--airclean-navy); /* Texto navy */
    transform: scale(1.05); /* Ligero zoom */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* El caption existente se posiciona relativamente al final */
#heroCarousel .carousel-caption {
    position: relative; /* Cambiado de absolute */
    background: none; /* Quitar el fondo degradado si el botón central es el protagonista */
    padding: 1rem;
    bottom: auto;
    left: auto;
    right: auto;
    text-align: center; /* Centrar el texto opcional */
    max-width: 80%; /* Limitar ancho para que no se pegue a los bordes */
}
#heroCarousel .carousel-caption h5 {
    font-size: 2.2rem;
}
#heroCarousel .carousel-caption p {
    font-size: 1.1rem;
    max-width: 100%; /* El párrafo ocupa el ancho del caption */
}


/* Ajustes responsivos para el nuevo botón y caption */
@media (max-width: 768px) {
    .carousel-caption-wrapper {
        padding-bottom: 2rem; /* Subir un poco menos en móvil */
        justify-content: flex-end; /* Posicionar todo hacia abajo */
    }
    .btn-slide-cta {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    #heroCarousel .carousel-caption {
        padding: 0.5rem; /* Menos padding en móvil */
    }
    #heroCarousel .carousel-caption h5 {
        font-size: 1.5rem;
    }
    #heroCarousel .carousel-caption p {
        font-size: 0.9rem;
    }
}


/* En public/assets/css/style.css */

/* --- Estilos para la Vista Pública de Factura --- */
.invoice-public-view {
    border: 1px solid #dee2e6;
}
.invoice-public-view .invoice-logo {
    max-height: 60px;
    max-width: 180px;
}
.invoice-public-view .invoice-title-public {
    color: var(--public-primary-color);
    font-weight: 700;
}
.invoice-public-view .table thead.table-dark {
    background-color: var(--airclean-navy);
    color: var(--airclean-white);
}
.invoice-public-view .table tfoot .total-row {
    background-color: var(--public-light-bg);
    border-top: 2px solid var(--public-primary-color);
    font-size: 1.2rem;
}
.invoice-public-view .card-footer {
    background-color: #f8f9fa;
}

/* Testimonials Carousel Styles */
.testimonials-carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.testimonials-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-card {
    min-width: 100%;
    padding: 30px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.testimonial-card.active {
    opacity: 1;
    position: relative;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.carousel-indicators .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    border: none;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-indicators .indicator.active {
    background-color: var(--airclean-blue);
}