/*NAVBAR*/
.mi-navbar {
    background-color: #b9935a; /* color de fondo personalizado */
}

.mi-navbar .navbar-brand,
.mi-navbar .nav-link {
    color: #3D2217!important; /* color de texto blanco */
}

.mi-navbar .nav-link:hover {
    color: #f5e1ce !important; /* color de texto blanco */
}

.marca-arkana {
    font-family: 'Gayathri', sans-serif;
    font-weight: 700;
    font-weight: bold;
    font-size: 1.8rem;
    color: #7c4d1e !important;
    margin-right: 48px; /* aumenta el espacio a la derecha */
}
.marca-arkana:hover {
    color: #f5e1ce !important; /* color de texto blanco */
}
/* Botones marca */
  .mi-navbar {
    background-color: #b9935a; /* color de fondo personalizado */
}

.mi-navbar .navbar-brand,
.mi-navbar .nav-link {
    color: #3D2217!important; /* color de texto blanco */
}

.mi-navbar .nav-link:hover {
    color: #f5e1ce !important; /* color de texto blanco */
}

.marca-arkana {
    font-family: 'Gayathri', sans-serif;
    font-weight: 700;
    font-weight: bold;
    font-size: 1.8rem;
    color: #7c4d1e !important;
    margin-right: 48px; /* aumenta el espacio a la derecha */
}
.marca-arkana:hover {
    color: #f5e1ce !important; /* color de texto blanco */
}
    :root{
      --arkana-bg:#2b1f1a;     /* chocolate */
      --arkana-accent:#b9935a; /* dorado */
      --arkana-cream:#f8f5f0;  /* crema */
      --arkana-ink:#2b1f1a;
    }
    body{ font-family: "Gayathri", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    h1,h2,h3{ font-family:"Merriweather", serif; }

    .about-section{ padding: clamp(24px,4vw,48px) 0; }
.about-title{
  font-family:"Merriweather", serif;
  font-weight:800; letter-spacing:.3px;
  text-align:center; margin:0 0 .25rem;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 2.4rem);
}
.about-lead{
  text-align:center; color:#6c5845; margin:0 0 1.5rem;
  font-family:"Gayathri", sans-serif;
}

/* FOOTER */
    .site-footer{
      background: var(--ark-brown); color:#2b1f1a;
      border-top-left-radius:20px; border-top-right-radius:20px;
      box-shadow:0 -8px 20px rgba(0,0,0,.08);
    }
    .footer-brand{ font-family:"Merriweather",serif; font-weight:700; font-size:1.2rem; letter-spacing:.5px; }
    .footer-social .icon{
      color:#fff; opacity:.85; font-size:1.4rem;
      transition: transform .15s ease, opacity .15s ease, color .15s ease;
    }
    .footer-social .icon:hover{ opacity:1; transform: translateY(-2px); color: var(--arkana-accent); }
    .site-footer .nav-link{ color:rgba(255,255,255,.8); }
    .site-footer .nav-link:hover{ color:#fff; }

    /* RESPONSIVE */
    @media (max-width:576px){
      .contact-hero{ border-radius:0; }
      .site-footer{ border-radius:0; box-shadow:none; }
      .contact-form-wrap, .map-wrap{ border-radius:0; box-shadow:none; }
    }
    /* ===== TOKENS ARKANA ===== */
:root{
  --ark-brown:#2b1f1a; --ark-gold:#b9935a; --ark-cream:#f8f5f0; --ark-ink:#3a2a24;
}
html{ scroll-behavior:smooth; }
body{ color:var(--ark-ink); background:var(--ark-cream); font-family:"Gayathri",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.btn-arkana{ background:var(--ark-gold); color:var(--ark-brown); border:none; }
.btn-arkana:hover{ background:#a6834e; color:#fff; }

/* ===== HERO ===== */
.post-hero{
  background:
    radial-gradient(120% 120% at 50% 0%, #a6834e 0%, var(--ark-brown) 60%),
    linear-gradient(0deg, rgba(185,147,90,.08), rgba(185,147,90,.08));
  color:#fff; padding: clamp(48px, 8vw, 96px) 0; margin-bottom: 2rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.post-hero .kicker{ letter-spacing:.3em; font-weight:700; opacity:.85; }
.post-hero .title-xl{
  font-family:"Merriweather",serif; font-weight:800;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
  line-height:1.05; letter-spacing:.02em; text-wrap:balance; margin:.35rem 0 .5rem;
}
.post-hero .title-xl::after{
  content:""; display:block; width:96px; height:4px; margin:.7rem auto 0;
  background:linear-gradient(90deg, var(--ark-gold), #d7b97a);
  border-radius:2px;
}
.post-hero .sub{ max-width:60ch; margin: .5rem auto 0; color:#f4e9d9; }

/* ===== PROSE ===== */
.prose{ max-width:75ch; margin:0 auto; }
.prose p{ font-size:clamp(1rem,.95rem + .35vw,1.12rem); line-height:1.8; margin:0 0 1.1rem; }
.prose .lead{ font-size:clamp(1.05rem,1rem + .6vw,1.25rem); opacity:.95; }
.section-title{
  font-family:"Merriweather",serif; font-weight:700; text-align:center;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem); color:var(--ark-brown);
  margin:2rem 0 .75rem;
}
.section-title::after{ content:""; display:block; width:64px; height:3px; margin:.55rem auto 0;
  background:linear-gradient(90deg,var(--ark-gold),transparent); border-radius:2px; }

/* ===== TARJETAS ===== */
.ark-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; box-shadow:0 8px 18px rgba(0,0,0,.08);
  padding:1.1rem 1.2rem 1.2rem;
}
.ark-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:16px 0 0 16px; background:linear-gradient(180deg,var(--ark-gold),#d8b782);
}
.ark-card h3{
  font-family:"Merriweather",serif; font-weight:700;
  font-size:clamp(1.1rem,.95rem + .7vw,1.35rem); color:var(--ark-brown); margin:0 0 .6rem;
}
.ark-card ul{ padding-left:1.1rem; margin:.3rem 0 0; }
.ark-card li::marker{ color:var(--ark-gold); }

/* ===== SELECTOR ===== */
.selector{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:1rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.selector .form-select{ border-radius:10px; }
.suggestion{
  margin-top:1rem; background:var(--ark-cream); border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:.9rem 1rem;
}
.suggestion .tag{
  display:inline-block; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:999px; padding:.2rem .6rem; margin:.15rem .15rem 0 0; font-size:.85rem;
}
.suggestion .hint{ font-size:.9rem; color:#5f4a40; }

/* ===== SIDEBAR BOX ===== */
.box{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  padding:1rem 1.1rem; box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* ===== MEDIA ===== */
.gallery img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

/* ===== RESPONSIVE ===== */
@media (max-width:576px){ .prose{ padding:0 .5rem; } }