/* ===========================================================
   Joana González — portfolio site
   Design tokens + shared components. See ../NOTES.md for the
   source values and where each one was measured from.
   =========================================================== */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Used only by the ZARA e-commerce page, which is set in the real campaign faces:
   Archivo Black for every heading and Pinyon Script for the pull quote. */
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../assets/fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The decorative opening quote on the mobile Sobre mí card is Arapey 120 in white. */
@font-face {
  font-family: "Arapey";
  src: url("../assets/fonts/arapey.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The mobile DA & Campañas artboard is the one page set in DM Sans rather than Inter —
   see the note in NOTES.md; it is loaded only where that page uses it. */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Unë Concept proposal (Figma 2546:9): Syne Bold/ExtraBold. Variable font, latin subset. */
@font-face {
  font-family: "Syne";
  src: url("../assets/fonts/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- palette --- */
  --pink-bg: #f7dfdd;
  --maroon: #5b1b2b;
  --maroon-soft: #6d2334;
  --rose-mid: #dda3a6;
  --rose-light: #f2d6d3;
  --ink: #171414;
  --paper: #f5f5f2;
  --tan: #ede0c7;
  --cream-folder: #f0e8d4;
  --white: #ffffff;
  --gray-placeholder: #c7c2bf;

  /* per-case-study accents */
  --mcd-paper: #ded0ae;
  --mcd-navy: #17264f;
  --sabadell-bg: #f7f7f6;
  --sabadell-blue: #0067ff;
  --blingme-bg: #faf2e1;
  --blingme-terra: #d95a26;

  /* --- type --- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* --- spacing / shape --- */
  --radius-pill: 999px;
  --radius-card: 8px;
  --page-pad: clamp(24px, 5vw, 100px);
  --content-max: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pink-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* blockquote MUST be in this reset: the UA's default 40px side margins were shrinking
   every pull-quote by 80px and pushing it out of its column. */
h1, h2, h3, p, ul, blockquote, figure {
  margin: 0;
}

.page {
  min-height: 100vh;
  padding: 80px var(--page-pad) 100px;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- headings --- */
/* font-weight:400 is NOT optional: h1/h2/h3 default to bold and Anton ships only one
   weight, so the browser SYNTHESISES the bold — fattening every stroke and widening the
   text enough to change where lines break. `text-wrap: balance` also has to go: Figma
   fills each line before wrapping, balance evens the lines out instead. And Anton is
   already tightly spaced, so the extra letter-spacing pushed lines over the column. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--maroon);
  line-height: 1.05;
  letter-spacing: normal;
}
/* Page titles measure 167px wide for "SOBRE MÍ" / "MI VISIÓN" in the exports,
   which solves to 46px in Anton. */
.display--xl { font-size: 46px; }
/* 46px fixed is wider than a small phone for the longer titles ("¡CONTÁCTAME!" needs
   284px in a 232px column at 320), so it scales below the tablet breakpoint. */
@media (max-width: 560px) {
  .display--xl { font-size: clamp(1.9rem, 9.5vw, 46px); }
}
.display--lg { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.display--md { font-size: clamp(1.2rem, 2.4vw, 1.75rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.75;
}

.body-text {
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 62ch;
  text-align: justify;
  text-justify: inter-word;
}

/* --- back / nav pill button --- */
.btn-back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--maroon);
  background: var(--white);
  color: var(--maroon);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-back:hover { background: var(--rose-light); }
.btn-back:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.btn-back svg { width: 16px; height: 16px; }

.btn-back--on-dark {
  border-color: transparent;
  background: var(--white);
  color: var(--maroon);
}

/* --- quote box ---
   Figma sets these in Anton (the display face) at normal sentence case, NOT in
   bold Inter — using the body font here made every pull-quote read too light. */
.quote-box {
  background: var(--maroon);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  padding: 22px 28px;
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Decorative opening quote that sits outside the box (Sobre mí: above it;
   Mi visión: to its left). It is a Figma export, not a typed character — the mark
   is set in a face the site does not ship, so Anton's own “ was the wrong shape. */
.quote-mark { display: block; width: 62px; height: auto; user-select: none; }
/* Figma: mark 761..823, box 818..1126 inside a column that runs 755..1210 — the mark
   overlaps the box slightly and the box does NOT stretch to the column edge. */
.quote-group { display: flex; align-items: flex-start; gap: 0; padding-left: 6px; }
.quote-group .quote-mark { flex-shrink: 0; margin-right: -5px; }
.quote-group .quote-box { flex: 0 1 308px; }

/* --- generic image placeholder --- */
.placeholder {
  background: var(--gray-placeholder);
  border-radius: 4px;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
}

/* =========================================================
   INICIO — full-bleed artboard hero
   ========================================================= */
/* The whole artboard is one exported image; the four nav labels are part of that
   composition, so navigation is transparent hit areas positioned at the label rects
   (percentages of the 1440x900 frame). Assembling this from separate badge/folder
   assets repeatedly drifted out of register — do not go back to that.
   The image keeps its 1440:900 ratio and is anchored bottom-right so the folder stack
   bleeds off a short viewport exactly as the design does. */
.inicio { padding: 0; position: relative; }
.inicio__art { display: block; width: 100%; height: auto; }
.inicio__nav a {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
}
.inicio__nav a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; text-indent: 0; }

/* --- phone: Figma's own mobile artboard (2131:9), not the desktop art scaled down ---
   The mobile composition stacks the badge OVER the folders instead of beside them.
   Both blocks are 390x390 in a 390-wide frame, so they are sized in percentages and
   scale with the viewport; the four hit areas are percentages of the folders block,
   which keeps them registered at any width. */
.inicio__mobile { display: none; }
@media (max-width: 700px) {
  .inicio__art, .inicio__nav { display: none; }
  /* The badge must stay flush to the top edge and the folders flush to the bottom edge
     on every phone, with the gap between them absorbing whatever space is left — so the
     two squares are pinned to the ends of a 100svh flex column instead of stacked with a
     fixed margin. This only misbehaves (gap goes to 0 instead of negative — flexbox
     clamps it, it never overlaps) on a device shorter than roughly 2x its own width,
     which no current phone is. The two image files are now clean 390x390 exports with
     nothing baked in beyond their own artwork, so there is no hidden padding to throw
     the badge/gap/folders math off like there was before. */
  .inicio { padding: 0; min-height: 100svh; display: flex; flex-direction: column; }
  .inicio__mobile {
    display: flex; flex-direction: column; justify-content: space-between;
    flex: 1 0 auto; width: 100%;
  }
  .inicio__m-badge { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  .inicio__m-folders { position: relative; width: 100%; aspect-ratio: 1 / 1; }
  .inicio__m-folders img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .inicio__m-nav a {
    position: absolute;
    left: var(--x);
    top: var(--y);
    color: var(--c);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 3.8462vw; /* 15px / 390 */
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    padding: 3.5vw 4vw;
    margin: -3.5vw -4vw; /* enlarges the tap target without moving the visible label */
  }
  .inicio__m-nav a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 4px; }
}

/* =========================================================
   SOBRE MÍ
   ========================================================= */
/* Content row must start at y=259 in the 1700 frame. */
.sobre-mi__header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 63px; }
/* Measured off the artboard export: text columns 434 / 301 / 421 with 48 and 42px
   gutters, content running 101..1347. */
.sobre-mi__content {
  display: grid;
  grid-template-columns: 434fr 301fr 421fr;
  column-gap: 45px;
  align-items: start;
}
/* Section headings here are Anton 23 in SENTENCE case — the site-wide display rule
   uppercases them, which is wrong on this page. */
.sobre-mi__content .display--md {
  text-transform: none;
  font-size: 23px;
  line-height: 35px;
}
.sobre-mi__content .body-text { font-size: 16px; line-height: 23px; }
@media (max-width: 900px) {
  .sobre-mi__content { grid-template-columns: 1fr; }
}
.sobre-mi__col { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* Taken out of flow so it does not push the column down.
   Mark is 51x43 at x=906/y=236 — the column starts at x=926/y=259, so it hangs 20px
   left and 23px above, clearing the box top (296) by 17px. */
.sobre-mi__col .quote-mark { position: absolute; top: -23px; left: -20px; width: 51px; margin: 0; }
/* Box fills the column (926..1346) and sits 37px below the column top. */
.sobre-mi__col .quote-box {
  margin-top: 37px;
  font-size: 20px;
  line-height: 30px;
  padding: 33px 28px;
}
/* Sobre mí sets its body copy ragged-right in Figma (Mi visión keeps it justified),
   so the site-wide justify default is overridden here rather than globally. */
.sobre-mi__content .body-text { text-align: left; max-width: none; }
/* The loop fills the maroon panel edge to edge — in the reference the photo strip
   IS the panel, not a small inset. Any padding here reintroduces the inset. */
.photobooth {
  background: #6b1a1e;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 301 / 562;
}
.photobooth__loop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Folder call-to-action: label on the left, the real folder artwork on the right.
   Labels are Anton in maroon in Figma, not bold Inter. */
.folder-cta { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.folder-cta p { margin: 0; flex: 1; }
/* Each folder artwork has its own size in Figma (striped 126, polka-dot 83,
   questions 100) — one shared width flattened three deliberate sizes into one. */
.folder-cta img { width: 84px; height: auto; flex-shrink: 0; transition: transform 0.15s ease; }
.sobre-mi__col .folder-cta:nth-of-type(1) img { width: 126px; }
.sobre-mi__col .folder-cta:nth-of-type(2) img { width: 83px; }
.sobre-mi__col .folder-cta:nth-of-type(3) img { width: 100px; }
/* Absolutely-positioned CTA rows (see the note in sobre-mi.html): the pitch between
   folders is ~101px and the artwork overlaps the row below it. */
.cta-stack { position: relative; height: 240px; margin-top: -9px; }
.cta-stack__label {
  position: absolute;
  left: 0;
  width: 60%;
  margin: 0;
  font-family: var(--font-display);
  color: var(--maroon);
  font-size: 17.5px;
  line-height: 27px;
}
.cta-stack__label .muted { display: block; }
/* Every folder is 61x48 in Figma and right-aligned 61px in from the column edge —
   they are NOT three different sizes, and nowhere near the 126/83/100 used before. */
.cta-stack__folder { position: absolute; right: 61px; width: 61px; display: block; transition: transform 0.15s ease; }
.cta-stack__folder img { width: 100%; height: auto; display: block; }
.cta-stack__folder:hover { transform: translateY(-3px); }
@media (max-width: 900px) {
  /* Stacked layout can't overlap, so it falls back to normal flow. */
  .cta-stack { height: auto; display: flex; flex-direction: column; gap: 22px; }
  .cta-stack__label,
  .cta-stack__folder { position: static !important; width: auto !important; }
  .cta-stack__folder { max-width: 126px; }
}
.folder-cta a:hover img { transform: translateY(-3px); }
.folder-cta .body-text,
.folder-cta p {
  font-family: var(--font-display);
  color: var(--maroon);
  font-size: 1.05rem;
  line-height: 1.25;
  text-align: left;
}
.folder-cta strong { font-weight: 400; }
.folder-cta .muted { display: block; }

/* In Figma this heading sits level with the last folder CTA (left of it), not below
   the column — hence the pull-up. Only safe while the columns are side by side. */
/* Sits level with the last folder CTA (Figma puts it at y=941, panel at y=1000). */
.skills__heading { margin-top: 48px; margin-bottom: 11px; font-size: 46px; }
@media (min-width: 901px) { .skills__heading { margin-top: -46px; } }
/* The skills block sits on its own slightly lighter panel, a shade up from the
   page pink — not on the page background. */
/* The panel runs the full content width with almost no inset — Figma's block is
   exactly the 1240 content box, list 560 wide then a 120 gap before the tools. */
.skills {
  background: #faeae8;
  padding: 39px 15px 40px;
  display: grid;
  /* List column is 600 wide (the divider's own width in the export); the tools grid
     starts at x=818, i.e. 100px after it. */
  grid-template-columns: 600px 1fr;
  gap: 100px;
}
@media (max-width: 900px) {
  .skills { grid-template-columns: 1fr; gap: 40px; padding: 32px 20px 36px; }
}
/* Skill titles are Anton 23 (measured 456px against Figma's 453 for the longest one),
   sub-items Inter 16 (444 vs 440), indented 18px under their title. The sub-item box is
   narrower than the column so "…y escalado/" breaks where the design breaks it. */
/* 75px pitch between items in the export (title 32 + sub 22 + 21 gap). */
.skills__list { display: flex; flex-direction: column; gap: 21px; }
.skills__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  line-height: 32px;
  color: var(--maroon);
}
.skills__item span {
  display: block;
  margin-left: 18px;
  max-width: 480px;
  font-size: 16px;
  line-height: 22px;
}
/* Figma draws a rule between the four professional skills and the two languages. */
.skills__item--divider { border-bottom: 1px solid var(--maroon); padding-bottom: 27px; }

.skills__right { display: flex; flex-direction: column; gap: 36px; }
.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 130px));
  gap: 28px 10px;
}
.tool { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tool__icon { width: 60px; height: 60px; object-fit: contain; }
.tool__label { font-size: 0.72rem; font-weight: 700; }
/* Contact button sits under the tool grid, pushed to the right edge. */
.folder-cta--contact { align-self: flex-end; max-width: 250px; gap: 14px; margin-top: auto; }
.folder-cta--contact img { width: 73px; }
.folder-cta--contact p { text-align: right; }

/* =========================================================
   MI VISIÓN — hand-placed stage (frame 5:2, 1440x1028)
   =========================================================
   The spread is a photographed magazine and the article is set on top of it at fixed
   coordinates, so this is a positioned stage, not a grid. Every size below is
   width-matched against the artboard export.

   The big correction over the previous version: the kicker, the author name, the
   pull-quote, the ads heading and the ad-card titles are all ANTON, not bold Inter.
   Solving them as Inter gave sizes whose cap heights were ~40% off what the export
   renders; as Anton, width and cap height agree. */
.vision-stage {
  position: relative;
  width: 1440px;
  max-width: 100%;
  height: 1028px;
  margin: 0 auto;
}
.vision-stage > * { position: absolute; margin: 0; }

/* --- page header --- */
.vision-title {
  left: 186px; top: 80px; width: 172px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 47px;
  line-height: 72px;
  text-transform: uppercase;
  color: var(--maroon);
}
/* 164x41 measured off the pill's own outline in the render, not left to fit-content
   (which came out 168). */
.vision-back {
  left: 190px; top: 152px;
  display: flex;
  box-sizing: border-box;
  width: 164px;
  height: 41px;
  padding: 0 20px;
  white-space: nowrap;
  justify-content: center;
}
/* Anton 15, two lines — both lines solve to 14.88, which is what identifies the face. */
.vision-contact-label {
  left: 1026px; top: 98px; width: 145px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--maroon);
}
/* Same trap as the quote mark: the node is 91x90, the disc it draws is 68.5x66.5 at
   (1153.5,90). */
.vision-contact-btn { left: 1153.5px; top: 90px; width: 68.5px; height: 66.5px; }
.vision-contact-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- the sheet --- */
/* The sheet is 1064x768 at (190,204) — measured off the render, NOT frame 5:7's
   1240x796 box, which is only a container. Filling that box stretched the photograph
   17% horizontally and threw every margin off. */
.vision-paper { left: 190px; top: 204px; width: 1064px; height: 768px; object-fit: fill; }

/* --- left page --- */
/* The headline is the one display element on the site that is near-black and sentence
   case rather than uppercase maroon. */
.vision-article-title {
  left: 220px; top: 242.3px; width: 423px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 35px;
  line-height: 37px;
  text-transform: none;
  color: var(--ink);
}
.vision-kicker {
  left: 220px; top: 320.9px; width: 380px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  color: var(--maroon);
}
.vision-avatar { left: 220px; top: 372px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.vision-author {
  left: 290px; top: 387.2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: var(--maroon);
}
.vision-date {
  left: 425px; top: 392px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: var(--maroon);
}
.vision-rule { left: 290px; top: 411px; width: 227px; height: 1.5px; background: var(--maroon); opacity: 0.55; }

/* --- body copy, both pages --- */
/* Maroon, not black: the core pixels of every body line in the export read (91,27,43).
   Justified, 12/17, in a 423 column on the left page and 458 on the right. */
.vision-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: var(--maroon);
  text-align: justify;
  text-justify: inter-word;
  max-width: none;
}
.vision-body strong { font-weight: 700; }
.vision-body--l1 { left: 220px; top: 437px; width: 423px; }
.vision-body--l2 { left: 220px; top: 624px; width: 423px; }
.vision-body--l3 { left: 220px; top: 724px; width: 423px; }
.vision-body--r1 { left: 754px; top: 262px; width: 458px; }
.vision-body--r2 { left: 754px; top: 438px; width: 458px; }

/* --- pull quote --- */
/* Node 2064:3 is a 62x63 box, but the glyph it renders is only 35.5x30 at (766.5,543)
   — the box carries padding the artwork does not. Sizing to the node made the quote
   mark almost twice as tall as the design. The 0.6px offset is the asset's own 1px
   transparent left margin. */
.vision-quote-mark { left: 765.9px; top: 543px; width: 36.7px; height: 30px; object-fit: fill; }
.vision-quote {
  left: 818px; top: 557px; width: 309px; height: 74px;
  box-sizing: border-box;
  padding: 9.4px 13px;
  background: var(--maroon);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.5px;
}

/* --- ad cards --- */
.vision-ads-heading {
  left: 754px; top: 649.6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: var(--maroon);
}
/* Four 149x104 boxes at x 806/994 and y 683/804 — they do NOT fill the column, which
   runs 754..1211. */
.vision-ad {
  width: 149px;
  height: 104px;
  box-sizing: border-box;
  /* 8.8 rather than the 12 the card's own inset suggests: Anton's line box carries
     ~3px of leading above the caps, so a flat 12 pushed the title 3.2px low. */
  padding: 8.8px 11px;
  background: var(--maroon);
  color: var(--white);
}
.vision-ad h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  margin: 0;
}
.vision-ad p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.4px;
  line-height: 15.5px;
  margin: 6px 0 0;
}

/* Below the artboard width the hand-placed stage cannot hold, so it becomes a stack. */
@media (max-width: 1439px) {
  .vision-stage {
    width: auto;
    height: auto;
    padding: 60px var(--page-pad) 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .vision-stage > * { position: static; left: auto !important; top: auto !important; width: auto !important; }
  .vision-stage img { max-width: 100%; height: auto; }
  .vision-paper { display: none; }
  .vision-title { font-size: clamp(2rem, 6vw, 47px); line-height: 1.1; }
  .vision-body, .vision-quote, .vision-ads-heading { max-width: 660px; }
  .vision-quote { height: auto; }
  .vision-ad { width: 100%; max-width: 300px; height: auto; }
  .vision-rule { width: 227px !important; }
}

/* =========================================================
   CONTÁCTAME
   ========================================================= */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  min-height: 75vh;
  justify-content: center;
}
/* .btn-back and .contact__card used to be direct children of .contact, so its own
   gap:60px sat between them. Wrapping them in .ct-desktop (to pair with .ct-mobile)
   moved that gap to sit between .ct-desktop and .ct-mobile instead — invisible, since
   .ct-mobile is display:none on desktop — which left the button touching the card. */
.ct-desktop { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; }
.contact__card {
  background: var(--paper);
  border-radius: 4px;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
  width: 100%;
}
.contact__row { display: flex; align-items: center; gap: 16px; }
.contact__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--rose-light);
  display: grid; place-items: center;
  color: var(--maroon);
  flex-shrink: 0;
}
.contact__icon svg { width: 20px; height: 20px; }
.contact__value {
  background: var(--white);
  padding: 14px 20px;
  font-weight: 700;
  color: var(--maroon);
  width: 100%;
  text-decoration: none;
  font-size: 0.95rem;
}
.contact__value.link { text-decoration: underline; }
/* On a narrow phone the card's 64px side padding plus the email — one unbreakable
   token — needs more room than the viewport has. `min-width:0` lets the flex item
   shrink below its content, and `overflow-wrap:anywhere` breaks the address rather
   than pushing the page sideways. */
@media (max-width: 560px) {
  .contact__card { padding: 32px 20px; gap: 18px; }
  .contact__row { gap: 12px; }
  .contact__icon { width: 40px; height: 40px; }
  .contact__icon svg { width: 17px; height: 17px; }
  .contact__value {
    min-width: 0;
    padding: 12px 14px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
  }
}
/* Narrower still — this block has to sit AFTER the 560 one: same specificity, so
   source order decides. */
@media (max-width: 360px) {
  .contact__card { padding: 26px 14px; }
  .contact__value { font-size: 0.8rem; padding: 10px 12px; }
}

/* =========================================================
   PROYECTOS hub + subfolder hub
   ========================================================= */
/* Proyectos is presented as a tablet mock-up: the supplied device artwork sits on
   top and the real content is positioned inside its screen cut-out, measured off
   that PNG (screen starts 4.17%/5.86% in and is 91.57% x 88.28% of the image). */
/* The tablet is 1054 wide inside the 1440 frame and centred there — NOT stretched to
   the 1240 content column, which pushed it off-centre and oversized. */
/* 1054 is the SCREEN, not the device. The bezel runs 153..1286 (1133 wide) and the
   exported PNG carries a little shadow bleed, so the image itself is 1150 wide centred
   at x=145 — which lands the screen exactly on 193..1246 / 246..971. */
.device {
  position: relative;
  max-width: 1150px;
  /* Title ends at y=128; the device image starts at 198 so the screen lands on 246. */
  margin: 70px auto 0;
  container-type: inline-size;
}
.device__frame { display: block; width: 100%; height: auto; }
.device__screen {
  position: absolute;
  left: 4.17%;
  top: 5.86%;
  width: 91.57%;
  height: 88.28%;
  /* Back button sits 16px in / 20px down from the screen edge; 161px of air before
     the folder row. All in cqw of the 1150px device. */
  padding: 1.74cqw 1.39cqw;
  display: flex;
  flex-direction: column;
  gap: 14cqw;
  overflow: hidden;
}
.device__screen .btn-back { align-self: flex-start; }
/* The folder row is centred as a group inside the screen, matching Figma. */
.proyectos__folders {
  display: flex;
  justify-content: center;
  /* Art 141 wide on a 295 pitch → 154 gap; the row of three is centred in the screen. */
  gap: 13.39cqw;
  flex-wrap: wrap;
}
.folder-icon { display: flex; flex-direction: column; align-items: flex-start; gap: 1.22cqw; width: 12.26cqw; text-decoration: none; }
/* The folder is the supplied polka-dot artwork, not a drawn shape. */
.folder-icon__art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.15s ease;
}
.folder-icon:hover .folder-icon__art { transform: translateY(-4px); }
.folder-icon__label {
  font-family: var(--font-display);
  color: var(--white);
  text-transform: uppercase;
  text-align: left;
  /* Anton regular 18 on a 27px line. */
  font-size: 1.565cqw;
  line-height: 2.348cqw;
}
.device__screen .btn-back { font-size: 1.33cqw; padding: 1cqw 2cqw; }
.device__screen .btn-back svg { width: 1.3cqw; height: 1.3cqw; }
@media (max-width: 760px) {
  /* Below tablet width the device mock stops being legible — drop the frame and
     show the folders on the maroon panel directly. */
  .device__frame { display: none; }
  .device__screen {
    position: static;
    width: 100%;
    height: auto;
    background: var(--maroon);
    border-radius: 10px;
    padding: 28px 24px 36px;
    gap: 32px;
  }
  .proyectos__folders { gap: 28px; justify-content: center; width: 100%; }
  .folder-icon { width: 130px; align-items: center; }
  .folder-icon__label { font-size: 0.8rem; text-align: center; }
  .device__screen .btn-back { font-size: 0.85rem; padding: 12px 24px; }
  .device__screen .btn-back svg { width: 16px; height: 16px; }
}
/* Dirección de Arte & Campañas: four photographic folder artworks in a 2x2 layout
   (Figma 9:47), positioned in % of the group's own 1261x796 bounding box so the
   overlap survives any width. The Unë artwork is a 414px square rather than a 713x398
   strip, hence its own width; it overhangs the box by 9px at the bottom, as in Figma. */
.dac-folders {
  position: relative;
  margin-top: 46px;
  aspect-ratio: 1261 / 796;
}
.dac-folder { position: absolute; width: 56.54%; display: block; transition: transform 0.15s ease; }
.dac-folder img { width: 100%; height: auto; display: block; }
.dac-folder:hover { transform: translateY(-6px); }
.dac-folder--1 { left: 0;       top: 0;   z-index: 1; }
.dac-folder--2 { left: 43.46%;  top: 0;   z-index: 2; }
.dac-folder--3 { left: 0;       top: 50%; z-index: 3; }
.dac-folder--4 { left: 55.67%;  top: 49.12%; width: 32.83%; z-index: 4; }
@media (max-width: 760px) {
  /* The stagger collapses into a plain stack — overlapping artwork this large is
     unreadable on a phone. */
  .dac-folders { aspect-ratio: auto; display: flex; flex-direction: column; gap: 20px; }
  .dac-folder { position: static; width: 100%; }
  /* 414/713 keeps the Unë folder at the same scale as the other three in the stack. */
  .dac-folder--4 { width: 58.07%; margin-left: 19.3%; }
}

.subfolder__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 32px; }
@media (max-width: 900px) { .subfolder__cards { grid-template-columns: 1fr; } }
.project-card { background: var(--tan); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; transition: transform 0.15s ease; }
.project-card:hover { transform: translateY(-4px); }
.project-card__title { background: var(--white); padding: 16px; font-weight: 700; text-align: center; font-size: 0.95rem; }
.project-card .placeholder { --ph-ratio: 16 / 9; }
.project-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }

/* =========================================================
   CONTENIDO AUDIOVISUAL & EDITORIAL — video case study
   ========================================================= */
/* Figma splits the 1240 column as 840 + 20 + 380, not `1fr + 48 + 380` (which left the
   copy 812 wide). The 28px difference is not cosmetic: it is what makes the lead
   paragraph break where the design breaks it, and what lets the first column label wrap
   onto two lines as "MAÑANA (URBANO/ CORPORATIVO):". */
.audiovisual__top {
  display: grid;
  grid-template-columns: minmax(0, 840px) 380px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .audiovisual__top { grid-template-columns: 1fr; }
}
.audiovisual__main { display: flex; flex-direction: column; gap: 24px; }
.media-strip { display: flex; flex-direction: column; }
.media-strip .placeholder { --ph-ratio: 380 / 270; border-radius: 0; }

.video-embed {
  background: #262121;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.video-embed--portrait { max-width: 420px; margin-left: auto; margin-right: auto; }
.video-embed__top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.video-embed__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--maroon); flex-shrink: 0; }
.video-embed__title strong { display: block; color: var(--white); font-size: 0.95rem; }
.video-embed__title span { color: var(--white); font-size: 0.8rem; opacity: 0.85; }
.video-embed .video-frame { border-radius: 0; }

/* =========================================================
   PROYECTOS PERSONALES — The Unfiltered Valentine
   ========================================================= */
/* Copy column 583 wide on the left, 661-wide moodboard on the right (Figma 12). */
/* =========================================================
   THE UNFILTERED VALENTINE — hand-placed stage (frame 2326:3)
   =========================================================
   Every value width-matched against the 1440x900 artboard export. The old grid version
   ran on the site's default type (title clamped to 64px, copy 15.2/13.6) and on a
   two-column grid the design does not use. */
.tuv-stage {
  position: relative;
  width: 1440px;
  max-width: 100%;
  height: 900px;
  margin: 0 auto;
}
.tuv-stage > * { position: absolute; margin: 0; }

/* Title 271px of ink -> Anton 28, same size as the other case-study titles. */
.tuv-title {
  left: 100px; top: 60px; width: 840px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 39px;
  text-transform: uppercase;
  color: var(--maroon);
}
/* Role line: Inter REGULAR 14 (494px of ink), not the site's bold eyebrow. */
/* top 95.5, not Figma's 112: that put the title-to-subtitle leading at 36.5px where
   every other page runs 20 baseline-to-baseline. 95.5 + the role's own 16px baseline
   offset lands the baseline exactly 20 under the title's. */
.tuv-role {
  left: 100px; top: 95.5px; width: 593px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
}
/* Pill is a flat 200x43 in Figma with 26px of side padding; `display:flex` keeps it out
   of a line box, whose leading would otherwise offset it. */
/* 207 wide against Figma's 200. Figma carries the arrow as a CHARACTER inside its
   148px text run; the site's pill uses a 16px SVG plus an 8px gap, which cannot fit
   inside 200 with the design's 26px side padding — forcing the width just wrapped the
   label onto two lines. The 7px is the same trade already accepted on the other four
   pages (Bling Me runs 232 against 230), and it keeps one back button across the site. */
.tuv-back {
  left: 100px; top: 135.5px;
  display: flex;
  width: fit-content;
  height: 43px;
  padding: 0 26px;
  font-size: 14px;
  white-space: nowrap;
}

/* Body copy is 16.5 on a 23px pitch — the size at which BOTH paragraphs break exactly
   as the export does (588/588/588/588/522 for the second, which has no inline italics
   to muddy the measurement). 16 leaves the last line at 467 and 17 wraps to six. */
.tuv-p,
.tuv-step-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 23px;
  color: var(--ink);
  text-align: justify;
  text-justify: inter-word;
  max-width: none;
}
.tuv-p--1 { left: 100px; top: 287px; width: 583px; }
.tuv-p--2 { left: 100px; top: 468px; width: 588px; }

/* Section head: Anton 28 in a 39px box, like the page title (283px node against 271
   for the title without its colon). Figma sets it at x=102, 2px off the 100 every
   other block uses — kept as-is rather than "corrected". */
/* Anton 28 in a 39px box, like the page title. Figma sets all three at x=102, 2px off
   the 100 every other block uses — kept as-is rather than "corrected". `top` and
   `width` come per-instance from each node. */
.tuv-section {
  left: 102px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 39px;
  text-transform: uppercase;
  color: var(--maroon);
}

.tuv-moodboard { left: 721px; top: 60px; width: 661px; height: 467px; object-fit: contain; }

/* 237px of ink -> Inter 700 16. No underline: the client asked for it off. */
.tuv-enter {
  left: 1052px; top: 581px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--maroon);
  white-space: nowrap;
}
/* The seal carries the link, so the label is plain text and takes no pointer events —
   otherwise it would sit over the seal's hit area at some widths. */
.tuv-enter { pointer-events: none; }
.tuv-seal {
  left: 1276px; top: 538px;
  width: 106px; height: 107px;
  display: block;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.tuv-seal img { width: 100%; height: 100%; display: block; }
.tuv-seal:hover { transform: scale(1.06); }
.tuv-seal:focus-visible { outline: 2px solid var(--maroon); outline-offset: 4px; }

/* Step labels: Inter 700 15 (208 / 160 / 177 / 215 / 180 of ink), uppercase, maroon. */
.tuv-step-label {
  top: 656px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  text-transform: uppercase;
  color: var(--maroon);
}
.tuv-step-label em { font-style: italic; }
.tuv-step-body { top: 696px; }

/* Below the artboard width the hand-placed stage cannot hold, so it becomes a stack. */
@media (max-width: 1439px) {
  .tuv-stage {
    width: auto;
    height: auto;
    padding: 60px var(--page-pad) 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  /* `width:auto !important` below is what un-pins the staged children, but it also
     beats any `width:100%` — so images are capped with max-width, which it cannot
     override, or they fall back to their intrinsic size (the moodboard is 661 native
     and was pushing the page 295px wide on a phone). */
  .tuv-stage > * { position: static; left: auto !important; top: auto; width: auto !important; }
  .tuv-stage img { max-width: 100%; height: auto; }
  .tuv-title { font-size: clamp(1.8rem, 4vw, 28px); }
  /* The stage sets these nowrap so they never break mid-composition; on a phone they
     have to be allowed to wrap or a single heading is wider than the screen. */
  .tuv-section, .tuv-enter { white-space: normal; }
  .tuv-section { font-size: clamp(1.35rem, 6.5vw, 28px); }
  .tuv-moodboard { max-width: 661px; }
  .tuv-seal { width: 106px; height: 107px; align-self: flex-end; }
  .tuv-p, .tuv-step-body { max-width: 661px; }
}

/* =========================================================
   VIDEO PRESENTACIÓN — YouTube-style player shell
   ========================================================= */
/* The real YouTube URL for this clip has not been supplied yet, so the page shows
   the poster frame from Figma with the player chrome around it. Swap `.yt` for an
   iframe (same box) once the link exists — see NOTES.md outstanding items. */
.yt {
  position: relative;
  max-width: 860px;
  margin: 46px auto 0;
  border-radius: 10px;
  overflow: hidden;
  background: #1c1414;
  aspect-ratio: 860 / 484;
}
.yt__poster { width: 100%; height: 100%; object-fit: cover; }
.yt__bar {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
.yt__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--maroon); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem;
  flex-shrink: 0;
}
.yt__meta { display: flex; flex-direction: column; line-height: 1.25; }
.yt__meta strong { color: var(--white); font-size: 0.9rem; }
.yt__meta span { color: rgba(255, 255, 255, 0.8); font-size: 0.78rem; }
.yt__play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 68px;
}
.yt__play svg { width: 100%; height: auto; display: block; }

/* Same chrome, but wrapping a live embed (Sabadell / Audiovisual, where the video
   URL is known) instead of a static poster. */
/* Figma draws this block 1240x380 (a wide letterbox), with a 60px chrome bar on top. */
.yt--wide { aspect-ratio: 1240 / 380; max-width: 1240px; background: #0d0b0b; }
/* Any `.yt` can hold the embed once play is pressed, not just the wide variant. */
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
/* The play control is a real button here (it loads the embed), not just artwork. */
button.yt__play { border: 0; background: none; padding: 0; cursor: pointer; }
.yt--embed .yt__bar { background: none; }
.yt__cta {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  background: rgba(30, 30, 30, 0.92);
  color: var(--white);
  font-size: 0.78rem;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.yt__cta:hover { background: #000; }

/* =========================================================
   CASE STUDY pages (shared shell, accent set per page)
   ========================================================= */
/* Flex column + growing body so the case-study background always reaches the bottom
   of the viewport instead of letting the site's pink body colour bleed through. */
.case { min-height: 100vh; display: flex; flex-direction: column; }
.case__header { background: var(--case-header-bg, var(--pink-bg)); padding: 32px 0; }
.case__header .display { color: var(--case-accent, var(--maroon)); }
.case__header-inner {
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
/* McDonald's is a printed-paper page: the supplied paper artwork is the section
   background and the six die-cut stickers sit in the margins either side of the
   narrow copy column, bleeding slightly off both edges exactly as the original
   does. The stickers are decorative, so they never affect the text flow. */
.case__body { padding: 40px 0 100px; background: var(--case-bg, var(--paper)); flex: 1; position: relative; overflow: hidden; }
/* The paper is the WHOLE page in Figma (y 40 → 1564 of a 1604 frame), title included —
   putting it only behind `.case__body` left the heading and the first two columns
   floating on bare background above the sheet. `background-clip: content-box` with a
   40px vertical padding reproduces the thin band of page colour above and below it. */
/* Measured off the artboard export: the page sits on light grey (#f0f0ef), the title
   and back button are ABOVE the sheet on that grey, and the sheet itself runs
   x 245→1152 of 1440 (17% / 63%) behind the body only. */
.case--paper {
  position: relative;
  overflow: hidden;
  background: #f0f0ef;
}
.case--paper .case__header { background: transparent; padding-top: 53px; }
/* Same pair as above: 26.7 -> 20px leading, with the back button absorbing the 6.7. */
.case--paper .case__header .eyebrow { margin-top: 1.3px; }
.case--paper .case__header .btn-back { margin-top: 38.7px; }
.case--paper .case__body { background: transparent; position: relative; padding-top: 94px; }
/* The sheet is its own layer (cropped out of the photo, which shows it lying on grey)
   stretched over the body's full height, so no line can fall off the paper. */
/* The sheet is sized in px and centred, NOT as a % of the viewport: the copy column is
   a fixed 690px, so a percentage-width sheet shrank faster than its own contents and
   the text spilled off the paper below ~1150px. 907 = 690 copy + 108.5 margin a side. */
.case--paper .case__body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(907px, calc(100% - 24px));
  background-image: url("../assets/images/mcd-sheet.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}
.case--paper .case__body-inner { position: relative; z-index: 1; }
.sticker { position: absolute; height: auto; pointer-events: none; user-select: none; z-index: 2; }
@media (max-width: 860px) { .sticker { display: none; } }
.case__body-inner {
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.case .btn-back { border-color: var(--case-accent, var(--maroon)); color: var(--case-accent, var(--maroon)); }

/* "Paper page" variant (McDonald's): copy sits in a narrow centred column so the
   supplied paper-and-stickers background art has room to breathe in the margins. */
/* Figma sets these two to different widths: the title block runs 882 wide while the
   copy column below it is only 690, so the paper margins stay clear for the stickers. */
.case--paper .case__header-inner { max-width: calc(882px + var(--page-pad) * 2); }
/* Copy column must always stay narrower than the 907px sheet above, including the
   page padding — hence the hard ceiling rather than a padded max-width. */
/* 690 of usable width (Figma: 380..1069), so no side padding may eat into it. */
.case--paper .case__body-inner { max-width: 690px; padding: 0; }

/* Column tracks are Figma's real widths and pitches, not `1fr`: with 1fr the text
   columns landed at 100/524/948 while the images below sat at 100/510/920, so nothing
   lined up down the page. Sabadell: 580x2 @40 gap, 380x3 @30 gap. */
.two-col, .three-col { display: grid; justify-content: start; }
.two-col { grid-template-columns: repeat(2, minmax(0, 580px)); gap: 40px; }
.three-col { grid-template-columns: repeat(3, minmax(0, 380px)); gap: 30px; }
/* McDonald's copy column is only 690 wide: two 333px columns, 24px apart. */
.case--paper .two-col,
.case--paper .phase-grid { grid-template-columns: repeat(2, minmax(0, 331px)); gap: 27px; justify-content: start; }
@media (max-width: 860px) {
  .two-col, .three-col,
  .case--paper .two-col, .case--paper .phase-grid { grid-template-columns: 1fr; }
}
.two-col h3, .phase-grid h3, .case__body-inner > div > h3, .three-col h4, .case .display { color: var(--case-accent, var(--maroon)); }
/* Heading scale differs per case study: Sabadell's section heads are 26px tall boxes
   (~20px type), McDonald's are 41px (~28px). They are not one shared size. */
/* Width-matched against the Sabadell export: "EL PROBLEMA:" 85px, "EL CONCEPTO
   CREATIVO:" 143px and "UNIVERSO VISUAL…" 239px all solve to 16px in Anton. */
.two-col h3, .phase-grid h3, .case__body-inner > div > h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 10px;
}
/* Case-study page titles measure 509px wide in the export → 27.4px. */
.case .display--lg { font-size: 28px; }
.case .three-col h4 { font-size: 13px; }
/* Size derived by matching rendered WIDTH against the export, not by guessing from
   cap height: "EL PROBLEMA DETECTADO:" is 273px and "EL CONTEXTO:" 139px there, and
   both solve to 28px in Anton. (Cap-height maths had put this at 34px — 21% too big,
   which is what wrapped the headings onto two lines.) */
/* h3 inherits the body's 1.5 line-height, which gave a 42px box for 24px of ink and
   pushed every following block up the page. Figma's heading box is ~32. */
.case--paper .two-col h3,
.case--paper .phase-grid h3,
.case--paper .case__body-inner > div > h3 { font-size: 28px; line-height: 1.15; margin-bottom: 14px; }
.three-col h4 { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.three-col p { font-size: 0.85rem; }
/* Case-study copy is MUCH smaller than the site default. Measured off the exports:
   McDonald's runs 13px on an 18px pitch, Sabadell 13px on 19px. The site's 15.2px/25px
   made every block ~39% taller, which is what pushed McDonald's copy off its sheet. */
.case .body-text,
.case .three-col p,
.case .two-col p { text-align: left; max-width: none; font-size: 13px; line-height: 19px; }
/* 13px needs 5.98 line-widths for the right-hand column but wraps to 7 lines; Figma
   fits it in 6, so the body is a shade under 13. */
.case--paper .body-text,
.case--paper .two-col p { font-size: 12.6px; line-height: 18px; }
.case--paper .body-text,
.case--paper .two-col p { text-align: justify; text-justify: inter-word; }

/* Figma sets this 711px wide at ~40px — it is the loudest thing on the page, not a
   slightly-larger paragraph. */
.concept-quote {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-align: center;
  /* Width-matched to the export (674px rendered) → 36px, one line inside the column. */
  font-size: 36px;
  line-height: 1.15;
  color: var(--case-quote-fg, var(--mcd-navy));
  /* Figma: 56px of air above the quote, 64 below. */
  margin: 44px 0 52px;
}
/* Boxed concept quote is a centred pull-quote (~60% of the content column) in the
   reference, NOT a full-width banner. */
/* Figma: 804 wide inside the 1240 column, centred (not a 62% guess). Sabadell's bar
   keeps the smaller size — only McDonald's unboxed quote is set large. */
.concept-quote--box {
  background: var(--case-accent, var(--maroon));
  color: var(--white);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  padding: 16px 22px;
  border-radius: 2px;
  width: 804px;
  max-width: 100%;
  margin: 24px auto;
}
@media (max-width: 860px) { .concept-quote--box { width: 100%; } }

.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .phase-grid { grid-template-columns: 1fr; } }
.phase-grid .placeholder { --ph-ratio: 4 / 3; margin: 12px 0; }
.phase-grid__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 12px 0; border-radius: 4px; }

/* Media row: images sit in their own aligned grid row under a text row, so every
   column's imagery lines up instead of hanging off ragged text of different lengths.
   Figma columns are 380 wide on a 410 pitch (30px gap) and everything is flush LEFT
   inside its column — centring them was throwing the whole row off. */
.media-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  gap: 30px;
  align-items: start;
  justify-content: start;
}
/* Campaign pieces are supplied at mixed aspect ratios; contain keeps every piece
   whole — cropping a layout mock loses the very thing it is showing. */
/* All three phase pieces occupy an identical 380x240 white frame in Figma; letting
   them size to their own aspect ratios made the row ragged. */
.media-row__img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
  background: var(--white);
}
.media-row > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.media-row .swatches { justify-content: flex-start; }
/* The phase row uses a wider 430 pitch (50px gap) than the universo row above it. */
.media-row--fases { gap: 50px; }
/* Logo 280x90 and illustration 200x130 are fixed sizes in Figma, not column-width. */
.sab-logo { width: 280px; max-width: 100%; height: 90px; object-fit: contain; object-position: left; display: block; }
.sab-ilustracion { width: 200px; max-width: 100%; height: 130px; object-fit: contain; object-position: left; display: block; }
@media (max-width: 860px) { .media-row { grid-template-columns: 1fr; } }

/* Figma labels each swatch with its hex underneath — unlabelled dots lost that. */
/* Figma spaces the dots on a 108px pitch (40px circle + 68px gap), starting at 510. */
.swatches { display: flex; gap: 68px; margin-top: 8px; }
.swatch-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swatch-item small { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--ink); }
.swatch { width: 40px; height: 40px; border-radius: 50%; display: block; }

.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame--portrait { aspect-ratio: 9 / 16; }


.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* --- Gallery carousel (Bling Me): four frames visible, scrolls one at a time,
       every frame opens in a lightbox. --- */
.carousel { position: relative; }
.carousel__track {
  /* The animation lives here, not in JS: it degrades cleanly to an instant jump under
     prefers-reduced-motion or when frames are not running. */
  scroll-behavior: smooth;
  /* Keeps the browser from re-anchoring the track when images finish loading. */
  overflow-anchor: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; }
.carousel__item button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 4px;
  overflow: hidden;
}
.carousel__item img {
  width: 100%;
  aspect-ratio: 295 / 220;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.carousel__item button:hover img { transform: scale(1.04); }
.carousel__item button:focus-visible { outline: 2px solid var(--case-accent, var(--maroon)); outline-offset: 3px; }

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--case-accent, var(--maroon));
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
.carousel__nav svg { width: 20px; height: 20px; }
.carousel__nav--prev { left: -14px; }
.carousel__nav--next { right: -14px; }
.carousel__nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .carousel__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .carousel__track { grid-auto-columns: 100%; } }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 16, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(1100px, 88vw); max-height: 86vh; object-fit: contain; border-radius: 4px; }
.lightbox__close,
.lightbox__nav {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.lightbox__nav { width: 52px; height: 52px; font-size: 2rem; line-height: 1; flex-shrink: 0; }
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 700px) {
  /* The arrows are flex siblings of the image, each claiming 52px + gap on top of the
     image's own 88vw — on a phone that total is wider than the screen, so the flex row
     overflows and the arrows get pushed off the visible edge. Taking them out of flow
     and floating them over the image (like any mobile lightbox/carousel) keeps them
     fully on-screen and lets the image use the full width. */
  .lightbox { padding: 12px; gap: 0; }
  .lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__img { max-width: 100%; }
}
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery .placeholder { --ph-ratio: 4 / 3; }
.gallery__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

.grid-3x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.grid-3x3 .placeholder { --ph-ratio: 3 / 4; border-radius: 0; }
.grid-3x3__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; }

/* The brand mark is the supplied artwork, not type — it sits in the corner of the
   right-hand column, never inside the photo gallery below. */
.brand-logo { margin-top: 8px; width: 100%; max-width: 240px; height: auto; align-self: flex-end; }

/* Blocks inside the paper sit ~52px apart, and stacked paragraphs 18px apart. */
.case--paper .case__body-inner { gap: 42px; }
.case--paper .case__body-inner > div > .body-text + .body-text { margin-top: 18px; }
/* Phase images are 331x215 in the export, not 4:3. */
.case--paper .phase-grid h3 { margin-bottom: 6px; }
.case--paper .phase-grid__img { aspect-ratio: 331 / 215; margin: 0 0 21px; }

/* Figma leaves 54px between the concept block and the phases, but only ~24 above it;
   a single flex gap cannot do both, so the phase block carries the difference. */
.case--paper .phase-grid { margin-top: 8px; }

/* --- Phase carousels (McDonald's): one slide per view, 333x216 with dot indicators
       overlaid at the bottom centre, exactly as the Figma slide frames. Clicking a
       slide opens it in the shared lightbox, where the arrows step through them. --- */
.carousel--phase { position: relative; }
.carousel--phase .carousel__track { grid-auto-columns: 100%; gap: 0; }
.carousel--phase .carousel__item img {
  aspect-ratio: 333 / 216;
  border-radius: 4px;
}
.carousel--phase .carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.carousel__dot.is-active { background: #fff; }
.carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* McDonald's header: the whole title is Anton 28 (the parenthetical included) and the
   role line is Inter regular 14 — not the site's bold, faded eyebrow. The title also
   keeps its own casing ("MStudios", "McDonald's"), so the site-wide uppercase on
   `.display` is switched off here. */
.case--paper .case__header h1 { text-transform: none; }
.case--paper .case__header .eyebrow {
  font-weight: 400;
  font-size: 14px;
  opacity: 1;
}

/* =========================================================
   SABADELL — header rhythm, hand-placed media, phase carousels
   ========================================================= */
/* Figma header: title y=60, role y=102, back button y=139. The back button used to sit
   in the body, which opened a ~93px hole between the role line and it. */
.case:not(.case--paper) .case__header { padding: 60px 0 0; }
/* Title-to-subtitle leading is unified across all three case studies at Bling Me's
   20px baseline-to-baseline (it was 30.9 here and 26.7 on McDonald's). Only the
   subtitle moves: the back button's margin absorbs the same amount in the opposite
   direction, so the button — and therefore the whole body below it — does not shift.
   Change these two as a PAIR or the page below will move. */
.case:not(.case--paper) .case__header .eyebrow { margin-top: 2.1px; font-weight: 400; opacity: 1; }
.case:not(.case--paper) .case__header .btn-back { margin-top: 26.9px; }
.case:not(.case--paper) .case__body { padding-top: 50px; }

/* Two-col: 580 wide columns, second one starting at x=763 (an 83px gutter, not 40),
   Both columns share a baseline. */
.case:not(.case--paper) .two-col { gap: 83px; }

/* Three-col tracks land on 100 / 530 / 960 — a 50px gutter, matching the media rows. */
.case:not(.case--paper) .three-col { gap: 50px; }

/* Universo row: Figma positions these three by hand, off the column grid. */
.media-row--universo { position: relative; height: 140px; }
.media-row--universo > * { position: absolute; top: 50px; }
.media-row--universo .sab-logo { left: 16px; width: 280px; height: 90px; object-fit: contain; object-position: left; }
.media-row--universo .swatches { left: 462px; margin: 0; }
.media-row--universo .sab-ilustracion { left: 946px; width: 200px; height: 130px; object-fit: contain; object-position: left; }
@media (max-width: 900px) {
  .media-row--universo { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
  .media-row--universo > * { position: static; }
}

/* Phase carousels: same shell as McDonald's but on the 380x240 media-row cells. */
.media-row--fases { align-items: start; }
.carousel--fase { position: relative; }
.carousel--fase .carousel__track { grid-auto-columns: 100%; gap: 0; }
.carousel--fase .carousel__item img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: var(--white);
  border-radius: 4px;
}
.carousel--fase .carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
}
/* These sit over pale artwork, so the dots need a darker resting state than the
   white-on-photo ones used in the McDonald's carousels. */
.carousel--fase .carousel__dot { width: 5px; height: 5px; background: rgba(0, 0, 0, 0.25); }
.carousel--fase .carousel__dot.is-active { background: var(--case-accent, var(--maroon)); }
.media-row__single .media-row__img { border-radius: 4px; }

/* Sabadell's three-column copy runs on a 17px line, tighter than the 19px used in the
   McDonald's paper column — at 19 each block grew ~30px and dragged the media rows
   below it out of place. */
.case:not(.case--paper) .three-col p { line-height: 17px; }
.case:not(.case--paper) .three-col h4 { margin-bottom: 3px; }

/* Figma's gaps between these blocks are not uniform (40 above "Universo visual",
   ~58 above "Estrategia"), so the two carry their own offset rather than fighting the
   single flex gap. The universo media row is pulled up to sit right under its text,
   where Figma places it. */
.sab-block--universo { margin-top: -18px; }
.sab-block--estrategia { margin-top: 59px; }
.media-row--universo { margin-top: -43px; }
.sab-block--estrategia .media-row--fases { margin-top: 11px; }

/* The PR photo fills its 380x240 frame in the export (real photo on all four edges),
   unlike the teaser/reveal layouts which genuinely sit on white. */
.carousel--single .carousel__item img { object-fit: cover; background: none; }

/* `.media-row > div` puts its children in a flex column with `align-items:flex-start`,
   which made the carousel track shrink to content (322px) instead of filling the 380px
   cell. These are block-level and full width. */
.media-row--fases > .carousel--fase { display: block; width: 100%; }
.media-row--fases > .carousel--fase .carousel__track { width: 100%; }

/* =========================================================
   BLING ME — hand-placed stage, per-page type scale, gallery
   =========================================================
   Measured off the 1440x983 artboard export (10:69). Everything here is scoped to
   `.case--bling` so it cannot reach Sabadell, which shares `.case:not(.case--paper)`. */

/* Header: title y=60 (Anton 26, MIXED case — this is the one case-study title Figma
   does not set in caps), role y=99 (Inter 14), back button y=137. */
.case--bling:not(.case--paper) .case__header { padding: 60px 0 0; }
.case--bling .case__header .display--lg {
  font-size: 28px;
  text-transform: none;
  line-height: 42px;
}
/* `:not(.case--paper)` is here only to outrank Sabadell's identically-targeted rule,
   which was re-applying its own 13px margin and shifting every block below by 13px. */
.case--bling:not(.case--paper) .case__header .eyebrow {
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
  line-height: 17px;
  /* The title's 42px box runs to y=102 but Figma starts the role line at 99 — the two
     boxes overlap by 3. Without this every block below inherits that 3px. */
  margin-top: -3px;
}
/* `display:flex` (not the shared `inline-flex`): as an inline box the pill sat inside a
   line box, whose leading pushed it 5px up and left 16px of descent under the header —
   which is the unexplained gap above the columns. Figma's frame is a flat 230x41. */
.case--bling:not(.case--paper) .case__header .btn-back {
  display: flex;
  width: fit-content;
  height: 41px;
  padding: 0 24px;
  margin-top: 21px;
}
/* Stage top y=197 (Figma moved frame 10:74 from y=241 to 226). */
.case--bling:not(.case--paper) .case__body { padding-top: 19px; padding-bottom: 36px; }
.case--bling .case__body-inner { gap: 0; }

/* --- type scale --- */
/* One size for every section head: Anton 400 17 in a 26px box. Verified against the
   revised artboard, where all five ink widths now agree — EL RETO 50, EJECUCIÓN 193,
   PILARES 212, DATOS 184, GALERIA 114 all solve to 17. (An earlier revision of the
   file had them at two different sizes; that is no longer the case.) */
.case--bling .bling-col h3,
.case--bling .bling-gallery-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--case-accent);
  font-size: 17px;
  line-height: 26px;
  margin: 0;
}
/* Body copy width-matched on two independent paragraphs: both solve to 11.9 -> 12,
   on a 17px pitch. Left-aligned, NOT justified — every line in the export ends at a
   different x (348/344/354/355/316 down the first column). */
.case--bling .body-text,
.case--bling .bling-pillars p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  text-align: left;
  max-width: none;
  margin: 0;
}
/* The pillar labels carry 1.55x the ink density of the body at the same size, so they
   are bold, not regular. */
.case--bling .bling-pillars h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 17px;
  color: var(--ink);
  margin: 0 0 2px;
}

/* --- the stage ---
   Column tracks are 360 / 346 / 340 at x 100 / 500 / 875 (40 and 29px gutters — not a
   single uniform gap), all three flush to the TOP at y=212. The old markup used the
   shared 380x3 `.three-col` with `align-items:center`, which is what put the copy at
   the wrong x and floated it off the top edge. */
/* The three columns, the bodegón panel and the brand mark all carry Figma's +40px
   offset (frame 10:74 sits at x=140, not 100); the gallery heading and the carousel
   below do NOT — they stay flush with the 100px content edge. That is why these
   `left` values are 40 higher than the column tracks themselves (360/346/340). */
.bling-stage { position: relative; height: 750px; }
.bling-stage > * { position: absolute; top: 0; }
.bling-col--left  { left: 40px;  width: 360px; }
.bling-col--right { left: 815px; width: 340px; }
/* Figma's heading boxes are not one height (EL RETO is 26, the rest 23), so the gap
   under each one differs: the left column's copy starts 19px below its head, the
   right column's 16px. These carry the h3 element in the selector purely to outrank
   the `margin: 0` reset above them. */
/* Every gap is the artboard's own: heads sit in a 26px box and the copy under each one
   starts at a different distance (16 / 13 / 9), so these are set per block rather than
   shared. The h3 element is carried in the selector purely to outrank `margin: 0`. */
.case--bling .bling-col--left h3 + .body-text { margin-top: 16px; }
.case--bling .bling-col--right h3 + .body-text { margin-top: 13px; }
.case--bling .bling-col h3.bling-h3--pilares { margin-top: 16px; }
.case--bling .bling-col h3.bling-h3--datos { margin-top: 34px; }
.case--bling .bling-col h3.bling-h3--datos + .body-text { margin-top: 9px; }
/* Figma clips each pillar's copy to two lines (its frames are a fixed 53px tall and
   overflow is hidden), which is why the design shows "…frutas, velas, copas," ending
   mid-sentence. The copy ships COMPLETE here, so the block runs taller than the
   artboard and the gap is tightened to 8 to hold the rest of the rhythm. */
.bling-pillars { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }

/* The bodegón starts 16px above the copy and is a fixed 346x497 in Figma. */
.bling-bodegon { left: 440px; top: -16px; width: 346px; height: 497px; object-fit: contain; }
/* The brand mark is a direct child of the artboard at x=925 — off the column grid, and
   overlapping the bottom of the right-hand column by a few px. */
.bling-logo { left: 865px; top: 308px; width: 240px; height: 115px; object-fit: contain; object-position: left; }
.bling-gallery-title { left: 0; top: 471px; }
.carousel--bling { left: 0; top: 530px; width: 100%; }

/* Gallery: 4 of 11 frames visible, 295x220 cells on a 20px gap (4*295 + 3*20 = 1240). */
.carousel--bling .carousel__item img { aspect-ratio: 295 / 220; height: 220px; }
/* Eleven dots, 5px on an 8px pitch, centred over the foot of the row. */
.carousel--bling .carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 2;
}
/* Measured off the export by solving each dot against its own backdrop: the four
   on-screen frames read ~0.89 white, the seven off-screen ones ~0.45. */
.carousel--bling .carousel__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
}
.carousel--bling .carousel__dot.is-active { background: rgba(255, 255, 255, 0.9); }
/* Figma puts the chevron inside the last frame, 18px off its right edge. */
.carousel--bling .carousel__nav--next { right: 18px; }
.carousel--bling .carousel__nav--prev { left: 18px; }

/* Below the artboard width the hand-placed stage cannot hold, so it becomes a stack. */
@media (max-width: 1279px) {
  .bling-stage { height: auto; display: flex; flex-direction: column; gap: 32px; }
  .bling-stage > * { position: static; }
  .bling-stage img { max-width: 100%; height: auto; }
  .bling-col--left, .bling-col--right { width: 100%; }
  .bling-bodegon { width: 100%; max-width: 346px; height: auto; }
  .bling-logo { width: 240px; height: auto; }
}

/* =========================================================
   CONTENIDO AUDIOVISUAL & EDITORIAL — type scale (frame 13:2)
   =========================================================
   Every size width-matched against the artboard export, not inherited from the site
   defaults (which had the title at 35.2 and the copy at 15.2/13.6). Scoped to this
   page: `.display--*`, `.eyebrow`, `.three-col h4` and `.three-col p` are shared with
   Sabadell and Bling Me, so none of these may be set globally. */

/* Title and all three section heads are ONE size — 28px of Anton. Ink widths in the
   export: 376 (title), 84 (EL RETO:), 449 (DIRECCIÓN DE ARTE…), 306 (POSTPRODUCCIÓN…),
   all solving to 27.5-27.9. */
.audiovisual__main .display--lg,
.audiovisual__main .display--md {
  font-size: 28px;
  line-height: 39px;
  color: var(--maroon);
}
/* Role line is Inter REGULAR here, not the site's bold eyebrow, and full opacity.
   The negative margin pulls the title-to-subtitle leading onto the same 20px
   baseline-to-baseline used by the three case studies (it was 47.5 here, because the
   column's 24px flex gap stacks on top of the title's 39px line box). As on those
   pages the back button absorbs the same amount, so only the subtitle moves and
   nothing below it shifts — change the two together or the page will move. */
.audiovisual__main .eyebrow {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  opacity: 1;
  color: var(--ink);
  margin-top: -27.5px;
}
/* The pill sat 56.5px below the subtitle's baseline where Bling Me has 24 (Sabadell
   32, McDonald's 44) — by far the loosest header on the site. Pulling it up 32.5 puts
   it on Bling Me's spacing, which is also what this page's own artboard implies: Figma
   has the button 19px under the role box here and 21px on Bling Me.
   The block that follows gives the 32.5 back, so "EL RETO:" and everything under it
   stay exactly where they were — only the button moves. That also restores the
   design's proportion: tight under the subtitle, roomier before the first section. */
.audiovisual__main .btn-back { margin-top: -5px; }
.audiovisual__main .btn-back + div { margin-top: 32.5px; }
/* The lead paragraph is 16.3 — the only non-round size on the site, and deliberately
   so: it is the value that reproduces Figma's line breaks exactly, leaving "las
   propias prendas." alone on line three at 155px. 16 breaks it after "propias" (127px)
   and 17 pulls "como" down (212px). Justified, matching the export, where lines 1 and
   2 both run the full 838px of the column. */
.audiovisual__main > div > .body-text {
  font-size: 16.3px;
  line-height: 23px;
  max-width: none;
}
/* Column labels: Inter 700 15, UPPERCASE and maroon — the design sets all three,
   and the page was rendering them sentence-case in ink. */
.audiovisual__main .three-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0;
}
/* Three 260px tracks 30px apart (260*3 + 30*2 = 840), which is what the design uses —
   the shared `.three-col` 380px tracks were collapsing to 250.7 in this column.
   NOTE: this selector (0,2,0) outranks the shared `@media (max-width:860px)` rule that
   collapses `.three-col` (0,1,0), so the stacking has to be repeated here or the three
   tracks survive down to phone widths — at 390px they became 94px each and words like
   "TRANSICIONES" overflowed the page. */
.audiovisual__main .three-col { grid-template-columns: repeat(3, minmax(0, 260px)); gap: 30px; }
@media (max-width: 860px) {
  .audiovisual__main .three-col { grid-template-columns: 1fr; gap: 24px; }
}
/* Column copy: Inter 14 on a 19.6 pitch (98px boxes of five lines), ragged right. */
.audiovisual__main .three-col p {
  font-size: 14px;
  line-height: 19.6px;
  text-align: left;
}

/* =========================================================
   ZARA — THE UNFILTERED VALENTINE e-commerce (frame 2208:5)
   =========================================================
   1440x4936, every element hand-placed, so this is a positioned stage. Type comes
   straight from the design's own definitions (get_design_context on the text nodes):
   Archivo Black for the headings, Inter 500/600/700 for the rails, Pinyon Script for
   the quote. An earlier pass had guessed Inter-plus-letter-spacing from cap heights;
   it measured close but was the wrong face. Ask Figma for the font — do not infer it. */
.zara-body { background: #f7dfdd; }
.zara-stage {
  position: relative;
  /* NO `max-width:100%` here: it would shrink the box before the script's scale is
     applied, scaling the artboard twice. The script alone does the fitting. */
  width: 1440px;
  height: 4936px;
  background: #f7dfdd;
  overflow: hidden;
  --zara-red: #c82a1d;
}
.zara-stage > *, .zara-scene > * { position: absolute; margin: 0; }

/* --- header --- */
.zara-header { left: 0; top: 0; width: 1440px; height: 130px; }
.zara-burger { position: absolute; left: 40px; top: 59px; width: 24px; height: 12px; display: block; }
.zara-burger span { position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--zara-red); }
.zara-burger span:nth-child(1) { top: 3.5px; }
.zara-burger span:nth-child(2) { top: 8.5px; }
/* The two ways back out of the store are the store's own furniture: the hamburger and
   the |00| PROLEGÓMENO entry. Both only reveal themselves on hover/focus, so the
   composition is untouched until someone goes looking for the exit. */
.zara-burger span { transition: width 0.18s ease; }
.zara-burger:hover span:nth-child(1),
.zara-burger:focus-visible span:nth-child(1) { width: 24px; }
.zara-burger:hover span:nth-child(2),
.zara-burger:focus-visible span:nth-child(2) { width: 14px; }
.zara-burger:focus-visible { outline: 1px solid var(--zara-red); outline-offset: 6px; }
.zara-cats a:focus-visible { outline: 1px solid var(--zara-red); outline-offset: 3px; }
.zara-campaign {
  position: absolute; left: 104px; top: 44px;
  font-family: "Archivo Black", var(--font-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--zara-red);
}
.zara-search {
  position: absolute; left: 1350px; top: 51px;
  font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 15px;
  text-transform: uppercase; color: var(--zara-red);
}

/* --- left rail --- */
.zara-cats { left: 40px; top: 163px; display: flex; flex-direction: column; }
/* Categories are Inter MEDIUM 11 on a 25px pitch (13px box + 12px gap); the two
   filters below them are Inter BOLD at the same size. */
.zara-cats a,
.zara-filter {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--zara-red);
  text-decoration: none;
}
.zara-filter { font-weight: 700; }
.zara-cats a:hover { text-decoration: underline; }
.zara-filter { position: absolute; left: 40px; line-height: 15px; }
.zara-filter--1 { top: 352px; }
.zara-filter--2 { top: 375px; }

.zara-hero { left: 450px; top: 345.5px; width: 640px; height: 480px; object-fit: cover; }

/* --- right rail --- */
.zara-utils {
  left: 1120px; top: 163px; width: 280px;
  list-style: none; padding: 0;
  text-align: right;
  font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 25px;
  text-transform: uppercase; color: var(--zara-red);
}
.zara-utils li:first-child { font-weight: 600; }
.zara-utils a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.zara-utils a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zara-utils a:focus-visible { outline: 1px solid var(--zara-red); outline-offset: 3px; }
/* Live Pinyon Script now, not a cropped image. */
.zara-quote {
  left: 1132px; top: 897px; width: 260px;
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  text-align: right;
  color: var(--zara-red);
}

/* Rotated -90deg. Laid out unrotated at 571x240 and offset so the ROTATED box lands
   at (-8, 490) 240x571 — rotation about the centre keeps the midpoint fixed, so
   left = 112 - 571/2 and top = 775.5 - 240/2. */
.zara-wordmark {
  left: -173.5px; top: 655.5px;
  width: 571px; height: 240px;
  transform: rotate(-90deg);
  z-index: 2;
}

/* --- scenes --- */
.zara-scene { left: 0; width: 1440px; height: 779px; overflow: hidden; }
.zara-scene--1 { top: 1041px; background: #000; }
.zara-scene--2 { top: 1820px; background: #f7dfdd; }
.zara-scene--3 { top: 2599px; background: #000; }
.zara-scene--4 { top: 3378px; background: #2b080a; }
.zara-scene--5 { top: 4157px; background: #f7dfdd; }
/* Scene backgrounds carry the script pattern; the tiles that sit on top of them were
   painted out before export so nothing shows through at the seams. */
.zara-bg { left: 0; top: 0; width: 1440px; height: 779px; }

.zara-escena {
  left: 50px; top: 33px;
  font-family: "Archivo Black", var(--font-body); font-weight: 400;
  font-size: 18px; line-height: normal; letter-spacing: 3px;
  text-transform: uppercase; color: var(--zara-red);
}
.zara-title {
  left: 213px; top: 27px;
  font-family: "Archivo Black", var(--font-body); font-weight: 400;
  font-size: 30px; line-height: 1.1;
  text-transform: uppercase; color: var(--zara-red);
  white-space: nowrap;
}
/* Scene 1's title is the only one Figma sets untracked; the four longer ones carry
   -1px, which is exactly the 26-40px they were running wide. */
.zara-scene--2 .zara-title,
.zara-scene--3 .zara-title,
.zara-scene--4 .zara-title,
.zara-scene--5 .zara-title { letter-spacing: -1px; }

/* Editorial and product tiles sit on the same 338px column pitch / 193px row pitch in
   every scene, so the placement classes are shared. */
.zara-ed--wide { left: 50px; top: 95px; width: 664px; height: 374px; }
.zara-ed--s2   { left: 50px; top: 95px; width: 699px; height: 392px; }
.zara-t--a1 { left: 726px;  top: 95px;  width: 326px; height: 181px; }
.zara-t--a2 { left: 1064px; top: 95px;  width: 326px; height: 181px; }
.zara-t--a3 { left: 726px;  top: 288px; width: 326px; height: 181px; }
.zara-t--a4 { left: 1064px; top: 288px; width: 326px; height: 181px; }
.zara-t--b1 { left: 50px;   top: 499px; width: 326px; height: 240px; }
.zara-t--b2 { left: 388px;  top: 499px; width: 326px; height: 240px; }
.zara-t--b3 { left: 726px;  top: 499px; width: 326px; height: 240px; }
.zara-t--b4 { left: 1064px; top: 499px; width: 326px; height: 240px; }
.zara-cupid { left: 1102px; top: 452px; width: 408px; height: 408px; }

/* Scene 4 runs on its own grid and its own split background. */
.zara-velvet  { left: 0; top: 0; width: 938px; height: 779px; }
.zara-s4photo { left: 938px; top: 0; width: 502px; height: 779px; }
.zara-t--s4a { left: 183px; top: 230px; width: 326px; height: 181px; }
.zara-t--s4b { left: 521px; top: 230px; width: 326px; height: 181px; }
.zara-t--s4c { left: 183px; top: 423px; width: 326px; height: 181px; }
.zara-t--s4d { left: 521px; top: 423px; width: 326px; height: 181px; }

/* Below the artboard width the stage scales down as a whole rather than reflowing —
   the composition is a fixed editorial layout, not a fluid grid. */
.zara-stage { transform-origin: top left; }
.zara-body { margin: 0; overflow-x: hidden; }

/* =========================================================
   PROYECTOS — phone (frame 2131:174)
   =========================================================
   The mobile artboard drops the tablet mock-up entirely and lists the three folders as
   cards. Values taken from the design's own definitions, not inferred. */
.proy-mobile { display: none; }
@media (max-width: 700px) {
  .proy-desktop { display: none; }
  .proy-mobile { display: flex; flex-direction: column; gap: 28px; }
  /* The artboard pads 40/20, not the site's 80/24/100. */
  .proy-page { padding: 40px 20px; }

  .proy-m-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .proy-m-head h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 36px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--maroon);
    margin: 0;
  }
  /* Figma's 36 and 92 are the OUTER boxes (it strokes inside), so these are set as
     border-box heights rather than left to padding + line-height, which came out 7px
     and 2px over and pushed the whole stack down. */
  .proy-m-back {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 16px;
    line-height: 1;
    border: 1.5px solid var(--maroon);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--maroon);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
  }

  .proy-m-stack { display: flex; flex-direction: column; gap: 20px; }
  .proy-m-stack a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 92px;
    gap: 16px;
    padding: 0 16px;
    border: 1px solid var(--maroon);
    border-radius: 12px;
    background: var(--white);
    text-decoration: none;
  }
  .proy-m-stack img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
  .proy-m-stack span {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--maroon);
  }
  .proy-m-stack a:focus-visible,
  .proy-m-back:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   SOBRE MÍ — phone (frame 2131:28)
   =========================================================
   A single column of blocks on a 28px rhythm, 40/20 page padding. Nothing is shared
   with the desktop three-column spread, so the two markups are separate and only one
   is ever displayed. */
.sm-mobile { display: none; }
@media (max-width: 700px) {
  .sm-desktop { display: none; }
  .sm-mobile { display: flex; flex-direction: column; gap: 28px; }
  .sm-page { padding: 40px 20px; }

  .sm-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .sm-head h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .sm-back {
    display: inline-flex; align-items: center; box-sizing: border-box; height: 36px;
    padding: 0 16px; line-height: 1;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
  }

  .sm-bio { display: flex; flex-direction: column; gap: 12px; }
  .sm-bio h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; color: var(--maroon); text-transform: none;
  }
  .sm-bio p {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px;
    line-height: 1.45; color: #141414; text-align: left; max-width: none;
  }

  .sm-video { width: 100%; height: 650px; object-fit: cover; border-radius: 8px; display: block; }

  /* The pull-quote is its own maroon card here, not a box beside a column. */
  .sm-quote {
    position: relative; margin: 0;
    box-sizing: border-box; min-height: 150px; padding: 20px;
    background: var(--maroon); border-radius: 12px;
    font-family: var(--font-display); font-weight: 400; font-size: 16px;
    line-height: 1.4; color: var(--white);
  }
  .sm-quote-mark {
    position: absolute; left: 20px; top: -34px;
    font-family: "Arapey", Georgia, serif; font-size: 120px; line-height: 1;
    color: var(--white); pointer-events: none;
  }

  .sm-nav { display: flex; flex-direction: column; gap: 24px; padding-top: 16px; }
  .sm-nav-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-sizing: border-box; padding: 16px;
    border: 1px solid var(--maroon); border-radius: 12px;
    background: var(--white); text-decoration: none;
  }
  .sm-nav-text { display: flex; flex-direction: column; gap: 4px; flex: 1 0 0; min-width: 0; }
  .sm-nav-text strong {
    font-family: var(--font-display); font-weight: 400; font-size: 14px;
    line-height: normal; color: var(--maroon);
  }
  .sm-nav-text small { font-family: var(--font-body); font-size: 12px; color: #141414; }
  .sm-nav-folder { width: 54px; height: 64px; object-fit: contain; flex-shrink: 0; }

  .sm-skills { display: flex; flex-direction: column; gap: 16px; }
  .sm-skills h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .sm-bullets {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.33);
  }
  .sm-bullet {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16px;
    line-height: normal; color: var(--maroon);
  }
  .sm-sub {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px;
    line-height: normal; color: #141414; padding-left: 10px;
  }
  .sm-rule { display: block; height: 1px; background: rgba(91, 27, 43, 0.25); }

  /* Three 110px tiles per row on a 350px column, wrapping. */
  .sm-tools { display: flex; flex-wrap: wrap; gap: 10px; }
  .sm-tool {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-sizing: border-box; width: 110px; padding: 8px;
    background: var(--white); border-radius: 8px;
  }
  .sm-tool img { width: 40px; height: 40px; object-fit: contain; }
  .sm-tool span {
    font-family: var(--font-body); font-weight: 700; font-size: 10px;
    line-height: normal; color: #141414; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .sm-contact { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
  .sm-contact p {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px;
    line-height: normal; color: var(--maroon);
  }
  .sm-contact img { width: 54px; height: 64px; object-fit: contain; display: block; }

  .sm-back:focus-visible, .sm-nav-row:focus-visible,
  .sm-contact a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   CONTÁCTAME — phone (frame 2131:151)
   =========================================================
   Back pill on its own row, then one bordered card with the three channels as
   icon + value pairs. The desktop card is a different composition, so the two
   markups are separate and only one is displayed. */
.ct-mobile { display: none; }
@media (max-width: 700px) {
  .ct-desktop { display: none; }
  .ct-mobile { display: flex; flex-direction: column; gap: 32px; width: 100%; }
  .ct-page { padding: 40px 20px; }
  .contact { min-height: 0; gap: 0; align-items: stretch; justify-content: flex-start; }

  .ct-back {
    align-self: flex-start;
    display: inline-flex; align-items: center; box-sizing: border-box; height: 36px;
    padding: 0 16px; line-height: 1;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
  }

  .ct-card {
    display: flex; flex-direction: column; gap: 20px;
    box-sizing: border-box; padding: 24px;
    background: var(--paper); border: 1px solid var(--maroon); border-radius: 12px;
    overflow: clip;
  }
  .ct-card h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .ct-name {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; color: var(--maroon);
  }

  .ct-row { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .ct-icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: var(--radius-pill);
    background: #faded9; color: var(--maroon);
  }
  .ct-icon svg { width: 17px; height: 17px; }
  .ct-icon--in { font-family: var(--font-body); font-weight: 700; font-size: 14px; }
  .ct-value {
    flex: 1 0 0; min-width: 0;
    padding: 12px; background: var(--white); border-radius: 6px;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    line-height: normal; color: var(--maroon);
    overflow-wrap: anywhere;
  }
  .ct-value--link { text-decoration: underline; }
  .ct-back:focus-visible, .ct-row:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   MI VISIÓN — phone (frame 2131:114)
   =========================================================
   The magazine spread collapses to one white card holding the whole article; the
   pull-quote and the four ad boxes become maroon blocks inside it. */
.mv-mobile { display: none; }
@media (max-width: 700px) {
  .vision-stage { display: none; }
  .mv-mobile {
    display: flex; flex-direction: column; gap: 24px;
    padding: 40px 20px; background: var(--pink-bg);
  }

  .mv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .mv-head h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .mv-back {
    display: inline-flex; align-items: center; box-sizing: border-box; height: 36px;
    padding: 0 16px; line-height: 1;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
  }

  .mv-card {
    display: flex; flex-direction: column; gap: 20px;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid var(--maroon); border-radius: 12px;
    overflow: clip;
  }
  .mv-art-head { display: flex; flex-direction: column; gap: 8px; }
  .mv-art-head h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px;
    line-height: normal; text-transform: none; color: #141414;
  }
  .mv-kicker {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 13px;
    line-height: normal; color: var(--maroon);
  }

  .mv-author { display: flex; align-items: center; gap: 12px; }
  .mv-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .mv-author-col { display: flex; flex-direction: column; gap: 2px; flex: 1 0 0; min-width: 0; }
  .mv-author-col strong {
    font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--maroon);
  }
  .mv-author-col small { font-family: var(--font-body); font-size: 10px; color: var(--maroon); }
  .mv-author-rule { display: block; height: 1.5px; background: rgba(91, 27, 43, 0.35); }

  .mv-body { display: flex; flex-direction: column; gap: 16px; }
  .mv-body > p {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: 1.45; color: var(--maroon);
    text-align: justify; text-justify: inter-word; max-width: none;
  }
  /* Figma leaves the closing paragraph ragged while the four above it are justified. */
  .mv-body > p.mv-p--ragged { text-align: left; }
  .mv-body strong { font-weight: 700; }

  .mv-highlight {
    position: relative; margin: 0;
    box-sizing: border-box; padding: 14px;
    background: var(--maroon); border-radius: 6px;
    font-family: var(--font-display); font-weight: 400; font-size: 13px;
    line-height: 1.4; color: var(--white);
  }
  .mv-quote-mark {
    position: absolute; left: 0; top: -26px;
    font-family: "Arapey", Georgia, serif; font-size: 80px; line-height: 1;
    color: var(--pink-bg); pointer-events: none;
  }

  /* Carries the element in the selector: `.mv-body > p` above is (0,1,1) and would
     otherwise win over a lone class and render this in Inter 13. */
  .mv-body > p.mv-ads-head {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px;
    line-height: normal; color: var(--maroon); text-align: left;
  }
  .mv-ads { display: flex; flex-direction: column; gap: 10px; }
  /* Figma draws the fourth box at radius 8 with no underline while the other three are
     radius 6 and underlined — an obvious slip, so all four are set alike here. */
  .mv-ad {
    display: flex; flex-direction: column;
    box-sizing: border-box; padding: 12px;
    background: var(--maroon); border-radius: 6px; color: var(--white);
  }
  .mv-ad strong {
    font-family: var(--font-display); font-weight: 400; font-size: 12px;
    line-height: normal; text-decoration: underline;
  }
  .mv-ad span { font-family: var(--font-body); font-weight: 400; font-size: 10px; line-height: normal; }

  .mv-cta { display: flex; align-items: center; gap: 16px; padding: 16px; }
  .mv-cta p {
    margin: 0; flex: 1 0 0; font-family: var(--font-display); font-weight: 400;
    font-size: 14px; line-height: normal; color: var(--maroon);
  }
  .mv-cta img { width: 80px; height: 80px; object-fit: contain; border-radius: 40px; display: block; }
  .mv-back:focus-visible, .mv-cta a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   DIRECCIÓN DE ARTE & CAMPAÑAS — phone (frame 2131:406)
   =========================================================
   Three stacked cards: a 43:24 image over a two-line caption. This is the one mobile
   artboard set in DM Sans instead of Inter, so the two body runs here use it. The
   artboard also carries a mock iOS status bar ("9:41", signal, battery) — deliberately
   NOT reproduced, since the real phone already draws one. */
.dac-mobile { display: none; }
@media (max-width: 700px) {
  .dac-desktop { display: none; }
  .dac-mobile { display: flex; flex-direction: column; gap: 28px; }
  .dac-page { padding: 20px 20px 40px; }

  .dac-m-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .dac-m-head h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px;
    line-height: 1.1; text-transform: uppercase; color: var(--maroon);
  }
  .dac-m-back {
    display: inline-flex; align-items: center; box-sizing: border-box; height: 36px;
    padding: 0 18px; line-height: 1;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
  }

  .dac-m-stack { display: flex; flex-direction: column; gap: 32px; }
  .dac-m-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
  .dac-m-card img {
    display: block; width: 100%; aspect-ratio: 43 / 24;
    object-fit: cover; border-radius: 8px;
  }
  .dac-m-meta { display: flex; flex-direction: column; gap: 4px; }
  .dac-m-meta strong {
    font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .dac-m-meta small {
    font-family: "DM Sans", var(--font-body); font-weight: 400; font-size: 13px;
    line-height: normal; color: #141414;
  }
  .dac-m-back:focus-visible, .dac-m-card:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   CASE STUDY MSTUDIOS — phone (frame 2131:438)
   =========================================================
   The paper-and-stickers spread becomes a stack of white cards on the same #f0f0ef
   ground, with the six stickers reduced to four in two rotated rows. Body copy on this
   artboard is DM Sans, like the DA & Campañas one. */
.mcd-mobile { display: none; }
@media (max-width: 700px) {
  .mcd-desktop { display: none; }
  body:has(.mcd-mobile) { background: #f0f0ef; }
  .mcd-mobile {
    display: flex; flex-direction: column; gap: 28px;
    padding: 24px 20px 40px; background: #f0f0ef;
  }

  .mcd-m-back {
    align-self: flex-start;
    display: inline-flex; align-items: center; box-sizing: border-box; height: 36px;
    padding: 0 16px; line-height: 1;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 12px;
    text-decoration: none; white-space: nowrap;
    margin-bottom: -12px;
  }
  .mcd-m-titles { display: flex; flex-direction: column; gap: 8px; }
  .mcd-m-titles h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: 1.15; text-transform: none; color: var(--maroon);
  }
  .mcd-m-role {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: normal; color: #141414;
  }

  .mcd-m-card {
    display: flex; flex-direction: column; gap: 12px;
    box-sizing: border-box; padding: 18px;
    background: var(--white); border: 1px solid #e5e5e3; border-radius: 12px;
  }
  .mcd-m-card h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .mcd-m-card p, .mcd-m-fase p {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: 1.45; color: #141414;
    text-align: left; max-width: none;
  }

  /* The concept sits on the paper cream with a maroon rule, quote centred in navy. */
  .mcd-m-concept {
    display: flex; flex-direction: column; gap: 12px;
    box-sizing: border-box; padding: 20px;
    background: #faf2e0; border: 1.5px solid var(--maroon); border-radius: 12px;
  }
  .mcd-m-concept h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .mcd-m-concept p {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16.5px;
    line-height: 1.3; text-transform: uppercase; text-align: center; color: #172659;
  }

  /* Each sticker keeps the artboard's own box and tilt; `contain` lets the artwork
     sit inside without distorting its own proportions. */
  .mcd-m-stickers { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
  .mcd-m-st { object-fit: contain; }
  .mcd-m-st--patatas  { width: 90px;  height: 102px; transform: rotate(-4deg); }
  .mcd-m-st--burger   { width: 90px;  height: 68px;  transform: rotate(6deg); }
  .mcd-m-st--chaqueta { width: 110px; height: 118px; transform: rotate(-8deg); }
  .mcd-m-st--arcos    { width: 80px;  height: 72px;  transform: rotate(5deg); }

  .mcd-m-fase { display: flex; flex-direction: column; gap: 14px; }
  .mcd-m-fase h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .carousel--m .carousel__item img { height: 200px; object-fit: contain; background: none; border-radius: 4px; }

  .mcd-m-camiseta { display: flex; justify-content: center; }
  .mcd-m-camiseta img { width: 200px; height: 207px; object-fit: contain; }
  .mcd-m-back:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   CASE STUDY BANCO SABADELL — phone (frame 2131:504)
   =========================================================
   Light-grey ground with white rounded cards, the concept as a solid blue banner and
   the three phases as cards. Blue is the Sabadell corporate #0067ff throughout. */
.sab-mobile { display: none; }
@media (max-width: 700px) {
  .sab-desktop { display: none; }
  body:has(.sab-mobile) { background: #f4f5f6; }
  .sab-mobile {
    display: flex; flex-direction: column;
    padding: 16px 20px 48px; background: #f4f5f6;
    --sab: #0067ff;
  }

  .sab-m-back {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    border: 1.5px solid var(--sab); border-radius: var(--radius-pill);
    background: var(--white); color: var(--sab);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
  }
  .sab-m-title { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 24px; }
  .sab-m-title h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: 1.1; text-transform: uppercase; color: var(--sab);
  }
  .sab-m-role {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: normal; color: #141414;
  }

  .sab-m-stack { display: flex; flex-direction: column; gap: 24px; }
  .sab-m-card {
    display: flex; flex-direction: column; gap: 12px;
    box-sizing: border-box; padding: 20px;
    background: var(--white); border: 1px solid #eaeaea; border-radius: 16px;
  }
  .sab-m-card h2, .sab-m-h {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; text-transform: uppercase; color: var(--sab);
  }
  .sab-m-card p {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: 1.5; color: #141414; text-align: left; max-width: none;
  }
  .sab-m-lead {
    margin: 0; font-family: var(--font-body); font-size: 12px; line-height: 1.4;
    color: #141414; text-align: center;
  }
  .sab-m-banner {
    margin: 0; box-sizing: border-box; padding: 24px;
    background: var(--sab); border-radius: 16px;
    font-family: var(--font-display); font-weight: 400; font-size: 22px;
    line-height: 1.2; text-transform: uppercase; text-align: center; color: var(--white);
  }
  .sab-m-after {
    margin: 0; font-family: var(--font-body); font-size: 12px; line-height: normal;
    color: rgba(20, 20, 20, 0.8); text-align: center;
  }
  .sab-m-rule { display: block; height: 1px; background: #eaeaea; }
  .sab-m-sub { display: flex; flex-direction: column; gap: 4px; }
  .sab-m-sub h3 {
    margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 14px;
    line-height: normal; color: var(--sab); text-transform: none;
  }
  .sab-m-sub p {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: 1.4; color: #141414;
  }
  .sab-m-logo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .sab-m-logo img { width: 260px; max-width: 100%; height: 84px; object-fit: contain; }
  .sab-m-logo figcaption { font-family: var(--font-body); font-size: 11px; color: #666; }
  .sab-m-swatches { display: flex; align-items: center; gap: 16px; }
  .sab-m-swatches span {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 11px; color: #666;
  }
  .sab-m-swatches i { width: 24px; height: 24px; border-radius: 50%; display: block; }
  .sab-m-illus { width: 100%; height: 160px; object-fit: contain; border-radius: 8px; }

  .sab-m-phases { display: flex; flex-direction: column; gap: 16px; }
  .sab-m-h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px;
    line-height: normal; text-transform: uppercase; color: #141414;
  }
  .sab-m-phase {
    display: flex; flex-direction: column; gap: 16px;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid #eaeaea; border-radius: 16px;
  }
  .sab-m-phase-n {
    margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 12px;
    text-transform: uppercase; color: var(--sab);
  }
  .sab-m-phase-t {
    margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 18px;
    color: #141414;
  }
  .sab-m-phase > p:last-child {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: 1.5; color: #141414;
  }
  /* Phase frames are 180 tall on this artboard rather than the desktop's 240. */
  .carousel--m2 .carousel__item img { height: 180px; object-fit: cover; border-radius: 8px; background: none; }
  .sab-m-phase-n + .sab-m-phase-t { margin-top: -12px; }

  .sab-m-video { display: flex; flex-direction: column; gap: 12px; }
  .sab-m-video a {
    display: flex; align-items: center; justify-content: center;
    height: 200px; border-radius: 12px; background: #171717; text-decoration: none;
  }
  .sab-m-play {
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--white); color: #171717;
  }
  .sab-m-play svg { width: 24px; height: 24px; }
  .sab-m-back:focus-visible, .sab-m-video a:focus-visible { outline: 2px solid var(--sab); outline-offset: 3px; }
}

/* =========================================================
   CASE STUDY BLING ME — phone (frame 2131:601)
   =========================================================
   Cream ground, white cards outlined in terracotta, and the gallery as a horizontal
   strip of 140px squares instead of the desktop's four-up carousel. */
.blm-mobile { display: none; }
@media (max-width: 700px) {
  .blm-desktop { display: none; }
  body:has(.blm-mobile) { background: var(--blingme-bg); }
  .blm-mobile {
    display: flex; flex-direction: column; gap: 24px;
    padding: 16px 20px 40px; background: var(--blingme-bg);
    --terra: var(--blingme-terra);
  }

  .blm-m-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .blm-m-back {
    display: inline-flex; align-items: center;
    padding: 8px 16px;
    border: 1.5px solid var(--terra); border-radius: var(--radius-pill);
    background: var(--white); color: var(--terra);
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 12px;
    text-decoration: none; white-space: nowrap;
  }
  .blm-m-titles { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .blm-m-titles h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: 34px; text-transform: uppercase; color: var(--terra);
  }
  .blm-m-role {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: normal; color: #141414;
  }

  .blm-m-hero { height: 320px; border-radius: 12px; overflow: clip; }
  .blm-m-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .blm-m-card {
    display: flex; flex-direction: column; gap: 12px;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid var(--terra); border-radius: 8px;
  }
  .blm-m-card h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16px;
    line-height: normal; text-transform: uppercase; color: var(--terra);
  }
  .blm-m-card h3 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px;
    line-height: normal; text-transform: uppercase; color: var(--terra);
  }
  .blm-m-card p {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: 1.4; color: #141414; text-align: left; max-width: none;
  }
  .blm-m-pillar { display: flex; flex-direction: column; gap: 4px; }
  .blm-m-pillar strong {
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 13px;
    line-height: normal; color: #141414;
  }
  .blm-m-group { display: flex; flex-direction: column; gap: 6px; }
  .blm-m-group--tight { gap: 4px; }

  .blm-m-logo {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid var(--terra); border-radius: 8px;
  }
  .blm-m-logo img { width: 160px; height: 76px; object-fit: contain; display: block; }

  .blm-m-gallery { display: flex; flex-direction: column; gap: 12px; }
  .blm-m-gallery h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px;
    line-height: normal; text-transform: uppercase; color: var(--terra);
  }
  /* 140px squares on a 12px gap, scrolled horizontally — all eleven stay reachable. */
  .carousel--blm .carousel__track { grid-auto-columns: 140px; gap: 12px; }
  .carousel--blm .carousel__item img {
    width: 140px; height: 140px; aspect-ratio: auto;
    object-fit: cover; border: 1px solid var(--terra); border-radius: 4px;
  }
  .blm-m-back:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
}

/* =========================================================
   CONTENIDO AUDIOVISUAL & EDITORIAL — phone (frame 2131:651)
   =========================================================
   Reel cover as a 480px hero, then the three sections as maroon-outlined white cards,
   and the video as a YouTube facade that links straight out. */
.av-mobile { display: none; }
@media (max-width: 700px) {
  .av-desktop { display: none; }
  .av-mobile { display: flex; flex-direction: column; gap: 24px; }
  .av-page { padding: 16px 20px 40px; }

  .av-m-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .av-m-back {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 12px;
    text-decoration: none; white-space: nowrap;
  }
  .av-m-titles { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .av-m-titles h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: 34px; text-transform: uppercase; color: var(--maroon);
  }
  .av-m-role {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: normal; color: #141414;
  }

  .av-m-hero { height: 480px; border-radius: 12px; overflow: clip; }
  .av-m-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .av-m-card {
    display: flex; flex-direction: column; gap: 8px;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid var(--maroon); border-radius: 8px;
  }
  .av-m-card--bloques { gap: 12px; }
  .av-m-card--postpro { gap: 14px; }
  .av-m-card h2 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .av-m-card h2.av-m-h18 { font-size: 18px; }
  .av-m-block { display: flex; flex-direction: column; gap: 6px; }
  .av-m-block--tight { gap: 4px; }
  .av-m-block strong {
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 13px;
    line-height: normal; text-transform: uppercase; color: #141414;
  }
  .av-m-card p {
    margin: 0; font-family: "DM Sans", var(--font-body); font-weight: 400;
    font-size: 13px; line-height: 1.45; color: #141414; text-align: left; max-width: none;
  }
  .av-m-card--postpro p { line-height: 1.4; }

  /* Facade only — it links out to YouTube rather than embedding a player. */
  .av-m-video {
    display: flex; flex-direction: column; overflow: clip;
    background: #262121; border: 1px solid var(--maroon); border-radius: 8px;
    text-decoration: none;
  }
  .av-m-video-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
  .av-m-avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--maroon); color: var(--white);
    font-family: var(--font-display); font-size: 0.85rem;
  }
  .av-m-video-meta { display: flex; flex-direction: column; gap: 2px; }
  .av-m-video-meta strong {
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 12px; color: var(--white);
  }
  .av-m-video-meta small {
    font-family: "DM Sans", var(--font-body); font-weight: 400; font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
  }
  .av-m-video-stage {
    display: flex; align-items: center; justify-content: center;
    height: 180px; background: #bfbfbf;
  }
  .av-m-play {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #db2626; color: var(--white);
  }
  .av-m-play svg { width: 16px; height: 16px; }
  .av-m-video-foot {
    display: block; padding: 12px; text-align: right;
    font-family: "DM Sans", var(--font-body); font-weight: 700; font-size: 11px; color: var(--white);
  }
  .av-m-back:focus-visible, .av-m-video:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* =========================================================
   VÍDEO PRESENTACIÓN — phone (frame 2201:4)
   =========================================================
   Same facade component as desktop, re-proportioned to the artboard: a 350px square
   with a 50px chrome bar, the red rounded play button and the "Ver en YouTube" pill.
   The artboard links straight out to YouTube; the click-to-play facade is kept because
   it is the behaviour already signed off on desktop and it keeps the visitor on site. */
@media (max-width: 700px) {
  .vp-page { padding: 40px 20px; }
  .vp-title { font-size: 36px; line-height: normal; }
  .vp-back {
    margin-top: 18px !important;
    box-sizing: border-box; height: 36px; padding: 0 16px;
    align-items: center; line-height: 1;
    font-size: 13px;
  }
  .vp-page .yt {
    max-width: none; margin: 24px 0 0;
    aspect-ratio: 1 / 1; border-radius: 10px; background: #1a1a1a;
  }
  .vp-page .yt__bar { padding: 11px 12px; height: 50px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); }
  .vp-page .yt__avatar { width: 28px; height: 28px; font-size: 0.8rem; }
  .vp-page .yt__meta strong { font-size: 12px; font-weight: 600; }
  .vp-page .yt__meta span { font-size: 10px; color: #ccc; }
  /* Figma sits the play control high in the frame rather than dead centre. */
  .vp-page .yt__play { top: 28%; width: 56px; }
  .vp-page .yt__cta { font-size: 11px; font-weight: 600; padding: 9px 14px; border-radius: 16px; background: rgba(64, 64, 64, 0.85); }
}

/* =========================================================
   THE UNFILTERED VALENTINE — phone (frame 2354:3)
   =========================================================
   Section heads on this artboard are Inter Bold 16, NOT the Anton the desktop frame
   uses — the two frames genuinely differ, so this is not an oversight. */
.tuv-mobile { display: none; }
@media (max-width: 1439px) and (max-width: 700px) {
  .tuv-stage { display: none; }
  .tuv-mobile {
    display: flex; flex-direction: column; gap: 24px;
    padding: 16px 20px 40px; background: var(--pink-bg);
  }

  .tuvm-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .tuvm-back {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border: 1.5px solid var(--maroon); border-radius: var(--radius-pill);
    background: var(--white); color: var(--maroon);
    font-family: var(--font-body); font-weight: 700; font-size: 12px;
    text-decoration: none; white-space: nowrap;
  }
  .tuvm-titles { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .tuvm-titles h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .tuvm-role {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: normal; color: #141414;
  }

  .tuvm-card {
    display: flex; flex-direction: column; gap: 8px;
    box-sizing: border-box; padding: 16px;
    background: var(--white); border: 1px solid #d9d9d9; border-radius: 8px;
  }
  .tuvm-card--proceso { gap: 16px; }
  .tuvm-card h2 {
    margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 16px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }
  .tuvm-card p {
    margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px;
    line-height: normal; color: #141414; text-align: left; max-width: none;
  }
  .tuvm-step { display: flex; flex-direction: column; gap: 6px; }
  .tuvm-step strong {
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    line-height: normal; text-transform: uppercase; color: var(--maroon);
  }

  .tuvm-mood { height: 247px; border-radius: 12px; overflow: clip; }
  .tuvm-mood img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .tuvm-cta { display: flex; align-items: center; gap: 16px; }
  .tuvm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; border-radius: var(--radius-pill);
    background: var(--maroon); color: var(--white);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .tuvm-seal { display: block; width: 80px; height: 80px; border-radius: 8px; overflow: clip; flex-shrink: 0; }
  .tuvm-seal img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tuvm-back:focus-visible, .tuvm-btn:focus-visible, .tuvm-seal:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
}

/* ---------------------------------------------------------------------------
   Zara e-commerce — phones (Figma artboard 2359:5, 390 x 7887)
   The desktop page is a hand-placed 1440 stage; the mobile artboard is a real
   single-column flow, so it is a separate block rather than a reflow. Every
   measurement below is taken from that artboard scaled to the viewport width:
   16px side padding, 40px scene padding, 24px stack gap, 12px grid gutter.
--------------------------------------------------------------------------- */
.zara-mobile { display: none; }

@media (max-width: 700px) {
  .zara-stage { display: none !important; }
  body.zara-body { height: auto !important; overflow: visible; }

  .zara-mobile {
    display: block;
    width: 100%;
    background: #f7dfdd;
    color: #111;
    font-family: "Inter", system-ui, sans-serif;
    overflow-x: clip;
  }
  .zara-mobile img { display: block; max-width: 100%; }

  /* --- Header bar (2359:6): 47 tall, 16 padding, 1px black rule ----------- */
  .zm-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px;
    background: #f7dfdd; border-bottom: 1px solid #000;
  }
  .zm-header-left { display: flex; align-items: center; gap: 12px; }
  .zm-burger {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 18px; height: 12px; flex-shrink: 0;
  }
  .zm-burger span { display: block; width: 18px; height: 2px; background: #000; }
  .zm-campaign {
    margin: 0; font-family: "Archivo Black", "Inter", sans-serif;
    font-size: 14px; line-height: 1.1; color: #c82a1d;
  }
  .zm-search {
    margin: 0; font-size: 11px; font-weight: 600; line-height: 1.1;
    letter-spacing: .04em; text-transform: uppercase; color: #000; white-space: nowrap;
  }

  /* --- Hero (image, category list, filters, utility rail) ----------------- */
  /* The hero has no bottom padding on the artboard — Escena 1's own 40px top
     padding is the whole gap, so the section ends flush at y=671.5. */
  .zm-hero { padding: 24px 16px 0; display: flex; flex-direction: column; }
  .zm-hero-img { margin-bottom: 24px; }
  .zm-cats { margin-bottom: 14px; }
  .zm-filters { margin-bottom: 43px; }
  .zm-hero-img { width: 100%; aspect-ratio: 358 / 268.5; object-fit: cover; }

  .zm-cats { display: flex; flex-direction: column; }
  .zm-cats a {
    display: block; padding: 5px 0; font-size: 11px; font-weight: 500;
    line-height: 1.2; color: #c82a1d; text-decoration: none;
  }
  .zm-cats a:hover, .zm-cats a:focus-visible { color: #c82a1d; }

  .zm-filters { display: flex; gap: 24px; }
  .zm-filters p {
    margin: 0; font-size: 11px; font-weight: 600; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .04em; color: #c82a1d;
  }

  .zm-utility { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .zm-utility ul { margin: 0; padding: 0; list-style: none; }
  .zm-utility li { font-size: 11px; font-weight: 500; line-height: 1.9; color: #c82a1d; }
  .zm-utility a { color: inherit; text-decoration: none; }
  .zm-utility a:hover, .zm-utility a:focus-visible { color: #c82a1d; }
  .zm-quote {
    margin: 0; max-width: 160px; text-align: right;
    font-family: "Pinyon Script", cursive; font-size: 24px; line-height: 1.25; color: #c82a1d;
  }

  /* --- Scenes: 40/16 padding, 24 gap, header 14 + 22 Archivo Black -------- */
  .zm-scene {
    position: relative;
    display: flex; flex-direction: column; gap: 24px;
    padding: 40px 16px;
  }
  .zm-scene--black  { background: #000; }
  .zm-scene--pink   { background: #f7dfdd; }
  /* The desktop velvet asset is a crop of the whole composed scene — its centre
     already contains the product cards. On mobile it would show through as white
     slivers, so the background is a clean velvet band cut from that same file. */
  .zm-scene--velvet {
    background: #2a0a10 url("../assets/images/m-zara-velvet.jpg") center / cover no-repeat;
  }
  .zm-scene-head { display: flex; flex-direction: column; gap: 4px; }
  .zm-scene-n, .zm-scene-t {
    margin: 0; font-family: "Archivo Black", "Inter", sans-serif;
    line-height: 1.1; color: #c82a1d;
  }
  .zm-scene-n { font-size: 14px; }
  .zm-scene-t { font-size: 22px; letter-spacing: -.3px; }

  .zm-editorial { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  /* Escena 4's editorial is the portrait shot, kept at its own ratio — that is
     what makes that scene 1241 tall on the artboard rather than ~870. */
  .zm-editorial--tall { aspect-ratio: 1004 / 1558; }
  .zm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .zm-prod { background: #f0ede8; aspect-ratio: 3 / 4; overflow: clip; }
  .zm-prod--full { grid-column: 1 / -1; }
  .zm-prod img { width: 100%; height: 100%; object-fit: cover; }

  /* Escena 5 opens with the Love-Me pattern band (16,40,358,80). */
  .zm-loveme { width: 100%; height: 80px; object-fit: cover; }
  /* Escena 3 closes with the cupid constellation (358 square). */
  .zm-deco { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

  /* --- Footer wordmark, horizontal here rather than rotated -------------- */
  .zm-footer { background: #f7dfdd; padding: 64px 55px; }
  .zm-footer img { width: 100%; height: auto; }
}

/* =========================================================
   UNË CONCEPT — propuesta creativa: email marketing (Figma 2546:9, 1440x5037)
   Positioned stage, same model as the Zara page: every element sits at its Figma
   x/y and the script scales the whole artboard below 1440. Everything here is
   prefixed une- and scoped to this page. Type is Syne 700/800 for the proposal and
   Inter for the Gmail interface — both read from get_design_context, not inferred.
   ========================================================= */
.une-body { margin: 0; background: #fff; overflow-x: hidden; }
.une-stage {
  position: relative;
  width: 1440px;
  height: 5037px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  transform-origin: top left;
  color: #000;
  font-family: "Syne", sans-serif;
  /* body sets 1.5; Figma's "normal" leading is the font's own metrics */
  line-height: normal;
}
.une-stage > *, .une-gmail > *, .une-mail > * { position: absolute; margin: 0; }
/* The global `img { max-width:100% }` would shrink anything wider than its box
   (the 1511px background, the crops at 140–170%) — so it is switched off here. */
.une-stage img { max-width: none; }
.une-img { display: block; object-fit: cover; }
.une-crop { overflow: hidden; }
.une-crop > img { position: absolute; display: block; }
.une-crop--static { position: relative; flex: none; }
.une-rot { display: flex; align-items: center; justify-content: center; }
.une-rot > img { flex: none; display: block; object-fit: cover; }

.une-cover-sub {
  left: 457px; top: 485px; width: 525px;
  font: 700 20px/normal "Syne", sans-serif; text-align: center;
  text-transform: none; letter-spacing: 0;
}
.une-h { font: 800 16px/normal "Syne", sans-serif; text-align: center; letter-spacing: 0; text-transform: none; }
.une-h--lg { font-size: 25px; }
.une-t { font: 700 16px/normal "Syne", sans-serif; text-align: justify; }
.une-t--20 { font-size: 20px; }
.une-t--xb { font-weight: 800; }
.une-t--center { text-align: center; }
.une-t p { margin: 0; }
.une-t b { font-weight: 800; }
.une-u { text-decoration: underline; text-underline-position: from-font; }
.une-list { list-style: disc; padding: 0; margin: 0; }
/* Figma indents list items by 1.5x the marker font size: 24px at 16px. Its bullet is
   Syne's own "\2022" glyph — a small square — not the browser's round disc, so the
   marker is drawn from the font, 15px left of the text as measured on the artboard. */
.une-list { list-style: none; }
.une-list li { position: relative; margin-left: 24px; }
.une-list li::before { content: "\2022"; position: absolute; left: -15px; font-weight: 800; }
.une-list--why span { font-weight: 700; }

.une-gmail {
  left: 120px; top: 1900px; width: 1200px; height: 3017px;
  background: #f6f8fc; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.une-g { font: 400 14px/normal "Inter", sans-serif; white-space: nowrap; }

.une-mail { left: 400.5px; top: 280px; width: 600px; height: 2641px; background: #fff; overflow: hidden; }
.une-m { font: 700 14px/normal "Syne", sans-serif; text-align: center; color: #000; }
.une-m--nw { white-space: nowrap; }
.une-m--prod { font-weight: 800; font-size: 22px; letter-spacing: 2px; }
.une-btn {
  left: 151px; top: 1395px; width: 274px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 40px; overflow: hidden;
  background: #fff; border: 1px solid #000;
  font: 800 14px/normal "Syne", sans-serif; letter-spacing: 3px; white-space: nowrap;
}