/* Atmósfera compartida (V1 · misterio): cielo de fondo, grano de papel antiguo, grabados vistos por un telescopio viejo,
   pestañas comunes y ornamentos dorados. Lo carga cada página junto a marco.js. Todo movimiento se apaga con movimiento reducido. */
:root{--noche:#0b0e17;--oro-viejo:#b89a62;--oro-claro:#e8d3ac;--alto-pestanas:62px}
body{background:radial-gradient(ellipse 90% 60% at 80% -10%,#2a2a4433,transparent 60%),radial-gradient(ellipse 70% 50% at 0% 100%,#1c243a40,transparent 70%),var(--fondo)}

/* El cielo de fondo (lienzo de marco.js), el grano y una viñeta suave en los bordes. */
.cielo-fondo{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body::before{opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .82 0 0 0 0 .66 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E")}
body::after{background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,#05070dcc 100%)}

/* Pestañas comunes: arriba en el escritorio, barra fija abajo en el celular. */
.pestanas{max-width:1160px;margin:auto;padding:0 32px;border-bottom:1px solid var(--borde);position:relative}
.pestanas::after{content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;transform:translateX(-50%);background:var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10L2.2-2.2 10 0 2.2 2.2 0 10-2.2 2.2-10 0-2.2-2.2z' fill='%23d8bc84'/%3E%3C/svg%3E") center/9px no-repeat}
.pestanas ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.pestanas li{min-width:0}
.pestana{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 0 14px;text-decoration:none;color:var(--suave);font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s}
.pestana img{width:20px;height:20px;opacity:.55;transition:opacity .2s,filter .2s}
.pestana:hover{color:var(--texto)}.pestana:hover img{opacity:.85}
.pestana[aria-current]{color:var(--oro);border-bottom-color:var(--oro)}
.pestana[aria-current] img{opacity:1;filter:drop-shadow(0 0 5px #e8d3ac66)}
.pestana:focus-visible{outline-offset:2px;border-radius:4px}
@media(max-width:720px){
  .pestanas{position:fixed;left:0;right:0;bottom:0;z-index:6;max-width:none;padding:0 4px env(safe-area-inset-bottom);background:#0c0f18f7;border-top:1px solid #d8bc8440;border-bottom:0;box-shadow:0 -10px 30px #0009}
  .pestanas::after{top:-6px;bottom:auto;background-color:#0c0f18}
  .pestanas ul{gap:0;justify-content:space-around}
  .pestanas li{flex:1 1 0}
  .pestana{flex-direction:column;justify-content:center;gap:3px;min-height:var(--alto-pestanas);padding:8px 1px 6px;font-size:.74rem;line-height:1.2;border-bottom:0;border-top:2px solid transparent;text-align:center}
  .pestana span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pestana img{width:23px;height:23px}
  .pestana[aria-current]{border-top-color:var(--oro);background:linear-gradient(#d8bc8414,transparent 70%)}
  /* El aviso y su botón de ayuda quedan justo encima de la barra, sin que nada los tape. */
  :root.con-marco.aviso-fijo .pie p{bottom:calc(var(--alto-pestanas) + env(safe-area-inset-bottom));padding-top:6px;padding-bottom:6px;row-gap:4px}
  :root.con-marco body{padding-bottom:calc(var(--alto-pestanas) + 92px + env(safe-area-inset-bottom))}
  :root.con-marco.aviso-fijo body{padding-bottom:calc(230px + env(safe-area-inset-bottom))}
  :root.con-marco:not(.aviso-fijo) .pie .apoyo-ahora{bottom:calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px)}
}

/* Ornamentos: cejas en versalitas con aire, estrellas de cuatro puntas, filetes dorados y letra capital. */
.ceja{font-family:"Fraunces",Georgia,serif;font-weight:400;font-variant-caps:all-small-caps;font-size:.98rem;letter-spacing:.26em;line-height:1.5}
.panel>.ceja::before,.afirmacion .ceja::before,.afirmacion .ceja::after{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.75em;vertical-align:.02em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10L2.2-2.2 10 0 2.2 2.2 0 10-2.2 2.2-10 0-2.2-2.2z' fill='%23d8bc84'/%3E%3C/svg%3E") center/contain no-repeat}
.afirmacion .ceja::after{margin:0 0 0 .75em}
.seccion>.intro::after{content:"";display:block;width:min(300px,72%);height:14px;margin-top:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'%3E%3Cg fill='none' stroke='%23d8bc84' stroke-opacity='.55'%3E%3Cpath d='M0 7h128M172 7h128'/%3E%3Ccircle cx='150' cy='7' r='6'/%3E%3C/g%3E%3Cpath d='M150 1l1.4 4.6L156 7l-4.6 1.4L150 13l-1.4-4.6L144 7l4.6-1.4z' fill='%23d8bc84'/%3E%3Ccircle cx='136' cy='7' r='1.3' fill='%23d8bc84'/%3E%3Ccircle cx='164' cy='7' r='1.3' fill='%23d8bc84'/%3E%3C/svg%3E") left center/contain no-repeat}
.panel{position:relative;box-shadow:0 22px 44px -30px #000d}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid #d8bc8412;border-radius:calc(var(--radio) - 5px);pointer-events:none}
[data-lectura]>p:first-of-type:not(.pronto):not(.suave):not(.etiqueta):not(.pregunta-posicion)::first-letter,.vivo-texto::first-letter,.capital::first-letter{float:left;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:3.25em;line-height:.8;margin:.07em .12em 0 0;color:var(--oro);text-shadow:0 0 18px #d8bc8433}
.afirmacion blockquote{text-shadow:0 0 30px #d8bc8422}
h1 em{text-shadow:0 0 34px #d8bc8426}

/* Grabados antiguos vistos por un telescopio viejo: oro sobre noche, baja opacidad y viñeta. */
.grabado{margin:0;position:relative;pointer-events:none}
.grabado img{display:block;width:100%;height:100%;object-fit:cover;filter:invert(1) sepia(1) saturate(1.5) hue-rotate(-8deg) brightness(.92) contrast(1.15);mix-blend-mode:screen;opacity:.5}
.grabado-ventana{display:block;position:relative;overflow:hidden;border-radius:50%;isolation:isolate}
.grabado-ventana::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,transparent 42%,#10141fb3 62%,#10141f 71%)}
.grabado-ventana::before{content:"";position:absolute;inset:3%;z-index:1;border-radius:50%;border:1px solid #d8bc8433;box-shadow:0 0 0 7px #10141f00,0 0 0 8px #d8bc841a}
.grabado-portada{position:absolute;inset:0;margin:auto;width:min(360px,100%);aspect-ratio:1;z-index:-1}
.grabado-portada .grabado-ventana{width:100%;height:100%}
.grabado-portada img{opacity:0;transition:opacity 1.6s ease-out;animation:girar-cielo 240s linear infinite}
.grabado-portada img.cargada{opacity:.42}
@keyframes girar-cielo{to{transform:rotate(360deg)}}
.grabado-pie{max-width:1160px;margin:30px auto 0;padding:0 32px;display:flex;flex-direction:column;align-items:center;gap:6px}
.grabado-pie .grabado-ventana{width:min(250px,64vw);aspect-ratio:1}
.grabado-pie img{opacity:.45;object-position:50% 40%}
.grabado-pie figcaption{color:var(--suave);font-size:.86rem;text-align:center}
.lamina{float:right;width:min(132px,34%);margin:0 0 12px 18px;aspect-ratio:1000/1425;border-radius:10px;overflow:hidden;position:relative;shape-outside:inset(0 round 10px)}
.lamina img{display:block;width:100%;height:100%;object-fit:cover;filter:invert(1) sepia(1) saturate(1.3) hue-rotate(-8deg) brightness(.95) contrast(1.1);mix-blend-mode:screen;opacity:.72}
.lamina::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 22px 10px #191e2b,inset 0 0 0 1px #d8bc8433}
@media(max-width:600px){.lamina{width:min(108px,32%)}.grabado-pie{padding:0 20px}}

/* El dorso propio del mazo (cartas/_dorso.svg) en todas las cartas boca abajo. */
.carta-dorso,.vivo-dorso,.naipe,.vivo-mazo-capa{background:#151a27 url("cartas/_dorso.svg") center/cover no-repeat}
.carta-dorso .sello-carta,.naipe-sello,.vivo-dorso{color:transparent}
.carta-dorso .etiqueta{margin-top:auto;padding:5px 10px;border-radius:6px;background:#10141fcc}

/* Puertas a lo más hondo, en Hoy. */
.puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 8px}
.puerta{display:flex;gap:16px;align-items:flex-start;min-height:44px;padding:22px;border:1px solid var(--borde);border-radius:var(--radio);text-decoration:none;background:linear-gradient(160deg,#1f2536cc,#141826e6);transition:border-color .2s,transform .2s}
.puerta:hover{border-color:#947e58;transform:translateY(-2px)}
.puerta img{flex:0 0 30px;width:30px;height:30px;margin-top:2px}
.puerta strong{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.2rem;color:var(--oro);margin-bottom:4px}
.puerta span{display:block;color:#d0cfd6;font-size:.9rem;line-height:1.5}
.puertas>*{min-width:0}
@media(max-width:850px){.puertas{grid-template-columns:minmax(0,1fr)}}

/* Tu carta: astral, saju y compatibilidad bajo una misma pestaña. */
.subpestanas{margin:40px 0 -26px}
.subpestanas ul{list-style:none;margin:0;padding:4px;display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--borde);border-radius:12px;background:#121722cc;max-width:100%}
.subpestanas a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:9px;text-decoration:none;color:var(--suave);font-size:.88rem}
.subpestanas a:hover{color:var(--texto)}
.subpestanas a[aria-current]{background:#d8bc841f;color:var(--oro);box-shadow:inset 0 0 0 1px #d8bc8455}
@media(max-width:600px){.subpestanas{margin:26px 0 -12px}.subpestanas ul{display:flex}.subpestanas li{flex:1 1 auto}.subpestanas a{justify-content:center;padding:8px 10px}}

@media(prefers-reduced-motion:reduce){
  .grabado-portada img{animation:none}
  .pestana,.pestana img,.puerta{transition:none}
  .puerta:hover{transform:none}
}
@media(max-width:600px){.ceja{font-size:.9rem;letter-spacing:.2em}:root.con-marco .seccion{padding-top:26px}:root.con-marco .portada h1{margin-bottom:16px}}
a.apoyo-ahora{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Y3: el aviso solo queda fijo en la primera pantalla de la visita (clase aviso-fijo, la pone marco.js con web/visita.js). Después pasa al pie
   y lo único fijo es el botón de ayuda, de 44 px, a la derecha y sobre la barra de pestañas en el celular. */
:root:not(.aviso-fijo) .pie .apoyo-ahora{position:fixed;z-index:5;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;box-shadow:0 6px 22px #000b}
/* W2: lo que se enfoca o se trae a la vista (un mensaje bajo un botón) no queda tapado por el aviso fijo ni por las pestañas. */
:root.con-marco{scroll-padding-bottom:84px}:root.con-marco.aviso-fijo{scroll-padding-bottom:120px}
@media(max-width:720px){:root.con-marco{scroll-padding-bottom:calc(var(--alto-pestanas) + 80px + env(safe-area-inset-bottom))}:root.con-marco.aviso-fijo{scroll-padding-bottom:calc(var(--alto-pestanas) + 150px + env(safe-area-inset-bottom))}}