/* ==========================================================================
   grid.css — the single layout authority for jinyerbalance.com (2026-08-28)
   Home (/ and /es/) is the reference. This file encodes Home's geometry
   (1440 shell · 14px gutters · 164 hero clearance · 88/132 section rhythm ·
   left-anchored measures) for every other public page. Loaded LAST on every
   page. Copy, images, nav/footer markup untouched.
   ========================================================================== */
:root{
  --max:1440px;--gutter:14px;
  --hero-top:164px;
  --sec-y:88px;--sec-y-lg:132px;
  --stack:24px;--stack-lg:48px;
  --gap:14px;--gap-lg:28px;
  --rhythm-compact:20px;--rhythm-medium:40px;   /* internal rhythm: related items / paragraph -> module */
  --measure:720px;--measure-hero:690px;--measure-wide:1040px;--measure-h2:1050px;   /* --measure-wide 960->1040 (2026-08-29 inner layer: tables / pricing rows / FAQ / forms) */
}
@media (min-width:769px) and (max-width:1024px){:root{--sec-y:80px;}}
@media (max-width:640px){:root{--hero-top:132px;--sec-y:68px;--sec-y-lg:96px;--rhythm-compact:16px;--rhythm-medium:32px;}}

/* ---- 1. Outer wrapper = Home .shell ------------------------------------ */
.shell,.container,.page-hero__inner,.terms-hero,.terms-body,.start-container,.support-container,
.ty-section,.ty-next .container,.blog-hero .container,.blog-cta .container,.blog-body .blog-layout,
.post-body .container,.related-posts .container,.blog-newsletter .container,
.ref-hero,.ref-commissions,.ref-how,.ref-examples,.ref-rules,.ref-form-section,
.not-found,.pr-wrap,#faq>.container,.page-hero:not(:has(> .page-hero__inner)){
  width:min(var(--max),calc(100% - 2*var(--gutter)));max-width:none;
  margin-inline:auto;padding-inline:0;box-sizing:border-box;
}
.terms-hero>div{width:100%;max-width:none;margin:0;}

/* ---- 2. First block: hero clearance = Home h1 @164 under the 90px pill --- */
.page-hero,.terms-hero,.ref-hero,.ty-section,.post-hero,.not-found,.contact-form-section,.about-hero-serif{
  padding-top:var(--hero-top);padding-bottom:var(--rhythm-medium);   /* hero -> first module: medium here + compact on the section = 60 */
}
.page-hero,.post-hero,.contact-form-section{padding-inline:0;}
.page-hero{min-height:0;display:block;}
.page-hero__h1{margin-top:0;}
.ty-section{padding-bottom:var(--rhythm-medium);min-height:0;display:block;text-align:left;} /* medium before the .ty-next edge */
.ty-check{margin-inline:0;}
.ty-actions{justify-content:flex-start;}
.contact-form-section{padding-bottom:0;}                    /* form -> support = one --sec-y, owned by .support-section */
.not-found{padding-bottom:var(--sec-y-lg);min-height:0;}     /* 404 centred utility (exception) */
.about-hero-serif{padding-bottom:var(--sec-y-lg);padding-inline:0;} /* centred composition (owner-approved); its children are .shell */

/* ---- 3. Section rhythm: 88 standard · 132 closing bands ------------------ */
.page-hero ~ section,.pricing-v2,#faq,.support-section,.ref-how,.ref-examples,.ref-rules,
.terms-body,.blog-body,.post-body,.related-posts,.port-section,body[class*="lang-"] .section{
  padding-block:var(--sec-y);
}
.start-section,.ref-commissions{padding-top:var(--rhythm-compact);} /* first module after the hero: compact (the hero already gives medium) */
.start-section{padding-bottom:var(--sec-y-lg);}
.ref-commissions{padding-bottom:0;}                          /* the next section owns the --sec-y */
.blog-body{padding-top:0;}                                    /* masthead → grid continuity (owner-tuned blog) */
.terms-body{padding-bottom:var(--sec-y-lg);}
.terms-toc,.terms-content{padding-top:0;padding-bottom:0;}
.support-section,.ty-next,.blog-cta,.blog-newsletter,.ref-form-section,
section[aria-label="Contact CTA"],section[aria-label="Llamado a contacto"]{
  padding-block:var(--sec-y-lg);
}
.support-section{padding-top:var(--sec-y);}
.blog-cta,.blog-newsletter,section[aria-label="Contact CTA"],section[aria-label="Llamado a contacto"]{padding-inline:0;}

/* ---- 4. Measures — all LEFT-anchored to the shell, like Home --------------- */
.page-hero__subtitle,.ref-hero__sub,.ty-sub,.post-excerpt,.terms-hero__meta{max-width:var(--measure-hero);margin-inline:0;}
.section-copy,.pr-intro,.pr-orient,.pr-care p,.pr-own,.ref-form-section__sub,.blog-cta__sub{max-width:var(--measure);margin-inline:0;}
.pr-wrap>*,#faq>.container>*,.start-container>*,.support-container>*,.ty-inner,.ref-form-section__inner{max-width:var(--measure-wide);margin-inline:0;}
.post-body-inner{max-width:var(--measure);margin-inline:0;}
.ref-form-section__title,.ty-next h2,.blog-cta__title,section[aria-label="Contact CTA"] h2,section[aria-label="Llamado a contacto"] h2{max-width:var(--measure-h2);}
.ty-steps,.related-grid,.svc-cards,.ref-commissions,.ref-steps{gap:var(--gap);}

/* ---- 5. Legal: 320 ToC column + 720 measure; no ToC = no dead column -------- */
.terms-content{max-width:none;}
@media (min-width:861px){
  .terms-body{display:grid;grid-template-columns:320px minmax(0,calc(var(--measure) + clamp(32px,4vw,60px)));gap:0;align-items:start;}
  .terms-body:not(:has(> .terms-toc)){grid-template-columns:minmax(0,var(--measure));}
  .terms-body:not(:has(> .terms-toc)) .terms-content{padding-left:0;border-left:0;}
}
@media (max-width:860px){
  .terms-body{display:block;}
  .terms-content{padding-left:0;border-left:0;}
}

/* ---- 6. Store (light touch): pill + footer rhythm to canonical -------------- */
body[class*="lang-"] .topbar{min-height:76px;}
.site-foot{padding:74px 0 40px;}

/* ---- 7. Leftover centred blocks mapped to the shell (2026-08-28) ------- */
.measure{max-width:var(--measure);margin-inline:0;text-align:left;}
.measure-wide{max-width:var(--measure-wide);margin-inline:0;}
.svc-v2{max-width:none;margin-inline:0;gap:var(--gap-lg);}
.svc-intro{margin-inline:0;text-align:left;}
.svc-ways{text-align:left;}
.blog-body .blog-layout{max-width:none;margin-inline:auto;}
.svc-ways p{margin-inline:0;max-width:var(--measure);}
#postsContainer{max-width:none;margin-inline:0;}

/* ---- 8. Internal rhythm (2026-08-29): compact 20 / medium 40 / major = --sec-y ---------
   Related items compact (label->h1, h1->intro, h2->p); paragraph or heading -> module medium;
   a true section transition is ONE --sec-y owned by the section that follows (never two
   stacked paddings). Where an edge (border / band) separates two blocks: medium before the
   edge, --sec-y after it. Closing bands keep --sec-y-lg. Scoped to page classes only -
   nothing here can match Home. <=640: compact 16 / medium 32. ----------------------------- */
/* 8a. Hero stacks */
.hero__badge,.page-hero__eyebrow,.terms-hero__label,.ref-hero__label,.ty-label{margin-bottom:var(--rhythm-compact);}
.page-hero__h1,.contact-hero-col .page-hero__h1,.terms-hero h1,.ref-hero__title,.ty-h1,.post-title{margin-top:0;margin-bottom:var(--rhythm-compact);}
.page-hero__subtitle,.contact-hero-col .page-hero__subtitle,.terms-hero__meta,.post-excerpt{margin-top:0;margin-bottom:0;}
.ref-hero__sub{margin-top:0;margin-bottom:var(--rhythm-medium);}        /* copy -> buttons */
.ty-check{margin-bottom:var(--rhythm-compact);}
.ty-sub:last-of-type{margin-bottom:var(--rhythm-medium);}               /* copy -> buttons */
.post-cover,.post-meta-bar{margin-bottom:var(--rhythm-compact);}
.post-body-inner > :first-child{margin-top:0;}                          /* the body starts on the section's own padding */
/* 8b. Hero -> first module = medium (hero pb) + compact (section pt) */
.page-hero + section,.post-hero + .post-body{padding-top:var(--rhythm-compact);}
.terms-hero{padding-bottom:var(--rhythm-compact);}                      /* meta -> divider */
.terms-hero + .terms-body{padding-top:var(--rhythm-medium);}            /* divider -> content */
.post-hero{padding-bottom:var(--rhythm-compact);}
.post-hero + .post-body{padding-top:var(--rhythm-medium);}
/* 8c. Section -> section: the following section owns ONE --sec-y; medium stays only before an edge */
.page-hero ~ section:has(+ section),.ref-how,.ref-examples,.ref-rules{padding-bottom:0;}
.page-hero ~ .pricing-v2,#faq,.blog-body,.post-body,.related-posts{padding-bottom:var(--rhythm-medium);} /* a border/band edge follows */
.blog-cta{padding-block:var(--sec-y);}                                  /* band, not the closing one */
.blog-cta + section{padding-top:var(--sec-y);}                          /* closing CTA after the band edge: 88 in, 132 out */
/* 8d. Inside sections: label -> h2 compact; h2 -> copy compact; copy/heading -> module medium */
.measure > .section-label,.pr-wrap > .section-label{margin-bottom:var(--rhythm-compact);}
.measure > h2{margin-top:0;margin-bottom:var(--rhythm-compact);}
.measure > h2:last-child{margin-bottom:0;}
.measure > h2 + p{margin-top:0;margin-bottom:var(--rhythm-medium);}
.page-hero ~ section > .container > .measure:not(:last-child){margin-bottom:var(--rhythm-medium);}
.pr-orient{margin-bottom:var(--rhythm-medium);}
.svc-ways,.svc-ways + .measure-wide{margin-top:var(--rhythm-medium);}
.svc-ways + .measure-wide > .section-label{margin-bottom:var(--rhythm-medium);}
.ref-how__label,.ref-examples__header,.ref-form-section__sub,.ty-next h2{margin-bottom:var(--rhythm-medium);}
.ref-examples__label,.ref-form-section__label,.ref-form-section__title,.ty-next-label{margin-bottom:var(--rhythm-compact);}
.ref-rules{row-gap:var(--rhythm-medium);}
.ref-rules__label{margin-bottom:0;}

/* ---- 9. INNER layer (2026-08-29): VIEWPORT -> OUTER SHELL (14px, section 1, unchanged) ->
   INNER CONTENT CONTAINER (editorial breathing room) -> MEASURE / MODULE.
   The shell keeps the frame: navbar, footer, full-bleed heroes and every border that spans the
   shell (terms divider, referral bands). The inner is the role of the content wrapper that already
   sits inside the shell, applied as padding-inline so no markup changes; a child box of
   width:calc(100% - 2*--inner-pad) would compute to the same content edge (14 + --inner-pad).
   Home (/ and /es/) is edge-anchored by its own CSS and matches none of these selectors. -------- */
:root{
  --inner-pad:48px;                                    /* >=1280: content edge = 14 + 48 = 62 */
  --edit-wide:1300px;--edit-std:1160px;                /* wide editorial (card rows, two-column parents) / standard (legal, form+text, referral modules) */
  --measure-display:var(--edit-wide);--measure-intro:860px;      /* h1 / hero subtitle + intro paragraphs; body --measure 720 and --measure-wide 1040 are in :root above */
  --cols-gap:64px;--legal-toc:280px;                   /* two-column compositions: contact copy|form, legal ToC|article */
}
@media (min-width:1025px) and (max-width:1279px){:root{--inner-pad:32px;}}
@media (min-width:769px) and (max-width:1024px){:root{--inner-pad:20px;}}
@media (max-width:768px){:root{--inner-pad:0px;}}    /* mobile: the 14px shell is the content edge, as before */

/* 9a. The inner container: existing content wrappers inside the shell (never nav / footer / full-bleed). */
.inner,
.page-hero__inner,.page-hero:not(:has(> .page-hero__inner)),.page-hero ~ section > .container,
.pr-wrap,#faq>.container,
.start-container,
.contact-form-section > .container,.support-container,
.ty-section,.ty-next .container,
.terms-hero>div,.terms-body,
.ref-hero,.ref-commissions,.ref-how,.ref-examples,.ref-rules,.ref-form-section,
.not-found,
.blog-body .blog-layout,.blog-cta .container,.blog-cta ~ section > .container,
.post-hero .container,.post-body .container,.related-posts .container,.blog-newsletter .container,
section[aria-label="Contact CTA"] > .container,section[aria-label="Llamado a contacto"] > .container{
  padding-inline:var(--inner-pad);box-sizing:border-box;
}

/* 9b. Typographic measures: display (h1) 1100 · intro (hero subtitle / intros) 860 · body 720 · wide 1040 */
.page-hero__h1,.terms-hero h1,.ref-hero__title,.ty-h1,.not-found h1{max-width:var(--measure-display);}
.post-title{max-width:var(--edit-wide);}                /* long editorial post titles: the article panel width (1100 orphaned the last word) */
.page-hero__subtitle,.terms-hero__meta,.ref-hero__sub,.ty-sub,.post-excerpt,.pr-intro{max-width:var(--measure-intro);margin-inline:0;}
.brief-intro{max-width:var(--measure);}
.measure{max-width:var(--measure-h2);}                 /* a display h2 sits on the h2 measure ... */
.measure > p{max-width:var(--measure);}                /* ... its label / copy stay on the body measure */

/* 9c. Modules: card rows and two-column parents on the wide editorial width; tables / forms on --edit-std / --measure-wide */
.svc-v2,.contact-grid,.cols-text-form,.ref-steps,.ty-steps,.related-grid{max-width:var(--edit-wide);}
.ref-table,.ref-form-section__inner{max-width:var(--edit-std);}
.ref-form{max-width:var(--measure-wide);}

/* 9d. Two-column copy | form (contact): 5fr | 7fr, 64 gap; the copy column never drops below its longest display word */
.contact-grid,.cols-text-form{display:grid;grid-template-columns:minmax(min-content,5fr) minmax(0,7fr);column-gap:var(--cols-gap);align-items:start;}
.contact-hero-col .page-hero__subtitle{max-width:none;}   /* copy measure = the column */
@media (max-width:860px){.contact-grid,.cols-text-form{grid-template-columns:1fr;}}   /* stacks where it did before */

/* 9e. Legal composition: ToC 280 | 64 (divider centred) | article 720; no ToC = article 720 inside an --edit-std track
   whose h2s may run to --measure-wide so the page does not read as abandoned on the left. Stacks <=1024. */
.legal-body > :not(h2){max-width:var(--measure);}
.legal-body > h2{max-width:var(--measure-wide);}
@media (min-width:1025px){
  .terms-body{grid-template-columns:var(--legal-toc) minmax(0,calc(var(--measure) + var(--cols-gap)/2));}
  .terms-toc{padding-right:calc(var(--cols-gap)/2);}
  .terms-content{padding-left:calc(var(--cols-gap)/2);}
  .terms-body:not(:has(> .terms-toc)){grid-template-columns:minmax(0,var(--edit-std));}
}
@media (max-width:1024px){
  .terms-body{display:block;}
  .terms-toc{display:none;}                           /* the page already drops the ToC <=860; the same rule from 1024 down */
  .terms-content{padding-left:0;border-left:0;}
}

/* ---- 9b. display h1 wrapping: balanced lines (no widows), never hyphenate; ES referral title fits the mobile column by size ---- */
.page-hero__h1,.terms-hero h1,.ref-hero__title,.ty-h1,.not-found h1,.post-title{text-wrap:balance;hyphens:manual;}
@media (max-width:480px){html[lang="es"] .ref-hero__title{font-size:min(48px,7.6vw);}}   /* "RECOMENDÁNDOME." whole inside the 347px column (QA: 8vw overflowed by 10px) */