/* ============================================================================
   VISTAS — el interior de cada lugar.
   ========================================================================== */

.bloque { margin-bottom: var(--sp-7); }
.intro { max-width: var(--ancho-lectura); margin-bottom: var(--sp-5); font-size: var(--t-sm); }

.chip {
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid rgba(214,207,228,.16);
  background: rgba(26,23,48,.6);
  color: var(--mist-dim);
  font-family: var(--util);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: all var(--d-sm) var(--ease-out);
}
.chip:hover { border-color: rgba(233,199,132,.4); color: var(--gold-soft); }
.chip.activo {
  border-color: rgba(233,199,132,.6);
  background: linear-gradient(180deg, rgba(233,199,132,.2), rgba(233,199,132,.06));
  color: var(--gold-soft);
  box-shadow: var(--halo-oro);
}

.icono-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(214,207,228,.14);
  background: rgba(18,16,31,.6);
  color: var(--mist-faint);
  cursor: pointer;
  transition: all var(--d-sm) var(--ease-back);
}
.icono-btn:hover { color: var(--gold); border-color: rgba(233,199,132,.4); }
.icono-btn.activo { color: var(--rose); border-color: rgba(222,139,132,.55); box-shadow: var(--halo-rosa); }
.icono-btn.activo .ico { fill: currentColor; }

/* ── NOSOTROS ────────────────────────────────────────────────────────────── */

.portada { text-align: center; padding-top: var(--sp-4); }

.reloj {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3) var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-3);
  perspective: 700px;
}
.reloj-celda {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(34,29,60,.5), rgba(18,16,31,.35));
  border: 1px solid rgba(233,199,132,.10);
}
.reloj-n {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(233,199,132,.25);
}
.reloj-u {
  font-family: var(--util);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist-faint);
}
.portada-pie { font-style: italic; font-size: var(--t-sm); }

.frase {
  margin: 0 0 var(--sp-4);
  padding: 0;
  border: 0;
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.35;
  color: var(--mist);
  max-width: var(--ancho-lectura);
}
.frase .pal { display: inline-block; }
.frase::first-letter { font-size: 1.6em; color: var(--gold); }

.proximo { padding: var(--sp-5); }
.proximo-que { font-size: var(--t-lg); color: var(--gold-soft); margin: 4px 0 2px; }
.proximo-cuando { font-family: var(--util); font-size: var(--t-xs); color: var(--mist-dim); margin-bottom: var(--sp-3); }
.proximo-barra {
  height: 3px;
  border-radius: 2px;
  background: rgba(214,207,228,.12);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.proximo-barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--gold-soft));
  box-shadow: var(--halo-oro);
  animation: llenar 1.6s var(--ease-out) both;
}
@keyframes llenar { from { transform: scaleX(0); transform-origin: left; } }
.proximo-dias { font-family: var(--util); font-size: var(--t-sm); letter-spacing: .06em; }

.hitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.hito { padding: var(--sp-4) var(--sp-2); text-align: center; }
.hito b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-lg);
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.hito span { font-family: var(--util); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-faint); }

.animo-fila { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.historia .capitulo {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-5);
  border-left: 1px solid rgba(233,199,132,.18);
}
.historia .capitulo::before {
  content: "";
  position: absolute;
  left: -5px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: var(--halo-oro);
}
.historia h3 { font-size: var(--t-lg); color: var(--mist); font-style: italic; margin: 2px 0 4px; }

/* ── RAZONES ─────────────────────────────────────────────────────────────── */

.razones-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }
.mazo-cuenta { color: var(--gold-deep); }

.mazo {
  position: relative;
  height: min(52svh, 420px);
  margin-bottom: var(--sp-5);
  perspective: 1200px;
}
.razon {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  cursor: grab;
  touch-action: none;
  transform: translateY(calc(var(--p) * 10px)) scale(calc(1 - var(--p) * 0.04));
  opacity: calc(1 - var(--p) * 0.22);
  transition: transform var(--d-md) var(--ease-out), opacity var(--d-md);
}
.razon.arrastrando { cursor: grabbing; transition: none; }
.razon-num { font-family: var(--display); color: var(--gold-deep); font-size: var(--t-lg); }
.razon-txt {
  align-self: center;
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.32;
  color: var(--mist);
}
.razon-txt .pal { display: inline-block; }
.razon-pie { display: flex; align-items: center; justify-content: space-between; }
.razon-pie .tenue { font-family: var(--util); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.razones-acciones { display: flex; gap: var(--sp-3); justify-content: center; }

/* ── CARTAS ──────────────────────────────────────────────────────────────── */

.sobres { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .sobres { grid-template-columns: 1fr 1fr; } }

.sobre {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  min-height: 150px;
  text-align: left;
  border-radius: var(--r-m);
  border: 1px solid rgba(233,199,132,.18);
  background:
    linear-gradient(160deg, rgba(42,34,70,.9), rgba(20,17,36,.95));
  color: var(--mist);
  cursor: pointer;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow var(--d-md) var(--ease-out), border-color var(--d-md);
}
.sobre:hover { box-shadow: var(--sombra-alta), var(--halo-oro); border-color: rgba(233,199,132,.45); }

/* La solapa del sobre, en diagonal */
.sobre-solapa {
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  background: linear-gradient(170deg, rgba(58,47,95,.85), rgba(30,25,52,.4));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform var(--d-lg) var(--ease-out);
}
.sobre:hover .sobre-solapa { transform: rotateX(28deg); }
.sobre-lacre {
  position: absolute;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #C9564E, #7E2E2C);
  color: rgba(255,225,215,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 -3px 8px rgba(0,0,0,.35);
  transition: transform var(--d-md) var(--ease-back);
}
.sobre-lacre .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.sobre:hover .sobre-lacre { transform: translate(-50%, -50%) scale(1.08) rotate(-8deg); }
.sobre-ocasion {
  position: relative;
  margin-top: auto;
  padding-top: 62px;
  font-size: var(--t-md);
  font-style: italic;
  color: var(--gold-soft);
}
.sobre-estado { position: relative; }
.sobre.leido { opacity: .72; }
.sobre.leido .sobre-lacre { background: radial-gradient(circle at 40% 35%, #4A4368, #2A2545); color: var(--mist-faint); }
.sobre.leido .sobre-estado { color: var(--brass); }

.hoja-carta { background: linear-gradient(172deg, #1C1832, #0C0A18); }
.carta-papel {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-s);
  background:
    linear-gradient(180deg, rgba(247,240,224,.96), rgba(238,228,208,.94));
  color: #2A2218;
  box-shadow: var(--sombra-alta);
  font-size: var(--t-md);
  line-height: 1.65;
}
.carta-ocasion { color: #8A6A38; margin-bottom: var(--sp-4); }
.carta-texto p { margin: 0 0 1.1em; }
.carta-texto p:first-child::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .86;
  padding: 6px 10px 0 0;
  color: #9B6F2E;
  font-style: italic;
}
.carta-cierre { font-size: var(--t-lg); color: #6E3F3C; margin-top: var(--sp-5); }
.carta-fecha { color: #8C8272; font-family: var(--util); font-size: var(--t-xs); }

/* ── RECUERDOS ───────────────────────────────────────────────────────────── */

.recuerdos-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.recuerdos-cab .intro { margin: 0; }

.linea { position: relative; padding-left: var(--sp-5); }
.linea::before {
  content: "";
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(233,199,132,.35) 12%, rgba(233,199,132,.35) 88%, transparent);
}
.recuerdo {
  position: relative;
  margin-bottom: var(--sp-6);
  cursor: pointer;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.recuerdo-punto {
  position: absolute;
  left: calc(var(--sp-5) * -1 + 1px);
  top: 18px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: var(--halo-oro);
}
.polaroid {
  display: inline-block;
  padding: 10px 10px 42px;
  background: linear-gradient(180deg, #F3EDE0, #E4DBC9);
  border-radius: 3px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-1.6deg);
  transition: transform var(--d-md) var(--ease-out);
  max-width: 260px;
}
.recuerdo.der .polaroid { transform: rotate(1.8deg); }
.recuerdo:hover .polaroid { transform: rotate(0) scale(1.03); }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: #241F3A; }
.polaroid-pie { display: block; margin-top: 10px; color: #3B3227; font-size: var(--t-md); text-align: center; }
.recuerdo-solo-texto {
  padding: var(--sp-4);
  border-radius: var(--r-m);
  background: var(--cristal);
  border: var(--cristal-borde);
}
.recuerdo-solo-texto h3 { font-size: var(--t-md); font-style: italic; color: var(--gold-soft); margin-bottom: 4px; }
.recuerdo-fecha { display: block; margin-top: 8px; }

.recuerdo-ficha { display: grid; gap: var(--sp-3); }
.recuerdo-foto { width: 100%; border-radius: var(--r-m); box-shadow: var(--sombra-media); }
.ficha-acciones { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--sp-2); }
.etq { font-family: var(--util); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mist-faint); margin-top: var(--sp-3); }
.campo {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-m);
  border: 1px solid rgba(214,207,228,.16);
  background: rgba(10,9,20,.6);
  color: var(--mist);
  font-family: var(--util);
  transition: border-color var(--d-sm), box-shadow var(--d-sm);
}
.campo:focus { outline: none; border-color: rgba(233,199,132,.5); box-shadow: var(--halo-oro); }
textarea.campo { resize: vertical; line-height: 1.5; }
.form-acciones { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }
.foto-previa {
  display: grid;
  place-items: center;
  min-height: 130px;
  border-radius: var(--r-m);
  border: 1px dashed rgba(214,207,228,.2);
  background: rgba(10,9,20,.4);
  overflow: hidden;
}
.foto-previa.con-foto { border-style: solid; }
.foto-previa img { width: 100%; max-height: 260px; object-fit: cover; }

/* ── PLANES ──────────────────────────────────────────────────────────────── */

.tombola-ventana {
  position: relative;
  height: 132px;
  margin: var(--sp-3) 0 var(--sp-4);
  border-radius: var(--r-l);
  border: 1px solid rgba(233,199,132,.2);
  background: linear-gradient(180deg, rgba(12,10,24,.9), rgba(26,23,48,.9));
  overflow: hidden;
  box-shadow: inset 0 14px 22px -14px #000, inset 0 -14px 22px -14px #000;
}
.tombola-ventana::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,11,.85), transparent 28%, transparent 72%, rgba(5,4,11,.85));
}
.tombola-fila {
  height: 132px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 var(--sp-5);
  text-align: center;
}
.tombola-txt { font-size: var(--t-md); font-style: italic; color: var(--gold-soft); line-height: 1.25; }
.tombola-acciones { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.pendientes { display: grid; gap: var(--sp-3); }
.pendiente {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-m);
  background: var(--cristal);
  border: var(--cristal-borde);
  transition: opacity var(--d-md), transform var(--d-md) var(--ease-out);
}
.pendiente.hecho { opacity: .5; }
.pendiente.hecho .pendiente-txt p { text-decoration: line-through; text-decoration-color: var(--brass); }
.pendiente-txt p { margin: 2px 0 0; font-size: var(--t-sm); }
.marcar {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(233,199,132,.22);
  background: rgba(10,9,20,.5);
  color: var(--gold-deep);
  cursor: pointer;
  transition: all var(--d-sm) var(--ease-back);
}
.pendiente.hecho .marcar { color: var(--rose); border-color: rgba(222,139,132,.5); }
.marcar:active { transform: scale(.88); }

.catalogo { display: grid; gap: var(--sp-5); }
.catalogo-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin-top: 6px;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  background: rgba(26,23,48,.5);
  color: var(--mist);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--d-sm) var(--ease-out);
}
.catalogo-item:hover { border-color: rgba(233,199,132,.35); background: rgba(34,29,60,.8); transform: translateX(4px); }

/* ── JUGAR ───────────────────────────────────────────────────────────────── */

.mapa-juegos { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .mapa-juegos { grid-template-columns: 1fr 1fr; } }

.juego-ficha {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--sp-5);
  min-height: 160px;
  text-align: left;
  cursor: pointer;
  color: var(--mist);
  align-content: end;
}
.ficha-halo {
  position: absolute;
  inset: -40% 40% 55% -30%;
  background: radial-gradient(circle, rgba(110,75,245,.35), transparent 70%);
  filter: blur(18px);
  opacity: .8;
  transition: transform var(--d-lg) var(--ease-out), opacity var(--d-lg);
}
.juego-ficha:nth-child(2n) .ficha-halo { background: radial-gradient(circle, rgba(44,199,192,.3), transparent 70%); }
.juego-ficha:nth-child(3n) .ficha-halo { background: radial-gradient(circle, rgba(242,120,155,.3), transparent 70%); }
.juego-ficha:hover .ficha-halo { transform: translate(18%, 12%) scale(1.25); opacity: 1; }
.ficha-nombre { position: relative; font-size: var(--t-lg); font-style: italic; color: var(--gold-soft); }
.ficha-pista { position: relative; font-size: var(--t-sm); }
.ficha-pie, .ficha-premio { position: relative; }
.ficha-premio { color: var(--gold-deep); }

/* El juego ocupa toda la pantalla, sin distracciones. */
.juego {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr;
  background: radial-gradient(90% 70% at 50% 30%, rgba(14,12,28,.92), rgba(5,4,11,.97));
  backdrop-filter: blur(4px);
}
.juego-titulo {
  padding: calc(var(--safe-t) + 18px) 64px 10px var(--sp-5);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--gold-soft);
}
.juego-lienzo { position: relative; overflow: hidden; touch-action: none; }
.juego-salir {
  position: absolute;
  top: calc(var(--safe-t) + 14px); right: 14px;
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(214,207,228,.16);
  background: rgba(10,9,20,.6);
  color: var(--mist-dim);
  cursor: pointer;
}
.juego-salir:hover { color: var(--gold); }

/* ── El premio ───────────────────────────────────────────────────────────── */

.hoja-premio { text-align: center; }
.premio { display: grid; gap: var(--sp-3); justify-items: center; padding-top: var(--sp-4); }
.premio-titulo { font-size: var(--t-lg); font-style: italic; color: var(--gold-soft); }
.premio-txt {
  margin: 0;
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.34;
  max-width: 34ch;
}
.premio-txt .pal { display: inline-block; }
.premio-foto { max-width: 240px; border-radius: var(--r-m); box-shadow: var(--sombra-alta); }
.premio-pie { font-size: var(--t-lg); color: var(--rose); }
.premio .btn { margin-top: var(--sp-4); }

/* ── Sorpresas escondidas ────────────────────────────────────────────────── */

.carta-escarcha {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  margin-bottom: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  text-align: left;
  border-radius: var(--r-l);
  border: 1px solid rgba(233,199,132,.35);
  background:
    linear-gradient(135deg, rgba(233,199,132,.22), rgba(244,226,190,.10) 40%, rgba(110,75,245,.16)),
    linear-gradient(180deg, rgba(34,29,60,.9), rgba(18,16,31,.9));
  color: var(--mist);
  cursor: pointer;
  overflow: hidden;
}
.escarcha-brillo {
  position: absolute;
  inset: -60% -20%;
  background: conic-gradient(from 0deg, transparent, rgba(244,226,190,.35), transparent 40%);
  animation: escarchar 7s linear infinite;
  opacity: .5;
}
@keyframes escarchar { to { transform: rotate(360deg); } }
.escarcha-txt { position: relative; font-size: var(--t-lg); font-style: italic; color: var(--gold-soft); }
.escarcha-pie { position: relative; font-size: 18px; color: var(--rose); }

.mirar-cielo {
  margin-top: var(--sp-4);
  padding: 9px 18px;
  border-radius: var(--r-full);
  border: 1px dashed rgba(233,199,132,.35);
  background: transparent;
  color: var(--gold-deep);
  font-family: var(--util);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--d-sm) var(--ease-out);
}
.mirar-cielo:hover {
  color: var(--gold-soft);
  border-color: rgba(233,199,132,.7);
  border-style: solid;
  box-shadow: var(--halo-oro);
}