/* =========================================================
   Las Tres Hermanitas — Biblioteca de cartas del tarot
   (index /cartas-del-tarot and each /carta/<slug> page)
   Both languages live in the HTML: .bi-es / .bi-en are toggled by body[data-lang].
   ========================================================= */

.bi-en{ display:none; }
body[data-lang="en"] .bi-en{ display:revert; }
body[data-lang="en"] .bi-es{ display:none; }

/* ---------- Card page hero ---------- */
.carta-hero{ text-align:left; }
.carta-hero-grid{ display:grid; grid-template-columns:minmax(200px,280px) 1fr; gap:clamp(24px,5vw,56px); align-items:center; max-width:880px; margin-inline:auto; }
.carta-figure{ margin:0; justify-self:center; width:100%; }
.carta-figure img{
  display:block; width:100%; height:auto; padding:5px; border-radius:14px;
  background:linear-gradient(135deg,#6b4f12 0%,#f5e2a8 22%,#c9a227 50%,#f5e2a8 78%,#6b4f12 100%);
  box-shadow:0 0 34px rgba(240,194,74,.45), 0 16px 32px rgba(10,24,64,.35);
}
.carta-hero .eyebrow{ justify-content:flex-start; }
.carta-hero h1{ margin:0 0 .15em; }
.carta-alt-name{ margin:0 0 1rem; font-family:var(--font-heading); font-style:italic; font-size:1.35rem; color:var(--color-text-muted); }
.carta-chips{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.carta-chips li{ padding:6px 14px; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--color-primary-dark); background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.55); }
.carta-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.carta-facts li{ padding:10px 12px; border-radius:12px; background:var(--color-surface); border:1px solid var(--color-border); }
.carta-facts small{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600; }
.carta-facts b{ display:block; margin-top:2px; color:var(--color-primary-dark); font-weight:600; }
.carta-hero .breadcrumbs{ justify-content:flex-start; }

/* ---------- Upright / reversed panels ---------- */
.carta-meaning{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:980px; margin-inline:auto; }
.carta-panel{ padding:28px 26px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.carta-panel h3{ margin:0 0 .5em; display:flex; align-items:center; gap:10px; }
.carta-panel h3::before{ content:''; flex:none; width:14px; height:14px; background:#c9a227; clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); }
.carta-panel.is-rev h3::before{ background:var(--color-teal); transform:rotate(180deg); }
.carta-panel .carta-chips{ margin:0 0 1rem; }
.carta-panel.is-rev .carta-chips li{ background:rgba(15,138,138,.10); border-color:rgba(15,138,138,.45); }
.carta-panel p{ margin:0; }

/* ---------- Love / work / spirit cards ---------- */
.carta-aspects .card h3{ margin-top:0; }

/* ---------- Reflection quote ---------- */
.carta-reflect{ max-width:820px; margin-inline:auto; }
.carta-reflect .pull-quote-kicker{ margin:0 0 .4em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#a67c00; text-align:center; }

/* ---------- Prev / next + neighbours ---------- */

/* ---------- Tiles (index + neighbours) ---------- */
.carta-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:18px; max-width:1080px; margin-inline:auto; }
.carta-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:12px 10px 14px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm); color:var(--color-text); overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease;
}
.carta-tile img{ display:block; width:100%; max-width:145px; height:auto; aspect-ratio:300/520; object-fit:cover; border-radius:8px; box-shadow:0 4px 12px rgba(10,24,64,.25); transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
.carta-tile-num{ margin-top:6px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#a67c00; font-weight:700; }
.carta-tile strong{ font-family:var(--font-heading); font-size:1.15rem; line-height:1.15; color:var(--color-primary-dark); }
.carta-tile small{ font-size:.78rem; line-height:1.3; color:var(--color-text-muted); }
.carta-tile::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%); transform:translateX(-120%); }
.carta-tile:hover, .carta-tile:focus-visible{
  transform:translateY(-8px) scale(1.02); border-color:rgba(201,162,39,.85);
  box-shadow:0 20px 40px rgba(10,24,64,.22), 0 0 0 2px rgba(201,162,39,.75), 0 0 26px rgba(240,194,74,.4);
}
.carta-tile:hover img, .carta-tile:focus-visible img{ transform:scale(1.05); box-shadow:0 0 22px rgba(240,194,74,.6); }
.carta-tile:hover::after, .carta-tile:focus-visible::after{ opacity:1; animation:cardSweep .9s ease forwards; }
.carta-neighbours .carta-grid{ grid-template-columns:repeat(auto-fit,minmax(130px,150px)); justify-content:center; max-width:860px; }

/* ---------- Index: filter chips and groups ---------- */
.carta-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:1.6rem 0 0; }
.carta-filter button{ font:inherit; cursor:pointer; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--color-cobalt); background:transparent; border:1.5px solid var(--color-cobalt); transition:background .2s,color .2s; }
.carta-filter button small{ font-weight:500; opacity:.75; margin-left:4px; }
.carta-filter button:hover, .carta-filter button.is-on{ background:var(--gradient-btn); border-color:transparent; color:var(--color-btn-text); }
.carta-filter button:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; }
.carta-group[hidden]{ display:none; }
.carta-group + .carta-group{ margin-top:3.4rem; }
.carta-group .section-head{ margin-bottom:1.8rem; }
.carta-intro{ max-width:760px; margin-inline:auto; }
.carta-intro h2{ text-align:center; }

@media (max-width:760px){
  .carta-hero-grid{ grid-template-columns:1fr; text-align:center; }
  .carta-figure{ max-width:210px; }
  .carta-hero .eyebrow, .carta-hero .breadcrumbs{ justify-content:center; }
  .carta-chips{ justify-content:center; }
  .carta-meaning{ grid-template-columns:1fr; }
  .carta-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .carta-neighbours .carta-grid{ grid-template-columns:repeat(2,minmax(0,150px)); }
}
@media (prefers-reduced-motion:reduce){
  .carta-tile, .carta-tile img{ transition:none; }
  .carta-tile:hover, .carta-tile:focus-visible, .carta-tile:hover img{ transform:none; }
  .carta-tile:hover::after, .carta-tile:focus-visible::after{ animation:none; opacity:0; }
}

/* ---------- Image credit: well below the last button ---------- */
.carta-credit{ margin:5.5rem 0 0; text-align:center; font-size:.85rem; color:var(--color-text-muted); }
.carta-grid + .carta-credit, .carta-group + .carta-credit{ margin-top:3rem; }


/* ---------- Animated card (test: Los Enamorados) ---------- */
.carta-figure.is-anim{ position:relative; perspective:900px; }
.carta-halo{ position:absolute; inset:-16%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle closest-side, rgba(240,194,74,.6), rgba(240,194,74,.22) 48%, rgba(240,194,74,0) 72%);
  animation:cartaBreathe 4.4s ease-in-out infinite; }
.carta-float{ position:relative; z-index:1; animation:cartaIn 1.1s cubic-bezier(.2,.8,.25,1) both, cartaFloat 6s ease-in-out 1.1s infinite; }
.carta-tilt{ position:relative; display:block; border-radius:14px; transform-style:preserve-3d; transition:transform .18s ease-out; will-change:transform; }
.carta-tilt img{ position:relative; }
/* a band of light that crosses the card every few seconds */
.carta-shine{ position:absolute; inset:5px; border-radius:10px; overflow:hidden; pointer-events:none; opacity:.8; mix-blend-mode:screen;
  background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 62%) 150% 0 / 260% 100% no-repeat;
  animation:cartaShine 5.5s ease-in-out 1.5s infinite; }
/* soft glare that follows the pointer */
.carta-glare{ position:absolute; inset:5px; border-radius:10px; pointer-events:none; opacity:0; transition:opacity .25s ease; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%), rgba(255,255,255,.65), rgba(255,255,255,0) 58%); }
.carta-tilt.is-hover .carta-glare{ opacity:1; }
/* little stars around the card */
.carta-spark{ position:absolute; z-index:2; width:7%; aspect-ratio:1; pointer-events:none; background:#fff3c4; opacity:0;
  clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); filter:drop-shadow(0 0 4px rgba(240,194,74,.95));
  animation:cartaTwinkle 3.4s ease-in-out infinite; }
.carta-spark.s1{ left:-9%; top:12%; animation-delay:1.4s; }
.carta-spark.s2{ right:-8%; top:24%; width:5%; animation-delay:2.3s; animation-duration:4s; }
.carta-spark.s3{ left:-6%; bottom:20%; width:5.5%; animation-delay:3s; }
.carta-spark.s4{ right:-10%; bottom:10%; animation-delay:1.9s; animation-duration:3.8s; }
.carta-spark.s5{ left:46%; top:-6%; width:4.5%; animation-delay:2.7s; animation-duration:4.4s; }
@keyframes cartaIn{ from{ opacity:0; transform:rotateY(-85deg) translateY(34px) scale(.86); } to{ opacity:1; transform:none; } }
@keyframes cartaFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes cartaBreathe{ 0%,100%{ opacity:.45; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.08); } }
@keyframes cartaShine{ 0%,40%{ background-position:150% 0; } 75%,100%{ background-position:-40% 0; } }
@keyframes cartaTwinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(25deg); } }
@media (prefers-reduced-motion: reduce){
  .carta-halo, .carta-float, .carta-shine, .carta-spark{ animation:none; }
  .carta-halo{ opacity:.6; } .carta-shine, .carta-spark{ display:none; } .carta-tilt{ transition:none; }
}

/* ---------- "How to use this library": fills the free cells next to the last card of each group ---------- */
.carta-howto{ grid-column:1 / -1; align-self:stretch; padding:16px 18px; border-radius:var(--radius-md); text-align:left;
  background:rgba(58,99,216,.06); border:1px dashed rgba(58,99,216,.4); font-size:.86rem; line-height:1.5; color:var(--color-text); }
.carta-howto h3{ margin:0 0 .4em; font-size:1.2rem; color:var(--color-primary-dark); }
.carta-howto p{ margin:0 0 .55em; }
.carta-howto p:last-child{ margin:0; }
.carta-grid > .carta-tile{ align-self:start; }
.carta-howto{ font-size:.82rem; line-height:1.45; padding:14px 16px; }

/* ---------- Animated card page (test): the love / work / spirit cards sweep a band of light on their own, in turn,
   like the therapy cards of the home page do on hover. With the mouse over a card the home-page sweep + lift still apply. ---------- */
.carta-aspects.is-anim .service-card::after{
  opacity:1; background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.6) 50%, transparent 64%);
  animation:cartaCardSweep 7s ease-in-out infinite; }
.carta-aspects.is-anim .service-card:nth-child(2)::after{ animation-delay:2.3s; }
.carta-aspects.is-anim .service-card:nth-child(3)::after{ animation-delay:4.6s; }
.carta-aspects.is-anim .service-card:hover::after{ animation:cardSweep .9s ease forwards; }
@keyframes cartaCardSweep{ 0%,62%{ transform:translateX(-120%); } 88%,100%{ transform:translateX(120%); } }
@media (prefers-reduced-motion: reduce){ .carta-aspects.is-anim .service-card::after{ animation:none; opacity:0; } }

/* ---------- Animated card page (test): "Al derecho" / "Al revés" panels ----------
   1) two moods: warm gold glow for upright, cool turquoise for reversed, twinkling star (upside down in the reversed one),
      panels slide in from opposite sides
   2) keyword chips appear one after another, a band of light crosses them once, they lift on hover
   3) mini card: upright in "Al derecho"; in "Al revés" it turns 180° when it enters; hover or tap swings it to the other position */
.carta-meaning.is-anim .carta-panel{ position:relative; border-color:rgba(201,162,39,.7); animation:panelGold 4.8s ease-in-out infinite; }
.carta-meaning.is-anim .carta-panel.is-rev{ border-color:rgba(15,138,138,.65); animation-name:panelTeal; animation-delay:1.2s; }
@keyframes panelGold{ 0%,100%{ box-shadow:0 2px 10px rgba(10,24,64,.08), 0 0 0 0 rgba(240,194,74,0); } 50%{ box-shadow:0 2px 10px rgba(10,24,64,.08), 0 0 26px 2px rgba(240,194,74,.45); } }
@keyframes panelTeal{ 0%,100%{ box-shadow:0 2px 10px rgba(10,24,64,.08), 0 0 0 0 rgba(15,138,138,0); } 50%{ box-shadow:0 2px 10px rgba(10,24,64,.08), 0 0 26px 2px rgba(15,138,138,.4); } }
/* slide in from the sides (the reveal rule only fades them in from below) */
.carta-meaning.is-anim .carta-panel.reveal:not(.is-visible){ transform:translateX(-46px); }
.carta-meaning.is-anim .carta-panel.is-rev.reveal:not(.is-visible){ transform:translateX(46px); }
.carta-meaning.is-anim .carta-panel.reveal{ transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.2,.8,.25,1); }
/* star next to the title */
.carta-meaning.is-anim .carta-panel h3::before{ filter:drop-shadow(0 0 4px rgba(240,194,74,.9)); animation:starUp 2.8s ease-in-out infinite; }
.carta-meaning.is-anim .carta-panel.is-rev h3::before{ filter:drop-shadow(0 0 4px rgba(15,138,138,.9)); animation:starDown 2.8s ease-in-out 0.6s infinite; }
@keyframes starUp{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(1.4) rotate(35deg); } }
@keyframes starDown{ 0%,100%{ transform:rotate(180deg) scale(1); } 50%{ transform:rotate(180deg) scale(1.4) rotate(-35deg); } }
/* chips one after another, with a light band and a lift on hover */
.carta-meaning.is-anim .carta-chips li{ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.carta-meaning.is-anim .carta-panel.is-visible .carta-chips li{ animation:chipIn .65s cubic-bezier(.2,1.3,.4,1) backwards; }
.carta-meaning.is-anim .carta-chips li::after{ content:''; position:absolute; inset:0; pointer-events:none; transform:translateX(-130%);
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.8) 50%, transparent 65%); }
.carta-meaning.is-anim .carta-panel.is-visible .carta-chips li::after{ animation:chipSheen .9s ease forwards; }
.carta-meaning.is-anim .carta-chips li:nth-child(1), .carta-meaning.is-anim .carta-chips li:nth-child(1)::after{ animation-delay:.45s; }
.carta-meaning.is-anim .carta-chips li:nth-child(2), .carta-meaning.is-anim .carta-chips li:nth-child(2)::after{ animation-delay:.6s; }
.carta-meaning.is-anim .carta-chips li:nth-child(3), .carta-meaning.is-anim .carta-chips li:nth-child(3)::after{ animation-delay:.75s; }
.carta-meaning.is-anim .carta-chips li:nth-child(n+4), .carta-meaning.is-anim .carta-chips li:nth-child(n+4)::after{ animation-delay:.9s; }
.carta-meaning.is-anim .carta-chips li::after{ animation-delay:1.1s !important; }
.carta-meaning.is-anim .carta-chips li:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(201,162,39,.38); }
.carta-meaning.is-anim .carta-panel.is-rev .carta-chips li:hover{ box-shadow:0 8px 16px rgba(15,138,138,.32); }
@keyframes chipIn{ from{ opacity:0; transform:translateY(12px) scale(.85); } to{ opacity:1; transform:none; } }
@keyframes chipSheen{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }
.carta-meaning.is-anim .carta-panel.is-visible > p{ animation:textUp .8s ease 1s backwards; }
@keyframes textUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* mini card */
.carta-mini{ float:right; width:64px; margin:0 0 8px 14px; animation:miniFloat 5.2s ease-in-out infinite; cursor:pointer; }
.carta-panel.is-rev .carta-mini{ animation-delay:1.3s; }
.carta-mini img{ display:block; width:100%; height:auto; padding:2px; border-radius:7px; --rot:0deg;
  background:linear-gradient(135deg,#6b4f12 0%,#f5e2a8 22%,#c9a227 50%,#f5e2a8 78%,#6b4f12 100%);
  box-shadow:0 6px 14px rgba(10,24,64,.3), 0 0 14px rgba(240,194,74,.45);
  transform:rotate(var(--rot)); transition:transform .8s cubic-bezier(.3,1.35,.4,1); }
.carta-mini.is-rev img{ --rot:180deg; box-shadow:0 6px 14px rgba(10,24,64,.3), 0 0 14px rgba(15,138,138,.5); }
.carta-mini.is-flipped img{ transform:rotate(calc(var(--rot) + 180deg)); }
/* no flip on hover: with the pointer resting on the card it would never turn back. Click / tap flips it and it returns by itself (js/carta-anim.js); on hover it only gets brighter */
@media (hover:hover) and (pointer:fine){ .carta-mini:hover img{ filter:brightness(1.1) saturate(1.1); } }
.carta-panel.is-visible .carta-mini img{ animation:miniUp .9s cubic-bezier(.2,.9,.3,1) .35s backwards; }
.carta-panel.is-visible .carta-mini.is-rev img{ animation:miniTurn 1.4s cubic-bezier(.3,1.25,.4,1) .55s backwards; }
@keyframes miniFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes miniUp{ from{ opacity:0; transform:translateY(18px) scale(.8) rotate(0deg); } to{ opacity:1; transform:rotate(0deg); } }
@keyframes miniTurn{ 0%{ opacity:0; transform:rotate(0deg) scale(.8); } 25%{ opacity:1; transform:rotate(0deg) scale(1); } 100%{ transform:rotate(180deg); } }
@media (max-width:520px){ .carta-mini{ width:54px; margin-left:10px; } }
@media (prefers-reduced-motion: reduce){
  .carta-meaning.is-anim .carta-panel, .carta-meaning.is-anim .carta-panel h3::before, .carta-mini, .carta-panel .carta-mini img,
  .carta-meaning.is-anim .carta-chips li, .carta-meaning.is-anim .carta-chips li::after, .carta-meaning.is-anim .carta-panel > p{ animation:none !important; }
  .carta-meaning.is-anim .carta-panel.reveal:not(.is-visible){ transform:none; }
  .carta-mini img{ transition:none; } .carta-meaning.is-anim .carta-chips li::after{ display:none; }
}

/* "How to use this library": its own panel under the top panel, with the blue sky showing between the two (the section is transparent,
   its container is the ivory panel) */
.carta-howto-wrap.section{ padding-block:clamp(22px,3vw,36px); padding-top:clamp(44px,6vw,72px); }
.carta-howto-wrap + .section{ padding-top:clamp(28px,4vw,54px); padding-bottom:clamp(14px,2vw,27px); }
.carta-howto-wrap + .section + .section{ padding-top:clamp(14px,2vw,27px); padding-bottom:clamp(28px,4vw,54px); }
#main > .carta-howto-wrap + .section + .section:last-child{ margin-bottom:28px; }   /* index: the call-to-action panel, half the blue space above and below */
.carta-howto-sheet{ max-width:900px; }
.carta-howto.is-top{ grid-column:auto; max-width:none; margin:0; padding:0; border:0; background:none; box-shadow:none; font-size:.97rem; line-height:1.6; }
.carta-howto.is-top h3{ margin:0 0 .5em; font-size:1.55rem; text-align:center; }
.carta-howto.is-top p{ margin:0 0 .7em; }
.carta-howto.is-top p:last-child{ margin-bottom:0; }
@media (max-width:520px){ .carta-howto.is-top{ font-size:.93rem; } }


/* ---------- Index: every card tile exactly the same size ----------
   same picture box (the pictures are stretched to it, a 1-3% difference at most), same room for a one- or two-line name,
   and the tiles of a row are as tall as the tallest one */
.carta-grid > .carta-tile{ align-self:stretch; }
.carta-grid .carta-tile img{ object-fit:fill; }
.carta-grid .carta-tile strong{ display:block; min-height:2.4em; }

/* ---------- Top of the "Significado" section: previous card, back to the 78 cards, next card ---------- */
.carta-navbar{ display:grid; grid-template-columns:repeat(3,minmax(0,250px)); justify-content:space-between; align-items:stretch; gap:12px; max-width:980px; margin:0 auto 2.2rem; }
.carta-navbar > .btn{ width:100%; min-width:0; min-height:56px; padding:10px 16px; white-space:normal; line-height:1.25; text-align:center; }
.carta-neighbours .carta-navbar{ margin-top:0; }
@media (max-width:640px){
  .carta-navbar{ grid-template-columns:repeat(2,minmax(0,150px)); justify-content:center; }
  .carta-navbar > .btn{ min-height:62px; }
  .carta-navbar > .btn:not(.carta-nav-link){ grid-column:1 / -1; grid-row:2; justify-self:center; width:min(150px, calc(50% - 6px)); }
}

/* ---------- Card pages: half the blue space around the "¿Qué dicen las cartas para ti?" panel ---------- */
.carta-cta.section{ padding-block:clamp(28px,4vw,54px); }
.carta-reflect-sec.section{ padding-bottom:clamp(28px,4vw,54px); }


/* ---------- Card pages: short video above the upright / reversed panels ---------- */
.carta-video{ max-width:760px; margin:0 auto 28px; text-align:center; }
.carta-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--radius-lg); background:var(--color-primary-dark); cursor:pointer;
  border:1px solid rgba(201,162,39,.7); box-shadow:0 0 28px rgba(240,194,74,.28), 0 14px 30px rgba(10,24,64,.28); }
.carta-video figcaption{ margin-top:8px; font-size:.82rem; color:var(--color-text-muted); }
.carta-video-frame{ position:relative; }
.carta-video-mark{ position:absolute; right:clamp(10px,2.4%,18px); bottom:clamp(8px,2.2%,16px); pointer-events:none; font-family:var(--font-heading); font-weight:600; letter-spacing:.06em;
  font-size:clamp(.72rem,2.2vw,1rem); color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(10,24,64,.85), 0 0 10px rgba(10,24,64,.55); }
.carta-video-sound{ position:absolute; left:clamp(10px,2.4%,18px); bottom:clamp(8px,2.2%,16px); width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  color:#fff; background:rgba(10,24,64,.62); border:1px solid rgba(240,194,74,.8); backdrop-filter:blur(3px); transition:background .2s, transform .2s; }
.carta-video-sound:hover, .carta-video-sound:focus-visible{ background:rgba(10,24,64,.85); transform:scale(1.08); }
.carta-video-sound .snd-on{ display:none; }
.carta-video-sound[aria-pressed="true"] .snd-on{ display:block; }
.carta-video-sound[aria-pressed="true"] .snd-off{ display:none; }

/* ---------- Card pages: "Para reflexionar" now opens the call-to-action panel ---------- */
.cta-reflect{ margin:0 auto; max-width:640px; }
.cta-reflect .pull-quote-icon{ color:#f0c24a; margin-bottom:10px; }
.cta-reflect-kicker{ margin:0 0 .5em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#f5e2a8 !important; }
.cta-reflect blockquote{ margin:0 auto; max-width:30ch; font-family:var(--font-heading); font-style:italic; font-weight:500; font-size:clamp(1.3rem,3vw,1.85rem); line-height:1.3; color:#fff; }
.cta-reflect::after{ content:''; display:block; width:72px; height:1px; margin:1.8rem auto 1.6rem; background:linear-gradient(90deg,transparent,rgba(245,226,168,.85),transparent); }

/* ---------- Library index: "El Árbol de la Vida" video ---------- */
.arbol-wrap.section{ padding-block:clamp(28px,4vw,54px); }
.arbol-video{ max-width:900px; margin:0 auto; text-align:center; }
.arbol-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--radius-lg); background:#050f2e;
  border:1px solid rgba(201,162,39,.7); box-shadow:0 0 34px rgba(240,194,74,.3), 0 16px 34px rgba(10,24,64,.3); }
.arbol-note{ margin:10px 0 0; font-size:.9rem; color:var(--color-text-muted); }

/* ---------- Page "El Árbol de la Vida y el tarot" ---------- */
.arbol-more{ margin:18px 0 0; }
.ta-text{ max-width:820px; margin:0 auto; }
.ta-text p{ margin:0 0 1em; }
.ta-text a{ color:var(--color-cobalt); text-decoration:underline; text-decoration-color:rgba(201,162,39,.8); text-underline-offset:3px; }
.ta-note{ margin-top:1.4em; padding:16px 20px; border-left:4px solid #c9a227; background:rgba(201,162,39,.10); border-radius:10px; }
.ta-note > b{ display:block; margin-bottom:.4em; color:var(--color-primary-dark); }
.ta-note p{ margin:0; }
.ta-list{ margin:0 0 1em; padding-left:1.2em; }
.ta-list li{ margin:.3em 0; }
.ta-hint{ text-align:center; margin:-.4em 0 1.2em; color:var(--color-text-muted); font-size:.92rem; }
.ta-svg-wrap{ max-width:560px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(201,162,39,.7);
  background:radial-gradient(ellipse at 50% 30%, #123a7d 0%, #0b1f55 55%, #050f2e 100%); box-shadow:0 0 34px rgba(240,194,74,.25), 0 16px 34px rgba(10,24,64,.3); }
.ta-svg{ display:block; width:100%; height:auto; }
.ta-path{ stroke:rgba(245,226,168,.55); stroke-width:3; stroke-linecap:round; }
.ta-seph circle{ fill:#e7c25a; stroke:#fff6cf; stroke-width:2.5; filter:drop-shadow(0 0 10px rgba(240,194,74,.8)); }
.ta-he{ fill:#3a2606; font-family:"Times New Roman",serif; font-weight:700; font-size:19px; text-anchor:middle; dominant-baseline:middle; }
.ta-name{ fill:#f5e2a8; font-family:var(--font-heading); font-style:italic; font-size:25px; text-anchor:middle; }
.ta-letter circle{ fill:#0b1f55; stroke:#f0c24a; stroke-width:2.5; transition:fill .2s, transform .2s; transform-box:fill-box; transform-origin:center; }
.ta-letter text{ fill:#f5e2a8; font-family:"Times New Roman",serif; font-weight:700; font-size:25px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.ta-letter:focus-visible{ outline:none; }
.ta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; max-width:1100px; margin:1.6em auto 0; }
.ta-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ta-card-top .card-icon{ margin-bottom:0; }
.ta-icon-n{ font-family:var(--font-heading); font-weight:700; font-size:1.7rem; line-height:1; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.card-icon .as-pg{ color:#fff; font-size:1.9rem; line-height:1; }
.ta-card-he{ font-family:"Times New Roman",serif; font-size:1.7rem; color:#a67c00; }
.ta-card p.ta-minor{ margin:auto 0 0; padding-top:.2em; font-size:.92rem; color:var(--color-text-muted); }
.ta-card p.ta-minor b{ color:var(--color-primary-dark); }
.ta-table-wrap{ max-width:900px; margin:1.4em auto 0; overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.ta-table{ width:100%; border-collapse:collapse; min-width:560px; }
.ta-table th{ text-align:left; padding:16px 14px 14px; font-family:var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:#f5e2a8; white-space:nowrap;
  background:
    radial-gradient(circle at 7% 30%, rgba(255,246,214,.9) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 31% 72%, rgba(255,246,214,.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 24%, rgba(255,246,214,.8) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 84% 66%, rgba(255,246,214,.7) 0 1.2px, transparent 1.8px),
    linear-gradient(180deg, #123a7d 0%, #0b2a66 55%, #071b49 100%);
  border-bottom:3px solid #c9a227; box-shadow:inset 0 -10px 18px -12px rgba(240,194,74,.55); }
.ta-table th + th{ border-left:1px solid rgba(245,226,168,.14); }
.ta-th-ic{ display:inline-flex; width:18px; height:18px; margin-right:9px; vertical-align:-3px; color:#f0c24a; align-items:center; justify-content:center; }
.ta-th-ic svg{ width:18px; height:18px; }
.ta-th-he{ font-family:"Times New Roman",serif; font-size:1.2rem; letter-spacing:0; font-weight:700; line-height:1; }
.ta-table td{ padding:11px 14px; border-top:1px solid var(--color-border); vertical-align:top; }
.ta-table small{ display:block; color:var(--color-text-muted); font-size:.8rem; margin-top:2px; }
.ta-t-he span[lang="he"]{ font-family:"Times New Roman",serif; font-size:1.4rem; color:#a67c00; margin-right:4px; }
.ta-roman{ display:inline-block; min-width:2.2em; font-family:var(--font-heading); font-weight:700; color:#a67c00; }
.ta-table a{ font-weight:600; color:var(--color-cobalt); }
.ta-t-join{ white-space:nowrap; color:var(--color-text-muted); font-size:.92rem; }
.ta-video.section, .ta-map.section, .ta-intro.section, .ta-paths.section, .ta-variants.section, .ta-minor-sec.section{ padding-block:clamp(28px,4vw,54px); }

/* button at the end of the "¿Cómo usar esta biblioteca?" panel */
.carta-howto-more{ margin:.9em 0 0 !important; text-align:center; }
.carta-howto-more .btn{ max-width:100%; white-space:normal; text-align:center; }

/* Tree of Life video: no fullscreen button */
.arbol-video video::-webkit-media-controls-fullscreen-button{ display:none; }

/* ---------- "en el Árbol de la Vida" block on the Major Arcana pages ---------- */
.carta-tree{ padding-block:clamp(26px,4vw,46px); }
.carta-tree-box{ display:grid; grid-template-columns:minmax(150px,200px) 1fr; gap:clamp(18px,4vw,40px); align-items:center; max-width:860px; margin:0 auto; padding:clamp(18px,3vw,28px); border:1px solid rgba(201,162,39,.55); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.carta-tree-map{ max-width:200px; width:100%; margin:0 auto; }
.carta-tree-map .ta-path{ stroke:rgba(245,226,168,.35); stroke-width:6; }
.carta-tree-map .ta-path.is-on{ stroke:#f0c24a; stroke-width:12; filter:drop-shadow(0 0 10px rgba(240,194,74,.9)); }
.ct-seph{ fill:#6b5a2a; stroke:rgba(245,226,168,.5); stroke-width:3; }
.ct-seph.is-on{ fill:#e7c25a; stroke:#fff6cf; filter:drop-shadow(0 0 10px rgba(240,194,74,.8)); }
.ct-letter{ fill:#0b1f55; stroke:#f0c24a; stroke-width:5; }
.ct-letter-t{ fill:#f5e2a8; font-family:"Times New Roman",serif; font-weight:700; font-size:56px; text-anchor:middle; dominant-baseline:middle; }
.carta-tree-text .eyebrow{ margin:0 0 .3em; }
.carta-tree-text h2{ margin:0 0 .35em; font-size:clamp(1.4rem,3vw,1.9rem); }
.carta-tree-path{ margin:0 0 .6em; color:var(--color-text-muted); }
.carta-tree-path b{ color:var(--color-primary-dark); }
.carta-tree-path span[lang="he"]{ font-family:"Times New Roman",serif; font-size:1.3rem; color:#a67c00; margin-left:4px; }
.carta-tree-text p{ margin:0 0 .8em; }
.carta-tree-note{ font-size:.88rem; color:var(--color-text-muted); }
@media (max-width:560px){ .carta-tree-box{ grid-template-columns:1fr; text-align:center; } .carta-tree-map{ max-width:150px; } }
/* arriving from a card (/arbol-de-la-vida.html#camino-N): that path lights up */
.ta-letter:target circle:not(.ta-lring){ fill:#c9a227; }
.ta-letter:target text{ fill:#0b1f55; }
.ta-svg:has(#camino-11:target) .ta-p-11{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-12:target) .ta-p-12{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-13:target) .ta-p-13{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-14:target) .ta-p-14{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-15:target) .ta-p-15{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-16:target) .ta-p-16{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-17:target) .ta-p-17{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-18:target) .ta-p-18{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-19:target) .ta-p-19{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-20:target) .ta-p-20{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-21:target) .ta-p-21{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-22:target) .ta-p-22{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-23:target) .ta-p-23{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-24:target) .ta-p-24{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-25:target) .ta-p-25{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-26:target) .ta-p-26{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-27:target) .ta-p-27{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-28:target) .ta-p-28{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-29:target) .ta-p-29{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-30:target) .ta-p-30{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-31:target) .ta-p-31{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-svg:has(#camino-32:target) .ta-p-32{ stroke:#f0c24a; stroke-width:7; filter:drop-shadow(0 0 8px rgba(240,194,74,.9)); }
.ta-letter{ scroll-margin-top:42vh; }
.carta-tree-text{ min-width:0; }
.carta-tree-text .btn{ max-width:100%; white-space:normal; text-align:center; }
@media (max-width:560px){ .carta-tree-box{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Page "El tarot y la rueda de la astrología" ---------- */
.as-wrap{ max-width:780px; }
.as-ring{ fill:none; stroke:rgba(245,226,168,.55); stroke-width:2; }
.as-spoke{ stroke:rgba(245,226,168,.3); stroke-width:1.5; }
.as-glyph{ fill:#f0c24a; font-family:"Segoe UI Symbol","Noto Sans Symbols","Apple Symbols","DejaVu Sans",sans-serif; font-size:40px; text-anchor:middle; dominant-baseline:middle; }
.as-name{ fill:#f5e2a8; font-family:var(--font-heading); font-style:italic; font-size:19px; }
.as-card circle{ fill:#0b1f55; stroke:#f0c24a; stroke-width:2.5; transition:fill .2s, transform .2s; transform-box:fill-box; transform-origin:center; }
.as-card text{ fill:#f5e2a8; font-family:"Times New Roman",serif; font-weight:700; font-size:18px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.as-card:focus-visible{ outline:none; }
.as-ruler{ fill:rgba(245,226,168,.85); font-family:"Segoe UI Symbol","Noto Sans Symbols","Apple Symbols","DejaVu Sans",sans-serif; font-size:36px; text-anchor:middle; dominant-baseline:middle; }
.as-center{ fill:#fff; font-family:var(--font-heading); font-weight:700; font-size:34px; text-anchor:middle; }
.as-center-s{ fill:#f5e2a8; font-family:var(--font-heading); font-style:italic; font-size:21px; text-anchor:middle; }
.as-legend{ list-style:none; margin:1.2em auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1.6em; color:var(--color-text-muted); font-size:.95rem; }
.as-legend b{ color:var(--color-primary-dark); }
.as-sg, .as-pg{ font-family:"Segoe UI Symbol","Noto Sans Symbols","Apple Symbols","DejaVu Sans",sans-serif; color:#a67c00; font-size:1.15em; }
.as-pg{ font-size:1.9rem; }
.as-table td:first-child{ white-space:nowrap; }
.as-suit-h{ max-width:900px; margin:1.8em auto .2em; font-size:1.4rem; }
.as-svg .as-glyph, .as-svg .as-ruler{ font-variant-emoji:text; }
.ta-card a{ font-weight:600; color:var(--color-cobalt); }
.ta-card-top .ta-roman{ font-size:1.25rem; min-width:0; }

/* the two buttons at the end of the "¿Cómo usar esta biblioteca?" panel, side by side */
.carta-howto-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
/* "Ver en la rueda" under the Astrología fact of the Major Arcana */
.carta-facts a.carta-fact-link{ display:block; margin-top:4px; font-size:.82rem; font-weight:600; color:var(--color-cobalt); text-decoration:underline; text-decoration-color:rgba(201,162,39,.8); text-underline-offset:3px; }

/* "Más allá de los Arcanos Mayores": suit cards and the court-cards card */
.ta-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1180px){ .ta-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:640px){ .ta-grid-4{ grid-template-columns:minmax(0,1fr); } }
.ta-world{ font-family:var(--font-heading); font-style:italic; font-size:1.35rem; color:#a67c00; }
.ta-card .card-link{ margin-top:auto; color:var(--color-cobalt); }
.ta-court{ grid-column:1 / -1; }
.ta-court h3{ margin-bottom:.3em; }
.ta-court-row{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:18px 28px; margin-top:.4em; padding-top:18px; border-top:1px solid var(--color-border); }
.ta-court-item{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:110px; }
.ta-court-item .ta-card-he{ font-size:2.4rem; line-height:1.1; }
.ta-court-item b{ color:var(--color-primary-dark); font-size:1.05rem; }
.ta-court-item small{ color:var(--color-text-muted); font-size:.84rem; }
.ta-more{ text-align:center; margin:1.2em 0 0; }
.ta-more + .ta-more{ margin-top:.8em; }

/* big letter circle: Hebrew letter on top, card number under it; path number (plain gold text) next to the circle */
.ta-letter .ta-lt-h{ font-size:25px; }
.ta-letter .ta-lt-c{ font-size:12.5px; fill:#fff; letter-spacing:.02em; }
.ta-letter .ta-lt-sep{ stroke:rgba(240,194,74,.7); stroke-width:1; }
.ta-letter:target .ta-lt-c{ fill:#0b1f55; }
.ta-letter:target .ta-lt-sep{ stroke:rgba(11,31,85,.5); }
.ta-letter .ta-tag-n text{ fill:#f0c24a; font-family:"Jost",-apple-system,"Segoe UI",sans-serif; font-weight:600; font-size:14px; paint-order:stroke; stroke:rgba(5,15,46,.95); stroke-width:4px; stroke-linejoin:round; }
.ta-key{ list-style:none; margin:-.2em auto 1.2em; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1.6em; color:var(--color-text-muted); font-size:.92rem; }
.ta-key li{ display:inline-flex; align-items:center; gap:.5em; }
.ta-key-n{ color:#a67c00; font-weight:700; font-size:.95rem; min-width:1.6em; text-align:center; }
.ta-key-h{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:2.6em; height:2.6em; border-radius:50%; background:#0b1f55; border:1.5px solid #c9a227; line-height:1; }
.ta-key-h b{ font-family:"Times New Roman",serif; font-weight:700; font-size:.95rem; color:#f5e2a8; }
.ta-key-h i{ font-style:normal; font-family:"Times New Roman",serif; font-size:.62rem; font-weight:700; color:#fff; margin-top:2px; padding-top:2px; border-top:1px solid rgba(240,194,74,.6); }

/* the Tree of Life diagram has the same (wide) size on every screen; on narrow screens it scrolls sideways inside its frame */
.ta-tree-wrap{ max-width:780px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c9a227 rgba(255,255,255,.12); }
.ta-tree-wrap .ta-svg{ width:740px; max-width:none; margin:0 auto; }
.ta-scroll-hint{ display:none; text-align:center; margin:.7em 0 0; font-size:.88rem; color:var(--color-text-muted); }
@media (max-width:800px){ .ta-scroll-hint{ display:block; } }

/* ---------- Tiféret shines like "La Fuente" of the home page ---------- */
.ta-seph.ta-sun .ta-sun-glow{ fill:url(#ta-sun-g); stroke:none; filter:none; mix-blend-mode:screen; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:taSunBreathe 3.6s ease-in-out infinite; }
.ta-seph.ta-sun .ta-sun-wave{ fill:none; stroke:rgba(255,236,170,.9); stroke-width:2; filter:drop-shadow(0 0 6px rgba(255,214,120,.8)); pointer-events:none; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; opacity:0; animation:taSunWave 4.2s ease-out infinite; }
.ta-seph.ta-sun .ta-sun-wave.w2{ animation-delay:2.1s; }
.ta-sun-rays{ pointer-events:none; mix-blend-mode:screen; transform-box:fill-box; transform-origin:center; animation:taSunSpin 50s linear infinite, taSunShimmer 2.8s ease-in-out infinite; }
.ta-sun-rays line{ stroke:url(#ta-ray-g); stroke-width:1.3; stroke-linecap:round; }
.ta-sun-sheen{ pointer-events:none; animation:taSunSheen 4.4s ease-in-out infinite; }
.ta-spark{ fill:#fff6cf; pointer-events:none; opacity:0; filter:drop-shadow(0 0 4px rgba(255,226,150,1)); transform-box:fill-box; transform-origin:center; animation:taSunTwinkle 3s ease-in-out infinite; }
.ta-spark.s2{ animation-delay:.9s; animation-duration:3.4s; } .ta-spark.s3{ animation-delay:1.8s; } .ta-spark.s4{ animation-delay:.5s; animation-duration:3.8s; } .ta-spark.s5{ animation-delay:1.4s; animation-duration:2.8s; }
@keyframes taSunBreathe{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.12); } }
@keyframes taSunWave{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(2.4); } }
@keyframes taSunSpin{ to{ transform:rotate(360deg); } }
@keyframes taSunShimmer{ 0%,100%{ opacity:.4; } 50%{ opacity:.9; } }
@keyframes taSunSheen{ 0%,35%{ transform:translateX(-120px); } 70%,100%{ transform:translateX(120px); } }
@keyframes taSunTwinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(25deg); } }
@media (prefers-reduced-motion: reduce){
  .ta-seph.ta-sun .ta-sun-glow, .ta-sun-rays, .ta-sun-sheen, .ta-spark{ animation:none; }
  .ta-seph.ta-sun .ta-sun-glow{ opacity:.85; } .ta-sun-rays{ opacity:.55; } .ta-seph.ta-sun .ta-sun-wave, .ta-sun-sheen{ display:none; } .ta-spark{ opacity:.8; }
}


/* ---------- the circles of the paths float on the mouse over, like the circles of the map on the home page ---------- */
.ta-letter{ cursor:pointer; }
.ta-letter .ta-lf{ transform-box:fill-box; transform-origin:center; }
.ta-letter .ta-lring{ fill:rgba(245,226,168,.10); stroke:rgba(245,226,168,.95); stroke-width:2; filter:drop-shadow(0 0 7px rgba(240,194,74,.7)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.ta-letter:hover .ta-lring, .ta-letter:focus-visible .ta-lring{ opacity:1; animation:taRingPulse 1.6s ease-in-out .3s infinite; }
.ta-letter:hover .ta-lf, .ta-letter:focus-visible .ta-lf{ animation:taBuoy 2.8s ease-in-out infinite; }
@keyframes taBuoy{
  0%, 100%{ transform:translateY(1.5px) rotate(-1deg) scale(1.02); }
  50%{ transform:translateY(-4px) rotate(1deg) scale(1.05); }
}
@keyframes taRingPulse{ 50%{ filter:drop-shadow(0 0 13px rgba(240,194,74,.95)); stroke-width:2.4; } }
@media (prefers-reduced-motion: reduce){ .ta-letter:hover .ta-lf, .ta-letter:focus-visible .ta-lf, .ta-letter:hover .ta-lring, .ta-letter:focus-visible .ta-lring{ animation:none; } }

/* paths table: a small card next to the name of each card */
.ta-t-card{ min-width:230px; }
.ta-t-card{ display:table-cell; }
.ta-t-card > .ta-t-thumb{ float:left; margin:0 12px 0 0; }
.ta-t-thumb img{ display:block; width:36px; height:62px; object-fit:cover; border-radius:3px; border:1px solid rgba(201,162,39,.85); box-shadow:0 2px 6px rgba(10,24,64,.25); background:#fbf7ee; transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease; }
.ta-table tr:hover .ta-t-thumb img{ transform:translateY(-2px) scale(1.06); box-shadow:0 6px 12px rgba(10,24,64,.32); }
.ta-t-cardtext{ overflow:hidden; padding-top:2px; }
@media (prefers-reduced-motion: reduce){ .ta-t-thumb img{ transition:none; } .ta-table tr:hover .ta-t-thumb img{ transform:none; } }

/* astral wheel page: intro lede, the sum 12 + 7 + 3 = 22, and jumps to sections */
.ta-lede{ text-align:center; }
.ta-lede p{ font-size:1.08rem; }
.as-sum{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.15em .45em; margin:2em auto 1.2em; padding:14px 26px; max-width:max-content; border:1px solid rgba(201,162,39,.7); border-radius:999px; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.as-sum-n{ font-family:var(--font-heading); font-weight:700; font-size:2.3rem; line-height:1; color:var(--color-primary-dark); font-variant-numeric:lining-nums; }
.as-sum-o{ font-family:var(--font-heading); font-size:1.8rem; color:#a67c00; }
.as-sum-t{ color:#a67c00; }
.as-sum-l{ margin-left:.5em; font-family:var(--font-heading); font-style:italic; font-size:1.3rem; color:var(--color-text-muted); }
.section[id]{ scroll-margin-top:72px; }

/* the card circles of the wheel float on the mouse over, with the same glowing ring as the paths of the Tree of Life */
.as-card{ cursor:pointer; }
.as-card .as-lf{ transform-box:fill-box; transform-origin:center; }
.as-card .as-lring{ fill:rgba(245,226,168,.10); stroke:rgba(245,226,168,.95); stroke-width:2; filter:drop-shadow(0 0 7px rgba(240,194,74,.7)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.as-card:hover .as-lring, .as-card:focus-visible .as-lring{ opacity:1; animation:taRingPulse 1.6s ease-in-out .3s infinite; }
.as-card:hover .as-lf, .as-card:focus-visible .as-lf{ animation:taBuoy 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .as-card:hover .as-lf, .as-card:focus-visible .as-lf, .as-card:hover .as-lring, .as-card:focus-visible .as-lring{ animation:none; } }

/* small card circles of the planets (inner ring of the wheel) */
.as-card-p text{ font-size:12.5px; }
.as-card-p circle{ stroke-width:2; }
.as-card-p .as-lring{ stroke-width:1.6; }

/* wheel: the numbered circles are now small cards (picture + frame + tiny number); they grow a little on hover */
.as-card-img .as-frame{ fill:none; stroke:#f0c24a; stroke-width:2.2; }
.as-card-p .as-frame{ stroke-width:1.8; }
.as-card-img .as-badge{ fill:rgba(5,15,46,.94); stroke:#f0c24a; stroke-width:.8; }
.as-card-img .as-badge-t{ fill:#f5e2a8; font-family:"Times New Roman",serif; font-weight:700; font-size:9.5px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.as-card-p .as-badge-t{ font-size:8px; }
.as-card.as-card-img:hover .as-lf, .as-card.as-card-img:focus-visible .as-lf{ animation:taCardPop 2.8s ease-in-out infinite; }
@keyframes taCardPop{
  0%, 100%{ transform:translateY(1px) rotate(-1deg) scale(1.28); }
  50%{ transform:translateY(-3px) rotate(1deg) scale(1.34); }
}
@media (prefers-reduced-motion: reduce){ .as-card.as-card-img:hover .as-lf, .as-card.as-card-img:focus-visible .as-lf{ animation:none; transform:scale(1.28); } }

/* modern rulers (Scorpio, Aquarius, Pisces) in turquoise, traditional ones in gold */
.as-ruler-d{ font-size:30px; }
.as-ruler.as-mod{ fill:#5fd9cf; }
.as-card-img.as-mod .as-frame{ stroke:#5fd9cf; }
.as-card-img.as-mod .as-badge{ stroke:#5fd9cf; }
.as-key{ display:inline-block; width:.95em; height:.95em; border-radius:50%; vertical-align:-.12em; }
.as-key-g{ background:#f0c24a; }
.as-key-t{ background:#2fc3b8; }

/* astral wheel page: small cards in the tables */
.as-decan td{ vertical-align:middle; }
.as-decan .ta-t-card{ min-width:200px; }
.as-decan .ta-t-cardtext{ overflow:visible; padding-top:0; display:flex; align-items:center; min-height:62px; }

/* planet cards: the picture of the card, top right, with its number on a little tab */
.ta-pl-top{ align-items:flex-start; }
.ta-pl-img{ position:relative; display:block; flex:none; margin-bottom:8px; }
.ta-pl-img img{ display:block; width:58px; height:100px; object-fit:cover; border-radius:5px; border:1px solid rgba(201,162,39,.9); box-shadow:0 3px 8px rgba(10,24,64,.3); background:#fbf7ee; transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease; }
.ta-pl-num{ position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); min-width:30px; padding:2px 8px; border-radius:999px; background:#0b1f55; border:1px solid #c9a227; color:#f5e2a8; font-family:"Times New Roman",serif; font-weight:700; font-size:.78rem; line-height:1.2; text-align:center; }
.ta-card:hover .ta-pl-img img{ transform:translateY(-3px) rotate(2deg) scale(1.06); box-shadow:0 10px 18px rgba(10,24,64,.35); }
@media (prefers-reduced-motion: reduce){ .ta-pl-img img{ transition:none; } .ta-card:hover .ta-pl-img img{ transform:none; } }

/* the title and the text flow next to the picture instead of leaving a gap under the icon */
.ta-pl-top{ height:58px; }
.ta-pl-img{ margin-bottom:0; }
.ta-pl-top ~ h3, .ta-pl-top ~ p:not(.ta-minor){ margin-right:74px; }

/* element cards: the Ace of the suit and the Major Arcanum side by side, a little smaller */
.ta-pl-imgs{ display:flex; gap:12px; flex:none; }
.ta-pl-img-s img{ width:46px; height:80px; }
.ta-pl-img-s .ta-pl-num{ bottom:-7px; min-width:26px; padding:1px 6px; font-size:.7rem; }
.ta-el-top ~ h3{ margin-right:118px; }
.ta-el-top ~ p:not(.ta-minor){ margin-right:0; }