/*
 * ZopiTech 2026 — PILOT blog/editorial contrast system.
 * This is a deliberate companion to the approved Violeta Futurista home:
 * same color DNA, distinctly editorial layouts, clear reading surfaces.
 * Only page-blog and page-blog-article (ES/EN) are affected.
 * No changes to home or other interior CSS. Removing the include restores blog.
 */
.page-blog,
.page-blog-article{
  --zt-midnight:#0B0A17;
  --zt-ink:#14112A;
  --zt-violet:#7F4DF5;
  --zt-violet-deep:#6040BF;
  --zt-glow:#C5A4FF;
  --zt-lilac:#F5F2FC;
  --zt-border:#DDD5EE;
  --purple:var(--zt-violet-deep);
  --ink:var(--zt-ink);
  --navy:var(--zt-midnight);
}
/* The blog uses the same approved Home navigation via the shared partial,
   shared JS and dedicated home-nav-shared.css: no old header or menu CSS. */

/* Category landing — deep editorial prologue, not a second home. */
.page-blog .blog-hero--editorial{
  isolation:isolate;
  padding:66px 0 82px;
  color:#FFF;
  border-bottom:1px solid rgba(175,145,246,.3);
  background:
    radial-gradient(ellipse at 88% 11%,rgba(123,64,235,.41),transparent 53%),
    radial-gradient(ellipse at 8% 105%,rgba(69,31,110,.43),transparent 50%),
    linear-gradient(115deg,#0B0A17,#1A1230 57%,#2A1D46);
}
.page-blog .blog-hero--editorial::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  top:0;right:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:.18;
  pointer-events:none;
  background:url('/assets/look-samples/mesh-dark.svg') center/cover no-repeat;
}
.page-blog .blog-hero__grid{
  align-items:center;
  gap:clamp(30px,4.5vw,76px);
}
.page-blog .blog-hero .inner-eyebrow{
  color:#D5B9FF;
  font-weight:850;
  letter-spacing:.16em;
}
.page-blog .blog-hero h1{
  max-width:780px;
  font-size:clamp(39px,4.4vw,62px);
  letter-spacing:-.055em;
  line-height:1.075;
  color:#FFF;
}
.page-blog .blog-hero h1 span{color:#C5A4FF}
.page-blog .blog-hero__copy>p{
  color:#D5D0E3;
  font-size:clamp(14px,1.18vw,17px);
  line-height:1.7;
  max-width:620px;
}
.page-blog .blog-hero__signals{
  border-top:1px solid rgba(197,164,255,.30);
}
.page-blog .blog-hero__signals>div{
  border-right-color:rgba(218,197,255,.21);
}
.page-blog .blog-hero__signals strong{
  color:#F8F4FF;
  font-size:20px;
}
.page-blog .blog-hero__signals span{
  color:#BFB3D7;
  font-size:10px;
}
.page-blog .blog-hero__panel--manifesto{
  border:1px solid rgba(195,157,255,.36);
  border-top:3px solid #AF87FF;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(78,52,119,.40),rgba(13,12,32,.73));
  box-shadow:0 20px 60px rgba(6,5,21,.25);
  backdrop-filter:blur(8px);
  padding:clamp(22px,2.6vw,34px);
}
.page-blog .blog-hero__panel--manifesto::after{
  background:radial-gradient(circle,rgba(173,57,231,.25),transparent 70%);
}
.page-blog .blog-hero__panel>span{color:#CDB4FF}
.page-blog .blog-hero__panel strong{color:#FFF;font-size:22px}
.page-blog .blog-hero__panel p{color:#D9D2E8;font-size:13px}
.page-blog .blog-manifesto-grid span{
  border-radius:5px;
  color:#F2EAFF;
  border:1px solid rgba(199,165,255,.26);
  background:rgba(178,136,244,.095);
}

/* Fixed blog listing hero tint: #C52A39 at 55%.
   Approved design only; no runtime controls or URL-based overrides. */
.page-blog .blog-hero--editorial::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#C52A39;
  opacity:.55;
  pointer-events:none;
}
.page-blog .blog-hero--editorial::before{z-index:1}
.page-blog .blog-hero--editorial .blog-hero__grid{position:relative;z-index:2}

/* Calm reading / discovery surfaces deliberately oppose the dark prologue. */
.page-blog .blog-index{
  background:linear-gradient(180deg,#F9F8FD,#FFF 44%);
  color:var(--zt-ink);
  padding-top:52px;
}
.page-blog .blog-category-nav a{
  border-radius:6px;
  background:#FFF;
  color:#514965;
  border-color:#DCD4EB;
  font-size:11px;
}
.page-blog .blog-category-nav a.is-active,
.page-blog .blog-category-nav a:hover{
  background:#241639;
  border-color:#241639;
  color:#FFF;
}
.page-blog .blog-category-nav a small{
  background:#F2EDFA;
  color:#574179;
}
.page-blog .blog-category-nav a.is-active small,
.page-blog .blog-category-nav a:hover small{
  background:rgba(255,255,255,.15);
  color:#FFF;
}
.page-blog .blog-index__heading h2{
  color:#19142C;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.045em;
}
.page-blog .blog-index__heading .inner-eyebrow{
  color:#6040BF;
  letter-spacing:.12em;
}
.page-blog .blog-index__heading>p{color:#5A5770}
.page-blog .blog-featured{
  border:1px solid var(--zt-border);
  border-top:3px solid #9571E9;
  border-radius:9px;
  box-shadow:0 16px 40px rgba(31,18,70,.07);
}
.page-blog .blog-featured__body{background:#FFF}
.page-blog .blog-featured__top>span{
  background:#2A1D46;
  border-radius:4px;
}
.page-blog .blog-featured h2,
.page-blog .blog-card h2{
  color:#191329;
  letter-spacing:-.035em;
}
.page-blog .blog-read-more{color:#6040BF}
.page-blog .blog-featured__placeholder,
.page-blog .blog-card__placeholder{
  background:
    radial-gradient(circle at 87% 12%,rgba(159,117,248,.46),transparent 35%),
    linear-gradient(135deg,#151024,#3F2764 70%,#633CA4);
}
.page-blog .blog-card{
  border-radius:7px;
  border:1px solid #DDD5EC;
  box-shadow:0 8px 23px rgba(25,18,59,.035);
}
.page-blog .blog-card:hover{
  box-shadow:0 15px 34px rgba(31,21,73,.10);
}
.page-blog .blog-card__meta span{color:#6240B8}
.page-blog .blog-card__body>p,
.page-blog .blog-featured__body>p{color:#57566B}
.page-blog .blog-final-cta{
  padding-top:22px;
  background:#FFF;
}
.page-blog .blog-final-cta__box,
.page-blog-article .blog-article-cta{
  border-radius:8px;
  border:1px solid rgba(203,173,255,.26);
  background:
    radial-gradient(ellipse at 95% 20%,rgba(139,74,240,.37),transparent 53%),
    linear-gradient(110deg,#0B0A17,#2A1D46);
  box-shadow:0 16px 38px rgba(23,14,56,.11);
}
.page-blog .blog-final-cta__box .button,
.page-blog-article .blog-article-cta .button{
  color:#170D2B;
  background:#FFF;
  border:1px solid #FFF;
  border-radius:6px;
}

/* Article: same entrance tone, pure light reading field. */
/* Fixed tint shared by ALL blog posts in Spanish and English: #7039E7 at 36%.
   This also applies to future posts, independent of preview/local settings. */
.page-blog-article .blog-article__header{
  isolation:isolate;
}
.page-blog-article .blog-article__header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#7039E7;
  opacity:.36;
  pointer-events:none;
}
.page-blog-article .blog-article__header::after{z-index:0}
.page-blog-article .blog-article__header-inner{position:relative;z-index:2}

.page-blog-article{background:#FFF}
.page-blog-article .blog-reading-progress span{
  background:linear-gradient(90deg,#7F4DF5,#CEABFF);
}
.page-blog-article .blog-article__header{
  padding-top:62px;
  padding-bottom:68px;
  background:
    radial-gradient(ellipse at 96% 15%,rgba(133,69,246,.35),transparent 48%),
    linear-gradient(112deg,#0B0A17,#211536 79%,#2A1D46);
  color:#FFF;
  border-bottom:1px solid #5A367D;
}
.page-blog-article .blog-article__header::after{
  inset:0;
  width:auto;height:auto;
  border-radius:0;
  background:url('/assets/look-samples/mesh-dark.svg') center/cover no-repeat;
  opacity:.12;
}
.page-blog-article .blog-article__header h1{
  color:#FFF;
  font-size:clamp(33px,3.6vw,53px);
}
.page-blog-article .blog-back,
.page-blog-article .blog-article__meta span{
  color:#CEABFF;
}
.page-blog-article .blog-breadcrumbs,
.page-blog-article .blog-breadcrumbs a,
.page-blog-article .blog-breadcrumbs strong{
  color:#D7CDEB;
}
.page-blog-article .blog-breadcrumbs span{color:#A992C1}
.page-blog-article .blog-article__lead{color:#D7D1E6}
.page-blog-article .blog-article__meta{color:#BFB6D2}
.page-blog-article .blog-article__avatar{
  border-radius:5px;
  background:#6847C6;
}
.page-blog-article .blog-article__byline strong{color:#FAF8FF}
.page-blog-article .blog-article__byline small{color:#C7BEDA}
.page-blog-article .blog-share button{
  color:#F3EBFF;
  background:rgba(193,157,255,.10);
  border-color:rgba(215,188,255,.34);
}
.page-blog-article .blog-share button:hover{
  color:#FFF;
  border-color:#CDB2FF;
  background:rgba(193,157,255,.25);
}
.page-blog-article .blog-article__cover{
  border-radius:8px;
  border:1px solid #E5DEEF;
  margin-top:32px;
  box-shadow:0 16px 42px rgba(23,16,56,.10);
}
.page-blog-article .blog-prose{
  color:#24253C;
  line-height:1.85;
}
.page-blog-article .blog-prose h2,
.page-blog-article .blog-prose h3{
  color:#17132B;
}
.page-blog-article .blog-prose h2::before,
.page-blog-article .blog-article__aside-card{
  border-color:#7F4DF5;
}
.page-blog-article .blog-article__aside-card{border-top-width:2px}
.page-blog-article .blog-prose blockquote{
  background:#F4F1FA;
  border-left-color:#7F4DF5;
  border-radius:0 6px 6px 0;
}
.page-blog-article .blog-prose pre{
  background:#101023;
  border-radius:7px;
}
.page-blog-article .blog-related{background:#F8F7FC}
.page-blog-article .blog-related__grid article{
  border-radius:7px;
  border-color:#DDD5EC;
}

/* Responsive behavior continues to use the existing blog grid breakpoints. */
@media(max-width:950px){
  .page-blog .blog-hero--editorial{padding:52px 0 64px}
  .page-blog .blog-hero__panel--manifesto{max-width:640px}
  .page-blog-article .blog-article__header{padding-top:50px}
}
@media(max-width:680px){
  .page-blog .blog-hero--editorial{padding:43px 0 49px}
  .page-blog .blog-hero h1{font-size:clamp(35px,9vw,46px)}
  .page-blog .blog-hero__signals{margin-top:26px}
  .page-blog .blog-hero__signals>div{padding-top:13px}
  .page-blog .blog-hero__panel--manifesto{padding:22px}
  .page-blog .blog-featured{border-radius:7px}
  .page-blog .blog-featured h2{font-size:clamp(24px,7vw,32px)}
  .page-blog-article .blog-article__header{padding:40px 0 42px}
  .page-blog-article .blog-article__cover{margin-top:23px}
  .page-blog .blog-final-cta__box,
  .page-blog-article .blog-article-cta{padding:26px}
}
@media(prefers-reduced-motion:reduce){
  .page-blog .blog-card,
  .page-blog .blog-featured__visual img{transition:none!important}
}

/* Narrow phones: existing editorial counters and category pills scroll inside
   their own rows, never enlarge the page's visual viewport. */
@media(max-width:680px){
  .page-blog .blog-hero__grid{
    grid-template-columns:minmax(0,1fr);
  }
  .page-blog .blog-hero__copy,
  .page-blog .blog-hero__panel--manifesto{
    min-width:0;
    max-width:100%;
  }
  .page-blog .blog-hero__signals,
  .page-blog .blog-category-nav{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-right:0;
    padding-right:0;
  }
}

/* Visual consistency: square editorial boxes like the approved Home.
   Scoped to blog index/articles: no global cards, shared navigation, or
   circular ornamental elements are changed. Keep this after mobile rules. */
.page-blog .blog-hero__panel--manifesto,
.page-blog .blog-manifesto-grid span,
.page-blog .blog-category-nav a,
.page-blog .blog-category-nav a small,
.page-blog .blog-featured,
.page-blog .blog-featured__top>span,
.page-blog .blog-card,
.page-blog .blog-empty,
.page-blog .blog-pagination a,
.page-blog .blog-pagination span,
.page-blog .blog-final-cta__box,
.page-blog .blog-final-cta__box .button,
.page-blog-article .blog-article__cover,
.page-blog-article .blog-article-cta,
.page-blog-article .blog-article-cta .button,
.page-blog-article .blog-prose blockquote,
.page-blog-article .blog-prose pre,
.page-blog-article .blog-related__grid article,
.page-blog-article .blog-internal-links a,
.page-blog-article .blog-toc,
.page-blog-article .blog-share button,
.page-blog-article .blog-article__avatar,
.page-blog-article .blog-article__meta span {
  border-radius:0;
}