/* ==========================================================================
   bilzur · overrides.css — reestilado "premium" (sistema híbrido v4)
   Último en la cadena de enqueue → gana en cascada sin tocar los archivos base.
   Objetivo: rango tonal, elevación (fin del "difuso") y ritmo con UN solo
   momento drench en el cierre. Todo consume tokens de variables.css.
   Convención: v2 · prefijo bzr. Tipografía: la del theme (Manrope/Inter), sin tocar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) RITMO DE FONDOS — el tinte alterno ahora se ve (token --ice profundizado),
      con costuras suaves arriba/abajo para que no haya cortes duros.
   -------------------------------------------------------------------------- */
/* Tinte alterno UNIFORME con blend CORTO (3rem) en los bordes.
   El grueso de la sección es tinte sólido; solo los 3rem de cada borde funden
   hacia el blanco de las secciones vecinas → sin banda ancha ni línea dura.
   (Se evitan fades por % en secciones altas: producen bandas visibles.) */
.bzr-section--ice{
  background:linear-gradient(180deg,
    var(--bzr-color-bg) 0,
    var(--bzr-color-ice) 3rem,
    var(--bzr-color-ice) calc(100% - 3rem),
    var(--bzr-color-bg) 100%);
}

/* --------------------------------------------------------------------------
   2) ELEVACIÓN Y DEFINICIÓN — matar el "flotar difuso".
      Las sombras ya vienen de variables.css (doble capa); aquí reforzamos
      el borde-pelo y una micro-interacción de elevación coherente en tarjetas.
   -------------------------------------------------------------------------- */
.bzr-card{
  border:var(--bzr-border);
  transition:transform var(--bzr-motion-base) var(--bzr-ease),
             box-shadow var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-card:hover{
  transform:translateY(-.25rem);
  box-shadow:var(--bzr-shadow-window);
}

/* Cifras financieras con figuras tabulares (mismo tipo del theme, sin cambiarlo) */
.bzr-metric b,.bzr-plan .bzr-h2,.bzr-plan .bzr-h3,.bzr-cell{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* --------------------------------------------------------------------------
   3) TURQUESA A CUENTAGOTAS — solo dinero / "en vivo". Nada más.
   -------------------------------------------------------------------------- */
.bzr-metric--pos b{color:var(--bzr-color-teal-ink)}          /* la métrica de margen */
.bzr-chip--live{                                              /* chip "En vivo" */
  background:var(--bzr-color-teal-soft);
  color:var(--bzr-color-teal-ink);
}
.bzr-chip--live::before{
  content:"";width:.375rem;height:.375rem;border-radius:50%;
  background:var(--bzr-color-teal);display:inline-block;margin-right:.375rem;vertical-align:middle;
}
/* Los checks (tablas/planes) van en AZUL de marca, no en verde (evita lectura Bilky) */
.bzr-check{color:var(--bzr-color-accent)}
/* Chips "success" (Verifactu, cumplimiento) — del verde del theme al azul de marca */
.bzr-chip--success{background:var(--bzr-color-accent-soft);color:var(--bzr-color-accent-dark)}

/* --------------------------------------------------------------------------
   4) DRENCH DE CIERRE — el ÚNICO momento oscuro de la página (pico premium).
      Modificador de .bzr-cta-panel; INERTE hasta que se añade --drench en el
      HTML de la sección de conversión final (una sola por página).
   -------------------------------------------------------------------------- */
.bzr-cta-panel--drench{
  position:relative;overflow:hidden;
  border-color:transparent;
  color:var(--bzr-color-on-dark);
  /* Navy-dominante: el azul de marca entra como remate calmado, no como lavado
     eléctrico. La luz/energía del accent la aporta el ::before (glow controlado). */
  background:linear-gradient(155deg,
    var(--bzr-color-drench-mid) 0%,
    var(--bzr-color-brand-navy) 48%);
  box-shadow:var(--bzr-shadow-window);
}
/* glow superior + rejilla enmascarada = materia/luz, no relleno plano */
.bzr-cta-panel--drench::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 70% at 85% 0%, rgba(143,176,255,.5), transparent 60%),
    radial-gradient(40% 60% at 6% 100%, color-mix(in srgb, var(--bzr-color-teal) 26%, transparent), transparent 60%);
}
.bzr-cta-panel--drench::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:3.25rem 3.25rem;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%,#000,transparent 82%);
          mask-image:radial-gradient(75% 70% at 50% 30%,#000,transparent 82%);
}
.bzr-cta-panel--drench > *{position:relative;z-index:1}
/* recolor del contenido dentro del drench */
.bzr-cta-panel--drench .bzr-h1,
.bzr-cta-panel--drench .bzr-h2,
.bzr-cta-panel--drench .bzr-h3{color:var(--bzr-color-on-dark)}
.bzr-cta-panel--drench .bzr-copy,
.bzr-cta-panel--drench .bzr-lead{color:var(--bzr-color-on-dark-muted)}
.bzr-cta-panel--drench .bzr-kicker{color:var(--bzr-color-kicker-on-dark)}
.bzr-cta-panel--drench .bzr-accent{color:var(--bzr-color-emphasis-on-dark)}            /* énfasis de titular en azul claro (serio + legible); el turquesa se reserva a dinero/live */
/* botones sobre el drench */
.bzr-cta-panel--drench .bzr-btn{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
  color:var(--bzr-color-on-dark);
}
.bzr-cta-panel--drench .bzr-btn:hover{background:rgba(255,255,255,.18)}
.bzr-cta-panel--drench .bzr-btn--primary{
  background:var(--bzr-color-on-dark);
  border-color:var(--bzr-color-on-dark);
  color:var(--bzr-color-accent);
}
.bzr-cta-panel--drench .bzr-btn--primary:hover{background:#EAF1FF}
/* Tamaño "conversión" de los botones del cierre drench (como /calculadora-margen) */
.bzr-cta-panel--drench .bzr-btn{font-size:1rem;padding:.85rem 1.35rem;min-height:auto}
.bzr-cta-panel--drench .bzr-btn--primary{font-size:1.0625rem;padding:.95rem 1.6rem;gap:.5rem}
.bzr-cta-panel--drench .bzr-btn--primary svg{width:1.15rem;height:1.15rem;flex:0 0 auto;transition:transform var(--bzr-motion-fast) var(--bzr-ease)}
.bzr-cta-panel--drench .bzr-btn--primary:hover svg{transform:translateX(3px)}
/* Cierre "dos puertas": dos paneles lado a lado (60-40) con fondos distintos
   (drench piloto · claro autónomos). El contraste de fondo jerarquiza; no se
   fusionan en un único panel. */
.bzr-cta-duo{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:var(--bzr-space-4);
  align-items:stretch;
}
/* Tarjetas a igual altura con el CTA anclado abajo (botones alineados). */
.bzr-cta-duo .bzr-cta-panel{display:flex;flex-direction:column}
.bzr-cta-duo .bzr-actions{margin-top:auto}
.bzr-cta-panel--drench .bzr-link{color:var(--bzr-color-kicker-on-dark)}
@media (max-width:60rem){
  .bzr-cta-duo{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   5) BOTÓN PRIMARIO — gradiente sutil para dar cuerpo (materia), sin cambiar el token.
   -------------------------------------------------------------------------- */
.bzr-btn--primary{
  /* PLANO al azul del logo (#3178F6), exacto. El "cuerpo" premium lo dan el brillo
     superior (inset) + la sombra, no un degradado de color: un degradado a
     accent-dark oscurecía el botón y lo hacía verse distinto al logo plano. */
  background:var(--bzr-color-accent);
  /* Sombra NEUTRA (navy-tinte), no glow azul: calma el botón sin cambiar el color. */
  box-shadow:var(--bzr-shadow-button-neutral),inset 0 1px 0 rgba(255,255,255,.28);
}

/* --------------------------------------------------------------------------
   6) BLOG — imagen destacada real dentro de .bzr-blog-img.
      .bzr-blog-img pinta un placeholder decorativo con ::before/::after. Cuando
      la entrada TIENE featured image, el bucle añade --photo: apaga esos pseudo
      y deja que la <img> llene la caja (recorte 16:10 / 16:9 del contenedor).
   -------------------------------------------------------------------------- */
.bzr-blog-img--photo::before,
.bzr-blog-img--photo::after{content:none}
.bzr-blog-img--photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   6b) BLOG — secciones a sangre. Los templates del blog (home.php, archive.php)
      renderizan con el body en `contained-content`, a diferencia de las páginas
      Clase B (`full-width-content` vía post-meta). Eso capaba las .bzr-section al
      max-width del contenedor de GeneratePress (#page.grid-container.container) y
      dejaba gutters blancos. Soltamos ese max-width SOLO en índice y archivos; la
      columna legible la sigue imponiendo .bzr-container dentro de cada sección, y
      el header va ANTES de #page (no se afecta).
   -------------------------------------------------------------------------- */
.blog #page.grid-container,
.archive #page.grid-container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}

/* --------------------------------------------------------------------------
   7) BLOG — paginación (the_posts_pagination). El sistema base no la estila;
      aquí le damos el look .bzr-* con tokens. Envuelta en .bzr-pagination por
      home.php / archive.php.
   -------------------------------------------------------------------------- */
.bzr-pagination{margin-top:var(--bzr-space-6)}
.bzr-pagination .nav-links{
  display:flex;flex-wrap:wrap;gap:var(--bzr-space-2);
  align-items:center;justify-content:center;
}
.bzr-pagination .page-numbers{
  min-width:2.75rem;min-height:2.75rem;padding-inline:.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:var(--bzr-border);border-radius:var(--bzr-radius-control);
  background:var(--bzr-color-surface);color:var(--bzr-color-ink);
  font-size:.8125rem;font-weight:700;
  transition:transform var(--bzr-motion-base) var(--bzr-ease),
             box-shadow var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-pagination a.page-numbers:hover{transform:translateY(-.0625rem);box-shadow:var(--bzr-shadow-card)}
.bzr-pagination .page-numbers.current{
  background:var(--bzr-color-accent);border-color:var(--bzr-color-accent);
  color:var(--bzr-color-on-dark);box-shadow:var(--bzr-shadow-button);
}
.bzr-pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* --------------------------------------------------------------------------
   8) Respeto a reduced-motion (por si el theme no lo cubre en estos overrides).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .bzr-card{transition:none}
  .bzr-card:hover{transform:none}
  .bzr-pagination a.page-numbers:hover{transform:none}
  .bzr-postnav__card,.bzr-postnav__card:hover{transform:none}
  .bzr-postnav__arrow,.bzr-postnav__cat span{transition:none}
}

/* --------------------------------------------------------------------------
   9) ENTRADA — módulo "Sigue leyendo" (.bzr-postnav), lo pinta single.php.
      Filete superior que lo desgaja del artículo · cabecera (lead + pill de
      categoría) · par de tarjetas horizontales con botón-flecha circular que
      se rellena de acento en hover. Reserva de "todas las novedades" si falta
      vecino, así nunca queda una celda vacía. Aire inferior antes del footer
      vía la regla .single .site-main del final.
   -------------------------------------------------------------------------- */
.bzr-postnav{
  width:min(calc(100% - var(--bzr-space-6)),var(--bzr-container));
  margin:var(--bzr-space-7) auto 0;
  padding-top:var(--bzr-space-6);
  border-top:var(--bzr-border);
}
.bzr-postnav__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--bzr-space-3);flex-wrap:wrap;margin-bottom:var(--bzr-space-4);
}
.bzr-postnav__lead{
  margin:0;font-family:var(--bzr-font-heading);font-weight:700;
  font-size:1.125rem;letter-spacing:-.015em;color:var(--bzr-color-ink);
}
.bzr-postnav__cat{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9375rem;border:var(--bzr-border);border-radius:var(--bzr-radius-pill);
  background:var(--bzr-color-surface);
  font-weight:700;font-size:.75rem;color:var(--bzr-color-accent-dark);
  transition:background var(--bzr-motion-base) var(--bzr-ease),
             border-color var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-postnav__cat:hover{background:var(--bzr-color-accent-soft);border-color:var(--bzr-color-ring)}
.bzr-postnav__cat-arrow{transition:transform var(--bzr-motion-base) var(--bzr-ease)}
.bzr-postnav__cat:hover .bzr-postnav__cat-arrow{transform:translateX(.1875rem)}

.bzr-postnav__row{display:flex;flex-wrap:wrap;gap:var(--bzr-space-3)}
.bzr-postnav__card{
  flex:1 1 20rem;min-width:0;
  display:flex;align-items:center;gap:var(--bzr-space-3);
  padding:var(--bzr-space-4);
  border:var(--bzr-border);border-radius:var(--bzr-radius-card);
  background:var(--bzr-color-surface);box-shadow:var(--bzr-shadow-card);
  transition:transform var(--bzr-motion-base) var(--bzr-ease),
             box-shadow var(--bzr-motion-base) var(--bzr-ease),
             border-color var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-postnav__card--next{flex-direction:row-reverse;text-align:right}
.bzr-postnav__card--solo{flex:0 1 28rem;margin-inline:auto}
.bzr-postnav__card:hover{
  transform:translateY(-.1875rem);
  border-color:var(--bzr-color-ring);
  box-shadow:0 1.125rem 3.125rem rgba(9,28,80,.10),
             0 .5rem 1.375rem rgba(28,121,249,.15),
             0 .1875rem 0 var(--bzr-color-ring);
}
.bzr-postnav__card:focus-visible{
  outline:none;border-color:var(--bzr-color-accent);
  box-shadow:0 0 0 .1875rem var(--bzr-color-ring);
}
.bzr-postnav__icon{
  flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;
  border:var(--bzr-border);background:var(--bzr-color-surface);
  color:var(--bzr-color-accent);font-size:1.0625rem;line-height:1;
  transition:background var(--bzr-motion-base) var(--bzr-ease),
             color var(--bzr-motion-base) var(--bzr-ease),
             border-color var(--bzr-motion-base) var(--bzr-ease),
             transform var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-postnav__card:hover .bzr-postnav__icon{
  background:var(--bzr-color-accent);border-color:var(--bzr-color-accent);
  color:var(--bzr-color-on-dark);
}
.bzr-postnav__card--prev:hover .bzr-postnav__icon{transform:translateX(-.1875rem)}
.bzr-postnav__card--next:hover .bzr-postnav__icon{transform:translateX(.1875rem)}
.bzr-postnav__icon svg{width:1.1875rem;height:1.1875rem}
.bzr-postnav__cat-arrow{display:inline-flex}
.bzr-postnav__cat-arrow svg{width:1em;height:1em}
.bzr-postnav__body{display:flex;flex-direction:column;gap:.1875rem;min-width:0}
.bzr-postnav__dir{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--bzr-color-accent-dark);
}
.bzr-postnav__title{
  font-family:var(--bzr-font-heading);font-weight:700;
  font-size:1.0625rem;line-height:1.25;letter-spacing:-.01em;color:var(--bzr-color-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bzr-postnav__meta{margin-top:.125rem;font-size:.75rem;color:var(--bzr-color-muted)}
@media (max-width:40rem){
  .bzr-postnav__card,.bzr-postnav__card--next{flex-direction:row;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .bzr-postnav__card,.bzr-postnav__card:hover,
  .bzr-postnav__icon,.bzr-postnav__card:hover .bzr-postnav__icon{transform:none}
  .bzr-postnav__icon,.bzr-postnav__cat-arrow{transition:none}
}

/* Aire inferior de la entrada: separa el contenido del footer (el footer va por
   código fuera de #main, así que damos padding al propio main en las entradas). */
.single .site-main{padding-bottom:var(--bzr-section-y,5.5rem)}