/* =========================================================
   OROUNSET · Hoja de estilos

   Las explicaciones en comentarios empiezan el botonMusica.

   TODAS las medidas están en rem. El tamaño de la raíz, y por tanto
   cuánto vale 1rem, se define más abajo en el bloque :root con clamp().
   ========================================================= */

:root {

    /* === Paleta base === */
    --color1: rgb(13, 13, 41);      /* navy profundo */
    --color2: rgb(52, 81, 135);     /* azul medio */
    --color3: rgb(91, 160, 177);    /* cian apagado */
    --color4: rgb(161, 236, 244);   /* cian claro */
    --color5: rgb(223, 232, 233);   /* casi blanco */
    --color6: rgb(28, 28, 85);      /* panel objetivos */

    /* === Acentos magenta / violeta === */
    --colorboton: rgb(136, 31, 139);
    --botonhover: rgb(209, 135, 211);

    /* === Tokens semánticos === */
    --bg-deep:        #07071a;
    --bg-base:        rgb(13, 13, 41);
    --surface:        rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --surface-bright: rgba(255, 255, 255, 0.12);
    --border-soft:    rgba(161, 236, 244, 0.12);
    --border-mid:     rgba(161, 236, 244, 0.22);
    --border-strong:  rgba(161, 236, 244, 0.45);

    --text-strong: var(--color5);
    --text-base:   var(--color4);
    --text-muted:  rgba(223, 232, 233, 0.62);
    --text-faint:  rgba(223, 232, 233, 0.40);

    --accent:       #b56bff;
    --accent-soft:  #5b52db;
    --accent-cyan:  #67d6ff;

    --grad-cta:    linear-gradient(135deg, #097eb0 0%, #5b52db 50%, #9c43e7 100%);
    --grad-cta-h:  linear-gradient(135deg, #9c43e7 0%, #5b52db 50%, #097eb0 100%);
    --grad-panel:  linear-gradient(180deg, rgba(28, 28, 85, 0.85) 0%, rgba(13, 13, 41, 0.85) 100%);

    --glow-cyan:   0 0 40rem rgba(103, 214, 255, 0.35);
    --glow-violet: 0 0 60rem rgba(156, 67, 231, 0.35);

    --shadow-card: 0 8rem 40rem rgba(0, 0, 0, 0.35), 0 0 0 1rem var(--border-soft) inset;
    --shadow-cta:  0 12rem 30rem rgba(156, 67, 231, 0.35);

    --radius-sm: 10rem;
    --radius-md: 18rem;
    --radius-lg: 28rem;
    --radius-pill: 999rem;

    --font-display: 'Space Grotesk', 'Lucida Console', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Lucida Console', monospace;

    --anchoimagen:  460rem;
    --colortuto:    rgba(7, 7, 26, 0.78);

}

/* ===================================================================
   ESCALA TIPOGRAFICA
   ===================================================================
   Toda la hoja esta escrita en "rem", y aqui se decide cuanto vale 1rem.
   Asi el diseño entero escala en bloque en lugar de tener medidas fijas.

   La formula es ancho_de_ventana / 1920, expresada en vw:
     1vw = 1% del ancho de la ventana
     100vw / 1920 = 0.0520833vw

   clamp(minimo, deseado, maximo) usa el valor deseado pero nunca baja del
   minimo ni sube del maximo:
     - suelo de 0.70px  -> por debajo el texto seria ilegible en movil
     - techo de 1px     -> por encima de 1920 el diseño crecia sin freno y
                           en un monitor 4K los titulos salian enormes
   =================================================================== */
:root {
    font-size: clamp(0.70px, 0.0520833vw, 1px);
}

* {
    box-sizing: border-box;
}

html, body {
    background-color: var(--bg-deep);
}

body {

    margin: 0rem;
    text-align: center;

    background:
        radial-gradient(1200rem 700rem at 15% -10%, rgba(91, 160, 177, 0.18), transparent 60%),
        radial-gradient(1100rem 800rem at 100% 0%, rgba(156, 67, 231, 0.18), transparent 55%),
        radial-gradient(1000rem 1000rem at 50% 120%, rgba(52, 81, 135, 0.25), transparent 60%),
        var(--bg-deep);
    background-attachment: fixed;

    font-family: var(--font-display);
    color: var(--text-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    min-height: 100vh;
    overflow-x: hidden;

    /* Evita el colapso de margenes de los hijos.
       Sin esto, el margin-top del stepper de las pantallas 1 y 2 se escapaba
       hacia arriba y empujaba el body 50px hacia abajo. En esa franja se veia
       el fondo plano del <html> en lugar del degradado del body: la barra
       oscura que aparecia arriba del todo. */
    display: flow-root;

}

/* ===================== AURORA BACKDROP ===================== */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120rem);
    opacity: 0.55;
    mix-blend-mode: screen;
}

.aurora-blob--1 {
    width: 900rem; height: 900rem;
    background: radial-gradient(circle, #5b52db 0%, transparent 65%);
    top: -250rem; left: -200rem;
    animation: floatA 18s ease-in-out infinite;
}

.aurora-blob--2 {
    width: 800rem; height: 800rem;
    background: radial-gradient(circle, #097eb0 0%, transparent 65%);
    bottom: -200rem; right: -150rem;
    animation: floatB 22s ease-in-out infinite;
}

.aurora-blob--3 {
    width: 700rem; height: 700rem;
    background: radial-gradient(circle, #9c43e7 0%, transparent 65%);
    top: 40%; left: 55%;
    transform: translate(-50%, -50%);
    animation: floatC 26s ease-in-out infinite;
}

@keyframes floatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(150rem, 120rem) scale(1.08); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-180rem, -100rem) scale(1.05); }
}
@keyframes floatC {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-40%, -55%) scale(1.12); }
}

/* Aseguramos que el contenido vaya por encima del aurora */
#pantalla0, #pantalla1, #pantalla2, #pantalla3, .anuncios {
    position: relative;
    z-index: 1;
}

/* ===================== TIPOGRAFÍA BASE ===================== */
h1 {
    text-align: center;
    margin: 0rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.5rem;
    font-size: 60rem;
    color: var(--text-strong);
}

p {
    text-align: center;
    margin: 0rem;
    font-size: 30rem;
    line-height: 1.45;
    color: var(--text-base);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 18rem;
    letter-spacing: 4rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    margin-bottom: 20rem;
    opacity: 0.85;
}

.hero-sub {
    max-width: 1100rem;
    margin: 30rem auto 0;
    font-size: 26rem;
    line-height: 1.55;
    color: var(--text-muted);
    padding: 0 30rem;
}

.screen-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 42rem !important;
    color: var(--text-strong);
    margin-top: 10rem;
}

.screen-sub {
    font-size: 22rem !important;
    color: var(--text-muted);
    margin-top: 10rem !important;
    max-width: 900rem;
    margin-left: auto;
    margin-right: auto;
}

.panel-title {
    font-family: var(--font-mono);
    letter-spacing: 4rem;
    font-size: 18rem !important;
    color: var(--accent-cyan);
    text-transform: uppercase;
    margin-bottom: 25rem !important;
    padding: 0 !important;
}

/* ===================== BOTONES BASE ===================== */
button {
    margin: 0rem;
    padding: 16rem 28rem;

    word-break: break-word;
    white-space: normal;

    background-color: var(--colorboton);
    color: var(--color5);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28rem;
    letter-spacing: 0.3rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    box-shadow: 0 6rem 18rem rgba(0, 0, 0, 0.25);
}

button:hover {
    background-color: var(--botonhover);
    color: var(--color1);
    transform: translateY(-2rem);
    box-shadow: 0 10rem 26rem rgba(209, 135, 211, 0.35);
}

button:active {
    transform: translateY(0);
}

button:focus-visible {
    outline: 3rem solid var(--accent-cyan);
    outline-offset: 3rem;
}

button:disabled {
    opacity: 0.45;
    background-color: #2a2a48 !important;
    background: #2a2a48 !important;
    color: rgba(223, 232, 233, 0.5) !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===================== INPUT BASE ===================== */
input,
textarea {
    padding: 14rem 18rem;
    font-family: var(--font-display);
    font-size: 24rem;
    border: 1.5rem solid var(--border-mid);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 800rem;
    background-color: rgba(13, 13, 41, 0.6);
    color: var(--text-strong);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

input::placeholder,
textarea::placeholder {
    font-size: 24rem;
    color: var(--text-faint);
    opacity: 1;
}

input:focus,
textarea:focus {
    border-color: var(--accent-cyan);
    outline: none;
    background-color: rgba(13, 13, 41, 0.85);
    box-shadow: 0 0 0 4rem rgba(103, 214, 255, 0.18);
}

input:disabled,
textarea:disabled {
    opacity: 0.45;
    background-color: rgba(40, 40, 70, 0.6);
    color: var(--text-faint);
    cursor: not-allowed;
}

/* ===================== SELECT ===================== */
select {
    margin-left: 24rem;
    padding: 12rem 26rem;
    text-align: center;
    text-align-last: center;

    background-color: rgba(13, 13, 41, 0.7);
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 26rem;
    font-weight: 600;
    border: 1.5rem solid var(--border-mid);
    border-radius: var(--radius-pill);

    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

select:hover {
    background-color: rgba(91, 160, 177, 0.25);
    color: var(--text-strong);
    border-color: var(--border-strong);
}

select:focus {
    background-color: rgba(13, 13, 41, 0.85);
    color: var(--text-strong);
    border-color: var(--accent-cyan);
    outline: none;
    box-shadow: 0 0 0 4rem rgba(103, 214, 255, 0.18);
}

select option {
    background-color: var(--color1);
    color: var(--text-strong);
}

/* ===================================================================
   PANTALLA 0  ·  Landing
   =================================================================== */

#pantalla0 {
    padding-bottom: 60rem;
    min-height: 100vh;
}

/* ---------- NAV ---------- */
nav {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 28rem 60rem;
    background: linear-gradient(180deg, rgba(13, 13, 41, 0.65) 0%, rgba(13, 13, 41, 0) 100%);
    backdrop-filter: blur(10rem);
    -webkit-backdrop-filter: blur(10rem);
    border-bottom: 1rem solid var(--border-soft);
}

#logo {
    display: inline-flex;
    align-items: center;
    gap: 14rem;
    text-decoration: none;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44rem;
    letter-spacing: 4rem;
    transition: opacity 0.2s ease;
}

#logo:hover {
    opacity: 0.85;
}

.logo-mark {
    color: var(--accent);
    font-size: 38rem;
    text-shadow: 0 0 20rem rgba(181, 107, 255, 0.7);
    animation: pulseMark 3.5s ease-in-out infinite;
}

@keyframes pulseMark {
    0%, 100% { opacity: 0.9; transform: rotate(0deg); }
    50%      { opacity: 1;   transform: rotate(45deg); }
}

.logo-text {
    background: linear-gradient(90deg, var(--color5) 0%, var(--color4) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Las (opcionales) entradas <a> de menú quedan listas por si se reactivan */
nav a:not(#logo) {
    margin-left: auto;
    padding: 10rem 22rem;
    color: var(--text-base);
    font-family: var(--font-display);
    font-size: 22rem;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s ease, color 0.2s ease;
}

nav a:not(#logo):hover {
    background-color: var(--surface-strong);
    color: var(--text-strong);
}

/* ---------- HERO ---------- */
#cuerpo {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    min-height: calc(100vh - 140rem);
    padding: 40rem 0;
}

/* ---------- ANUNCIOS ----------
   Las medidas van en px, no en rem: los tamanos de AdSense son pixeles
   reales y no deben escalar con el tamano de fuente raiz.
   El min-height reserva el hueco antes de que cargue el anuncio, para que
   el contenido no pegue un salto cuando aparece. */

.anunciovertical {
    flex: 0 0 auto;
    width: 160px;
    min-height: 600px;
    margin: 30rem;
    align-self: center;
    border-radius: var(--radius-md);

    /* Sin imagen de relleno a proposito.
       Antes habia un ad_placeholder.png con la palabra "AD" escrita, que se
       veia siempre que el anuncio no cargara. Eso es simular publicidad, y es
       justo lo que revisa AdSense. El hueco se queda transparente: se reserva
       el sitio para que la pagina no de un salto cuando entre el anuncio,
       pero sin fingir que hay uno. */
}

.anuncios {
    width: 100%;
    max-width: 970px;
    min-height: 100px;
    margin: 40rem auto;
    padding: 0 20rem;
}

/* Los rascacielos laterales solo caben en pantallas anchas.
   Por debajo se ocultan: apretarlos daria un anuncio deforme. */
@media (max-width: 1200px) {
    .anunciovertical {
        display: none;
    }
}

#mensajeinicial {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rem 40rem;
    gap: 0;
}

#mensajeinicial h1 {
    font-size: 110rem;
    line-height: 1.05;
    letter-spacing: -1rem;
    background: linear-gradient(120deg, var(--color5) 0%, var(--color4) 40%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 70rem rgba(103, 214, 255, 0.15);
    animation: fadeInUp 0.8s ease both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-actions {
    display: flex;
    gap: 26rem;
    margin-top: 60rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#tutorialjuego {
    font-size: 36rem;
    padding: 18rem 42rem;
    background-color: transparent;
    color: var(--text-strong);
    border: 1.5rem solid var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: none;
}

#tutorialjuego:hover {
    background-color: var(--surface-bright);
    color: var(--text-strong);
    border-color: var(--accent-cyan);
}

#comenzarjuego {
    font-size: 38rem;
    padding: 20rem 60rem;
    background: var(--grad-cta);
    color: var(--color5);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta);
    letter-spacing: 2rem;
    position: relative;
    overflow: hidden;
}

#comenzarjuego::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-cta-h);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#comenzarjuego:hover {
    color: var(--color5);
    background: var(--grad-cta);
}

#comenzarjuego:hover::after {
    opacity: 1;
}

#comenzarjuego > * { position: relative; z-index: 1; }

/* ---------- TUTORIAL MODAL ---------- */
#tuto {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;

    background-color: var(--colortuto);
    backdrop-filter: blur(10rem);
    -webkit-backdrop-filter: blur(10rem);
}

.tuto-card {
    position: relative;
    padding: 40rem;
    background: var(--grad-panel);
    border: 1rem solid var(--border-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), var(--glow-violet);
    max-width: 90vw;
    max-height: 90vh;
}

#cerrar {
    position: absolute;
    top: -20rem;
    right: -20rem;
    width: 60rem;
    height: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-display);
    font-size: 36rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color5);
    background: linear-gradient(135deg, #9c43e7, #5b52db);
    border: 2rem solid var(--color5);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 2;
}

#cerrar:hover {
    transform: scale(1.1) rotate(90deg);
}

#tuto img {
    display: block;
    width: 50vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* ---------- FEATURE GRID ---------- */
.feature-grid {
    margin-top: 110rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36rem;
    width: 100%;
    max-width: 1500rem;
    padding: 0 40rem;
}

.feature-card {
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 40rem 32rem;
    text-align: left;
    backdrop-filter: blur(14rem);
    -webkit-backdrop-filter: blur(14rem);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6rem);
    border-color: var(--border-strong);
    background-color: var(--surface-strong);
    box-shadow: var(--shadow-card), var(--glow-cyan);
}

.feature-icon {
    width: 70rem;
    height: 70rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36rem;
    color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(103, 214, 255, 0.18), rgba(156, 67, 231, 0.18));
    border: 1rem solid var(--border-mid);
    border-radius: var(--radius-md);
    margin-bottom: 24rem;
}

.feature-card h3 {
    margin: 0 0 14rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28rem;
    color: var(--text-strong);
    text-align: left;
}

.feature-card p {
    text-align: left;
    font-size: 22rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ===================================================================
   STEP INDICATOR  ·  Pantallas 1, 2 y 3
   =================================================================== */
.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18rem;
    margin: 50rem auto 30rem;
    padding: 14rem 26rem;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-pill);
    width: fit-content;
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

.step {
    display: inline-flex;
    align-items: center;
    gap: 12rem;
    padding: 8rem 18rem;
    border-radius: var(--radius-pill);
    color: var(--text-faint);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20rem;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.step-num {
    width: 32rem;
    height: 32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1rem solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 18rem;
    font-weight: 500;
    color: var(--text-faint);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.step-label {
    letter-spacing: 1rem;
}

.step.is-active {
    color: var(--text-strong);
    background: linear-gradient(135deg, rgba(103, 214, 255, 0.18), rgba(156, 67, 231, 0.18));
}

.step.is-active .step-num {
    background: var(--grad-cta);
    color: var(--color5);
    border-color: transparent;
    box-shadow: 0 0 16rem rgba(156, 67, 231, 0.6);
}

.step.is-done {
    color: var(--text-base);
}

.step.is-done .step-num {
    background: rgba(91, 160, 177, 0.25);
    color: var(--accent-cyan);
    border-color: var(--border-mid);
}

.step-divider {
    width: 50rem;
    height: 1.5rem;
    background: linear-gradient(90deg, var(--border-soft), var(--border-mid), var(--border-soft));
    border-radius: 1rem;
}

/* ===================================================================
   PANTALLA 1  ·  Selección de historia
   =================================================================== */
#pantalla1 {
    padding-bottom: 80rem;
    min-height: 100vh;
}

#pantalla1 main {
    max-width: 1500rem;
    margin: 0 auto;
    padding: 0 40rem;
    animation: fadeInUp 0.5s ease both;
}

#dificultad {
    margin: 20rem 0 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12rem 24rem;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10rem);
    -webkit-backdrop-filter: blur(10rem);
}

#dificultad p {
    font-family: var(--font-mono);
    font-size: 22rem !important;
    letter-spacing: 2rem;
    color: var(--text-muted);
}

main p {
    font-size: 38rem;
}

#botonesHistorias {
    margin-top: 50rem;
    margin-bottom: 50rem;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420rem, 1fr));
    gap: 28rem;
    justify-content: center;
    max-width: 1400rem;
    margin-left: auto;
    margin-right: auto;
}

#botonesHistorias button {
    width: 100%;
    min-height: 130rem;
    padding: 24rem 28rem;
    font-size: 24rem;
    text-align: left;

    background: var(--grad-cta);
    color: var(--color5);
    border-radius: var(--radius-lg);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#botonesHistorias button::before {
    content: '';
    position: absolute;
    inset: 1.5rem;
    background: rgba(13, 13, 41, 0.55);
    border-radius: calc(var(--radius-lg) - 2rem);
    z-index: 0;
    transition: background-color 0.25s ease;
}

#botonesHistorias button::after {
    content: '→';
    position: absolute;
    bottom: 18rem;
    right: 24rem;
    font-family: var(--font-display);
    font-size: 28rem;
    color: var(--accent-cyan);
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 1;
}

#botonesHistorias button > * { position: relative; z-index: 1; }

/* Mantenemos el contenido textual del botón sobre la capa interna */
#botonesHistorias button {
    isolation: isolate;
}

#botonesHistorias button:hover {
    transform: translateY(-4rem);
    box-shadow: var(--shadow-card), var(--glow-violet);
    color: var(--color5);
    background: var(--grad-cta);
}

#botonesHistorias button:hover::before {
    background: rgba(13, 13, 41, 0.35);
}

#botonesHistorias button:hover::after {
    transform: translateX(6rem);
    opacity: 1;
}

.divider-or {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18rem;
    margin: 20rem auto 30rem;
    max-width: 600rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 18rem;
    letter-spacing: 3rem;
    text-transform: uppercase;
}

.divider-or::before,
.divider-or::after {
    content: '';
    flex: 1;
    height: 1rem;
    background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
}

#escribeHistoria {
    margin: 10rem auto 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    max-width: 1200rem;
    padding: 0 20rem;
}

#barradetextoboton {
    background: var(--grad-cta);
    color: var(--color5);
    font-weight: 700;
    padding: 16rem 36rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8rem 22rem rgba(156, 67, 231, 0.3);

    /* Mismo motivo que en #continuarlahistoria */
    flex: 0 0 auto;
    white-space: nowrap;
}

#entradatextcontext {
    flex: 1 1 auto;
    min-width: 0;
}

#barradetextoboton:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

#contextodisplayP1 {
    padding: 30rem 60rem;
    max-width: 1300rem;
    margin: 30rem auto !important;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 24rem !important;
    line-height: 1.65 !important;
    color: var(--text-base);
    text-align: left;
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

#contextodisplayP1:empty {
    display: none;
}

#cambiarPantalla2 {
    margin-top: 30rem;
    padding: 18rem 50rem;
    font-size: 26rem;
    background: var(--grad-cta);
    color: var(--color5);
    border-radius: var(--radius-pill);
    letter-spacing: 1rem;
    box-shadow: var(--shadow-cta);
}

#cambiarPantalla2:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

/* ===================================================================
   PANTALLA 2  ·  Personaje & objetivos
   =================================================================== */
/* #pantalla2 es un bloque: el stepper va arriba y debajo las dos columnas.
   El display lo pone el JS en linea (block); aqui no lo forzamos. */
#pantalla2 {
    min-height: 100vh;
}

/* Contenedor de las dos columnas (personaje | objetivos).
   El 168rem descontado es lo que ocupa el stepper con sus margenes:
   asi las columnas llenan la pantalla sin generar scroll de sobra. */
#contenidogeneralpantalla2 {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 168rem);
}

#contenedorPersonajes {
    flex: 0 0 auto;
    margin: 0;
    padding: 40rem 50rem 60rem;
    width: calc(var(--anchoimagen) + 100rem);
    /* El fondo entra desde transparente para que no haya un corte seco
       justo debajo del stepper (igual de integrado que en la pantalla 1). */
    background: linear-gradient(180deg,
        rgba(13, 13, 41, 0) 0,
        rgba(13, 13, 41, 0.4) 90rem,
        rgba(13, 13, 41, 0.1) calc(100% - 120rem),
        rgba(13, 13, 41, 0) 100%);

    /* La linea divisoria se desvanece por arriba y por abajo igual que el
       fondo. Si fuera un borde solido terminaria de golpe justo donde acaba
       la columna, marcando el corte que se pretende disimular. */
    border-right: 1rem solid transparent;
    border-image: linear-gradient(180deg,
        transparent 0,
        var(--border-soft) 90rem,
        var(--border-soft) calc(100% - 120rem),
        transparent 100%) 1;
}

#pantalla2 > .stepper {
    margin-bottom: 40rem;
}

#contenedorPersonajes p:not(.descrp) {
    font-family: var(--font-mono);
    margin-bottom: 30rem;
    font-size: 26rem !important;
    letter-spacing: 3rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

#contenedorImagenes img {
    width: var(--anchoimagen);
    border-radius: var(--radius-lg);
    border: 1rem solid var(--border-mid);
    box-shadow: var(--shadow-card);
}

#contenedorImagenes .imagen { display: none; }
#contenedorImagenes .imagen.visible { display: flex; }

#descripcionPersonajes {
    margin-top: 20rem;
    min-height: 200rem;
    padding: 28rem 30rem;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

#descripcionPersonajes p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 22rem;
    line-height: 1.6;
    text-align: left;
    color: var(--text-base);
}

#descripcionPersonajes .descrp { display: none; }
#descripcionPersonajes .descrp.visible {
    display: block;
    animation: fadeInUp 0.4s ease both;
}

#botonesPersonajes {
    margin-top: 30rem;
    display: flex;
    justify-content: center;
    gap: 24rem;
}

#botonesPersonajes button {
    flex: 1;
    max-width: 220rem;
    padding: 14rem 18rem;
    font-size: 24rem;
    border-radius: var(--radius-pill);
}

#botonCambioPj {
    background-color: transparent;
    color: var(--text-strong);
    border: 1.5rem solid var(--border-strong);
    box-shadow: none;
}

#botonCambioPj:hover {
    background-color: var(--surface-bright);
    color: var(--text-strong);
    border-color: var(--accent-cyan);
}

#botonSeleccionPj {
    background: var(--grad-cta);
    color: var(--color5);
}

#botonSeleccionPj:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

#contenedorObjetivos {
    flex: 1;
    /* Los elementos flex traen min-width:auto, que impide encogerlos por
       debajo de su contenido. La rejilla de objetivos pide 360rem por
       columna, asi que al aparecer los tres botones este panel se estiraba
       hasta desbordar la pantalla en lugar de dejar que la rejilla se
       reorganizara en menos columnas. */
    min-width: 0;
    padding: 60rem 60rem 80rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* Mismo criterio que la columna izquierda: entra desde transparente.
       Sin backdrop-filter, porque el desenfoque empezaba de golpe en el
       borde superior y dibujaba una linea horizontal bajo el stepper. */
    background: linear-gradient(180deg,
        rgba(28, 28, 85, 0) 0,
        rgba(28, 28, 85, 0.55) 90rem,
        rgba(13, 13, 41, 0.2) calc(100% - 120rem),
        rgba(13, 13, 41, 0) 100%);
}

#contenedorObjetivos p {
    margin: 0 auto 30rem;
    padding: 0 40rem;
    max-width: 1100rem;
    font-family: var(--font-mono);
    font-size: 24rem;
    line-height: 1.65;
    color: var(--text-base);
}

#contenedorObjetivos #contextodisplayP2 {
    padding: 28rem 36rem;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    text-align: left;
}

#seleccionarObjetivos {
    margin: 10rem 0 40rem;
    padding: 16rem 44rem;
    font-size: 26rem;
    background: var(--grad-cta);
    color: var(--color5);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta);
}

#seleccionarObjetivos:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

#objetivosDelPersonaje {
    margin: 20rem 0 40rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360rem, 1fr));
    gap: 28rem;
    width: 100%;
    max-width: 1300rem;
}

#objetivosDelPersonaje button {
    width: 100%;
    min-height: 120rem;
    padding: 22rem 26rem;
    background: var(--surface);
    color: var(--text-strong);
    border: 1.5rem solid var(--border-mid);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: 22rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.5;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(10rem);
    -webkit-backdrop-filter: blur(10rem);
}

#objetivosDelPersonaje button:hover {
    transform: translateY(-4rem);
    background: linear-gradient(135deg, rgba(103, 214, 255, 0.12), rgba(156, 67, 231, 0.18));
    border-color: var(--accent-cyan);
    color: var(--text-strong);
    box-shadow: var(--shadow-card), var(--glow-cyan);
}

#objetivodisplay {
    margin: 10rem auto 30rem !important;
    padding: 20rem 30rem !important;
    max-width: 1000rem;
    background: linear-gradient(135deg, rgba(103, 214, 255, 0.10), rgba(156, 67, 231, 0.14));
    border: 1rem solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 24rem !important;
    font-weight: 500;
    color: var(--text-strong);
}

#objetivodisplay:empty {
    display: none;
}

#cambiarPantalla3 {
    margin: 10rem 0 40rem;
    padding: 18rem 56rem;
    font-size: 26rem;
    background: var(--grad-cta);
    color: var(--color5);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta);
    letter-spacing: 1rem;
}

#cambiarPantalla3:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

/* ===================================================================
   PANTALLA 3  ·  Juego
   =================================================================== */
#pantalla3 {
    padding: 40rem 0 80rem;
    max-width: 1500rem;
    margin: 0 auto;
}

#pantalla3 > * {
    padding: 16rem 60rem;
    white-space: pre-line;
}

#pantalla3 > .stepper {
    padding: 14rem 26rem;
    margin: 30rem auto 30rem;
}

#pantalla3 h1 {
    font-family: var(--font-mono);
    font-size: 26rem;
    letter-spacing: 3rem;
    text-transform: uppercase;
    color: var(--accent-cyan);
    text-align: left;
    margin-top: 30rem;
    padding-left: 60rem;
    padding-right: 60rem;
}

#storylog {
    margin: 20rem auto;
    padding: 30rem 70rem;
    max-width: 1300rem;
    list-style: none;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    text-align: left;
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

#storylog li {
    /* Se fijan arriba y abajo por separado a proposito. Con el atajo
       "padding: 12rem 0" tambien se ponia padding-left a cero, y como este
       selector tiene mas especificidad que .answer / .generated, anulaba el
       hueco de 30rem que reservan para su simbolo. El resultado era que el
       icono y la primera letra se pintaban en el mismo sitio. */
    padding-top: 12rem;
    padding-bottom: 12rem;
    border-bottom: 1rem solid var(--border-soft);
}

#storylog li:last-child { border-bottom: none; }

#situacion-actual {
    text-align: left;
    max-width: 1300rem;
    margin: 10rem auto 20rem !important;
    padding: 30rem 36rem !important;
    background: linear-gradient(135deg, rgba(103, 214, 255, 0.07), rgba(156, 67, 231, 0.07));
    border: 1rem solid var(--border-mid);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 24rem !important;
    line-height: 1.65 !important;
    color: var(--text-strong);
}

#situacion-actual:empty {
    display: none;
}

#infoJokers {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24rem !important;
    color: var(--accent-cyan);
    margin: 0 auto !important;
    text-shadow: 0 0 18rem rgba(103, 214, 255, 0.45);
}

#infoJokers:empty { display: none; }

#input-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24rem;
    max-width: 1300rem;
    margin: 30rem auto !important;
}

#entradatextstory {
    max-width: 1000rem;
    /* Que sea el input quien ceda espacio, no el boton.
       El min-width:0 hace falta porque los elementos flex, por defecto,
       se niegan a encogerse por debajo de su contenido. */
    flex: 1 1 auto;
    min-width: 0;
}

#continuarlahistoria {
    background: var(--grad-cta);
    color: var(--color5);
    font-weight: 700;
    padding: 16rem 40rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-cta);

    /* Sin esto el boton se comprime y "Continuar" se parte por la mitad,
       porque la regla global de button trae word-break: break-word. */
    flex: 0 0 auto;
    white-space: nowrap;
}

#continuarlahistoria:hover {
    color: var(--color5);
    background: var(--grad-cta-h);
}

#recordatorio {
    /* Antes iba al final de la pantalla y necesitaba 50rem de separacion.
       Ahora va justo debajo del stepper, que ya trae su propio margen. */
    margin: 10rem auto 20rem !important;
    max-width: 1300rem;
    padding: 30rem 40rem !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rem;
    background: var(--surface);
    border: 1rem solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12rem);
    -webkit-backdrop-filter: blur(12rem);
}

#recordatorio p {
    margin: 0;
    padding: 16rem 20rem;
    font-family: var(--font-mono);
    font-size: 20rem !important;
    text-align: left;
    color: var(--text-base);
    background: rgba(7, 7, 26, 0.4);
    border-left: 3rem solid var(--accent-cyan);
    border-radius: var(--radius-sm);
    word-break: break-word;
}

#recordatorio p:empty { display: none; }

#replay {
    margin-top: 30rem;
    display: flex;
    justify-content: center;
    gap: 30rem;
}

#joker {
    padding: 14rem 34rem;
    font-size: 22rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #5b52db, #9c43e7);
    color: var(--color5);
    border: 1rem solid var(--border-mid);
}

#joker:hover {
    color: var(--color5);
    background: linear-gradient(135deg, #9c43e7, #5b52db);
}

#reiniciarJuego {
    padding: 14rem 34rem;
    font-size: 22rem;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--text-strong);
    border: 1.5rem solid var(--border-strong);
    box-shadow: none;
}

#reiniciarJuego:hover {
    background-color: var(--surface-bright);
    color: var(--text-strong);
    border-color: var(--accent-cyan);
}

/* ===================================================================
   FEEDBACK · "Generando..." y log de historia
   =================================================================== */
#generando {
    padding: 40rem 80rem !important;
    font-family: var(--font-mono);
    font-size: 30rem !important;
    color: var(--accent-cyan);
    letter-spacing: 2rem;
    text-shadow: 0 0 22rem rgba(103, 214, 255, 0.55);
    animation: pulseGen 1.2s ease-in-out infinite;
}

@keyframes pulseGen {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.generated {
    font-family: var(--font-mono);
    font-size: 22rem;
    line-height: 1.7;
    color: var(--text-base);
    padding-left: 30rem;
    position: relative;
}

.generated::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 18rem;
}

.answer {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24rem;
    line-height: 1.65;
    color: var(--accent-cyan);
    padding-left: 30rem;
    position: relative;
}

.answer::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-cyan);
    font-size: 22rem;
}

/* ===================================================================
   RESPONSIVE  ·  Adaptaciones a pantallas pequeñas
   El rem ya escala con el ancho, pero el layout sí cambia.
   =================================================================== */
@media (max-width: 900px) {

    nav {
        padding: 20rem 30rem;
    }

    #cuerpo {
        flex-direction: column;
        padding: 20rem 0;
    }

    .anunciovertical {
        display: none;
    }

    #mensajeinicial h1 {
        font-size: 90rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        padding: 0 20rem;
        margin-top: 70rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 18rem;
        margin-top: 50rem;
    }

    .stepper {
        gap: 8rem;
        padding: 10rem 14rem;
    }

    .step-label {
        display: none;
    }

    .step-divider {
        width: 22rem;
    }

    #contenidogeneralpantalla2 {
        flex-direction: column;
    }

    #contenedorPersonajes {
        width: 100%;
        border-right: none;
        border-bottom: 1rem solid var(--border-soft);
    }

    #contenedorImagenes img {
        width: 100%;
        max-width: var(--anchoimagen);
    }

    #escribeHistoria,
    #input-contenedor {
        flex-direction: column;
        gap: 16rem;
    }

    #recordatorio {
        grid-template-columns: 1fr;
    }

    #pantalla3 > * {
        padding-left: 30rem;
        padding-right: 30rem;
    }

    #pantalla3 h1 {
        padding-left: 30rem;
        padding-right: 30rem;
    }
}


/* ============================================================
   BOTÓN DE MÚSICA DE FONDO
   ============================================================ */

/*El selector es #, que significa el elemento con este id. */
#botonMusica {
    /*position: fixed saca el botón del flujo normal de la página, deja de ocupar sitio, deja de empujar a sus 
    vecinos, y se ancla a la ventana del navegador.*/
    position: fixed;
    right: 24rem;
    bottom: 24rem;

    /*z-index: 999 decide quién tapa a quién cuando dos cosas se superponen. Número más alto, más cerca del usuario.
    Solo funciona en elementos posicionados, que es el caso al ser fixed.*/
    z-index: 999;

    width: 88rem;
    height: 88rem;
    padding: 0;

    /*Estas tres líneas juntas centran algo perfectamente, en los dos ejes. display: flex convierte el botón en
    contenedor flexible. Entonces align-items: center centra su contenido en vertical y justify-content: center en
     horizontal. El símbolo ♪ queda clavado en el medio.*/
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 40rem;
    /*line-height: 1 es muy sutil. La altura de línea por defecto añade un espacio invisible por encima y por debajo
    de cada letra, pensado para párrafos. En un botón redondo ese espacio descentra el símbolo unos píxeles hacia
    abajo. Poniéndolo a 1, la línea mide exactamente lo que mide la letra y el centrado sale limpio.*/
    line-height: 1;

    color: var(--text-base);
    background: var(--surface-strong);
    border: 1rem solid var(--border-mid);
   
    /*hace el boton redondo*/
    border-radius: 50%;

    /*icono de mano señalando*/
    cursor: pointer;
    opacity: 0.55;
    /*cuando estas propiedades cambian lo hacen con una curva de aceleracion ease en 0,2segundos*/
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#botonMusica:hover {
    opacity: 1;
    background: var(--surface-bright);
    border-color: var(--border-strong);
}


/* ===================================================================
   PAGINAS DE CONTENIDO  ·  sobre, como-jugar, privacidad, contacto
   =================================================================== */

.pagina-contenido {
    max-width: 1100rem;
    margin: 0 auto;
    padding: 60rem 60rem 100rem;
    text-align: left;
}

.titulo-pagina {
    text-align: left;
    font-size: 64rem;
    line-height: 1.1;
    margin-bottom: 16rem;
}

.fecha-pagina {
    font-family: var(--font-mono);
    font-size: 20rem !important;
    color: var(--text-faint);
    margin: 0 0 50rem;
}

.pagina-contenido .entradilla {
    font-size: 30rem !important;
    line-height: 1.6;
    color: var(--text-base);
    padding: 28rem 34rem;
    margin-bottom: 50rem;
    background: var(--surface);
    border-left: 3rem solid var(--accent);
    border-radius: var(--radius-md);
}

.pagina-contenido h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36rem;
    color: var(--text-strong);
    margin: 60rem 0 20rem;
    padding-bottom: 14rem;
    border-bottom: 1rem solid var(--border-soft);
}

.pagina-contenido h3 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 25rem;
    letter-spacing: 1rem;
    color: var(--accent-cyan);
    margin: 40rem 0 14rem;
}

.pagina-contenido p {
    font-size: 24rem !important;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 0 0 22rem;
    text-align: left;
}

.pagina-contenido li {
    font-size: 24rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 14rem;
}

.pagina-contenido ul,
.pagina-contenido ol {
    margin: 0 0 26rem;
    padding-left: 34rem;
}

.pagina-contenido strong {
    color: var(--text-strong);
    font-weight: 600;
}

.pagina-contenido a {
    color: var(--accent-cyan);
    text-decoration: underline;
    text-underline-offset: 3rem;
}

.pagina-contenido a:hover {
    color: var(--text-strong);
}

.cierre {
    margin-top: 60rem;
}

.boton-cta {
    display: inline-block;
    padding: 18rem 44rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26rem;
    color: var(--color5) !important;
    background: var(--grad-cta);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-cta);
    text-decoration: none !important;
}

.boton-cta:hover {
    background: var(--grad-cta-h);
}

/* Tarjeta destacada de la pagina de contacto */
.tarjeta-contacto {
    margin: 0 0 50rem;
    padding: 40rem;
    text-align: center;
    background: var(--surface);
    border: 1rem solid var(--border-mid);
    border-radius: var(--radius-lg);
}

.etiqueta-contacto {
    font-family: var(--font-mono);
    font-size: 20rem !important;
    letter-spacing: 3rem;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10rem !important;
    text-align: center !important;
}

.correo-contacto {
    font-size: 34rem !important;
    margin: 0 !important;
    text-align: center !important;
}


/* ===================================================================
   PIE DE PAGINA
   =================================================================== */

.pie {
    padding: 40rem 60rem 50rem;
    text-align: center;
    border-top: 1rem solid var(--border-soft);
    background: rgba(7, 7, 26, 0.4);
    position: relative;
    z-index: 1;
}

.pie p {
    font-family: var(--font-mono);
    font-size: 20rem !important;
    color: var(--text-faint);
    margin: 0 0 10rem;
}

.pie a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0 6rem;
}

.pie a:hover {
    color: var(--accent-cyan);
}

.pie-copy {
    color: var(--text-faint);
    opacity: 0.7;
}

@media (max-width: 900px) {

    .pagina-contenido {
        padding: 40rem 30rem 80rem;
    }

    .titulo-pagina {
        font-size: 48rem;
    }

    .pie {
        padding: 30rem 20rem 40rem;
    }
}


/* ===================================================================
   AJUSTES MOVIL  ·  acompanan al suelo de escala del :root
   ===================================================================
   Con el suelo de 0.70 que fija el clamp() de arriba, el texto ya es
   legible en movil, pero algunos bloques calibrados para escritorio se
   quedan grandes o no caben. Aqui se reajustan. Este bloque va al final
   a proposito: asi gana a las reglas anteriores y es facil de localizar.
   =================================================================== */

@media (max-width: 900px) {

    /* El nav no cabe en una linea con el logo y tres enlaces:
       el logo pasa a ocupar su propia fila y los enlaces se centran debajo. */
    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6rem;
        padding: 18rem 20rem;
    }

    nav #logo {
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: 6rem;
    }

    nav a:not(#logo) {
        margin-left: 0;
        font-size: 26rem;
        padding: 8rem 16rem;
    }

    /* El titulo de portada a 90rem ocupaba media pantalla */
    #mensajeinicial h1 {
        font-size: 68rem;
    }

    /* Textos que a esta escala se quedaban por debajo de lo legible */
    .eyebrow {
        font-size: 20rem;
    }

    .feature-card p {
        font-size: 25rem;
    }

    .screen-sub {
        font-size: 24rem !important;
    }

    .panel-title {
        font-size: 20rem !important;
    }

    .pagina-contenido p,
    .pagina-contenido li {
        font-size: 26rem !important;
    }

    /* El selector de dificultad se salia por la derecha */
    #dificultad {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ===================================================================
   BOTON DE DICTADO POR VOZ
   ===================================================================
   Lo inserta voz.js junto a cada campo de texto. No existe en el HTML
   porque en los navegadores sin reconocimiento de voz (Firefox) no debe
   aparecer en absoluto.
   =================================================================== */

.boton-voz {
    flex: 0 0 auto;
    width: 64rem;
    height: 64rem;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 28rem;
    line-height: 1;

    background: var(--surface-strong);
    color: var(--text-base);
    border: 1.5rem solid var(--border-mid);
    border-radius: 50%;
    box-shadow: none;

    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.boton-voz:hover {
    background: var(--surface-bright);
    border-color: var(--border-strong);
    color: var(--text-strong);
    transform: none;
}

/* Bloqueado mientras el juego genera. El fondo atenuado lo pone la regla
   general button:disabled; aqui solo se apaga el borde, que no hereda de
   ella, y se corta el latido por si venia de estar escuchando. */
.boton-voz:disabled {
    border-color: rgba(161, 236, 244, 0.10);
    animation: none;
}

.boton-voz:disabled:hover {
    border-color: rgba(161, 236, 244, 0.10);
}

/* Mientras escucha: rojo y latiendo, para que se note que el micro esta abierto */
.boton-voz.escuchando {
    background: #c0392b;
    border-color: #ff6b5a;
    color: #fff;
    animation: latidoVoz 1.2s ease-in-out infinite;
}

.boton-voz.escuchando:hover {
    background: #d8442f;
}

@keyframes latidoVoz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 90, 0.55); }
    50%      { box-shadow: 0 0 0 12rem rgba(255, 107, 90, 0); }
}


/* ===================================================================
   TEXTO LARGO SIN ESPACIOS
   ===================================================================
   Todo lo que escribe el jugador o genera la IA puede traer una palabra
   larguisima sin espacios (una direccion web, una transcripcion pegada,
   un nombre inventado). Sin punto de corte, el navegador la saca fuera
   de la caja: en el registro de eventos el contenido llegaba a ocupar
   2835px dentro de un contenedor de 1263.

   overflow-wrap: break-word solo parte la palabra cuando no cabe de otro
   modo, a diferencia de word-break: break-all, que partiria tambien las
   que si caben y dejaria el texto feo.
   =================================================================== */

#storylog li,
#situacion-actual,
#objetivodisplay,
#contextodisplayP1,
#contextodisplayP2,
#descripcionPersonajes .descrp,
#recordatorio p,
#objetivosDelPersonaje button {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Red de seguridad: si algo se escapa pese a lo anterior, el registro lo
   recorta en vez de estirar la pagina entera. */
#storylog {
    overflow-x: hidden;
}


/* ===================================================================
   CAMPOS DE ESCRITURA
   ===================================================================
   Eran <input type="text">, que es de una sola linea: al escribir una
   accion larga el texto se desplazaba y solo se veia el final. Ahora son
   <textarea> que crecen en alto segun lo que escribes (lo ajusta juego.js),
   asi el jugador ve su frase entera antes de enviarla.
   =================================================================== */

#entradatextcontext,
#entradatextstory {
    resize: none;          /* el alto lo controla el JS, no el tirador */
    overflow-y: hidden;    /* sin barra interna: crece en su lugar */
    line-height: 1.45;
    max-height: 220rem;    /* a partir de aqui si aparece barra */
    overflow-wrap: break-word;

    /* Suelo de una linea: el campo nunca debe verse aplastado.
       Hace falta porque al cargar la pagina estos campos estan dentro de
       pantallas ocultas, y un elemento oculto mide 0 de alto. */
    min-height: calc(1.45em + 28rem + 3rem);
}

/* Al pasar de una sola linea a varias, el boton de al lado debe quedar
   alineado arriba y no centrado respecto a un campo alto. */
#escribeHistoria,
#input-contenedor {
    align-items: flex-start;
}

/* El microfono y el boton de enviar recuperan su alineacion con la
   primera linea del campo. */
#escribeHistoria .boton-voz,
#input-contenedor .boton-voz {
    margin-top: 2rem;
}


/* Unidad de anuncio dentro de un texto (paginas de contenido).
   Se separa bien del contenido para que no se confunda con el articulo. */
.anuncio-articulo {
    margin: 60rem auto;
    max-width: 900rem;
    min-height: 100px;
}