/* Dependencias mínimas de la portada.
 * Evita descargar las dos fuentes completas de Font Awesome (más de 330 kB)
 * para una treintena de pictogramas puramente decorativos. */
.fa,
.fal,
.fad,
.fas,
.far,
.fab {
    display: inline-block;
    width: 1.15em;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    speak: never;
}

.fa-check::before { content: "\2713"; }
.fa-star::before { content: "\2605"; }
.fa-phone::before { content: "\260e"; }
.fa-building::before,
.fa-city::before { content: "\25a6"; }
.fa-calculator::before { content: "\20ac"; }
.fa-calendar-alt::before { content: "\25a3"; }
.fa-map-marker::before,
.fa-map-marked-alt::before { content: "\25cf"; }
.fa-warehouse::before,
.fa-warehouse-alt::before { content: "\2302"; }
.fa-sign-in::before { content: "\2192"; }
.fa-bolt::before { content: "\26a1"; }
.fa-book::before,
.fa-book-open::before { content: "\2261"; }
.fa-coins::before,
.fa-tag::before { content: "\20ac"; }
.fa-envelope::before { content: "\2709"; }
.fa-file-chart-line::before { content: "\2637"; }
.fa-key::before { content: "\26bf"; }
.fa-laptop::before { content: "\25a4"; }
.fa-layer-group::before { content: "\25a7"; }
.fa-leaf::before { content: "\2767"; }
.fa-pencil-ruler::before { content: "\270e"; }
.fa-plug::before { content: "\2301"; }
.fa-door-open::before { content: "\25a1"; }
.fa-engine-warning::before { content: "!"; }

.fa-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.12em;
    animation: cb-home-spin .8s linear infinite;
}
.fa-spinner::before { content: ""; }

@keyframes cb-home-spin { to { transform: rotate(360deg); } }

/* El tipo de letra del sistema pinta inmediatamente y evita otra conexión a
 * Google Fonts en la ruta más importante del sitio. */
.raleway,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* El póster forma parte del primer render. El vídeo se superpone sólo cuando
 * el cargador diferido le asigna el source en escritorio. */
.element-with-video-bg {
    background-color: #24372d;
    background-image: url("../video/portada.jpg");
    background-image: image-set(
        url("../video/portada.webp") type("image/webp"),
        url("../video/portada.jpg") type("image/jpeg")
    );
}

.my-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    transform: translate(-50%, -50%);
    filter: brightness(.5) contrast(.5);
    opacity: 0;
    transition: opacity .3s linear;
}

.my-background-video.is-visible {
    opacity: 1;
}

.homepage-deferred-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

@media (max-width: 767px) {
    /* En móvil la capa de vídeo está oculta: el fondo lo pinta el propio hero. */
    .cb-hero {
        background-color: #24372d;
        background-attachment: scroll;
        background-position: top center;
        background-size: cover;
        background-image: url("../video/portadamobil.jpg");
        background-image: image-set(
            url("../video/portadamobil.webp") type("image/webp"),
            url("../video/portadamobil.jpg") type("image/jpeg")
        );
    }

    /* Esta capa está oculta en móvil. Anular explícitamente su imagen evita
       que WebKit/Chromium especulen con el póster de escritorio. */
    .element-with-video-bg { background-image: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .my-background-video { display: none !important; }
    .fa-spinner { animation: none; }
}

/* ============================================================
   Rediseño portada (jul-2026): hero con tarjeta, precios desde,
   barra de contacto móvil, FAQ y tarjetas de precios.
   ============================================================ */

.cb-hero-overlay {
    background: linear-gradient(180deg, rgba(9, 34, 20, .50), rgba(9, 34, 20, .78));
    padding: 30px 0 44px;
}

.cb-hero-title {
    color: #fff;
    font-size: 26px;
    line-height: 1.25;
    margin: 6px 0 8px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.cb-hero-sub {
    color: #e7f4ec;
    font-size: 15px;
    margin: 0 0 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (min-width: 768px) {
    .cb-hero-overlay { padding: 52px 0 66px; }
    .cb-hero-title { font-size: 42px; }
    .cb-hero-sub { font-size: 18px; margin-bottom: 28px; }
}

.cb-hero-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 16px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .30);
    color: #333;
    text-align: left;
}

.cb-card-label {
    color: #445 !important;
    font-weight: 600;
    font-size: 14px;
}

.cb-hero-card .form-control {
    height: 46px;
    font-size: 16px; /* evita el zoom automático de iOS al enfocar */
}

.cb-card-cta {
    height: 46px;
    font-weight: 700;
    margin-top: 4px;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
}

.cb-card-price {
    text-align: center;
    margin-top: 14px;
    border-top: 1px dashed #dfe7e2;
    padding-top: 12px;
}

.cb-price-main {
    font-size: 40px;
    font-weight: 800;
    color: #178f45;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .cb-price-main { font-size: 48px; }
}

.cb-price-line { color: #555; font-size: 15px; }
.cb-price-total { font-size: 21px; font-weight: 700; color: #222; margin-top: 2px; }
.cb-price-note { color: #5a6660; font-size: 13px; margin-top: 8px; }

.cb-card-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    justify-content: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f4f1;
    color: #3c4a42;
    font-size: 13.5px;
}

.cb-stars { color: #e9a20c; letter-spacing: 1px; }

/* Barra de contacto fija en móvil */
.cb-mobile-ctabar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99997;
    display: flex;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
}

.cb-ctabar-btn {
    flex: 1;
    text-align: center;
    padding: 12px 6px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
}

.cb-ctabar-call { background: #1fb356; color: #fff !important; }
.cb-ctabar-cita { background: #fff; color: #178f45 !important; border: 2px solid #1fb356; }

@media (max-width: 767px) {
    /* Hueco para la barra fija + subir cookies y chat por encima de ella */
    body { padding-bottom: 66px; }
    #cc-banner { bottom: 78px !important; }
    #cc-reopen { bottom: 78px !important; }
    cb-chat-widget { --cb-chat-bottom: 78px; }
}

/* WhatsApp flotante (solo escritorio; en móvil ya está la barra).
   A la derecha, por encima del fab del chat. */
.cb-wa-float {
    position: fixed;
    right: 22px;
    bottom: 118px;
    z-index: 99996;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    transition: transform .15s ease;
}

.cb-wa-float:hover,
.cb-wa-float:focus {
    transform: scale(1.07);
    color: #fff;
}

/* Tarjetas de precios "desde" */
.cb-price-card {
    border: 1px solid #e2e8e4;
    border-radius: 14px;
    padding: 20px 18px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    margin-top: 14px;
    text-align: center;
}

.cb-price-card-tipo { font-size: 18px; font-weight: 700; color: #233; }
.cb-price-card-precio { font-size: 26px; color: #178f45; margin: 8px 0 2px; }
.cb-price-card-precio strong { font-size: 34px; }

.cb-price-card-lista {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    color: #4c5a52;
    font-size: 14.5px;
}

.cb-price-card-lista li { margin-top: 4px; }
.cb-price-card-cta { font-weight: 700; }

/* FAQ con <details> nativo */
.cb-faq {
    border: 1px solid #e2e8e4;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 10px;
    background: #fbfdfc;
}

.cb-faq[open] { background: #fff; }

.cb-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 16.5px;
    color: #233028;
}

.cb-faq p { margin: 10px 0 2px; color: #444; line-height: 1.55; }

html { scroll-behavior: smooth; }

/* El botón flotante antiguo del footer queda redundante con la barra fija. */
#llamadawhatsapp { display: none !important; }

@media (max-width: 767px) {
    /* Banner de cookies compacto: que no tape el precio del hero. */
    #cc-banner { font-size: 12.5px; max-width: 320px; }
    #cc-inner { padding: 10px 12px !important; }
}

/* En pantallas estrechas el texto de marca no cabe junto al teléfono:
   se queda el logo (el alt conserva el nombre accesible). */
@media (max-width: 767px) {
    .navbar-brand.fs20 { font-size: 0 !important; padding-top: 8px; }
    .navbar-brand.fs20 img { width: 44px; }
}

/* El banner de cookies debe quedar por encima de la burbuja del chat
   (el consentimiento es lo primero que debe poder cerrarse). */
#cc-banner { z-index: 2147483647 !important; }