/* Huddle AI · base (v4, 15/10/2026)
 * Tokens del mundo del vídeo: cielo pastel, tinta ciruela, un acento coral.
 * Formas: pastilla para todo lo interactivo, 28 px para paneles e islas, 14 px para lo que va dentro.
 * Movimiento: una curva para lo que entra (ease-out fuerte), otra para lo que se desplaza. */
:root {
  --ink: #2B2440; --ink-2: #4F4866; --ink-3: #6F6886;
  --paper: #FFF9F6; --soft: #F6EEF6; --line: #E9DFEA; --cristal: rgba(255,255,255,.62);
  --coral: #FF7A59; --coral-deep: #D4502B; --coral-tint: #FFE8E0;
  --lila: #8E6CFF; --lila-deep: #6B4FE0; --lila-tint: #EEE9FF;
  --menta: #2FC595; --menta-deep: #178C6A; --menta-tint: #E2F7EF;
  --sol: #FFC543; --sol-deep: #B8780A; --sol-tint: #FFF3D1;
  --cielo: #9FC8FF; --cielo-deep: #2E5BD6; --cielo-tint: #E7EFFF;
  --rosa: #F7A6B8; --rosa-deep: #C9476F; --rosa-tint: #FFE3EC;
  --verde: #B8E986; --verde-deep: #4E8A1E; --naranja: #FFB36B; --naranja-deep: #B8641B;
  --cielo-1: #B9C9FF; --cielo-2: #E6E4FF; --cielo-3: #FFE3F1; --bruma: #DCE4FF;
  --soul-lila: #C7B6FF; --soul-cian: #9FD9FF; --soul-rosa: #FFD6E7; --soul-menta: #C6F7EC; --soul-crema: #FFF0C2;
  --display: "M PLUS Rounded 1c", "Varela Round", "Avenir Next", system-ui, sans-serif;
  --ronda: var(--display);
  --body: "Onest", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --r-pill: 999px; --r-panel: 28px; --r-in: 14px;
  --sombra-suave: 0 1px 2px rgba(78,52,96,.05), 0 10px 24px -12px rgba(78,52,96,.18);
  --sombra: 0 2px 6px rgba(78,52,96,.05), 0 30px 70px -30px rgba(78,52,96,.38);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
  --cab-alto: 72px;
  color-scheme: light;
  /* alias que usan los módulos de la intro de reserva */
  --huddle-deep: var(--coral-deep);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-alto) + 12px); }
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55;
  background: #D7C8FF linear-gradient(180deg, #C9B5FF 0%, #FFBED6 24%, #FFD2AE 48%, #B9E4FF 72%, #D0B9FF 100%) fixed;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; caret-color: var(--coral);
}
body.intro-abierta { overflow: hidden; }
body.menu-abierto { overflow: hidden; }

/* ---- superficies del navegador: también son diseño ---- */
::selection { background: var(--coral); color: #fff; }
::-moz-selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
@supports (scrollbar-color: red blue) { html { scrollbar-color: #C9B8E8 transparent; scrollbar-width: thin; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9B8E8; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--lila-deep); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 900; letter-spacing: -0.035em; }
h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-2); max-width: 54ch; }
code { font-family: var(--mono); font-size: .86em; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); padding: .1em .42em; border-radius: 7px; color: var(--ink); white-space: nowrap; }
b, strong { font-weight: 650; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform 200ms var(--ease-out); }
.saltar:focus-visible { transform: none; }

/* ---- botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: var(--r-pill);
  font: 600 1rem/1 var(--body); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 220ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(43,36,64,.55); }
.btn-secondary { background: rgba(255,255,255,.72); color: var(--ink); border: 1.5px solid rgba(255,255,255,.95); box-shadow: var(--sombra-suave); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 12px 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--coral-deep); box-shadow: 0 16px 32px -14px rgba(212,80,43,.6); transform: translateY(-1px); }
  .btn-secondary:hover { background: #fff; transform: translateY(-1px); }
  .btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.6); }
  .btn:hover:active { transform: scale(.97); }
}

/* ---- reducir movimiento: fundidos en lugar de desplazamientos ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}