/* ═══════════════════════════════════════════════════════════
   layout.css — ruled 12-column mosaic
   Every section gets its own tile composition; no two share a pattern.
   Rules (1px lines) double as column dividers: each tile draws its
   right + bottom edge, the mosaic draws top + left.
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;min-width:320px}
img,svg{max-width:100%}
figure,blockquote{margin:0}
img{display:block;height:auto}
main{display:block}
section[id]{scroll-margin-top:var(--topbar-compact)}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--surface-base);color:var(--text-primary);padding:.75rem 1rem;border:2px solid var(--text-primary)}
.skip:focus{left:1rem;top:1rem}

.shell{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}

.section{padding-block:var(--section-pad);--rule:var(--border-strong)}
.section--sand{background:var(--surface-sand)}
.section--primary{background:var(--mesh-primary);color:var(--text-inverse);--rule:var(--rule-on-primary);--focus:var(--brand-accent)}
.section--flush-top{padding-top:0}

/* ───────────── Mosaic engine ───────────── */
.mosaic{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(var(--row-min,8rem),auto);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.tile{
  position:relative;min-width:0;
  padding:var(--tile-pad);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--tile-bg,transparent);
  display:flex;flex-direction:column;
}
.tile > :last-child{margin-bottom:0}
.tile--raised{--tile-bg:var(--surface-raised)}
.tile--sand{--tile-bg:var(--surface-sand)}
.tile--base{--tile-bg:var(--surface-base)}
.tile--primary{--tile-bg:var(--surface-inverse);color:var(--text-inverse);--rule:var(--rule-on-primary)}
.tile--accent{--tile-bg:var(--brand-accent);color:var(--text-primary)}
.tile--pine{--tile-bg:var(--brand-secondary);color:var(--text-inverse)}
.tile--ink{--tile-bg:var(--surface-ink);color:var(--text-inverse)}
.tile--ruled{background-image:var(--hatch-ruled);background-color:var(--surface-raised)}
.tile--center{justify-content:center}
.tile--end{justify-content:flex-end}
.tile--img{padding:0;overflow:hidden;min-height:17rem}
.tile--clip{overflow:hidden}

/* ───────────── 1 · HERO — burgundy full-bleed ───────────── */
.hero{
  background:var(--mesh-primary);color:var(--text-inverse);
  --rule:var(--rule-on-primary);--focus:var(--brand-accent);
  padding-top:calc(var(--topbar-h) + var(--space-5));
  padding-bottom:var(--space-7);
  position:relative;overflow:hidden;
}
.hero .mosaic{--row-min:5rem}
@media (min-width:961px){
  .hero__kicker{grid-column:1/9;grid-row:1}
  .hero__title {grid-column:1/9;grid-row:2}
  .hero__lead  {grid-column:1/6;grid-row:3}
  .hero__meta  {grid-column:6/9;grid-row:3}
  .hero__img   {grid-column:9/13;grid-row:1/4}
}

/* ───────────── 2 · CONTEXTO — narrow column, vast silence ───────────── */
@media (min-width:961px){
  .ctx__rail {grid-column:1/5;grid-row:1/3}
  .ctx__title{grid-column:5/13;grid-row:1}
  .ctx__a    {grid-column:5/9;grid-row:2}
  .ctx__b    {grid-column:9/12;grid-row:2}
  .ctx__pad  {grid-column:12/13;grid-row:2}
}

/* ───────────── 3 · HÁBITOS — five tiles, five sizes ───────────── */
@media (min-width:961px){
  .habits__head{grid-column:1/6; grid-row:1/4}
  .habit--1    {grid-column:6/13;grid-row:1}
  .habit--2    {grid-column:6/10;grid-row:2}
  .habit--3    {grid-column:10/13;grid-row:2/4}
  .habit--4    {grid-column:6/10;grid-row:3}
  .habit--5    {grid-column:1/8; grid-row:4}
  .habits__note{grid-column:8/13;grid-row:4}
}

/* ───────────── 4 · EN EL PLATO — photographic mosaic ───────────── */
#plato .mosaic{--row-min:4.5rem}
@media (min-width:961px){
  .foods__head {grid-column:1/8; grid-row:1}
  .food--eggs  {grid-column:8/13;grid-row:1/3}
  .food--greens{grid-column:1/5; grid-row:2}
  .food--berries{grid-column:5/8;grid-row:2}
  .food--yogurt{grid-column:1/4; grid-row:3}
  .food--seeds {grid-column:4/9; grid-row:3}
  .food--water {grid-column:9/13;grid-row:3}
  .foods__note {grid-column:1/13;grid-row:4}
}

/* ───────────── 5 · PULL QUOTE — full-width typographic band ───────────── */
.quote{position:relative;padding-block:var(--section-pad);overflow:hidden;border-block:3px double var(--border-strong)}

/* ───────────── 6 · MOVIMIENTO — overlap + bleed ───────────── */
.move .mosaic{--row-min:9rem}
@media (min-width:961px){
  .move__img  {grid-column:1/8; grid-row:1/5;margin-left:calc(var(--bleed) * -1)}
  .move__text {grid-column:6/13;grid-row:1/3;z-index:2;margin-top:var(--space-8)}
  .move__home {grid-column:8/13;grid-row:3}
  .move__calm {grid-column:8/13;grid-row:4;margin-right:calc(var(--bleed) * -1)}
}

/* ───────────── 7 · PRODUCTO ───────────── */
@media (min-width:961px){
  .prod__media{grid-column:1/6; grid-row:1/4}
  .prod__title{grid-column:6/13;grid-row:1}
  .prod__price{grid-column:6/9; grid-row:2}
  .prod__spec {grid-column:9/13;grid-row:2/4}
  .prod__cta  {grid-column:6/9; grid-row:3}
}

/* ───────────── 8 · FAQ + SMALL PRINT ───────────── */
@media (min-width:961px){
  .faq__label{grid-column:1/6; grid-row:1}
  .faq__list {grid-column:6/13;grid-row:1}
  .disc__a   {grid-column:1/6; grid-row:2}
  .disc__b   {grid-column:6/9; grid-row:2}
  .disc__c   {grid-column:9/13;grid-row:2}
}

/* ───────────── 9 · CTA — burgundy full-bleed ───────────── */
.cta{position:relative;overflow:hidden}
@media (min-width:961px){
  .cta__text{grid-column:1/10;grid-row:1}
  .cta__go  {grid-column:10/13;grid-row:1}
}

/* ───────────── Footer ───────────── */
.ftr{background:var(--surface-ink);color:var(--text-inverse);position:relative;overflow:hidden;--rule:var(--rule-on-ink);--focus:var(--brand-accent)}
.ftr__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6) var(--gutter);padding-block:var(--section-pad) var(--space-7)}
.ftr__statement{grid-column:1/8}
.ftr__entity{grid-column:9/13}
.ftr__links{display:grid;grid-template-columns:repeat(3,auto);gap:var(--space-5) var(--space-7);justify-content:start;
  border-top:1px solid var(--rule);padding-block:var(--space-6)}
.ftr__word{border-top:1px solid var(--rule);padding-top:var(--space-5);line-height:.8}
.doc .mosaic{border-top:0}
.ftr__legal{border-top:1px solid var(--rule);padding-block:var(--space-5) var(--space-6);position:relative;z-index:1;background:var(--surface-ink)}

/* ───────────── SUBPAGES ───────────── */
.phead{padding-top:calc(var(--topbar-h) + var(--space-5));padding-bottom:0}
@media (min-width:961px){
  .phead__crumbs{grid-column:1/13;grid-row:1}
  .phead__title {grid-column:1/9; grid-row:2}
  .phead__aside {grid-column:9/13;grid-row:2}
  .doc__rail{grid-column:1/4; grid-row:1}
  .doc__body{grid-column:4/11;grid-row:1}
  .doc__pad {grid-column:11/13;grid-row:1}
  .doc__a   {grid-column:1/6; grid-row:1}
  .doc__b   {grid-column:6/13;grid-row:1}
}

/* ───────────── Tablet & mobile: collapse the 12 → 6 → 1 ───────────── */
@media (max-width:960px){
  .mosaic{grid-template-columns:repeat(6,minmax(0,1fr));--row-min:0}
  .tile{grid-column:1/-1}
  .tile--half{grid-column:span 3}
  .tile--img{min-height:20rem}
  .hero{padding-top:calc(var(--topbar-h) + var(--space-3))}
  .hero__img{min-height:22rem}
  .ctx__pad,.doc__pad,.doc__rail{display:none}
  .ctx__rail{min-height:8rem}
  .ftr__statement,.ftr__entity{grid-column:1/-1}
  .ftr__links{grid-template-columns:repeat(2,auto)}
  .move__text{margin-top:0;box-shadow:none}
}
/* Tablet: a real 6-column mosaic, tiles paired up */
@media (min-width:601px) and (max-width:960px){
  .hero__lead,.ctx__a,.ctx__b,.habit--2,.habit--3,.habit--4,.habit--5,
  .food--greens,.food--berries,.food--yogurt,.food--seeds,
  .move__home,.move__calm,.prod__price,.prod__spec,.disc__b,.disc__c{grid-column:span 3}
  .hero__lead{grid-column:span 4}
  .hero__meta{grid-column:span 2}
  .disc__a,.prod__cta,.foods__note{grid-column:1/-1}
  .prod__media,.hero__img{min-height:26rem}
  .food--eggs{min-height:30rem}
  .move__img{min-height:24rem}
  .cta__text{grid-column:1/-1}
}
@media (max-width:600px){
  .tile--half{grid-column:1/-1}
  .ftr__links{grid-template-columns:1fr}
}