/* ─────────────────────────────────────────
   Ocity Presentation — Custom Styles
   Complementa Tailwind con estilos propios
───────────────────────────────────────── */

/* Variables de color Ocity */
:root {
  --oc-orange: #F47920;
  --oc-red:    #E03127;
  --oc-yellow: #F5C200;
  --oc-teal:   #2BAAAD;
  --oc-green:  #8DC63F;
  --oc-navy:   #1A5F72;
  --bg-dark:   #1a1d27;
}

html {
  font-size: 20px;
}

/* No seleccionable */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button, a, [onclick] {
  cursor: pointer;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background: var(--bg-dark);
  font-family: 'Inter', sans-serif;
}

/* ── Slide engine ── */
.slide {
  position: absolute;
  inset: 0;
  top: 72px;
  width: 100%;
  height: calc(100% - 72px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateX(60px);
  overflow-y: auto;
}
.slide.active {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}
.slide.prev {
  opacity: 0;
  transform: translateX(-60px);
}

/* ── Color bar ── */
.color-bar {
  height: 6px;
  flex-shrink: 0;
  background: linear-gradient(90deg,
    var(--oc-orange) 0%, var(--oc-red) 20%, var(--oc-yellow) 40%,
    var(--oc-teal) 60%, var(--oc-green) 80%, var(--oc-navy) 100%
  );
}

/* ── Grid texture ── */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Navigation dots ── */
.nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2); cursor: pointer;
  transition: all 0.3s;
}
.nav-dot.active { background: white; transform: scale(1.3); }

/* ── Index cards ── */
.index-card { cursor: pointer; transition: all 0.25s ease; }
.index-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* ── Logo placeholder ── */
.logo-box {
  border: 2px dashed rgba(255,255,255,0.2); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Keyboard hint badge ── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px; font-size: 10px; color: rgba(255,255,255,0.4);
}

/* ── Section title accent line ── */
.section-accent { height: 4px; width: 48px; border-radius: 9999px; }

/* ── Phone mockup wrapper ── */
.phones-wrapper {
  display: flex; gap: 2rem; align-items: center;
  transform-origin: center center; transform: scale(1);
  transition: transform 0.2s ease;
}

/* ── Two column layout helper ── */
.slide-cols {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.slide-col-left {
  width: clamp(12rem, 18vw, 18rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-right: 1px solid rgba(255,255,255,0.05);
}
.slide-col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4rem;
  overflow-y: auto;
}