/* ========================================================================
   EB Publisher — Estilos frontend
   Animaciones: fade-in al scroll en imágenes, efecto revista en textos
   ======================================================================== */

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
  --eb-gold:        #c9a84c;
  --eb-dark:        #1a1a1a;
  --eb-transition:  0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset base para <button> usados como switchers ─────────────────── */
.eb-global-lang__btn,
.eb-home-lang-cta__btn,
.eb-lang-btn {
  -webkit-appearance: none;
  appearance:         none;
  background:         transparent;
  border:             none;
  cursor:             pointer;
  font-family:        inherit;
}


/* ── Botón de idioma fijo — inferior izquierda (siempre visible) ─────── */
.eb-home-lang-cta {
  position:      fixed;
  top:           0;
  left:          0;
  z-index:       100001;   /* por encima del admin bar (99999) y el header del tema */
  border-radius: 0 0 4px 0;
  box-shadow:    2px 2px 16px rgba(0,0,0,0.35);
  overflow:      hidden;
}

.eb-home-lang-cta__btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.6em;
  padding:        1.05em 2.1em 1.05em 1.65em;
  background:     #000;
  border:         none !important;
  color:          #fff;
  font-size:      1.275rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:     background 0.2s, color 0.2s;
  white-space:    nowrap;
}

.eb-home-lang-cta__btn:hover {
  background: var(--eb-gold);
  color:      #000;
}

.eb-home-lang-cta__tag {
  display:        inline-block;
  padding:        0.15em 0.5em;
  background:     var(--eb-gold);
  color:          var(--eb-dark);
  font-size:      1.1rem;
  font-weight:    800;
  letter-spacing: 0.12em;
  border-radius:  2px;
  transition:     background 0.2s, color 0.2s;
}

.eb-home-lang-cta__btn:hover .eb-home-lang-cta__tag {
  background: var(--eb-dark);
  color:      var(--eb-gold);
}

.eb-home-lang-cta__arrow {
  font-size: 0.9em;
  opacity:   0.7;
}

@media (max-width: 600px) {
  .eb-home-lang-cta {
    top: 0;
  }
  .eb-home-lang-cta__btn {
    font-size: 1rem;
    padding:   0.8em 1.4em 0.8em 1.1em;
  }
}

/* ── Botón de cambio de idioma (dentro de cada nota) ───────────────── */
.eb-lang-switcher {
  margin-bottom: 1.5rem;
}

.eb-lang-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              0.5em;
  padding:          0.45em 1.2em;
  border:           1.5px solid var(--eb-gold);
  color:            var(--eb-gold);
  font-size:        0.8rem;
  font-weight:      600;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  text-decoration:  none;
  border-radius:    2px;
  transition:       background var(--eb-transition), color var(--eb-transition);
}

.eb-lang-btn:hover {
  background: var(--eb-gold);
  color:      #fff;
}

.eb-lang-tag {
  display:          inline-block;
  padding:          0.1em 0.45em;
  background:       var(--eb-gold);
  color:            #fff;
  font-size:        0.7rem;
  font-weight:      700;
  letter-spacing:   0.12em;
  border-radius:    1px;
  transition:       background var(--eb-transition);
}

.eb-lang-btn:hover .eb-lang-tag {
  background: #fff;
  color:      var(--eb-gold);
}

/* ── Fade-in al scroll (imágenes) ────────────────────────────────────
   Se aplica a imágenes dentro del contenido del post.
   La clase .eb-visible la añade el JS cuando el elemento entra en viewport.
   ──────────────────────────────────────────────────────────────────── */
.eb-fade-in {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity var(--eb-transition), transform var(--eb-transition);
  will-change: opacity, transform;
}

.eb-fade-in.eb-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Aplicar a imágenes del contenido — solo en notas individuales */
body.single-post .entry-content img,
body.single-post .post-content img,
body.single-post .wp-post-image {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity var(--eb-transition), transform var(--eb-transition);
  will-change: opacity, transform;
}

body.single-post .entry-content img.eb-visible,
body.single-post .post-content img.eb-visible,
body.single-post .wp-post-image.eb-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Efecto revista: texto entra de derecha a izquierda ──────────────
   Se aplica a párrafos, encabezados y listas dentro del contenido.
   ──────────────────────────────────────────────────────────────────── */
.eb-slide-in {
  opacity:    0;
  transform:  translateX(48px);
  transition: opacity var(--eb-transition), transform var(--eb-transition);
  will-change: opacity, transform;
}

.eb-slide-in.eb-visible {
  opacity:   1;
  transform: translateX(0);
}

/* Cada párrafo / encabezado recibe la clase vía JS — solo en notas individuales */
body.single-post .entry-content p,
body.single-post .post-content p,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .post-content h2,
body.single-post .post-content h3,
body.single-post .post-content h4,
body.single-post .post-content ul,
body.single-post .post-content ol {
  opacity:    0;
  transform:  translateX(48px);
  transition: opacity var(--eb-transition), transform var(--eb-transition);
  will-change: opacity, transform;
}

body.single-post .entry-content p.eb-visible,
body.single-post .post-content p.eb-visible,
body.single-post .entry-content h2.eb-visible,
body.single-post .entry-content h3.eb-visible,
body.single-post .entry-content h4.eb-visible,
body.single-post .entry-content ul.eb-visible,
body.single-post .entry-content ol.eb-visible,
body.single-post .post-content h2.eb-visible,
body.single-post .post-content h3.eb-visible,
body.single-post .post-content h4.eb-visible,
body.single-post .post-content ul.eb-visible,
body.single-post .post-content ol.eb-visible {
  opacity:   1;
  transform: translateX(0);
}

/* ── Wrapper del flipbook Heyzine ────────────────────────────────────  */
.eb-heyzine-wrapper {
  position:   relative;
  width:      100%;
  margin:     2.5rem 0;
  border:     1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.eb-heyzine-wrapper iframe {
  display: block;
  width:   100%;
  min-height: 520px;
  border:  none;
}

/* ── Responsive ──────────────────────────────────────────────────────  */
@media (max-width: 600px) {
  .eb-heyzine-wrapper iframe {
    min-height: 320px;
  }
}

/* ── Sesión EN: ocultar contadores de vistas y comentarios ───────────
   body.eb-lang-en → visitante en inglés (todos los posts del loop son EN).
   Selectores del tema the-rex: .views y .comments dentro de .meta.
   Cuando se implemente la unificación de contadores (Opción A),
   eliminar estas reglas.
   ─────────────────────────────────────────────────────────────────── */
body.eb-lang-en .views,
body.eb-lang-en .comments {
  display: none !important;
}