/* ============================================================
 otherhalf.media — base: tokens de diseño, reset, tipografía, keyframes
 ============================================================ */

:root {
  /* Paleta */
  --bg: #0E0E0E;          /* fondo general */
  --surface: #121212;     /* secciones oscuras / tarjetas del formulario */
  --card: #1B1B1B;        /* tarjetas */
  --cream: #F5F2ED;       /* texto principal */
  --orange: #FF5A00;      /* acento de marca */
  --text-2: #C9C4BC;      /* texto secundario */
  --text-3: #A8A29A;      /* texto terciario */
  --muted: #8F8A82;       /* etiquetas / gris */
  /* Tipografía */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Figtree', sans-serif;
  /* Ritmo vertical: mismo aire arriba/abajo en TODAS las secciones (celular 64px → desktop 140px) */
  --section-y: clamp(64px, 9vw, 140px);
  --section-x: clamp(20px, 4vw, 56px);
  /* Movimiento */
  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--orange); }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }
@keyframes oh-marq-l { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes oh-marq-r { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes oh-spin { to { transform: rotate(360deg); } }
@keyframes oh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes oh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].oh-in { opacity: 1; transform: none; }
details[open] .oh-plus { transform: rotate(45deg); }
html { -webkit-text-size-adjust: 100%; }
[data-drag] { -webkit-overflow-scrolling: touch; }

/* Imagen que llena su contenedor (reemplaza al antiguo <image-slot>) */
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }