/* ════════════════════════════════════════════════════════════════
   VICTOR IA · BLOG PREMIUM — Web 4.0 + 21st.dev (quiet luxury)
   Compartido por los 130 posts. Portada generativa única por slug.
   Paleta: ink #070708 · cream #EAE6DF · gold #B89A6A · muted #706C66
════════════════════════════════════════════════════════════════ */

:root{
  --ink:#070708; --ink2:#0A0A0C; --ink3:#0F0F12;
  --cream:#EAE6DF; --muted:#706C66; --gold:#B89A6A; --gold2:#CDB28C;
  --line:rgba(255,255,255,.06); --gline:rgba(184,154,106,.22);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── Utilidades (subset Tailwind usado en header/nav/footer) ──── */
.flex{display:flex}.hidden{display:none}.relative{position:relative}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-5{gap:1.25rem}.gap-9{gap:2.25rem}
.mx-auto{margin-left:auto;margin-right:auto}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.h-full{height:100%}.z-10{z-index:10}.max-w-\[1200px\]{max-width:1200px}
.font-display{font-family:'Cormorant Garamond','Georgia',serif}.font-light{font-weight:300}
.text-cream{color:var(--cream)}.text-\[21px\]{font-size:21px}.text-\[18px\]{font-size:18px}
.tracking-\[\.04em\]{letter-spacing:.04em}
@media(min-width:640px){.sm\:block{display:block}}
@media(min-width:768px){.md\:flex{display:flex}.md\:px-16{padding-left:4rem;padding-right:4rem}}

/* ── TÍTULO (texto del artículo) ─────────────────────────────── */
.vp-h1{font-family:'Cormorant Garamond',serif;font-weight:300;letter-spacing:-.02em;
  font-size:clamp(32px,5vw,54px);line-height:1.14;color:var(--cream);
  max-width:20ch;text-wrap:balance}
.vp-h1 .it{font-style:italic;color:var(--gold)}
.vp-sub{font-size:clamp(15px,2vw,18px);line-height:1.75;color:rgba(234,230,223,.62);
  font-weight:300;max-width:62ch}
.vp-meta{display:flex;gap:16px;align-items:center;font-size:11.5px;letter-spacing:.07em;
  color:var(--muted);flex-wrap:wrap}
.vp-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(184,154,106,.4)}
.vp-meta .av{display:inline-flex;align-items:center;gap:8px}

/* ── PORTADA (imagen real IA, limpia y nítida) ───────────────── */
.vp-cover{position:relative;margin:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#0b0b0e;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);will-change:transform}
.vp-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transform:scale(1.001);transition:transform 1.2s var(--ease),filter 1.2s var(--ease);
  filter:saturate(1.02) contrast(1.02)}
.vp-cover:hover img{transform:scale(1.035)}
/* borde superior luminoso dorado (acento luxury) */
.vp-cover::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(205,178,140,.55),transparent)}
/* grano sutil para que no se vea plano */
.vp-cover-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:640px){.vp-cover{border-radius:12px}}

/* ── Tags / chips ────────────────────────────────────────────── */
.vp-tags{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.vp-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gline);border-radius:3px;padding:4px 11px;
  background:rgba(184,154,106,.04);transition:background .35s,border-color .35s}
.vp-tag:hover{background:rgba(184,154,106,.1);border-color:var(--gold)}
.vp-meta .av svg{opacity:.7}

/* ── Barra de progreso de lectura ────────────────────────────── */
#vp-pbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:100000;transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* ── Reveals al hacer scroll ─────────────────────────────────── */
.vp-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.vp-rv.on{opacity:1;transform:none}
.vp-rv[data-d="1"]{transition-delay:.08s}
.vp-rv[data-d="2"]{transition-delay:.16s}
.vp-rv[data-d="3"]{transition-delay:.24s}

/* ── Iconos SVG de diseño propio (stroke draw + hover) ───────── */
.vp-ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;color:var(--gold)}
.vp-ic path,.vp-ic circle,.vp-ic rect,.vp-ic line{
  vector-effect:non-scaling-stroke;transition:stroke-dashoffset .9s var(--ease)}
/* icono "feature" en chips de sección */
.vp-chip{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin:8px 0}
.vp-chip svg{width:18px;height:18px}

/* ── Floating CTA / share rail (21st.dev style) ──────────────── */
.vp-rail{position:fixed;left:max(18px,calc(50% - 560px));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:400}
.vp-rail a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);background:rgba(15,15,18,.6);backdrop-filter:blur(10px);
  transition:color .3s,border-color .3s,transform .35s var(--ease)}
.vp-rail a:hover{color:var(--gold);border-color:var(--gline);transform:translateY(-2px) scale(1.06)}
.vp-rail svg{width:16px;height:16px}
@media(max-width:1180px){.vp-rail{display:none}}

/* ── Realce de elementos del cuerpo (parallax sutil) ─────────── */
.article-visual,.key-takeaways,.data-grid,.compare-table{will-change:transform}
.data-card{transition:transform .5s var(--ease),border-color .45s,background .45s}
.data-card:hover{transform:translateY(-4px);border-color:var(--gline);
  background:rgba(184,154,106,.045)}

/* ── AGENTE LECTOR — resaltado palabra por palabra ───────────── */
.vp-w{transition:color .15s,background .15s;border-radius:3px;padding:0 .5px}
.vp-w.on{color:#070708;background:var(--gold);
  box-shadow:0 0 0 2px var(--gold);}
/* bloque visual/tabla resaltado mientras el lector lo narra */
.vp-narrating{position:relative;transition:box-shadow .4s,transform .4s var(--ease)}
.vp-narrating::after{content:'';position:absolute;inset:-6px;border-radius:14px;pointer-events:none;
  border:1px solid rgba(184,154,106,.5);box-shadow:0 0 30px -6px rgba(184,154,106,.4);
  animation:vpNarr 1.6s ease-in-out infinite}
@keyframes vpNarr{0%,100%{opacity:.5}50%{opacity:1}}
/* barra flotante del lector (21st.dev style) */
.vp-reader-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(0);
  z-index:9000;display:flex;align-items:center;gap:8px;
  background:rgba(12,12,15,.82);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--gline);border-radius:999px;padding:7px 8px 7px 7px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;animation:vpReaderIn .8s var(--ease) .6s forwards}
@keyframes vpReaderIn{to{opacity:1;transform:translateX(-50%) translateY(0)}}
.vp-read-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:none;color:var(--cream);font-family:'Inter',sans-serif;
  font-size:12.5px;letter-spacing:.04em;padding:7px 16px 7px 13px;border-radius:999px;
  transition:background .3s,color .3s}
.vp-read-btn:hover{background:rgba(184,154,106,.12);color:#fff}
.vp-read-btn svg{color:var(--gold);flex-shrink:0}
.vp-reader-bar.active .vp-read-btn{background:rgba(184,154,106,.12)}
.vp-read-stop{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.vp-read-stop:hover{color:var(--gold);border-color:var(--gline);background:rgba(184,154,106,.08)}
/* anillo "en vivo" cuando está leyendo */
.vp-reader-bar.active::before{content:'';position:absolute;inset:-1px;border-radius:999px;
  border:1px solid rgba(184,154,106,.35);animation:vpPulse 2s ease-out infinite;pointer-events:none}
@keyframes vpPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
@media(max-width:640px){.vp-reader-bar{bottom:16px}.vp-read-btn .vp-read-label{display:none}}

/* ── Accesibilidad / rendimiento ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){.vp-rv{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.vp-cover img{transform:none!important}.vp-reader-bar{animation:none!important;opacity:1}}

/* ARTICLE COVER IMAGES - RESPONSIVE */
.article-cover {
  margin: 40px 0 36px 0;
  max-width: 100%;
  width: 100%;
  text-align: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: slideInDown 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  background: #0a0a0a;
  display: block;
  border: 1px solid rgba(184, 154, 106, 0.08);
}

.article-cover img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  line-height: 0;
  font-size: 0;
  filter: brightness(1) contrast(1.02);
}

.article-cover img:hover {
  transform: scale(1.03);
  filter: brightness(1.05) contrast(1.05);
}

/* TABLET - 768px and below */
@media (max-width: 768px) {
  .article-cover {
    margin: 32px 0 28px 0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }
}

/* MOBILE - 480px and below */
@media (max-width: 480px) {
  .article-cover {
    margin: 24px 0 20px 0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  .article-cover img {
    border-radius: 10px;
  }
}

/* ANIMATION */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === POPUP CONVERTER 3D EBOOK === */
.converter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.converter-modal.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.converter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.converter-container {
  position: relative;
  z-index: 10000;
  background: linear-gradient(135deg, #0F0F12 0%, #1A1A1F 100%);
  border: 1px solid rgba(184, 154, 106, 0.2);
  border-radius: 20px;
  padding: 48px;
  max-width: 820px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: 40px;
  align-items: center;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.converter-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  color: rgba(234, 230, 223, 0.5);
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  padding: 8px;
  line-height: 1;
}

.converter-close:hover {
  color: #B89A6A;
  transform: rotate(90deg);
}

/* 3D EBOOK MOCKUP */
.converter-ebook {
  flex-shrink: 0;
  width: 200px;
  height: 280px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.converter-book {
  width: 160px;
  height: 240px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-25deg) rotateX(5deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  animation: bookFloat 3s ease-in-out infinite;
}

.converter-ebook:hover .converter-book {
  transform: rotateY(-15deg) rotateX(8deg);
}

@keyframes bookFloat {
  0%, 100% { transform: rotateY(-25deg) rotateX(5deg) translateY(0); }
  50% { transform: rotateY(-25deg) rotateX(5deg) translateY(-10px); }
}

.converter-book-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #B89A6A 0%, #CDB28C 50%, #8B6F47 100%);
  border-radius: 8px;
  transform: translateZ(15px);
  box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #070708;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  padding: 20px;
  font-family: 'Cormorant Garamond', serif;
  overflow: hidden;
}

.converter-book-front::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(7, 7, 8, 0.15);
  border-radius: 4px;
  pointer-events: none;
}

.converter-book-spine {
  position: absolute;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, #4A3F28 0%, #070708 50%, #4A3F28 100%);
  transform: translateZ(-15px) rotateY(90deg);
  transform-origin: right;
  border-radius: 0 8px 8px 0;
}

.converter-book-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2A2A2F;
  transform: translateZ(-15px);
  border-radius: 8px;
}

/* FORM CONTENT */
.converter-content {
  flex: 1;
  min-width: 280px;
}

.converter-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B89A6A;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

.converter-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 300;
  color: #EAE6DF;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.converter-subtitle {
  font-size: 14px;
  color: rgba(234, 230, 223, 0.65);
  margin-bottom: 28px;
  line-height: 1.6;
}

.converter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.converter-form input,
.converter-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 154, 106, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #EAE6DF;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.converter-form input::placeholder,
.converter-form textarea::placeholder {
  color: rgba(234, 230, 223, 0.35);
}

.converter-form input:focus,
.converter-form textarea:focus {
  outline: none;
  border-color: #B89A6A;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(184, 154, 106, 0.15);
}

.converter-form button[type="submit"] {
  background: linear-gradient(135deg, #B89A6A 0%, #CDB28C 100%);
  color: #070708;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.converter-form button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(184, 154, 106, 0.3);
}

.converter-form button[type="submit"]:active {
  transform: translateY(-1px);
}

.converter-privacy {
  font-size: 11px;
  color: rgba(234, 230, 223, 0.45);
  margin-top: 16px;
  line-height: 1.5;
  text-align: center;
}

.converter-privacy a {
  color: #B89A6A;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 154, 106, 0.4);
  transition: color 0.3s;
}

.converter-privacy a:hover {
  color: #CDB28C;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .converter-container {
    flex-direction: column;
    padding: 40px 24px;
    gap: 28px;
    max-width: 100%;
  }

  .converter-ebook {
    width: 160px;
    height: 224px;
  }

  .converter-book {
    width: 130px;
    height: 195px;
  }

  .converter-title {
    font-size: clamp(20px, 4vw, 28px);
  }
}

@media (max-width: 480px) {
  .converter-container {
    padding: 32px 20px;
    gap: 20px;
  }

  .converter-ebook {
    width: 140px;
    height: 200px;
  }

  .converter-book {
    width: 110px;
    height: 165px;
  }

  .converter-title {
    font-size: 22px;
  }

  .converter-form input,
  .converter-form textarea {
    padding: 10px 12px;
    font-size: 16px;
  }

  .converter-form button[type="submit"] {
    padding: 12px 20px;
    font-size: 13px;
  }

  .converter-close {
    top: 12px;
    right: 12px;
    font-size: 28px;
  }
}