:root{
  --cream:#f8eee8;
  --cream-2:#fff8f4;
  --ink:#3d2529;
  --muted:#725d60;
  --wine:#7b1730;
  --pink:#e40063;
  --green:#009f7a;
  --gold:#b57a36;
  --line:rgba(61,37,41,.15);
  --shadow:0 20px 55px rgba(75,35,43,.12);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream-2);color:var(--ink);font-family:var(--sans);line-height:1.55}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 36px));margin:auto}

/* NAVEGACIÓN */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,249,246,.90);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(61,37,41,.08);
}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:.86rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.brand-star{font-family:var(--serif);font-size:1.25rem;color:var(--gold)}
.navlinks{display:flex;align-items:center;gap:26px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.navlinks a:not(.nav-cta):hover{color:var(--pink)}
.nav-cta,.cta-primary,.cta-secondary,.card-cta,.community-btn,.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  font-weight:700;
  transition:.2s ease;
}
.nav-cta{padding:11px 18px;background:var(--pink);color:#fff;box-shadow:0 8px 22px rgba(228,0,99,.22)}
.nav-cta:hover,.cta-primary:hover,.card-cta:hover,.community-btn:hover,.footer-cta:hover{transform:translateY(-2px)}
.menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* HERO
   La imagen conserva su proporción real 1920 x 820.
   Así la columna IDEAS / CARTAS / ... permanece anclada a la pared. */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:1920 / 820;
  min-height:500px;
  overflow:hidden;
  background:#f6e9e1;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,249,246,.98) 0%,
    rgba(255,249,246,.93) 20%,
    rgba(255,249,246,.70) 34%,
    rgba(255,249,246,.30) 47%,
    rgba(255,249,246,.06) 59%,
    rgba(255,249,246,0) 70%
  );
}
.hero-inner{
  position:absolute;
  inset:0;
  z-index:2;
}
.hero-copy{
  position:absolute;
  left:5.2%;
  top:50%;
  transform:translateY(-50%);
  width:min(39%,560px);
}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(4rem,6.7vw,7.1rem);
  line-height:.84;
  letter-spacing:-.045em;
  margin:0 0 20px;
  color:#311c22;
}
.hero-rule{display:flex;align-items:center;gap:11px;width:140px;margin:0 0 18px;color:var(--gold)}
.hero-rule::before,.hero-rule::after{content:"";height:1px;background:#b99677;flex:1}
.hero-rule span{font-size:1.1rem}
.hero-lead{font-family:var(--serif);font-size:clamp(1.08rem,1.55vw,1.48rem);line-height:1.15;max-width:430px;margin:0 0 14px}
.hero-kicker{font-size:clamp(.62rem,.72vw,.76rem);letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-primary{padding:14px 22px;background:var(--pink);color:#fff;box-shadow:0 10px 28px rgba(228,0,99,.2)}
.cta-secondary{padding:13px 22px;border:1px solid #d48da3;background:rgba(255,255,255,.35);color:#7b2944}

/* Columna de palabras: anclada al margen derecho del hero, no al contenido central */
.hero-words{
  position:absolute;
  right:4.7%;
  top:27.5%;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.22em;
  width:7.6%;
  min-width:92px;
  max-width:125px;
  font-size:clamp(9px,.72vw,14px);
  line-height:1.62;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#4e3438;
  text-align:left;
  white-space:nowrap;
}
.hero-words-star{
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:center;
  margin-top:12px;
  color:var(--gold);
  font-size:.95rem;
  line-height:1;
}
.hero-words-star::before,
.hero-words-star::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  background:rgba(181,122,54,.50);
  margin:6px 0;
}

/* COMUNIDAD */
.community-wrap{background:#f9eee7;padding:0}
.community-desktop{position:relative;max-width:1600px;margin:auto}
.community-desktop img{width:100%;height:auto}
.community-btn{
  position:absolute;
  left:15.1%;
  top:59.5%;
  background:var(--green);
  color:white;
  padding:13px 24px;
  min-width:245px;
  box-shadow:0 9px 24px rgba(0,159,122,.22);
  font-size:.86rem;
  letter-spacing:.04em;
}
.community-mobile{display:none;padding:44px 22px 48px;background:linear-gradient(180deg,#faeee7,#fff8f4);text-align:center}
.community-mobile h2{font-family:var(--serif);font-size:2rem;line-height:1;margin:0 0 14px;font-weight:400}
.community-mobile p{margin:0 auto 22px;max-width:340px;color:var(--muted)}
.community-mobile .themes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px auto;max-width:360px}
.community-mobile .themes span{padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:#fff9f6;font-size:.8rem}
.community-mobile .community-btn{position:static;display:inline-flex}

/* UNIVERSOS */
.section{padding:76px 0}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{font-family:var(--serif);font-size:clamp(2.5rem,4.6vw,4.2rem);font-weight:400;margin:0;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.section-title .starline{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:10px 0}
.section-title .starline::before,.section-title .starline::after{content:"";width:42px;height:1px;background:#c7a386}
.section-title p{font-family:var(--serif);margin:0;font-size:1.1rem;color:#574247}
.universe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(61,37,41,.08);box-shadow:0 14px 32px rgba(62,35,40,.08);transition:.25s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top}
.card-body{display:flex;flex-direction:column;flex:1;text-align:center;padding:0 18px 20px;margin-top:-18px;position:relative;z-index:2}
.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.1vw,2rem);line-height:1.02;margin:2px 0 12px}
.card p{font-size:.88rem;line-height:1.45;margin:0 auto 18px;max-width:245px;flex:1}
.card-cta{align-self:center;min-width:155px;padding:11px 17px;font-size:.78rem;letter-spacing:.03em;border:1px solid currentColor}
.tarot{background:#fde6e5;color:#6f1b31}.tarot .card-cta{background:var(--pink);color:#fff;border-color:var(--pink)}
.astrologia{background:#35162b;color:#f7e4df}.astrologia h3{color:#e8c66f}.astrologia .card-cta{color:#fff;border-color:#d8c2ca}
.brujas{background:#261a18;color:#f4e8df}.brujas h3{color:#d3a05f}.brujas .card-cta{color:#f4e8df;border-color:#a87538}
.metaverso{background:#91e4d4;color:#1a3431}.metaverso .card-cta{background:#e50068;color:#fff;border-color:#e50068}
.angeles{background:#fff0eb;color:#6e4438}.angeles h3{color:#b96f52}.angeles .card-cta{background:#df5d7d;color:#fff;border-color:#df5d7d}
.reiki{background:#edf3df;color:#43543c}.reiki h3{color:#667d56}.reiki .card-cta{color:#4e6443;border-color:#81986f}
.literatura{background:#f4e7d5;color:#47382f}.literatura .card-cta{color:#7f493b;border-color:#a66d5d}
.card-wide{grid-column:span 2}
.card-wide .card-body{padding-left:28px;padding-right:28px}

/* CIERRE */
.closing{
  position:relative;
  min-height:420px;
  background-image:
    linear-gradient(90deg,rgba(55,20,29,.72) 0%,rgba(55,20,29,.5) 32%,rgba(55,20,29,.12) 58%,rgba(55,20,29,0) 78%),
    url('img/footer.webp');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  color:#fff;
}
.closing-copy{width:min(1180px,calc(100% - 36px));margin:auto}
.closing-copy>div{max-width:610px}
.closing h2{font-family:var(--serif);font-size:clamp(2.8rem,5vw,5rem);font-weight:400;line-height:.95;margin:0 0 16px}
.closing p{font-size:1.15rem;max-width:560px;margin:0 0 22px;color:rgba(255,255,255,.9)}
.footer-cta{background:var(--pink);color:#fff;padding:14px 23px;box-shadow:0 10px 28px rgba(228,0,99,.22)}

/* FOOTER */
.site-footer{background:#fff8f4;padding:30px 0 34px;border-top:1px solid rgba(61,37,41,.08)}
.footer-inner{display:grid;grid-template-columns:1.4fr auto 1fr;align-items:center;gap:24px}
.socials-label{font-size:.86rem;margin-bottom:12px}
.socials{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.socials a{display:flex;align-items:center;gap:8px;font-size:.86rem}
.socials img{width:30px;height:30px;border-radius:50%}
.legal{display:flex;gap:24px;font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
.footer-brand{justify-self:end;display:flex;align-items:center;gap:18px;letter-spacing:.24em;font-size:.78rem;text-transform:uppercase;white-space:nowrap}
.footer-brand span:first-child{font-family:var(--serif);color:var(--gold);font-size:1.35rem}

/* ANIMACIONES */
.reveal{opacity:0;transform:translateY(16px);transition:.55s ease}
.reveal.on{opacity:1;transform:none}

/* TABLET */
@media (max-width:1050px){
  .universe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-wide{grid-column:auto}
  .hero-words{display:none}
  .community-btn{left:15%;top:59%;padding:11px 18px;min-width:210px;font-size:.78rem}
}

/* MÓVIL */
@media (max-width:760px){
  .wrap{width:min(calc(100% - 28px),680px)}
  .navlinks{
    position:absolute;
    left:14px;
    right:14px;
    top:70px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background:#fffaf7;
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    box-shadow:var(--shadow);
  }
  .navlinks.open{display:flex}
  .menu-btn{display:block}
  .nav-cta{display:none}

  .hero{
    aspect-ratio:auto;
    min-height:620px;
  }
  .hero-bg{
    object-fit:cover;
    object-position:64% center;
  }
  .hero::after{
    background:linear-gradient(
      180deg,
      rgba(255,249,246,.08) 0%,
      rgba(255,249,246,.18) 34%,
      rgba(255,249,246,.90) 68%,
      rgba(255,249,246,.98) 100%
    );
  }
  .hero-copy{
    left:14px;
    right:14px;
    top:auto;
    bottom:42px;
    transform:none;
    width:auto;
    max-width:none;
  }
  .hero h1{font-size:clamp(3.4rem,16vw,5.6rem);line-height:.86}
  .hero-lead{font-size:1.15rem}
  .hero-actions{flex-direction:column}
  .cta-primary,.cta-secondary{width:100%}

  .community-desktop{display:none}
  .community-mobile{display:block}

  .universe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card-body{padding:0 12px 16px;margin-top:-10px}
  .card h3{font-size:1.35rem}
  .card p{font-size:.78rem}
  .card-cta{min-width:0;width:100%;font-size:.7rem}

  .closing{
    min-height:500px;
    background-image:
      linear-gradient(180deg,rgba(55,20,29,.1),rgba(55,20,29,.65) 68%,rgba(55,20,29,.78)),
      url('img/footer.webp');
    background-position:62% center;
    align-items:end;
  }
  .closing-copy{padding-bottom:42px}
  .closing h2{font-size:3rem}

  .footer-inner{grid-template-columns:1fr;text-align:center}
  .socials{justify-content:center}
  .legal{justify-content:center}
  .footer-brand{justify-self:center;order:3}
}

@media (max-width:450px){
  .universe-grid{grid-template-columns:1fr}
  .hero-bg{object-position:61% center}
  .section{padding:58px 0}
  .section-title h2{font-size:2.45rem}
  .card h3{font-size:1.75rem}
  .card p{font-size:.9rem}
  .card-cta{width:auto;min-width:170px}
  .closing h2{font-size:2.6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.nav-cta,.cta-primary,.card-cta,.community-btn,.footer-cta{transition:none}
}