/* ==========================================================================
   QHSEfrance — Showcase de producto
   Colores tomados de las identidades reales de QHSEproTools y FIREproTools.

   IMPORTANTE:
   - No modifica la navbar de QHSEfrance.
   - No modifica el color físico del iPhone / iPad / Mac.
   - Solo estiliza el fondo del scrollytelling, tarjetas de texto y CTA.
   ========================================================================== */

/* ==========================================================================
   QHSEproTools — DARK
   Base real:
   #03010a / #171328 / #211b3b / #241a44
   Marca:
   #955CAF / #7c4b95 / #5CA8FF
   ========================================================================== */
body[data-brand="qhseprotools"] {
  --showcase-bg: #03010a;
  --showcase-bg-soft: #171328;
  --showcase-surface: #211b3b;
  --showcase-surface-strong: #241a44;

  --showcase-primary: #955CAF;
  --showcase-primary-strong: #7c4b95;
  --showcase-accent: #5CA8FF;

  --showcase-text-main: #E4DDFF;
  --showcase-text-muted: #B3A9E6;

  --showcase-border: rgba(255,255,255,.12);
  --showcase-card:
    radial-gradient(circle at 0% 0%, rgba(149,92,175,.22) 0%, transparent 48%),
    linear-gradient(145deg, #1b1430 0%, #251a45 100%);
  --showcase-card-shadow:
    0 18px 42px rgba(0,0,0,.50),
    0 0 28px rgba(92,168,255,.08);

  --showcase-btn:
    linear-gradient(135deg, #7c4b95 0%, #955CAF 72%, #5CA8FF 135%);
  --showcase-btn-hover:
    linear-gradient(135deg, #8a54a4 0%, #a76bc1 72%, #70b5ff 135%);
  --showcase-btn-shadow: 0 9px 24px rgba(149,92,175,.30);
}

/* QHSEproTools — LIGHT
   Paleta real actual de la app: pino / olivo / HSE */
body[data-brand="qhseprotools"][data-theme="light"] {
  --showcase-bg: #caeaae;
  --showcase-bg-soft: #b7c3a3;
  --showcase-surface: #a3b18a;
  --showcase-surface-strong: #a3b18a;

  --showcase-primary: #344e41;
  --showcase-primary-strong: #3a5a40;
  --showcase-accent: #588157;

  --showcase-text-main: #1f2a21;
  --showcase-text-muted: #3f5145;

  --showcase-border: rgba(52,78,65,.16);
  --showcase-card:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22) 0%, transparent 48%),
    linear-gradient(145deg, rgba(163,177,138,.96) 0%, rgba(183,195,163,.96) 100%);
  --showcase-card-shadow:
    0 18px 36px rgba(52,78,65,.14),
    0 0 22px rgba(52,78,65,.08);

  --showcase-btn: linear-gradient(135deg, #3a5a40 0%, #588157 100%);
  --showcase-btn-hover: linear-gradient(135deg, #344e41 0%, #4f7750 100%);
  --showcase-btn-shadow: 0 8px 20px rgba(52,78,65,.22);
}

/* ==========================================================================
   FIREproTools — DARK
   Base real:
   #0d0e0f / #141516 / #191a1c / #202124
   Marca:
   #ff5a1f / #ed4812 / #ff8a00
   ========================================================================== */
body[data-brand="fireprotools"] {
  --showcase-bg: #0d0e0f;
  --showcase-bg-soft: #141516;
  --showcase-surface: #191a1c;
  --showcase-surface-strong: #202124;

  --showcase-primary: #ff5a1f;
  --showcase-primary-strong: #ed4812;
  --showcase-accent: #ff8a00;

  --showcase-text-main: #f2f2f2;
  --showcase-text-muted: #c3c3c3;

  --showcase-border: rgba(255,255,255,.09);
  --showcase-card:
    radial-gradient(circle at 100% 0%, rgba(255,90,31,.12) 0%, transparent 42%),
    linear-gradient(145deg, #202124 0%, #151618 100%);
  --showcase-card-shadow:
    0 18px 42px rgba(0,0,0,.54),
    0 0 28px rgba(255,90,31,.08);

  --showcase-btn: linear-gradient(135deg, #ff4d1c 0%, #ff8a00 100%);
  --showcase-btn-hover: linear-gradient(135deg, #ff6535 0%, #ff9b24 100%);
  --showcase-btn-shadow: 0 9px 24px rgba(255,90,31,.28);
}

/* FIREproTools — LIGHT
   Blanco cálido / grafito / naranja fuego */
body[data-brand="fireprotools"][data-theme="light"] {
  --showcase-bg: #f4f3f1;
  --showcase-bg-soft: #ebe9e6;
  --showcase-surface: #ffffff;
  --showcase-surface-strong: #f1efec;

  --showcase-primary: #f4511e;
  --showcase-primary-strong: #d93f0d;
  --showcase-accent: #ff7a00;

  --showcase-text-main: #171717;
  --showcase-text-muted: #505050;

  --showcase-border: rgba(30,25,20,.10);
  --showcase-card:
    radial-gradient(circle at 100% 0%, rgba(255,122,0,.07) 0%, transparent 42%),
    linear-gradient(145deg, #ffffff 0%, #faf8f5 100%);
  --showcase-card-shadow:
    0 16px 36px rgba(33,28,23,.12),
    0 0 22px rgba(244,81,30,.05);

  --showcase-btn: linear-gradient(135deg, #f4511e 0%, #ff7a00 100%);
  --showcase-btn-hover: linear-gradient(135deg, #dd3f0d 0%, #f46f00 100%);
  --showcase-btn-shadow: 0 8px 20px rgba(244,81,30,.23);
}


/* ==========================================================================
   Aplicación de las variables al showcase
   ========================================================================== */

body[data-brand="qhseprotools"] #scrolly-container,
body[data-brand="fireprotools"] #scrolly-container {
  background:
    radial-gradient(
      circle at 50% 8%,
      color-mix(in srgb, var(--showcase-primary) 15%, transparent) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 72%,
      color-mix(in srgb, var(--showcase-accent) 9%, transparent) 0%,
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--showcase-bg-soft) 0%,
      var(--showcase-bg) 72%,
      var(--showcase-bg) 100%
    ) !important;
  transition: background .35s ease;
}

/* La pantalla interior puede seguir mostrando las capturas originales sin tinte. */
body[data-brand="qhseprotools"] #scrolly-container .screen-content,
body[data-brand="fireprotools"] #scrolly-container .screen-content {
  filter: none !important;
}

/* Tarjetas de contenido */
body[data-brand="qhseprotools"] #scrolly-container .text-overlay,
body[data-brand="fireprotools"] #scrolly-container .text-overlay {
  position: absolute;
  overflow: hidden;
  background: var(--showcase-card) !important;
  border: 1px solid var(--showcase-border) !important;
  color: var(--showcase-text-main) !important;
  box-shadow: var(--showcase-card-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    opacity .48s ease,
    transform .48s ease,
    background .35s ease,
    border-color .35s ease;
}

/* Firma visual de cada software */
body[data-brand="qhseprotools"] #scrolly-container .text-overlay::before,
body[data-brand="fireprotools"] #scrolly-container .text-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--showcase-primary-strong),
    var(--showcase-primary),
    var(--showcase-accent)
  );
  opacity: .92;
}

body[data-brand="qhseprotools"] #scrolly-container .text-overlay h2,
body[data-brand="fireprotools"] #scrolly-container .text-overlay h2 {
  color: var(--showcase-text-main) !important;
  text-shadow: none !important;
}

body[data-brand="qhseprotools"] #scrolly-container .text-overlay p,
body[data-brand="fireprotools"] #scrolly-container .text-overlay p {
  color: var(--showcase-text-muted) !important;
}

/* CTA */
body[data-brand="qhseprotools"] #scrolly-container .btn-link,
body[data-brand="fireprotools"] #scrolly-container .btn-link {
  background: var(--showcase-btn) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--showcase-accent) 28%, transparent) !important;
  box-shadow: var(--showcase-btn-shadow) !important;
  text-shadow: none !important;
}

body[data-brand="qhseprotools"] #scrolly-container .btn-link:hover,
body[data-brand="qhseprotools"] #scrolly-container .btn-link:focus-visible,
body[data-brand="fireprotools"] #scrolly-container .btn-link:hover,
body[data-brand="fireprotools"] #scrolly-container .btn-link:focus-visible {
  background: var(--showcase-btn-hover) !important;
  transform: translateY(-1px);
}

/* Un halo muy sutil que pertenece a la APP, no al metal del dispositivo. */
body[data-brand="qhseprotools"] #scrolly-container .iphone-container,
body[data-brand="fireprotools"] #scrolly-container .iphone-container {
  filter:
    drop-shadow(
      0 16px 30px color-mix(in srgb, var(--showcase-primary) 10%, transparent)
    );
}

/*
 * PROTECCIÓN DEL CHASIS
 * Los colores físicos del dispositivo siguen viniendo exclusivamente de
 * iphone15.css. No usamos aquí background/border/filter sobre .iphone-body.
 */


/* ==========================================================================
   Ajuste de legibilidad — FIREproTools light
   El título no debe heredar tonos demasiado claros ni restos violáceos.
   ========================================================================== */
body[data-brand="fireprotools"][data-theme="light"] #scrolly-container .text-overlay h2{
  color: var(--showcase-primary-strong) !important; /* #d93f0d */
  -webkit-text-fill-color: var(--showcase-primary-strong) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body[data-brand="fireprotools"][data-theme="light"] #scrolly-container .text-overlay.visible h2{
  color: var(--showcase-primary-strong) !important;
  -webkit-text-fill-color: var(--showcase-primary-strong) !important;
}


/* ==========================================================================
   FIREproTools LIGHT — Navbar QHSEfrance
   Ajuste preciso sobre la estructura REAL:
   .header .navigation ul li ...

   Criterio:
   - navbar neutra, tecnológica y clara;
   - FIRE se reconoce por el acento naranja, no por pintar toda la barra;
   - submenu blanco cálido con texto grafito;
   - sin verde heredado.
   ========================================================================== */

body[data-brand="fireprotools"][data-theme="light"] .header {
  background: linear-gradient(90deg, #f7f8f9 0%, #f2f3f4 52%, #f7f8f9 100%) !important;
  border-bottom: 1px solid rgba(30, 32, 35, 0.10) !important;
  box-shadow: 0 8px 24px rgba(28, 25, 22, 0.08) !important;
}

/* Links principales */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation > ul > li > a {
  color: #24272b !important;
  -webkit-text-fill-color: #24272b !important;
  background: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Hover / sección desplegada */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation > ul > li:hover > a,
body[data-brand="fireprotools"][data-theme="light"] .header .navigation > ul > li:focus-within > a {
  color: #d9460f !important;
  -webkit-text-fill-color: #d9460f !important;
  background: rgba(244, 81, 30, 0.055) !important;
  box-shadow: inset 0 -3px 0 #f4511e !important;
}

/* Submenu de escritorio */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul {
  background: linear-gradient(145deg, #fffdfb 0%, #f8f4ef 100%) !important;
  border: 1px solid rgba(244, 81, 30, 0.14) !important;
  border-top: 3px solid #f4511e !important;
  box-shadow: 0 18px 38px rgba(36, 30, 25, 0.14) !important;
}

/* Links del submenu */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul li a {
  color: #27221e !important;
  -webkit-text-fill-color: #27221e !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  font-weight: 650 !important;
}

/* Hover submenu */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul li a:hover,
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul li a:focus-visible {
  color: #d9460f !important;
  -webkit-text-fill-color: #d9460f !important;
  background: rgba(244, 81, 30, 0.075) !important;
}

/* Subniveles: mantener la misma superficie, sin volver al verde */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul li ul,
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul li ul li ul {
  background: linear-gradient(145deg, #fffdfb 0%, #f8f4ef 100%) !important;
}

/* Logo / marca del navbar:
   no se recolorea el archivo de logo; solo evitamos estilos de texto heredados. */
body[data-brand="fireprotools"][data-theme="light"] .header .logo,
body[data-brand="fireprotools"][data-theme="light"] .header .brand,
body[data-brand="fireprotools"][data-theme="light"] .header .brand-name {
  color: #202327 !important;
  -webkit-text-fill-color: #202327 !important;
  opacity: 1 !important;
}

/* Menú móvil */
body[data-brand="fireprotools"][data-theme="light"] .nav-mobile,
body[data-brand="fireprotools"][data-theme="light"] .mobile-menu {
  background: #f7f8f9 !important;
  border-top: 1px solid rgba(30, 32, 35, 0.10) !important;
  box-shadow: 0 12px 28px rgba(28,25,22,.10) !important;
}

body[data-brand="fireprotools"][data-theme="light"] .menu-item {
  border-bottom: 1px solid rgba(30,32,35,.08) !important;
}

body[data-brand="fireprotools"][data-theme="light"] .menu-item > a,
body[data-brand="fireprotools"][data-theme="light"] .mobile-menu a {
  color: #24272b !important;
  -webkit-text-fill-color: #24272b !important;
  opacity: 1 !important;
}

body[data-brand="fireprotools"][data-theme="light"] .menu-item > a:hover,
body[data-brand="fireprotools"][data-theme="light"] .mobile-menu a:hover {
  color: #d9460f !important;
  -webkit-text-fill-color: #d9460f !important;
  background: rgba(244,81,30,.065) !important;
}

body[data-brand="fireprotools"][data-theme="light"] .mobile-menu ul ul {
  border-left: 2px solid rgba(244,81,30,.22) !important;
}

/* Evita que reglas globales light vuelvan a imponer el verde */
body[data-brand="fireprotools"][data-theme="light"] .header .navigation ul li ul,
body[data-brand="fireprotools"][data-theme="light"] .nav-mobile {
  --qhse-primary: #f4511e;
  --qhse-primary-strong: #d9460f;
}