/* ===========================================================================
   ROA Credit — garden.css  ·  v4 "El Jardin"  ·  2026-09-14

   THE FILM IS THE PAGE. The words live in the negative space of the shot,
   in a fixed column, directly on the scene. No cards. No slabs. No panels
   floating over the garden on desktop. On phones — and only there — the
   words sit in a full-bleed solid scrim at the bottom while the film keeps
   the top of the screen.

   This sheet loads AFTER roa.css and only adds or overrides. roa.css is
   shared with every other page and is never edited.
   No gradients. No text-shadow. No external URLs. No emoji.
   =========================================================================== */

/* -- FRAUNCES: the display face of this page ------------------------------ */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-garden:"Fraunces","Spectral",Georgia,"Times New Roman",serif;
  --ink:#171513;
  --ink-dim:#4A4239;
  --ivory-fg:#F6F1E6;
  --ivory-dim:rgba(246,241,230,.9);
  --gold-hair:rgba(197,145,54,.55);
  --ease-film:cubic-bezier(.22,.61,.36,1);
  --ease-lift:cubic-bezier(.16,1,.3,1);
  /* v4.2 — the column may widen to the right; every chapter declares its own
     width below so a long beat never has to wrap into a tower of lines. */
  --col:min(46vw,44rem);
  --col-pad:clamp(1.3rem,3.2vw,3.4rem);
  --topgap:clamp(6.6rem,12svh,8.6rem);
  --rail-h:60px;      /* reserved band at the foot of the words column */
  --rail-base:18px;   /* where the hairline sits inside that band */
  --dock-gap:5.25rem; /* room reserved under the sticky phone CTA */
}

/* the film is scrubbed by a lerp in the loader; the browser's own smooth
   scrolling fights it and doubles the inertia. roa.css is shared, so override. */
html{scroll-behavior:auto;}

/* -- THE SCENE LAYERS ----------------------------------------------------- */
#gl,#frames{position:fixed;inset:0;width:100%;height:100%;z-index:0;}
#gl{opacity:0;transition:opacity 1.4s var(--ease-film);}
#gl.live{opacity:1;}
body[data-end="true"] #gl{opacity:0;}
/* Every chapter on this page is data-tone="dark" (ivory + gold letters). The
   backdrop behind the film must therefore be dark too: if the canvas has not
   painted yet, or a baked still is still loading, a paper backdrop leaves the
   copy ivory-on-ivory and unreadable. Flat colour, no gradient. */
#frames{background:#14100A;}
#frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease-film);}
#frames img.on{opacity:1;}

main{position:relative;z-index:1;}
.topbar{z-index:20;}
/* the footer just needs to sit above the fixed canvas; the dock must KEEP the
   position:fixed roa.css gives it — overriding it here turned the sticky phone
   CTA into a static block at the end of the document, i.e. never seen. */
.foot{position:relative;z-index:2;}
.dock{z-index:95;}
/* the film ends where the paperwork begins — fully opaque, never a chopped strip */
.foot{background:var(--paper);}

/* -- CHAPTERS ------------------------------------------------------------- */
[data-cam]{position:relative;}
.shot{position:relative;min-height:100svh;display:block;}

/* COLUMN WIDTHS (v4.2). The scene keeps the remainder; the ENGINE mirrors
   these numbers in its safe-zone map. Long-copy chapters get the wide column. */
[data-cam="hero"]{--col:min(48vw,46rem);}
[data-cam="raices"]{--col:min(54vw,52rem);}
[data-cam="tres"]{--col:min(60vw,62rem);}
[data-cam="cine"]{--col:min(50vw,48rem);}
[data-cam="pedimos"]{--col:min(56vw,56rem);}
[data-cam="red"]{--col:min(60vw,62rem);}

[data-cam="hero"]{min-height:100svh;}
[data-cam="raices"]{min-height:160svh;}
[data-cam="pedimos"]{min-height:150svh;}
[data-cam="cierre"]{min-height:100svh;}

/* pinned chapters: N beats + 1 viewport of travel */
[data-cam="tres"]{height:calc(4 * 100svh);}
[data-cam="cine"]{height:calc(5 * 100svh);}
[data-cam="red"]{height:calc(7 * 100svh);}

.pin{position:sticky;top:0;height:100svh;}

/* -- THE WORDS COLUMN ----------------------------------------------------- */
.words{
  position:relative;
  width:var(--col);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--topgap) var(--col-pad) clamp(3rem,8svh,6rem);
  color:var(--tone-fg);
}
.pin > .words{height:100svh;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:clamp(2rem,5svh,3.4rem);}
[data-side="right"] > .words,
[data-side="right"] .pin > .words{margin-left:auto;}
.words--hero{justify-content:flex-start;padding-top:var(--topgap);}
.shot--tall > .words{position:sticky;top:0;height:100svh;min-height:0;
  justify-content:center;padding-block:var(--topgap) clamp(2rem,5svh,3.4rem);}

.words--center{
  width:min(92vw,64rem);margin-inline:auto;text-align:center;
  align-items:center;justify-content:center;
}
.words--center .eyebrow{justify-content:center;}
.words--center .lead{margin-inline:auto;}
.words--center .hero__actions{justify-content:center;}
.words--center .note-line{margin-inline:auto;border-left:0;padding-left:0;
  border-top:1px solid var(--gold-hair);padding-top:1rem;}
.words--end{justify-content:flex-end;padding-bottom:clamp(3rem,9svh,6rem);}

/* -- TONE: who the chapter is lit for ------------------------------------- */
[data-tone="light"]{
  --tone-fg:var(--ink);
  --tone-dim:var(--ink-dim);
  --tone-gold:#7A5411;
  --tone-label:#5A3E0B;
  --tone-hair:rgba(23,21,19,.16);
  --scrim:rgba(246,241,230,.86);
}
[data-tone="dark"]{
  --tone-fg:var(--ivory-fg);
  --tone-dim:var(--ivory-dim);
  --tone-gold:var(--gold-light);
  --tone-label:var(--gold-light);
  --tone-hair:rgba(246,241,230,.22);
  --scrim:rgba(20,16,10,.82);
}

.words .display,
.words .h2,
.words h1,
.words h2,
.words strong,
.words b{color:var(--tone-fg);}
.words .lead,
.words .muted,
.words p{color:var(--tone-dim);}
.words .eyebrow{color:var(--tone-label);}
.words .eyebrow::before{background:var(--tone-label);opacity:1;}
.words .gold-word{color:var(--tone-gold);}
.words a:not(.btn){color:var(--tone-gold);}
.words a:not(.btn):hover{color:var(--tone-fg);}

/* -- TYPE: the premium register ------------------------------------------- */
.words .display,
.words .h2,
.count{
  font-family:var(--font-garden);
  font-optical-sizing:auto;
}
/* Every size carries a vh term: a 720px-tall laptop gets smaller type than a
   1080px one at the same width, which is what stopped the v4.1 clipping. */
.words .display{
  font-weight:500;font-size:clamp(2.1rem,4.4vh + 2.3vw,5.6rem);
  line-height:.98;letter-spacing:-.024em;text-wrap:balance;
}
.words .h2{
  font-weight:500;font-size:clamp(1.45rem,3.2vh + .7vw,2.9rem);
  line-height:1.05;letter-spacing:-.018em;text-wrap:balance;
}
.words .lead{
  font-size:clamp(.98rem,1.25vh + .42vw,1.26rem);line-height:1.52;
  max-width:50ch;margin-top:clamp(.7rem,1.4vh,1.2rem);
}
.lead--wide{max-width:58ch;}
.words .eyebrow{margin-bottom:clamp(.6rem,1.5vh,1.2rem);}

.rail__n{
  position:absolute;right:0;bottom:2px;
  font-family:var(--font-roman);font-size:.62rem;letter-spacing:.22em;
  color:var(--tone-label);font-variant-numeric:tabular-nums;
}
.words .beat__inner{max-width:none;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.1rem,2.8vh,2.2rem);}
.note-line{
  margin-top:clamp(1rem,2.2vh,1.8rem);
  font-size:clamp(.84rem,.95vh + .3vw,.98rem);max-width:56ch;line-height:1.5;
  padding-left:1.1rem;border-left:1px solid var(--gold-hair);
}
.meta-link{
  margin-top:1.2rem;font-family:var(--font-roman);font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.meta-link a{text-decoration:none;border-bottom:1px solid var(--gold-hair);
  padding-bottom:.15rem;}

/* the big numeral of the red chapter */
.count{
  display:block;font-weight:300;font-size:clamp(3rem,12vh + 2.2vw,10rem);
  line-height:.92;letter-spacing:-.04em;
  color:var(--tone-gold);
  font-variant-numeric:lining-nums tabular-nums;
  /* a little air under the numeral: Fraunces' lining figures sit tight to
     their line box at this line-height */
  padding-bottom:3px;
  margin-bottom:clamp(.2rem,.8vh,.5rem);
}

/* -- RAICES list: hairlines, no boxes ------------------------------------- */
[data-cam="raices"] .h2{font-size:clamp(1.35rem,2.9vh + .6vw,2.6rem);}
[data-cam="raices"] .lead{margin-top:clamp(.55rem,1.2vh,.95rem);}
.roots{display:block;margin-top:clamp(.8rem,1.8vh,1.35rem);
  border-top:1px solid var(--tone-hair);grid-template-columns:none;gap:0;}
.roots__item{
  display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:.25rem 1.6rem;align-items:baseline;
  padding-block:clamp(.5rem,1.15vh,.82rem);border-bottom:1px solid var(--tone-hair);
}
.roots__no{
  font-family:var(--font-roman);font-size:clamp(.95rem,1.25vh + .32vw,1.24rem);
  color:var(--tone-fg);line-height:1.25;
}
.roots__yes{grid-column:2;color:var(--tone-dim);
  font-size:clamp(.85rem,1.05vh + .28vw,1rem);line-height:1.45;}
.roots__yes b{color:var(--tone-gold);font-weight:400;font-style:italic;}

/* -- BEATS: absolutely stacked inside the column -------------------------- */
/* THE RAIL IS A RESERVED BAND. .beats grows but is capped by the flex box and
   clipped, so no headline or lead can ever cross the timeline below it. */
.beats{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.beat{
  position:absolute;inset:0;
  grid-area:auto;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;
  transform:translate3d(0,14px,0);
  /* NO opacity transition: the loader writes beat opacity every frame on the
     plateau curve, and a CSS transition lags it into a permanent low reading.
     Transitions stay in the .no-gl / reduced-motion paths where JS is absent. */
  transition:transform .7s var(--ease-lift),
             visibility 0s linear .7s;
  will-change:opacity,transform;
}
.beat.is-on{
  visibility:visible;
  transform:none;
  transition:transform .7s var(--ease-lift),
             visibility 0s linear 0s;
}

/* If no loader ever marks a beat, the first beat must still be readable:
   a chapter that depends on JS to show any words at all is a blank chapter. */
.beats:not(:has(.beat.is-on)) .beat[data-beat="0"]{
  opacity:1;visibility:visible;transform:none;
}

/* -- RAIL: at the foot of the words column, never across the scene -------- */
.rail{
  position:relative;left:auto;right:auto;bottom:auto;
  flex:none;margin-top:clamp(1.2rem,3svh,2.2rem);
  height:var(--rail-h);background:none;
}
.rail::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--rail-base);
  height:1px;background:var(--tone-hair);
}
.rail__fill{
  position:absolute;left:0;bottom:var(--rail-base);height:1px;width:0;
  background:var(--tone-label);transition:width .16s linear;
}
.rail__tick{
  position:absolute;bottom:calc(var(--rail-base) - 3px);
  width:7px;height:7px;rotate:45deg;translate:-50% 0;
  background:#14100A;border:1px solid var(--tone-hair);
}
[data-tone="dark"] .rail__tick{background:#14100A;}
.rail__tick[data-on="true"]{background:var(--tone-label);border-color:var(--tone-label);}
.rail__lab{
  position:absolute;bottom:calc(var(--rail-base) + 11px);translate:-50% 0;white-space:nowrap;
  font-family:var(--font-roman);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tone-dim);opacity:.9;
}
.rail__lab[data-on="true"]{color:var(--tone-label);opacity:1;}
.rail__tick[data-tick="0"],
.rail__lab[data-tick="0"]{left:0;}
.rail__lab[data-tick="0"]{translate:0 0;}

/* N beats -> N ticks spread 0..100%. The last label hangs off its right edge. */
[data-beats="2"] .rail__tick[data-tick="1"],[data-beats="2"] .rail__lab[data-tick="1"]{left:100%;}
[data-beats="2"] .rail__lab[data-tick="1"]{translate:-100% 0;}

[data-beats="3"] .rail__tick[data-tick="1"],[data-beats="3"] .rail__lab[data-tick="1"]{left:50%;}
[data-beats="3"] .rail__tick[data-tick="2"],[data-beats="3"] .rail__lab[data-tick="2"]{left:100%;}
[data-beats="3"] .rail__lab[data-tick="2"]{translate:-100% 0;}

[data-beats="4"] .rail__tick[data-tick="1"],[data-beats="4"] .rail__lab[data-tick="1"]{left:33.3333%;}
[data-beats="4"] .rail__tick[data-tick="2"],[data-beats="4"] .rail__lab[data-tick="2"]{left:66.6667%;}
[data-beats="4"] .rail__tick[data-tick="3"],[data-beats="4"] .rail__lab[data-tick="3"]{left:100%;}
[data-beats="4"] .rail__lab[data-tick="3"]{translate:-100% 0;}

[data-beats="5"] .rail__tick[data-tick="1"],[data-beats="5"] .rail__lab[data-tick="1"]{left:25%;}
[data-beats="5"] .rail__tick[data-tick="2"],[data-beats="5"] .rail__lab[data-tick="2"]{left:50%;}
[data-beats="5"] .rail__tick[data-tick="3"],[data-beats="5"] .rail__lab[data-tick="3"]{left:75%;}
[data-beats="5"] .rail__tick[data-tick="4"],[data-beats="5"] .rail__lab[data-tick="4"]{left:100%;}
[data-beats="5"] .rail__lab[data-tick="4"]{translate:-100% 0;}

[data-beats="6"] .rail__tick[data-tick="1"],[data-beats="6"] .rail__lab[data-tick="1"]{left:20%;}
[data-beats="6"] .rail__tick[data-tick="2"],[data-beats="6"] .rail__lab[data-tick="2"]{left:40%;}
[data-beats="6"] .rail__tick[data-tick="3"],[data-beats="6"] .rail__lab[data-tick="3"]{left:60%;}
[data-beats="6"] .rail__tick[data-tick="4"],[data-beats="6"] .rail__lab[data-tick="4"]{left:80%;}
[data-beats="6"] .rail__tick[data-tick="5"],[data-beats="6"] .rail__lab[data-tick="5"]{left:100%;}
[data-beats="6"] .rail__lab[data-tick="5"]{translate:-100% 0;}
[data-beats="6"] .rail__lab{font-size:.56rem;letter-spacing:.16em;}


/* -- THE FIGURES: line-art marks, gold on the dark film ------------------- */
.beat__fig{
  display:block;width:clamp(56px,9.5vh,104px);height:clamp(56px,9.5vh,104px);
  margin-bottom:clamp(.45rem,1.3vh,1rem);
  color:var(--tone-gold);
}
.beat__fig .ic{display:block;width:100%;height:100%;}
[data-cam="tres"] .beat__fig,
[data-cam="cine"] .beat__fig{width:clamp(52px,8.6vh,96px);height:clamp(52px,8.6vh,96px);}

/* -- BEAT LISTS: gold marks, no boxes ------------------------------------- */
.beat__list{
  list-style:none;margin:clamp(.6rem,1.5vh,1.1rem) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(.35rem,.9vh,.62rem);
  max-width:64ch;counter-reset:bl;
}
.beat__list li{
  position:relative;padding-left:1.5rem;
  color:var(--tone-dim);font-size:clamp(.88rem,1.05vh + .3vw,1.08rem);line-height:1.45;
}
.beat__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;rotate:45deg;background:var(--tone-label);
}
.beat__list--num li::before{
  content:counter(bl);counter-increment:bl;
  width:auto;height:auto;rotate:none;background:none;top:0;
  font-family:var(--font-roman);font-size:.86rem;color:var(--tone-label);
}

/* -- REQUISITOS: two items, side by side, each with its mark -------------- */
.reqs{
  list-style:none;margin:clamp(.9rem,2.2vh,1.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,2.6vw,2.4rem);max-width:none;
}
.reqs__item{display:flex;flex-direction:column;}
.reqs__t{
  font-family:var(--font-garden);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(1rem,1.55vh + .4vw,1.55rem);line-height:1.14;color:var(--tone-fg);
  letter-spacing:-.012em;
}
.reqs__d{margin-top:.4rem;color:var(--tone-dim);
  font-size:clamp(.84rem,1vh + .28vw,1rem);line-height:1.45;}

/* -- RED · the closing disclosure ---------------------------------------- */
.red-note{
  max-width:62ch;font-size:clamp(.88rem,1.05vh + .3vw,1.06rem);line-height:1.55;
  color:var(--ivory-dim);opacity:.8;
  padding-left:1.1rem;border-left:1px solid var(--gold-hair);
}
[data-cam="red"] .beat[data-beat="5"] .beat__inner{justify-content:center;}

/* -- BUTTONS: magnetic-ready, gold focus ring ----------------------------- */
.btn{will-change:transform;}
/* gold fill + bark label is ~2:1 over a lit canopy; on this page the label
   goes to near-black so the CTA reads at a glance in every chapter */
.btn--gold{color:#241708;}
.btn--gold:hover{color:var(--paper);}
.btn:focus-visible{
  outline:2px solid var(--gold);outline-offset:4px;
  box-shadow:0 0 0 6px var(--gold-veil);
}
[data-tone="dark"] .btn--ghost{color:var(--ivory-fg);border-color:rgba(227,192,112,.5);}
[data-tone="dark"] .btn--ghost:hover{border-color:var(--gold-light);}

/* -- FOOTER --------------------------------------------------------------- */
/* the footer column headings are <h3> (an <h4> under an <h2> page skips a
   level); mirror roa.css's .foot h4 rules so nothing moves visually */
.foot h3{font-family:var(--font-roman);font-size:.8rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:.9rem;font-weight:400;}
.foot__mark{width:54px;height:54px;}
.foot__blurb{margin-top:.9rem;max-width:34ch;}
.mt-s{margin-top:.8rem;}

/* -- REVEALS: opacity + translate only ------------------------------------ */
[data-reveal]{
  opacity:0;transform:translateY(24px);visibility:hidden;
  transition:opacity .9s var(--ease-film),transform .9s var(--ease-lift);
  animation:garden-safety .01s linear 2.6s forwards;
}
[data-reveal][data-on="true"],
[data-reveal].is-in{opacity:1;transform:none;visibility:visible;}
[data-reveal-stagger]>*{
  opacity:0;transform:translateY(18px);visibility:hidden;
  transition:opacity .8s var(--ease-film),transform .8s var(--ease-lift);
  animation:garden-safety .01s linear 2.8s forwards;
}
[data-reveal-stagger][data-on="true"]>*,
[data-reveal-stagger].is-in>*{opacity:1;transform:none;visibility:visible;}
[data-reveal-stagger][data-on="true"]>*:nth-child(2),
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.08s;}
[data-reveal-stagger][data-on="true"]>*:nth-child(3),
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.16s;}
[data-reveal-stagger][data-on="true"]>*:nth-child(4),
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.24s;}
/* a page must never be able to stay blank because one observer failed */
@keyframes garden-safety{to{opacity:1;transform:none;visibility:visible;}}

/* -- SHORT DESKTOP / LAPTOP (<=820px tall): tighten the frame ------------- */
@media (min-width:761px) and (max-height:820px){
  :root{--topgap:clamp(6.2rem,11svh,7.4rem);--rail-h:52px;--rail-base:15px;}
  .pin > .words{padding-bottom:clamp(1.2rem,3svh,2rem);}
  .rail__lab{font-size:.58rem;letter-spacing:.16em;}
}

/* -- LANDSCAPE PHONE / VERY SHORT (<=480px tall) --------------------------
   isMobileLayout() in the loader is false at 844x390 (width >= 760 and the
   aspect is >= 1), so the desktop column is what renders there. Give it a
   compact skin: wider column, smaller type, a thin rail band. --------------- */
@media (min-width:761px) and (max-height:480px){
  :root{
    --topgap:5.4rem;--rail-h:40px;--rail-base:11px;
    --col-pad:1.1rem;
  }
  [data-cam]{--col:min(70vw,52rem);}
  [data-cam="hero"]{--col:min(64vw,44rem);}
  .words .display{font-size:clamp(1.5rem,6.2vh + .9vw,2.3rem);line-height:1.02;}
  .words .h2{font-size:clamp(1.1rem,4.6vh + .5vw,1.6rem);line-height:1.08;}
  .words .lead{font-size:clamp(.8rem,2.4vh + .2vw,.95rem);line-height:1.38;
    margin-top:.4rem;max-width:none;}
  .words .eyebrow{margin-bottom:.35rem;font-size:.62rem;}
  .beat__fig,
  [data-cam="tres"] .beat__fig,
  [data-cam="cine"] .beat__fig{width:32px;height:32px;margin-bottom:.25rem;}
  .beat__list{margin-top:.35rem;gap:.18rem;max-width:none;}
  .beat__list li{font-size:.74rem;line-height:1.3;padding-left:1.1rem;}
  .beat__list li::before{top:.5em;width:5px;height:5px;}
  .roots{margin-top:.5rem;}
  .roots__item{padding-block:.34rem;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:.1rem 1rem;}
  .roots__no{font-size:.86rem;}
  .roots__yes{font-size:.76rem;line-height:1.34;}
  .reqs{margin-top:.5rem;gap:.9rem;}
  .reqs__t{font-size:.98rem;}
  .reqs__d{font-size:.78rem;line-height:1.34;}
  .count{font-size:clamp(2.2rem,17vh,4.4rem);margin-bottom:.1rem;}
  .note-line{margin-top:.55rem;font-size:.74rem;line-height:1.36;max-width:none;}
  .hero__actions{margin-top:.7rem;gap:.5rem;}
  .hero__actions .btn{min-height:44px;padding:.55rem 1.2rem;font-size:.78rem;}
  .red-note{font-size:.78rem;line-height:1.36;max-width:none;}
  .rail__lab{font-size:.52rem;letter-spacing:.12em;bottom:calc(var(--rail-base) + 9px);}
  .rail__n{font-size:.55rem;}
  .words--center{width:min(84vw,44rem);}
  /* the sticky CTA is still on screen below 860px wide: reserve its band on
     the column, or it paints over the rail and the last line of copy */
  .dock{padding:.45rem var(--gutter) calc(.45rem + env(safe-area-inset-bottom));}
  .dock .btn{min-height:44px;padding:.5rem 1.2rem;font-size:.78rem;}
  .words,
  .pin > .words{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom));}
  [data-cam="hero"] .words{padding-bottom:1rem;}
  .foot{padding-bottom:calc(4.2rem + env(safe-area-inset-bottom));}

  /* LANDSCAPE SCRIM (v4.2 fix). At 844x390 this desktop-derived skin painted
     ivory letters straight over lit foliage and the copy lost its contrast.
     Back the whole column with the same dark scrim the phone panel uses —
     full column height, square corners, flat colour (no gradient). */
  .words,
  .pin > .words,
  .shot--tall > .words,
  .words--center{
    background:var(--scrim);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:0;
  }
}

/* -- PHONE: film on top, words in a full-bleed scrim panel ----------------
   v4.2: the panel is sized per chapter so the FILM always owns the top of the
   screen and every word of the beat is reachable. If a beat is still taller
   than its panel (the longest lists on a 360x640 handset) the beat scrolls
   inside the panel with a visible gold thumb — it is never cut off. -------- */
@media (max-width:760px){
  :root{
    --col-pad:1.15rem;--topgap:4.6rem;--rail-h:46px;--rail-base:13px;
    --dock-gap:4.6rem;
  }

  .shot{min-height:100svh;}
  [data-cam="raices"]{min-height:150svh;}
  [data-cam="pedimos"]{min-height:150svh;}
  [data-cam="tres"]{height:calc(4 * 100svh);}
  [data-cam="cine"]{height:calc(5 * 100svh);}
  [data-cam="red"]{height:calc(7 * 100svh);}
  [data-cam]{--col:100%;}

  .words,
  .pin > .words,
  .words--center{
    position:absolute;left:0;right:0;bottom:0;
    width:100%;max-width:none;margin:0;
    height:52%;min-height:0;
    padding:1rem var(--col-pad) calc(.9rem + env(safe-area-inset-bottom));
    background:var(--scrim);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:0;
    border-top:1px solid var(--tone-hair);
    justify-content:flex-start;
    /* NOT a scroll container. A panel that trapped the thumb ate the swipe and
       the film never advanced; the loader adds .is-scrollable only when the
       content really overflows (see markScrollable() in arbol.js). */
    overflow:hidden;
  }
  .words.is-scrollable{overflow:hidden auto;}
  .shot--tall > .words{position:sticky;top:48svh;height:52svh;}
  [data-cam="raices"] .words{height:54%;}
  [data-cam="pedimos"] .words{height:54%;}
  [data-cam="cine"] .words{height:54%;}
  [data-cam="red"] .words{height:56%;}
  /* the servicios panel carries the longest beat (the four-item list) */
  [data-cam="tres"] .words{height:64%;}
  [data-cam="hero"] .words{height:52%;}
  [data-cam="cierre"] .words{height:50%;text-align:left;align-items:stretch;}
  .shot--tall[data-cam="raices"] > .words{top:40svh;height:60svh;}
  .shot--tall[data-cam="pedimos"] > .words{top:40svh;height:60svh;}
  /* raices and pedimos carry the longest un-beaten copy on the page; trim it
     a notch so the panel holds all of it instead of scrolling */
  [data-cam="raices"] .lead,
  [data-cam="pedimos"] .lead{font-size:.86rem;line-height:1.4;}
  [data-cam="raices"] .roots__item{padding-block:.42rem;}
  [data-cam="pedimos"] .reqs{gap:.6rem;}
  [data-cam="pedimos"] .beat__fig{width:40px;height:40px;margin-bottom:.25rem;}
  .words--center .eyebrow,
  .words--center .hero__actions{justify-content:flex-start;}
  .words--center .lead,
  .words--center .note-line{margin-inline:0;}
  .words--end{justify-content:flex-start;}

  .words .display{font-size:clamp(1.65rem,6.6vw,2.4rem);line-height:1.04;}
  .words .h2{font-size:clamp(1.3rem,5.2vw,1.9rem);line-height:1.08;}
  .words .lead{font-size:clamp(.88rem,3.6vw,1rem);line-height:1.45;
    max-width:none;margin-top:.5rem;}
  .hero__actions{margin-top:.9rem;gap:.55rem;}
  .hero__actions .btn{min-height:46px;padding:.7rem 1.4rem;font-size:.86rem;}
  .lead--wide{font-size:1rem;}
  .count{font-size:clamp(2.6rem,13vw,4.6rem);margin-bottom:.1rem;}
  .words .eyebrow{margin-bottom:.55rem;font-size:.66rem;}
  .note-line{margin-top:.7rem;font-size:.8rem;line-height:1.42;max-width:none;}
  .roots{margin-top:.7rem;}
  .roots__item{padding-block:.5rem;grid-template-columns:1fr;gap:.18rem;}
  .roots__no{font-size:.95rem;}
  .roots__yes{grid-column:1;font-size:.82rem;line-height:1.4;}

  /* THE DOCK CLEARANCE. roa.css parks the sticky "Aplicar" bar at the bottom
     of the viewport; the panel reserves the bar's height itself. The hero is
     exempt: the dock is still off-screen there. */
  .dock{padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));}
  .dock .btn{min-height:46px;padding:.65rem 1.4rem;font-size:.85rem;}
  [data-cam]:not([data-cam="hero"]) .words,
  .pin > .words{
    padding-bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom));
  }
  /* the footer legal text must clear the dock too */
  .foot{padding-bottom:calc(var(--dock-gap) + 1rem + env(safe-area-inset-bottom));}

  /* the rail stays a reserved band INSIDE the scrim panel, under the copy */
  .rail{margin-top:.55rem;}
  .rail__n{font-size:.58rem;bottom:1px;}
  .beats{max-height:none;}

  /* THE STEP NAME ON A PHONE (v4.2). Six tracked-caps labels cannot share a
     360px rail, so only the label of the CURRENT step is painted — the loader
     marks every reached tick data-on, and the :has() rule below keeps the last
     one standing. It is pinned to the left of the band, opposite .rail__n. */
  .rail__lab{
    display:block;left:0 !important;translate:0 0 !important;
    bottom:calc(var(--rail-base) + 9px);
    font-size:.6rem;letter-spacing:.16em;max-width:62%;
    overflow:hidden;text-overflow:ellipsis;
  }
  .rail__lab:not([data-on="true"]){display:none;}
  .rail__lab[data-on="true"]:has(~ .rail__lab[data-on="true"]){display:none;}
  .rail:not(:has(.rail__lab[data-on="true"])) .rail__lab[data-tick="0"]{
    display:block;color:var(--tone-dim);
  }
  [data-beats="6"] .rail__lab{font-size:.6rem;letter-spacing:.16em;}

  .beat__fig,
  [data-cam="tres"] .beat__fig,
  [data-cam="cine"] .beat__fig{width:52px;height:52px;margin-bottom:.4rem;}
  .beat__list{margin-top:.5rem;gap:.3rem;max-width:none;}
  .beat__list li{font-size:.82rem;line-height:1.4;padding-left:1.15rem;}
  .beat__list li::before{top:.55em;width:5px;height:5px;}

  /* A beat is a plain block: it fits its panel at every phone size, so it must
     not trap the swipe. Only a beat that genuinely overflows gets scrolling,
     via .is-scrollable from the loader, with a visible gold thumb. */
  .beat{
    overflow:hidden;
    justify-content:flex-start;
    scrollbar-width:thin;scrollbar-color:var(--tone-label) transparent;
    padding-right:.35rem;
  }
  .beat.is-scrollable{overflow:hidden auto;}
  .beat::-webkit-scrollbar{width:4px;}
  .beat::-webkit-scrollbar-track{background:transparent;}
  .beat::-webkit-scrollbar-thumb{background:var(--tone-label);border-radius:2px;}
  .words::-webkit-scrollbar{width:4px;}
  .words::-webkit-scrollbar-thumb{background:var(--tone-label);border-radius:2px;}
  .words{scrollbar-width:thin;scrollbar-color:var(--tone-label) transparent;}

  .reqs{grid-template-columns:1fr;gap:.85rem;margin-top:.7rem;}
  .reqs__t{font-size:1.05rem;}
  .reqs__d{font-size:.84rem;line-height:1.4;}
  .red-note{font-size:.84rem;line-height:1.45;max-width:none;}
}

/* -- TINY PHONES (<=380px wide or <=670px tall): one more notch down ------- */
@media (max-width:380px),(max-width:760px) and (max-height:670px){
  :root{--topgap:4.2rem;--rail-h:42px;--rail-base:12px;--dock-gap:4.4rem;}
  .words .display{font-size:clamp(1.5rem,6.4vw,2rem);}
  .words .h2{font-size:clamp(1.18rem,5vw,1.55rem);}
  .words .lead{font-size:.86rem;line-height:1.4;}
  .beat__fig,
  [data-cam="tres"] .beat__fig,
  [data-cam="cine"] .beat__fig{width:44px;height:44px;margin-bottom:.3rem;}
  .beat__list li{font-size:.78rem;line-height:1.36;}
  .beat__list{gap:.24rem;}
  .count{font-size:clamp(2.2rem,12vw,3.4rem);}
  .roots__no{font-size:.88rem;}
  .roots__yes{font-size:.78rem;}
  .reqs__t{font-size:.98rem;}
  .reqs__d{font-size:.8rem;}
  .note-line{font-size:.76rem;}
  .red-note{font-size:.8rem;}
  [data-cam="tres"] .words{height:68%;}
  [data-cam="red"] .words{height:60%;}
  [data-cam="cine"] .words{height:58%;}
  .shot--tall[data-cam="raices"] > .words{top:30svh;height:70svh;}
  .shot--tall[data-cam="pedimos"] > .words{top:30svh;height:70svh;}
  [data-cam="hero"] .words{height:57%;}
  [data-cam="raices"] .lead,
  [data-cam="pedimos"] .lead{font-size:.8rem;line-height:1.36;}
  [data-cam="raices"] .roots__item{padding-block:.34rem;}
  [data-cam="pedimos"] .beat__fig{width:34px;height:34px;}
}

/* -- SMALL LANDSCAPE PHONE (<=760px wide, landscape): 640x360 and friends --
   isMobileLayout() is TRUE here (width < 760), so the engine is in mobile mode
   and the bottom scrim panel applies — but a 52%-tall panel on a 360px-tall
   screen leaves the film a 170px sliver and the type is sized for portrait.
   Cap the panel, scale the type down, and keep the dock reserve. ----------- */
@media (max-width:760px) and (orientation:landscape){
  :root{
    --col-pad:1rem;--topgap:3.4rem;--rail-h:28px;--rail-base:9px;
    --dock-gap:2.9rem;
  }
  .words,
  .pin > .words,
  .words--center,
  [data-cam="hero"] .words,
  [data-cam="raices"] .words,
  [data-cam="tres"] .words,
  [data-cam="cine"] .words,
  [data-cam="pedimos"] .words,
  [data-cam="red"] .words,
  [data-cam="cierre"] .words{height:70%;}
  .shot--tall > .words,
  .shot--tall[data-cam="raices"] > .words,
  .shot--tall[data-cam="pedimos"] > .words{top:30svh;height:70svh;}
  /* 640px of width and only ~130px of copy height: the lists run ACROSS,
     not down, or the last bullets fall off the bottom of the panel. The base
     rule is a flex COLUMN, so it becomes a two-track grid here. */
  .beat__list{display:grid;grid-template-columns:1fr 1fr;
    column-gap:1.2rem;row-gap:.16rem;align-content:start;}
  .words .display{font-size:clamp(1.2rem,5.4vh,1.7rem);line-height:1.02;}
  .words .h2{font-size:clamp(1rem,4.4vh,1.35rem);line-height:1.06;}
  .words .lead{font-size:clamp(.66rem,2.3vh,.78rem);line-height:1.3;margin-top:.28rem;}
  .words .eyebrow{margin-bottom:.3rem;font-size:.56rem;}
  .count{font-size:clamp(1.8rem,14vh,3rem);margin-bottom:.05rem;}
  .note-line{margin-top:.45rem;font-size:.68rem;line-height:1.32;}
  .red-note{font-size:.7rem;line-height:1.32;}
  .beat__fig,
  [data-cam="tres"] .beat__fig,
  [data-cam="cine"] .beat__fig,
  [data-cam="pedimos"] .beat__fig{width:28px;height:28px;margin-bottom:.2rem;}
  .beat__list{margin-top:.3rem;gap:.16rem;}
  .beat__list li{font-size:.64rem;line-height:1.26;padding-left:.9rem;}
  .reqs{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.5rem;}
  .reqs__t{font-size:.86rem;}
  .reqs__d{font-size:.7rem;line-height:1.3;}
  .roots{margin-top:.45rem;}
  .roots__item{padding-block:.28rem;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.06rem .8rem;}
  .roots__no{font-size:.78rem;}
  .roots__yes{grid-column:2;font-size:.68rem;line-height:1.3;}
  .hero__actions{margin-top:.55rem;gap:.45rem;}
  .hero__actions .btn{min-height:44px;padding:.5rem 1.1rem;font-size:.74rem;}
  .rail{margin-top:.4rem;}
  .rail__lab{font-size:.52rem;letter-spacing:.12em;bottom:calc(var(--rail-base) + 8px);}
  .rail__n{font-size:.54rem;}
  .dock{padding:.4rem var(--gutter) calc(.4rem + env(safe-area-inset-bottom));}
  .dock .btn{min-height:44px;padding:.45rem 1.1rem;font-size:.74rem;}
}

/* -- FALLBACK: no engine, or the user asked for stillness ----------------- */
.no-gl [data-cam]{min-height:100svh;height:auto;}
.no-gl .pin{position:relative;height:auto;}
.no-gl .words{position:relative;height:auto;min-height:0;width:min(92vw,52rem);
  margin-inline:auto;background:none;backdrop-filter:none;border-top:0;
  padding-block:var(--bay);}
.no-gl .beats{position:static;}
.no-gl .beat{position:relative;inset:auto;opacity:1;visibility:visible;
  transform:none;margin-bottom:2.4rem;}
.no-gl .rail{display:none;}
.no-gl [data-reveal],
.no-gl [data-reveal-stagger]>*{opacity:1;transform:none;transition:none;animation:none;}

@media (prefers-reduced-motion:reduce){
  #gl{display:none;}
  .beat{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
    transition:none;margin-bottom:2.2rem;}
  .beats{position:static;}
  .words,.pin > .words{height:auto;min-height:0;overflow:visible;}
  .pin{position:relative;height:auto;}
  [data-cam]{height:auto;}
  [data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none;transition:none;animation:none;}
  .btn,.rail__fill,#frames img,#gl{transition:none;}
}

/* -- TOUCH TARGETS: 44px minimum on phones -------------------------------- */
/* roa.css hides .topbar__tel below 701px — never re-display it here, that
   un-hid two long links and wrapped the bar onto four lines on a 390px phone.
   Give it the 44px target only in the band where it is actually shown. */
@media (min-width:701px) and (max-width:900px){
  .topbar__tel{
    display:inline-flex;align-items:center;min-height:44px;
    padding-block:.55rem;
  }
}
/* the phone topbar keeps logo + APLICAR on ONE line */
@media (max-width:700px){
  .topbar{flex-wrap:nowrap;gap:.6rem;padding-inline:1rem;}
  .topbar__logo img{height:26px;}
  .topbar__right{gap:.6rem;flex:none;}
  .topbar .btn{padding:.55rem 1.1rem;font-size:.78rem;letter-spacing:.12em;
    min-height:44px;white-space:nowrap;}
}
@media (max-width:760px){
  .foot ul{gap:.15rem;}
  .foot ul a{
    display:inline-flex;align-items:center;min-height:44px;
    padding-block:.5rem;
  }
}

/* -- BAKE MODE: pure scene, no chrome ------------------------------------- */
.baking .topbar,.baking main,.baking .foot,.baking .dock,
.baking .skip,.baking #frames{display:none;}
.baking #gl{opacity:1;}