/*
 Theme Name: Astra Child (MyCityPB)
 Theme URI: https://mycitypb.com
 Description: Child theme for Astra to load MyCityPB blog post template via shortcode.
 Author: MyCityPB
 Template: astra
 Version: 1.0.0
*/
:root{
  --ink:#111; --muted:#555; --line:#eee; --primary:#5a31f4; --primary-dark:#3b22b4;
  --radius:12px; --radius-lg:14px; --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{color:var(--ink);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons */
.v-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem .9rem;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);text-decoration:none;font-weight:600}
.v-btn:hover{border-color:#ddd}
.v-btn:focus-visible{outline:3px solid color-mix(in oklab, var(--primary) 60%, white);outline-offset:2px}
.v-btn-ghost{background:transparent}

/* Pills / Chips */
.v-pill{display:inline-block;font-size:.75rem;line-height:1;padding:.38rem .6rem;border-radius:999px;background:color-mix(in oklab,var(--primary) 12%, white);color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 24%, white)}
.v-chips{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;margin:.5rem 0 0;scroll-snap-type:x mandatory}
.v-chips .chip{scroll-snap-align:start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.25rem .75rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap;text-decoration:none}
.v-chips .chip.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}
.v-chips .chip:focus-visible{outline:3px solid color-mix(in oklab, var(--primary) 50%, white);outline-offset:2px}

/* Hero */
.v-hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg, #fff, #fff 60%, color-mix(in oklab, var(--primary) 4%, white))}
.v-hero-inner{max-width:1100px;margin:0 auto;padding:1.2rem 1rem 1.3rem}
.v-hero-title{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.1;margin:0 0 .35rem;font-weight:800}
.v-hero-sub{color:var(--muted);margin:0}
.v-search{display:flex;gap:.5rem;margin:1rem 0 0}
.v-input{flex:1;min-height:44px;border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .75rem}
.v-input:focus-visible{outline:3px solid color-mix(in oklab,var(--primary) 40%, white);outline-offset:2px}

/* Grid & Cards */
.v-grid{display:grid;gap:1rem;padding:1rem;max-width:1100px;margin:0 auto}
@media (min-width:640px){.v-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.v-grid{grid-template-columns:repeat(3,1fr)}}
.v-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.v-thumb{display:block;aspect-ratio:4/5;overflow:hidden;background:#f8f8ff}
.v-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.v-card-body{padding:.8rem}
.v-card-title{font-size:1.05rem;line-height:1.2;margin:.4rem 0}
.v-card-title a{text-decoration:none;color:inherit}
.v-excerpt{color:var(--muted);margin:.35rem 0 .65rem}
.v-meta{font-size:.8rem;color:var(--muted)}
.v-empty{padding:1rem;color:var(--muted)}

/* Pagination (WP <ul class="page-numbers">) */
.v-pagination{display:flex;justify-content:center;padding:0 1rem 1.5rem}
.v-pagination ul{display:flex;gap:.5rem;list-style:none;padding:0;margin:0}
.v-pagination a,.v-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.v-pagination .current{background:var(--primary);border-color:var(--primary);color:#fff}
.v-pagination a:focus-visible{outline:3px solid color-mix(in oklab,var(--primary) 40%, white);outline-offset:2px}

/* Post template */
.v-hero-post .v-hero-inner{padding:1.2rem 1rem .8rem}
.v-meta-post{display:flex;gap:.6rem;align-items:center;margin:.5rem 0}
.v-avatar{border-radius:999px;border:1px solid var(--line)}
.v-featured{margin:.8rem 0 0}
.v-featured img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}

.v-post-body{display:grid;grid-template-columns:1fr;gap:1rem;max-width:1100px;margin:0 auto;padding:1rem}
@media (min-width:1024px){.v-post-body{grid-template-columns:280px 1fr}}

/* TOC */
.v-toc{position:relative}
.v-toc-sticky{position:sticky;top:1rem}
.v-toc-title{font-weight:700;margin-bottom:.35rem}
.v-toc-list{border:1px solid var(--line);border-radius:var(--radius);padding:.5rem;background:#fff;max-height:60vh;overflow:auto}
.v-toc-list a{display:block;padding:.4rem .5rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.95rem}
.v-toc-list a:focus-visible{outline:3px solid color-mix(in oklab,var(--primary) 40%, white);outline-offset:2px}
.v-toc-list a.is-active{background:color-mix(in oklab,var(--primary) 12%, white);color:var(--primary);font-weight:700}

/* Content typography */
.v-content :where(h2,h3){scroll-margin-top:80px}
.v-content h2{font-size:1.35rem;margin:1.2rem 0 .5rem;font-weight:800}
.v-content h3{font-size:1.1rem;margin:1rem 0 .4rem;font-weight:700}
.v-content p{line-height:1.65}
.v-content blockquote{border-left:3px solid var(--primary);padding:.5rem .9rem;background:color-mix(in oklab,var(--primary) 4%, white);border-radius:var(--radius)}
.v-content pre{border:1px solid var(--line);background:#0b0b0b;color:#f6f6f6;border-radius:var(--radius);padding:1rem;overflow:auto}
.v-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.v-content ul{padding-left:1.1rem}

/* Share, author, next/prev */
.v-share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1rem 0}
.v-iconlink{min-height:44px;display:inline-flex;align-items:center;padding:.4rem .6rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.v-author{display:flex;gap:.8rem;align-items:flex-start;padding:1rem}
.v-author-name{font-weight:800}
.v-author-bio{color:var(--muted)}
.v-nextprev{display:grid;gap:.8rem;grid-template-columns:1fr;max-width:1100px;margin:0 auto;padding:1rem}
@media (min-width:640px){.v-nextprev{grid-template-columns:1fr 1fr}}
.v-nextprev-card{display:block;border:1px solid var(--line);border-radius:var(--radius-lg);padding:.9rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.v-nextprev-eyebrow{font-size:.75rem;color:var(--muted)}
.v-nextprev-title{font-weight:800}

/* Related */
.v-section-title{font-size:1.25rem;font-weight:800;margin:0}
.v-related{max-width:1100px;margin:0 auto;padding:0 1rem 1rem}
.v-grid-related .v-card-title{font-size:1rem}

/* Newsletter */
.v-newsletter{background:linear-gradient(180deg, color-mix(in oklab,var(--primary) 5%, white), #fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1rem 0}
.v-newsletter-inner{max-width:900px;margin:0 auto;padding:1.2rem}
.v-newsletter .v-sub{color:var(--muted);margin:.25rem 0 1rem}
.v-newsletter-slot{border:1px dashed var(--line);border-radius:var(--radius);padding:1rem;color:var(--muted)}

/* Home strip */
.v-home-strip{max-width:1100px;margin:0 auto;padding:1rem}
.v-strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.v-grid-home{grid-template-columns:1fr}
@media (min-width:640px){.v-grid-home{grid-template-columns:repeat(2,1fr)}}
@media (min-width:920px){.v-grid-home{grid-template-columns:repeat(3,1fr)}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }



/* ===============  v-elite FLAT BLOCKS (opt-in)  =============== */
/* Tokens base (mantiene tu paleta) */
:root{
  --ink:#111; --muted:#555; --line:#eee;
  --primary:#5a31f4; --primary-dark:#3b22b4;
  --radius:12px; --radius-lg:14px;
}

/* 1) SLABS: secciones planas (sin caja dentro de otra) */
.slab{position:relative;background:#fff;padding:clamp(24px,4vw,72px) 16px}
.slab > .container{max-width:1120px;margin:0 auto}

/* Variante oscura tipo “Tom” (texto claro sobre negro) */
.slab--ink{background:#0c0c0c;color:#fff}
.slab--ink :where(h1,h2,h3,h4,h5,h6){color:#fff}
.slab--ink .muted{color:rgba(255,255,255,.72)}
.slab--muted{background:#fafafa}

/* 2) LAYOUT UTILS */
.stack{display:grid;gap:clamp(16px,3vw,32px)}
.stack-lg{display:grid;gap:clamp(24px,4vw,56px)}
.cluster{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}

/* 3) TIPOGRAFÍA minimalista y links sutiles */
.slab :where(h1,h2,h3){line-height:1.1;margin:0}
.slab h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800}
.slab h2{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:800}
.slab h3{font-size:clamp(1.1rem,1.6vw,1.25rem);font-weight:700}
.slab .lead{font-size:clamp(1rem,1.2rem + .4vw,1.25rem);color:var(--muted)}
.slab a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.slab a:hover{text-decoration-thickness:2px}

/* 4) Hairlines (separadores muy sutiles) */
.hairline{height:1px;background:var(--line);border:0;margin:clamp(16px,3vw,36px) 0}

/* 5) Botones más “ghost” y simples */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.6rem .95rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);text-decoration:none;font-weight:600}
.btn:hover{border-color:#ddd}
.btn-ghost{background:transparent}

/* 6) “Des-cardificar”: quita caja/sombra SOLO dentro de slabs (seguro) */
.slab :where(.elementor-widget-container,.card,.box,.panel,.wp-block-group){
  background:transparent !important;border:0 !important;box-shadow:none !important
}
.slab img{border-radius:var(--radius-lg);display:block;max-width:100%;height:auto}

/* 7) Grids simples cuando se necesite (sin “cajitas”) */
.slab-grid{display:grid;gap:clamp(16px,3vw,24px)}
@media (min-width:768px){.slab-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.slab-grid.cols-3{grid-template-columns:repeat(3,1fr)}}

/* 8) Eyebrows / micro-etiquetas sutiles */
.eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

:root{ --ink:#111; --muted:#555; --primary:#5a31f4; --primary-dark:#3b22b4 }
.slab{ background:transparent; padding:clamp(16px,3vw,28px) 12px }
.slab .container{ max-width:1120px; margin:0 auto }
.stack{ display:grid; gap:clamp(12px,3vw,24px) }


/* Mobile-first baseline (añadir a style.css del child) */
:root{ --ink:#111; --muted:#555; --primary:#5a31f4; --primary-dark:#3b22b4 }
.slab{ background:transparent; padding:clamp(16px,4vw,56px) 16px }
.slab .container{ max-width:1240px; margin:0 auto }
.stack{ display:grid; gap:clamp(12px,4vw,28px) }
@media (max-width:640px){
  .hide-mobile{ display:none !important }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
}
/* Evita scroll lateral accidental en móvil */
html,body{ overflow-x:hidden }