/* ============================================================
   portfolio.orinocolabs.com — piezas comunes de las tres demos
   La franja «esto es una demo», el cierre con la oferta, el salto
   de teclado y el reveal. Cada demo trae su marca en su propio CSS;
   esto usa la de Orinoco Labs para que se lea como algo aparte.
   ============================================================ */

:root {
  --demo-fondo:        #14191C;  /* granito de Orinoco */
  --demo-texto:        #F7F5F1;  /* papel */
  --demo-texto-suave:  #C9CFD1;  /* 11:1 sobre granito */
  --demo-linea:        #343C40;
  --demo-foco:         #2CA6A4;  /* agua: foco visible sobre fondo oscuro */
  --demo-fuente:       system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --demo-tactil:       44px;
  --demo-radio:        4px;
  --demo-sombra:       0 4px 8px rgba(20, 25, 28, 0.12), 0 12px 28px rgba(20, 25, 28, 0.18);
  --demo-ancho:        1200px;
  --demo-margen:       clamp(16px, 4vw, 40px);
  --demo-t-mini:   12px;
  --demo-t-chico:  14px;
  --demo-t-boton:  15px;
  --demo-t-texto:  17px;
  /* Escala de espacios: todo margen, relleno y gap sale de acá */
  --esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px; --esp-20: 20px;
  --esp-24: 24px; --esp-32: 32px; --esp-40: 40px; --esp-48: 48px; --esp-56: 56px;
}

/* ---------- Franja superior ---------- */

.demo-barra {
  background: var(--demo-fondo);
  color: var(--demo-texto);
  font-family: var(--demo-fuente);
  font-size: var(--demo-t-chico);
  line-height: 1.45;
}
.demo-barra__inner {
  max-width: var(--demo-ancho);
  margin-inline: auto;
  padding: var(--esp-8) var(--demo-margen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--esp-20);
}
.demo-barra__texto { margin: 0; padding: var(--esp-8) 0; }
.demo-barra__texto strong { font-weight: 700; }
.demo-barra__links { display: flex; flex-wrap: wrap; gap: 0 var(--esp-20); }
.demo-barra a,
.demo-cierre a:not(.demo-boton) {
  display: inline-flex;
  align-items: center;
  min-height: var(--demo-tactil);
  color: var(--demo-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.demo-barra a:hover { color: var(--demo-texto-suave); }

/* ---------- Cierre: la oferta de Orinoco ---------- */

.demo-cierre {
  background: var(--demo-fondo);
  color: var(--demo-texto);
  font-family: var(--demo-fuente);
  border-top: 1px solid var(--demo-linea);
}
.demo-cierre__inner {
  max-width: var(--demo-ancho);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 80px) var(--demo-margen);
}
.demo-cierre__eyebrow {
  margin: 0;
  font-size: var(--demo-t-mini);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--demo-texto-suave);
}
.demo-cierre__titulo {
  margin: var(--esp-16) 0 0;
  max-width: 18ch;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.demo-cierre__texto {
  margin: var(--esp-16) 0 0;
  max-width: 56ch;
  font-size: var(--demo-t-texto);
  line-height: 1.6;
  color: var(--demo-texto-suave);
}
.demo-cierre__botones { display: flex; flex-wrap: wrap; gap: var(--esp-12); margin-top: var(--esp-32); }

.demo-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--demo-tactil);
  padding: var(--esp-12) var(--esp-24);
  border: 1px solid var(--demo-texto-suave);
  border-radius: var(--demo-radio);
  color: var(--demo-texto);
  font-size: var(--demo-t-boton);
  font-weight: 600;
  text-decoration: none;
}
.demo-boton:hover { border-color: var(--demo-texto); }
.demo-boton--lleno { background: var(--demo-texto); border-color: var(--demo-texto); color: var(--demo-fondo); }
.demo-boton--lleno:hover { background: var(--demo-texto-suave); color: var(--demo-fondo); }

.demo-barra :focus-visible,
.demo-cierre :focus-visible { outline: 2px solid var(--demo-foco); outline-offset: 2px; }

@media (max-width: 599px) {
  .demo-boton { width: 100%; }
}

/* ---------- Único botón de WhatsApp (de Orinoco, no del negocio) ---------- */

.demo-flotante {
  position: fixed;
  right: var(--demo-margen);
  bottom: var(--esp-16);
  z-index: 30;  /* por encima de las cabeceras fijas de las demos (20) */
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: var(--demo-tactil);
  padding: 0 var(--esp-20);
  background: var(--demo-fondo);
  color: var(--demo-texto);
  border: 1px solid var(--demo-linea);
  border-radius: var(--demo-radio);
  box-shadow: var(--demo-sombra);
  font-family: var(--demo-fuente);
  font-size: var(--demo-t-boton);
  font-weight: 600;
  text-decoration: none;
}
.demo-flotante svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.demo-flotante:hover { color: var(--demo-texto-suave); }
.demo-flotante:focus-visible { outline: 2px solid var(--demo-foco); outline-offset: 2px; }

/* El cierre es lo último de la página: su fondo oscuro se estira para que el botón no tape el texto */
.demo-cierre { padding-bottom: calc(var(--demo-tactil) + var(--esp-32)); }

/* ---------- Salto al contenido (visible sólo con Tab) ---------- */

.demo-saltar {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--demo-tactil);
  padding: 0 var(--esp-16);
  background: var(--demo-fondo);
  color: var(--demo-texto);
  border-radius: var(--demo-radio);
  font-family: var(--demo-fuente);
  font-size: var(--demo-t-boton);
  font-weight: 600;
  transform: translateY(-200%);
}
.demo-saltar:focus-visible { transform: none; outline: 2px solid var(--demo-foco); }

.demo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal (sólo con JS; sin JS todo se ve) ---------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), translate 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
}