:root{
    --bg:      #F7F2E7;   /* Fondo base cálido, como el papel de los menús */
    --brand:   #B8863E;   /* Dorado/bronce de los títulos del menú y el sol del logo */
    --ink:     #10142B;   /* Azul noche profundo, manteles/sillas */
    --night:   #0A0A16;   /* Negro estrellado del logo */
    --wood:    #6B5F52;
    --bg-panel: #EFE7D6;
    --line: rgba(16,20,43,0.14);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--ink); font-family:'Jost',sans-serif; }
  .serif{ font-family:'Cormorant Garamond',serif; }
  .tracker{ letter-spacing:.18em; }
  .tracker-lg{ letter-spacing:.3em; }

  #site-header{ background-color: #10142B; --ink: var(--bg); color: var(--bg); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(247,242,231,0.1); }

  /* ===================== TAB PANELS (SPA) ===================== */
  .tab-panel{ display:none; animation: fadeInPanel .5s ease; }
  .tab-panel.active{ display:block; }
  @keyframes fadeInPanel{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

  .nav-link{ position:relative; opacity:.75; transition: opacity .2s ease, color .2s ease; }
  .nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width .3s ease; }
  .nav-link:hover{ opacity:1; }
  .nav-link:hover::after{ width:100%; }
  .nav-link.active{ opacity:1; color:var(--brand); }
  .nav-link.active::after{ width:100%; }

  .menu-toggle{ color:var(--ink); }
  .main-nav.open{
    display:flex !important; position:fixed; top:70px; left:0; right:0; z-index:39;
    background:var(--bg); color:#10142B; flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 0; box-shadow:0 1px 0 var(--line);
  }
  .main-nav.open .nav-link{ width:100%; padding:16px 24px; border-top:1px solid var(--line); }

  .btn-primary{ background:var(--ink); color:var(--bg); transition: filter .25s ease, transform .2s ease; }
  .btn-primary:hover{ filter:brightness(1.3); transform: translateY(-1px); }
  .btn-gold{ background:var(--brand); color:var(--night); transition: filter .25s ease, transform .2s ease; }
  .btn-gold:hover{ filter:brightness(1.1); transform: translateY(-1px); }

  .fade-up{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
  .fade-up.in{ opacity:1; transform: translateY(0); }

  .cat-btn{ border:1px solid var(--line); color:var(--wood); transition:all .25s ease; }
  .cat-btn.active, .cat-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

  .card-item{ border-top:1px solid var(--line); transition: background-color .25s ease; cursor:pointer; }
  .card-item:hover{ background: rgba(184,134,62,0.08); }

  #product-modal, #cart-drawer, #cart-overlay{ transition: opacity .3s ease, visibility .3s ease; }
  #cart-drawer{ transition: transform .4s cubic-bezier(.16,1,.3,1); }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background: var(--wood); border-radius:4px; }
  input[type="radio"]{ accent-color: var(--brand); }
  :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Cielo estrellado para secciones nocturnas */
  .starry{
    background-color: var(--night);
    background-image:
      radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.9), transparent),
      radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.7), transparent),
      radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,.8), transparent),
      radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.6), transparent),
      radial-gradient(1.5px 1.5px at 90% 50%, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,.6), transparent),
      radial-gradient(1.5px 1.5px at 70% 90%, rgba(255,255,255,.5), transparent);
    background-size: 100% 100%;
  }

  .zodiac-card{ border:1px solid rgba(247,242,231,0.15); transition: border-color .3s ease, transform .3s ease; }
  .zodiac-card:hover{ border-color: var(--brand); transform: translateY(-3px); }

  .social-pill{
    background: var(--ink); color: var(--bg); border:1px solid var(--ink);
    transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
    animation: pillPulse 2.6s ease-in-out infinite;
  }
  .social-pill:hover{ filter:brightness(1.3); transform: translateY(-2px) scale(1.03); animation-play-state: paused; }
  @keyframes pillPulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,62,0.35); }
    50% { box-shadow: 0 0 0 6px rgba(184,134,62,0); }
  }

  .contest-card{
    background: linear-gradient(155deg, rgba(184,134,62,0.14), rgba(10,10,22,0.4)), var(--night);
    border: 1px solid rgba(184,134,62,0.4);
  }
  .contest-card::before{
    content:''; position:absolute; inset:-2px; border-radius:inherit; padding:1px;
    background: linear-gradient(120deg, var(--brand), transparent 40%, transparent 60%, var(--brand));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: borderSweep 4s linear infinite; pointer-events:none;
  }
  @keyframes borderSweep{ 0%{ filter:hue-rotate(0deg);} 100%{ filter:hue-rotate(20deg);} }
  .contest-step{ border:1px solid rgba(247,242,231,0.25); padding:8px 14px; border-radius:999px; color:rgba(247,242,231,0.85); }

  .logo-real{ background-image:url(fotos/754428107_17947833939232230_9063588141332889367_n.jpg); background-size:cover; background-position:center; border-radius:50%; display:inline-block; flex-shrink:0; }

/* Quien active "reducir movimiento" en su sistema deberia ver la pagina
   quieta: no es una preferencia estetica, hay gente a la que el
   movimiento le produce mareo. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}