/* ==========================================================================
   base.css · Reset, layout de página y el fondo de marca.
   Compartido por la TV, la tablet y el lanzador.
   Consume solo variables de tokens.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* --app-height lo publica kiosk.js desde visualViewport. El 100dvh de CSS es
     el respaldo para el primer frame, antes de que el script corra. */
  min-height: var(--app-height, 100dvh);
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--alto-texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

img,
picture,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  /* En una pantalla táctil el resaltado gris del navegador aparece antes que
     el feedback propio y se lee como un error de la interfaz. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* `display: flex|grid` le gana al atributo `hidden` y el elemento queda
   visible para siempre. Cada componente con display explícito necesita esto. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

/* --------------------------------------------------------------------------
   Modo kiosco. Lo activa kiosk.js según si el dispositivo es táctil, no según
   el ancho: una notebook angosta no es un kiosco y un iPad ancho sí.
   -------------------------------------------------------------------------- */
body[data-modo='kiosk'] {
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body[data-modo='kiosk'] input {
  user-select: text;
  -webkit-user-select: text;
}

/* --------------------------------------------------------------------------
   Blobs de marca · las formas orgánicas del isotipo, difuminadas al fondo.
   Es el "degradados/difuminados" que el cliente pidió conservar del boceto.
   -------------------------------------------------------------------------- */
.blob {
  position: fixed;
  z-index: var(--z-fondo);
  pointer-events: none;
  opacity: 0.1;
  background: linear-gradient(135deg, var(--verde-500), var(--teal-500));
  border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%;
  filter: blur(2px);
}

.blob--uno {
  width: 58vmin;
  height: 58vmin;
  top: -18vmin;
  left: -14vmin;
}

.blob--dos {
  width: 66vmin;
  height: 66vmin;
  bottom: -22vmin;
  right: -18vmin;
  border-radius: 58% 42% 38% 62% / 40% 55% 45% 60%;
}

/* --------------------------------------------------------------------------
   Tipografía compartida
   -------------------------------------------------------------------------- */
.titulo {
  font-family: var(--font-display);
  font-weight: var(--peso-black);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}

.titulo--xl { font-size: var(--step-4); }
.titulo--l  { font-size: var(--step-3); }
.titulo--m  { font-size: var(--step-2); }
.titulo--s  { font-size: var(--step-1); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--peso-semi);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.subtitulo {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--peso-bold);
  letter-spacing: 0.02em;
}

.subtitulo--suave {
  font-weight: var(--peso-medio);
  color: var(--text-secondary);
  letter-spacing: 0;
  text-wrap: balance;
}

.apoyo {
  font-size: var(--step-0);
  color: var(--text-secondary);
  text-wrap: balance;
}

.apoyo--tenue {
  color: var(--text-tertiary);
  font-size: var(--step--1);
}

/* Ni el degradado de fondo ni los blobs se animan; los sacamos igual del
   compositing cuando alguien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .blob {
    display: none;
  }
}