/* ===== services/web/www/shared/css/palettes.css ===== */
/* {{BRAND_NAME}} — Sistema de Paletas de Colores */
/* Cada paleta se activa con data-theme="nombre" en <html> */
/* REGLA: NO poner variables de color en :root — solo en [data-theme] */

/* Compartidos (no son colores) */
:root {
  --ob-radius: 1rem;
  --ob-radius-sm: 0.5rem;
}

/* Reset minimo para los pips del selector (renderizados como <button> por theme-rotator.js).
 * Solo anula defaults del navegador — width/height/border/background los pone cada contexto. */
[data-theme-pip] {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  line-height: 0;
  box-sizing: border-box;
}

/* Componente compartido para login, terminos, privacidad, recovery-email*: barra flotante. */
.ob-theme-bar {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.3rem;
  z-index: 50;
}
.ob-theme-pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}
.ob-theme-pip:hover { opacity: 1; transform: scale(1.2); }
.ob-theme-pip.active { border-color: var(--ob-text); opacity: 1; }

/* 1. Purple Night (dark) */
[data-theme="purple-night"] {
  --ob-primary: #a855f7; --ob-primary-hover: #9333ea; --ob-primary-glow: rgba(168,85,247,0.25); --ob-accent: #c084fc;
  --ob-bg: #0c0a1a; --ob-bg-gradient: linear-gradient(135deg,#0c0a1a,#1a0f2e,#0f172a);
  --ob-surface: #1a1030; --ob-surface-hover: #241545; --ob-border: #2d1f5e;
  --ob-surface-rgb: 26, 16, 48;
  --ob-text: #f5f0ff; --ob-text-muted: #a78bda; --ob-text-subtle: #6b5a8e;
  --ob-success: #4ade80; --ob-error: #f87171; --ob-warning: #fbbf24;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.4); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
}

/* 2. Ocean Depths (dark) */
[data-theme="ocean"] {
  --ob-primary: #06b6d4; --ob-primary-hover: #0891b2; --ob-primary-glow: rgba(6,182,212,0.25); --ob-accent: #67e8f9;
  --ob-bg: #041c26; --ob-bg-gradient: linear-gradient(135deg,#041c26,#0a2a3a,#062030);
  --ob-surface: #0a2a3a; --ob-surface-hover: #0f3549; --ob-border: #164e63;
  --ob-surface-rgb: 10, 42, 58;
  --ob-text: #ecfeff; --ob-text-muted: #7dd3e8; --ob-text-subtle: #3a8a9e;
  --ob-success: #34d399; --ob-error: #fb7185; --ob-warning: #fbbf24;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.4); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
}

/* 3. Ember Warm (dark, default) */
[data-theme="ember"] {
  --ob-primary: #f97316; --ob-primary-hover: #ea580c; --ob-primary-glow: rgba(249,115,22,0.25); --ob-accent: #fb923c;
  --ob-bg: #1a0f08; --ob-bg-gradient: linear-gradient(135deg,#1a0f08,#2a1810,#1c1008);
  --ob-surface: #2a1810; --ob-surface-hover: #3a2218; --ob-border: #5c3a20;
  --ob-surface-rgb: 42, 24, 16;
  --ob-text: #fff7ed; --ob-text-muted: #d4a574; --ob-text-subtle: #8a6540;
  --ob-success: #4ade80; --ob-error: #f87171; --ob-warning: #fde68a;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.4); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
}

/* 4. Mint Fresh (light-soft) */
[data-theme="mint"] {
  --ob-primary: #10b981; --ob-primary-hover: #059669; --ob-primary-glow: rgba(16,185,129,0.2); --ob-accent: #34d399;
  --ob-bg: #0f1f1a; --ob-bg-gradient: linear-gradient(135deg,#0f1f1a,#132a22,#0d1e18);
  --ob-surface: #172e25; --ob-surface-hover: #1e3a30; --ob-border: #2d5a48;
  --ob-surface-rgb: 23, 46, 37;
  --ob-text: #d1fae5; --ob-text-muted: #6ee7b7; --ob-text-subtle: #3a8a6e;
  --ob-success: #34d399; --ob-error: #fb7185; --ob-warning: #fbbf24;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.35); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.45);
}

/* 5. Rose Dawn (light-soft) */
[data-theme="rose"] {
  --ob-primary: #e11d48; --ob-primary-hover: #be123c; --ob-primary-glow: rgba(225,29,72,0.2); --ob-accent: #fb7185;
  --ob-bg: #1f0f14; --ob-bg-gradient: linear-gradient(135deg,#1f0f14,#2a1520,#1c0e16);
  --ob-surface: #2e1520; --ob-surface-hover: #3d1e2c; --ob-border: #5c2a3e;
  --ob-surface-rgb: 46, 21, 32;
  --ob-text: #fce7f3; --ob-text-muted: #f9a8d4; --ob-text-subtle: #8a4060;
  --ob-success: #4ade80; --ob-error: #fb7185; --ob-warning: #fbbf24;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.35); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.45);
}

/* 6. Carbon (dark) */
[data-theme="carbon"] {
  --ob-primary: #78716c; --ob-primary-hover: #a8a29e; --ob-primary-glow: rgba(120,113,108,0.2); --ob-accent: #a8a29e;
  --ob-bg: #09090b; --ob-bg-gradient: linear-gradient(135deg,#09090b,#18181b,#0f0f12);
  --ob-surface: #18181b; --ob-surface-hover: #27272a; --ob-border: #3f3f46;
  --ob-surface-rgb: 24, 24, 27;
  --ob-text: #fafafa; --ob-text-muted: #a1a1aa; --ob-text-subtle: #71717a;
  --ob-success: #4ade80; --ob-error: #f87171; --ob-warning: #fbbf24;
  --ob-shadow: 0 8px 32px rgba(0,0,0,0.4); --ob-shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
}


/* ===== services/web/www/shared/css/base.css ===== */
/* {{BRAND_NAME}} — Base Styles */
/* Colores en palettes.css via [data-theme] */
/* NO poner variables de color aqui — se sobreescriben las paletas */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body */
body {
  background: var(--ob-bg-gradient, var(--ob-bg));
  color: var(--ob-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Card */
.card {
  background-color: var(--ob-surface);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ob-text);
}

.card .logo {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ob-primary);
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  display: block;
}

.card p {
  color: var(--ob-text-muted);
  font-size: 0.95rem;
  margin-top: 0.75rem;
}

.badge {
  display: inline-block;
  background-color: var(--ob-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-top: 1rem;
}


/* ===== services/landing-page/www/styles.css ===== */
/* landing/styles.css — wrapper @import: el archivo viejo (607L) se particiono en 11 sub-CSS
   por dominio (base, header, buttons, hero, sections, features, partners, model, faq, footer, responsive).
   Carga unica desde landing/index.html sin modificar.
   Las paletas vienen del shared (/shared/css/palettes.css), aqui solo estilos especificos de la landing. */

@import url('/css/base.css?v={{ASSET_VERSION}}');
@import url('/css/header.css?v={{ASSET_VERSION}}');
@import url('/css/buttons.css?v={{ASSET_VERSION}}');
@import url('/css/hero.css?v={{ASSET_VERSION}}');
@import url('/css/sections.css?v={{ASSET_VERSION}}');
@import url('/css/features.css?v={{ASSET_VERSION}}');
@import url('/css/partners.css?v={{ASSET_VERSION}}');
@import url('/css/model.css?v={{ASSET_VERSION}}');
@import url('/css/faq.css?v={{ASSET_VERSION}}');
@import url('/css/footer.css?v={{ASSET_VERSION}}');
@import url('/css/responsive.css?v={{ASSET_VERSION}}');


/* ===== services/web/www/shared/ui/logo-menu.css ===== */
/* ============================================================
   OB Logo Menu — dropdown reutilizable al clickear el logo bunny
   + clase shared `.ob-logo-interactive` para feedback visual del logo.
   API: ver shared/ui/logo-menu.js (OB.installLogoMenu)
   ============================================================ */

/* Feedback visual del logo (se aplica automaticamente cuando se instala el menu).
 * - cursor pointer
 * - leve scale al hover y al focus (accesibilidad teclado)
 * - filter drop-shadow con el color de la paleta activa
 * - micro-rotacion para que se sienta "vivo"
 *
 * NO sobreescribe width/height: respeta el tamaño que ya tenga el logo en su frontend.
 */
.ob-logo-interactive {
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
  outline: none;
  /* Quitar tap-highlight gris feo en mobile */
  -webkit-tap-highlight-color: transparent;
}
.ob-logo-interactive:hover,
.ob-logo-interactive:focus-visible {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 4px 10px var(--ob-primary-glow, rgba(249, 115, 22, 0.45)));
}
.ob-logo-interactive:active {
  transform: scale(0.97);
}
.ob-logo-interactive:focus-visible {
  outline: 2px solid var(--ob-primary);
  outline-offset: 4px;
  border-radius: 50%;
}

/* ── Dropdown del menu ─────────────────────────────────────── */
.ob-logo-menu {
  position: absolute;
  z-index: 99998;
  min-width: 220px;
  max-width: 92vw;
  /* Si el menu tiene muchos items en un viewport muy chico (mobile vertical
   * o landscape pequeño), permitimos scroll vertical interno en vez de que
   * el menu se salga del viewport. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--ob-surface);
  border: 1px solid var(--ob-border);
  border-radius: 0.7rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  animation: ob-logo-menu-pop 0.14s ease-out;
}

@keyframes ob-logo-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ob-logo-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 0.45rem;
  color: var(--ob-text);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.ob-logo-menu-item:hover,
.ob-logo-menu-item:focus-visible {
  background: var(--ob-surface-hover, rgba(255, 255, 255, 0.05));
  color: var(--ob-primary);
  outline: none;
}

.ob-logo-menu-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

/* En mobile, el menu ocupa mas ancho relativo y queda pegado a un costado */
@media (max-width: 480px) {
  .ob-logo-menu {
    min-width: 180px;
    font-size: 0.95rem;
  }
}

/* ── Modal "Acerca" ────────────────────────────────────────── */
.ob-acerca-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: ob-acerca-fade 0.18s ease-out;
}

@keyframes ob-acerca-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-acerca-modal {
  position: relative;
  background: var(--ob-surface);
  border: 1px solid var(--ob-border);
  border-radius: 0.9rem;
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  max-width: 360px;
  width: 100%;
  text-align: center;
  color: var(--ob-text);
  animation: ob-acerca-pop 0.18s ease-out;
}

@keyframes ob-acerca-pop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ob-acerca-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--ob-text-muted);
  font-size: 1.6rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.ob-acerca-close:hover {
  background: var(--ob-surface-hover, rgba(255, 255, 255, 0.05));
  color: var(--ob-primary);
}

.ob-acerca-logo {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 0.6rem;
}

.ob-acerca-title {
  font-size: 1.15rem;
  margin: 0 0 1rem;
  color: var(--ob-primary);
}

.ob-acerca-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  text-align: left;
}
.ob-acerca-dl dt {
  color: var(--ob-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  align-self: center;
}
.ob-acerca-dl dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  word-break: break-all;
}