/**
 * OneFly · onefly.css
 * Estilos personalizados que dan identidad visual al sitio.
 *
 * Construido en Prompt 15. Sobreescribe selectivamente clases de
 * Bootstrap 5.3 sin romper compatibilidad con los Prompts 1-14:
 * NO se modifican los archivos PHP, solo se añaden reglas CSS.
 *
 * Paleta extraída del logo (/img/onefly_logo.png):
 *   navy   #1A1C46 (mode de 12,577 pixels)
 *   orange #ED621E (mode de 8,165 pixels)
 *
 * Disciplina 60-30-10 (decisión cliente, Opción A):
 *   60% — neutros (white, light, warm-soft) en fondos de secciones
 *   30% — primario navy (texto, navbar, footer, secciones dark)
 *   10% — acento naranja (CTAs primarios, badges, focus, hover activos)
 *
 * Estructura del archivo:
 *   1. Custom properties (:root)
 *   2. Tipografía base
 *   3. Utilidades de marca (.text-primary-onefly, .btn-primary-onefly, ...)
 *   4. Overrides selectivos de Bootstrap (.btn-primary, .bg-dark, ...)
 *   5. Header sticky con reducción al scroll
 *   6. Cards con hover lift
 *   7. Focus visible accesible (WCAG AA)
 *   8. Placeholders ([POR COMPLETAR] mantienen amarillo Bootstrap)
 *   9. Botón WhatsApp flotante con pulso
 *  10. Fade-in lazy reveal al scroll
 *  11. Smooth scroll
 *  12. prefers-reduced-motion overrides
 */


/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Neutros (60%) */
    --onefly-white:        #FFFFFF;
    --onefly-light:        #F8F9FA;  /* Bootstrap light */
    --onefly-warm-soft:    #F5EBE0;  /* alternancia plastas, calidez sin saturar */
    --onefly-gray-100:     #E9ECEF;  /* bordes y divisores */
    --onefly-gray-600:     #6C757D;  /* texto secundario */

    /* Primario (30%) — extraído del logo PNG */
    --onefly-navy:         #1A1C46;
    --onefly-navy-light:   #2D3068;  /* +18 por canal sobre navy, hover de elementos */

    /* Acento (10%) — extraído del logo PNG */
    --onefly-orange:       #ED621E;
    --onefly-orange-soft:  #C4623D;  /* apagado para bordes destacados */
    --onefly-orange-dark:  #C8521A;  /* hover sobre CTAs naranja, ~10% más oscuro */

    /* Fondos dark · alias del navy del logo. Decisión cliente (fix v2):
       las secciones .bg-dark y el footer usan navy del logo, NO negro
       genérico. Esto refuerza la identidad de marca en cada sección de
       autoridad y asegura que el sitio "no se vea como agujero negro". */
    --onefly-dark:         #1A1C46;  /* alias del navy para fondos dark sections */
    --onefly-darker:       #0D0D0D;  /* legacy/reserved — NO usar en producción nueva */
    /* Texto sobre fondos dark — ratio #F8F9FA sobre #1A1C46 ≈ 14.8:1 (WCAG AAA) */
    --onefly-dark-text:    #F8F9FA;

    /* Verde WhatsApp (Bootstrap btn-success ya cubre, alias documental) */
    --onefly-whatsapp:     #25D366;

    /* Tipografía */
    --onefly-font-base:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Sombras de marca */
    --onefly-shadow-sm:    0 2px 4px rgba(26, 28, 70, 0.06);
    --onefly-shadow-md:    0 4px 12px rgba(26, 28, 70, 0.10);
    --onefly-shadow-lg:    0 8px 24px rgba(26, 28, 70, 0.14);

    /* Curvas de animación */
    --onefly-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --onefly-dur-fast:     150ms;
    --onefly-dur-base:     200ms;
    --onefly-dur-slow:     250ms;
    --onefly-dur-reveal:   600ms;
}


/* ============================================================
   2. TIPOGRAFÍA BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
    font-family: var(--onefly-font-base);
    color: var(--onefly-navy);
    background-color: var(--onefly-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--onefly-navy);
    letter-spacing: -0.01em;
}

a {
    color: var(--onefly-navy);
    transition: color var(--onefly-dur-fast) ease;
}
a:hover {
    color: var(--onefly-orange);
}


/* ============================================================
   3. UTILIDADES DE MARCA
   ============================================================ */
.text-primary-onefly  { color: var(--onefly-navy) !important; }
.text-onefly-orange   { color: var(--onefly-orange) !important; }
.bg-primary-onefly    { background-color: var(--onefly-navy) !important; }
.bg-warm-soft         { background-color: var(--onefly-warm-soft) !important; }
.border-onefly-orange { border-color: var(--onefly-orange) !important; }

/* Utilidad de fondo naranja con texto blanco. Aplicada en badges, círculos
   numerados de timeline e icon-circles de marca (acento del 10%). NO debe
   usarse como plasta de fondo grande; sólo elementos puntuales. */
.bg-onefly-orange {
    background-color: var(--onefly-orange) !important;
    color: var(--onefly-white) !important;
}

/* CTA primario (azul navy del lockup) */
.btn-primary-onefly {
    background-color: var(--onefly-navy);
    border-color: var(--onefly-navy);
    color: var(--onefly-white);
    transition:
        background-color var(--onefly-dur-base) ease,
        border-color var(--onefly-dur-base) ease,
        transform var(--onefly-dur-base) ease,
        box-shadow var(--onefly-dur-base) ease;
}
.btn-primary-onefly:hover,
.btn-primary-onefly:focus {
    background-color: var(--onefly-navy-light);
    border-color: var(--onefly-navy-light);
    color: var(--onefly-white);
    box-shadow: var(--onefly-shadow-md);
}
.btn-primary-onefly:active {
    background-color: var(--onefly-navy);
    transform: translateY(1px);
}

/* CTA acento (naranja del logo). Disponible para usos puntuales (10% del sitio) */
.btn-onefly-orange {
    background-color: var(--onefly-orange);
    border-color: var(--onefly-orange);
    color: var(--onefly-white);
    transition:
        background-color var(--onefly-dur-base) ease,
        border-color var(--onefly-dur-base) ease,
        transform var(--onefly-dur-base) ease,
        box-shadow var(--onefly-dur-base) ease;
}
.btn-onefly-orange:hover,
.btn-onefly-orange:focus {
    background-color: var(--onefly-orange-dark);
    border-color: var(--onefly-orange-dark);
    color: var(--onefly-white);
    box-shadow: var(--onefly-shadow-md);
}

/* Icono circular (utilizado en diferenciadores, varios) — mantiene amarillo
   de Bootstrap por default; alternativa naranja-onefly para acento de marca */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}
.icon-circle-orange {
    background-color: rgba(237, 98, 30, 0.12);
    color: var(--onefly-orange);
}


/* ============================================================
   4. OVERRIDES SELECTIVOS DE BOOTSTRAP
   ============================================================ */

/* Botones primary y variantes · TODOS a navy OneFly (era azul BS default).
   Override completo de Bootstrap CSS custom properties por variante:
   .btn-primary se ve sólido navy; .btn-outline-primary se ve outline navy
   y al hover invierte a sólido. Cubre el bug del Prompt 15 fix v1 donde
   .btn-outline-primary aparecía como azul Bootstrap default. */
.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--onefly-navy);
    --bs-btn-border-color: var(--onefly-navy);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--onefly-navy-light);
    --bs-btn-hover-border-color: var(--onefly-navy-light);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--onefly-navy-light);
    --bs-btn-active-border-color: var(--onefly-navy-light);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--onefly-navy);
    --bs-btn-disabled-border-color: var(--onefly-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--onefly-navy);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--onefly-navy);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--onefly-navy);
    --bs-btn-hover-border-color: var(--onefly-navy);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--onefly-navy);
    --bs-btn-active-border-color: var(--onefly-navy);
    --bs-btn-disabled-color: var(--onefly-navy);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--onefly-navy);
}

/* btn-warning · uso único: /produccion-audiovisual-cancun.php sub-drones
   destacada que vive en sección bg-dark (ahora navy del logo). Decisión
   técnica: naranja vibrante como CTA. Razones: (1) navy sobre navy se
   pierde, (2) el badge "Especialidad regional" en la misma sección ya
   es naranja, (3) el botón es la acción primaria y necesita lift visual.
   Contraste #ED621E sobre #1A1C46 ≈ 4.6:1 (WCAG AA body, AAA grande). */
.btn-warning {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--onefly-orange);
    --bs-btn-border-color: var(--onefly-orange);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--onefly-orange-dark);
    --bs-btn-hover-border-color: var(--onefly-orange-dark);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--onefly-orange-dark);
    --bs-btn-active-border-color: var(--onefly-orange-dark);
}

/* bg-dark · ahora navy del logo en lugar de #0D0D0D. La regla cubre tanto
   secciones <section class="bg-dark"> como el <footer class="bg-dark">,
   y un alias .onefly-section-dark para usos futuros sin la utility BS. */
.bg-dark,
footer.bg-dark,
.site-footer.bg-dark,
.onefly-section-dark {
    background-color: var(--onefly-dark) !important;
}

/* alert-warning re-tematizado a OneFly · el callout de Prompt 8
   (foto-y-video-eventos-corporativos.php sec 2) usa esta clase. La
   regla del cliente: amarillo Bootstrap se reserva para placeholders
   [POR COMPLETAR], los callouts toman acento de marca.
   La paleta: tono naranja apagado de fondo, borde orange-soft, texto
   navy para legibilidad sobre el fondo claro. */
.alert-warning {
    --bs-alert-color: var(--onefly-navy);
    --bs-alert-bg: rgba(237, 98, 30, 0.08);
    --bs-alert-border-color: var(--onefly-orange-soft);
    --bs-alert-link-color: var(--onefly-navy);
}
.alert-warning .alert-link {
    color: var(--onefly-navy);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--onefly-orange);
}
.alert-warning .alert-link:hover {
    color: var(--onefly-orange);
    text-decoration-color: var(--onefly-orange);
}
.alert-warning > .bi {
    color: var(--onefly-orange);
}

/* Navbar: identidad OneFly */
.site-header { transition: padding var(--onefly-dur-base) ease, box-shadow var(--onefly-dur-base) ease; }
.site-header .navbar-brand { padding-top: 0.25rem; padding-bottom: 0.25rem; }


/* ============================================================
   5. HEADER STICKY CON REDUCCIÓN AL SCROLL
   La clase .is-scrolled la añade /js/onefly.js cuando scroll > 100px.
   ============================================================ */
.site-header.is-scrolled {
    box-shadow: var(--onefly-shadow-sm);
}
.site-header.is-scrolled .navbar {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
/* El logo NO se reduce — el padding del nav sí. */


/* ============================================================
   6. CARDS CON HOVER LIFT SUTIL
   ============================================================ */
.card {
    transition:
        transform var(--onefly-dur-slow) var(--onefly-ease-out),
        box-shadow var(--onefly-dur-slow) var(--onefly-ease-out);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Excepción: cards con border-warning (placeholders) no levitan — son
   marcadores estáticos de "falta contenido", no elementos navegables. */
.card.border-warning:hover {
    transform: none;
    box-shadow: none;
}


/* ============================================================
   7. FOCUS VISIBLE ACCESIBLE (WCAG AA)
   Outline naranja de marca, solo visible al navegar con teclado
   (:focus-visible). Aplicado a TODOS los interactivos.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible {
    outline: 3px solid var(--onefly-orange);
    outline-offset: 2px;
    box-shadow: none;
}
/* Limpiar el ring por defecto de Bootstrap en accordion */
.accordion-button:focus { box-shadow: none; }


/* ============================================================
   8. PLACEHOLDERS
   Los bloques [POR COMPLETAR POR EL CLIENTE] mantienen amarillo
   Bootstrap a propósito — son señal de "falta contenido", NO
   identidad de marca. Padding y forma consistente.
   ============================================================ */
.placeholder-case-content,
.placeholder-section {
    background-color: rgba(255, 193, 7, 0.06);
}
.placeholder-case-content i.bi,
.placeholder-section i.bi {
    line-height: 1;
}


/* ============================================================
   9. BOTÓN WHATSAPP FLOTANTE CON PULSO SUTIL
   Selector amplio: cualquier elemento con clase .whatsapp-float
   o que sea descendiente de #whatsapp-float (compatibilidad con
   diferentes implementaciones del include).
   ============================================================ */
@keyframes oneflyPulse {
    0%   { transform: scale(1);    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35); }
    50%  { transform: scale(1.05); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.50); }
    100% { transform: scale(1);    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35); }
}
.whatsapp-float,
#whatsapp-float a,
.whatsapp-floating-btn {
    animation: oneflyPulse 2s infinite ease-in-out;
}
/* Pausa el pulso en hover — el usuario está a punto de hacer click */
.whatsapp-float:hover,
#whatsapp-float a:hover,
.whatsapp-floating-btn:hover {
    animation-play-state: paused;
}


/* ============================================================
   10. FADE-IN LAZY REVEAL AL SCROLL
   /js/onefly.js añade .reveal-on-scroll a las <section> del main
   en pageload. Cuando entran al viewport (15% visible), añade
   .is-visible y la sección anima a su estado final.
   Progressive enhancement: sin JS, las secciones nunca reciben
   .reveal-on-scroll y permanecen visibles desde el inicio.
   ============================================================ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--onefly-dur-reveal) ease-out,
        transform var(--onefly-dur-reveal) ease-out;
    will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   11. PREFERS-REDUCED-MOTION
   Respetar la preferencia del usuario: deshabilitar animaciones
   no esenciales. Mantenemos transiciones cortas (color, focus)
   porque ayudan al feedback de interacción sin generar mareo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal-on-scroll,
    .reveal-on-scroll.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .whatsapp-float,
    #whatsapp-float a,
    .whatsapp-floating-btn {
        animation: none !important;
    }

    .card { transition: none !important; }
    .card:hover { transform: none !important; }
}


/* ============================================================
   12. AJUSTES DE SECCIÓN ESPECÍFICOS
   Pequeños refuerzos de marca sobre secciones existentes que
   usan clases construidas en Prompts 5-14.
   ============================================================ */

/* ---- Texto en secciones .bg-dark · contraste WCAG AAA --------------------
   Las secciones .bg-dark ahora usan navy del logo (#1A1C46, fix v2)
   en lugar de negro casi puro. Forzamos body text a #F8F9FA y los
   headings a blanco puro para máximo contraste:
     #F8F9FA / #1A1C46 ≈ 14.8:1 (AAA, requiere 7:1)
     #FFFFFF / #1A1C46 ≈ 15.7:1 (AAA)
     #ED621E / #1A1C46 ≈  4.6:1 (AA body, AAA grande)
   Cubre tanto .bg-dark como un alias .onefly-section-dark para
   secciones futuras con la misma intención sin la clase Bootstrap. */
/* Body / inline text · refuerzo v3 con !important. Las utilidades
   Bootstrap (.text-secondary, .text-muted, .text-body-secondary, .lead,
   etc.) tienen especificidad (0,1,0); algunas pierden contra cascadas
   más profundas y otras ganan por orden de carga. !important garantiza
   legibilidad uniforme sobre navy en todos los browsers. */
.bg-dark, .onefly-section-dark,
.bg-dark p, .onefly-section-dark p,
.bg-dark .lead, .onefly-section-dark .lead,
.bg-dark li, .onefly-section-dark li,
.bg-dark dt, .bg-dark dd,
.onefly-section-dark dt, .onefly-section-dark dd,
.bg-dark span:not(.badge):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.onefly-section-dark span:not(.badge):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.bg-dark .text-muted, .onefly-section-dark .text-muted,
.bg-dark .text-secondary, .onefly-section-dark .text-secondary,
.bg-dark .text-body, .onefly-section-dark .text-body,
.bg-dark .text-body-secondary, .onefly-section-dark .text-body-secondary,
.bg-dark .text-body-tertiary, .onefly-section-dark .text-body-tertiary,
.bg-dark .text-light-emphasis, .onefly-section-dark .text-light-emphasis,
.bg-dark .text-dark-emphasis, .onefly-section-dark .text-dark-emphasis {
    color: var(--onefly-dark-text) !important;
}

/* Headings · blanco puro con !important. Bootstrap utilities como
   .text-primary o .text-body-emphasis sobre headings pueden ganar
   sin esto. */
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3,
.bg-dark .h4, .bg-dark .h5, .bg-dark .h6,
.bg-dark .display-1, .bg-dark .display-2, .bg-dark .display-3,
.bg-dark .display-4, .bg-dark .display-5, .bg-dark .display-6,
.onefly-section-dark h1, .onefly-section-dark h2, .onefly-section-dark h3,
.onefly-section-dark h4, .onefly-section-dark h5, .onefly-section-dark h6 {
    color: var(--onefly-white) !important;
}

/* strong / em / b · resaltan en blanco puro sobre navy excepto cuando
   llevan clase de acento (text-warning para señalización, text-onefly-orange
   para acento de marca, text-success para WhatsApp branding). */
.bg-dark strong:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.bg-dark em:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.bg-dark b:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.onefly-section-dark strong:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.onefly-section-dark em:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.onefly-section-dark b:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger) {
    color: var(--onefly-white) !important;
}

/* Links inline (no .btn, no .alert-link, no acentos) · texto claro
   con underline naranja como hint de marca; al hover pasan a naranja
   completo. Excluimos .btn y .alert-link porque tienen estilos propios
   ya gestionados en otras secciones del CSS. */
.bg-dark a:not(.btn):not(.alert-link):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.dropdown-item):not(.nav-link),
.onefly-section-dark a:not(.btn):not(.alert-link):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.dropdown-item):not(.nav-link) {
    color: var(--onefly-dark-text) !important;
    text-decoration-color: var(--onefly-orange);
}
.bg-dark a:not(.btn):not(.alert-link):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.dropdown-item):not(.nav-link):hover,
.onefly-section-dark a:not(.btn):not(.alert-link):not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.dropdown-item):not(.nav-link):hover {
    color: var(--onefly-orange) !important;
}

/* Iconos genéricos Bootstrap Icons sobre bg-dark heredan claro. Acentos
   intencionales (text-warning placeholder, text-onefly-orange marca,
   text-success WhatsApp) preservan su color. */
.bg-dark .bi:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger),
.onefly-section-dark .bi:not(.text-warning):not(.text-onefly-orange):not(.text-success):not(.text-danger) {
    color: var(--onefly-dark-text);
}

/* Placeholder [POR COMPLETAR] adaptado a fondo dark · evita el efecto
   "cuadro blanco sobre negro" en /casos/*.php sec "Cómo lo ejecutamos".
   El border-warning amarillo + el label .text-warning se mantienen
   como señalización de "falta contenido"; el body text se aclara para
   contraste WCAG sobre el fondo navy. !important porque la utilidad
   .placeholder-case-content de la sección 8 establece un background
   amarillo-tinte que ganaría por orden de cascada en algunos browsers. */
.bg-dark .placeholder-case-content,
.onefly-section-dark .placeholder-case-content,
section[class*="bg-dark"] .placeholder-case-content {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--bs-warning) !important;
    color: var(--onefly-dark-text) !important;
}

/* Body text del placeholder en dark → claro. Se excluye .text-warning
   con :not() para que el label "POR COMPLETAR POR EL CLIENTE" siga
   amarillo (señalización). */
.bg-dark .placeholder-case-content p:not(.text-warning),
.bg-dark .placeholder-case-content li,
.bg-dark .placeholder-case-content strong:not(.text-warning),
.bg-dark .placeholder-case-content ul,
.onefly-section-dark .placeholder-case-content p:not(.text-warning),
.onefly-section-dark .placeholder-case-content li,
.onefly-section-dark .placeholder-case-content strong:not(.text-warning),
.onefly-section-dark .placeholder-case-content ul {
    color: var(--onefly-dark-text) !important;
}

/* Texto/icono amarillo de señalización dentro del placeholder en dark
   se preserva. Sobre el fondo translúcido + navy, el amarillo BS
   #ffc107 mantiene ratio 8.6:1 (WCAG AAA), legible sin alterar la
   semántica del marker. */
.bg-dark .placeholder-case-content .text-warning,
.bg-dark .placeholder-case-content .bi-pencil-square,
.onefly-section-dark .placeholder-case-content .text-warning,
.onefly-section-dark .placeholder-case-content .bi-pencil-square {
    color: var(--bs-warning) !important;
}

/* Hero principal: el subheadline secundario sobre fondo claro
   gana legibilidad con un gris medio en lugar del 600 default */
.hero-portafolio .lead,
.hero-nosotros   .lead,
.hero-faq        .lead,
.hero-contacto   .lead,
.hero-blog       .lead,
.hero-buscar     .lead,
.hero-error      .lead,
.hero-single     .lead {
    color: #4A5568;
}

/* Badge del Hero service en /index.php y /contenido-tiempo-real.php:
   si lleva clase bg-orange-onefly, queda en acento del logo */
.badge.bg-orange-onefly {
    background-color: var(--onefly-orange) !important;
    color: var(--onefly-white) !important;
}


/* ============================================================
   13. SUBRAYADO DECORATIVO H2 EN bg-dark
   Patrón premium (Stripe/Linear/Anthropic): H2 en blanco puro
   con accent line naranja corta debajo. H2 mantiene jerarquía
   tipográfica; la línea agrega marca sin saturar.
   Escape hatch: clase .no-accent en el H2 lo opt-out por sección
   si en el futuro un diseño puntual lo requiere.
   ============================================================ */
.bg-dark h2:not(.no-accent),
.bg-dark .h2:not(.no-accent),
.onefly-section-dark h2:not(.no-accent),
.onefly-section-dark .h2:not(.no-accent) {
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
}

.bg-dark h2:not(.no-accent)::after,
.bg-dark .h2:not(.no-accent)::after,
.onefly-section-dark h2:not(.no-accent)::after,
.onefly-section-dark .h2:not(.no-accent)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--onefly-orange);
    border-radius: 2px;
}

/* Centrado automático cuando el H2 (o su wrapper) lleva text-center.
   Cubre dos patrones comunes: H2 con clase directa, o H2 dentro de
   un wrapper text-center (Bootstrap idiom). */
.bg-dark h2.text-center:not(.no-accent)::after,
.bg-dark .text-center > h2:not(.no-accent)::after,
.bg-dark .text-center > .h2:not(.no-accent)::after,
.onefly-section-dark h2.text-center:not(.no-accent)::after,
.onefly-section-dark .text-center > h2:not(.no-accent)::after,
.onefly-section-dark .text-center > .h2:not(.no-accent)::after {
    left: 50%;
    transform: translateX(-50%);
}


/* ============================================================
   14. FOOTER · enhancements de identidad
   Logo + acentos naranja en h5 categorías, hover links, email,
   iconos sociales. El HTML del footer ya está pre-cableado con
   las clases (footer-logo, footer-logo-link, footer-email-highlight,
   social-icon).
   ============================================================ */

/* Logo del footer · variante white+orange sobre navy */
.footer-logo {
    max-width: 180px;
    height: auto;
}
.footer-logo-link {
    text-decoration: none;
    transition: opacity var(--onefly-dur-base) ease;
    display: inline-block;
}
.footer-logo-link:hover {
    opacity: 0.85;
}

/* Categorías del footer (h5 text-uppercase) · subrayado naranja
   más corto y discreto que el de las secciones (30px vs 50px). */
.site-footer h5 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    color: var(--onefly-white) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.site-footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--onefly-orange);
    border-radius: 2px;
}

/* Hover en links del footer (excluye logo, social icons, email). El
   selector base ya se cubre por la regla genérica de bg-dark a:not(...)
   pero aquí garantizamos el estilo de hover con underline naranja. */
.site-footer a:not(.footer-logo-link):not(.social-icon):not(.footer-email-highlight):not(.btn):not(.footer-legal-link) {
    color: var(--onefly-dark-text) !important;
    text-decoration: none;
    transition: color var(--onefly-dur-base) ease,
                text-decoration-color var(--onefly-dur-base) ease;
}
.site-footer a:not(.footer-logo-link):not(.social-icon):not(.footer-email-highlight):not(.btn):not(.footer-legal-link):hover {
    color: var(--onefly-orange) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--onefly-orange);
}

/* Link legal del bottom bar (P80.2): hover naranja SIN subrayado
   (petición del cliente). */
.site-footer .footer-legal-link {
    color: var(--onefly-dark-text) !important;
    text-decoration: none;
    transition: color var(--onefly-dur-base) ease;
}
.site-footer .footer-legal-link:hover {
    color: var(--onefly-orange) !important;
    text-decoration: none;
}

/* Email destacado en naranja · siempre visible, sin necesidad de hover */
.footer-email-highlight {
    color: var(--onefly-orange) !important;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--onefly-dur-base) ease,
                text-decoration-color var(--onefly-dur-base) ease;
}
.footer-email-highlight:hover {
    color: var(--onefly-orange) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    opacity: 0.9;
}

/* Iconos sociales · claros por default, naranja + lift sutil al hover.
   Aplicado vía clase .social-icon para compat amplia (no depende de :has()). */
.site-footer .social-icon {
    color: var(--onefly-dark-text) !important;
    transition: color var(--onefly-dur-base) ease,
                transform var(--onefly-dur-base) ease;
    display: inline-block;
}
.site-footer .social-icon:hover {
    color: var(--onefly-orange) !important;
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .site-footer .social-icon:hover { transform: none; }
}


/* ============================================================
   15. HERO HOME · imagen decorativa de fondo (Prompt 18)
   Pseudo-elemento ::before con background-image al 10% opacity:
   da textura sin agregar <img> al DOM (no degrada Lighthouse) y
   sin distraer del copy. pointer-events:none mantiene el botón
   WhatsApp clickeable. En mobile bajamos a 7% para preservar
   contraste sobre cuerpo de texto en pantallas chicas.
   ============================================================ */
.hero-home {
    position: relative;
    overflow: hidden;
}
.hero-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/car1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.10;
    z-index: 0;
    pointer-events: none;
}
.hero-home > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .hero-home::before {
        opacity: 0.07;
    }
}


/* ============================================================
   16. /servicios.php · sticky nav de áreas (Prompt 23)
   Nav secundaria que aparece debajo del header sticky-top principal
   y permite saltar entre #drones / #audiovisual / #cobertura sin JS
   adicional. scroll-padding-top compensa la altura del header + nav
   para que el anchor target no quede oculto debajo del sticky.
   scroll-behavior: smooth ya está declarado en sección 2 (tipografía
   base); aquí sólo añadimos el padding-top.
   ============================================================ */
.services-sticky-nav {
    z-index: 1020; /* debajo del header principal pero encima del contenido */
}
.services-sticky-nav .btn {
    transition: all var(--onefly-dur-base, 200ms) ease;
}
.services-sticky-nav .btn:hover,
.services-sticky-nav .btn:focus {
    background-color: var(--onefly-navy);
    color: var(--onefly-white);
    border-color: var(--onefly-navy);
}

html {
    scroll-padding-top: 140px; /* compensar header + sticky nav */
}

@media (max-width: 575.98px) {
    .services-sticky-nav .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Tinte sutil para card destacada de "Ver toda la oferta" en servicios */
.bg-onefly-light {
    background-color: rgba(237, 98, 30, 0.05);
}

/* ============================================================
   P71 · Regla global anti-distorsión de imágenes en cards.
   Los atributos width/height de <img> actúan como alto FIJO en px
   cuando el CSS solo fija width:100% (Bootstrap .card-img-top),
   deformando la foto en columnas angostas. Esta regla garantiza:
   - caja uniforme 4:3 en todas las cards (grids parejos)
   - la foto se RECORTA (cover) en vez de estirarse
   Las proporciones reales de la imagen nunca se alteran.
   ============================================================ */
.card-img-top {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Grid de portafolio: cards verticales 3:4 (decisión del cliente P72) —
   la foto luce con más aire arriba/abajo. Los thumbs se generan en 3:4
   para que el recorte sea 1:1 con la caja. */
.portfolio-item .card-img-top {
    aspect-ratio: 3 / 4;
}