:root{
  --navy:#031326;
  --navy2:#071d39;
  --navy3:#0b2c55;
  --gold:#d4af37;
  --gold2:#f1d477;
  --gold3:#fff2b3;
  --white:#ffffff;
  --muted:#a9bbd2;
  --line:rgba(241,212,119,.22);
  --shadow:0 30px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{background:var(--navy);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#031326;
  overflow-x:hidden;
}
button,a{-webkit-tap-highlight-color:transparent}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ambient{
  position:fixed;inset:0;z-index:-2;
  background:
    linear-gradient(rgba(2,10,24,.43),rgba(2,10,24,.93)),
    url("assets/ambient.webp") center/cover fixed no-repeat;
}
.ambient::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,231,145,.17),transparent 23%),
    radial-gradient(circle at 90% 16%,rgba(40,110,220,.18),transparent 23%),
    linear-gradient(145deg,rgba(255,255,255,.02),transparent 45%);
}
.app-shell{width:min(100%,780px);margin:0 auto;padding:14px 16px 34px}
.hero{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(241,212,119,.24);
  background:
    radial-gradient(circle at 88% 6%,rgba(241,212,119,.13),transparent 27%),
    linear-gradient(150deg,rgba(11,44,85,.86),rgba(3,16,34,.96));
  box-shadow:var(--shadow);
  padding:18px 0 8px;
}
.hero-glow{
  position:absolute;inset:-25% -15% auto auto;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,212,119,.2),transparent 65%);
  filter:blur(10px);pointer-events:none
}
.flip-scene{
  width:calc(100% - 26px);
  margin:0 auto;
  display:block;
  background:transparent;
  border:0;
  padding:0;
  perspective:1800px;
  cursor:pointer;
}
.flip-card{
  position:relative;
  width:100%;
  aspect-ratio:1.5;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.72,.15,1);
}
.flip-scene.is-flipped .flip-card{transform:rotateY(180deg)}
.card-face{
  position:absolute;
  inset:0;
  border-radius:24px;
  overflow:hidden;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 34px 68px rgba(0,0,0,.48),
    0 8px 20px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,239,181,.18);
}
.card-front{transform:rotateY(0deg)}
.card-back{transform:rotateY(180deg)}
.card-face img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 36px rgba(255,255,255,.025);
}
.card-shine{
  position:absolute;
  inset:-45% -70%;
  pointer-events:none;
  background:linear-gradient(108deg,
    transparent 37%,
    rgba(255,255,255,.05) 44%,
    rgba(255,245,198,.22) 50%,
    rgba(255,255,255,.07) 55%,
    transparent 63%);
  transform:translateX(-38%) rotate(2deg);
  mix-blend-mode:screen;
  animation:cardShine 7.5s ease-in-out infinite;
}
.back-shine{animation-delay:.35s}
@keyframes cardShine{
  0%,58%{transform:translateX(-42%) rotate(2deg)}
  78%,100%{transform:translateX(48%) rotate(2deg)}
}
.hero-tools{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:8px 18px 2px;
}
.hero-tool{
  min-height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(2,13,29,.64);
  color:#fff;
  backdrop-filter:blur(14px);
  font-weight:850;
  padding:0 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.language-switch{
  position:relative;
  width:92px;
  min-width:92px;
  display:grid;
  grid-template-columns:34px 16px 34px;
  gap:0;
  padding:3px 4px;
  overflow:hidden;
  color:var(--gold2);
}
.lang-indicator{
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:34px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold3),#d7b142);
  box-shadow:0 4px 14px rgba(212,175,55,.24);
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.72,.15,1);
}
.language-switch[data-active="en"] .lang-indicator{transform:translateX(50px)}
.lang-choice,.lang-divider{position:relative;z-index:1;text-align:center;line-height:30px}
.lang-choice{font-size:.74rem;font-weight:900;letter-spacing:.04em;transition:color .22s ease}
.lang-divider{font-size:.7rem;color:#8fa2bb}
.language-switch[data-active="es"] .lang-es,.language-switch[data-active="en"] .lang-en{color:#07162b}
.language-switch[data-active="es"] .lang-en,.language-switch[data-active="en"] .lang-es{color:var(--gold2)}
.share-small{font-size:.74rem}
.share-small svg{width:15px;height:15px}
.flip-hint{
  text-align:center;
  color:var(--gold3);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.035em;
  line-height:1.1;
  padding:3px 18px 0;
  margin:0;
  text-shadow:0 0 16px rgba(241,212,119,.28);
}
.hero-copy{text-align:center;padding:10px 20px 0}
.intro{margin:0;font-weight:800;font-size:1rem}
.verse{margin:5px 0 0;color:var(--gold2);font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:.03em}
.primary-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 16px 10px}
.single-set .primary{grid-column:1/-1}
.action{
  min-height:60px;border-radius:18px;text-decoration:none;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  transition:transform .14s ease,border-color .14s ease
}
.action:active{transform:scale(.985)}
.action.primary{
  color:#07162b;background:linear-gradient(135deg,#b88c1b,var(--gold3),#d7b142);
  border-color:#ffe995;box-shadow:0 12px 28px rgba(212,175,55,.19)
}
.action-icon{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;
  display:grid;place-items:center;border:1px solid rgba(241,212,119,.24);
  color:var(--gold2);background:rgba(241,212,119,.07)
}
.primary .action-icon{color:#07162b;background:rgba(7,22,43,.08);border-color:rgba(7,22,43,.12)}
.action-icon svg{width:20px;height:20px}
.action b{display:block;font-size:.84rem;line-height:1.05}
.action small{display:block;color:#b8c6d7;font-size:.61rem;margin-top:1px;line-height:1.05}
.primary small{color:#4b4a3c}
.action.primary b{font-size:1.08rem;line-height:1.05}
.action.primary small{font-size:.74rem;line-height:1.1}
.action > span:last-child{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.status{min-height:0;height:auto;text-align:center;color:var(--gold2);font-size:.72rem;padding:0 18px 4px}
.status:empty{display:none}
.developer-signature{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-align:center;
  padding:8px 12px 4px;
  color:#8fa2bb;
}
.developer-signature span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.developer-card-link{color:var(--gold2);font-family:Georgia,"Times New Roman",serif;font-size:.96rem;font-weight:700;letter-spacing:.02em;text-decoration:none}
.developer-card-link:hover,.developer-card-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.developer-signature small{font-size:.62rem;color:#7f92aa;letter-spacing:.08em;text-transform:uppercase}
.card-version{margin-top:0;letter-spacing:.12em!important;color:#62758e!important;line-height:1.05}
@media (max-width:460px){
  .primary-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 10px 6px}
  .single-set .primary{grid-column:1/-1}
  .action{min-width:0;padding:7px 8px}
  .action-icon{width:36px;height:36px;border-radius:11px}
}
@media (max-width:420px){
  .app-shell{padding-left:10px;padding-right:10px}
  .hero{border-radius:26px;padding-top:12px;padding-bottom:6px}
  .flip-scene{width:calc(100% - 18px)}
  .card-face{border-radius:19px}
  .hero-tool{font-size:.72rem;padding:0 12px}
  .language-switch{padding:3px 4px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}