/* ----- VARIABLES & RESET ----- */
/* Paleta oficial de marca M&SSC (extraida de la guia de marca en CMYK):
   rojo oscuro C15 M100 Y90 K32, rojo vivo C0 M90 Y85 K0, gris K70, negro, blanco.
   Se mantienen los nombres de variable originales (--primary-blue, etc.) para no
   tener que tocar cada vista que las usa; ahora representan la paleta roja/gris/negra
   real de la marca en vez de la paleta azul/dorada inventada anteriormente. */
:root {
    --primary-blue: #7f1f1d;   /* rojo oscuro de marca */
    --secondary-blue: #cf2624; /* rojo vivo de marca (acento / CTA) */
    --accent-yellow: #cf2624;  /* alias del rojo vivo: ya no se usa dorado */
    --brand-gray: #58585a;      /* gris de marca (texto/acentos) */
    --brand-gray-dark: #55555a; /* plomo de marca (fondos: footer, secciones) */
    --text-dark: #1a1a1a;
    --text-light: #6a6a6a;
    --bg-light: #f7f7f7;
    --white: #ffffff;
    --font-main: 'Open Sans', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* El "ul { list-style: none }" de arriba es para los menus/tarjetas del sitio, pero tambien
   apagaba las vinetas de las listas que un admin arma con el editor de texto de un articulo
   (Quill). Aqui se le devuelven las vinetas, solo dentro del contenido de un articulo/bloque,
   mostradas como una "check list" de dos columnas con tilde en vez de bolitas (igual al
   formato de referencia pedido). No hay que tocar el contenido guardado en la BD: esto es
   solo CSS, se aplica a cualquier <ul> que un admin ya haya escrito o escriba a futuro. */
.article-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 26px;
}

.article-content ol {
    list-style: decimal;
    padding-left: 22px;
    margin-bottom: 15px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.article-content ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--secondary-blue);
    position: absolute;
    left: 0;
    top: 3px;
}

@media (max-width: 600px) {
    .article-content ul {
        grid-template-columns: 1fr;
    }
}

.article-content p {
    margin-bottom: 15px;
}

.text-center {
    text-align: center;
}

/* ----- TOP BAR ----- */
.top-bar {
    background-color: var(--white);
    padding: 15px 0;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.main-logo {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* In case the logo has a white background that needs to blend */
}

.logo-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text p {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--primary-blue);
    letter-spacing: 0.2px;
}

.social-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.follow-us {
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-blue);
    margin-right: 10px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--white);
    font-size: 14px;
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: scale(1.1);
}

.fb { background-color: #3b5998; }
.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.yt { background-color: #ff0000; }
.li { background-color: #0077b5; }
.tk { background-color: #000000; }

/* ----- NAVIGATION ----- */
.navbar {
    background-color: var(--primary-blue);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 0 40px;
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-links > li > a {
    color: var(--white);
    font-weight: 600;
    font-size: 13px;
    padding: 13px 5px;
    display: block;
    transition: color 0.3s;
}

.nav-links > li > a:hover {
    color: var(--accent-yellow);
}

.nav-links > li > a i {
    font-size: 10px;
    margin-left: 3px;
}

.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* Flechita separada del enlace principal: el enlace (".dropdown > a") siempre
   navega normalmente a la pagina de la categoria; esta flecha es lo unico que
   abre/cierra el submenu en pantallas angostas (ver main.js). */
.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 8px;
    cursor: pointer;
    color: var(--white);
    font-size: 10px;
    transition: color 0.3s;
}

.dropdown-toggle:hover {
    color: var(--accent-yellow);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 260px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-top: 3px solid var(--accent-yellow);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: var(--bg-light);
    color: var(--secondary-blue);
}

.hurricane-btn {
    background-color: var(--secondary-blue);
    color: var(--white) !important;
    font-weight: 800;
    padding: 13px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
    margin-right: -18px;
}

.hurricane-btn:hover {
    background-color: #a81f1d;
}

.menu-toggle {
    display: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 15px;
}

/* ----- HERO CAROUSEL ----- */
/* Fondo rojo oscuro -> transparente de izquierda a derecha (NO negro solido):
   del lado izquierdo (donde va el texto) queda oscuro para que siga siendo
   legible, y se va desvaneciendo a transparente de verdad hacia la derecha,
   dejando ver lo que hay detras de la pagina (mas la red animada de encima). */
.carousel-container {
    position: relative;
    height: 500px;
    overflow: hidden;
    background: linear-gradient(to right, #2a1113 0%, #170b0c 40%, rgba(23, 11, 12, 0) 100%);
}

/* Red animada de nodos/lineas (canvas, ver js/particles.js) + franja de luz
   que "escanea" de arriba a abajo. El canvas queda siempre detras (fondo);
   la franja de luz (.banner-scan) va POR ENCIMA de la foto del slide (con
   mezcla "screen", como un destello que pasa sobre la imagen), por eso su
   z-index es mayor al de .carousel-slide: si quedara detras, la foto (que es
   opaca del lado izquierdo) la tapa por completo y no se nota. */
#banner-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.75;
}

.banner-scan {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 90, 90, 0.4) 50%, transparent 100%);
    background-size: 100% 240px;
    animation: scan-move 7s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes scan-move {
    0% { background-position: 0 -240px; }
    100% { background-position: 0 500px; }
}

.carousel-slide {
    display: none;
    height: 100%;
    background-color: var(--primary-blue);
    animation: fade 1.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Con foto, el color solido de fondo se quita: lo que se ve detras de la
   parte transparente de la foto (ver .slide-photo) es el degradado oscuro +
   la red animada de arriba, no un color solido. */
.carousel-slide.has-photo {
    background-color: transparent;
}

/* La foto del slide va en su propia capa (ya no como background-image del
   .carousel-slide), para poder desvanecerla con una mascara de izquierda a
   derecha sin afectar el texto/botones de encima (.hero-overlay), que estan
   en otra capa por completo. */
.slide-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 88%);
            mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 88%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* Cuando el slide trae imagen de fondo (bloques.imagen), se oculta el icono
   "marca de agua" grande, que solo se usa como relleno cuando no hay foto. */
.carousel-slide.has-photo .hero-watermark {
    display: none;
}

.carousel-slide.slide-alt {
    background-color: var(--text-dark);
}

/* Si el slide "alt" (oscuro) ademas trae foto, que gane siempre la foto:
   sin esto, el negro de arriba (.slide-alt) y el transparente de .has-photo
   quedan con la misma "fuerza" en CSS y gana el que este mas abajo en el
   archivo, asi que en algunos slides se veia un bloque negro solido donde
   la foto se desvanece, en vez del degradado transparente. */
.carousel-slide.slide-alt.has-photo {
    background-color: transparent;
}

.hero-watermark {
    position: absolute;
    right: 6%;
    bottom: 0;
    font-size: 220px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero-watermark {
        display: none;
    }
}

.carousel-slide.active {
    display: block;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

.hero-overlay {
    /* Degradado de marca (rojo) de izquierda a derecha: solido/rojo del lado
       izquierdo (donde va el texto, y que ademas ayuda a que siga siendo
       legible en blanco) y transparente del lado derecho, para que se vea la
       foto y, mas alla, el fondo oscuro con la red animada. */
    background: linear-gradient(to right, rgba(92, 15, 19, 0.82) 0%, rgba(168, 30, 36, 0.55) 40%, rgba(168, 30, 36, 0.08) 75%, transparent 100%);
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
    color: var(--white);
    padding: 0 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-content h1,
.hero-content h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-services {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Carousel Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-control:hover {
    background: rgba(0,0,0,0.8);
}

.carousel-control.prev { left: 0; }
.carousel-control.next { right: 0; }

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: var(--accent-yellow);
}

.btn {
    padding: 12px 25px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
}

.btn-blue {
    background-color: var(--secondary-blue);
    color: var(--white);
    border: 2px solid var(--secondary-blue);
}

.btn-blue:hover {
    background-color: #a81f1d;
    border-color: #a81f1d;
}

.btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-blue);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-outline-dark:hover {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Variante invertida: fondo blanco normalmente, transparente al pasar el mouse
   (usada en el boton "CALL" del hero, sobre foto de fondo) */
.btn-invert-hover {
    background-color: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--white);
}

.btn-invert-hover:hover {
    background-color: transparent;
    color: var(--white);
}

/* ----- PAGE HEADER (banner interior: color solido de marca, con foto de fondo
   opcional a baja opacidad cuando la pagina tiene una imagen disponible) ----- */
.page-header {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--primary-blue);
    background-size: cover;
    background-position: center;
}

/* Velo oscuro sobre la foto de fondo: la deja a baja opacidad para que el
   titulo y el breadcrumb sigan siendo legibles en blanco. */
.page-header.has-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(40, 8, 7, 0.72);
    z-index: 0;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    color: var(--white);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.page-header .page-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    margin-top: 10px;
}

/* Breadcrumb: Inicio / Categoria / Pagina actual, dentro del page-header */
.breadcrumb {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.65);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--white);
    text-decoration: underline;
}

.breadcrumb .breadcrumb-sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.95);
}

/* ----- GALERIA DE UN ARTICULO (cuando tiene 2 o mas fotos ademas de la
   portada): seccion aparte de ancho completo, grilla de 3 columnas con
   zoom leve al pasar el mouse, igual al formato de referencia pedido. */
.article-gallery {
    padding: 55px 0;
    background-color: var(--bg-light);
}

.article-gallery .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-blue);
    font-weight: 700;
    margin-bottom: 10px;
}

.article-gallery .section-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--secondary-blue);
    display: inline-block;
}

.article-gallery h2 {
    font-size: 24px;
    color: var(--primary-blue);
    margin-bottom: 25px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.gallery-item {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 720px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 26px;
    }

    .breadcrumb {
        font-size: 12px;
    }
}

/* ----- ICON PANEL (reemplaza fotos de relleno por un panel de marca con icono) ----- */
.icon-panel {
    background-color: var(--primary-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.icon-panel i {
    font-size: 84px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}

/* ----- TRUST BADGES ----- */
.trust-badges {
    background-color: var(--white);
    padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.badges-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary-blue);
}

.badge-item i {
    font-size: 24px;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----- SECTION TITLES ----- */
.section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title::before,
.section-title::after {
    content: "";
    height: 2px;
    background-color: #ccc;
    flex: 1;
    max-width: 100px;
    margin: 0 15px;
}

.text-white {
    color: var(--white);
}

.text-white::before,
.text-white::after {
    background-color: rgba(255,255,255,0.3);
}

/* ----- COMPLETE PROPERTY CARE ----- */
.property-care {
    padding: 60px 0;
}

/* Flexbox (en vez de CSS grid) para que cada tarjeta tenga SIEMPRE el mismo ancho fijo,
   sin importar cuantas haya: con "flex-grow: 0" una tarjeta nunca se estira para
   "rellenar" la fila (por ejemplo, una categoria con un solo servicio se ve angosta,
   igual que si hubiera 5). El calculo de abajo (100% menos los espacios, dividido 5)
   dimensiona para mostrar como maximo 5 tarjetas por fila en pantallas de escritorio;
   en pantallas mas angostas se acomodan solas a menos columnas gracias a flex-wrap. */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.services-grid .card {
    flex: 0 1 calc((100% - 4 * 20px) / 5);
    max-width: calc((100% - 4 * 20px) / 5);
    min-width: 210px;
}

/* Carrusel de "Complete Property Care": se usa cuando hay mas de 4 destacados,
   para mostrar solo 4 tarjetas a la vez y rotarlas automaticamente. */
.services-carousel {
    /* "overflow-x: hidden" + "overflow-y: visible" por separado hace que el navegador
       agregue una barra de scroll rara (se ve feo). En vez de eso: se recorta parejo en
       los dos sentidos, pero se le da relleno arriba/abajo para que el efecto "hover" de
       la tarjeta (que se levanta y agranda su sombra) tenga espacio y no se corte. */
    overflow: hidden;
    padding: 30px 0 50px;
}

.services-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease;
}

.service-slide {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    min-width: 0;
}

@media (max-width: 1024px) {
    .service-slide {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    .service-slide {
        flex-basis: 100%;
    }
}

.card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-img {
    height: 150px;
    background-color: var(--bg-light);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eee;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img-icon {
    font-size: 42px;
    color: var(--primary-blue);
    opacity: 0.85;
}

/* Cuando la tarjeta ya tiene foto de fondo, el icono grande de relleno se oculta
   (el badge circular de abajo, .card-icon, sigue mostrandose siempre). */
.card-img.has-photo .card-img-icon {
    display: none;
}

.card-img.has-photo {
    background-color: var(--text-dark);
}

.card-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background-color: var(--secondary-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border: 3px solid var(--white);
}

.card-body {
    padding: 35px 15px 25px;
    text-align: center;
}

.card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.card-body p {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 15px;
    min-height: 50px;
}

.learn-more {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-blue);
}

.learn-more i {
    font-size: 10px;
}

/* ----- OUR CLIENTS ----- */
.our-clients {
    background-color: var(--brand-gray-dark);
    padding: 60px 0;
    color: var(--white);
}

.clients-subtitle {
    margin: -25px 0 35px;
    font-size: 14px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: center;
    gap: 28px;
}

@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 260px));
    }
}

@media (max-width: 480px) {
    .clients-grid {
        grid-template-columns: minmax(0, 260px);
    }
}

.client-logo {
    background-color: var(--white);
    border-radius: 8px;
    padding: 24px 20px;
    width: 100%;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--secondary-blue);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.client-logo i {
    font-size: 26px;
    color: var(--accent-yellow);
    margin-bottom: 10px;
}

/* Lineita amarilla que aparece deslizandose arriba de la tarjeta al pasar el mouse */
.client-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--accent-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.client-logo:hover::before {
    transform: scaleX(1);
}

.client-logo h3 {
    font-size: 16px;
    line-height: 1.1;
}

.client-logo span {
    font-size: 10px;
    color: var(--text-light);
}

/* ----- GOOGLE REVIEWS ----- */
.google-reviews {
    padding: 60px 0;
    background-color: var(--bg-light);
}

.google-rating {
    margin-bottom: 30px;
}

.google-logo {
    width: 40px;
    margin-bottom: 10px;
}

.stars {
    color: #ffc107;
    font-size: 18px;
    margin-bottom: 5px;
}

.google-rating p {
    font-weight: 600;
    font-size: 14px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.review-card {
    background: var(--white);
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    text-align: left;
    position: relative;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reviewer i.fa-user-circle {
    font-size: 40px;
    color: var(--primary-blue);
}

.reviewer h4 {
    font-size: 15px;
    font-weight: 700;
}

.reviewer .stars {
    font-size: 12px;
    margin: 0;
}

.review-card p {
    font-size: 13px;
    color: var(--text-dark);
}

.review-g-logo {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 20px;
}

.review-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* ----- FOOTER ----- */
.footer {
    background-color: var(--brand-gray-dark);
    color: var(--white);
    padding: 50px 0 20px;
    border-top: 3px solid var(--secondary-blue);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo i {
    font-size: 35px;
}

.footer-logo-img {
    height: 45px;
    width: auto;
}

.footer-logo h2 {
    font-size: 20px;
    font-weight: 800;
}

.footer-logo p {
    font-size: 12px;
    margin-top: 4px;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    color: var(--white);
    font-size: 18px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--white);
    font-size: 15px;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-col ul.contact-info li {
    color: var(--white);
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-col ul.contact-info li i {
    margin-top: 4px;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 12px;
    color: #ccc;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
    .navbar-inner {
        padding: 0 15px;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-blue);
        padding: 20px 0;
        gap: 0;
    }
    
    .nav-links.active {
        display: flex !important;
        z-index: 9999;
    }

    .nav-links > li {
        width: 100%;
        text-align: left;
    }

    .nav-links > li > a {
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        display: none;
        background-color: #6b000e;
    }

    .dropdown-menu li a {
        color: var(--white);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-left: 35px; /* Indent submenus */
    }

    .dropdown-menu li a:hover {
        background-color: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.8);
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu.active {
        display: block !important;
    }

    .menu-toggle {
        display: block;
    }
    
    .hurricane-btn {
        padding: 15px;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .top-bar-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-content h1,
    .hero-content h2 {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .hero-services {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    /* Las flechas del carrusel quedaban encima del texto en movil;
       el carrusel ya rota solo y quedan los puntos para navegar */
    .carousel-control {
        display: none;
    }

    /* Bajar un poco los puntos para que no queden sobre el boton de llamada */
    .carousel-indicators {
        bottom: 8px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .badges-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title {
        font-size: 20px;
    }

    /* Banner mas bajo en movil para que se recorte menos a los lados
       y se muestre la parte central de la imagen */
    .carousel-container {
        height: 380px;
    }

    .slide-photo {
        background-position: center;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 300px;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .hero-services {
        font-size: 12px;
        margin-bottom: 14px;
    }

    .hero-buttons .btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ----- DYNAMIC HOVER EFFECTS ----- */
.card, .client-logo, .review-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover, .client-logo:hover, .review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Resalte mas fuerte para las tarjetas de servicio (Complete Property Care): se levantan
   mas, crecen un poco, les aparece un borde amarillo y un resplandor azul mas notorio;
   el icono y el titulo tambien cambian de color para que el hover se note bien. */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 35px rgba(127, 31, 29, 0.18);
    border-color: var(--secondary-blue);
    z-index: 2;
}

.card-icon {
    transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.card:hover .card-icon {
    background-color: var(--primary-blue);
    color: var(--white);
    transform: translateX(-50%) scale(1.1);
}

.card-body h3 {
    transition: color 0.35s ease;
}

.card:hover .card-body h3 {
    color: var(--secondary-blue);
}

/* ----- PRELOADER ----- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease;
}
.preloader.hide {
    opacity: 0;
    pointer-events: none;
}
.loader {
    border: 5px solid rgba(255,255,255,0.2);
    border-top: 5px solid var(--white);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- SCROLL REVEAL ANIMATION ----- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ----- LIGHTBOX ----- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.lightbox.active img {
    transform: scale(1);
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}
.lightbox-close:hover {
    color: var(--accent-yellow);
}
.gallery-img {
    cursor: pointer;
    transition: filter 0.3s;
}
.gallery-img:hover {
    filter: brightness(0.8);
}