/* ============================================
   TIKIGAMES - PORTADA
   Arriba (presentación), juegos, todo en uno, 3 pasos.
   Con el mismo estilo que el panel de la app: tarjetas de la sección
   Juegos (.jc), iconos del menú con su color (--g) y la misma curva.
   ============================================ */

.portada-ancho { max-width: 1240px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

/* Los iconos, como en el menú de la app: caja con el color de la sección */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-caja {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--g) 14%, transparent); color: var(--g);
  transition: background-color .15s var(--suave), color .15s var(--suave);
}
.ic-caja .ic { width: 19px; height: 19px; }

/* ─── Arriba ─────────────────────────────────── */
.p-arriba {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 110px 0 60px; overflow: hidden;
}
.p-arriba::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 50% at 78% 42%, rgba(var(--red-rgb),.12), transparent 70%),
    radial-gradient(45% 45% at 12% 75%, rgba(var(--cyan-rgb),.06), transparent 70%);
}
.p-arriba .portada-ancho { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }

/* La pastilla de arriba, como las fichas (.jc-chip) de la app */
.p-pastilla {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 99px; margin-bottom: 22px;
  background: var(--cyan-soft); border: 1px solid rgba(var(--cyan-rgb),.4);
  color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.p-pastilla i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: p-latido 1.2s ease-in-out infinite; }
@keyframes p-latido { 50% { opacity: .35; } }

.p-titulo {
  font-weight: 900; line-height: 1; letter-spacing: -.035em;
  font-size: clamp(40px, 6vw, 78px); margin-bottom: 20px;
}
.p-titulo em { font-style: italic; color: var(--red); }
.p-sub { color: var(--ink-dim); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; max-width: 520px; margin-bottom: 30px; }
.p-sub strong { color: var(--ink); font-weight: 600; }

.p-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.p-boton-grande { height: 52px; padding: 0 26px; font-size: 16px; font-weight: 700; box-shadow: 0 6px 18px rgba(var(--red-rgb),.35); }
.p-boton-grande .icono-windows { width: 18px; height: 18px; }
.p-nota { color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.p-nota b { color: var(--ink-dim); font-weight: 600; }

/* Lo que trae la app, como los filtros de la app */
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.p-chips span {
  padding: 6px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim);
}
.p-chips span b { color: var(--ink); font-weight: 700; }

/* Abanico de portadas */
.p-abanico { position: relative; height: min(560px, 62vh); }
.p-abanico img {
  position: absolute; top: 50%; left: 50%; width: 46%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transition: transform .35s var(--suave);
}
.p-abanico img:nth-child(1) { transform: translate(-115%, -48%) rotate(-10deg); z-index: 1; }
.p-abanico img:nth-child(2) { transform: translate(-50%, -54%) scale(1.08); z-index: 3; }
.p-abanico img:nth-child(3) { transform: translate(15%, -48%) rotate(10deg); z-index: 2; }
.p-abanico:hover img:nth-child(1) { transform: translate(-122%, -50%) rotate(-13deg); }
.p-abanico:hover img:nth-child(3) { transform: translate(22%, -50%) rotate(13deg); }

/* ─── Títulos de sección ─────────────────────── */
.p-seccion { padding: 90px 0; position: relative; }
.p-cabeza { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.p-cabeza small {
  display: block; color: var(--ink-faint); font-size: 12px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; margin-bottom: 10px;
}
.p-cabeza h2 { font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.p-cabeza h2 em { font-style: italic; color: var(--red); }
.p-cabeza p { color: var(--ink-dim); margin-top: 12px; font-size: 15.5px; }

/* ─── Juegos: la misma tarjeta 3:4 que la sección Juegos de la app ─── */
.p-juegos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.p-juego {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color .15s var(--suave), transform .15s var(--suave), box-shadow .15s var(--suave), opacity .35s var(--suave);
}
.p-juego img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s var(--suave); }
.p-juego::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,0) 22%, rgba(10,10,15,0) 45%, rgba(10,10,15,.92) 78%, var(--bg) 100%);
}
.p-juego-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; z-index: 1; }
.jc-titulo { font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.p-juego-texto p { color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-juego:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.p-juego:hover img { transform: scale(1.04); }

/* Tarjeta final de la cuadrícula: «todos vienen en la app» */
.p-juego-todos {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 18px;
  background: radial-gradient(120% 80% at 50% 10%, #1d1d2c, var(--bg));
}
.p-juego-todos::after { display: none; }
.p-juego-todos strong { font-size: 54px; font-weight: 900; font-style: italic; color: var(--red); line-height: 1; letter-spacing: -.03em; }
.p-juego-todos span { color: var(--ink-dim); font-size: 13.5px; line-height: 1.4; }

/* ─── Todo en uno: cada función con el icono y el color de su sección en la app ─── */
.p-funciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p-funcion {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: border-color .15s var(--suave), transform .15s var(--suave), opacity .35s var(--suave);
}
.p-funcion:hover { border-color: color-mix(in srgb, var(--g) 45%, var(--line)); transform: translateY(-2px); }
.p-funcion:hover .ic-caja { background: color-mix(in srgb, var(--g) 22%, transparent); }
/* Hueco de la captura: hasta que llegue la captura real, el icono grande sobre el color de la sección */
.p-captura {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--g) 16%, var(--surface-3)), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.p-captura > .ic { width: 84px; height: 84px; stroke-width: 1.3; color: var(--g); opacity: .95; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--g) 55%, transparent)); transition: transform .35s var(--muelle); }
.p-funcion.reveal.asentado .p-captura > .ic { transition: transform .35s var(--muelle); }
.p-funcion.reveal.asentado:hover .p-captura > .ic { transform: scale(1.08) rotate(-4deg); }
.p-funcion-texto { padding: 16px 18px 20px; }
.p-funcion { cursor: pointer; }
.p-funcion-texto h3 { font-size: 24px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.fn-ver { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--g); transition: transform .25s var(--muelle); }
.p-funcion:hover .fn-ver { transform: translateX(4px); }
.p-funcion-texto p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; margin-top: 10px; }

/* ─── 3 pasos ────────────────────────────────── */
.p-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p-paso { text-align: center; padding: 28px 22px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.p-paso b {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px;
  font-size: 22px; font-weight: 900; font-style: italic;
  background: color-mix(in srgb, var(--g) 14%, transparent); color: var(--g);
}
.p-paso h3 { font-size: 18px; font-weight: 800; }
.p-paso p { color: var(--ink-dim); font-size: 14px; margin-top: 4px; }

.p-final {
  margin-top: 28px; text-align: center; padding: 40px 24px; border-radius: 16px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(var(--red-rgb),.12), var(--surface) 70%);
  border: 1px solid rgba(var(--red-rgb),.3);
}
.p-final h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.03em; margin-bottom: 6px; }
.p-final p { color: var(--ink-dim); margin-bottom: 22px; }

/* ─── Animaciones al bajar y al subir ───────────
   La entrada general la pone .reveal (03-animaciones.css); aquí, los efectos propios
   de cada bloque. Cuando un bloque ya entró queda .asentado y responde rápido al ratón. */
.reveal.visible.asentado {
  transition: opacity .2s ease, transform .18s var(--muelle), filter .2s ease,
              border-color .15s var(--suave), box-shadow .15s var(--suave);
}

/* Arriba: las tres portadas salen juntas del centro y se abren en abanico */
.p-abanico.reveal, .p-abanico.reveal.desde-arriba { opacity: 1; filter: none; transform: none; }
.p-abanico.reveal img { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
.p-abanico.reveal.visible img { opacity: 1; transition: opacity .5s var(--suave2), transform 1s var(--muelle); }
.p-abanico.reveal.visible img:nth-child(2) { transition-delay: .05s; }
.p-abanico.reveal.visible img:nth-child(3) { transition-delay: .1s; }
.p-abanico.reveal.visible img:nth-child(1) { transform: translate(-115%, -48%) rotate(-10deg); }
.p-abanico.reveal.visible img:nth-child(2) { transform: translate(-50%, -54%) scale(1.08); }
.p-abanico.reveal.visible img:nth-child(3) { transform: translate(15%, -48%) rotate(10deg); }
.p-abanico.reveal.asentado img { transition: transform .35s var(--suave); }
.p-abanico.reveal.asentado:hover img:nth-child(1) { transform: translate(-122%, -50%) rotate(-13deg); }
.p-abanico.reveal.asentado:hover img:nth-child(3) { transform: translate(22%, -50%) rotate(13deg); }
/* …y flotan suavecito mientras se ven */
@keyframes p-flota { 50% { translate: 0 -8px; } }
.p-abanico.asentado img:nth-child(1) { animation: p-flota 5s ease-in-out infinite; }
.p-abanico.asentado img:nth-child(2) { animation: p-flota 5s ease-in-out -1.6s infinite; }
.p-abanico.asentado img:nth-child(3) { animation: p-flota 5s ease-in-out -3.2s infinite; }

/* Las etiquetas de arriba entran una detrás de otra */
.p-chips.reveal span { opacity: 0; transform: translateY(10px) scale(.94); }
.p-chips.reveal.visible span { opacity: 1; transform: none; transition: opacity .4s var(--suave2), transform .55s var(--muelle); }
.p-chips.reveal.visible span:nth-child(1) { transition-delay: calc(var(--retraso, 0s) + .05s); }
.p-chips.reveal.visible span:nth-child(2) { transition-delay: calc(var(--retraso, 0s) + .1s); }
.p-chips.reveal.visible span:nth-child(3) { transition-delay: calc(var(--retraso, 0s) + .15s); }
.p-chips.reveal.visible span:nth-child(4) { transition-delay: calc(var(--retraso, 0s) + .2s); }
.p-chips.reveal.visible span:nth-child(5) { transition-delay: calc(var(--retraso, 0s) + .25s); }
.p-chips.reveal.visible span:nth-child(6) { transition-delay: calc(var(--retraso, 0s) + .3s); }

/* Títulos de sección: la palabra en rojo se subraya al aparecer */
.p-cabeza h2 em {
  background: linear-gradient(var(--red), var(--red)) no-repeat left 100% / 0% .09em;
  padding-bottom: .04em;
}
.p-cabeza.reveal.visible h2 em { background-size: 100% .09em; transition: background-size .8s var(--suave2) .35s; }

/* Juegos: la portada llega un poco ampliada y se asienta */
.p-juego.reveal img { transform: scale(1.14); }
.p-juego.reveal.visible img { transform: scale(1); transition: transform 1.1s var(--suave2) var(--retraso, 0s); }
.p-juego.reveal.asentado img { transition: transform .35s var(--suave); }
.p-juego.reveal.asentado:hover img { transform: scale(1.04); }
.p-juego-todos.reveal strong { display: inline-block; transform: scale(.4); opacity: 0; }
.p-juego-todos.reveal.visible strong { transform: none; opacity: 1; transition: transform .8s var(--muelle) calc(var(--retraso, 0s) + .15s), opacity .3s ease calc(var(--retraso, 0s) + .15s); }

/* Todo en uno: el icono grande y el pequeño «saltan» con el color de su sección */
.p-funcion.reveal .p-captura > .ic { transform: scale(.4) rotate(-14deg); opacity: 0; }
.p-funcion.reveal.visible .p-captura > .ic { transform: none; opacity: .95; transition: transform .8s var(--muelle) calc(var(--retraso, 0s) + .2s), opacity .4s ease calc(var(--retraso, 0s) + .2s); }
.p-funcion.reveal .ic-caja { transform: scale(.5); }
.p-funcion.reveal.visible .ic-caja { transform: none; transition: transform .6s var(--muelle) calc(var(--retraso, 0s) + .35s), background-color .15s var(--suave); }
.p-funcion.reveal .p-captura::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 55% at 50% 55%, color-mix(in srgb, var(--g) 35%, transparent), transparent 70%);
  opacity: 0;
}
.p-funcion.reveal.visible .p-captura::after { animation: p-destello 1.2s var(--suave2) calc(var(--retraso, 0s) + .2s) both; }
@keyframes p-destello { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

/* 3 pasos: el número salta */
.p-paso.reveal b { transform: scale(.3) rotate(-20deg); }
.p-paso.reveal.visible b { transform: none; transition: transform .7s var(--muelle) calc(var(--retraso, 0s) + .15s); }

/* Botón final: late suave para que se note sin molestar */
@keyframes p-late { 0%, 100% { box-shadow: 0 6px 18px rgba(var(--red-rgb),.35); } 50% { box-shadow: 0 6px 30px rgba(var(--red-rgb),.6), 0 0 0 6px rgba(var(--red-rgb),.08); } }
.p-final.asentado .p-boton-grande { animation: p-late 2.4s ease-in-out infinite; }

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1100px) {
  .p-juegos { grid-template-columns: repeat(4, 1fr); }
  .p-funciones { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .portada-ancho { padding: 0 16px; }
  .p-arriba { min-height: auto; padding-top: 96px; }
  .p-arriba .portada-ancho { grid-template-columns: 1fr; gap: 24px; }
  .p-abanico { height: 300px; order: -1; }
  .p-abanico img { width: 38%; }
  .p-juegos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .p-funciones, .p-pasos { grid-template-columns: 1fr; }
  .p-seccion { padding: 60px 0; }
}