/* Consulta espiritual — hoja de estilo.
   Sin dependencias ni fuentes externas: la pagina tiene que funcionar sola,
   también sin conexión, y sin enviar nada a un tercero. Las letras llamativas
   son pilas del sistema (Georgia/Palatino), no descargas de Google. */

:root {
  --tinta: #1c1a17;
  --suave: #574d44;
  --linea: #ddd5c9;
  --fondo: #faf7f2;
  --papel: #fffefb;
  --acento: #6b4f2a;
  --oro: #a9812f;
  --sangre: #7a1f1f;
  --aviso: #8a2b2b;

  /* --- Cielo nocturno (fondo híbrido) -------------------------------------
     La zona alta de la página flota sobre este cielo; la lectura descansa
     sobre papel claro más abajo. La paleta de papel de arriba no se toca:
     si hay que volver atrás, se restaura estilo.css.original. */
  --noche-1: #0b1026;
  --noche-2: #171a3a;
  --noche-3: #221633;
  --estrella: #f2e9d0;
  --oro-claro: #d9b75c;
  --crema: #f3ecda;
  --crema-suave: #b9b2a0;
  --cristal: rgba(255, 255, 255, .05);
  --cristal-2: rgba(255, 255, 255, .085);
  --borde-cristal: rgba(212, 175, 55, .30);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--tinta);
  font: 17px/1.6 Georgia, 'Times New Roman', serif;
  /* Fondo híbrido: cielo nocturno arriba, que se ve alrededor y por encima;
     la lectura va en su panel de papel (ver main, más abajo). */
  background:
    radial-gradient(120% 75% at 50% -12%, rgba(120, 90, 160, .30), transparent 60%),
    linear-gradient(180deg, var(--noche-1) 0%, var(--noche-2) 48%, var(--noche-3) 100%);
  background-attachment: fixed;
  background-color: var(--noche-1);
}

/* --- Estrellas (CSS puro, sin imágenes ni internet) ---------------------- */
/* Tres capas fijas de estrellas, cada una con su propio ritmo de titileo, para
   que el cielo se vea vivo y no aplanado. Todas se apagan solas si el sistema
   pide menos movimiento (ver prefers-reduced-motion). */
body::before,
body::after,
.estrellas {
  position: fixed;
  inset: -220px;
  pointer-events: none;
  z-index: -1;
}
body::before, body::after { content: ""; }

/* Capa lejana: estrellas pequeñas, deriva despacio y late suave. */
body::before {
  background-repeat: repeat;
  background-size: 170px 170px;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 84% 44%, rgba(255,255,255,.72), transparent),
    radial-gradient(1px 1px at 12% 72%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 44% 82%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 92% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 33% 52%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 70% 36%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 6% 48%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 55% 8%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.1px 1.1px at 26% 92%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 78% 16%, rgba(255,255,255,.68), transparent),
    radial-gradient(1px 1px at 48% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 96% 90%, rgba(255,255,255,.7), transparent);
  animation: derivar 260s linear infinite, latido 9s ease-in-out infinite;
}

/* Capa media: titila en un ritmo. */
.estrellas {
  background-repeat: repeat;
  background-size: 250px 250px;
  background-image:
    radial-gradient(1.6px 1.6px at 24% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.3px 1.3px at 68% 46%, rgba(240,246,255,.85), transparent),
    radial-gradient(1.8px 1.8px at 88% 74%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 38% 64%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 10% 88%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.7px 1.7px at 96% 22%, rgba(214,231,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 52% 40%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 4% 6%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 60% 86%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 34% 96%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 82% 60%, rgba(255,255,255,.72), transparent);
  animation: titilar3 3.2s ease-in-out infinite;
}

/* Capa cercana: las más grandes, titilan mas lento. */
body::after {
  background-repeat: repeat;
  background-size: 430px 430px;
  background-image:
    radial-gradient(2px 2px at 30% 12%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.6px 1.6px at 76% 60%, rgba(255,255,255,.9), transparent),
    radial-gradient(2.2px 2.2px at 52% 88%, rgba(214,231,255,.9), transparent),
    radial-gradient(1.8px 1.8px at 88% 28%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 8% 56%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 44% 4%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.9px 1.9px at 66% 96%, rgba(255,255,255,.88), transparent),
    radial-gradient(1.7px 1.7px at 14% 24%, rgba(214,231,255,.85), transparent);
  animation: titilar 5.5s ease-in-out infinite alternate, derivar 200s linear infinite;
}
@keyframes derivar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-90px, -150px, 0); }
}
@keyframes titilar {
  from { opacity: .5; }
  to   { opacity: 1; }
}
@keyframes titilar3 {
  0%   { opacity: .4; }
  50%  { opacity: 1; }
  100% { opacity: .4; }
}
@keyframes latido {
  0%, 100% { opacity: .9; }
  50%      { opacity: .6; }
}

/* --------------------------------------------------------- galeria superior */

.galeria {
  display: flex;
  gap: .7rem;
  padding: .8rem;
  background: #14100c;
  border-bottom: 3px solid var(--oro);
}
.miniatura {
  flex: 1 1 0;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
  line-height: 0;
}
.miniatura img {
  width: 100%;
  height: auto;
  aspect-ratio: 35 / 18;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform .5s ease, filter .5s ease;
}
.miniatura:hover img { transform: scale(1.05); filter: brightness(1.12); }

/* ---------------------------------------------------------------- columnas */

/* Escritorio: tres columnas. Izquierda, la marca; centro, los datos; derecha,
   el ultimo video. La lectura y el pago se salen de aqui abajo, a ancho
   completo, porque no caben en una columna. En tablet se apila (ver la media
   query de 64rem). */
.columnas {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) minmax(15rem, 20rem);
  grid-template-areas:
    "marca form video"
    "contenido contenido contenido";
  gap: 1.6rem;
  align-items: start;
  position: relative;
  isolation: isolate;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.2rem 1.1rem 0;
}

.portada {
  grid-area: marca;
  position: relative;
  isolation: isolate;
  padding: .4rem 0 0;
  text-align: left;
  background: none;
  border: 0;
}

.portada h1 {
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 4.1rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--crema);
  text-shadow: 0 0 18px rgba(217,183,92,.45), 1px 1px 0 rgba(0,0,0,.5);
  /* El titulo se centra en su columna: al estrecharse, "Simbolos y Arcanos"
     parte en varias lineas y asi la "y" queda centrada en su fila, no pegada
     a la izquierda. Los slogans y los botones siguen a la izquierda. */
  text-align: center;
}
.portada .sub {
  margin: .7rem auto 0;
  max-width: 34rem;
  color: var(--crema-suave);
  font-size: 1.02rem;
  font-style: italic;
}
/* El h1 queda solo, asi que se le da aire por debajo hacia los slogans. */
.portada h1 { margin-bottom: .2rem; }

/* ------------------------------------------------------- slogans llamativos */

/* Tres, apilados: en una columna estrecha se leen de una linea y pesan mas
   que si van uno al lado del otro. */
.esloganes {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.esloganes li {
  padding: .75rem 1rem;
  border: 1px solid var(--borde-cristal);
  border-left: 4px solid var(--oro-claro);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(217,183,92,.16), rgba(217,183,92,.03));
  color: var(--crema);
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- canales */

.canales {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.5rem;
}
.canal {
  display: inline-block;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
.canal:hover { transform: translateY(-2px); }
.canal.youtube {
  background: #b3261e;
  border-color: #8c1d17;
  color: #fff;
  box-shadow: 0 3px 10px rgba(179,38,30,.28);
}
.canal.telegram {
  background: #2aabee;
  border-color: #1c87b8;
  color: #fff;
  box-shadow: 0 3px 10px rgba(42,171,238,.28);
}
/* Sin canal todavia: se ve, pero no promete un enlace que no existe. */
.canal.inactivo {
  background: transparent;
  border-color: #9fb8c6;
  color: #7d94a3;
  box-shadow: none;
  cursor: default;
}
.canal.inactivo:hover { transform: none; }

/* ------------------------------------------------------------------ main */

/* La lectura va a ancho completo: debajo de las tres columnas de arriba.
   Se asienta sobre un panel de papel claro para que el texto largo se lea
   sin esfuerzo, aunque el cielo nocturno siga de fondo alrededor. */
main {
  grid-area: contenido;
  padding: 1.7rem 1.75rem 2.6rem;
  background: linear-gradient(180deg, var(--papel), var(--fondo));
  border: 1px solid var(--linea);
  border-top: 2px solid var(--oro);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
/* El panel es claro: dentro de él manda la paleta de papel de siempre. */
main h2.seccion { color: var(--suave); border-bottom-color: var(--linea); }
main .nota, main .mini { color: var(--suave); }

/* El formulario va en su columna, sin pegarse al scroll. Antes era
   position: sticky y, al bajar, el bloque de pago subia por debajo y se
   superponia con el formulario. */
.columna-form {
  grid-area: form;
  color: var(--crema);
  color-scheme: dark;
  background: var(--cristal);
  border: 1px solid var(--borde-cristal);
  border-radius: 8px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
}

.oculto { display: none; }

/* ------------------------------------------------------------------ form */

/* El marco (fondo, borde, sombra) lo pone .columna-form, para que el aviso de
   error quede dentro de la misma caja que el formulario. */
#form {
  display: grid;
  gap: .9rem;
}
#form h2.seccion { margin-top: 0; }

.fila { display: grid; grid-template-columns: 12rem 1fr; gap: .7rem; align-items: center; }
.columna-form .fila label { color: var(--crema-suave); font-size: .92rem; }
.fila label::after { content: ' *'; color: #e0a3a3; }

.columna-form input, .columna-form select {
  font: inherit;
  padding: .5rem .65rem;
  border: 1px solid var(--borde-cristal);
  border-radius: 4px;
  background: rgba(9, 12, 28, .55);
  color: var(--crema);
  width: 100%;
}
.columna-form input::placeholder { color: #8a8375; }
.columna-form input:focus, .columna-form select:focus { outline: 2px solid var(--oro-claro); outline-offset: 1px; }
.columna-form select option { color: var(--tinta); background: #fff; }
input, select { font: inherit; }

button {
  font: inherit;
  cursor: pointer;
  padding: .65rem 1.4rem;
  border: 1px solid var(--oro);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: #2a2113;
  font-weight: 700;
  justify-self: start;
  letter-spacing: .04em;
  transition: filter .2s ease, transform .15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: default; }
button.secundario { background: transparent; color: var(--suave); border-color: var(--linea); }

/* --------------------------------------------------------------- avisos */

#aviso {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid #d98d80;
  background: rgba(122, 31, 31, .28);
  color: #f4c4ba;
  font-size: .93rem;
}

.nota, .mini { color: var(--suave); font-size: .88rem; }

  /* La acotacion de los 9 anos. Va destacada porque cambia el modo de leer
     todo lo que viene debajo, pero sin parecer un aviso ni un error. */
  .nota-9-anos {
    margin: 0 0 1.4rem;
    padding: .9rem 1.1rem .9rem 2.4rem;
    border-left: 3px solid var(--oro);
    background: rgba(201, 162, 39, .07);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--tinta);
    font-size: .92rem;
    line-height: 1.55;
  }
  .nota-9-anos b { color: var(--acento); }
.mini { margin-top: .5rem; }

/* ------------------------------------------------------- panel de wompi */

/* Panel de pago: un altar oscuro dentro del papel. El cobro es lo que tiene
   que destacar en la pagina de lectura, y se lleva la misma noche del cielo
   de arriba para que se sienta parte del mismo sitio. La franja pasa de azul
   Wompi a oro: en el contexto del proyecto manda la paleta celestial. */
.metodo {
  margin-top: 2rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, var(--noche-2) 0%, var(--noche-3) 100%);
  border: 1px solid var(--borde-cristal);
  border-left: 4px solid var(--oro-claro);
  border-radius: 8px;
  color: var(--crema);
  box-shadow: 0 16px 36px -20px rgba(11, 16, 38, .85);
}
/* Las dos siguientes son necesarias por especificidad, no por estetica:
   main .nota / main .mini (mas arriba) pintan el texto de gris oscuro, y
   sobre noche eso no se lee. Aqui ganan por tener una clase mas. El texto se
   va a --crema y no a --crema-suave: son una o dos lineas, y en pantalla
   chica lo apagado se lee mal. */
.metodo h2.seccion { margin-top: 0; border-bottom: none; color: var(--oro-claro); }
.metodo .nota, .metodo .mini { color: var(--crema); }
.metodo b { color: var(--oro-claro); }
/* Deshabilitado aqui no es lo mismo que sobre papel: button:disabled baja la
   opacidad a .55 y con ella el texto caia casi al negro, asi que el boton
   desaparecia dentro de la tarjeta. Se le sube y se le da un relleno tenue
   para que se siga leyendo como boton. */
.metodo button:disabled { opacity: .8; }
.metodo button.secundario {
  background: rgba(243, 236, 218, .07);
  color: var(--crema);
  border-color: var(--borde-cristal);
}
.metodo .nota { margin: .3rem 0 .55rem; }

/* --------------------------------------------------------------- salida */

h2.seccion {
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--suave);
  border-bottom: 1px solid var(--linea);
  padding-bottom: .3rem;
  margin: 2rem 0 .8rem;
}

.variables { margin: 0; }
.variables div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .22rem 0;
  border-bottom: 1px dotted var(--linea);
  font-size: .93rem;
}
.variables b { font-weight: 400; color: var(--suave); }

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .8rem 0;
}
.slot {
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 4px;
  padding: .45rem .7rem;
  font-size: .95rem;
}
.slot b { font-size: 1.15rem; font-weight: 400; color: var(--acento); }

.arcano {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.arcano h3 {
  margin: 0 0 .1rem;
  font-size: 1.15rem;
  font-weight: 400;
}
.arcano .par { margin: 0 0 .7rem; color: var(--suave); font-size: .88rem; font-style: italic; }

.campo { margin: .45rem 0; font-size: .94rem; }
.campo > b {
  display: block;
  color: var(--suave);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.atributos { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .6rem 0; }
.atributos span { font-size: .86rem; color: var(--suave); }
.atributos b { color: var(--tinta); font-weight: 400; }

/* Bloque de antagonicos. Se separa del resto porque es lo unico que lleva una
   recomendacion sobre personas y no sobre el arcano: sin un borde propio se
   perderia entre los demas atributos y se leeria como un dato mas. El texto lo
   arma el servidor (src/antagonicos.js), aqui solo se le da forma. */
.antagonicos {
  margin: .8rem 0;
  padding: .6rem .8rem;
  border-left: 2px solid var(--linea);
}
.antag-titulo { font-size: .95rem; color: var(--tinta); }
.antag-explica { font-size: .88rem; color: var(--suave); margin-top: .3rem; }
.antag-reco { font-size: .9rem; color: var(--tinta); margin-top: .35rem; }
.antag-primos { font-size: .86rem; color: var(--suave); margin-top: .35rem; }

.planos { margin: .6rem 0; padding-left: .2rem; }
.planos div { margin: .35rem 0; font-size: .92rem; }
.planos b { font-weight: 400; color: var(--suave); }

table.frec { border-collapse: collapse; margin: .6rem 0; font-size: .88rem; }
table.frec th, table.frec td { border: 1px solid var(--linea); padding: .22rem .6rem; text-align: left; font-weight: 400; }
table.frec th { color: var(--suave); }

.enriquecimiento {
  margin: .7rem 0;
  padding: .6rem .8rem;
  background: #f4f1ea;
  border-left: 2px solid var(--linea);
  font-size: .93rem;
}

.pie, footer { color: var(--suave); font-size: .85rem; }
footer {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--borde-cristal);
  text-align: center;
  padding: 2.4rem 1rem 5rem;
  /* Igual que el fondo de la web: el cielo nocturno, con letras en blanco. */
  background: transparent;
  color: var(--crema);
  overflow: hidden;
}
footer p { max-width: 52rem; margin: 0 auto; position: relative; z-index: 1; }
footer p.mini { color: var(--estrella); }
#avisoSalud { font-style: italic; color: var(--crema); }

a.btn-txt { color: var(--acento); font-size: .88rem; }

@media (max-width: 64rem) {
  /* En tablet se apila todo en una columna: banner (la galeria, que va fuera),
     la marca con sus slogans, los datos, la lectura y el pago, y el video al
     final. El orden lo fijan las areas, no el orden del HTML. */
  .columnas {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marca"
      "form"
      "contenido"
      "video";
    gap: 1.8rem;
    padding: 1.6rem 1.1rem 0;
  }
  /* El video no ocupa todo el ancho de una tablet: se centra y se acota. */
  .youtube-ultimo { max-width: 42rem; margin: 0 auto; }
  /* En una sola columna el boton de pago deja de ser un boton de 120 px y se
     va a todo el ancho: es el objetivo de la pagina y con el pulgar no se le
     da a un boton tan estrecho. */
  .metodo button { width: 100%; }
}

@media (max-width: 34rem) {
  .fila { grid-template-columns: 1fr; gap: .2rem; }
  body { font-size: 16px; }
  .galeria { gap: .35rem; padding: .4rem; }
  .esloganes { gap: .45rem; margin-top: 1rem; }
  .esloganes li { padding: .6rem .9rem; }
  .canales { gap: .45rem; }
  .canal { font-size: .78rem; padding: .5rem .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .miniatura img, .canal, button { transition: none; }
  .miniatura:hover img, .canal:hover, button:hover:not(:disabled) { transform: none; }
}

/* Metodo de pago - CTA y QR */
.canal.suscripcion { background: linear-gradient(135deg, #2d7c54 0%, #3fa36b 100%); color: #fff; box-shadow: 0 8px 20px -10px rgba(47, 124, 83, 0.45); }
.canal.suscripcion:hover { filter: brightness(1.03); }
.pago-cta { margin: .75rem 0 1rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.qr-wrap { background: #fff; padding: .75rem; border-radius: 12px; box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.5); }
.qr-img { width: min(240px, 60vw); height: auto; display: block; }

.canal.instagram {
  background: #1877f2;
  color: #fff;
  box-shadow: 0 2px 6px rgba(24, 119, 242, 0.25);
}
.canal.instagram:hover {
  background: #166fe5;
  transform: translateY(-1px);
}


/* La tarjeta del ultimo video: tercera columna en escritorio. Mismo marco que
   el formulario para que las dos columnas laterales se lean como tarjetas. */
.youtube-ultimo {
  grid-area: video;
  color: var(--crema);
  background: var(--cristal);
  border: 1px solid var(--borde-cristal);
  border-radius: 8px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
}
.youtube-ultimo h2.seccion { margin-top: 0; }

/* En las tarjetas del cielo, los títulos y notas van en tono claro. */
.columna-form h2.seccion,
.youtube-ultimo h2.seccion {
  color: var(--crema-suave);
  border-bottom-color: var(--borde-cristal);
}
.columna-form .nota,
.youtube-ultimo .mini { color: var(--crema-suave); }
.youtube-ultimo .yt-preview { margin-top: .4rem; }
.youtube-ultimo #ytTitle { margin-top: 8px; color: #c9b7b2; }
.youtube-ultimo .yt-embed-container.yt-shorts { max-height: 70vh; }

.yt-embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
}
.yt-embed-container.yt-shorts {
  aspect-ratio: 9 / 16;
  max-width: min(100%, 480px);
  margin-left: auto;
  margin-right: auto;
}
.yt-embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.yt-preview .yt-thumb-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.yt-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}
.yt-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* ===================================================== cielo: adornos ===== */

/* Constelaciones decorativas: tres, cada una en su sitio y con su propio
   ritmo de titileo. Van detras del texto (z-index -1 dentro de un contexto
   de apilamiento propio), para que solo asomen entre lo que hay encima. */
.constelacion,
.constelacion-2,
.constelacion-3 {
  pointer-events: none;
  z-index: -1;
  animation: titilarConstelacion 6.5s ease-in-out infinite;
}
.constelacion {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  width: min(22rem, 42vw);
  height: auto;
}
.constelacion-2 {
  position: absolute;
  top: .4rem;
  left: 0;
  width: 100%;
  height: auto;
  animation-duration: 5s;
  animation-delay: -1.7s;
}
.constelacion-3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .5rem;
  width: min(36rem, 86vw);
  height: auto;
  max-height: 100%;
  animation-duration: 8s;
  animation-delay: -3.4s;
}
@keyframes titilarConstelacion {
  0%, 100% { opacity: .62; }
  50%      { opacity: .16; }
}
@media (max-width: 64rem) {
  .constelacion { top: .6rem; width: min(16rem, 46vw); }
  .constelacion-2 { width: 86%; }
}

/* Hilo dorado de progreso de lectura: fijo arriba, se rellena al bajar. */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  box-shadow: 0 0 8px rgba(217,183,92,.7);
  z-index: 60;
  transition: width .1s linear;
}

/* Boton de volver arriba: aparece solo tras bajar. */
.volver-arriba {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid var(--borde-cristal);
  border-radius: 50%;
  background: rgba(23, 26, 58, .88);
  color: var(--oro-claro);
  font-size: 1.15rem;
  line-height: 1;
  justify-self: auto;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.volver-arriba.visible { opacity: 1; visibility: visible; }
.volver-arriba:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.12); }

/* Separador estelar entre fichas de arcano: da ritmo a una lectura larga sin
   recargarla. */
#salida .arcano + .arcano { position: relative; margin-top: 2.3rem; }
#salida .arcano + .arcano::before {
  content: "\2726";
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--oro);
  opacity: .6;
  font-size: .85rem;
  line-height: 1;
}

/* ================================================= cielo quieto ==========
   Va al final de la hoja a proposito: tiene que ser la ultima palabra sobre
   estrellas y constelaciones, que se definen mas arriba. Si se pone antes,
   la regla de titileo vuelve a ganar por orden de escritura y el cielo no
   llega a quedarse quieto. */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .estrellas { animation: none; opacity: .7; }
  .constelacion, .constelacion-2, .constelacion-3 { animation: none; opacity: .5; }
  .progreso { transition: none; }
}