/* ================================
   Base de belarcelis.com (tema drunel-belar)
   Todo el sitio: tokens del padre con la marca, cuerpo, cabecera, pie,
   y lo mínimo de los bloques de WordPress.
   Los tokens --bc-* están en landing.css (sistema de diseño, brand-guide.md).
   ================================ */

/* Tokens del padre (drunel-starter) con los valores de la marca */
:root {
  --theme-primary: #dca54a;
  --theme-primary-hover: #dfb77a;
  --theme-secondary: #a19d94;
  --theme-surface: #17161d;
  --theme-background: #131218;
  --theme-text: #f7f4ef;
  --theme-text-muted: #a19d94;
  --theme-on-dark: #f7f4ef;
  --theme-border: #2a2630;
  --theme-border-strong: #3a3540;
  --theme-success: #8fd6a4;
  --theme-error: #f0a08c;
  --theme-font-heading: "Prata", Georgia, serif;
  --theme-font-body: "Nunito Sans", system-ui, sans-serif;
  --theme-container-max: 1160px; /* 1120 de contenido + 20 a cada lado, como .bc-wrap */
  --theme-container-px: 20px;
  --theme-header-height: 72px;
  --theme-shadow: rgba(0, 0, 0, 0.35);
}

html {
  scroll-padding-top: calc(var(--theme-header-height) + 16px); /* los anclas del índice no quedan bajo la cabecera */
  background: var(--bc-fondo);
}

body {
  margin: 0;
  background: var(--bc-fondo);
  color: var(--bc-texto);
  font-family: var(--bc-letra-texto);
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Títulos fuera de las plantillas con su propio CSS (páginas legales, Mi cuenta…) */
:where(h1, h2) {
  color: var(--bc-titulo);
  font-family: var(--bc-letra-titulo);
  font-weight: 400;
  line-height: 1.2;
}

:where(h3, h4, h5, h6) {
  color: var(--bc-titulo);
  font-family: var(--bc-letra-texto);
  font-weight: 700;
  line-height: 1.35;
}

:where(a) {
  color: var(--bc-oro-suave);
}

:where(a:hover) {
  color: var(--bc-oro);
}

:where(strong, b) {
  font-weight: 700;
}

:where(input, select, textarea, button) {
  font-family: inherit;
}

::selection {
  background: rgba(220, 165, 74, 0.35);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--bc-oro);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

main {
  flex: 1 0 auto;
}

/* Solo para lectores de pantalla */
.bc-oculto,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Saltar al contenido */
.bc-saltar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: var(--bc-radio-s);
  background: var(--bc-oro);
  color: #131218;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.bc-saltar:focus {
  transform: none;
  color: #131218;
}

/* ---------- Cabecera ---------- */

body > header.sticky {
  background: rgba(19, 18, 24, 0.82);
  border-bottom: 1px solid rgba(42, 38, 48, 0.9);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.admin-bar > header.sticky {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar > header.sticky {
    top: 46px;
  }
}

.bc-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.bc-logo__img {
  display: block;
  width: auto;
  height: 44px;
}

.bc-logo__texto {
  color: var(--bc-titulo);
  font-family: var(--bc-letra-titulo);
  font-size: 24px;
}

.bc-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
}

.bc-nav__lista {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bc-nav__lista a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: var(--bc-radio-s);
  color: var(--bc-texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.bc-nav__lista a:hover,
.bc-nav__lista a:focus-visible {
  background: rgba(220, 165, 74, 0.08);
  color: var(--bc-oro-suave);
}

/* «Blog» se marca solo en posts y archivos del blog: WordPress marca la página de entradas
   (current_page_parent) en cualquier ficha que no sea página, también en las herramientas. */
.bc-nav__lista .current-menu-item > a,
.bc-nav__lista .current-page-ancestor > a,
:is(.single-post, .blog, .archive, .search) .bc-nav__lista .current_page_parent > a {
  color: var(--bc-oro);
}

.bc-nav__lista .current-menu-item > a::after,
.bc-nav__lista .current-page-ancestor > a::after,
:is(.single-post, .blog, .archive, .search) .bc-nav__lista .current_page_parent > a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 4px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--bc-oro);
}

.bc-acciones {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.bc-acceso {
  display: flex;
  align-items: center;
}

.bc-menu-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bc-linea);
  border-radius: var(--bc-radio-s);
  background: var(--bc-superficie);
  color: var(--bc-texto);
  cursor: pointer;
}

.bc-menu-boton__barras,
.bc-menu-boton__barras::before,
.bc-menu-boton__barras::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bc-menu-boton__barras {
  position: relative;
}

.bc-menu-boton__barras::before,
.bc-menu-boton__barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.bc-menu-boton__barras::before {
  top: -6px;
}

.bc-menu-boton__barras::after {
  top: 6px;
}

.bc-menu-boton[aria-expanded="true"] .bc-menu-boton__barras {
  background: transparent;
}

.bc-menu-boton[aria-expanded="true"] .bc-menu-boton__barras::before {
  transform: translateY(6px) rotate(45deg);
}

.bc-menu-boton[aria-expanded="true"] .bc-menu-boton__barras::after {
  transform: translateY(-6px) rotate(-45deg);
}

.bc-menu-movil {
  padding: 8px var(--theme-container-px) 24px;
  border-top: 1px solid var(--bc-linea);
  background: var(--bc-fondo);
}

.bc-menu-movil[hidden] {
  display: none;
}

.bc-menu-movil__lista {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.bc-menu-movil__lista a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--bc-linea);
  color: var(--bc-texto);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.bc-menu-movil__lista .current-menu-item > a,
:is(.single-post, .blog, .archive, .search) .bc-menu-movil__lista .current_page_parent > a {
  color: var(--bc-oro);
}

.bc-boton.bc-menu-movil__cta {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 15px 24px;
  border-radius: var(--bc-radio-s);
  background: var(--bc-oro);
  color: #131218;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 900px) {
  .bc-nav {
    display: flex;
  }

  .bc-menu-boton,
  .bc-menu-movil {
    display: none !important;
  }
}

@media (max-width: 899px) {
  :root {
    --theme-header-height: 64px;
    --theme-container-px: 16px;
  }

  .bc-logo__img {
    height: 38px;
  }
}

/* ---------- Pie ---------- */

body > footer.border-t {
  margin-top: 0;
  border-top: 1px solid var(--bc-linea);
  background: var(--bc-fondo-alt);
  color: var(--bc-apagado);
  font-size: 15px;
}

body > footer.border-t > .drunel-container {
  padding-top: 64px;
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  body > footer.border-t > .drunel-container > .grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 48px;
  }
}

body > footer.border-t > .drunel-container > .grid > div:empty {
  display: none;
}

.bc-pie__nombre {
  margin: 0 0 10px;
  color: var(--bc-titulo);
  font-family: var(--bc-letra-titulo);
  font-size: 26px;
  line-height: 1.2;
}

.bc-pie__frase {
  max-width: 320px;
  margin: 0 0 22px;
  color: var(--bc-apagado);
  font-size: 15px;
  line-height: 1.6;
}

.bc-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bc-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bc-linea);
  border-radius: 50%;
  background: var(--bc-superficie);
  color: var(--bc-texto);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bc-redes a:hover,
.bc-redes a:focus-visible {
  border-color: rgba(220, 165, 74, 0.6);
  color: var(--bc-oro);
  transform: translateY(-2px);
}

.bc-redes svg {
  width: 20px;
  height: 20px;
}

.bc-pie__titulo {
  margin: 0 0 14px;
  color: var(--bc-oro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bc-pie__lista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bc-pie__lista a {
  display: inline-block;
  padding: 6px 0;
  color: var(--bc-texto);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.18s ease;
}

.bc-pie__lista a:hover,
.bc-pie__lista a:focus-visible {
  color: var(--bc-oro-suave);
}

.bc-pie__barra {
  border-top: 1px solid var(--bc-linea);
}

.bc-pie__barra-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 14px;
}

.bc-pie__barra-interior p {
  margin: 0;
}


.bc-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bc-pie__legal a,
.bc-pie__credito a {
  color: var(--bc-apagado);
  text-decoration: none;
}

.bc-pie__legal a:hover,
.bc-pie__credito a:hover {
  color: var(--bc-oro-suave);
}

.bc-pie__credito a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 899px) {
  body > footer.border-t > .drunel-container {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  .bc-pie__barra-interior {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Bloques de WordPress (el padre quita su CSS; los posts usan estos) ---------- */

.wp-block-image {
  margin: 0 0 24px;
}

.wp-block-image img {
  display: block;
  border-radius: var(--bc-radio-m);
}

.wp-block-image figcaption,
.wp-element-caption {
  margin-top: 10px;
  color: var(--bc-apagado);
  font-size: 14px;
  text-align: center;
}

.aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.aligncenter img {
  margin-right: auto;
  margin-left: auto;
}

.alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.alignright {
  float: right;
  margin: 0 0 16px 24px;
}

.wp-block-embed {
  margin: 0 0 24px;
}

.wp-block-embed__wrapper {
  position: relative;
}

.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}

.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--bc-radio-m);
}

.wp-block-separator {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--bc-linea);
}

.wp-block-table {
  margin: 0 0 24px;
  overflow-x: auto;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.has-background {
  padding: 20px 24px;
  border-radius: var(--bc-radio-m);
}

@media (max-width: 600px) {
  .alignleft,
  .alignright {
    float: none;
    margin: 0 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}