/* La travesía de las reseñas: los créditos iniciales de una película de galaxias, con las reseñas de los clientes.
   Siempre a oscuras, también en el tema claro: es un momento de cine. Sin JavaScript o con movimiento reducido,
   la lista se lee tal cual; js/resenas.js añade «.viva» y monta el campo de estrellas, la perspectiva y el holograma.
   · data-travesia="capitulo" (portada y Servicios): ligada al scroll, a pantalla completa.
   · data-travesia="pantalla" (antes del pie de las demás páginas, donde estaba el widget de Trustindex): una pantalla de
     cine a lo ancho que la pasa sola, en bucle. */
.travesia {
  --estrella: #fbbf24; --holo: #7dd3fc; --negro: #01030a;
  position: relative; color: #f8fafc; background: var(--negro);
  padding: 16vh 24px 14vh; text-align: center;
}
.travesia::before, .travesia::after {
  content: ""; position: absolute; left: 0; right: 0; height: 32vh; pointer-events: none;
}
.travesia::before { bottom: 100%; background: linear-gradient(to bottom, rgba(1, 3, 10, 0), var(--negro)); }
.travesia::after { top: 100%; background: linear-gradient(to top, rgba(1, 3, 10, 0), var(--negro)); }

/* ── Lo que se lee sin animación ── */
.travesia-estrellas { display: none; }
.travesia-prologo { color: var(--holo); font: 400 clamp(1.1rem, 2.4vw, 1.6rem)/1.5 var(--texto); max-width: 640px; margin: 0 auto 6vh; text-align: left; }
.travesia-nota { margin: 0 0 6vh; display: grid; justify-items: center; gap: clamp(18px, 3.4vw, 44px); }
.travesia-cifra {
  font: 700 clamp(6rem, 20vw, 15rem)/.9 var(--display); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: clamp(2px, .35vw, 4px) var(--estrella);
}
.travesia-nota-pie { font: 600 clamp(.8rem, 1.6vw, 1.05rem)/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--estrella); }
.travesia-texto { color: var(--estrella); max-width: 760px; margin: 0 auto; font: 600 clamp(1.15rem, 2.2vw, 1.55rem)/1.5 var(--display); }
.travesia-episodio { font: 600 .9em/1.2 var(--display); letter-spacing: .28em; text-transform: uppercase; margin: 0 0 .6em; }
.travesia-texto h2 { font: 700 1.9em/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 1.1em; color: var(--estrella); }
.travesia-intro { text-align: justify; hyphens: auto; margin: 0 0 1.6em; }
.travesia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5em; text-align: justify; hyphens: auto; }
.travesia-lista figure { margin: 0; border-radius: 14px; transition: color .3s, opacity .3s, text-shadow .3s; }
.travesia-lista blockquote { margin: 0; }
.travesia-lista blockquote p { margin: 0; }
.travesia-lista figcaption { margin-top: .45em; font: 600 .62em/1.4 var(--texto); letter-spacing: .14em; text-transform: uppercase; text-align: center; opacity: .85; }
.travesia-lista figcaption .estrellas { letter-spacing: .08em; margin-right: .5em; }
.travesia-cierre { margin: 1.8em 0 0; text-align: center; }
.travesia-mandos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 8vh; }
.travesia-pista { flex-basis: 100%; margin: 0 0 4px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(248, 250, 252, .62); display: none; }
.travesia-boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .55); color: var(--estrella); background: rgba(1, 3, 10, .6);
  font: 600 .9rem/1 var(--display); text-decoration: none; cursor: pointer; transition: background .25s, color .25s;
}
.travesia-boton:hover, .travesia-boton:focus-visible { background: var(--estrella); color: var(--negro); }
.travesia-saltar { border-color: rgba(248, 250, 252, .3); color: #f8fafc; }
.travesia-fuente { margin: 18px 0 0; font-size: .74rem; color: rgba(248, 250, 252, .6); }
.travesia a:focus-visible, .travesia button:focus-visible, .travesia figure:focus-visible { outline: 2px solid var(--holo); outline-offset: 4px; }

/* ── Viva: el escenario fijo, las estrellas y la perspectiva ── */
.travesia.viva { padding: 0; }
.viva .travesia-escenario {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip;
  --base: 150px;   /* el borde de abajo del plano: el texto sale por encima de los botones */
  --cielo: 30%;    /* hasta dónde llega el fundido de arriba, donde el texto se pierde a lo lejos */
  --solido: 22%;   /* la parte del fundido que es negro del todo */
}
/* Los fundidos son dos degradados opacos por encima del texto, no una máscara: una máscara sobre un texto en 3D, con
   las estrellas moviéndose debajo, se recompone en cada imagen y se come la mitad de ellas (33 frente a 55 por segundo) */
.viva .travesia-escenario::before, .viva .travesia-escenario::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.viva .travesia-escenario::before { top: 0; height: var(--cielo); background: linear-gradient(to bottom, #01030a var(--solido), rgba(1, 3, 10, 0)); }
.viva .travesia-escenario::after { bottom: 0; height: calc(var(--base) + 70px); background: linear-gradient(to top, rgba(1, 3, 10, .4), rgba(1, 3, 10, .94) var(--base), rgba(1, 3, 10, 0)); }
.viva .travesia-estrellas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.viva .travesia-prologo, .viva .travesia-nota { z-index: 3; }
.viva .travesia-prologo { position: absolute; left: 50%; top: 46%; width: min(640px, 84vw); margin: 0; transform: translate(-50%, -50%); opacity: 0; }
.viva .travesia-nota { position: absolute; left: 50%; top: 48%; margin: 0; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.viva .travesia-plano-caja { position: absolute; inset: 0; z-index: 1; perspective: 340px; perspective-origin: 50% 8%; }
.viva .travesia-plano {
  position: absolute; left: 0; right: 0; bottom: var(--base); margin: 0 auto; width: min(780px, 90vw); height: 230vh;
  overflow: hidden; transform-origin: 50% 100%; transform: rotateX(30deg);   /* recortado: nada se sale hacia la cámara */
}
.viva .travesia-texto { position: absolute; left: 0; right: 0; top: 0; max-width: none; font-size: clamp(1.5rem, 3vw, 2.5rem); will-change: transform; }
.viva .travesia-lista figure { cursor: pointer; padding: .15em .3em; margin: 0 -.3em; }
.viva .travesia-texto.con-activa figure:not(.activa) { opacity: .42; }
.viva .travesia-lista figure.activa { color: #fff; text-shadow: 0 0 18px rgba(251, 191, 36, .75), 0 0 2px #fff; }
.viva .travesia-mandos { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; padding: 0 16px; opacity: 0; transition: opacity .6s; z-index: 3; }
.viva .travesia-mandos.visible { opacity: 1; }
.viva .travesia-pista { display: block; }
.viva .travesia-mandos .travesia-fuente { flex-basis: 100%; margin: 2px 0 0; }

/* Mientras la travesía tapa la pantalla, fuera el índice lateral, el marcador y la barra del teléfono */
.capitulos, .hud { transition: opacity .4s; }
html.escena-tapada .capitulos, html.escena-tapada .hud, html.escena-tapada .barra-movil { opacity: 0; pointer-events: none; visibility: hidden; }

/* ── El holograma: una reseña, de cerca ── */
.travesia-ficha { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(1, 3, 10, .6); }
.travesia-ficha[hidden] { display: none; }
.travesia-ficha-caja {
  position: relative; overflow: hidden; width: min(560px, 100%); max-height: calc(100% - 32px); overflow-y: auto;
  padding: 34px 30px 26px; border-radius: 18px; text-align: left; color: #e0f2fe;
  border: 1px solid rgba(125, 211, 252, .5);
  background: linear-gradient(180deg, rgba(12, 42, 68, .92), rgba(3, 14, 28, .95));
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .12), 0 0 60px rgba(56, 189, 248, .28), inset 0 0 44px rgba(56, 189, 248, .14);
  animation: holo-entra .5s cubic-bezier(.2, .8, .2, 1);
}
.travesia-ficha-caja::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(125, 211, 252, .07) 0 1px, transparent 1px 4px);
}
.travesia-ficha-caja::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(125, 211, 252, .12), transparent); animation: holo-barre 3.2s linear infinite;
}
.travesia-ficha blockquote { margin: 0; font: 500 1.18rem/1.6 var(--texto); }
.travesia-ficha blockquote p { margin: 0; }
.travesia-ficha figure { margin: 0; }
.travesia-ficha figcaption { margin-top: 16px; font: 600 .78rem/1.5 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--holo); }
.travesia-ficha figcaption .estrellas { margin-right: 8px; }
.travesia-cerrar {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--holo); font: 400 1.6rem/1 var(--texto); cursor: pointer;
}
.travesia-cerrar:hover { background: rgba(125, 211, 252, .14); }
@keyframes holo-entra { from { opacity: 0; transform: scaleY(.03); filter: brightness(3); } 55% { opacity: 1; transform: scaleY(1.03); } to { transform: none; filter: none; } }
@keyframes holo-barre { to { top: 100%; } }

/* ── Pantalla: antes del pie de las demás páginas, una pantalla de cine a lo ancho que la pasa sola ── */
.travesia.pantalla::before, .travesia.pantalla::after { height: 14vh; }
.travesia.pantalla.viva .travesia-escenario { position: relative; height: 92vh; height: 92svh; min-height: 560px; max-height: 960px; touch-action: pan-y; }
.pantalla.viva.arrastrando { cursor: grabbing; }
.travesia-pausa { border-color: rgba(248, 250, 252, .3); color: #f8fafc; font-family: var(--display); }

@media (max-width: 640px) {
  .viva .travesia-plano-caja { perspective: 260px; }
  .viva .travesia-escenario { --base: 196px; --cielo: 26%; }
  .viva .travesia-plano { width: 92vw; transform: rotateX(26deg); }
  .viva .travesia-texto { font-size: clamp(1.15rem, 5.4vw, 1.5rem); }
  .viva .travesia-mandos .travesia-fuente { font-size: .68rem; }
  .viva .travesia-pista { font-size: .7rem; letter-spacing: .1em; }
  .travesia-boton { font-size: .84rem; padding: 0 14px; }
}

/* ── La ficha de Google en vivo (js/resenas.js) ── */
/* Atribución que piden las normas de la API de Places: «Google Maps» tal cual (sin traducir, sin mayúsculas cambiadas
   ni partido en dos líneas), Roboto 400 entre 12 y 16 px, blanca sobre oscuro y #1F1F1F sobre claro */
.atribucion-google { font: 400 14px/1.2 Roboto, Arial, sans-serif; letter-spacing: normal; text-transform: none; white-space: nowrap; color: #fff; }
:root[data-theme="light"] .atribucion-google { color: #1f1f1f; }
.travesia .atribucion-google { color: #fff; }
.travesia-fuente a, .travesia-ficha .travesia-enlaces a { color: var(--holo); }
/* El autor de cada reseña de Google, con su foto y su nombre tal cual */
.travesia-avatar { width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; vertical-align: -.3em; margin-right: .45em; }
.travesia-lista figure[data-google-resena] figcaption { text-transform: none; letter-spacing: .02em; }
.travesia-enlaces { display: none; }
.travesia-ficha .travesia-enlaces { display: block; margin: 14px 0 0; font: 500 .86rem/1.5 var(--texto); }
.travesia-ficha .travesia-avatar { width: 32px; height: 32px; vertical-align: middle; }
.travesia-ficha figure[data-google-resena] figcaption { text-transform: none; }
.travesia-ficha-marca { margin: 12px 0 0; }