/* ---------- Entrada (solo la primera vez) ---------- */
html.con-intro, html.con-intro body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 200; background: #050507; color: var(--texto); overflow: hidden; isolation: isolate; }
.intro[hidden], .intro .bandeja[hidden], .intro .pista[hidden] { display: none; }
.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background 1s;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgb(var(--acento) / .18), transparent 70%); }
.intro .grano { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: radial-gradient(rgba(255,255,255,.9) .7px, transparent 1px) 0 0 / 4px 4px; }
.escena-i { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px 24px 124px; visibility: hidden; } /* abajo, sitio para la pista y los puntos */
.escena-i.activa { visibility: visible; }
.intro .saltar { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 24px; z-index: 10; min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: var(--texto-2); background: rgba(16,17,22,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--borde); } /* el fondo de la bandeja: legible sobre cualquier póster */
.intro .saltar:hover { color: var(--texto); }
/* Aspa de cierre: visible en todas las escenas y anchos (equivale a «Más tarde») */
.intro .cerrar-i { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 24px; z-index: 10; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--texto-2); background: rgba(16,17,22,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--borde); transition: color .2s, background .2s; }
.intro .cerrar-i:hover { color: var(--texto); background: rgba(30,31,38,.9); }
.intro .cerrar-i svg { width: 20px; height: 20px; }
.intro .puntos { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 10; display: flex; gap: 8px; }
.intro .puntos i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.2); transition: width .5s var(--suave), background .5s; }
.intro .puntos i.on { width: 26px; background: rgb(var(--acento)); }
.intro .pista { position: absolute; left: 50%; bottom: max(56px, calc(env(safe-area-inset-bottom) + 30px)); translate: -50% 0; z-index: 10; font-size: 13px; color: var(--texto-3);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.intro .pista span { width: 1px; height: 34px; background: linear-gradient(var(--texto-3), transparent); position: relative; overflow: hidden; }
.intro .pista span::after { content: ""; position: absolute; inset: 0; background: var(--texto); animation: gota 2.2s var(--suave) infinite; }
.intro .lema { font: 600 clamp(30px, 4.4vw, 64px)/1.04 var(--titulos); letter-spacing: -.02em; max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.intro .lema .linea-i { display: block; overflow: hidden; padding-bottom: .06em; }
.intro .lema .linea-i > span { display: inline-block; }
.intro .bajo { margin-top: 18px; color: var(--texto-2); font-size: 16px; }

/* 1. Tinta */
.tinta svg { width: min(46vh, 70vw); height: auto; overflow: visible; }
.tinta text { font: 900 200px/1 var(--jp); fill: transparent; stroke: var(--texto); stroke-width: 2.2; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.tinta .lectura { margin-top: 6px; font: 500 13px/1 var(--jp); letter-spacing: .5em; color: rgb(var(--acento)); }

/* 2. Túnel de la temporada */
.tunel .camara { position: absolute; inset: 0; z-index: 0; perspective: 900px; perspective-origin: 50% 50%; pointer-events: none; }
.tunel .vuelo { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.tunel .vuelo img { position: absolute; width: 180px; max-width: none; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; opacity: 0; box-shadow: 0 30px 80px -20px #000; }
.tunel .centro { position: relative; z-index: 2; }
.tunel .centro p { text-shadow: 0 2px 20px #000, 0 0 8px #000; }
.tunel .cifra-g { display: block; font: 700 clamp(90px, 16vw, 220px)/.9 var(--titulos); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, rgb(var(--acento))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tunel .centro p { color: var(--texto-2); font-size: clamp(16px, 1.6vw, 20px); margin-top: 8px; }
.tunel .centro b { color: var(--texto); font-weight: 600; }

/* 3. Lo que prometemos */
.promesas { align-content: center; gap: 0; }
.promesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; width: min(1080px, 92vw); padding: 26px 0; border-top: 1px solid rgba(255,255,255,.08); text-align: left; }
.promesa:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.promesa h3 { font: 600 clamp(30px, 4vw, 58px)/1 var(--titulos); letter-spacing: -.02em; }
.promesa h3 small { display: block; font: 500 13px/1 var(--jp); letter-spacing: .4em; color: rgb(var(--acento)); margin-bottom: 12px; }
.promesa .prueba { justify-self: end; text-align: right; color: var(--texto-2); }
.reloj-g { font: 600 clamp(36px, 4.4vw, 64px)/1 var(--titulos); font-variant-numeric: tabular-nums; color: #f2c230; }
.prueba small { display: block; font-size: 13px; color: var(--texto-3); margin-top: 8px; }
.cambia { font: 600 clamp(20px, 2.2vw, 30px)/1.15 var(--titulos); color: var(--texto); }
.logos-es { display: flex; gap: 12px; justify-content: flex-end; }
.logos-es img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 10px 30px -10px #000; }

/* 4. Ritual: elegir tres */
.ritual { align-content: start; overflow-y: auto; padding: 84px 24px 150px; overscroll-behavior: contain; }
.ritual .lema { max-width: 20ch; }
.nombre { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 6px 6px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--borde); }
.nombre label { font-size: 14px; color: var(--texto-3); }
.nombre input { width: 170px; padding: 9px 12px; border-radius: 10px; border: 0; background: rgba(255,255,255,.07); color: var(--texto); font: 500 15px var(--cuerpo); }
.nombre input:focus { outline: 2px solid rgb(var(--marca)); }
.estante { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; width: min(1240px, 100%); margin: 34px auto 0; }
.eleccion { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--fondo-3); transition: transform .45s var(--suave), filter .4s, box-shadow .4s; }
.eleccion img { width: 100%; height: 100%; object-fit: cover; }
.eleccion span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: left;
  background: linear-gradient(0deg, rgba(5,5,7,.92), transparent); }
.eleccion b { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: rgb(var(--c)); color: rgb(var(--t)); scale: 0; transition: scale .4s var(--suave); }
.eleccion:hover { transform: translateY(-6px); }
.eleccion[aria-pressed="true"] { box-shadow: 0 0 0 3px rgb(var(--c)), 0 20px 50px -16px rgb(var(--c) / .8); transform: translateY(-6px) scale(1.03); }
.eleccion[aria-pressed="true"] b { scale: 1; }
.estante.lleno .eleccion[aria-pressed="false"] { filter: grayscale(.8) brightness(.5); }
.bandeja { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 12; display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px; border-radius: 22px; background: rgba(16,17,22,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--borde); }
.bandeja .hueco { width: 40px; height: 58px; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,.2); overflow: hidden; flex: none; }
.bandeja .hueco img { width: 100%; height: 100%; object-fit: cover; }
.bandeja .btn[disabled] { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.bandeja .entrar { white-space: nowrap; } /* «Elige 3 más» en una línea también a 320 px */
.bandeja .luego { font-size: 13px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 6px; flex: none; }

/* ---------- Saludo (todas las visitas) ---------- */
/* Sin altura de pantalla completa: el contenido empieza bajo la barra y la portada asoma debajo */
.saludo { position: relative; display: grid; grid-template-columns: minmax(0, 560px); column-gap: 64px; min-height: 680px; align-items: start; overflow: hidden; isolation: isolate;
  padding: 96px 96px 24px calc(var(--lateral) + 96px); }
.saludo-izq { padding-top: 22px; }
.saludo-der { display: grid; gap: 14px; position: relative; z-index: 1; max-width: 420px; margin-top: 28px; } /* debajo del saludo: la derecha es para la habitación y sus pósters */
.sabias, .pulso { display: block; border-radius: 20px; padding: 20px 22px; background: rgba(16,17,22,.62); border: 1px solid var(--borde); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sabias h2, .pulso h2 { display: flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--cuerpo); }
.sabias h2 .jp { font-size: 12px; letter-spacing: .2em; color: rgb(var(--acento)); }
.sabias .tipo { display: inline-flex; gap: 7px; margin-top: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.sabias .tipo .jp { color: var(--texto-2); letter-spacing: 0; }
.sabias p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--texto); text-wrap: pretty; }
.sabias small { display: block; margin-top: 12px; font-size: 12px; color: var(--texto-3); }
.pulso { transition: border-color .3s, background .3s; }
.pulso:hover { border-color: rgb(var(--acento) / .45); background: rgba(22,23,30,.75); }
.pulso h2 i { width: 8px; height: 8px; border-radius: 50%; background: #57d38c; box-shadow: 0 0 0 0 rgba(87,211,140,.6); animation: latido 2s infinite; }
.pulso h2 .ejemplo { margin-left: auto; }
.pulso ul { list-style: none; display: grid; gap: 10px; margin: 14px 0 12px; }
.pulso li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; }
.pulso li img { width: 30px; height: 42px; object-fit: cover; border-radius: 6px; }
.pulso li b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20ch; }
.pulso li small { font-size: 12px; color: var(--texto-3); }
.pulso .ir { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: rgb(var(--acento)); }
@keyframes latido { 70% { box-shadow: 0 0 0 8px rgba(87,211,140,0); } 100% { box-shadow: 0 0 0 0 rgba(87,211,140,0); } }
.saludo .fondo-s { z-index: -3; inset: 0 0 -8%; } /* la habitación del gato (comun.css: .fondo-e); más alta para el paralaje al bajar */
.saludo::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 60% 55% at 70% 35%, rgb(var(--acento) / .22), transparent 70%), linear-gradient(90deg, var(--fondo) 8%, rgba(8,9,13,.45) 60%, rgba(8,9,13,.2)), linear-gradient(0deg, var(--fondo) 4%, transparent 50%); }
/* de día y al atardecer el velo es más fino, para que se vea la luz que entra; el texto conserva su sombra */
@media (min-width: 761px) { .saludo[data-luz]::before { background: radial-gradient(ellipse 60% 55% at 70% 35%, rgb(var(--acento) / .12), transparent 70%), linear-gradient(90deg, rgba(8,9,13,.92) 6%, rgba(8,9,13,.5) 38%, rgba(8,9,13,.12) 62%, transparent), linear-gradient(0deg, var(--fondo) 4%, transparent 45%); } }
/* En escritorio, la tele entre el texto y las tarjetas: la habitación algo más cerca y con el borde derecho
   de la pantalla (62,11 % + 8,77 % = 70,9 % de la imagen) a 30 px de la columna de tarjetas (96 px de margen + 380 px).
   El clamp evita que la imagen deje de cubrir el fondo por algún lado. */
@media (min-width: 761px) {
  .saludo .habitacion { --w: calc(max(100cqw, 100cqh * var(--proporcion)) * 1.12); --h: calc(var(--w) / var(--proporcion)); top: 0; /* arriba del todo: los pósters enteros */
    left: clamp(calc(100cqw - var(--w)), calc(100cqw - 40px - var(--w) * .85), 0px); } /* la pared de los pósters, la tele y la mesa (x 1040-1630 de 1916) a la derecha */
}
.saludo[data-luz] .saludo-izq { text-shadow: 0 2px 18px rgba(8,9,13,.7); }
.saludo .dia-jp { display: none; position: absolute; right: 6vw; top: 110px; z-index: -1; writing-mode: vertical-rl; font: 900 clamp(90px, 14vh, 170px)/1 var(--jp);
  color: rgb(var(--acento) / .07); -webkit-text-stroke: 1.5px rgba(255,255,255,.16); pointer-events: none; }
.saludo .fecha-s { font-size: 14px; color: var(--texto-2); letter-spacing: .02em; }
.saludo .fecha-s .jp { color: rgb(var(--acento)); margin-right: 10px; }
.saludo h1 { font: 600 clamp(44px, 5.4vw, 92px)/.92 var(--titulos); letter-spacing: -.035em; margin: 12px 0 20px; max-width: 13ch; }
.saludo h1 .palabra { display: inline-block; white-space: nowrap; }
.saludo h1 .letra { display: inline-block; }
.saludo .hoy { font-size: clamp(18px, 1.7vw, 23px); color: var(--texto-2); max-width: 42ch; text-wrap: pretty; min-height: 2lh; } /* sitio reservado: el texto llega con AniList */
.saludo[data-sigues] .tuyas { min-height: 80px; } /* lo que sale hoy de lo que sigues */
.saludo .hoy b { color: var(--texto); font-weight: 600; }
.saludo .hoy a { color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tuyas { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.tuya { display: grid; grid-template-columns: 46px auto; gap: 14px; align-items: center; padding: 8px 18px 8px 8px; border-radius: 16px;
  background: var(--cristal); border: 1px solid var(--borde); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .4s var(--suave), border-color .3s; }
.tuya:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); }
.tuya img { width: 46px; height: 64px; object-fit: cover; border-radius: 9px; }
.tuya b { display: block; font-weight: 600; font-size: 14.5px; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuya small { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tuya small.ya { color: #57d38c; }
.repetir { color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

@media (max-width: 1100px) { .estante { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px) {
  .promesa { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .promesa .prueba { justify-self: start; text-align: left; }
  .logos-es { justify-content: flex-start; }
  .tunel .vuelo img { width: 120px; }
  .estante { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .ritual { padding: 74px 16px 150px; }
  .nombre input { width: 130px; }
  .bandeja { width: calc(100% - 24px); justify-content: space-between; gap: 8px; padding: 8px 8px 8px 10px; }
  .bandeja .hueco { width: 34px; height: 50px; }
  .bandeja .luego { padding: 0 4px; } /* visible también en el móvil: es la salida si no quieres elegir */
  .intro .cerrar-i { left: 16px; }
  .intro .saltar { right: 16px; }
  /* la habitación es una franja arriba, con la tele y el gato a la vista; el texto va debajo, sobre oscuro */
  .saludo { grid-template-columns: minmax(0, 1fr); padding: 226px 16px 8px; min-height: 0; }
  .saludo-der { max-width: none; margin-top: 0; }
  .saludo .fondo-s { inset: 0 0 auto; height: 300px; }
  .saludo::before { background: radial-gradient(ellipse 80% 40% at 70% 30%, rgb(var(--acento) / .16), transparent 70%),
    linear-gradient(180deg, rgba(8,9,13,.55), transparent 90px, transparent 170px, var(--fondo) 290px); }
  .saludo-der { padding: 8px 16px 0; }
  .saludo .hoy { min-height: 3lh; }
  .saludo .dia-jp { right: -6px; top: 80px; font-size: 90px; }
  .tuya b { max-width: 18ch; }
  /* tus series de hoy en un carril: siempre una fila, así el sitio reservado (80 px) no crece al llegar los datos */
  .tuyas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .tuya { flex: none; scroll-snap-align: start; }
}
@media (max-width: 360px) { /* a 320 px, tres huecos, «Más tarde» y «Elige 3 más» en una línea dentro de la bandeja */
  .bandeja { gap: 6px; padding-left: 8px; }
  .bandeja .hueco { width: 28px; height: 42px; }
  .bandeja .entrar { padding-inline: 12px; font-size: 14px; }
}

/* Escritorio ancho: la habitación baja 44 px para que la campana no tape el póster de la derecha, y el velo de la izquierda es más fuerte
   porque ahora la luz de la ventana cae detrás del texto */
@media (min-width: 1200px) {
  /* La habitación ya no crece con el alto del saludo (734 px = el alto mínimo, 680 px, más el 8 % del paralaje): así el póster de la izquierda
     queda siempre en 100% - 601 px del saludo (hasta 1728 px), con o sin «Continúa viendo», y la columna del texto acaba 24 px antes */
  .saludo { grid-template-columns: minmax(0, min(560px, 100% - 530px)); }
  .saludo .habitacion { top: 44px; --w: calc(max(100cqw, 734px * var(--proporcion)) * 1.12); }
  .saludo::before { background: radial-gradient(ellipse 50% 55% at 75% 35%, rgb(var(--acento) / .18), transparent 70%),
    linear-gradient(180deg, var(--fondo) 44px, transparent 110px),
    linear-gradient(90deg, var(--fondo) 8%, rgba(8,9,13,.75) 38%, rgba(8,9,13,.2) 56%, transparent 64%), linear-gradient(0deg, var(--fondo) 4%, transparent 40%); }
  .saludo[data-luz]::before { background: radial-gradient(ellipse 50% 55% at 75% 35%, rgb(var(--acento) / .1), transparent 70%),
    linear-gradient(180deg, var(--fondo) 44px, transparent 110px),
    linear-gradient(90deg, rgba(8,9,13,.95) 8%, rgba(8,9,13,.82) 40%, rgba(8,9,13,.25) 56%, transparent 64%), linear-gradient(0deg, var(--fondo) 4%, transparent 40%); }
}

/* Entre móvil y escritorio ancho no caben el texto y la habitación lado a lado: la habitación arriba, entera, y el texto debajo */
@media (min-width: 761px) and (max-width: 1199px) {
  .saludo { min-height: 0; padding-top: 470px; grid-template-columns: minmax(0, 640px); }
  .saludo .fondo-s { inset: 0 0 auto; height: 500px; }
  .saludo .habitacion { --w: calc(100cqh * var(--proporcion) * 1.3); --h: calc(var(--w) / var(--proporcion)); top: 64px; /* debajo de la barra de arriba */
    left: clamp(calc(100cqw - var(--w)), calc(100cqw - 24px - var(--w) * .86), 0px); }
  .saludo::before, .saludo[data-luz]::before { background: radial-gradient(ellipse 60% 50% at 70% 35%, rgb(var(--acento) / .14), transparent 70%),
    linear-gradient(180deg, var(--fondo) 64px, transparent 120px, transparent 360px, var(--fondo) 500px); }
}

/* ---------- Tu cuarto (cuarto.js): tus tres favoritas en los pósters de la pared ----------
   En tanto por ciento de la imagen, así caen en su marco con cualquier encuadre y en noche, día y tarde. */
.saludo::before { pointer-events: none; }
.cuarto { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cuarto ul { list-style: none; }
.cuarto a { pointer-events: auto; }
.poster-c { position: absolute; }
.poster-c a { position: absolute; inset: 0; }
.poster-c img, .poster-c a::before, .poster-c a::after { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--recorte); }
/* la portada con la luz de la escena (más tenue de noche) y algo de grano; lo que hay delante sigue delante */
.poster-c img { object-fit: cover; opacity: 0; transition: opacity .8s var(--suave), filter .4s; filter: brightness(.62) saturate(.75) contrast(.95); }
.poster-c img.puesta { opacity: 1; }
.poster-c a::after { content: ""; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(180deg, rgb(110 120 200 / .5), rgb(50 56 120 / .6)); }
.poster-c a::before { content: ""; z-index: 1; pointer-events: none; opacity: .3; mix-blend-mode: overlay; box-shadow: inset 0 0 8px rgb(0 0 0 / .7);
  background: radial-gradient(rgb(255 255 255 / .7) .6px, transparent 1px) 0 0 / 3px 3px; }
.poster-c a:hover img, .poster-c a:focus-visible img { filter: brightness(.72) saturate(.8); }
.saludo[data-luz="dia"] .poster-c img { filter: brightness(.95) saturate(.8) sepia(.12); }
.saludo[data-luz="dia"] .poster-c a::after { background: linear-gradient(180deg, rgb(235 225 210 / .9), rgb(200 195 200 / .9)); }
.saludo[data-luz="tarde"] .poster-c img { filter: brightness(.82) saturate(.85) sepia(.25); }
.saludo[data-luz="tarde"] .poster-c a::after { background: linear-gradient(180deg, rgb(250 190 150 / .8), rgb(170 130 140 / .85)); }
.poster-c a:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
@media (max-width: 760px) { .tres-c { display: none; } } /* en el móvil la franja de la habitación no llega a los pósters; tus tres están en tu perfil y dan «Para ti» */