/* La web de Fable Merge (copiada de la de Fable Hospital Tycoon, 17-10-2026): fondo azul vivo con brillo de oro, el logo
   de ChatGPT, tarjetas marfil y los botones de la familia (píldora con degradado de 3 colores, canto macizo debajo y filo
   blanco arriba). La portada («Próximamente»: la maqueta B «Escaparate», que eligió el usuario el 17-10-2026; ver
   docs/maquetas/web-2026-10-17), las páginas legales y «Borrar cuenta». */

/* Fuentes auto-alojadas (LICENCIAS.txt): Lilita One en títulos, Nunito en el texto */
@font-face { font-family: 'Lilita One'; font-display: swap; src: url('../fuentes/lilita-one-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lilita One'; font-display: swap; src: url('../fuentes/lilita-one-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fuentes/nunito-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fuentes/nunito-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fuentes/nunito-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fuentes/nunito-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noche: #071c4a; --cobalto: #0b2a6b; --azul-real: #1f52c0; --azul-vivo: #3e8ef9;
  --oro: #ffd04a; --oro-hondo: #f2b51e; --oro-canto: #c98a0c; --ambar: #a35f00;
  --marfil: #fff8e8; --tinta: #1b2a4e; --tinta-suave: #4a5675; --blanco: #eef3ff;
  --f-disp: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-texto: 'Nunito', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px;
  font: 700 17px/1.5 var(--f-texto); color: var(--blanco);
  background-color: var(--cobalto);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 208, 74, .22), transparent 70%),
    linear-gradient(170deg, #2f7ae8 0%, var(--cobalto) 55%, var(--noche) 100%);
}
img { max-width: 100%; }

/* La letra del juego: Lilita One blanca con contorno grueso */
.lil { font-family: var(--f-disp); font-weight: 400; color: #fff; word-spacing: .14em; paint-order: stroke fill; -webkit-text-stroke: var(--contorno, 6px) var(--tinta-contorno, var(--cobalto)); }

/* ---- Portada «Escaparate»: el paisaje del juego detrás, el logo, las bolas del pedestal y tres tarjetas azules con filo
   de oro ---- */
body.escaparate { background: var(--noche); }
body.escaparate::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 28, 74, .05) 0%, rgba(7, 28, 74, .35) 35%, rgba(7, 28, 74, .9) 72%, var(--noche) 100%),
    url('../img/fondo-inicio.webp') center top / cover no-repeat;
}
.escena {
  flex: 1; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 0 32px; text-align: center;
}
.escena h1 { margin: 0 0 22px; }
.logo { display: block; width: min(92%, 380px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 18px rgba(3, 12, 36, .45)); }
.bolas { display: block; width: min(100%, 400px); height: auto; margin: -14px 0 6px; filter: drop-shadow(0 12px 20px rgba(3, 12, 36, .5)); }

.pildora-oro {
  display: inline-block; margin: 6px 0 0; padding: 13px 30px 17px; border-radius: 999px;
  font: 400 25px/1.1 var(--f-disp); letter-spacing: .01em;
  background: linear-gradient(#ffe48a, #ffbf1a 50%, #f39400);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .55), 0 8px 0 #b25e00, 0 14px 24px rgba(3, 12, 36, .4);
  --tinta-contorno: #7a3d00; --contorno: 6px;
}

.rasgos { list-style: none; width: 100%; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; text-align: left; }
.rasgo {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 16px; padding: 14px 18px 15px 14px; border-radius: 24px;
  background: linear-gradient(#56a2ff, #3380ee 45%, #2766d8);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 0 0 4px #ffcf3a, 0 8px 0 3px var(--oro-canto);
}
.rasgo h2 { margin: 0 0 2px; font-size: 22px; line-height: 1.15; --contorno: 5px; }
.rasgo p { margin: 0; font-size: 15px; line-height: 1.4; color: #eaf2ff; }
.bola {
  display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  font-size: 22px; --contorno: 5px; --tinta-contorno: rgba(30, 10, 60, .75);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), var(--c) 38%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 4px 8px rgba(3, 12, 36, .35);
}
/* los colores de las bolas del juego (el 2, el 128 y el 1º de la clasificación, en el morado del 16) */
.bola-2 { --c: #ff8f1a; }
.bola-128 { --c: #ffbe1f; font-size: 17px; }
.bola-primero { --c: #9455ff; }

/* ---- Páginas legales y «Borrar cuenta»: el logo pequeño arriba y el texto en una tarjeta marfil ancha ---- */
.marca-barra { width: 100%; max-width: 760px; padding: 18px 0 4px; }
.marca { display: inline-block; }
.marca img { display: block; height: 52px; width: auto; filter: drop-shadow(0 4px 8px rgba(3, 12, 36, .4)); }

.documento {
  width: 100%; max-width: 760px; margin: 14px 0 36px; padding: 30px 22px 28px; border-radius: 28px;
  background: var(--marfil); color: var(--tinta-suave);
  border: 3px solid #fff; box-shadow: 0 6px 0 #c9bfa6, 0 18px 40px rgba(3, 12, 36, .45);
}
.documento h1 { margin: 0 0 10px; font: 400 clamp(30px, 8vw, 40px)/1.1 var(--f-disp); color: var(--cobalto); }
.documento h2 { margin: 32px 0 8px; font: 800 21px/1.3 var(--f-texto); color: var(--tinta); }
.documento h3 { margin: 20px 0 6px; font: 800 17px/1.3 var(--f-texto); color: var(--ambar); }
.documento p, .documento li { margin: 0; font-size: 16px; line-height: 1.65; }
.documento p + p, .documento p + ul, .documento ul + p, .documento p + ol, .documento ol + p { margin-top: 10px; }
.documento ul, .documento ol { margin: 8px 0 0; padding-left: 22px; }
.documento li + li { margin-top: 4px; }
.documento b { color: var(--tinta); }
.documento a { color: var(--azul-real); font-weight: 800; text-underline-offset: 2px; overflow-wrap: anywhere; }
.documento .entradilla { font-size: 18px; color: var(--tinta); }
.documento .actualizado { margin-top: 32px; font-size: 14px; color: #7a8399; }
@media (min-width: 640px) { .documento { padding: 40px 48px 36px; } }

/* El formulario de «Borrar cuenta» */
.formulario {
  display: grid; gap: 16px; margin: 20px 0 8px; padding: 22px 20px; border-radius: 22px;
  background: #fff; border: 2px solid #eadfc4;
}
.formulario label { display: grid; gap: 6px; font-size: 15px; font-weight: 800; color: var(--tinta); }
.formulario small { font-weight: 700; color: var(--tinta-suave); }
.formulario input:not([type=checkbox]), .formulario textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid #cfd6e6; background: #fbfcff;
  font: 700 17px/1.3 var(--f-texto); color: var(--tinta);
}
.formulario textarea { resize: vertical; min-height: 88px; }
.formulario input:focus, .formulario textarea:focus { outline: 3px solid rgba(62, 142, 249, .3); border-color: var(--azul-vivo); }
.formulario .casilla { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 700; color: var(--tinta-suave); }
.formulario .casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #ec3b2c; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.boton {
  justify-self: center; display: inline-block; padding: 14px 34px 17px; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 23px/1.1 var(--f-disp); text-decoration: none; --contorno: 5px;
  transition: transform .08s ease, box-shadow .08s ease;
}
.boton.rojo {
  background: linear-gradient(#ff8a6a, #ec3b2c 55%, #c62818); --tinta-contorno: #6a0a00;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .3), 0 7px 0 #8e160a, 0 12px 20px rgba(3, 12, 36, .3);
}
.boton.azul {
  background: linear-gradient(#6fb4ff, #3380ee 50%, #1f5ccc); --tinta-contorno: var(--cobalto);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .35), 0 7px 0 #17459e, 0 12px 20px rgba(3, 12, 36, .3);
}
.boton:active { transform: translateY(4px); }
.boton.rojo:active { box-shadow: inset 0 5px 0 rgba(255, 255, 255, .3), 0 3px 0 #8e160a; }
.boton.azul:active { box-shadow: inset 0 5px 0 rgba(255, 255, 255, .35), 0 3px 0 #17459e; }

/* Una página de un solo mensaje (lo que contesta el formulario) */
.documento.mensaje { max-width: 560px; margin-top: 40px; text-align: center; }
.documento.mensaje p { text-wrap: balance; }
.documento.mensaje .boton { margin-top: 26px; }

a:focus-visible, .boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

/* ---- Pie ---- */
.pie { padding: 8px 0 28px; text-align: center; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-bottom: 22px; font-size: 14px; color: rgba(238, 243, 255, .45); }
.pie-legal a { color: rgba(238, 243, 255, .85); text-underline-offset: 3px; text-decoration-color: rgba(238, 243, 255, .35); }
.pie-legal a:hover { color: #fff; text-decoration-color: currentColor; }
.estudio {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(238, 243, 255, .75); text-decoration: none; font-size: 14px;
}
.estudio img { width: 150px; height: auto; transition: transform .15s ease; }
.estudio:hover img, .estudio:focus-visible img { transform: scale(1.04); }
.estudio:focus-visible { outline: 3px solid var(--oro); outline-offset: 6px; border-radius: 12px; }
.copy { margin: 14px 0 0; font-size: 13px; color: rgba(238, 243, 255, .55); }

@media (prefers-reduced-motion: reduce) { .estudio img, .boton { transition: none; } }