:root{
  --bg: #0b0a10;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --border: rgba(255,255,255,0.12);
  --accent: rgba(190,160,255,0.9);
  --shadow: 0 12px 40px rgba(0,0,0,0.45);

  /* backgrounds */
  --bg-main:#140f1f;
  --bg-panel:#1d1630;

  /* accent */
  --accent-gold:#d4af37;
  --accent-soft:#a98bff;

  /* text */
  --text-main:#f4f1ff;
  --text-muted:#b9b4d9;

  /* borders */
  --border-soft:rgba(255,255,255,.08);
  --border-gold:rgba(212,175,55,.35);

}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Inter", sans-serif;
  color: var(--text-main);
  background: var(--bg-main);
}

h1,h2,h3,h4{
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--accent-gold);
}

.panel{

  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;

}

a{ color: inherit; }
.container{ max-width: 960px; margin: 0 auto; padding: 20px; }

/* ---------------- Top Bar ---------------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  background: rgba(11,10,16,0.7);
  z-index: 5;
}
/*
.brand{ display:flex; gap:12px; align-items:center; }
.brand__logo{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.brand__name{ font-weight: 700; letter-spacing: 0.4px; }
.brand__tagline{ font-size: 12px; color: var(--muted); margin-top: 2px; }
*/
.lang{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-left: 14px;
}
.lang select{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.lang select:focus{
  border-color: rgba(190,160,255,0.55);
  box-shadow: 0 0 0 3px rgba(190,160,255,0.10);
}
/* --------------------- NAV ------------------*/
.nav{ display:flex; gap:12px; }
.nav__link{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
}
.nav__link:hover{
  border-color: var(--border);
  color: var(--text);
  background: var(--card);
}
.nav__link[aria-current="page"]{
  color: var(--text);
  border-color: var(--border);
  background: var(--card);
}
.nav__link.is-disabled{ opacity: 0.45; pointer-events:none; }

/* ---------------- Nav dropdown ---------------- */
.nav__dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__dropbtn{
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.nav__menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(11,10,16,0.95);
  box-shadow: var(--shadow);
  display: none;
  z-index: 50;
}

.nav__dropdown.is-open .nav__menu{
  display: block;
}

.nav__sublink{
  display: block;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
}

.nav__sublink:hover{
  background: var(--card);
  color: var(--text);
}

.nav__divider{
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
}


/* ---------------- Cards / Layout ---------------- */
.card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  margin: 16px 0;
}
.card--blacked{
  background:black;
  border: 2px solid var(--accent-gold);
}
.hero h1{ margin: 0 0 6px; font-size: 28px; }
.hero p{ margin: 0 0 14px; color: var(--muted); }
.hero__actions{ display:flex; gap:10px; flex-wrap: wrap; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

/* ---------------- Buttons ---------------- */
/*.btn{
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(190,160,255,0.18);
  color: var(--text);
  font-weight: 600;
}
.btn:hover{ background: rgba(190,160,255,0.24); }*/

.btn{
  background: transparent;
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: .9rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .2s ease;
}

.btn:hover{
  background: rgba(212,175,55,.1);
  transform: translateY(-1px);
}

.btn:disabled{ opacity: 0.55; cursor:not-allowed; }

.btn--ghost{ background: transparent; }
.btn--ghost:hover{ background: var(--card); }

.textlink{ text-decoration:none; color: var(--accent); }
.textlink:hover{ text-decoration: underline; }

.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.muted{ color: var(--muted); }

/* ---------------- Forms ---------------- */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; gap: 6px; }
.field__label{ font-size: 12px; color: var(--muted); }
/*.field__control{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.field__control:focus{
  border-color: rgba(190,160,255,0.55);
  box-shadow: 0 0 0 3px rgba(190,160,255,0.10);
}*/
.field__control{
  background: #120c22;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-main);
  padding: 6px 10px;
  font-family: "Inter";
}

.field__control:focus{
  outline: none;
  border-color: var(--accent-gold);
}

.actions{ display:flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.footer{ margin-top: 18px; text-align:center; color: var(--muted); }

/* =========================================================
   Tarot: settings-first layout (Accept -> Reading, Restart -> Settings)
   ========================================================= */
.is-hidden{ display:none !important; }

#readingHeader{
  display:flex;
  align-items: center;       /* Alineación vertical */
  justify-content: space-between; /* Uno a cada lado */
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.settings-vertical .form-grid{
  grid-template-columns: 1fr;
}
.settings-vertical .actions{
  justify-content: flex-end;
}





/* ---------------- 3-card reading area ---------------- */
.reading-area{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
  
}
@media (max-width: 860px){
  .reading-area{ grid-template-columns: 1fr; }
}

.card-slot{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,0.18);
}
.card-slot__pos{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.card-slot__name{ font-weight: 700; margin-bottom: 6px; }
.card-slot__meaning{ color: var(--muted); line-height: 1.45; }


/* ARCANOS MAYORES Y MENORES HTML */
/* =========================
   Tarot layouts (Majors/Minors)
   IMAGEN | TEXTO
   ========================= */

/* Contenedor de cada carta: 2 columnas (imagen | texto) */
.arcana-item{
  display: grid;
  grid-template-columns: 140px 1fr; /* imagen razonable + texto */
  gap: 16px;
  align-items: start;
  padding: 16px;
}

/* Imagen con tamaño controlado y proporción estable */
.arcana-img{
  width: 140px;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* Título de carta */
.arcana-name{
  margin: 0 0 10px;
  line-height: 1.2;
}

/* Bloques de significado (derecha / invertida) */
.arcana-meaning-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.meaning-box{
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.meaning-box h4{
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.meaning-box p{
  margin: 0;
  opacity: 0.92;
  line-height: 1.5;
}

/* Listado vertical con buena respiración */
.arcana-list{
  display: grid;
  gap: 14px;
}

/* Responsive: en móvil apila imagen arriba */
@media (max-width: 640px){
  .arcana-item{
    grid-template-columns: 1fr;
  }
  .arcana-img{
    width: 100%;
    max-width: 220px; /* evita que se vaya de tamaño */
  }
  .arcana-meaning-grid{
    grid-template-columns: 1fr;
  }
}

/* ------ LOGO ---------- */
.brand{ 
  display: flex;
  align-items: center;
  gap: 16px; } /* un poco más de espacio visual */

.brand > div:last-child{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand__logo{
  width: 64px;      /* más espacio */
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;   /* evita que se comprima */

  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.brand__logo img{
  width: 200%;
  height: auto;
  display: block;
}

.brand__name{
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
}

.brand__tagline{ 
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1;
}

.divider{

  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    var(--accent-gold),
    transparent
  );

  margin: 18px 0;

}

/* Accept button full width */
.actions .btn--primary{
  width:100%;
  padding:12px 16px;
  font-size:0.95rem;
  
}

/* Language dropdown (custom) */
.langdd{ position: relative; }

.langdd__btn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.langdd__menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(20,15,31,0.96);
  box-shadow: var(--shadow);
  display: none;
  z-index: 50;
}

.langdd.is-open .langdd__menu{ display: block; }

.langdd__item{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.langdd__item:hover{
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-color: rgba(212,175,55,0.25);
}

/* ---- Toggle gold style ---- */

/*.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: var(--text);
}*/

.toggle{
  cursor: pointer;
  transition: all .2s ease;
  display:flex;
  align-items:center;
}

/* hover */
.toggle:hover{
  border-color: var(--accent-gold);
}

/* active / selected toggle */
.toggle.is-active{
  border-color: var(--accent-gold);
  background: rgba(212,175,55,0.08);
  color: var(--accent-gold);
}

.toggle input:checked + span,
.toggle input:checked{
  accent-color: var(--accent-gold);
}
.toggle.is-active{
  border-color: var(--accent-gold);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 10px rgba(212,175,55,0.25);
}

.arcana-archetype{
  font-style:italic;
}

/* =============== Mobile safety =============== */
img, video, canvas, svg { max-width: 100%; height: auto; }


/* Contenedor: menos padding en móvil para que quepa todo */
@media (max-width: 480px){
  .container{ padding: 14px; }
  .card{ padding: 14px; }
}

/* ===== Mobile nav fix ===== */
@media (max-width: 640px){
  .topbar{
    gap: 10px;
  }

  /* El nav no debe forzar el ancho de la página */
  .nav{
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 8px;
  }
  .nav__link{
    flex: 0 0 auto; /* evita que se compriman raro */
  }

  /* Opcional: reduce un poco logo/tagline para ganar espacio */
  .brand__tagline{ display:none; }
}

html, body{ overflow-x: hidden; }

.cookie-link{
  background: none;
  border: none;
  padding: 0;

  color: var(--accent-gold);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  letter-spacing: .06em;

  cursor: pointer;
  text-decoration: none;
}

/* hover elegante */
.cookie-link:hover{
  text-decoration: underline;
  opacity: 0.9;
}