/* =============================================================================
   /por-que-nosotros — the film. Phone first. Same type, ink and buttons as the
   rest of the site (DM Sans, --mc-ink, --mc-navy, .mc-btn); what is new is the
   scale and the scroll. No labels, no numbering: few words, large.

   Every scene is a tall section with a sticky stage of one screen. why.js plays
   each film chapter by chapter as the scroll reaches its lines, and sets per
   line opacity, lift and blur (inline styles, on time), the shade under words
   on a film, the dip to white between scenes, every picture's scale and
   --o (welcome opens): no CSS
   transitions, so words and film move as one. Without .wy-on on <html> (no JS,
   or reduced motion) none of this applies: the scenes are an ordinary page.
   ========================================================================== */
.wy{ background:var(--mc-surface); }

/* ---- the motion version ---------------------------------------------------- */
.wy-on .wy-film{ height:400vh; }
.wy-on .wy-still{ height:220vh; }
.wy-on .wy-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }

.wy-film .wy-stage{ background:#05080F; }
.wy-poster, .wy-poster img, .wy-video, .wy-canvas, .wy-shade, .wy-veil{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wy-poster img, .wy-video{ object-fit:cover; }
/* the dissolve between chapters: the last frame, copied here, fades away */
.wy-canvas{ opacity:0; pointer-events:none; }
/* under the words only: the bottom of the frame, where they sit (measured per beat) */
.wy-shade{ opacity:0; pointer-events:none;
  background:linear-gradient(to top, rgba(5,8,15,.5) 0%, rgba(5,8,15,.36) 30%, rgba(5,8,15,.14) 55%, rgba(5,8,15,0) 75%); }
/* film A's title is four lines and sits higher: while it is on screen the shade
   reaches up behind it (why.js sets --wy-tall from 0 to 1) */
.wy-shade::after{ content:""; position:absolute; inset:0; opacity:var(--wy-tall, 0);
  background:linear-gradient(to top, rgba(5,8,15,.24) 0%, rgba(5,8,15,.38) 40%, rgba(5,8,15,.34) 62%, rgba(5,8,15,0) 85%); }
/* the dip: a film rises out of the page white and dissolves back into it */
.wy-veil{ opacity:0; pointer-events:none; background:var(--mc-surface); }

/* the words: all beats share one place, each arrives line by line */
.wy-copy{ position:absolute; inset:0; display:grid; align-content:end; justify-items:start;
  padding:0 var(--mc-gutter-m) calc(14vh + env(safe-area-inset-bottom)); pointer-events:none; }
.wy-beat{ grid-area:1 / 1; margin:0; color:#FFFFFF; max-width:16ch;
  text-shadow:0 2px 40px rgba(0,0,0,.35); }
.wy-beat a{ pointer-events:auto; }
.wy-l{ display:block; }
.wy-beat--open{ font-size:clamp(2.5rem, 10.5vw, 7rem); line-height:.98; letter-spacing:-.04em; font-weight:700; }
.wy-beat--word{ font-size:clamp(3rem, 15vw, 10.5rem); line-height:.95; letter-spacing:-.05em; font-weight:700; max-width:none; }
.wy-beat--line{ font-size:clamp(2.2rem, 9vw, 6rem); line-height:1; letter-spacing:-.035em; font-weight:700; }
.wy-beat--sub{ font-size:clamp(1.05rem, 4.2vw, 1.5rem); line-height:1.5; font-weight:500; max-width:34ch; letter-spacing:-.005em; }


/* ---- the stills -------------------------------------------------------------- */
.wy-still .wy-stage{ background:var(--mc-surface); }
.wy-photo{ position:relative; overflow:hidden; background:var(--mc-band); }
.wy-photo > img{ display:block; width:100%; height:100%; object-fit:cover; }

/* portrait: phone = words on white above, photograph below; desk = side by side */
.wy-still--portrait .wy-stage{ display:grid; grid-template-rows:auto minmax(0,1fr); }
.wy-still--portrait .wy-copy{ position:relative; inset:auto; order:-1; align-content:start;
  padding:calc(var(--mc-head-h, 56px) + 1.5rem) var(--mc-gutter-m) 1.5rem; gap:1rem; }
.wy-still--portrait .wy-photo > img{ object-position:58% 60%; transform-origin:58% 55%; }
.wy-copy--ink .wy-beat{ color:var(--mc-ink); text-shadow:none; position:relative; }
.wy-copy--ink .wy-beat--sub{ color:var(--mc-ink-2); }
.wy-still--portrait .wy-beat{ grid-area:auto; }
.wy-still--portrait .wy-beat--line{ font-size:clamp(2rem, 9vw, 4.6rem); }

/* welcome: opens from the centre to the whole screen; words in ink on his white wall */
.wy-still--welcome .wy-photo{ position:absolute; inset:0;
  clip-path:inset(calc(22% * (1 - var(--o, 1))) calc(12% * (1 - var(--o, 1))) calc(30% * (1 - var(--o, 1))) calc(12% * (1 - var(--o, 1))));
}
.wy-still--welcome .wy-photo > img{ object-position:49% 55%; }
.wy-copy--wall{ align-content:start; justify-items:center; text-align:center;
  padding:calc(var(--mc-head-h, 56px) + 5vh) var(--mc-gutter-m) 0; gap:.9rem; }
.wy-copy--wall .wy-beat{ grid-area:auto; color:var(--mc-ink); text-shadow:none; max-width:20ch; }
.wy-copy--wall .wy-beat--line{ font-size:clamp(1.9rem, 8.4vw, 4.4rem); }
.wy-copy--wall .wy-beat--sub{ color:var(--mc-ink); max-width:36ch; font-weight:600; }

@media (min-aspect-ratio: 1/1) and (min-width: 900px){
  .wy-copy{ padding:0 max(var(--mc-gutter-d), calc((100vw - 1200px) / 2)) 13vh; }
  .wy-still--portrait .wy-stage{ grid-template-rows:none; grid-template-columns:minmax(0,38fr) minmax(0,62fr); }
  .wy-still--portrait .wy-copy{ order:0; align-content:center;
    padding:var(--mc-head-h, 56px) var(--s-7) 0 max(var(--mc-gutter-d), calc((100vw - 1200px) / 2)); }
  .wy-copy--wall{ padding-top:calc(var(--mc-head-h, 56px) + 7vh); }
}

/* ---- the plain version: no JS, or reduced motion ------------------------------ */
html:not(.wy-on) .wy-film .wy-stage{ position:relative; }
html:not(.wy-on) .wy-video, html:not(.wy-on) .wy-canvas, html:not(.wy-on) .wy-shade, html:not(.wy-on) .wy-veil{ display:none; }
html:not(.wy-on) .wy-poster{ position:relative; height:auto; aspect-ratio:9 / 16; max-height:80vh; }
html:not(.wy-on) .wy-copy{ position:relative; padding:var(--s-6) var(--mc-gutter-m); background:var(--mc-navy); gap:var(--s-4); }
html:not(.wy-on) .wy-beat{ grid-area:auto; }
html:not(.wy-on) .wy-still--welcome .wy-photo{ position:relative; aspect-ratio:4 / 3; }
html:not(.wy-on) .wy-still--portrait .wy-photo{ aspect-ratio:4 / 3; }
@media (min-aspect-ratio: 1/1){ html:not(.wy-on) .wy-poster{ aspect-ratio:16 / 9; } }

/* ---- the record ---------------------------------------------------------------- */
.wy-proof{ background:var(--mc-band); }
.wy-proof__l{ list-style:none; margin-block:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s-6) var(--s-4); padding-block:var(--s-8); }
.wy-proof__l li{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.wy-proof__l b{ font-size:clamp(2.4rem, 10vw, 4.4rem); line-height:.95; letter-spacing:-.04em; color:var(--mc-ink);
  font-variant-numeric:tabular-nums; }
.wy-proof__l span{ font-size:var(--t-body); line-height:1.4; color:var(--mc-ink-2); max-width:22ch; }
@media (min-width:900px){ .wy-proof__l{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---- their words ------------------------------------------------------------- */
.wy-say{ padding-block:var(--s-8); }
.wy-say__h{ margin:0 0 var(--s-6); font-size:clamp(2.2rem, 8vw, 4.4rem); line-height:1; letter-spacing:-.035em; color:var(--mc-ink); }
.wy-say__l{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-5); }
.wy-q figure{ margin:0; height:100%; background:var(--mc-surface); border:1px solid var(--mc-hairline); }
/* a customer's photograph is never cropped: the box takes the file's own ratio
   (--r, from the view; clamped .6–1.6, anything beyond is matted whole) */
.wy-q__ph{ aspect-ratio:var(--r, .75); overflow:hidden; background:var(--mc-band); }
.wy-q__ph img{ width:100%; height:100%; object-fit:contain; display:block; }
.wy-q__t{ margin:0; padding:var(--s-4) var(--s-4) var(--s-2); font-size:var(--t-body); line-height:1.6; color:var(--mc-ink); }
.wy-q__by{ padding:0 var(--s-4) var(--s-4); font-size:var(--t-body); font-weight:600; color:var(--mc-ink); }
.wy-say__all{ display:inline-flex; align-items:center; min-height:44px; margin-top:var(--s-4); font-weight:600; }
@media (max-width:899px){
  .wy-say__l{ grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none; margin-inline:calc(var(--mc-gutter-m) * -1);
    padding-inline:var(--mc-gutter-m); scroll-padding-inline:var(--mc-gutter-m); }
  .wy-say__l::-webkit-scrollbar{ display:none; }
  .wy-q{ scroll-snap-align:start; }
}
@media (min-width:900px){ .wy-say__l{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ---- the way in ------------------------------------------------------------ */
.wy-end{ background:var(--mc-navy); color:#FFFFFF; }
.wy-end__in{ padding-block:var(--s-8); }
.wy-end__h{ margin:0 0 var(--s-3); font-size:clamp(2.2rem, 8vw, 4.4rem); line-height:1; letter-spacing:-.035em; color:#FFFFFF; max-width:16ch; }
.wy-end__p{ margin:0 0 var(--s-6); font-size:var(--t-sub); color:rgba(255,255,255,.88); }
.wy-end__act{ display:flex; flex-wrap:wrap; gap:var(--s-2); max-width:36rem; }
.wy-end__act .mc-btn{ flex:1 1 14rem; justify-content:center; min-height:48px; white-space:nowrap; }
.wy-end__ghost{ background:transparent; border:1.5px solid #FFFFFF; color:#FFFFFF; }
.wy-end__ghost:hover{ background:#FFFFFF; color:var(--mc-navy); }
.wy-end :focus-visible{ outline-color:#FFFFFF; }

/* fixes after the first phone pass */
.wy-beat--act .mc-btn{ white-space:nowrap; min-height:48px; padding-inline:1.4rem; }
.wy-beat--sub .wy-l{ display:inline; }
.wy-beat--sub .wy-l + .wy-l::before{ content:" "; }
@media (min-aspect-ratio: 1/1) and (min-width: 900px){
  .wy-still--portrait .wy-copy{ order:1; }
  .wy-still--portrait .wy-photo{ order:2; }
  .wy-still--portrait .wy-beat--line{ font-size:clamp(2.6rem, 4.6vw, 5rem); }
  .wy-still--portrait .wy-beat--sub{ font-size:clamp(1.1rem, 1.4vw, 1.4rem); }
}

/* welcome: title on his white wall above, the promise on the pale asphalt below */
.wy-copy--wall{ align-content:space-between; padding-bottom:calc(9vh + env(safe-area-inset-bottom)); }
.wy-still--welcome .wy-photo > img{ object-position:49% 22%; }
@media (min-aspect-ratio: 1/1) and (min-width: 900px){
  .wy-still--portrait .wy-stage{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); }
  .wy-still--portrait .wy-copy{ padding:var(--mc-head-h, 56px) var(--s-7) 0 max(var(--mc-gutter-d), calc((100vw - 1280px) / 2)); }
  .wy-still--portrait .wy-beat--line{ max-width:13ch; }
  .wy-copy--wall .wy-beat--sub{ max-width:48ch; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px){ .wy-copy--wall .wy-beat--sub{ font-size:clamp(1.15rem, 1.5vw, 1.5rem); } }
/* a phone on its side: little height, so smaller words */
@media (min-aspect-ratio: 1/1) and (max-height: 500px){
  .wy-beat--open, .wy-beat--line{ font-size:clamp(1.8rem, 6.5vh + 1rem, 3rem); }
  .wy-beat--word{ font-size:clamp(2.6rem, 14vh, 5rem); }
  .wy-copy{ padding-bottom:10vh; }
  .wy-still--portrait .wy-beat--line{ font-size:clamp(1.6rem, 6vh + .8rem, 2.6rem); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 500px){
  .wy-still--portrait .wy-stage{ grid-template-rows:none; grid-template-columns:minmax(0,48fr) minmax(0,52fr); }
  .wy-still--portrait .wy-copy{ order:1; align-content:center; padding:1rem 1.25rem 1rem max(var(--mc-gutter-m), env(safe-area-inset-left)); gap:.6rem; }
  .wy-still--portrait .wy-photo{ order:2; }
  .wy-copy--wall{ padding-top:5vh; padding-bottom:6vh; }
  .wy-copy--wall .wy-beat--line{ font-size:clamp(1.4rem, 7.5vh + .4rem, 2.4rem); max-width:none; }
  .wy-copy--wall .wy-beat--sub{ font-size:.95rem; max-width:60ch; }
  .wy-still--welcome .wy-photo > img{ object-position:49% 40%; }
}
/* plain version: the ink words sit on white, the white words on navy */
html:not(.wy-on) .wy-copy--ink, html:not(.wy-on) .wy-copy--wall{ background:var(--mc-surface); }
html:not(.wy-on) .wy-still--portrait .wy-stage{ display:block; }
html:not(.wy-on) .wy-still--welcome .wy-photo{ position:relative; }
html:not(.wy-on) .wy-still--welcome .wy-photo{ clip-path:none; }
/* the film page moves words and shade every frame: each on its own layer, so a
   change of opacity or lift is composited, never repainted (text-shadow included) */
.wy-on .wy-beat:not(.wy-beat--sub):not(.wy-beat--act) .wy-l, .wy-on .wy-beat--sub, .wy-on .wy-beat--act, .wy-on .wy-shade{ will-change:transform, opacity; }
/* the first stage starts under the header: its opening words sit that much higher (why.js sets --wy-lead) */
.wy-on .wy-beat--open{ margin-bottom:var(--wy-lead, 0px); }

/* ---- audit 2026-10-07 (6) ------------------------------------------------------
   A film's lines share one cell; each now sits on the cell's floor. They used to
   hang from its top, so every line was placed by the TALLEST one (the opening's
   four lines plus its lead): film A's single words floated up to 41% of the
   screen at 320x568, over the lit wall (worst pixel under "Para que disfrutes"
   3.3:1), and moved with the viewport. On the floor they sit in the deep part
   of the vignette, where the grade was made for them. */
.wy-film .wy-beat{ align-self:end; }
/* why.js owns the words' opacity; until its first frame they are not shown, so
   the class set in <head> never paints every line of a film on top of the others */
.wy-on .wy-beat:not(.wy-beat--sub):not(.wy-beat--act) .wy-l, .wy-on .wy-beat--sub, .wy-on .wy-beat--act{ opacity:0; }
/* the opening starts from night (why.js lifts it once the first frame is there) */
.wy-on .wy-film--a .wy-veil{ opacity:1; background-color:#05080F; }
/* on a phone the cards pass one at a time: each as tall as its own photograph and
   words, not stretched to the tallest (a 3:4 photo beside a .65 one left 140px of
   empty card) */
@media (max-width:899px){ .wy-say__l{ align-items:start; } }

/* ---- the opening (2026-10-08) --------------------------------------------------
   Film A opens like a film: its first frame fades up from night inside a scope
   frame — 2.39:1 — with the title in the black beneath it, and the frame opens
   to the whole screen as the camera starts to move (why.js adds .wy-open when
   the first chapter rolls). Two night bars, each a whole screen tall, moved by
   transform only on the site's own curve; why.js lifts the band
   (--wy-band-shift) just enough that it never crosses the title. The grade is
   near-black at the top, so the upper edge melts into the picture.
   Without .wy-on (no JS, reduced motion) there are no bars. */
.wy-bar{ display:none; }
.wy-on .wy-film--a .wy-bar{ display:block; position:absolute; left:0; right:0; top:0; height:100%; background:#05080F;
  pointer-events:none; will-change:transform; transition:transform calc(var(--m-reveal) * 4) var(--e-out); }
.wy-film--a{ --wy-band: min(100svh, calc(100vw / 2.39)); }
.wy-on .wy-film--a .wy-bar--t{ transform:translate3d(0, calc(-50% - var(--wy-band) / 2 - var(--wy-band-shift, 0px)), 0); }
.wy-on .wy-film--a .wy-bar--b{ transform:translate3d(0, calc(50% + var(--wy-band) / 2 - var(--wy-band-shift, 0px)), 0); }
.wy-on .wy-film--a.wy-open .wy-bar--t{ transform:translate3d(0, -100%, 0); }
.wy-on .wy-film--a.wy-open .wy-bar--b{ transform:translate3d(0, 100%, 0); }

/* ---- the keys (2026-10-08) ------------------------------------------------------
   The last still is his own photograph with three BMWs in Málaga. Its words used
   to lie on the welcome photo itself and, on wide screens, landed on his black
   jumper (the client: "black, not clear"). Now set like the portrait, mirrored:
   phone = words on white above, photograph below; wide = photograph left,
   words right. Ink on white everywhere: nothing to measure against a picture. */
.wy-still--keys .wy-stage{ display:grid; grid-template-rows:auto minmax(0,1fr); }
.wy-still--keys .wy-copy{ position:relative; inset:auto; order:-1; align-content:start;
  padding:calc(var(--mc-head-h, 56px) + 1.5rem) var(--mc-gutter-m) 1.5rem; gap:1rem; }
.wy-still--keys .wy-beat{ grid-area:auto; }
.wy-still--keys .wy-beat--line{ font-size:clamp(2rem, 9vw, 4.6rem); max-width:14ch; }
.wy-still--keys .wy-photo > img{ object-position:74% 62%; transform-origin:74% 55%; }
@media (min-aspect-ratio: 1/1) and (min-width: 900px){
  .wy-still--keys .wy-stage{ grid-template-rows:none; grid-template-columns:minmax(0,56fr) minmax(0,44fr); }
  .wy-still--keys .wy-copy{ order:2; align-content:center;
    padding:var(--mc-head-h, 56px) max(var(--mc-gutter-d), calc((100vw - 1280px) / 2)) 0 var(--s-7); }
  .wy-still--keys .wy-photo{ order:1; }
  .wy-still--keys .wy-photo > img{ object-position:62% 60%; }
  .wy-still--keys .wy-beat--line{ font-size:clamp(2.6rem, 4.2vw, 4.8rem); }
  .wy-still--keys .wy-beat--sub{ font-size:clamp(1.1rem, 1.4vw, 1.4rem); max-width:34ch; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 500px){
  .wy-still--keys .wy-stage{ grid-template-rows:none; grid-template-columns:minmax(0,52fr) minmax(0,48fr); }
  .wy-still--keys .wy-copy{ order:2; align-content:center; padding:1rem max(var(--mc-gutter-m), env(safe-area-inset-right)) 1rem 1.25rem; gap:.6rem; }
  .wy-still--keys .wy-beat--line{ font-size:clamp(1.6rem, 6vh + .8rem, 2.6rem); }
  .wy-still--keys .wy-beat--sub{ font-size:.95rem; }
}
html:not(.wy-on) .wy-still--keys .wy-stage{ display:block; }
html:not(.wy-on) .wy-still--keys .wy-photo{ aspect-ratio:3 / 2; }
html:not(.wy-on) .wy-still--keys .wy-copy{ background:var(--mc-surface); }