/**
 * ==============================================================================
 * 📄 Archivo: story.css
 * 📁 Ruta: wp-content/plugins/wp-storyxml-stories/assets/story.css
 *
 * Descripción:
 *   - Story editorial: foto fondo B/N + overlays en color por slide.
 *   - ✅ Config de tamaños/márgenes SOLO en CSS.
 *   - ✅ 3 modos:
 *       - STORY: .storyxml-story
 *       - CARD (post): .storyxml-story.is-card
 *       - PNG export: .storyxml-story.is-png (forzado por JS al clonar)
 *
 * ✅ PNG “sí o sí” B/N:
 *   - En export el JS inyecta .storyxml-export-photo (capa real con filtro B/N)
 *   - No dependemos de ::before durante html2canvas.
 *
 * Versión: 1.0.5
 * Último cambio: 2026-01-14 (Europe/Madrid)
 * Autor: Alberto
 * ==============================================================================
 */

/* ==============================================================================
   1) CONFIG ÚNICA (TOCAR SOLO AQUÍ)
   ========================================================================== */
:root{
  --story-w: 1080px;
  --story-h: 1920px;

  --brand: #2C4A9C;

  --font-editorial: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---------------- PRESET STORY ---------------- */
  --headline-lines-story: 4;
  --body-lines-story: 6;

  --fs-brand-story:    26px;
  --fs-badge-story:    11px;
  --fs-headline-story: 56px;
  --fs-body-story:     34px;

  --lh-headline-story: 1.06;
  --lh-body-story:     1.30;

  --pad-x-story:      84px;
  --pad-top-story:    132px;
  --pad-bottom-story: 150px;

  --topbar-pad-top-story: 14px;
  --topbar-pad-x-story:   18px;
  --progress-mt-story:    10px;
  --progress-h-story:     4px;

  --centerbrand-top-story: 62px;

  --cta-width-story:  min(720px, 92%);
  --cta-radius-story: 16px;
  --cta-pad-y-story:  18px;
  --cta-pad-x-story:  20px;
  --cta-font-story:   18px;
  --cta-gap-story:    10px;
  --cta-mt-story:     12px;

  /* ---------------- PRESET CARD ---------------- */
  --headline-lines-card: 4;
  --body-lines-card: 6;

  --fs-brand-card:    15px;
  --fs-badge-card:    9px;
  --fs-headline-card: 21px;
  --fs-body-card:     15.5px;

  --lh-headline-card: 1.16;
  --lh-body-card:     1.36;

  --pad-x-card:      20px;
  --pad-top-card:    86px;
  --pad-bottom-card: 26px;

  --topbar-pad-top-card: 10px;
  --topbar-pad-x-card:   14px;
  --progress-mt-card:    8px;
  --progress-h-card:     3px;

  --centerbrand-top-card: 56px;

  --cta-width-card:  min(520px, 92%);
  --cta-radius-card: 14px;
  --cta-pad-y-card:  12px;
  --cta-pad-x-card:  14px;
  --cta-font-card:   13px;
  --cta-gap-card:    8px;
  --cta-mt-card:     12px;

  --card-max-w: 420px;
  --card-radius: 18px;
  --shadow-card: 0 22px 70px rgba(0,0,0,.40);

  /* ---------------- PRESET PNG ---------------- */
  --headline-lines-png: 4;
  --body-lines-png: 6;

  --fs-brand-png:    80px;
  --fs-badge-png:    40px;
  --fs-headline-png: 80px;
  --fs-body-png:     60px;

  --lh-headline-png: 1.06;
  --lh-body-png:     1.30;

  --pad-x-png:      92px;
  --pad-top-png:    550px;
  --pad-bottom-png: 350px;

  --topbar-pad-top-png: 14px;
  --topbar-pad-x-png:   18px;
  --progress-mt-png:    10px;
  --progress-h-png:     4px;

  --centerbrand-top-png: 420px;

  --cta-width-png:  min(760px, 92%);
  --cta-radius-png: 18px;
  --cta-pad-y-png:  22px;
  --cta-pad-x-png:  22px;
  --cta-font-png:   22px;
  --cta-gap-png:    12px;
  --cta-mt-png:     14px;
}

/* ==============================================================================
   2) BASE (STORY por defecto)
   ========================================================================== */
.storyxml-story{
  position: relative;
  width: var(--story-w);
  height: var(--story-h);

  background:#000;
  color:#fff;
  overflow:hidden;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  --storyxml-brand: var(--brand);

  --headline-lines: var(--headline-lines-story);
  --body-lines:     var(--body-lines-story);

  --fs-brand:    var(--fs-brand-story);
  --fs-badge:    var(--fs-badge-story);
  --fs-headline: var(--fs-headline-story);
  --fs-body:     var(--fs-body-story);

  --lh-headline: var(--lh-headline-story);
  --lh-body:     var(--lh-body-story);

  --pad-x:      var(--pad-x-story);
  --pad-top:    var(--pad-top-story);
  --pad-bottom: var(--pad-bottom-story);

  --topbar-pad-top: var(--topbar-pad-top-story);
  --topbar-pad-x:   var(--topbar-pad-x-story);
  --progress-mt:    var(--progress-mt-story);
  --progress-h:     var(--progress-h-story);

  --centerbrand-top: var(--centerbrand-top-story);

  --cta-width:  var(--cta-width-story);
  --cta-radius: var(--cta-radius-story);
  --cta-pad-y:  var(--cta-pad-y-story);
  --cta-pad-x:  var(--cta-pad-x-story);
  --cta-font:   var(--cta-font-story);
  --cta-gap:    var(--cta-gap-story);
  --cta-mt:     var(--cta-mt-story);

  transform: translateZ(0);
}

/* ==============================================================================
   3) PRESET CARD (POST) + PREMIUM TUNE
   ========================================================================== */
.storyxml-story.is-card{
  width: min(var(--card-max-w), 100%);
  height: auto;
  aspect-ratio: 9 / 16;

  border-radius: var(--card-radius);

  border: 1px solid rgba(255,255,255,.10);
  background:#000;
  box-shadow:
    var(--shadow-card),
    0 2px 0 rgba(255,255,255,.04) inset;

  --headline-lines: var(--headline-lines-card);
  --body-lines:     var(--body-lines-card);

  --fs-brand:    var(--fs-brand-card);
  --fs-badge:    var(--fs-badge-card);
  --fs-headline: var(--fs-headline-card);
  --fs-body:     var(--fs-body-card);

  --lh-headline: var(--lh-headline-card);
  --lh-body:     var(--lh-body-card);

  --pad-x:      var(--pad-x-card);
  --pad-top:    var(--pad-top-card);
  --pad-bottom: var(--pad-bottom-card);

  --topbar-pad-top: var(--topbar-pad-top-card);
  --topbar-pad-x:   var(--topbar-pad-x-card);
  --progress-mt:    var(--progress-mt-card);
  --progress-h:     var(--progress-h-card);

  --centerbrand-top: var(--centerbrand-top-card);

  --cta-width:  var(--cta-width-card);
  --cta-radius: var(--cta-radius-card);
  --cta-pad-y:  var(--cta-pad-y-card);
  --cta-pad-x:  var(--cta-pad-x-card);
  --cta-font:   var(--cta-font-card);
  --cta-gap:    var(--cta-gap-card);
  --cta-mt:     var(--cta-mt-card);
}

/* Ajustes premium SOLO card */
.storyxml-story.is-card .storyxml-bg{
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.40) 50%,
      rgba(0,0,0,.88) 82%,
      rgba(0,0,0,.98) 100%
    ),
    linear-gradient(to left,
      rgba(var(--badge-rgb, 44,74,156), .52) 0%,
      rgba(var(--badge-rgb, 44,74,156), .26) 26%,
      rgba(var(--badge-rgb, 44,74,156), .12) 48%,
      rgba(var(--badge-rgb, 44,74,156), 0) 72%
    ),
    radial-gradient(700px 700px at 88% 56%,
      rgba(var(--badge-rgb, 44,74,156), .16) 0%,
      rgba(var(--badge-rgb, 44,74,156), 0) 62%
    );
}
.storyxml-story.is-card .storyxml-slide::after{
  background:
    radial-gradient(900px 700px at 50% 35%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(1000px 900px at 50% 70%, rgba(0,0,0,0) 40%, rgba(0,0,0,.44) 100%);
}
.storyxml-story.is-card .storyxml-centerbrand{
  opacity: .80;
  letter-spacing: .02em;
  text-shadow: 0 10px 22px rgba(0,0,0,.30);
}
.storyxml-story.is-card .storyxml-badge{
  border-radius: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.storyxml-story.is-card .storyxml-headline{
  letter-spacing: .02em;
  text-shadow: 0 12px 28px rgba(0,0,0,.34);
  max-width: 96%;
}
.storyxml-story.is-card .storyxml-body{
  opacity: .96;
  text-shadow: 0 10px 22px rgba(0,0,0,.30);
  max-width: 96%;
}
.storyxml-story.is-card .storyxml-divider{
  width: 96px;
  height: 2px;
  opacity: .85;
}
.storyxml-story.is-card .storyxml-cta-whatsapp,
.storyxml-story.is-card .storyxml-cta-twitter,
.storyxml-story.is-card .storyxml-cta-facebook{
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}
.storyxml-story.is-card .storyxml-nav-btn{
  -webkit-tap-highlight-color: transparent;
}

/* ==============================================================================
   4) PREVIEW WRAP
   ========================================================================== */
.storyxml-preview-body{
  margin:0;
  background:#0b0b0b;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.storyxml-preview-wrap{
  width: var(--story-w);
  height: var(--story-h);
  background:#000;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.storyxml-preview-body .storyxml-story{
  width: var(--story-w);
  height: var(--story-h);
  border-radius: 0;
  box-shadow: none;
}

/* ==============================================================================
   5) ESTRUCTURA
   ========================================================================== */
.storyxml-stage{ position:relative; width:100%; height:100%; }

.storyxml-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translate3d(0,10px,0);
  transition: opacity .22s ease, transform .22s ease;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow:hidden;
  z-index:1;
}
.storyxml-slide.is-active{ opacity:1; transform: translate3d(0,0,0); z-index:2; }

/* Foto B/N SOLO pantalla (modo normal) */
.storyxml-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;

  filter: grayscale(1) contrast(1.20) brightness(1.10);
  transform: scale(1.02);
  transform-origin:center;
  backface-visibility: hidden;
}

/* Viñeta */
.storyxml-slide::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 50% 35%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(1200px 1100px at 50% 70%, rgba(0,0,0,0) 40%, rgba(0,0,0,.38) 100%);
}

/* Overlay color */
.storyxml-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.44) 52%,
      rgba(0,0,0,.84) 82%,
      rgba(0,0,0,.97) 100%
    ),
    linear-gradient(to left,
      rgba(var(--badge-rgb, 44,74,156), .55) 0%,
      rgba(var(--badge-rgb, 44,74,156), .32) 22%,
      rgba(var(--badge-rgb, 44,74,156), .16) 45%,
      rgba(var(--badge-rgb, 44,74,156), 0) 70%
    ),
    radial-gradient(900px 900px at 92% 58%,
      rgba(var(--badge-rgb, 44,74,156), .18) 0%,
      rgba(var(--badge-rgb, 44,74,156), 0) 62%);
}

/* ==============================================================================
   ✅ CAPA REAL PARA PNG
   ========================================================================== */
.storyxml-export-photo{
  position:absolute;
  inset:0;
  z-index:0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: grayscale(1) contrast(1.20) brightness(1.10);
  transform: scale(1.02);
  transform-origin:center;
  backface-visibility: hidden;
}

/* En PNG anulamos el pseudo para no duplicar filtros */
.storyxml-story.is-png .storyxml-slide::before,
.storyxml-story[data-storyxml-mode="png"] .storyxml-slide::before{
  background-image: none !important;
  filter: none !important;
}

/* ==============================================================================
   6) TOPBAR
   ========================================================================== */
.storyxml-topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:90;
  pointer-events:none;
  padding: var(--topbar-pad-top) var(--topbar-pad-x) 0 var(--topbar-pad-x);
}
.storyxml-progress{
  margin-top: var(--progress-mt);
  display:grid;
  grid-auto-flow:column;
  gap:8px;
}
.storyxml-progress .bar{
  height: var(--progress-h);
  border-radius:999px;
  background: rgba(255,255,255,.22);
  overflow:hidden;
}
.storyxml-progress .bar > i{
  display:block;
  height:100%;
  width:0%;
  background: rgba(255,255,255,.92);
  transform-origin:left;
}

.storyxml-centerbrand{
  position:absolute;
  left:50%;
  top: var(--centerbrand-top);
  z-index:91;
  pointer-events:none;
  transform: translate(-50%,-50%);

  font-family: var(--font-editorial);
  font-weight: 300;
  text-transform: lowercase;
  opacity:.92;
  line-height:1;
  white-space:nowrap;
  text-shadow: 0 10px 22px rgba(0,0,0,.24);
  font-size: var(--fs-brand);
}

/* ==============================================================================
   7) CONTENIDO
   ========================================================================== */
.storyxml-editorial{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  gap: 9px;

  padding: var(--pad-top) var(--pad-x) var(--pad-bottom) var(--pad-x);
  align-items:flex-start;
  text-align:left;
}

.storyxml-badge{
  font-family: var(--font-sans);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#fff;
  background: var(--badge-color, var(--storyxml-brand));
  border-radius: 7px;
  padding: 5px 10px;
  line-height:1.1;

  display:inline-flex;
  align-items:center;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);

  max-width:72%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  font-size: var(--fs-badge);
}

.storyxml-headline{
  font-family: var(--font-editorial);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;

  text-shadow: 0 10px 26px rgba(0,0,0,.30);
  max-width: 94%;

  display:-webkit-box;
  -webkit-line-clamp: var(--headline-lines);
  -webkit-box-orient: vertical;
  overflow:hidden;

  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
}

.storyxml-divider{
  width: 112px;
  height: 2px;
  border-radius:999px;
  background: rgba(255,255,255,.62);
  opacity:.95;
}

.storyxml-body{
  font-family: var(--font-editorial);
  font-weight: 500;
  opacity:.94;

  text-shadow: 0 10px 20px rgba(0,0,0,.26);
  max-width: 94%;

  display:-webkit-box;
  -webkit-line-clamp: var(--body-lines);
  -webkit-box-orient: vertical;
  overflow:hidden;

  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Primera slide centrada */
.storyxml-slide[data-index="0"] .storyxml-editorial{
  bottom:auto;
  top:50%;
  transform: translateY(-50%);

  align-items:center;
  text-align:center;

  padding-top:0;
  padding-bottom:0;
}
.storyxml-slide[data-index="0"] .storyxml-headline,
.storyxml-slide[data-index="0"] .storyxml-body{ max-width: 86%; }
.storyxml-slide[data-index="0"] .storyxml-badge{
  max-width: 86%;
  justify-content:center;
}

/* ==============================================================================
   8) CTA
   ========================================================================== */
.storyxml-cta-wrap{
  width:100%;
  margin-top: var(--cta-mt);

  display:flex;
  flex-direction:column;
  gap: var(--cta-gap);

  position:relative;
  z-index:80;
  pointer-events:auto;
}
.storyxml-cta-whatsapp,
.storyxml-cta-twitter,
.storyxml-cta-facebook{
  display:flex;
  align-items:center;
  justify-content:center;

  width: var(--cta-width);
  text-decoration:none;

  font-family: var(--font-sans);
  font-weight:800;
  letter-spacing:.01em;

  border-radius: var(--cta-radius);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  line-height:1.15;

  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);

  font-size: var(--cta-font);
}
.storyxml-cta-whatsapp{ background:#25D366; color:#0a0a0a; }
.storyxml-cta-twitter{ background:#0a0a0a; color:#fff; border-color: rgba(255,255,255,.14); }
.storyxml-cta-facebook{ background:#1877F2; color:#fff; }

/* ==============================================================================
   9) NAV
   ========================================================================== */
.storyxml-nav{
  position:absolute;
  inset:0;
  z-index:50;
  display:grid;
  grid-template-columns: 1fr 1fr;
  pointer-events:none;
}
.storyxml-nav-btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
}

.storyxml-error{
  color:#fff;
  background:#111;
  padding:12px 14px;
  border-radius:12px;
  font-family: var(--font-sans);
}

/* ==============================================================================
   10) PRESET PNG (al final para ganar siempre)
   ========================================================================== */
.storyxml-story.is-png,
.storyxml-story[data-storyxml-mode="png"]{
  width: var(--story-w) !important;
  height: var(--story-h) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  --headline-lines: var(--headline-lines-png) !important;
  --body-lines:     var(--body-lines-png) !important;

  --fs-brand:    var(--fs-brand-png) !important;
  --fs-badge:    var(--fs-badge-png) !important;
  --fs-headline: var(--fs-headline-png) !important;
  --fs-body:     var(--fs-body-png) !important;

  --lh-headline: var(--lh-headline-png) !important;
  --lh-body:     var(--lh-body-png) !important;

  --pad-x:      var(--pad-x-png) !important;
  --pad-top:    var(--pad-top-png) !important;
  --pad-bottom: var(--pad-bottom-png) !important;

  --topbar-pad-top: var(--topbar-pad-top-png) !important;
  --topbar-pad-x:   var(--topbar-pad-x-png) !important;
  --progress-mt:    var(--progress-mt-png) !important;
  --progress-h:     var(--progress-h-png) !important;

  --centerbrand-top: var(--centerbrand-top-png) !important;

  --cta-width:  var(--cta-width-png) !important;
  --cta-radius: var(--cta-radius-png) !important;
  --cta-pad-y:  var(--cta-pad-y-png) !important;
  --cta-pad-x:  var(--cta-pad-x-png) !important;
  --cta-font:   var(--cta-font-png) !important;
  --cta-gap:    var(--cta-gap-png) !important;
  --cta-mt:     var(--cta-mt-png) !important;
}

/* ==============================================================================
   ✅ ELIMINAR CAJAS DE ÍNDICE AUTOMÁTICAS EN EL POST
   (RankMath, Easy TOC, bloque WP, etc.)
   - Tú quieres un índice simple en el contenido (H2 + UL normal)
   ========================================================================== */
.entry-content .rank-math-toc,
.entry-content .rank-math-toc-block,
.entry-content .ez-toc-container,
.entry-content .wp-block-table-of-contents,
.entry-content nav[aria-label*="ndice"]{
  display: none !important;
}
/* =============================================================================
   StoryXML · FIX TOC duplicado y numeración rara (solo dentro del artículo)
   - Mantener SOLO .storyxml-toc (el índice rápido del plugin)
   - Ocultar TOCs automáticos de tema/plugins comunes
   - Quitar counters/números añadidos por CSS
============================================================================= */

.storyxml-article-wrap .storyxml-toc {
  margin: 18px 0 18px 0;
  padding: 14px 14px;
  border-radius: 14px;
  background: #f6f7fb;
  border: 1px solid rgba(0,0,0,.06);
}

.storyxml-article-wrap .storyxml-toc-title {
  font-weight: 600;
  margin: 0 0 10px 0;
}

.storyxml-article-wrap .storyxml-toc-list {
  margin: 0;
  padding-left: 18px;
}

.storyxml-article-wrap .storyxml-toc-list li {
  margin: 6px 0;
}

/* ✅ Oculta índices externos típicos (plugins/tema) */
.storyxml-article-wrap .ez-toc-container,
.storyxml-article-wrap .lwptoc,
.storyxml-article-wrap .rank-math-toc,
.storyxml-article-wrap .toc,
.storyxml-article-wrap nav.toc,
.storyxml-article-wrap .wp-block-table-of-contents,
.storyxml-article-wrap .table-of-contents {
  display: none !important;
}

/* ✅ Quita números/counters raros en enlaces si algún TOC se cuela */
.storyxml-article-wrap a::before,
.storyxml-article-wrap a::after,
.storyxml-article-wrap li::before,
.storyxml-article-wrap li::after,
.storyxml-article-wrap li::marker {
  content: none !important;
}