/* =========================
   ARKANA — TOKENS / BASE
========================= */
:root{
  --ark-brown:#2b1f1a;   /* chocolate */
  --ark-gold:#b9935a;    /* dorado suave */
  --ark-cream:#f8f5f0;   /* crema de fondo */
  --ark-ink:#3a2a24;     /* texto principal */
}

html{ scroll-behavior:smooth; }
body{
  color:var(--ark-ink);
  background:var(--ark-cream); /* ← fondo NO blanco */
  font-family:"Gayathri", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/*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 */
.btn-arkana{ background:var(--ark-gold); color:var(--ark-brown); border:none; }
.btn-arkana:hover{ background:#a6834e; color:#fff; }

/* =========================
   TIPOGRAFÍA DE CONTENIDO
========================= */
.prose{ max-width:75ch; margin:0 auto; }

/* Título principal centrado */
.title-xl{
  font-family:"Merriweather", serif;
  font-weight:700;
  font-size:clamp(2rem, 1.2rem + 2.6vw, 3rem);
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--ark-brown);
  text-wrap:balance;
  margin:0 0 .6rem;
  position:relative;
  text-align:center;             /* ← centrado */
}
.title-xl::after{
  content:"";
  display:block;
  width:96px;height:4px;margin:.65rem auto 0; /* centrado */
  background:linear-gradient(90deg, var(--ark-gold), transparent);
  border-radius:2px;
}

/* Subtítulos (h2) centrados */
.section-title,
article h2{
  font-family:"Merriweather", serif;
  font-weight:600;
  font-size:clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  color:var(--ark-brown);
  text-wrap:balance;
  margin:2rem 0 .75rem;
  text-align:center;             /* ← centrado */
}
.section-title::after,
article h2::after{
  content:"";
  display:block;
  width:64px;height:3px;margin:.55rem auto 0;
  background:linear-gradient(90deg, var(--ark-gold), transparent);
  border-radius:2px;
}

/* h3 centrados con acento */
article h3{
  font-family:"Merriweather", serif;
  font-weight:600;
  font-size:clamp(1.15rem, .95rem + .8vw, 1.4rem);
  color:var(--ark-brown);
  margin:1.6rem 0 .6rem;
  text-align:center;             /* ← centrado */
  position:relative;
}
article h3::after{
  content:""; display:block; width:10px; height:10px; border-radius:50%;
  background:var(--ark-gold); margin:.5rem auto 0;
}

/* Párrafos */
.prose p,
article p{
  font-size:clamp(1rem, .95rem + .35vw, 1.12rem);
  line-height:1.8;
  margin:0 0 1.1rem;
  hyphens:auto;
  text-wrap:pretty;
}
.prose .lead{ font-size:clamp(1.05rem, 1rem + .6vw, 1.25rem); opacity:.95; }

/* Listas y citas */
article ul, article ol{ padding-left:1.15rem; margin:.3rem 0 1rem; }
article li::marker{ color:var(--ark-gold); }
article blockquote{
  border-left:4px solid var(--ark-gold);
  padding:.75rem 1rem;
  margin:1rem 0;
  font-style:italic;
  color:color-mix(in srgb, var(--ark-ink) 78%, black);
  background:#fffaf3;
  border-radius:0 10px 10px 0;
}
article hr{
  border:0; height:1px; margin:2rem 0;
  background:linear-gradient(90deg, rgba(185,147,90,.7), transparent);
}
article img{ border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.12); }

/* Enlaces */
article a{
  color:var(--ark-brown);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
article a:hover{ color:var(--ark-gold); }

/* =========================
   PARTES DEL POST
========================= */
/* Barra volver */
.back-bar a{ text-decoration:none; }

/* Cabecera centrada */
.post-header{ text-align:center; }
.post-header .badge{
  background:#fff; color:#333; border:1px solid rgba(0,0,0,.08);
}

/* Grid de 2 vídeos, IGUALES siempre */
.video-grid .video-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  aspect-ratio:16/9;               /* cinturón y tirantes */
}
.video-grid .ratio > video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.video-grid .content-warning{
  position:absolute; top:12px; left:12px;
  background:#ffc107; color:#2b1f1a;
  border-radius:999px; padding:.25rem .6rem; font-size:.8rem;
}

/* Panel de texto que destaca sobre el fondo crema */
.text-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:1.25rem 1.25rem;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.text-panel > *:first-child{ margin-top:0; }
.text-panel > *:last-child{ margin-bottom:0; }

/* Galería colapsable */
.gallery img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:12px;
}

/* Aside */
aside .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);
}

/* Responsive mínimos */
@media (max-width:576px){
  .prose{ padding:0 .5rem; }
}

/* FOOTER */
   /* FOOTER */
    .site-footer{
      background: var(--ark-ink); color: #3a2a24;
      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; }
    }

    /* CARD CON VIDEO */
    /* Video dentro de la ratio */
    .card-video{ width:100%; height:100%; object-fit:cover; display:block; }

    /* Botón play centrado */
    .play-overlay{
    position:absolute; inset:0; margin:auto;
    width:68px; height:68px; border-radius:50%;
    border:none; cursor:pointer;
    background:rgba(0,0,0,.45);
    }

    .play-overlay::before{
    content:"";
    position:absolute; top:50%; left:50%;
    transform:translate(-40%,-50%);
    width:0; height:0;
    border-left:18px solid #fff;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    }

/* Badge de aviso */
.content-warning{
  position:absolute; top:10px; left:10px;
  background:#ffc107; color:#2b1f1a;
  border-radius:999px; padding:.25rem .6rem;
  font-size:.8rem;
}

    /*CAJA VIDEO DE YOUTUBE*/
   
    .about-video{
    max-width: 900px;        /* ← ajusta (720–960px suele ir genial) */
    margin: 1.5rem auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }
    /* Estilo Arkana para las pestañas */
    .nav-pills .nav-link{
    border: 1px solid rgba(185,147,90,.35);
    color: #2b1f1a;
    }   
    .nav-pills .nav-link.active{
    background: #b9935a;   /* dorado Arkana */
    color: #2b1f1a;
    border-color: #b9935a;
    }
    .nav-pills .nav-link:hover{ background: rgba(185,147,90,.1); }

    /* ====== Tarjetas de contenido (columna izquierda) ====== */
.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 1.2rem;
}

/* Acento lateral dorado */
.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);
}

/* Título de tarjeta */
.ark-card-title{
  display:flex; align-items:center; gap:.5rem;
  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-title .bi{ font-size:1.1em; color:var(--ark-gold); }

/* Texto y listas dentro de la tarjeta */
.ark-card .lead{ font-size:clamp(1.02rem, 1rem + .4vw, 1.2rem); opacity:.95; }
.ark-card ul{ padding-left:1.1rem; margin:.3rem 0 0; }
.ark-card li::marker{ color:var(--ark-gold); }

/* Tarjeta compacta para “Cómo ayudar” (dentro de Compromisos) */
.ark-card .helper{
  background:var(--ark-cream);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:.75rem .9rem;
  margin-top:.8rem;
}
.ark-card .helper strong{ display:block; margin-bottom:.3rem; }