html {
	scroll-behavior: smooth;
}

body {
	background: #f8f9fa;
	color: #222;
}

:root {
    --dtp-blue: #0066cc;
    --dtp-blue-dark: #004b99;
}

/* Visual enhancements and accents */
.h2-accent {
    color: var(--dtp-blue);
    text-decoration: none;
}

.site-title {
    font-size: 1.25rem;
    letter-spacing: 1px;
    font-weight: 800;
    color: #0b365f;
    text-transform: uppercase;
}

.cta-primary {
    background: linear-gradient(180deg, var(--dtp-blue) 0%, var(--dtp-blue-dark) 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,102,204,0.18);
}
.cta-primary:hover, .cta-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,102,204,0.22);
}

.service-card {
    border: 1px solid rgba(0,102,204,0.12);
    border-radius: 12px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.service-icon { font-size: 48px; margin: 8px 0; }
.service-title { font-weight:700; margin-bottom:8px; color:#123; font-size: 16px; }
.service-desc { color: #666 }

.confianza .card { border: 1px solid rgba(0,102,204,0.06); border-radius: 10px }

.cta-before-footer { background: linear-gradient(90deg, rgba(0,102,204,0.04), rgba(0,102,204,0.02)); }
.cta-before-footer .btn { margin-top: 6px }

header { position: relative; z-index: 1100; background: #fff }
header h5 { font-weight:600 }

#siteLogo {
	border-radius: 100%;
	width: 50px;
	height: 50px;
	object-fit: cover;
}

/* Ensure the mobile menu button is visible and has a comfortable hit area */
.btn-light.p-2 { padding: .5rem; min-width: 44px; min-height: 36px }
.btn-light.p-2 { display:inline-flex; align-items:center; justify-content:center }

.cotiza img { object-fit: cover; height: 180px; width: 100%; }

@media (max-width: 767px) {
	.cotiza img { height: 120px }
}

.card img { max-height: 260px; object-fit: cover }

.carousel-inner img { height: 350px; object-fit: cover }

#heroCarousel {
    border: 2px solid var(--dtp-blue);
    border-radius: 48px;
    overflow: hidden;
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.4);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.pac-container {
    z-index: 2000 !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Esto asegura que las sugerencias de Google se vean sobre el modal */
.pac-container, gmp-autocomplete-service-list {
    z-index: 2000 !important;
    position: fixed !important;
}

/* Estilo para que el nuevo componente de Google combine con Bootstrap */
gmp-place-autocomplete {
    width: 100%;
    border: none;
    padding: 0;
}

gmp-place-autocomplete input {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    width: 100%;
}

/* Sidebar styles */
.sidebar {
	width: 260px;
	position: fixed;
	left: 0;
	/* place below header to avoid being covered */
	top: 56px;
	bottom: 0;
	padding: 12px 12px 24px 12px;
	background: #fff;
	border-right: 1px solid #e9ecef;
	z-index: 1050;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 300ms ease-in-out;
	pointer-events: none;
}

.sidebar.show-desktop {
	transform: translateX(0);
	pointer-events: auto;
}

.main-with-sidebar {
	margin-left: 280px;
}

.sidebar .btn-success { background:#e8faf0; color:#0f9d58; border:none }
.sidebar .btn-success.text-white { background:#10b981; color:#fff }

.contact-list li { color: #495057 }

@media (max-width: 767px) {
	.main-with-sidebar { 
		margin-left: 0 
	}
}

/* If header height changes on small screens, ensure sidebar top adjusts */
@media (max-width: 767px) {
    .sidebar { top: 56px }
}

/* Sidebar / Offcanvas link colors: default black, hover blue */
.sidebar .nav-link,
.offcanvas .nav-link {
	color: #000 !important;
	font-weight: 500;
}
.sidebar .nav-link .bi,
.offcanvas .nav-link .bi {
	color: inherit;
}
.sidebar .nav-link:hover,
.offcanvas .nav-link:hover {
    color: var(--dtp-blue) !important;
    background-color: transparent;
}

/* Modal custom styles */
.modal {
    transition: opacity 0.15s linear;
    z-index: 22000 !important;
}
.modal.show {
    opacity: 1;
}

.modal-dialog {
    margin-top: 0;
}

.modal-backdrop.show {
    opacity: 0.5;
    z-index: 21999 !important;
}

.modal-content {
    border-radius: 12px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
}
.modal-header {
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
    padding: 1.5rem;
}
.modal-body {
    padding: 1.5rem;
}
.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}
.alert-light {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
}
.form-label {
    font-weight: 500;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--dtp-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.18);
}
body.modal-open {
    overflow: hidden;
}

/* Estilos para Google Places Autocomplete */
.pac-container {
    z-index: 1060 !important;
    border-radius: 8px;
    margin-top: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pac-item {
    padding: 10px;
    cursor: pointer;
}

.pac-item:hover {
    background-color: #f8f9fa;
}

/* Estilos para el dropdown local de direcciones */
#placesResults {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #dee2e6;
}

#placesResults .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

#placesResults .list-group-item:last-child {
    border-bottom: none;
}

#placesResults .list-group-item:hover {
    background-color: #f8f9fa;
}

#placesResults .bi-geo-alt-fill {
    color: var(--dtp-blue);
}

/* Seguridad: evita que un backdrop huérfano capture clicks y deje la página "en negro".
   Nota: si prefieres que el backdrop siga cerrando al ser clickeado, omite esta regla. */
.offcanvas-backdrop {
    pointer-events: none;
}

.desktop-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.desktop-sidebar-backdrop.show {
    opacity: 1;
}

/* Cuando el sidebar esté abierto, evitar que la página principal haga scroll */
body.sidebar-open {
    overflow: hidden;
    height: 100vh;
}

/* Header layout: logo left, title centered, menu on right */
.site-header .header-inner { display: flex; align-items: center; }
.site-header #siteLogo { width: 72px; height: auto; display: block; }
.site-title { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.6px; }

/* Ensure center title stays centered even with left/right content */
.site-header .header-left { flex: 0 0 auto; }
.site-header .header-right { flex: 0 0 auto; }
.site-header .header-center { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.site-header .header-center .site-title { pointer-events: auto; }
.site-header { position: relative }
.site-header .header-left { z-index: 1110 }
.site-header .header-right { z-index: 1110 }

@media (max-width: 767px) {
    .site-header #siteLogo { width: 56px }
    .site-header .header-center { position: static; transform: none; margin-left: 8px; }
}

/* Brand primary button overrides to match logo blue */
.btn-primary {
    background-color: var(--dtp-blue) !important;
    border-color: var(--dtp-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dtp-blue-dark) !important;
    border-color: var(--dtp-blue-dark) !important;
}

/* Mobile (offcanvas) - aumentar separación y padding para que no queden tan juntos */
@media (max-width: 767px) {
    .offcanvas .offcanvas-body { padding: 1.25rem 1rem; }
    .offcanvas .btn-success { display: block; width: 100%; margin-bottom: 1.25rem; padding: .9rem 1rem; }
    .offcanvas .nav.flex-column { gap: 1.4rem; }
    .offcanvas .nav-link { padding: 1rem 0.9rem; gap: 0.9rem; font-size: 1rem; }
    .offcanvas .contact-list li { margin-bottom: 1.1rem; padding-left: 0.25rem; }
    .offcanvas hr { margin: 1.25rem 0; }
}

/* FAQ Section */
.faq .faq-icon {
    width: 64px;
    height: 64px;
    border: 2px solid var(--dtp-blue);
    color: var(--dtp-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
}

.faq .accordion-button {
    color: #222;
}

.faq .accordion-button:not(.collapsed) {
    color: var(--dtp-blue);
}

@media (max-width: 767px) {
    .faq .faq-icon { width: 56px; height: 56px; font-size: 20px; }
}

/* Mejor separación en el sidebar: espacios entre botones, links y contacto */
.sidebar .btn-success { margin-bottom: 1.5rem; padding: 1rem 1rem; border-radius: .6rem; }
.sidebar .nav.flex-column { display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar .nav-link, .offcanvas .nav-link { padding: .9rem 1rem; border-radius: .45rem; display: flex; align-items: center; gap: 1rem; }
.sidebar .nav-link { color: #000; }
.sidebar .nav-item + .nav-item { margin-top: 0; }
.sidebar .contact-list li { margin-bottom: 1.1rem; padding-left: .25rem; }
.sidebar hr { margin: 1.25rem 0; }

/* Contact items: more separation and consistent layout for sidebar and offcanvas */
.sidebar .contact-list li,
.offcanvas .contact-list li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0.25rem;
    margin-bottom: 1.4rem;
    font-size: 1rem;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sidebar .contact-list li .bi,
.offcanvas .contact-list li .bi {
    font-size: 1.05rem;
    color: #6c757d;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar .contact-list li a,
.offcanvas .contact-list li a {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Slightly larger gap on small screens to match visual spacing */
@media (max-width: 767px) {
    .sidebar .contact-list li,
    .offcanvas .contact-list li {
        gap: 0.5rem;
        padding: 0.6rem 0.25rem;
        margin-bottom: 0.9rem;
        font-size: 0.85rem;
        align-items: center;
    }
    
    .sidebar .contact-list li .bi,
    .offcanvas .contact-list li .bi {
        margin-top: 0;
        min-width: 22px;
    }
    
    .sidebar .contact-list li a,
    .offcanvas .contact-list li a {
        font-size: 0.85rem;
    }
}

/* Aumentar el área de click del icono del menú en móvil/desktop */
.btn-light.p-2 { padding: .7rem; }

@media (max-width: 767px) {
    .sidebar .btn-success { padding: .7rem 0.9rem; }
}


.reserva-fixed {
    position: sticky;
    bottom: 0;
    background: #f8f9fa;
    padding: 12px;
    padding-bottom: 12px;
    z-index: 10;
    box-shadow: none;
}

#reservaWrapper {
    min-height: 140px; /* ajusta según la altura de la barra */
    position: relative;
}

/* Trabajos (Gallery Carousel) Section */
.trabajos {
    padding: 20px 0;
}

.trabajos h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.trabajos-carousel {
    background: #f8f9fa;
    border-radius: 48px;
    border: 2px solid var(--dtp-blue);
    padding: 25px;
    overflow: hidden;
}

.trabajos-slide {
    width: 100%;
}

.trabajos-grid {
    display: flex;
    gap: 15px;
    align-items: stretch;
    height: 350px;
}

.trabajos-img-main {
    flex: 1.5;
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trabajos-img-main:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.trabajos-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trabajos-img-small {
    flex: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trabajos-img-small:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.trabajos-carousel .carousel-control-prev,
.trabajos-carousel .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.4);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.trabajos-carousel .carousel-control-prev:hover,
.trabajos-carousel .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.trabajos-indicators {
    bottom: 15px;
    gap: 8px;
    justify-content: center;
}

.trabajos-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trabajos-indicators button.active {
    background-color: var(--dtp-blue);
    width: 12px;
    height: 12px;
}

/* Estilos para Collage de Trabajos */
.trabajos-collage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.trabajos-videos-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.trabajos-video {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    border: 2px solid var(--dtp-blue);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #000;
    display: block;
}

.video-container {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--dtp-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.video-mute-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 10;
}

.video-mute-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.video-mute-btn.muted {
    opacity: 0.7;
}

.trabajos-video:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.trabajos-grid-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px);
    gap: 8px;
    width: 100%;
}

.trabajos-carousel-fotos {
    background: #f8f9fa;
    border-radius: 48px;
    border: 2px solid var(--dtp-blue);
    padding: 20px;
    overflow: visible;
}

.trabajos-carousel-fotos .carousel-inner {
    border-radius: 36px;
    overflow: hidden;
}

.trabajos-carousel-fotos .carousel-control-prev,
.trabajos-carousel-fotos .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.4);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.trabajos-carousel-fotos .carousel-control-prev:hover,
.trabajos-carousel-fotos .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.trabajos-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.trabajos-item:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Disposición del collage */
.trabajos-item-1 {
    grid-column: span 2;
    grid-row: span 1;
}

.trabajos-item-2 {
    grid-column: span 1;
    grid-row: span 2;
}

.trabajos-item-3 {
    grid-column: span 1;
    grid-row: span 1;
}

.trabajos-item-4 {
    grid-column: span 1;
    grid-row: span 1;
}

.trabajos-item-5 {
    grid-column: span 1;
    grid-row: span 1;
}

.trabajos-item-6 {
    grid-column: span 1;
    grid-row: span 1;
}

@media (max-width: 768px) {
    .trabajos h2 {
        font-size: 1.5rem;
    }
    
    .trabajos-grid {
        flex-direction: column;
        height: auto;
    }
    
    .trabajos-img-main {
        height: 250px;
    }
    
    .trabajos-side {
        flex-direction: row;
        height: auto;
        gap: 12px;
    }
    
    .trabajos-img-small {
        height: 150px;
    }
    
    .trabajos-carousel {
        padding: 15px;
    }
    
    .trabajos-carousel .carousel-control-prev,
    .trabajos-carousel .carousel-control-next {
        width: 35px;
        height: 35px;
    }

    /* Responsive para Collage */
    .trabajos-videos-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }

    .trabajos-video {
        height: 160px;
    }

    .video-container {
        height: 160px;
    }

    .trabajos-grid-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }

    .trabajos-item {
        height: 150px;
        object-position: center;
    }

    .trabajos-item-1 {
        grid-column: span 1;
    }

    .trabajos-item-2 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .trabajos-item-3 {
        grid-column: span 1;
    }

    .trabajos-item-4 {
        grid-column: span 1;
    }

    .trabajos-item-5 {
        grid-column: span 1;
    }

    .trabajos-item-6 {
        grid-column: span 1;
    }

    .trabajos-carousel-fotos {
        padding: 12px;
    }

    .trabajos-carousel-fotos .carousel-control-prev,
    .trabajos-carousel-fotos .carousel-control-next {
        width: 35px;
        height: 35px;
    }
}
.cobertura {
    --dtp-blue: #0066cc;
    --dtp-blue-dark: #004b99;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
}

.cobertura h2 {
    font-size: 1.8rem;
    color: var(--dtp-blue);
}

.cobertura .card {
    border-radius: 8px;
    background-color: white;
    border: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.cobertura .card-body {
    padding: 2rem !important;
}

.cobertura h5 {
    color: #333;
    font-size: 1.1rem;
}

/* ensure any pin icon inside cobertura (including the p under hr) becomes brand blue */
.cobertura .bi-pin-fill,
.cobertura .bi-geo-alt-fill {
    color: var(--dtp-blue) !important;
}
    /* Footer icon color rule */
    footer .bi {
        color: var(--dtp-blue) !important;
    }

.cobertura .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.cobertura ul li {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* Make coverage icons and bullets use the brand blue */
.cobertura h2 .bi-geo-alt-fill,
.cobertura h5 .bi-pin-fill,
.cobertura ul li span.text-muted {
    color: var(--dtp-blue) !important;
}

.cobertura hr {
    border-color: #e6eef9;
}

.cobertura .text-center p {
    color: #333;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .cobertura h2 {
        font-size: 1.5rem;
    }
    
    .cobertura .card-body {
        padding: 1.5rem 1rem !important;
    }
    
    .cobertura ul li {
        font-size: 0.95rem;
        margin-bottom: 0.5rem !important;
    }
}