/* ================================================================
   BEN-BATI — BLUEPRINT HIGH-END UI/UX RESTYLING
   Plano arquitectónico + Glassmorphism técnico + CTA estratégicos
   Gros Œuvre et Construction à Paris (75)
   ================================================================ */

/* ================================================================
   1. TOKEN DE DISEÑO — Variables del sistema Blueprint
   ================================================================ */
:root {
    /* Paleta Blueprint */
    --bp-bg-deep:        #0b1f36;
    --bp-bg-card:        rgba(14, 35, 60, 0.72);
    --bp-grid-major:     rgba(0, 200, 240, 0.07);
    --bp-grid-minor:     rgba(0, 230, 255, 0.035);
    --bp-border-card:    rgba(0, 180, 216, 0.14);
    --bp-border-glow:    rgba(0, 210, 255, 0.18);
    --bp-accent-line:    rgba(0, 220, 255, 0.25);
    --bp-text-primary:   #e8edf2;
    --bp-text-secondary: rgba(220, 230, 245, 0.72);
    --bp-text-muted:     rgba(200, 215, 235, 0.55);
    --bp-heading:        #f0f4fa;

    /* CTA — Amarillo/Naranja Construcción */
    --cta-amber:         #f59e0b;
    --cta-orange:        #e67e00;
    --cta-glow:          rgba(245, 158, 11, 0.45);
    --cta-glow-strong:   rgba(245, 158, 11, 0.6);

    /* Sombras blueprint */
    --bp-shadow-card:    0 8px 40px rgba(0, 0, 0, 0.45),
                         inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --bp-shadow-img:     0 8px 28px rgba(0, 0, 0, 0.5);
    --bp-shadow-hover:   0 16px 48px rgba(0, 180, 220, 0.18);
    --bp-radius:         20px;
    --bp-radius-sm:      12px;
}

/* ================================================================
   2. FONDO DE PLANO ARQUITECTÓNICO — Doble cuadrícula CSS nativa
   ================================================================ */

/* Fondo profundo en html — capa base visible a través del body */
html {
    background-color: var(--bp-bg-deep);
}

/* ELIMINAR el fondo blanco que impone base.css — crítico para que la cuadrícula sea visible */
body {
    background-color: transparent !important;
    color: var(--bp-text-primary);
    /* Elevar el body por encima de las cuadrículas del html */
    position: relative;
    z-index: 1;
}

/* Capa 1 — Cuadrícula estructural mayor (cada 60px, líneas cyan ultra-sutiles)
   Se ancla en html, detrás del body (z-index negativo) */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Capa 2 — Cuadrícula técnica fina (cada 20px, micro-líneas) */
html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--bp-grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-minor) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Línea de horizonte decorativa (eje central del plano) */
@media (min-width: 768px) {
    body {
        position: relative;
    }
    /* Línea central horizontal simulando un nivel de obra */
    .blueprint-horizon {
        display: none; /* placeholder para futura expansión */
    }
}

/* ================================================================
   3. OVERRIDE DE FONDOS DE SECCIÓN — Todo transparente sobre blueprint
   ================================================================ */
.presentation,
.services,
.projects,
.gallery {
    background-color: transparent !important;
}

section {
    position: relative;
    z-index: 1;
}

/* ================================================================
   4. GLASS CARD — Tarjeta translúcida de alta gama
   ================================================================ */
.glass-card {
    background: var(--bp-bg-card);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--bp-border-card);
    border-radius: var(--bp-radius);
    padding: var(--space-12) var(--space-6);
    box-shadow: var(--bp-shadow-card);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

@media (min-width: 768px) {
    .glass-card {
        padding: var(--space-16) var(--space-10);
    }
}

@media (min-width: 1024px) {
    .glass-card {
        padding: var(--space-20) var(--space-12);
    }
}

/* Línea de acento superior (efecto blueprint — borde iluminado solo arriba) */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--bp-accent-line) 20%,
        var(--bp-accent-line) 80%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Brillo ambiental sutil (esquina superior derecha) */
.glass-card::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(
        circle,
        rgba(0, 180, 216, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* Hover sutil — intensifica el borde */
.glass-card:hover {
    border-color: var(--bp-border-glow);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(0, 180, 216, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Variante compacta para secciones secundarias */
.glass-card--compact {
    padding: var(--space-8) var(--space-5);
}

@media (min-width: 768px) {
    .glass-card--compact {
        padding: var(--space-10) var(--space-8);
    }
}

/* ================================================================
   5. TIPOGRAFÍA — Ajuste de colores para fondo oscuro
   ================================================================ */
.glass-card .section__title,
.glass-card h2,
.glass-card h3 {
    color: var(--bp-heading);
}

.glass-card .section__label {
    color: rgba(0, 210, 255, 0.8);
}

.glass-card p,
.glass-card .presentation__text p {
    color: var(--bp-text-secondary);
}

.glass-card .presentation__leader {
    color: var(--bp-text-primary) !important;
}

.glass-card .presentation__leader strong,
.glass-card strong {
    color: #ffffff;
}

.glass-card .stat__number {
    color: var(--cta-amber);
    text-shadow: 0 0 20px var(--cta-glow);
}

.glass-card .stat__label {
    color: var(--bp-text-muted);
}

/* ================================================================
   6. IMÁGENES — Marcos sutiles, bordes redondeados, sombras elegantes
   ================================================================ */

/* Marco general para imágenes dentro de glass-card */
.glass-card img,
.presentation__image img,
.gallery__item img {
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow-img);
    transition:
        box-shadow var(--transition-slow),
        border-color var(--transition-slow),
        transform var(--transition-slow);
}

/* Borde sutil en imágenes (marco de plano técnico) */
.presentation__image img,
.project-card__image img {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hover — resplandor cyan técnico */
.glass-card a:hover img,
.gallery__item:hover img,
.project-card:hover .project-card__image img {
    box-shadow:
        0 12px 44px rgba(0, 180, 220, 0.2),
        0 0 0 1px rgba(0, 200, 240, 0.15);
}

.presentation__image:hover img {
    box-shadow:
        0 12px 44px rgba(0, 180, 220, 0.2),
        0 0 0 1px rgba(0, 200, 240, 0.2);
}

/* Marco decorativo alrededor de la imagen de presentación */
.presentation__image {
    border-radius: 16px;
    padding: 5px;
    background: linear-gradient(
        135deg,
        rgba(0, 200, 240, 0.18),
        rgba(245, 158, 11, 0.12),
        rgba(0, 200, 240, 0.08)
    );
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 180, 216, 0.1);
}

/* Gallery items — bordes redondeados limpios */
.gallery__item {
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow-img);
    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.gallery__item:hover {
    box-shadow: var(--bp-shadow-hover);
    transform: translateY(-2px);
}

/* Project cards — estilización completa */
.project-card {
    background: rgba(15, 40, 70, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 180, 216, 0.1);
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow-card);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bp-shadow-hover);
    border-color: var(--bp-border-glow);
}

.project-card__content {
    background: transparent;
}

.project-card__title {
    color: var(--bp-heading) !important;
}

.project-card__location {
    color: var(--bp-text-muted) !important;
}

.project-card__category {
    background: linear-gradient(135deg, var(--cta-amber), var(--cta-orange));
    color: var(--bp-bg-deep) !important;
    font-weight: 700;
    box-shadow: 0 4px 12px var(--cta-glow);
}

/* ================================================================
   7. SERVICE CARDS — Adaptación al fondo blueprint
   ================================================================ */
.service-card {
    background: rgba(15, 40, 70, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 180, 216, 0.08);
    border-radius: var(--bp-radius-sm);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(0, 180, 216, 0.08);
    border-color: var(--bp-border-glow);
    background: rgba(15, 45, 75, 0.6);
}

.service-card__icon {
    background: rgba(0, 180, 216, 0.08) !important;
    border: 1px solid rgba(0, 200, 240, 0.12);
    color: rgba(0, 210, 255, 0.8) !important;
    border-radius: 14px;
    transition: all var(--transition-base);
}

.service-card:hover .service-card__icon {
    background: linear-gradient(135deg, var(--cta-amber), var(--cta-orange)) !important;
    color: var(--bp-bg-deep) !important;
    border-color: transparent;
    box-shadow: 0 8px 24px var(--cta-glow);
}

.service-card__title {
    color: var(--bp-heading) !important;
}

.service-card__desc {
    color: var(--bp-text-muted) !important;
}

.service-card__desc strong {
    color: var(--bp-text-primary);
}

/* ================================================================
   8. HERO SECTION — Overlay adaptado al blueprint
   ================================================================ */
.hero__overlay {
    background: linear-gradient(
        135deg,
        rgba(11, 31, 54, 0.94) 0%,
        rgba(11, 31, 54, 0.78) 40%,
        rgba(11, 31, 54, 0.55) 100%
    );
}

/* Gradiente de viñeta sutil sobre el hero */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 180, 216, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.04) 0%, transparent 50%);
}

.hero__title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 180, 216, 0.1);
}

.hero__subtitle {
    color: rgba(220, 235, 250, 0.85);
}

/* Hero scroll indicator */
/* Hero CTA row — botones directos debajo del hero */
.hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

@media (min-width: 640px) {
    .hero__cta-row {
        gap: var(--space-6);
    }
}

.hero__scroll a {
    border-color: rgba(0, 200, 240, 0.25);
}

.hero__scroll a:hover {
    border-color: rgba(0, 220, 255, 0.6);
    background-color: rgba(0, 180, 216, 0.1);
}

/* ================================================================
   9. HEADER — Glass oscuro sobre blueprint
   ================================================================ */
.header {
    background-color: rgba(11, 28, 50, 0.82) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(0, 180, 216, 0.1) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Wrapper para acciones del header (CTA + toggle) */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header--scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(0, 200, 240, 0.18) !important;
}

/* ================================================================
   LOGO — Fundido profesional sobre fondo oscuro (#0b1f36)

   Técnica: mix-blend-mode: multiply elimina el blanco puro del JPEG
   (multiply con blanco = transparente). El logo oscuro se integra
   perfectamente sobre el blueprint sin recortes ni marcos.
   Contenedor circular con borde cyan sutil.
   ================================================================ */

/* Enlace del logo — flex horizontal */
.logo {
    gap: var(--space-4);
    text-decoration: none;
}

/* Contenedor circular — retinizado, sin fondo, borde elegante */
.logo__image-wrapper {
    width: 56px;
    height: 56px;
    min-width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 220, 255, 0.25);
    overflow: hidden;
    background: transparent;
    padding: 0;
    box-shadow:
        0 0 0 4px rgba(0, 200, 240, 0.04),
        0 4px 20px rgba(0, 0, 0, 0.5);
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Hover — el borde cyan se enciende */
.logo:hover .logo__image-wrapper {
    border-color: rgba(0, 230, 255, 0.55);
    box-shadow:
        0 0 0 8px rgba(0, 200, 240, 0.06),
        0 4px 28px rgba(0, 200, 240, 0.15),
        0 0 40px rgba(0, 180, 216, 0.08);
}

/* Imagen del logo — mix-blend-mode elimina el blanco, retina nativa */
.logo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    /* La magia: el blanco puro (#fff) del JPEG se vuelve transparente */
    mix-blend-mode: multiply;
    /* Suavizado de bordes para el blend */
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Aislar el blend mode al wrapper para no afectar otros elementos */
.logo__image-wrapper {
    isolation: isolate;
}

/* Nombre de la empresa */
.logo__name {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(0, 180, 216, 0.1);
}

/* Tagline debajo del nombre */
.logo__tagline {
    color: rgba(0, 200, 240, 0.7) !important;
}

/* Versión footer — borde más sutil */
.logo--footer .logo__image-wrapper {
    border-color: rgba(0, 200, 240, 0.12);
    box-shadow:
        0 0 0 3px rgba(0, 200, 240, 0.02),
        0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   LOGO — Responsive (Retina 2x, 3x, 4K)
   La imagen nativa es 1355×764 → suficiente para @3x en displays ≤452px
   No necesitamos srcset porque la resolución nativa ya cubre todo.
   ================================================================ */
@media (min-width: 768px) {
    .logo__image-wrapper {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }
}

@media (min-width: 1440px) {
    .logo__image-wrapper {
        width: 72px;
        height: 72px;
        min-width: 72px;
    }
}

/* Reducción de movimiento — desactivar transiciones */
@media (prefers-reduced-motion: reduce) {
    .logo__image-wrapper {
        transition: none;
    }
}

/* Nav links en header oscuro */
.nav__link {
    color: rgba(220, 235, 250, 0.8) !important;
}

.nav__link:hover {
    color: #ffffff !important;
}

.nav__link::after {
    background: linear-gradient(90deg, var(--cta-amber), var(--cta-orange));
}

/* Lien CTA dans la navigation */
.nav__link--cta {
    color: var(--cta-amber) !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 50px;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.nav__link--cta::after {
    display: none !important;
}

.nav__link--cta:hover {
    color: #0b1a2e !important;
    background: linear-gradient(135deg, var(--cta-amber), var(--cta-orange));
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

/* Mobile menu toggle — líneas blancas */
.nav__toggle span {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Mobile nav panel — oscuro */
.nav--open {
    background-color: rgba(11, 28, 50, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 180, 216, 0.12) !important;
}

/* ================================================================
   10. BOTONES CTA — Alto contraste amarillo/naranja construcción
   ================================================================ */

/* Botón CTA principal */
.btn--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--cta-amber), var(--cta-orange));
    color: #0b1a2e;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 20px var(--cta-glow),
        0 2px 8px rgba(0, 0, 0, 0.3);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);
    z-index: 1;
}

.btn--cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 32px var(--cta-glow-strong),
        0 4px 16px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0b1a2e;
}

.btn--cta:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Anillo de pulso (efecto beacon) */
.btn--cta::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 14px;
    border: 2px solid rgba(245, 158, 11, 0.35);
    animation: cta-ring-pulse 2.2s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes cta-ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* Botón CTA con icono de teléfono */
.btn--cta-tel {
    background: linear-gradient(135deg, #25D366, #1a9e4b);
    box-shadow:
        0 4px 20px rgba(37, 211, 102, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn--cta-tel::after {
    border-color: rgba(37, 211, 102, 0.3);
}

.btn--cta-tel:hover {
    background: linear-gradient(135deg, #2ae66e, #25D366);
    box-shadow:
        0 8px 32px rgba(37, 211, 102, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Botón CTA con icono de email */
.btn--cta-mail {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow:
        0 4px 20px rgba(59, 130, 246, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn--cta-mail::after {
    border-color: rgba(59, 130, 246, 0.3);
}

.btn--cta-mail:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow:
        0 8px 32px rgba(59, 130, 246, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

/* CTA en el header (escritorio) */
.btn--header-cta {
    padding: 10px 20px;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* CTA strip — banda horizontal de acción rápida */
.cta-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: rgba(15, 40, 70, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 200, 240, 0.12);
    border-radius: var(--bp-radius);
    text-align: center;
    margin-top: var(--space-8);
    box-shadow: var(--bp-shadow-card);
}

.cta-strip__text {
    color: var(--bp-text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
}

.cta-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

@media (min-width: 640px) {
    .cta-strip {
        flex-direction: row;
        justify-content: space-between;
        padding: var(--space-6) var(--space-8);
    }
    .cta-strip__text {
        font-size: var(--text-xl);
        text-align: left;
    }
}

/* ================================================================
   11. CONTACT SECTION — Adaptación al blueprint
   ================================================================ */
.contact {
    background: transparent !important;
}

.contact .section__title {
    color: var(--bp-heading);
}

.contact__intro {
    color: var(--bp-text-secondary) !important;
}

.contact__item .contact__label {
    color: var(--bp-text-muted);
}

.contact__item address,
.contact__item a {
    color: var(--bp-text-primary) !important;
}

.contact__item a:hover {
    color: var(--cta-amber) !important;
}

.contact__icon {
    background: rgba(0, 180, 216, 0.1) !important;
    border: 1px solid rgba(0, 200, 240, 0.12);
    color: rgba(0, 210, 255, 0.85) !important;
}

.contact__form-wrapper {
    background: rgba(15, 40, 70, 0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--bp-border-card) !important;
    border-radius: var(--bp-radius) !important;
    box-shadow: var(--bp-shadow-card);
}

.contact__form-title {
    color: var(--bp-heading) !important;
}

.form__label {
    color: var(--bp-text-secondary) !important;
}

.form__input,
.form__select,
.form__textarea {
    background: rgba(11, 31, 54, 0.6) !important;
    border: 1px solid rgba(0, 180, 216, 0.15) !important;
    color: var(--bp-text-primary) !important;
    border-radius: 8px !important;
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: rgba(180, 200, 220, 0.4) !important;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    border-color: rgba(0, 210, 255, 0.5) !important;
    background: rgba(11, 31, 54, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1) !important;
}

.form__checkbox-label {
    color: var(--bp-text-muted) !important;
}

/* ================================================================
   12. PRESENTATION SECTION — Ajustes blueprint
   ================================================================ */
/* Badge del constructor sobre imagen */
.presentation__badge {
    background: rgba(11, 28, 50, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 200, 240, 0.15);
    border-radius: var(--bp-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.badge__label {
    color: rgba(0, 200, 240, 0.7) !important;
}

.badge__name {
    color: #ffffff !important;
}

.badge__title {
    color: var(--cta-amber) !important;
}

.presentation__stats {
    border-top-color: rgba(0, 180, 216, 0.12) !important;
}

/* ================================================================
   13. FOOTER — Adaptación blueprint
   ================================================================ */
.footer {
    background-color: rgba(8, 22, 40, 0.95) !important;
    border-top: 1px solid rgba(0, 180, 216, 0.1);
}

.footer__legal,
.footer__bottom {
    border-top-color: rgba(0, 180, 216, 0.08) !important;
}

.footer__title {
    color: rgba(0, 200, 240, 0.7) !important;
}

.footer__desc {
    color: var(--bp-text-muted) !important;
}

.footer__legal-info p,
.footer__legal-info address {
    color: var(--bp-text-muted) !important;
}

.footer__bottom p {
    color: rgba(180, 200, 220, 0.4) !important;
}

/* ================================================================
   14. BREADCRUMB — Adaptación (subpáginas)
   ================================================================ */
.breadcrumb {
    background: rgba(11, 28, 50, 0.5);
    border-bottom: 1px solid rgba(0, 180, 216, 0.08);
}

.breadcrumb a {
    color: var(--bp-text-secondary);
}

.breadcrumb a:hover {
    color: var(--cta-amber);
}

.breadcrumb__current {
    color: var(--bp-text-primary);
}

/* ================================================================
   15. GALLERY — Refuerzo visual
   ================================================================ */
.gallery__item {
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.gallery__overlay {
    background: linear-gradient(
        to top,
        rgba(8, 22, 40, 0.92) 0%,
        rgba(8, 22, 40, 0.2) 50%,
        transparent 100%
    );
}

/* ================================================================
   16. BOTÓN WHATSAPP — Mantener prominencia
   ================================================================ */
.whatsapp-float {
    z-index: 10000;
}

/* ================================================================
   17. ANIMACIONES GLOBALES
   ================================================================ */
@keyframes blueprint-scan {
    0%, 100% { opacity: 0.03; }
    50%      { opacity: 0.06; }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .btn--cta::after,
    .btn--cta-tel::after,
    .btn--cta-mail::after {
        animation: none;
        display: none;
    }
    .whatsapp-float::before {
        animation: none;
        display: none;
    }
}

/* ================================================================
   18. RESPONSIVE — Ajustes finos
   ================================================================ */
@media (max-width: 639px) {
    .glass-card {
        padding: var(--space-6) var(--space-4);
        border-radius: 14px;
    }

    .btn--cta {
        padding: 12px 20px;
        font-size: var(--text-xs);
    }

    .cta-strip__text {
        font-size: var(--text-base);
    }

    /* Header CTA compacto en móvil */
    .btn--header-cta {
        padding: 8px 14px;
        font-size: 0.7rem;
        gap: 4px;
        letter-spacing: 0.03em;
        border-radius: 6px;
    }

    .btn--header-cta svg {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 640px) {
    .btn--header-cta {
        padding: 10px 18px;
    }
}

@media (max-width: 374px) {
    /* Ultra-móvil: ocultar texto del CTA, solo icono */
    .btn--header-cta {
        padding: 8px;
        min-width: 36px;
        border-radius: 50%;
    }
    .btn--header-cta span {
        display: none;
    }
}

@media (min-width: 1440px) {
    .glass-card {
        padding: var(--space-24) var(--space-16);
    }
}