/* ==========================================================================
   Happiness Play — Sistema publico Alpha 4
   --------------------------------------------------------------------------
   Solo paginas PUBLICAS de Beta Espanol. NO se carga en el portal privado:
   el privado sigue con styles.css + happiness-play-redesign.css y sus tokens
   --hp-* propios, sin tocar. La unificacion real entre ambos es una fase
   tecnica posterior; aqui solo se fija el vocabulario canonico del lado
   publico. Ver docs/alpha4/BETA_ES_CHANGE_MANIFEST.md.
   ========================================================================== */

:root {
  /* --- color --- */
  --hp-blue: #004FA0;
  --hp-blue-dark: #00355F;
  --hp-blue-bright: #0A6FD6;
  --hp-blue-soft: #F3F7FC;
  --hp-ink: #07131F;
  --hp-muted: #5B6B82;
  --hp-paper: #FFFFFF;
  --hp-surface: #F3F7FC;
  --hp-border: #D6E2EE;
  --hp-border-soft: #E4EBF3;

  /* --- forma --- */
  --hp-radius-sm: 10px;
  --hp-radius-md: 16px;
  --hp-radius-lg: 22px;
  --hp-radius-pill: 999px;
  --hp-shadow-sm: 0 1px 3px rgba(7, 19, 31, .06);
  --hp-shadow-md: 0 18px 46px rgba(7, 19, 31, .08);

  /* --- ritmo --- */
  --hp-wrap: 1140px;
  --hp-gutter: 20px;

  /* --- movimiento --- */
  --hp-motion-fast: 180ms;
  --hp-motion-standard: 320ms;
  --hp-motion-narrative: 480ms;
  --hp-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --hp-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --hp-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* --- aliases de compatibilidad -------------------------------------------
     El sistema publico venia con estos nombres declarados en linea dentro de
     head_publico.tpl, y pro.tpl / about.tpl anadieron los suyos. Se conservan
     apuntando al token canonico para poder migrar sin romper nada; se retiran
     cuando ya no queden usos. */
  --blue: var(--hp-blue);
  --blue-b: var(--hp-blue-bright);
  --paper: var(--hp-paper);
  --paper-2: var(--hp-surface);
  --ink: var(--hp-ink);
  --line-d: var(--hp-border-soft);
  --muted-l: var(--hp-muted);

  --pro-blue: var(--hp-blue);
  --pro-blue-b: var(--hp-blue-bright);
  --pro-ink: var(--hp-ink);
  --pro-paper: var(--hp-paper);
  --pro-paper-2: var(--hp-surface);
  --pro-line: var(--hp-border);
  --pro-muted: var(--hp-muted);

  --ab-blue: var(--hp-blue);
  --ab-blue-b: var(--hp-blue-bright);
  --ab-ink: var(--hp-ink);
  --ab-paper: var(--hp-paper);
  --ab-paper-2: var(--hp-surface);
  --ab-line: var(--hp-border);
  --ab-muted: var(--hp-muted);
}

/* --------------------------------------------------------------------------
   Primitivas compartidas por las publicas. Deliberadamente pocas: contenedor,
   botones, foco y utilidades de movimiento. Todo lo demas sigue viviendo en
   la pagina que lo usa.
   -------------------------------------------------------------------------- */

.hp-wrap {
  width: 100%;
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 0 var(--hp-gutter);
  box-sizing: border-box;
}

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--hp-radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hp-motion-fast) var(--hp-ease-standard),
              border-color var(--hp-motion-fast) var(--hp-ease-standard),
              color var(--hp-motion-fast) var(--hp-ease-standard);
}
.hp-btn-primary { background: var(--hp-blue); border-color: var(--hp-blue); color: #fff; }
.hp-btn-primary:hover,
.hp-btn-primary:focus { background: var(--hp-blue-bright); border-color: var(--hp-blue-bright); color: #fff; text-decoration: none; }
.hp-btn-ghost { background: var(--hp-paper); border-color: var(--hp-border); color: var(--hp-blue); }
.hp-btn-ghost:hover,
.hp-btn-ghost:focus { background: var(--hp-surface); border-color: var(--hp-blue); color: var(--hp-blue); text-decoration: none; }
.hp-btn-invert { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.hp-btn-invert:hover,
.hp-btn-invert:focus { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }

/* Un solo criterio de foco visible para todo lo publico. */
.hp-public a:focus-visible,
.hp-public button:focus-visible,
.hp-public input:focus-visible,
.hp-public select:focus-visible,
.hp-public textarea:focus-visible,
.hp-btn:focus-visible {
  outline: 3px solid var(--hp-blue-bright);
  outline-offset: 3px;
}

/* Campos de formulario publicos: alto tactil y estados legibles. */
.hp-field {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-paper);
  font-family: inherit;
  font-size: 16px;
  color: var(--hp-ink);
  box-sizing: border-box;
}
.hp-field:focus { border-color: var(--hp-blue); }
.hp-field[aria-invalid="true"] { border-color: #E2372F; }
.hp-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--hp-ink); }
.hp-help { display: block; margin: 6px 0 0; font-size: 13px; line-height: 19px; color: var(--hp-muted); }
.hp-error { display: block; margin: 6px 0 0; font-size: 13px; line-height: 19px; color: #C92B24; font-weight: 600; }

/* Revelado sobrio, reutilizable. El estado de reposo es VISIBLE: solo cuando
   hay JavaScript se parte de oculto, y con reduced motion ni eso. */
html.js .hp-reveal:not(.va) { opacity: 0; transform: translateY(12px); }
.hp-reveal { transition: opacity var(--hp-motion-standard) var(--hp-ease-enter),
                         transform var(--hp-motion-standard) var(--hp-ease-enter); }

@media (prefers-reduced-motion: reduce) {
  html.js .hp-reveal:not(.va) { opacity: 1; transform: none; }
  .hp-reveal { transition: none; }
  .hp-btn { transition: none; }
}

@media (max-width: 767px) {
  .hp-btn { width: 100%; }
}

/* DESPLAZAMIENTO A LAS ANCLAS: DEL JAVASCRIPT AL NAVEGADOR.  2026-08-26

   Lo hacia `assets/js/scripts.js` con `$('html, body').animate({...}, 1500)`,
   heredado de la plantilla comprada. Tres problemas medidos:

   - El selector era `a[href*=#]`, que engancha CUALQUIER enlace con
     almohadilla. En el arbol hay 46 anclas de verdad y **50 `href="#"` a
     secas**; para esos, `$('#')` no es selector valido en jQuery 3 y el
     manejador moria con un error antes de llegar al `preventDefault()`.
   - 1500 ms fijos, ignorando `prefers-reduced-motion`.
   - Dependia de jQuery, y del parche de Migrate para la almohadilla sin
     comillas.

   El navegador lo hace solo, y ademas respeta el movimiento reducido sin que
   nadie tenga que acordarse: por eso va dentro de `no-preference`, para no
   tener que apagarlo despues. Y no engancha nada, asi que los 50 enlaces
   vacios dejan de fallar por si solos.

   `scroll-margin-top` es el equivalente del `- 50` que hacia el JavaScript:
   deja ese hueco por encima del destino para que no se meta debajo de la
   cabecera fija. Se pone en (0,1,0) a proposito, para que las reglas que ya
   existen en happiness-play-redesign.css con su propio hueco --las FAQ con
   150px y las legales con 104px, ambas en (0,2,0)-- sigan ganando. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:target { scroll-margin-top: 50px; }