/* Sen (Google Fonts), alojada aquí para que funcione sin conexión. Variable: pesos 400 a 800. */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sen-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sen-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paleta viva y de alto contraste pensada para niños de 5 a 12 años (misma que la app nativa). */
:root {
  --background: #fff8ec;
  --surface: #ffffff;
  --text: #2b2140;
  --text-muted: #6e6488;

  --pig: #ff9ec4;
  --pig-dark: #e46e9c;
  --pig-cheek: #ff6f9f;
  --gold: #ffc93c;
  --gold-dark: #e0a100;

  --primary: #7c5cff;
  --primary-dark: #5b3fe0;
  --success: #2bc48a;
  --success-dark: #1e9b6c;
  --danger: #ff6b6b;
  --danger-dark: #d94c4c;
  --sky: #4cc9f0;
  --sky-dark: #2a9fc4;

  --border: #efe6d6;
  --chip-active: #eee8ff;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --radius-md: 16px;
  --radius-lg: 24px;
  /* Objetivo táctil mínimo para dedos pequeños (por encima de los 44px habituales). */
  --min-touch: 64px;
  --tabbar-height: 76px;

  color-scheme: light;
  font-family: 'Sen', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  background: var(--background);
  -webkit-tap-highlight-color: transparent;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */

#app {
  max-width: 560px;
  margin: 0 auto;
}

.layout {
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: calc(var(--space-lg) + env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right))
    var(--space-lg) max(var(--space-md), env(safe-area-inset-left));
}

.screen--center {
  align-items: center;
}

.screen--parent {
  gap: var(--space-md);
  padding-top: var(--space-md);
}

.screen--modal {
  min-height: 100dvh;
  justify-content: space-between;
}

.center-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  text-align: center;
}

.actions,
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.row--between {
  justify-content: space-between;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.grow {
  flex: 1;
  min-width: 0;
}

.stretch {
  align-self: stretch;
}

/* ---------- Tipografía ---------- */

.brand {
  font-size: 48px;
  font-weight: 800;
  color: var(--pig-dark);
  letter-spacing: 1px;
}

.title {
  font-size: 28px;
  font-weight: 800;
}

.subtitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-muted);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 20px;
  font-weight: 700;
}

.section-title__icon {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--primary);
}

.muted,
.detail {
  color: var(--text-muted);
}

.caption {
  font-size: 14px;
  color: var(--text-muted);
}

.label {
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

.price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 28px;
  font-weight: 800;
  color: var(--gold-dark);
}

.outcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
}

.outcome-icon--success {
  background: #d6f5e9;
  color: var(--success-dark);
}

.outcome-icon--error {
  background: #ffe1e1;
  color: var(--danger-dark);
}

.text-success {
  color: var(--success-dark);
}

.text-danger {
  color: var(--danger-dark);
}

.done {
  font-size: 20px;
  font-weight: 700;
  color: var(--success-dark);
  text-align: center;
}

.waiting {
  font-size: 14px;
  color: var(--text-muted);
}

.uid,
code {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-muted);
  word-break: break-all;
}

/* ---------- Botón "de juguete" ---------- */

.big-button {
  --bg: var(--primary);
  --shadow: var(--primary-dark);
  --fg: #fff;
  position: relative;
  display: block;
  min-height: calc(var(--min-touch) + 5px);
  padding: 0 0 5px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--shadow);
  touch-action: manipulation;
  user-select: none;
}

.big-button__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--min-touch);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--fg);
  font-size: 20px;
  font-weight: 700;
  transform: translateY(0);
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.big-button:active:not(:disabled) .big-button__face {
  transform: translateY(5px);
  transition-duration: 60ms;
}

.big-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.big-button__icon {
  width: 28px;
  height: 28px;
  flex: none;
}

.big-button__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.big-button--compact {
  min-height: 52px;
}

.big-button--compact .big-button__face {
  min-height: 47px;
  padding: 0 var(--space-md);
  font-size: 17px;
}

.big-button--compact .big-button__icon {
  width: 22px;
  height: 22px;
}

.big-button--icon .big-button__face {
  padding: 0 var(--space-sm);
  min-width: 47px;
}

.big-button--ghost {
  --bg: var(--surface);
  --shadow: var(--border);
  --fg: var(--text-muted);
}

.big-button--ghost .big-button__face {
  box-shadow: inset 0 0 0 2px var(--border);
}

.big-button--success {
  --bg: var(--success);
  --shadow: var(--success-dark);
}

.big-button--danger {
  --bg: var(--danger);
  --shadow: var(--danger-dark);
}

.big-button--sky {
  --bg: var(--sky);
  --shadow: var(--sky-dark);
}

.big-button--gold {
  --bg: var(--gold);
  --shadow: var(--gold-dark);
  --fg: var(--text);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--pig-dark);
}

.link-button {
  border: 0;
  background: none;
  padding: var(--space-xs) 0;
  color: var(--primary-dark);
  text-decoration: underline;
  font-size: 14px;
}

/* ---------- Tarjetas, chips, inputs ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.card--highlight {
  border-color: var(--gold);
}

.card--ok {
  border-color: var(--success);
}

.card--warn {
  border-color: var(--gold);
  background: #fffaf0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip {
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.chip--active {
  border-color: var(--primary);
  background: var(--chip-active);
}

.input {
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.input:focus {
  border-color: var(--primary);
  outline: none;
}

textarea.input {
  resize: vertical;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field__label {
  font-size: 14px;
  color: var(--text-muted);
}

.switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 32px;
  flex: none;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.switch__track {
  width: 100%;
  border-radius: 999px;
  background: var(--border);
  transition: background 150ms;
  pointer-events: none;
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform 150ms;
}

.switch input:checked + .switch__track {
  background: var(--success);
}

.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch__track {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.progress {
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.progress__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 700ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.coins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coins__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  color: var(--text);
}

/* ---------- Bienvenida ---------- */

.screen--welcome {
  min-height: 100dvh;
  justify-content: center;
}

.welcome-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: stretch;
  margin-top: var(--space-lg);
}

/* ---------- Zona del niño ---------- */

.kid-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.piggy-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  background: var(--surface);
  color: var(--pig-dark);
}

.row__title {
  font-weight: 700;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform 100ms;
}

.product:active {
  transform: scale(0.96);
}

.product--locked {
  opacity: 0.75;
}

.product__limit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.product__limit--wait {
  color: var(--primary-dark);
}

.product__name {
  min-height: 44px;
  text-align: center;
}

.product__missing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

.product__missing-text {
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- Marranito ---------- */
/* Diseño: .recursos/design_handoff_marranito. Animaciones idle por estado (vacio-/hambre-/medio-/lleno-),
   todas con ciclos de 1/2/4/8 s que cierran sin corte. */

.piggy {
  position: relative;
  flex: none;
}

.piggy__react,
.piggy__react > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.piggy__coin {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.piggy__delta {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  font-weight: 800;
  text-shadow: 0 0 6px #fff, 0 0 6px #fff;
  pointer-events: none;
}

.piggy [class*="vacio-"],.piggy [class*="hambre-"],.piggy [class*="medio-"],.piggy [class*="lleno-"]{transform-box:view-box}

/* vacio */
.piggy .vacio-b{transform-origin:100px 184px}.piggy .vacio-sd{transform-origin:100px 188px}
.piggy .vacio-eL{transform-origin:71px 103px}.piggy .vacio-eR{transform-origin:129px 103px}
.piggy .vacio-blink{animation:vacio-blink 4s infinite}
@keyframes vacio-blink{0%,88%,100%{transform:scaleY(1)}91%{transform:scaleY(.1)}94%{transform:scaleY(1)}}
.piggy .vacio-sh{animation:vacio-shine 4s ease-in-out infinite}
@keyframes vacio-shine{0%,100%{opacity:.35}50%{opacity:1}}
.piggy .vacio-mo{transform-origin:100px 156px}.piggy .vacio-tear{transform-origin:64px 116px}.piggy .vacio-sc{transform-origin:100px 76px}.piggy .vacio-ears{transform-origin:100px 66px}
.piggy .vacio-b{animation:vacio-sag 4s ease-in-out infinite}.piggy .vacio-sd{animation:vacio-sdS 4s ease-in-out infinite}
@keyframes vacio-sag{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}
@keyframes vacio-sdS{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.05)}}
.piggy .vacio-pu{animation:vacio-lookSide 8s ease-in-out infinite}
@keyframes vacio-lookSide{0%,10%,100%{transform:translate(0,0)}20%,40%{transform:translate(-3px,1px)}55%,75%{transform:translate(3px,1px)}88%{transform:translate(0,0)}}
.piggy .vacio-tear{animation:vacio-tear 4s ease-in infinite}
@keyframes vacio-tear{0%,30%{transform:translate(0,0) scale(0);opacity:0}45%{transform:translate(0,0) scale(1);opacity:1}70%{transform:translate(0,4px) scale(1);opacity:1}100%{transform:translate(0,26px) scale(.8);opacity:0}}

/* hambre */
.piggy .hambre-b{transform-origin:100px 184px}.piggy .hambre-sd{transform-origin:100px 188px}
.piggy .hambre-eL{transform-origin:71px 103px}.piggy .hambre-eR{transform-origin:129px 103px}
.piggy .hambre-blink{animation:hambre-blink 4s infinite}
@keyframes hambre-blink{0%,88%,100%{transform:scaleY(1)}91%{transform:scaleY(.1)}94%{transform:scaleY(1)}}
.piggy .hambre-sh{animation:hambre-shine 4s ease-in-out infinite}
@keyframes hambre-shine{0%,100%{opacity:.35}50%{opacity:1}}
.piggy .hambre-mo{transform-origin:100px 156px}.piggy .hambre-tear{transform-origin:64px 116px}.piggy .hambre-sc{transform-origin:100px 76px}.piggy .hambre-ears{transform-origin:100px 66px}
.piggy .hambre-b{animation:hambre-br 4s ease-in-out infinite}.piggy .hambre-sd{animation:hambre-sdS 4s ease-in-out infinite}
@keyframes hambre-br{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.965)}}
@keyframes hambre-sdS{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.04)}}
.piggy .hambre-pu{animation:hambre-lookUp 4s ease-in-out infinite}
@keyframes hambre-lookUp{0%,45%,100%{transform:translate(0,0)}55%,80%{transform:translate(0,-4px)}}
.piggy .hambre-mo{animation:hambre-chew 4s ease-in-out infinite}
@keyframes hambre-chew{0%,10%,30%,100%{transform:scaleX(1)}15%,25%{transform:scaleX(.7)}20%{transform:scaleX(1.15)}}

/* medio */
.piggy .medio-b{transform-origin:100px 184px}.piggy .medio-sd{transform-origin:100px 188px}
.piggy .medio-eL{transform-origin:71px 103px}.piggy .medio-eR{transform-origin:129px 103px}
.piggy .medio-blink{animation:medio-blink 4s infinite}
@keyframes medio-blink{0%,88%,100%{transform:scaleY(1)}91%{transform:scaleY(.1)}94%{transform:scaleY(1)}}
.piggy .medio-sh{animation:medio-shine 4s ease-in-out infinite}
@keyframes medio-shine{0%,100%{opacity:.35}50%{opacity:1}}
.piggy .medio-mo{transform-origin:100px 156px}.piggy .medio-tear{transform-origin:64px 116px}.piggy .medio-sc{transform-origin:100px 76px}.piggy .medio-ears{transform-origin:100px 66px}
.piggy .medio-b{animation:medio-hop 2s ease-in-out infinite}.piggy .medio-sd{animation:medio-sdH 2s ease-in-out infinite}
@keyframes medio-hop{0%,100%{transform:translateY(0) scale(1.02,.98)}50%{transform:translateY(-5px) scale(.99,1.01)}}
@keyframes medio-sdH{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88)}}
.piggy .medio-ears{animation:medio-wig 2s ease-in-out infinite}
@keyframes medio-wig{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* lleno */
.piggy .lleno-b{transform-origin:100px 184px}.piggy .lleno-sd{transform-origin:100px 188px}
.piggy .lleno-eL{transform-origin:71px 103px}.piggy .lleno-eR{transform-origin:129px 103px}
.piggy .lleno-blink{animation:lleno-blink 4s infinite}
@keyframes lleno-blink{0%,88%,100%{transform:scaleY(1)}91%{transform:scaleY(.1)}94%{transform:scaleY(1)}}
.piggy .lleno-sh{animation:lleno-shine 4s ease-in-out infinite}
@keyframes lleno-shine{0%,100%{opacity:.35}50%{opacity:1}}
.piggy .lleno-mo{transform-origin:100px 156px}.piggy .lleno-tear{transform-origin:64px 116px}.piggy .lleno-sc{transform-origin:100px 76px}.piggy .lleno-ears{transform-origin:100px 66px}
.piggy .lleno-b{animation:lleno-bounce 1s cubic-bezier(.45,0,.55,1) infinite}.piggy .lleno-sd{animation:lleno-sdF 1s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lleno-bounce{0%,100%{transform:translateY(0) scale(1.04,.96)}15%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-9px) scale(.98,1.02)}85%{transform:translateY(0) scale(1,1)}}
/* Ajuste respecto al handoff: la opacidad animada sustituye al opacity=".08" de la sombra, así que va escalada (1→.08, .6→.05). */
@keyframes lleno-sdF{0%,100%{transform:scaleX(1.05);opacity:.08}50%{transform:scaleX(.8);opacity:.05}}
.piggy .lleno-st{animation:lleno-tw 2s ease-in-out infinite}
@keyframes lleno-tw{0%,100%{transform:scale(.5) rotate(0deg);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.piggy .lleno-sc{animation:lleno-jig 1s ease-in-out infinite}
@keyframes lleno-jig{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

@media (prefers-reduced-motion:reduce){.piggy [class*="vacio-"],.piggy [class*="hambre-"],.piggy [class*="medio-"],.piggy [class*="lleno-"]{animation:none!important}}

/* Fase común ligada al reloj (--piggy-phase, ver piggy.js): al repintar la pantalla las
   animaciones continúan donde iban. Va después de las animaciones para ganar a su demora 0. */
.piggy [class*="vacio-"],.piggy [class*="hambre-"],.piggy [class*="medio-"],.piggy [class*="lleno-"]{animation-delay:var(--piggy-phase,0s)}

/* Nivel dinámico de monedas */
.piggy .piggy__level{transform-box:view-box;transition:transform 900ms cubic-bezier(.34,1.3,.5,1)}
@media (prefers-reduced-motion:reduce){.piggy .piggy__level{transition:none}}

/* ---------- Escaneo ---------- */

.nfc-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 150px;
}

.nfc-card__ring {
  position: absolute;
  inset: 0;
  border: 6px solid var(--gold);
  border-radius: var(--radius-lg);
  opacity: 0;
}

.nfc-card--scanning .nfc-card__ring {
  animation: ring-pulse 0.9s ease-out infinite;
}

.nfc-card__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 130px;
  border: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.nfc-card__face {
  position: relative;
  color: var(--primary);
}

.nfc-card__waves {
  position: absolute;
  top: 10px;
  right: 12px;
  opacity: 0.85;
}

.nfc-card__label {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-dark);
}

@keyframes ring-pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

.simulator {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 2px dashed var(--sky);
  border-radius: var(--radius-lg);
}

.simulator__title {
  font-size: 14px;
  color: var(--sky-dark);
}

.scanning-hint {
  color: var(--primary-dark);
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0.45;
  }
}

/* ---------- Herramientas NFC ---------- */

.reading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-top: 2px dashed var(--border);
}

.reading__serial {
  word-break: break-all;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-list--nested {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 3px solid var(--border);
}

.record {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--background);
}

.record__title {
  font-weight: 800;
}

.record__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-sm);
  margin: var(--space-xs) 0;
  font-size: 14px;
}

.record__meta dt {
  color: var(--text-muted);
}

.record__meta dd {
  margin: 0;
  word-break: break-all;
}

.record__data {
  margin: 0;
  padding: var(--space-sm);
  border-radius: 10px;
  background: var(--surface);
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Padres: barra superior e historial ---------- */

.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: calc(var(--space-md) + env(safe-area-inset-top)) var(--space-md) var(--space-md);
  background: var(--background);
  border-bottom: 2px solid var(--border);
}

.appbar__title {
  font-size: 20px;
  font-weight: 800;
}

.tx-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* ---------- Pestañas ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 3px solid var(--border);
  background: var(--surface);
}

.tabbar__tab {
  position: relative;
  display: flex;
  flex: 1;
  max-width: 140px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.tabbar__icon {
  width: 28px;
  height: 28px;
  transition: transform 150ms;
}

.tabbar__tab--active .tabbar__icon {
  transform: scale(1.15);
}

.tabbar--kid .tabbar__tab--active {
  color: var(--pig-dark);
}

.tabbar--parent .tabbar__tab--active {
  color: var(--primary);
}

.tabbar__badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* ---------- Aviso de actualización ---------- */

.update-banner {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: calc(var(--tabbar-height) + var(--space-md) + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 528px;
  margin: 0 auto;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--text);
  color: #fff;
}

.update-banner__icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--gold);
}

.update-banner__button {
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--text);
  font-weight: 800;
}

/* ---------- Iconos y componentes nuevos ---------- */

.icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 30%;
  color: var(--text);
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--space-xs);
}

.icon-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-muted);
}

.icon-picker__option--active {
  border-color: var(--primary);
  background: var(--chip-active);
  color: var(--primary-dark);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip__content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.period-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.period-input__prefix {
  color: var(--text-muted);
  font-size: 15px;
}

.input--number {
  width: 88px;
  text-align: center;
}

.input--unit {
  width: auto;
  flex: 1;
  min-width: 110px;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 15px;
}

.notice__icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.notice--info {
  background: #e3f6fd;
  color: var(--sky-dark);
}

.notice--success {
  background: #d6f5e9;
  color: var(--success-dark);
}

.notice--warning {
  background: #fff1c7;
  color: #8a6400;
}

.notice--danger {
  background: #ffe1e1;
  color: var(--danger-dark);
}

.perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.perk {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  background: var(--surface);
  color: var(--success-dark);
  font-size: 15px;
}

.perk__icon {
  width: 22px;
  height: 22px;
}

.row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.row--dim,
.card--dim {
  opacity: 0.6;
}

.card-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-row__actions {
  display: flex;
  gap: var(--space-xs);
  flex: none;
}

.tag {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  vertical-align: middle;
}

.tag--muted {
  background: var(--border);
  color: var(--text-muted);
}

.subform {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 2px dashed var(--border);
}

.subform__title {
  font-weight: 800;
}

.done,
.waiting {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Inicio: misiones y tienda ---------- */

.screen--home {
  gap: var(--space-lg);
}

.home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mission-tile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  transition: transform 100ms;
}

.mission-tile:active {
  transform: scale(0.98);
}

.mission-tile__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.mission-tile__who {
  display: flex;
  gap: 4px;
}

.mission-tile__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--success);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.scan-subject {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ---------- Volumen ---------- */

.volume {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.volume__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

.volume__slider {
  flex: 1;
  min-width: 0;
  height: 32px;
  accent-color: var(--primary);
}

.volume__value {
  text-align: center;
}

/* ---------- Movimientos del niño ---------- */

.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-sm);
  border: 3px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.summary__icon {
  width: 26px;
  height: 26px;
  color: var(--primary);
}

/* ---------- Misiones de padres y miembros ---------- */

.assignee-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 2px dashed var(--border);
}

.member-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.color-picker__option {
  width: 44px;
  height: 44px;
  border: 3px solid transparent;
  border-radius: 50%;
}

.color-picker__option--active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--surface) inset;
}

.card--danger {
  border-color: #ffc9c9;
}

/* ---------- Marca ---------- */

.home-hero {
  padding-top: var(--space-sm);
}

.home-hero__title {
  margin: 0;
  line-height: 0;
}

.home-hero__logo {
  display: block;
  width: min(300px, 80vw);
  height: auto;
}

.appbar__logo {
  width: 32px;
  height: 32px;
  flex: none;
}

.nfc-card__logo {
  width: 64px;
  height: 64px;
}

.goal-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-bottom: var(--space-sm);
  border-bottom: 2px dashed var(--border);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Enlaces con forma de botón ---------- */

.big-button--link {
  text-decoration: none;
}

.big-button--link .big-button__face {
  color: var(--fg);
}

/* ---------- Modales propios (ui/dialog.js) ---------- */

.dialog {
  width: min(420px, calc(100vw - 2 * var(--space-md)));
  max-height: calc(100dvh - 2 * var(--space-md));
  padding: var(--space-lg);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 0 rgb(43 33 64 / 0.12);
}

.dialog[open] {
  animation: dialog-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog::backdrop {
  background: rgb(43 33 64 / 0.45);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
  }
}

.dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-xs);
  border-radius: 50%;
  background: var(--chip-active);
  color: var(--primary);
}

.dialog--danger .dialog__icon {
  background: #ffe1e1;
  color: var(--danger-dark);
}

.dialog--gold .dialog__icon {
  background: #fff1c7;
  color: var(--gold-dark);
}

.dialog__title {
  font-size: 22px;
  font-weight: 800;
}

.dialog__message {
  color: var(--text-muted);
}

.dialog__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.dialog__actions > * {
  flex: 1;
  min-width: 0;
}

/* ---------- Retiro en efectivo ---------- */

.cash-amount {
  display: flex;
  justify-content: center;
  min-height: 60px;
}

.cash-presets {
  align-self: stretch;
}

.input--big {
  font-size: 22px;
  text-align: center;
}

/* ---------- Acerca de ---------- */

.about__lead {
  font-size: 19px;
  text-align: center;
}

.about__version {
  text-align: center;
  color: var(--text-muted);
}

.release {
  border-top: 2px solid var(--border);
  padding-top: var(--space-sm);
}

.release:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.release__title {
  cursor: pointer;
  font-weight: 800;
}

.release__changes {
  margin: var(--space-sm) 0 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 15px;
  font-weight: 500;
}

.credits {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.credits__by a {
  color: var(--primary-dark);
}

/* Uno junto al otro si caben; si no, uno debajo del otro (sin cortar el texto). */
.credits .big-button {
  flex: 1 1 180px;
}

/* ---------- Guía de inicio ---------- */

.guide {
  gap: var(--space-md);
  touch-action: pan-y;
}

.guide__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
}

.guide__step {
  animation: guide-in 260ms ease-out;
}

@keyframes guide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

.guide__text {
  font-size: 19px;
  font-weight: 600;
  max-width: 30em;
}

.guide__tip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: #fff1c7;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}

.guide__tip .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gold-dark);
}

.guide__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.guide__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  transition: width 200ms ease, background 200ms ease;
}

.guide__dot--active {
  width: 32px;
  background: var(--primary);
}

/* ---------- Requisitos y aviso de incompatibilidad ---------- */

.requirements {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirement {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.requirement .icon-badge {
  flex: none;
  color: var(--primary);
}

.unsupported__logo {
  align-self: center;
  width: 212px;
  height: auto;
}

.unsupported .center-stack {
  flex: none;
}

.landing__continue {
  align-self: center;
}

/* ---------- Presentación (landing, en la raíz) ---------- */
/* Mismo lenguaje que la app (sombras sólidas «de juguete», bordes muy redondeados, paleta del
   marranito), pero a lo grande: un panel morado en el hero, pasos numerados, fichas de color y
   una franja oscura para los requisitos. */

.is-landing #app {
  max-width: 1160px;
}

.landing {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.landing__nav img {
  display: block;
  height: 40px;
  width: auto;
}

/* Hero: panel morado con trama de puntos, monedas flotando y la tarjeta del QR. */
.landing__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: center;
  margin-top: calc(-1 * var(--space-xl));
  padding: 64px 56px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.13) 1.5px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(120% 90% at 0% 0%, #9479ff 0%, var(--primary) 55%, #6a48f5 100%);
  box-shadow: 0 14px 0 var(--primary-dark);
  color: #fff;
}

.landing__coin {
  position: absolute;
  display: flex;
  filter: drop-shadow(0 4px 0 rgb(43 33 64 / 0.18));
  animation: landing-float 4s ease-in-out infinite;
  animation-delay: calc(-1 * var(--coin-delay, 0s));
  pointer-events: none;
}

@keyframes landing-float {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-12px) rotate(8deg);
  }
}

.landing__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  transform: rotate(-2deg);
}

.landing__eyebrow .icon {
  width: 22px;
  height: 22px;
}

.landing__title {
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  text-wrap: balance;
}

/* Palabras destacadas con un subrayado grueso «a rotulador». */
.landing__hl {
  white-space: nowrap;
  background: linear-gradient(transparent 74%, var(--hl) 74%, var(--hl) 94%, transparent 94%);
}

.landing__hl--gold {
  --hl: rgb(255 201 60 / 0.55);
  color: var(--gold);
}

.landing__hl--pig {
  --hl: rgb(255 158 196 / 0.45);
  color: var(--pig);
}

.landing__lead {
  max-width: 32em;
  font-size: 19px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.88);
}

.landing__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.18);
  font-size: 15px;
}

.landing__pill .icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

/* La tarjeta del QR, inclinada como una tarjeta Banquito, con el marranito asomándose. */
.landing__qr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: 84px;
  padding: 52px var(--space-lg) var(--space-lg);
  border: 4px solid var(--text);
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 10px 12px 0 var(--text);
  color: var(--text);
  transform: rotate(2.5deg);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing__qr:hover {
  transform: rotate(0deg) scale(1.02);
}

.landing__piggy {
  position: absolute;
  top: -122px;
  left: 50%;
  width: 156px;
  height: 156px;
  margin-left: -78px;
  pointer-events: none;
}

.landing__qr-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 20px;
  font-weight: 800;
}

.landing__qr-title .icon {
  width: 26px;
  height: 26px;
  color: var(--primary);
}

.landing__qr-code {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
}

.landing__url {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 8px;
  background: var(--chip-active);
  color: var(--primary-dark);
  font-size: 15px;
}

/* En el móvil, en lugar del QR: instalar o abrir la app (o qué hace falta si no es compatible). */
.landing__cta {
  width: min(100%, 340px);
}

.landing__cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.landing__cta-body .landing__qr-title {
  text-align: center;
}

/* Secciones */
.landing__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.landing__heading {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Así funciona: tres pasos unidos por una línea de puntos. */
.landing__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12%;
  right: 12%;
  border-top: 4px dashed var(--border);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 5px 0 var(--gold-dark);
  font-size: 26px;
  font-weight: 800;
}

.step__icon {
  display: flex;
  margin-top: var(--space-sm);
  color: var(--primary);
}

.step__title {
  font-size: 20px;
  font-weight: 800;
}

.step .caption {
  max-width: 22em;
  font-size: 15px;
}

/* Características: fichas de color con sombra sólida, un poco ladeadas. */
.landing__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.feature {
  --bg: var(--chip-active);
  --edge: var(--primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 8px 0 var(--edge);
  transform: rotate(-1.2deg);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature:nth-child(even) {
  transform: rotate(1.2deg);
}

.feature:hover {
  transform: translateY(-6px) rotate(0deg);
}

.feature--pig {
  --bg: #ffe0ec;
  --edge: var(--pig-dark);
}

.feature--gold {
  --bg: #fff1c7;
  --edge: var(--gold-dark);
}

.feature--sky {
  --bg: #d7f3fc;
  --edge: var(--sky-dark);
}

.feature--mint {
  --bg: #d6f5e9;
  --edge: var(--success-dark);
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--edge);
}

.feature__title {
  font-size: 19px;
  font-weight: 800;
}

.feature__text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.8;
}

/* El kit (próximamente): texto a la izquierda y, sobre un círculo lila que se sale del panel,
   los billetes en abanico con las dos tarjetas delante. Los elementos se colocan en % de la
   ilustración para que escale entera. */
.landing__kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
  padding: 64px 0 64px 64px;
  border-radius: 40px;
  background: var(--surface);
  box-shadow: 0 14px 0 var(--border);
  overflow: hidden;
}

.kit__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.kit__badge {
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  font-size: 20px;
  font-weight: 800;
}

.kit__title {
  font-size: clamp(52px, 7.5vw, 92px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -2px;
}

.kit__lead {
  max-width: 22em;
  font-size: 22px;
  font-weight: 500;
}

.kit__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit__pill {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.kit__pill--primary {
  background: var(--primary);
}

.kit__art {
  position: relative;
  aspect-ratio: 1 / 0.92;
  margin-right: -6%;
}

.kit__art::before {
  content: '';
  position: absolute;
  left: 6%;
  top: -12%;
  width: 104%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6deff;
}

.kit__bill,
.kit__card {
  position: absolute;
  height: auto;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Abanico: cada billete (--i = 0 al fondo) baja, se corre a la izquierda y gira un poco menos. */
.kit__bill {
  width: 84%;
  left: calc(20% - var(--i) * 5%);
  top: calc(4% + var(--i) * 11%);
  transform: rotate(calc(-9deg + var(--i) * 2.5deg));
  filter: drop-shadow(0 6px 12px rgb(43 33 64 / 0.14));
}

.kit__card {
  width: 50%;
  top: calc(56% + var(--i) * 4%);
  left: calc(var(--i) * 52%);
  border-radius: 3.7% / 5.9%;
  transform: rotate(calc(-8deg + var(--i) * 14deg));
  box-shadow: 0 16px 28px rgb(43 33 64 / 0.24);
}

.kit__art:hover .kit__bill {
  transform: translateY(calc((var(--i) - 3) * 6px)) rotate(calc(-12deg + var(--i) * 3.5deg));
}

.kit__art:hover .kit__card {
  transform: translateY(-10px) rotate(calc(-10deg + var(--i) * 18deg));
}

@media (prefers-reduced-motion: reduce) {
  .kit__bill,
  .kit__card {
    transition: none;
  }
}

/* Qué necesitas: franja oscura para cerrar con contraste. */
.landing__needs {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 48px 56px;
  border-radius: 40px;
  background: var(--text);
  color: #fff;
}

.landing__needs-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.need {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.need__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.1);
  color: var(--gold);
}

.need__title {
  font-size: 18px;
  font-weight: 800;
}

.need__text {
  font-size: 15px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.72);
}

/* Enlace a «Qué necesitas» en la guía, en dorado sobre la franja oscura. */
.landing__needs-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease;
}

.landing__needs-more:hover {
  transform: translateY(-2px);
}

.landing__needs-more .icon {
  width: 20px;
  height: 20px;
}

/* Pie discreto: créditos a un lado y el café al otro. */
.landing__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) calc(-1 * var(--space-xl));
  padding: var(--space-md) var(--space-md);
  border-top: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.landing__footer p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.3em;
}

.landing__heart {
  width: 18px;
  height: 18px;
  color: var(--danger);
}

.landing__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.landing__link:hover,
.landing__link:focus-visible {
  color: var(--primary-dark);
  text-decoration: underline;
}

.landing__link-icon {
  width: 18px;
  height: 18px;
  color: var(--gold-dark);
}

.landing__link-out {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

button.landing__link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Aviso de cookies (landing y guía; ver js/ui/cookieNotice.js) ---------- */

/* Discreto: no bloquea la página ni atrapa el foco. */
.cookie-notice {
  position: fixed;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: 90;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgb(43 33 64 / 0.16);
  animation: cookie-notice-in 0.4s ease both;
}

.cookie-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cookie-notice__text a {
  color: var(--text);
  font-weight: 700;
}

.cookie-notice__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cookie-notice__actions .link-button {
  font-weight: 700;
  cursor: pointer;
}

@keyframes cookie-notice-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    animation: none;
  }
}

@media (max-width: 900px) {
  .landing__hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px 28px 56px;
    margin-top: 0;
  }

  .landing__qr {
    justify-self: center;
  }

  .landing__steps,
  .landing__needs-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing__steps::before {
    display: none;
  }

  .landing__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing__needs {
    padding: 36px 28px;
  }

  .landing__kit {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px 28px 32px;
  }

  .kit__art {
    width: min(100%, 560px);
    margin: 12% auto 0;
  }
}

@media (max-width: 600px) {
  .landing {
    gap: 56px;
  }

  .landing__hero {
    gap: var(--space-xl);
    padding: 40px 20px 48px;
    border-radius: 28px;
    /* Las monedas de los bordes no deben ensanchar la página. */
    overflow: hidden;
  }

  .landing__qr {
    padding: 48px var(--space-md) var(--space-lg);
    transform: rotate(1.5deg);
  }

  .landing__lead {
    font-size: 17px;
  }

  .landing__needs {
    padding: 32px 20px;
    border-radius: 28px;
  }

  .landing__kit {
    padding: 40px 20px 24px;
    border-radius: 28px;
  }

  .kit__badge {
    font-size: 17px;
  }

  .kit__lead {
    font-size: 18px;
  }

  .kit__pill {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .landing__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Desplegable (Transacciones en el inicio) ---------- */

.dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dropdown__caret {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.dropdown__caret--open {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 10px 24px rgb(43 33 64 / 0.16);
  animation: dropdown-in 160ms ease-out;
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--min-touch);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  text-align: left;
}

.dropdown__item:active,
.dropdown__item:focus-visible {
  background: var(--chip-active);
  outline: none;
}

.dropdown__item .icon-badge {
  flex: none;
  color: var(--text);
}

.dropdown__text {
  display: flex;
  flex-direction: column;
}

/* ---------- Guía para padres (ayuda/) ---------- */
/* Documentación al estilo de la landing: barra superior con buscador, menú de temas a la
   izquierda (un cajón en el móvil), el artículo en el centro con texto más ligero para leer
   largo, e «En esta página» a la derecha en pantallas anchas. */

.is-help #app {
  max-width: none;
}

.help {
  --bar-height: 68px;
  min-height: 100dvh;
}

.help__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--bar-height);
  /* Mismos bordes que .help__body (máx. 1320px centrado, con su relleno lateral). */
  --bar-gutter: max(var(--space-lg), calc((100% - 1320px) / 2 + var(--space-lg)));
  padding: 0 max(var(--bar-gutter), env(safe-area-inset-right)) 0 max(var(--bar-gutter), env(safe-area-inset-left));
  border-bottom: 2px solid var(--border);
  background: rgb(255 248 236 / 0.92);
  backdrop-filter: blur(12px);
}

.help__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text);
}

.help__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
}

.help__brand img {
  display: block;
  width: 40px;
  height: 40px;
}

.help__brand > span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.help__brand-title {
  font-size: 17px;
  font-weight: 800;
}

.help__brand-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.help__search,
.help__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 15px;
  text-decoration: none;
  transition:
    border-color 140ms ease,
    color 140ms ease;
}

.help__search {
  min-width: 260px;
}

.help__search-label {
  flex: 1;
  text-align: left;
}

.help__search:hover,
.help__tool:hover {
  border-color: var(--primary);
  color: var(--text);
}

.help-kbd {
  padding: 2px 6px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
}

.help__body {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 220px;
  gap: 48px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Sin «En esta página» (el inicio, artículos con un solo apartado), el contenido usa ese hueco. */
.help__body--wide {
  grid-template-columns: 270px minmax(0, 1fr);
}

/* Menú de temas */
.help__nav {
  position: sticky;
  top: var(--bar-height);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-height: calc(100dvh - var(--bar-height));
  overflow-y: auto;
  /* Los enlaces tienen 12px de relleno: así sus iconos quedan alineados con el logo de la barra. */
  margin-left: -12px;
  padding: var(--space-lg) var(--space-xs) var(--space-xl) 0;
  scrollbar-width: thin;
}

.help-nav__home,
.help-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 15px;
  text-decoration: none;
}

.help-nav__home {
  color: var(--text);
  font-weight: 800;
}

.help-nav__home .icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.help-nav__home:hover,
.help-nav__link:hover {
  background: var(--surface);
  color: var(--text);
}

.help-nav__link--active,
.help-nav__link--active:hover {
  background: var(--chip-active);
  color: var(--primary-dark);
  font-weight: 800;
}

.help-nav__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-nav__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 12px 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.help-nav__heading .icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.help-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 0 21px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--border);
  list-style: none;
}

.help-nav__app {
  padding: 0 12px;
}

.help__scrim {
  display: none;
}

/* Contenido */
.help__main {
  min-width: 0;
  padding: var(--space-xl) 0 72px;
}

/* «En esta página» */
.help__toc {
  position: sticky;
  top: var(--bar-height);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
}

.help-toc__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.help-toc__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
  list-style: none;
}

.help-toc__link {
  padding: 6px 0 6px 14px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.help-toc__link:hover {
  color: var(--primary-dark);
}

/* Inicio de la guía */
.help-home {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1000px;
}

.help-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-xl);
  align-items: center;
  padding: 48px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.13) 1.5px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(120% 90% at 0% 0%, #9479ff 0%, var(--primary) 55%, #6a48f5 100%);
  box-shadow: 0 12px 0 var(--primary-dark);
  color: #fff;
}

.help-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.help-hero__title {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  text-wrap: balance;
}

.help-hero__lead {
  max-width: 36em;
  font-size: 18px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.88);
}

.help-hero__search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(100%, 480px);
  min-height: 56px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 5px 0 rgb(43 33 64 / 0.25);
  color: var(--text-muted);
  font-size: 16px;
  text-align: left;
}

.help-hero__search .icon {
  flex: none;
  color: var(--primary);
}

.help-hero__piggy {
  width: 200px;
  height: 200px;
}

/* «¿Por dónde empiezo?» */
.help-start {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 3px solid var(--text);
  border-radius: 28px;
  background: var(--gold);
  box-shadow: 8px 9px 0 var(--text);
  color: var(--text);
  text-decoration: none;
  transform: rotate(-0.6deg);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.help-start:hover {
  transform: rotate(0deg) translateY(-3px);
}

.help-start__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--gold-dark);
}

.help-start__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.help-start__kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.help-start__title {
  font-size: 22px;
  font-weight: 800;
}

.help-start__summary {
  font-size: 15px;
  font-weight: 500;
}

.help-start__arrow {
  flex: none;
}

.help-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.help-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.help-group__icon {
  width: 34px;
  height: 34px;
  color: var(--primary);
}

.help-group__text {
  max-width: 40em;
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.help-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-md);
}

.help-topic {
  --edge: var(--primary);
  --tint: var(--chip-active);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--border);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.help-topic:hover {
  border-color: var(--edge);
  box-shadow: 0 6px 0 var(--edge);
  transform: translateY(-4px);
}

.help-topic.help-topic--pig,
.doc__badge.doc__badge--pig,
.doc-card.doc-card--pig,
.callout.callout--kids {
  --edge: var(--pig-dark);
  --tint: #ffe0ec;
}

.help-topic.help-topic--gold,
.doc__badge.doc__badge--gold,
.doc-card.doc-card--gold,
.callout.callout--tip {
  --edge: var(--gold-dark);
  --tint: #fff1c7;
}

.help-topic.help-topic--sky,
.doc__badge.doc__badge--sky,
.doc-card.doc-card--sky,
.callout.callout--science {
  --edge: var(--sky-dark);
  --tint: #d7f3fc;
}

.help-topic.help-topic--mint,
.doc__badge.doc__badge--mint,
.doc-card.doc-card--mint {
  --edge: var(--success-dark);
  --tint: #d6f5e9;
}

.callout.callout--warn {
  --edge: var(--danger-dark);
  --tint: #ffe1e1;
}

.help-topic__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--edge);
}

.help-topic__title {
  font-size: 18px;
  font-weight: 800;
}

.help-topic__text {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* Artículo */
.doc {
  max-width: 740px;
}

.doc__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-lg);
  color: var(--text-muted);
  font-size: 14px;
}

.doc__crumbs a {
  color: var(--text-muted);
}

.doc__crumb-sep {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

.doc__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px dashed var(--border);
}

.doc__badge {
  --edge: var(--primary);
  --tint: var(--chip-active);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--tint);
  box-shadow: 0 5px 0 var(--edge);
  color: var(--edge);
  transform: rotate(-4deg);
}

.doc__title {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-wrap: balance;
}

.doc__lead {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-muted);
}

.doc__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Texto para leer largo: más ligero y con más interlineado que la app. */
.doc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
}

.doc__body strong {
  font-weight: 800;
}

.doc__body a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.doc__out {
  width: 0.75em;
  height: 0.75em;
  margin-left: 2px;
  vertical-align: middle;
}

.doc__h2 {
  margin-top: var(--space-xl);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  scroll-margin-top: calc(var(--bar-height) + var(--space-md));
}

.doc__h3 {
  margin-top: var(--space-sm);
  font-size: 19px;
  font-weight: 800;
}

.doc__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.4em;
}

.doc__list li::marker {
  color: var(--primary);
  font-weight: 800;
}

/* Botón suelto dentro de un artículo (p. ej. «Cambiar mi elección» en Privacidad). */
.doc__action {
  display: flex;
}

.doc__ui {
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--chip-active);
  color: var(--primary-dark);
  font-weight: 800;
  white-space: nowrap;
}

.doc__cite {
  font-size: 0.68em;
  line-height: 0;
}

.doc__cite a {
  padding: 0 2px;
  border-radius: 4px;
  text-decoration: none;
}

.doc__cite a:hover {
  background: var(--chip-active);
}

.doc__cite a + a::before {
  content: ',';
  color: var(--text-muted);
}

.doc__say {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: 20px 20px 20px 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--border);
  font-weight: 700;
}

.doc__say-icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--pig-dark);
}

.callout {
  --edge: var(--primary);
  --tint: var(--chip-active);
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--tint);
  box-shadow: inset 4px 0 0 var(--edge);
}

.callout__icon {
  display: flex;
  flex: none;
  margin-top: 2px;
  color: var(--edge);
}

.callout__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  font-size: 16px;
}

.callout__title {
  font-weight: 800;
}

.doc-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-steps__item {
  display: flex;
  gap: var(--space-md);
}

.doc-steps__n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  font-size: 18px;
  font-weight: 800;
}

.doc-steps__title {
  font-weight: 800;
}

.doc-steps__text {
  color: var(--text-muted);
}

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.doc-card {
  --edge: var(--primary);
  --tint: var(--chip-active);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--tint);
  box-shadow: 0 6px 0 var(--edge);
  line-height: 1.45;
}

.doc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--edge);
}

.doc-card__kicker {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-card__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

.doc-card__text {
  font-size: 15px;
}

.doc-card__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
}

/* Capturas y videos de la app en un marco de teléfono. */
.phone-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-sm) 0;
}

.phone-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 240px;
  margin: 0;
}

.doc__body > .phone-shot {
  align-self: center;
  width: 270px;
}

.phone {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 36px;
  background: var(--text);
  box-shadow: 0 10px 0 rgb(43 33 64 / 0.18);
}

.phone img,
.phone video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  border-radius: 28px;
  background: var(--background);
  object-fit: cover;
}

.phone-shot__caption {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.phone-shot__caption .icon {
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

.phone-video {
  cursor: pointer;
}

.phone-video__state {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgb(43 33 64 / 0.72);
  color: #fff;
  transition: opacity 160ms ease;
}

.phone-video--playing .phone-video__state {
  opacity: 0;
}

.phone-video__track {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 5px;
  border-radius: 999px;
  background: rgb(43 33 64 / 0.18);
  overflow: hidden;
}

.phone-video__progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
}

/* Preguntas frecuentes */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq__item {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.faq__item[open] {
  border-color: var(--primary);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__caret {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--primary);
  transition: transform 160ms ease;
}

.faq__item[open] .faq__caret {
  transform: rotate(180deg);
}

.faq__a {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
}

/* Fuentes */
.sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.source {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--border);
  scroll-margin-top: calc(var(--bar-height) + var(--space-lg));
  transition: box-shadow 300ms ease;
}

.source--target {
  box-shadow:
    inset 0 0 0 3px var(--primary),
    0 6px 0 var(--chip-active);
}

.source__n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chip-active);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 800;
}

.source__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
}

.source__title {
  font-weight: 800;
}

.source__meta,
.source__note {
  color: var(--text-muted);
}

.source__body a {
  overflow-wrap: anywhere;
}

/* Anterior / siguiente */
.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 740px;
  margin-top: 56px;
}

.doc-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.doc-pager__link:hover {
  border-color: var(--primary);
}

.doc-pager__link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.doc-pager__dir {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.doc-pager__title {
  font-weight: 800;
  color: var(--primary-dark);
}

/* Buscador */
.help-search {
  width: min(620px, calc(100% - 32px));
  max-height: none;
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.help-search::backdrop {
  background: rgb(43 33 64 / 0.5);
  backdrop-filter: blur(3px);
}

.help-search__box {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--text);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 8px 9px 0 var(--text);
  overflow: hidden;
}

.help-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  border-bottom: 2px solid var(--border);
  color: var(--primary);
}

.help-search__input {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 18px;
  outline: none;
}

.help-search__input::-webkit-search-cancel-button {
  display: none;
}

.help-search__results {
  display: flex;
  flex-direction: column;
  max-height: min(56vh, 460px);
  padding: var(--space-sm);
  overflow-y: auto;
}

.help-search__empty {
  padding: var(--space-xl) var(--space-md);
  color: var(--text-muted);
  text-align: center;
}

.help-search__result {
  display: flex;
  gap: var(--space-md);
  padding: 12px;
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
}

.help-search__result--active,
.help-search__result:hover {
  background: var(--chip-active);
}

.help-search__icon {
  display: flex;
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

.help-search__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.help-search__title {
  font-weight: 800;
}

.help-search__snippet {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.help-search__section {
  color: var(--primary-dark);
  font-size: 12px;
}

.help-search mark {
  border-radius: 3px;
  background: rgb(255 201 60 / 0.55);
  color: inherit;
}

@media (max-width: 1180px) {
  .help__body,
  .help__body--wide {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
  }

  .help__toc {
    display: none;
  }
}

/* Estrecho: el menú de temas es un cajón que sale por la izquierda. */
@media (max-width: 860px) {
  .help {
    --bar-height: 60px;
  }

  .help__bar {
    --bar-gutter: var(--space-md);
  }

  .help__menu {
    display: flex;
  }

  .help__body {
    display: block;
    padding: 0 var(--space-md);
  }

  .help__nav {
    position: fixed;
    top: var(--bar-height);
    bottom: 0;
    left: 0;
    z-index: 15;
    width: min(320px, 86vw);
    max-height: none;
    /* Sin esto, el align-self: start de escritorio (Chrome lo aplica también a lo fijo) le da la
       altura de su contenido en vez de ir de la barra al fondo, y no hace scroll. */
    align-self: stretch;
    overscroll-behavior: contain;
    margin-left: 0;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    border-right: 2px solid var(--border);
    background: var(--background);
    transform: translateX(-102%);
    visibility: hidden;
    transition:
      transform 220ms ease,
      visibility 0s linear 220ms;
  }

  .help--nav-open .help__nav {
    transform: none;
    visibility: visible;
    transition: transform 220ms ease;
  }

  .help--nav-open .help__scrim {
    position: fixed;
    inset: var(--bar-height) 0 0;
    z-index: 14;
    display: block;
    background: rgb(43 33 64 / 0.4);
  }

  .help__search,
  .help__tool {
    width: 44px;
    min-width: 0;
    padding: 0;
    justify-content: center;
  }

  .help__search-label,
  .help__search-kbd,
  .help__tool span {
    display: none;
  }

  .help__brand-sub {
    display: none;
  }

  .help__brand img {
    width: 34px;
    height: 34px;
  }

  .help__main {
    padding: var(--space-lg) 0 56px;
  }

  .help-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 22px 36px;
    border-radius: 28px;
  }

  .help-hero__piggy {
    display: none;
  }
}

@media (max-width: 600px) {
  .help-home {
    gap: 40px;
  }

  .help-start {
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .help-start__arrow {
    display: none;
  }

  .doc-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-pager__link--next {
    grid-column: 1;
  }

  .phone-shot,
  .doc__body > .phone-shot {
    width: min(100%, 250px);
  }

  .callout {
    padding: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-start,
  .help-topic,
  .help__nav {
    transition: none;
  }
}

/* ---------- Landing: enlace a la guía para padres ---------- */

.landing__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.landing__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.landing__nav-link:hover {
  border-color: var(--primary);
}

.landing__nav-link .icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

/* Guía para padres: texto y CTA a la izquierda, temas destacados a la derecha. */
.landing__help {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding: 56px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 1px 1px, rgb(224 161 0 / 0.16) 1.5px, transparent 0) 0 0 / 22px 22px,
    #fff1c7;
  box-shadow: 0 14px 0 var(--gold-dark);
}

.landing-help__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.landing__help .landing__eyebrow {
  background: var(--surface);
  box-shadow: 0 4px 0 var(--gold-dark);
}

.landing__help .landing__eyebrow .icon {
  color: var(--primary);
}

.landing-help__lead {
  max-width: 28em;
  font-size: 18px;
  font-weight: 500;
}

.landing-help__cta {
  min-width: 220px;
}

.landing-help__topics {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-help__topic {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  border: 3px solid var(--text);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 6px 7px 0 var(--text);
  color: var(--text);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-help__topics li:nth-child(odd) .landing-help__topic {
  transform: rotate(-0.8deg);
}

.landing-help__topics li:nth-child(even) .landing-help__topic {
  transform: rotate(0.8deg);
}

.landing-help__topics li .landing-help__topic:hover {
  transform: translateX(6px) rotate(0deg);
}

.landing-help__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--chip-active);
  color: var(--primary);
}

.landing-help__topic-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.landing-help__title {
  font-size: 18px;
  font-weight: 800;
}

.landing-help__desc {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.landing-help__arrow {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--primary);
}

@media (max-width: 900px) {
  .landing__help {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px 28px;
  }
}

@media (max-width: 600px) {
  .landing__help {
    gap: var(--space-xl);
    padding: 32px 20px 36px;
    border-radius: 28px;
  }

  .landing-help__cta {
    align-self: stretch;
  }

  .landing__nav-link {
    padding: 8px 12px;
    font-size: 14px;
  }

  .landing__nav img {
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-help__topic {
    transition: none;
  }
}