/* =========================================================
   BLOGO VISUALS — estilos
   Paleta oficial: #0B0D00 · #6B7F4E · #0B0D00 · #F2F2F2 · #8C8C8C
   ========================================================= */

:root {
  --moss: #1F3D2E;
  --olive: #6B7F4E;
  --ink: #0B0D00;
  --ink-2: #1A1D0A;
  --ink-3: #1F230A;
  --bone: #F2F2F2;
  --stone: #8C8C8C;
  --sage: #3D3F32;

  --line: rgba(242, 242, 242, .1);
  --glow: rgba(185, 205, 120, .35);

  --f-display: "Archivo Black", "Arial Black", sans-serif;
  --f-serif: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
::selection { background: var(--olive); color: var(--ink); }

.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 300; letter-spacing: -.01em; }
.muted { color: var(--stone); }

/* Logo: el filtro SVG quita el blanco del PNG */
.logo-key { filter: drop-shadow(0 0 18px rgba(162,181,160, .18)); }

/* ---------- GRANO ---------- */
.grain {
  position: fixed; inset: -100%;
  width: 300%; height: 300%;
  z-index: 100; pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-6%, 4%); }
  33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); }
  67% { transform: translate(7%, 2%); }
  83% { transform: translate(-8%, -4%); }
  100% { transform: translate(2%, 6%); }
}
.vignette {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- BRILLO (joyería) ---------- */
.shine {
  background: linear-gradient(110deg, #e9ecdf 0%, #e9ecdf 38%, #ffffff 46%, #A2B5A0 50%, #ffffff 54%, #e9ecdf 62%, #e9ecdf 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s var(--ease) infinite;
  filter: drop-shadow(0 0 22px rgba(162,181,160, .18));
}
@keyframes sheen {
  0% { background-position: 120% 0; }
  55%, 100% { background-position: -40% 0; }
}

.btn-shine {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: .7em 1.4em;
  font: 600 13px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, #e9eed6, #A2B5A0 45%, #DCC8A3 60%, #6B7F4E);
  background-size: 200% 200%;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 8px 30px -8px var(--glow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-position .8s var(--ease);
}
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-20deg);
  animation: glint 4.5s 1s infinite;
}
@keyframes glint { 0% { left: -60%; } 22%, 100% { left: 130%; } }
.btn-shine:hover { transform: translateY(-2px); background-position: 100% 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 14px 40px -6px var(--glow); }
.btn-lg { padding: 1.05em 2em; font-size: 14px; }

.btn-ghost {
  display: inline-flex; padding: .8em 1.5em; border-radius: 999px;
  border: 1px solid var(--line);
  font: 500 13px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.btn-ghost:hover { border-color: rgba(162,181,160, .5); background: rgba(107,127,78, .12); box-shadow: 0 0 24px -6px var(--glow); }

/* Brillo que sigue al ratón en tarjetas */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(162,181,160, .14), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.spot:hover::before { opacity: 1; }

/* Borde metálico */
.metal {
  border: 1px solid transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
              linear-gradient(140deg, rgba(255,255,255,.35), rgba(107,127,78,.15) 30%, rgba(255,255,255,.05) 60%, rgba(162,181,160,.4)) border-box;
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s, backdrop-filter .5s, padding .5s;
}
.nav.is-scrolled {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(11,13,0, .55);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav__logo { width: 34px; height: auto; }
.nav__word { font: 15px/1 var(--f-display); letter-spacing: .04em; }
.nav__word em { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 18px; letter-spacing: 0; margin-left: 4px; color: #A2B5A0; }
.nav__links { display: flex; gap: 30px; }
.nav__links a {
  position: relative; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 242, 242, .75);
  transition: color .3s;
}
.nav__links a span { font-size: 10px; color: var(--olive); margin-right: 6px; vertical-align: top; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, transparent, #A2B5A0, transparent);
  transform: scaleX(0); transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__burger { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.75) contrast(1.05) brightness(.85);
  transform: scale(1.06);
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,0,.55) 0%, rgba(11,13,0,0) 25%, rgba(11,13,0,.15) 55%, var(--ink) 100%),
    radial-gradient(ellipse at 20% 80%, rgba(31,61,46,.55), transparent 60%);
}
.hero__content { position: relative; z-index: 2; padding: 0 var(--gutter) 12vh; max-width: 1360px; width: 100%; margin: 0 auto; }
.eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,242,242,.75); margin-bottom: 18px; }
.hero__title { line-height: .82; margin-bottom: 28px; }
.hero__title .line { display: block; }
.hero__title .shine { font: clamp(64px, 15vw, 230px)/1 var(--f-display); letter-spacing: -.02em; }
.hero__title em { display: block; font-size: clamp(56px, 11vw, 170px); line-height: .9; margin-left: .55em; color: #A2B5A0; text-shadow: 0 0 40px rgba(162,181,160,.25); }
.hero__lede { font-family: var(--f-serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; line-height: 1.4; color: rgba(242,242,242,.85); max-width: 32ch; }
.hero__meta {
  position: absolute; z-index: 2; bottom: 28px; left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,242,242,.55);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { display: block; width: 1px; height: 36px; background: linear-gradient(#A2B5A0, transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- SECCIONES ---------- */
section { position: relative; }
.about, .work, .baul, .pablo { padding: clamp(96px, 14vw, 180px) 0; }
.section-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 80px); }
.index { font: 12px/1 var(--f-sans); letter-spacing: .2em; color: var(--olive); padding: 6px 10px; border: 1px solid rgba(107,127,78,.4); border-radius: 999px; }
.h-section { font: clamp(36px, 6vw, 84px)/1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.h-section em { text-transform: none; color: #A2B5A0; font-size: 1.05em; }
.section-head__aside { margin-left: auto; color: var(--stone); font-size: 14px; }
.tag { display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); margin-bottom: 14px; }

/* ---------- 01 ABOUT ---------- */
.about { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%); }
.about__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__big { font-family: var(--f-serif); font-size: clamp(26px, 3.2vw, 46px); line-height: 1.2; font-weight: 300; }
.about__big .muted { display: block; margin-top: .6em; }
.about__side p { color: rgba(242,242,242,.75); margin-bottom: 1.2em; }
.about__side strong { color: #fff; font-weight: 600; }
.about__side em { font-family: var(--f-serif); color: #A2B5A0; font-size: 1.1em; }

.values {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin: clamp(64px, 9vw, 120px) 0;
  padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.values li { font: clamp(18px, 2.4vw, 32px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: rgba(242,242,242,.2); transition: color .5s, text-shadow .5s; }
.values li:hover { color: #DCC8A3; text-shadow: 0 0 24px rgba(162,181,160,.5); }

.leaves { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.leaves__logo { position: relative; max-width: 380px; margin: 0 auto; width: 100%; }
.leaves__logo img { position: relative; z-index: 1; width: 100%; animation: float 8s ease-in-out infinite; }
.leaves__halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(162,181,160,.22), rgba(61,107,30,.15) 40%, transparent 70%); filter: blur(30px); animation: pulse 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.leaves__list { display: grid; gap: 14px; }
.leaf-card { display: grid; grid-template-columns: 22px 1fr; column-gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.leaf-card__dot { grid-row: span 2; width: 14px; height: 14px; margin-top: 8px; border-radius: 50% 0 50% 0; background: var(--leaf); box-shadow: 0 0 18px var(--leaf); }
.leaf-card h3 { font: 22px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 6px; }
.leaf-card p { color: rgba(242,242,242,.65); }
.leaves__note { text-align: center; font-size: clamp(20px, 2.2vw, 30px); color: rgba(242,242,242,.7); margin: clamp(56px, 8vw, 100px) auto; }

.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.style-card { padding: clamp(28px, 4vw, 48px); border-radius: 22px; overflow: hidden; }
.style-card { border: 1px solid transparent; background: linear-gradient(160deg, rgba(31,61,46,.6), rgba(26,29,10,.9)) padding-box, linear-gradient(140deg, rgba(255,255,255,.3), rgba(107,127,78,.1) 35%, rgba(255,255,255,.03) 65%, rgba(162,181,160,.35)) border-box; }
.style-card h3 { font: clamp(34px, 4vw, 56px)/1 var(--f-serif); font-style: italic; font-weight: 300; margin-bottom: 14px; color: #DCC8A3; }
.style-card p { color: rgba(242,242,242,.7); max-width: 40ch; }

/* ---------- 02 TRABAJOS ---------- */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reel { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.reel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.reel__media { position: absolute; inset: 0; }
.reel__media img, .reel__media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.85); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.reel__media img { animation: drift 18s ease-in-out infinite alternate; }
.reel:nth-child(2) .reel__media img { animation-delay: -6s; }
.reel:nth-child(3) .reel__media img { animation-delay: -12s; }
@keyframes drift { from { transform: scale(1.15) translateX(-6%); } to { transform: scale(1.15) translateX(6%); } }
.reel:hover .reel__media img, .reel:hover .reel__media video { filter: saturate(1) brightness(1); }
.reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 12px; padding: 60px 22px 20px;
  background: linear-gradient(transparent, rgba(11,13,0,.92));
}
.reel__n { font-size: 11px; color: var(--olive); letter-spacing: .2em; }
.reel__t { font: 22px/1.1 var(--f-serif); font-style: italic; font-weight: 300; }
.reel__k { margin-left: auto; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,242,242,.6); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
.reel__rec { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,242,242,.75); padding: 6px 10px; border-radius: 999px; background: rgba(11,13,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel__rec i { width: 6px; height: 6px; border-radius: 50%; background: #A2B5A0; box-shadow: 0 0 10px #A2B5A0; animation: blink 1.6s steps(2) infinite; }
.reel.has-video .reel__rec { display: none; }
@keyframes blink { 50% { opacity: .2; } }

/* Marcas */
.brands { margin-top: clamp(80px, 11vw, 140px); }
.brands__title { text-align: center; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--stone); margin-bottom: 26px; }
.brands__title span { color: #A2B5A0; }
.brands__viewport {
  position: relative; overflow: hidden;
  background: var(--bone);
  padding: 34px 0;
  box-shadow: 0 0 80px -20px rgba(162,181,160,.25);
}
/* grano también sobre la banda clara */
.brands__viewport::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* laterales desenfocados */
.brands__viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  background: linear-gradient(90deg, var(--bone) 0%, rgba(242,242,242,0) 12%, rgba(242,242,242,0) 88%, var(--bone) 100%);
}
.brands__track { display: flex; width: max-content; animation: marquee-right 110s linear infinite; }
.brands__group { display: flex; align-items: center; flex-shrink: 0; }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 clamp(28px, 4vw, 56px); height: 56px; color: #0b0b0b; white-space: nowrap; font: 600 26px/1 var(--f-sans); letter-spacing: -.01em; }
.brand img { height: 34px; width: auto; }
.brand--wide img { height: 64px; }
.brand--text { font-size: 26px; }
.brand--fcb { font-family: var(--f-display); font-size: 22px; letter-spacing: .02em; }
.brand--city { font-family: var(--f-serif); font-weight: 400; font-size: 28px; }
.brand--pcc { font-family: var(--f-display); font-size: 22px; letter-spacing: -.02em; }

/* ---------- 03 BAÚL ---------- */
.baul { background: radial-gradient(ellipse at 70% 50%, rgba(31,61,46,.45), transparent 60%), var(--ink); }
.baul__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,242,242,.7); margin-bottom: 24px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #c0624a; box-shadow: 0 0 12px #c0624a; }
.baul__big { font: clamp(24px, 2.8vw, 38px)/1.25 var(--f-serif); font-weight: 300; margin-bottom: 20px; }
.baul__copy > p:not(.baul__big) { color: rgba(242,242,242,.7); margin-bottom: 32px; max-width: 46ch; }

.chest {
  padding: clamp(28px, 4vw, 48px); border-radius: 26px; overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(170deg, #22271a, #10120a) padding-box,
              linear-gradient(140deg, rgba(255,255,255,.45), rgba(107,127,78,.2) 30%, rgba(255,255,255,.04) 60%, rgba(162,181,160,.5)) border-box;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -30px var(--glow);
}
.chest__lock { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 26px; background: linear-gradient(145deg, #DCC8A3, #6B7F4E); box-shadow: 0 0 30px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,.7); }
.chest__lock svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.chest h3 { font: clamp(28px, 3vw, 40px)/1.05 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.chest__sub { color: var(--stone); margin-bottom: 28px; }
.chest__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chest__items li {
  font-size: 13px; padding: 10px 12px; border-radius: 10px;
  background: rgba(242,242,242,.04); border: 1px solid var(--line);
  color: rgba(242,242,242,.55);
  filter: blur(.4px);
  transition: color .3s, filter .3s, background .3s;
}
.chest__items li:hover { color: #fff; filter: none; background: rgba(107,127,78,.15); }

/* ---------- 04 PABLO ---------- */
.pablo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.pablo__photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.pablo__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; filter: saturate(.85); }
.pablo__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); background: linear-gradient(transparent 60%, rgba(11,13,0,.5)); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-bottom: 36px; border-top: 1px solid var(--line); }
.facts div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); margin-bottom: 4px; }
.facts dd { font: 22px/1.2 var(--f-serif); font-weight: 400; }
.pablo__dream { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; color: #DCC8A3; margin-bottom: 24px; }
.pablo__text > p.muted { margin-bottom: 32px; max-width: 52ch; }
.socials { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
.footer { padding: 80px 0 40px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink), #060700); }
.footer__big { font: clamp(56px, 13vw, 200px)/.9 var(--f-display); letter-spacing: -.02em; margin-bottom: 40px; }
.footer__big em { color: #A2B5A0; font-size: .8em; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }

/* ---------- FRAMES (bajo la portada) ---------- */
.frames { position: relative; z-index: 3; padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 80px); }
.frames__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(242,242,242,.6); }
.frames__label { display: inline-flex; align-items: center; gap: 10px; color: #A2B5A0; }
.frames__label i { width: 6px; height: 6px; border-radius: 50%; background: #A2B5A0; box-shadow: 0 0 10px #A2B5A0; animation: blink 1.6s steps(2) infinite; }
.frames__row { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr 1fr 1.15fr; gap: 10px; padding: 0 var(--gutter); align-items: center; }
.frame { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.frame:nth-child(odd) { aspect-ratio: 4 / 5; }
.frame:nth-child(3) { aspect-ratio: 3 / 4; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); background: linear-gradient(transparent 65%, rgba(11,13,0,.55)); }
.frame video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transform: scale(1.02); transition: transform 1.2s var(--ease), filter .6s; }
.frame:hover video { transform: scale(1.07); filter: saturate(1.05); }
.frame figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,242,242,.8); }

/* ---------- PORTFOLIO ---------- */
.pf { margin-bottom: clamp(64px, 8vw, 110px); }
.pf__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.pf__title { font: clamp(28px, 3.4vw, 46px)/1 var(--f-serif); font-style: italic; font-weight: 300; color: #DCC8A3; }
.pf__title span { font: 11px/1 var(--f-sans); font-style: normal; letter-spacing: .2em; color: var(--olive); margin-left: 10px; vertical-align: middle; }
.pf__nav { display: flex; align-items: center; gap: 10px; }
.pf__count { font-size: 12px; letter-spacing: .14em; color: var(--stone); margin-right: 8px; }
.pf__count b { color: var(--bone); font-weight: 600; }
.pf__arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(242,242,242,.03); border: 1px solid var(--line); color: var(--bone); transition: background .3s, border-color .3s, box-shadow .3s, opacity .3s; }
.pf__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf__arrow:hover { border-color: rgba(162,181,160,.5); background: rgba(107,127,78,.15); box-shadow: 0 0 24px -6px var(--glow); }
.pf__arrow:disabled { opacity: .3; cursor: default; box-shadow: none; }
.pf__track { display: grid; grid-auto-flow: column; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.pf__track::-webkit-scrollbar { display: none; }
.pf__track--v { grid-auto-columns: calc((100% - 36px) / 3); }
.pf__track--h { grid-auto-columns: calc((100% - 36px) / 3); }
.piece { scroll-snap-align: start; position: relative; border-radius: 18px; overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pf__track--v .piece { aspect-ratio: 9 / 16; }
.pf__track--h .piece { aspect-ratio: 16 / 9; }
.piece::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.piece__media { position: absolute; inset: 0; }
.piece__media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: filter .6s; }
.piece:hover .piece__media video { filter: saturate(1.05); }
.piece figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 50px 18px 16px; background: linear-gradient(transparent, rgba(11,13,0,.85)); pointer-events: none; }
.piece__t { font: 20px/1.15 var(--f-serif); font-style: italic; font-weight: 300; }
.pf__track--h .piece__t { font-size: 18px; }
.piece__sound {
  position: absolute; top: 12px; right: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(11,13,0,.45) center/18px no-repeat;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9v6h4l5 4V5L8 9z'/><path d='M17 9l4 6M21 9l-4 6'/></svg>");
  transition: background-color .3s, box-shadow .3s, transform .3s;
}
.piece__sound:hover { transform: scale(1.06); }
.piece__sound.is-on {
  background-color: rgba(162,181,160,.9); border-color: rgba(255,255,255,.6); box-shadow: 0 0 24px -2px var(--glow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9v6h4l5 4V5L8 9z'/><path d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/></svg>");
}

/* ---------- MAPA ---------- */
.map { padding: clamp(96px, 14vw, 180px) 0; background: radial-gradient(ellipse at 50% 55%, rgba(31,61,46,.35), transparent 65%), var(--ink); overflow: hidden; }
.map__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.map__tabs button { cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: rgba(242,242,242,.7); font: 500 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; transition: all .3s; }
.map__tabs button:hover { color: #fff; border-color: rgba(162,181,160,.4); }
.map__tabs button.is-active { color: var(--ink); background: linear-gradient(135deg, #DCC8A3, #A2B5A0); border-color: transparent; box-shadow: 0 0 24px -6px var(--glow); }
.map__stage { position: relative; max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter); }
.map__svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 500; overflow: visible; }
.map__svg .dot { fill: rgba(140,140,140,.32); }
.map__svg .arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.2; stroke-linecap: round; opacity: .75; }
.map__svg .pin-core { fill: #DCC8A3; filter: drop-shadow(0 0 4px rgba(162,181,160,.9)); }
.map__svg .pin-ring { fill: none; stroke: #A2B5A0; transform-box: fill-box; transform-origin: center; animation: ring 2.8s ease-out infinite; }
.map__svg .pin--major .pin-core { fill: #ffffff; }
.map__svg .pin--home .pin-core { fill: #A2B5A0; filter: drop-shadow(0 0 6px rgba(162,181,160,.9)); }
.map__svg .pin { cursor: pointer; opacity: 0; transition: opacity .6s; }
.map__svg .pin.is-on { opacity: 1; }
.map__svg .pin-label { fill: rgba(242,242,242,.9); font-family: var(--f-sans); letter-spacing: .06em; pointer-events: none; opacity: 0; transition: opacity .4s; paint-order: stroke; stroke: rgba(11,13,0,.85); stroke-linejoin: round; }
.map.is-zoomed .map__svg .pin-label { opacity: 1; }
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.map__tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); padding: 7px 12px; border-radius: 999px; white-space: nowrap; font-size: 12px; letter-spacing: .06em; color: var(--ink); background: linear-gradient(135deg, #DCC8A3, #c3d08f); box-shadow: 0 8px 30px -8px var(--glow); }
.map__stats { display: flex; margin-top: 20px; padding: 0 8px; gap: clamp(18px, 3vw, 40px); }
.map__stats b { display: block; font: clamp(30px, 4vw, 54px)/1 var(--f-display); color: #DCC8A3; }
.map__stats span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.map__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); }
.map__list li { padding: 22px 20px 0 0; cursor: pointer; transition: opacity .3s; }
.map__list h4 { margin: 0 0 8px; font: 12px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.map__list p { color: rgba(242,242,242,.7); font-size: 15px; line-height: 1.6; }
.map__list strong { color: #fff; font-weight: 600; }
.map__list li:hover p { color: #fff; }

@media (max-width: 960px) {
  .frames { margin-top: 0; padding-top: 24px; }
  .frames__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .frames__row::-webkit-scrollbar { display: none; }
  .frame, .frame:nth-child(odd), .frame:nth-child(3) { flex: 0 0 62%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .frames__note { display: none; }
  .pf__track--v { grid-auto-columns: 62%; }
  .pf__track--h { grid-auto-columns: 86%; }
  .map__list { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .map__svg { aspect-ratio: 1000 / 560; }
}
@media (max-width: 560px) {
  .map__list { grid-template-columns: 1fr; }
  .pf__count { display: none; }
}


/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .about__grid, .leaves, .baul__grid, .pablo__grid { grid-template-columns: 1fr; }
  .reels { grid-template-columns: 1fr; }
  .reel { aspect-ratio: 16 / 11; }
  .styles { grid-template-columns: 1fr; }
  .leaves__logo { max-width: 260px; }
  .section-head__aside { margin-left: 0; width: 100%; }
}
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: grid; gap: 6px; width: 40px; height: 40px; place-content: center; background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
  .nav__burger i { display: block; width: 16px; height: 1px; background: var(--bone); transition: transform .4s var(--ease); }
  .nav.is-open .nav__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav.is-open { background: rgba(11,13,0,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); flex-wrap: wrap; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 22px; width: 100%; padding: 30px 0 20px; order: 3; }
  .nav.is-open .nav__links a { font-size: 22px; }
  .chest__items { grid-template-columns: repeat(2, 1fr); }
  .hero__meta span { display: none; }
  .hero__meta { justify-content: flex-end; }
  .brand { font-size: 20px; height: 44px; }
  .brand img { height: 26px; }
  .brand--wide img { height: 50px; }
}

/* =========================================================
   METAL — títulos con textura de metal pulido / cepillado
   ========================================================= */
:root {
  /* metal cepillado: vetas horizontales */
  --tex-brushed: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='80'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  1.4 0 0 0 -.2'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  /* poro fino */
  --tex-pore: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='9'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  --sheen: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.95) 49%, rgba(255,255,255,.35) 52%, rgba(255,255,255,0) 60%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #eef0e6 14%, #a7aa9c 38%, #5f6257 47%, #f4f5ee 54%, #c2c5b8 70%, #7c7f72 86%, #e9ebe1 100%);
  --green-metal: linear-gradient(180deg, #fbfdf0 0%, #e2ebbd 14%, #6B7F4E 36%, #4e5a24 47%, #eef4cf 54%, #A2B5A0 70%, #66752f 86%, #dfe8b6 100%);
}

.shine,
.h-section,
.hero__title em,
.h-section em,
.footer__big em,
.pf__title,
.chest h3,
.leaf-card h3,
.style-card h3,
.map__stats b,
.pablo__dream {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--sheen), var(--tex-brushed), var(--tex-pore), var(--chrome);
  background-size: 300% 100%, 400px 80px, 120px 120px, 100% 1em;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: 130% 0, 0 0, 0 0, 0 .02em;
  background-blend-mode: screen, overlay, soft-light, normal;
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(162,181,160,.16));
  animation: metal-sheen 7s cubic-bezier(.45,.05,.25,1) infinite;
}
/* variante verde metalizado para las cursivas */
.hero__title em,
.h-section em,
.footer__big em,
.pf__title,
.style-card h3,
.pablo__dream {
  background-image: var(--sheen), var(--tex-brushed), var(--tex-pore), var(--green-metal);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(162,181,160,.14));
}
/* Las cursivas viven dentro del h2: que no hereden doble filtro raro */
.h-section em { animation-delay: .6s; }
.hero__title em { animation-delay: 1.2s; }
.pf__title span { -webkit-text-fill-color: var(--olive); filter: none; }
.pablo__dream { background-size: 300% 100%, 400px 80px, 120px 120px, 100% 1.25em; }
.style-card h3 { padding-right: .1em; }

@keyframes metal-sheen {
  0%       { background-position: 130% 0, 0 0, 0 0, 0 .02em; }
  45%, 100%{ background-position: -30% 0, 0 0, 0 0, 0 .02em; }
}

/* =========================================================
   GRANO — mucho más
   ========================================================= */
.grain {
  opacity: .14; animation-duration: .7s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 3.2 -1.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* segunda capa: grano gordo de película, con su propio ritmo */
body::after {
  content: ""; position: fixed; inset: -100%; width: 300%; height: 300%;
  z-index: 101; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.2' intercept='-.6'/><feFuncG type='linear' slope='2.2' intercept='-.6'/><feFuncB type='linear' slope='2.2' intercept='-.6'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  animation: grain 1.1s steps(5) infinite reverse;
}
/* tercera capa: motas oscuras para que el grano también "muerda" en las zonas claras */
body::before {
  content: ""; position: fixed; inset: -100%; width: 300%; height: 300%;
  z-index: 98; pointer-events: none;
  opacity: .08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.1'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>");
  animation: grain .8s steps(4) infinite;
}
/* grano extra dentro de vídeos y fotos */
.frame::before, .piece__media::after, .pablo__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>");
}
.pablo__photo::before { z-index: 1; }
.brands__viewport::before { opacity: .28; }

/* =========================================================
   V3 — metal solo en el borde de las letras
   El relleno es liso; el trazo (transparente) deja ver la
   textura metálica solo en el contorno exterior.
   ========================================================= */
.shine,
.h-section,
.chest h3,
.map__stats b {
  -webkit-text-fill-color: #e9ecdf;
  -webkit-text-stroke: .07em transparent;
  paint-order: stroke fill;
  background-size: 300% 100%, 400px 80px, 120px 120px, 100% .5em;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.25)) drop-shadow(0 0 18px rgba(162,181,160,.12));
}
.hero__title em,
.h-section em,
.footer__big em,
.pf__title,
.style-card h3,
.pablo__dream {
  -webkit-text-fill-color: #cfdb9f;
  -webkit-text-stroke: .06em transparent;
  paint-order: stroke fill;
  background-size: 300% 100%, 400px 80px, 120px 120px, 100% .5em;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.2)) drop-shadow(0 0 20px rgba(162,181,160,.1));
}
.pablo__dream { -webkit-text-stroke-width: .04em; }
.pf__title span { -webkit-text-stroke: 0; }
@keyframes metal-sheen {
  0%       { background-position: 130% 0, 0 0, 0 0, 0 0; }
  45%, 100%{ background-position: -30% 0, 0 0, 0 0, 0 0; }
}

/* =========================================================
   V3 — textos pequeños en Arial Black, letras juntas
   ========================================================= */
:root { --f-sans: "Arial Black", "Archivo Black", "Arial", sans-serif; }
body { font-family: var(--f-sans); font-weight: 400; letter-spacing: -.045em; font-size: 15px; line-height: 1.55; }
.eyebrow, .nav__links a, .nav__cta, .btn-shine, .btn-ghost, .tag, .index,
.section-head__aside, .frames__head, .frame figcaption, .pf__count, .pf__title span,
.map__tabs button, .map__stats span, .map__list h4, .brands__title, .status,
.facts dt, .footer__row, .hero__meta, .scroll-cue, .reel__k, .reel__rec, .reel__n {
  font-family: var(--f-sans);
  font-weight: 400;
  letter-spacing: -.035em;
}
.about__side p, .style-card p, .baul__copy > p:not(.baul__big), .pablo__text > p.muted,
.map__list p, .chest__sub, .chest__items li, .brand {
  font-family: var(--f-sans);
  font-weight: 400;
  letter-spacing: -.045em;
}
.about__side strong { font-weight: 400; }
.about__side em { letter-spacing: 0; }
.nav__links a span { letter-spacing: -.02em; }

/* =========================================================
   V3 — ¿Qué es? con foto
   ========================================================= */
.about__grid { grid-template-columns: .85fr 1.15fr; align-items: center; }
.about__photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; filter: saturate(.85); }
.about__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); background: linear-gradient(transparent 60%, rgba(11,13,0,.45)); }
.about__text .about__big { margin-bottom: 36px; }
.frames__row { grid-template-columns: 1.2fr 1fr 1fr; }
.frame, .frame:nth-child(odd), .frame:nth-child(3) { aspect-ratio: 16 / 10; }
@media (max-width: 960px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 520px; }
  .frame, .frame:nth-child(odd), .frame:nth-child(3) { flex: 0 0 82%; aspect-ratio: 16 / 10; }
}

/* =========================================================
   V4 — borde metálico muy suave y sutil
   ========================================================= */
:root {
  --chrome-soft: linear-gradient(180deg, #f4f5ee 0%, #dfe2d6 30%, #b9bcb0 48%, #eceee6 56%, #cfd2c6 80%, #f1f2ec 100%);
  --green-soft: linear-gradient(180deg, #eef3d8 0%, #d6e0ae 30%, #aebb7c 48%, #e3eac4 56%, #c3cf93 80%, #e9efcf 100%);
  --sheen-soft: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 58%);
}
.shine, .h-section, .chest h3, .map__stats b {
  -webkit-text-stroke-width: .022em;
  background-image: var(--sheen-soft), var(--chrome-soft);
  background-size: 300% 100%, 100% .5em;
  background-repeat: no-repeat, repeat;
  background-blend-mode: screen, normal;
  filter: drop-shadow(0 0 14px rgba(162,181,160,.08));
}
.hero__title em, .h-section em, .footer__big em, .pf__title, .style-card h3, .pablo__dream {
  -webkit-text-stroke-width: .018em;
  background-image: var(--sheen-soft), var(--green-soft);
  background-size: 300% 100%, 100% .5em;
  background-repeat: no-repeat, repeat;
  background-blend-mode: screen, normal;
  filter: drop-shadow(0 0 16px rgba(162,181,160,.06));
}
.pablo__dream { -webkit-text-stroke-width: .012em; }
@keyframes metal-sheen {
  0%        { background-position: 130% 0, 0 0; }
  45%, 100% { background-position: -30% 0, 0 0; }
}

/* =========================================================
   V5 — mapa satelital real (globo 3D)
   ========================================================= */
.map__globe {
  position: relative; border-radius: 28px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--ink);
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08);
}
#map { position: absolute; inset: 0; }
/* viñeta + grano encima del satélite */
.map__globe::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 120px 30px rgba(11,13,0,.85), inset 0 0 0 1px rgba(255,255,255,.1);
}
.map__globe::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>");
}
.map__hint { position: absolute; z-index: 4; right: 22px; top: 18px; margin: 0; font-size: 11px; color: rgba(242,242,242,.55); pointer-events: none; transition: opacity .5s; }
.map.is-zoomed .map__hint { opacity: 0; }

/* Pines */
.pin { position: relative; width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: scale(.4); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.map.is-live .pin { opacity: 1; transform: none; }
.pin__core { position: absolute; inset: 3px; border-radius: 50%; background: #DCC8A3; box-shadow: 0 0 8px 2px rgba(162,181,160,.9), 0 0 22px 4px rgba(162,181,160,.35); transition: transform .3s; }
.pin__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #A2B5A0; animation: ring 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.pin--major .pin__core { inset: 2px; background: #fff; }
.pin--home { width: 18px; height: 18px; }
.pin--home .pin__core { inset: 3px; background: #A2B5A0; box-shadow: 0 0 10px 3px rgba(162,181,160,.9), 0 0 28px 6px rgba(162,181,160,.35); }
.pin--home .pin__ring { border-color: #A2B5A0; }
.pin:hover .pin__core { transform: scale(1.5); }
.pin__label {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font: 400 12px/1 var(--f-sans); letter-spacing: -.035em; color: #f2f2f2;
  text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.pin--l .pin__label { left: auto; right: calc(100% + 6px); }
.pin--u .pin__label { left: 50%; top: auto; bottom: calc(100% + 4px); transform: translateX(-50%); }
.pin--d .pin__label { left: 50%; top: calc(100% + 4px); transform: translateX(-50%); }
.pin:hover .pin__label { opacity: 1; }
.map[data-active="usa"] .pin[data-region="usa"] .pin__label,
.map[data-active="europe"] .pin[data-region="europe"] .pin__label,
.map[data-active="morocco"] .pin[data-region="morocco"] .pin__label,
.map[data-active="indonesia"] .pin[data-region="indonesia"] .pin__label { opacity: 1; }

/* Controles de MapLibre en el tono de la web */
.map__globe .maplibregl-ctrl-attrib { background: rgba(11,13,0,.6) !important; color: rgba(242,242,242,.6); font: 10px/1.4 var(--f-sans); letter-spacing: -.02em; }
.map__globe .maplibregl-ctrl-attrib a { color: rgba(242,242,242,.75); }
.map__globe .maplibregl-ctrl-attrib-button { filter: invert(1); }
.map__globe .maplibregl-ctrl-bottom-right { z-index: 5; }
.map__globe .maplibregl-cooperative-gesture-screen { background: rgba(11,13,0,.6); font-family: var(--f-sans); letter-spacing: -.03em; z-index: 6; }

@media (max-width: 960px) {
  .map__globe { aspect-ratio: 1 / 1; border-radius: 20px; }
  .map__hint { display: none; }
}
.pin-wrap { width: 18px; height: 18px; display: grid; place-items: center; }
.map__globe .maplibregl-ctrl-attrib.maplibregl-compact { font-size: 9px; max-width: 70%; }

/* =========================================================
   V6 — globo sin bordes, fundido con la página
   ========================================================= */
.map { background: var(--ink); padding-top: clamp(40px, 6vw, 80px); }
.map .section-head .h-section { max-width: 16ch; }
.map__stage { max-width: none; padding: 0; margin-top: clamp(-40px, -3vw, -10px); }
.map__globe {
  border-radius: 0; box-shadow: none; background: transparent;
  aspect-ratio: auto; height: clamp(520px, 78vh, 900px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.map__globe::after { display: none; }
.map__hint { top: auto; bottom: 26%; right: auto; left: 50%; transform: translateX(-50%); }
.map__stats { margin-top: -40px; position: relative; z-index: 2; }
.map__credit { margin: 14px 8px 0; font-size: 10px; color: rgba(242,242,242,.35); letter-spacing: -.02em; }
@media (max-width: 960px) {
  .map__globe { aspect-ratio: auto; height: min(110vw, 620px); }
  .map__stats { margin-top: -10px; }
}
.map { padding-bottom: clamp(48px, 7vw, 90px); }
.map__credit { font-size: 9px; color: rgba(242,242,242,.28); }

/* =========================================================
   V7 — pines y arcos en rojo poco saturado
   ========================================================= */
.pin__core { background: #e7b3a8; box-shadow: 0 0 8px 2px rgba(196,96,80,.85), 0 0 22px 4px rgba(196,96,80,.3); }
.pin__ring { border-color: #c4685a; }
.pin--major .pin__core { background: #f0c6bc; }
.pin--home .pin__core { background: #d4705f; box-shadow: 0 0 10px 3px rgba(212,112,95,.9), 0 0 28px 6px rgba(212,112,95,.35); }
.pin--home .pin__ring { border-color: #d4705f; }

/* V8 — transición plano ↔ globo */
.map__globe { transition: opacity .38s ease; }
.map__globe.is-switching { opacity: 0; }

/* V9 — luz de sol sobre el globo (destello cálido + dispersión azul) */
.map__globe::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 80% 14%, rgba(255,250,235,.38) 0%, rgba(255,245,220,.16) 9%, rgba(150,195,255,.10) 22%, transparent 48%),
    radial-gradient(ellipse at 60% 30%, rgba(120,170,240,.10), transparent 60%);
  mix-blend-mode: screen;
  box-shadow: none;
}
.map.is-zoomed .map__globe::after { opacity: .45; transition: opacity 1s; }

/* V10 — rojo oscuro, centro casi blanco */
.pin__core { background: #f4e3de; box-shadow: 0 0 0 2px rgba(120,26,19,.95), 0 0 10px 3px rgba(130,30,22,.85), 0 0 24px 6px rgba(110,24,18,.45); }
.pin__ring { border-color: #8a2419; border-width: 1.5px; }
.pin--major .pin__core { background: #fbefeb; }
.pin--home .pin__core { background: #fff3ef; box-shadow: 0 0 0 2.5px rgba(140,30,22,1), 0 0 12px 4px rgba(150,34,24,.9), 0 0 30px 8px rgba(120,26,19,.5); }
.pin--home .pin__ring { border-color: #a12a1e; }

/* V11 — nombres más pequeños; puntos menos blancos salvo los más visitados */
.pin__label { font-size: 9px; letter-spacing: -.02em; }
.pin__core { background: #b9786c; box-shadow: 0 0 0 1.5px rgba(110,24,18,.95), 0 0 8px 2px rgba(120,26,19,.6); }
.pin--major .pin__core, .pin--home .pin__core { background: #b9786c; }
.pin__ring { opacity: .7; }
/* Valencia, Madrid, Tenerife y Uluwatu: brillan más */
.pin--star { width: 20px; height: 20px; }
.pin.pin--star .pin__core { inset: 4px; background: #fff6f3; box-shadow: 0 0 0 2px rgba(140,30,22,1), 0 0 12px 4px rgba(255,220,210,.55), 0 0 26px 8px rgba(150,34,24,.75), 0 0 46px 14px rgba(120,26,19,.4); }
.pin.pin--star .pin__ring { opacity: 1; border-color: #b33a2c; }
.pin.pin--star .pin__label { font-size: 10px; }

/* V12 — puntos difuminados */
.pin .pin__core {
  inset: -1px;
  background: radial-gradient(circle, #d39a8e 0%, rgba(176,82,66,.9) 32%, rgba(130,32,24,.45) 58%, rgba(110,24,18,0) 78%);
  box-shadow: 0 0 12px 3px rgba(120,26,19,.35);
}
.pin .pin__ring { filter: blur(1.2px); opacity: .55; }
.pin.pin--star .pin__core {
  inset: -3px;
  background: radial-gradient(circle, #ffffff 0%, #ffe9e3 20%, rgba(214,120,100,.85) 42%, rgba(150,34,24,.5) 62%, rgba(120,26,19,0) 82%);
  box-shadow: 0 0 22px 8px rgba(150,34,24,.5), 0 0 44px 14px rgba(120,26,19,.3);
}
.pin.pin--star .pin__ring { filter: blur(1.5px); opacity: .85; }
.pin:hover .pin__core { transform: scale(1.35); }

/* =========================================================
   V13 — Cabecera: rótulo central de título de cine
   ========================================================= */
.hero { justify-content: center; align-items: center; }
.hero__shade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11,13,0,.15) 0%, rgba(11,13,0,.55) 70%, rgba(11,13,0,.8) 100%),
    linear-gradient(180deg, rgba(11,13,0,.35) 0%, transparent 25%, transparent 70%, var(--ink) 100%);
}
.hero__card {
  position: relative; z-index: 2; text-align: center;
  padding: 0 var(--gutter); color: #eee8dd;
}
.card__pre {
  margin: 0 0 clamp(14px, 2vw, 26px);
  font: 500 clamp(11px, 1.15vw, 17px)/1 "Jost", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .55em; padding-left: .55em; text-transform: uppercase;
  color: rgba(238,232,221,.9);
}
.card__title { margin: 0; display: flex; flex-direction: column; align-items: center; }
.card__main {
  font: 500 clamp(54px, 11vw, 168px)/.95 "Jost", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .38em; padding-left: .38em;
  color: #f1ebe0;
  text-shadow: 0 0 40px rgba(241,235,224,.18), 0 2px 30px rgba(0,0,0,.45);
  animation: card-in 2.6s cubic-bezier(.2,.7,.1,1) .2s both;
}
.card__sub {
  margin-top: clamp(10px, 1.4vw, 20px);
  font: 300 clamp(13px, 1.7vw, 24px)/1 "Jost", "Helvetica Neue", sans-serif;
  text-transform: uppercase; letter-spacing: .95em; padding-left: .95em;
  color: rgba(241,235,224,.92);
  animation: card-in-sub 2.6s cubic-bezier(.2,.7,.1,1) .6s both;
}
.card__credit {
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  font: 300 clamp(9px, .85vw, 12px)/1 "Jost", "Helvetica Neue", sans-serif;
  text-transform: uppercase; letter-spacing: .6em; padding-left: .6em;
  color: rgba(238,232,221,.6);
}
@keyframes card-in {
  from { opacity: 0; letter-spacing: .75em; padding-left: .75em; filter: blur(10px); }
  to   { opacity: 1; letter-spacing: .38em; padding-left: .38em; filter: blur(0); }
}
@keyframes card-in-sub {
  from { opacity: 0; letter-spacing: 1.6em; padding-left: 1.6em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: .95em; padding-left: .95em; filter: blur(0); }
}
.hero__meta { justify-content: center; }
.hero__meta .scroll-cue {
  flex-direction: column; gap: 10px;
  font: 300 10px/1 "Jost", sans-serif; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase;
  color: rgba(238,232,221,.55);
}
@media (max-width: 600px) {
  .card__main { letter-spacing: .22em; padding-left: .22em; }
  @keyframes card-in { from { opacity: 0; letter-spacing: .5em; filter: blur(8px); } to { opacity: 1; letter-spacing: .22em; filter: blur(0); } }
  .card__sub { letter-spacing: .7em; padding-left: .7em; }
  .card__pre { letter-spacing: .4em; padding-left: .4em; }
}

/* =========================================================
   V14 — rótulo con resplandor y grano dentro de las letras
   ========================================================= */
:root {
  --letter-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.55'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.card__main, .card__sub, .card__pre, .card__credit {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--letter-grain), linear-gradient(180deg, #fffaf1 0%, #f1e9dc 55%, #ddd2c1 100%);
  background-size: 140px 140px, 100% 100%;
  background-blend-mode: multiply, normal;
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
}
/* resplandor: varias capas de luz cálida alrededor de las letras */
.card__main {
  filter:
    drop-shadow(0 0 2px rgba(255,248,235,.55))
    drop-shadow(0 0 14px rgba(255,240,215,.35))
    drop-shadow(0 0 42px rgba(255,232,200,.22));
  animation: card-in 2.6s cubic-bezier(.2,.7,.1,1) .2s both, letter-grain .55s steps(4) infinite, glow-breathe 6s ease-in-out 3s infinite;
}
.card__sub {
  filter: drop-shadow(0 0 2px rgba(255,248,235,.45)) drop-shadow(0 0 12px rgba(255,240,215,.28));
  animation: card-in-sub 2.6s cubic-bezier(.2,.7,.1,1) .6s both, letter-grain .55s steps(4) infinite;
}
.card__pre, .card__credit {
  filter: drop-shadow(0 0 6px rgba(255,240,215,.3));
  animation: letter-grain .55s steps(4) infinite;
}
.card__credit { opacity: .75; }
@keyframes letter-grain {
  0%   { background-position: 0 0, 0 0; }
  25%  { background-position: -37px 21px, 0 0; }
  50%  { background-position: 18px -44px, 0 0; }
  75%  { background-position: -52px -13px, 0 0; }
  100% { background-position: 0 0, 0 0; }
}
@keyframes glow-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,248,235,.55)) drop-shadow(0 0 14px rgba(255,240,215,.35)) drop-shadow(0 0 42px rgba(255,232,200,.22)); }
  50%      { filter: drop-shadow(0 0 3px rgba(255,248,235,.7)) drop-shadow(0 0 20px rgba(255,240,215,.45)) drop-shadow(0 0 60px rgba(255,232,200,.3)); }
}
/* la entrada no debe pisar el resplandor: solo opacidad/espaciado */
@keyframes card-in {
  from { opacity: 0; letter-spacing: .75em; padding-left: .75em; }
  to   { opacity: 1; letter-spacing: .38em; padding-left: .38em; }
}
@keyframes card-in-sub {
  from { opacity: 0; letter-spacing: 1.6em; padding-left: 1.6em; }
  to   { opacity: 1; letter-spacing: .95em; padding-left: .95em; }
}
@media (max-width: 600px) {
  @keyframes card-in { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .22em; } }
}

/* V15 — frase bajo el título del mapa */
.map .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
.map .section-head .h-section { max-width: none; }
.map__quote {
  margin: 0; max-width: 46ch;
  font: italic 300 clamp(18px, 1.8vw, 24px)/1.4 var(--f-serif) !important;
  letter-spacing: 0 !important; color: rgba(242,242,242,.72);
}

/* V16 — "por todo el mundo" con la tipografía de la cabecera, en blanco */
.map .h-section em {
  font: 500 1em/1 "Jost", "Helvetica Neue", Arial, sans-serif;
  font-style: normal; text-transform: uppercase;
  letter-spacing: .22em;
  -webkit-text-stroke: 0;
  color: #f1ebe0; -webkit-text-fill-color: #f1ebe0;
  background: none; animation: none;
  filter: drop-shadow(0 0 2px rgba(255,248,235,.45)) drop-shadow(0 0 16px rgba(255,240,215,.25));
}

/* V17 — Qué es: dos líneas de trabajo */
.lines__label { margin: clamp(64px, 9vw, 110px) 0 18px; font-size: 12px; letter-spacing: -.02em; text-transform: uppercase; color: var(--olive); }
.styles { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.style-card h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; }
.style-card__list { margin: 18px 0; display: grid; gap: 10px; }
.style-card__list li { position: relative; padding-left: 22px; color: rgba(242,242,242,.85); }
.style-card__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 1px; background: #A2B5A0; }
.style-card__note { color: rgba(242,242,242,.6) !important; font-size: .95em; }
.about__side em { font-family: var(--f-serif); font-style: italic; color: #A2B5A0; letter-spacing: 0; }
@media (max-width: 960px) { .styles { grid-template-columns: 1fr; } }

/* V18 — misma estética de título en Qué es y Portfolio */
.about .h-section em,
.work .h-section em {
  font: 500 1em/1 "Jost", "Helvetica Neue", Arial, sans-serif;
  font-style: normal; text-transform: uppercase;
  letter-spacing: .22em;
  -webkit-text-stroke: 0;
  color: #f1ebe0; -webkit-text-fill-color: #f1ebe0;
  background: none; animation: none;
  filter: drop-shadow(0 0 2px rgba(255,248,235,.45)) drop-shadow(0 0 16px rgba(255,240,215,.25));
}

/* V19 — subtítulo de Qué es: más pequeño y en sans */
.about__big .muted {
  display: block; margin-top: 1.1em;
  font: 300 clamp(15px, 1.25vw, 18px)/1.5 "Jost", "Helvetica Neue", sans-serif;
  letter-spacing: .04em; color: rgba(242,242,242,.6);
}

/* =========================================================
   V20 — foto de Qué es separada en capas (scroll)
   --p: entrada (0→1) · --q: paralaje mientras se ve (-1→1)
   ========================================================= */
.layers { --p: 0; --q: 0; isolation: isolate; background: #0d1008; }
.layers .ly { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.layers .ly img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; display: block; }
/* 1 · fondo: aparece desenfocado y se enfoca */
.ly--bg {
  --e: clamp(0, var(--p) * 1.6, 1);
  opacity: var(--e);
  transform: translateY(calc(var(--q) * 18px)) scale(calc(1.22 - var(--e) * .14));
  filter: blur(calc((1 - var(--e)) * 10px)) brightness(calc(.55 + var(--e) * .3)) saturate(.85);
}
/* 2 · sujeto: sube y se asienta */
.ly--subject {
  --e: clamp(0, (var(--p) - .28) / .55, 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 90px + var(--q) * -26px)) scale(calc(1.12 - var(--e) * .04));
  filter: drop-shadow(0 30px 40px rgba(0,0,0,calc(.55 * var(--e)))) saturate(.9);
  z-index: 1;
}
/* 3 · primer plano (hojas desenfocadas de abajo): entra el último, más rápido */
.ly--fg {
  --e: clamp(0, (var(--p) - .55) / .45, 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 160px + var(--q) * -60px)) scale(1.14);
  filter: blur(3px) saturate(.9);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 46%);
  mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 46%);
  z-index: 2;
}
.layers::after { z-index: 3; }
.no-js .layers .ly { opacity: 1; transform: none; filter: none; }

/* =========================================================
   V20 — más animaciones de entrada al bajar
   ========================================================= */
.reveal { filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.reveal.is-in { filter: none; }
/* títulos: se destapan de abajo arriba */
.section-head.reveal .h-section { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path 1.3s var(--ease) .1s, transform 1.3s var(--ease) .1s; }
.section-head.reveal.is-in .h-section { clip-path: inset(-20% -5% -20% -5%); transform: none; }
/* tarjetas y piezas: entran escalonadas desde abajo con un leve zoom */
.style-card.reveal, .piece.reveal, .frame { transform: translateY(50px) scale(.97); }
.style-card.reveal.is-in, .piece.reveal.is-in { transform: none; }
.frames.is-in .frame { transform: none; transition: transform 1.2s var(--ease); }
.frames.is-in .frame:nth-child(2) { transition-delay: .12s; }
.frames.is-in .frame:nth-child(3) { transition-delay: .24s; }

/* =========================================================
   V21 — a partir de "Frames": fondo negro con separación
   ========================================================= */
body { background: #000; }
.hero, .map { background-color: var(--ink); }
.frames, .about, .work, .baul, .pablo, .footer { background: #000 !important; }
.frames {
  position: relative;
  border-top: 1px solid rgba(242,242,242,.09);
  box-shadow: 0 -1px 0 rgba(0,0,0,.6), 0 -40px 80px -40px rgba(0,0,0,.9);
  padding-top: clamp(48px, 6vw, 80px);
}
/* línea con un brillo suave en el centro */
.frames::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(70%, 900px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(241,235,224,.45), transparent);
}
.footer { border-top-color: rgba(242,242,242,.06); }

/* =========================================================
   V22 — etiqueta de Instagram sobre la foto (@blogovs)
   ========================================================= */
.ig-tag {
  position: absolute; z-index: 4; left: 57%; top: 60%;
  transform: translate(-50%, 0) scale(.6); transform-origin: 50% -8px;
  padding: 9px 14px;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important; color: #fff; white-space: nowrap;
  background: rgba(0,0,0,.78); border-radius: 7px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
/* piquito que apunta a la persona, como en IG */
.ig-tag::before {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.78);
}
.about__photo.is-in .ig-tag {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 1s;
  animation: ig-float 4s ease-in-out 2s infinite;
}
.ig-tag:hover { background: rgba(0,0,0,.9); }
@keyframes ig-float {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -4px) scale(1); }
}
/* icono de "persona etiquetada" abajo a la izquierda */
.ig-badge {
  position: absolute; z-index: 4; left: 14px; bottom: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.72);
  opacity: 0; transform: scale(.5);
  transition: opacity .35s ease .7s, transform .5s cubic-bezier(.34,1.56,.64,1) .7s;
}
.ig-badge svg { width: 15px; height: 15px; fill: #fff; stroke: #fff; stroke-width: 0; }
.ig-badge svg path { fill: #fff; }
.about__photo.is-in .ig-badge { opacity: 1; transform: none; }

/* V23 — etiqueta encima de la cabeza, hacia arriba a la derecha (piquito abajo-izquierda) */
.ig-tag { left: 60%; top: 13%; transform: translate(0, 0) scale(.6); transform-origin: 14px calc(100% + 6px); }
.ig-tag::before {
  left: 14px; top: auto; bottom: -6px; transform: none;
  border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(0,0,0,.78);
}
.about__photo.is-in .ig-tag { transform: translate(0, 0) scale(1); }
@keyframes ig-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(0, -4px) scale(1); }
}
/* V24 — etiqueta pegada a la cabeza: el piquito apunta justo al pelo */
.ig-tag { left: calc(59% - 14px); top: calc(29.5% - 40px); }

/* =========================================================
   V25 — frames como tarjetas dentro del mapa (por región)
   ========================================================= */
.map__stage { position: relative; }
.map__cards {
  position: absolute; z-index: 6; left: var(--gutter); top: 0;
  height: clamp(520px, 78vh, 900px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  width: min(300px, 28vw); pointer-events: none;
}
.fcard {
  margin: 0; position: relative; border-radius: 14px; overflow: hidden;
  background: rgba(11,13,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateX(-40px) rotate(var(--r, 0deg)) scale(.96);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.1,1);
}
.fcard:nth-child(1) { --r: -1.6deg; }
.fcard:nth-child(2) { --r: 1.1deg; margin-left: 22px; }
.fcard:nth-child(3) { --r: -.7deg; }
.fcard video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.95); }
.fcard figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px 10px; font-size: 11px; color: rgba(242,242,242,.7); }
.fcard figcaption b { font-weight: 400; color: #f1ebe0; }
.map__cards.is-shown { pointer-events: auto; }
.map__cards.is-shown .fcard { opacity: 1; transform: translateX(0) rotate(var(--r, 0deg)) scale(1); }
.map__cards.is-shown .fcard:nth-child(2) { transition-delay: .14s; }
.map__cards.is-shown .fcard:nth-child(3) { transition-delay: .28s; }
.fcard:hover { transform: translateX(6px) rotate(0deg) scale(1.03) !important; z-index: 2; transition-delay: 0s !important; }
@media (max-width: 760px) {
  .map__cards {
    left: 0; right: 0; width: auto; top: auto; bottom: 64px; height: auto;
    flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .map__cards::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 62%; scroll-snap-align: center; transform: translateY(30px) scale(.96); }
  .fcard:nth-child(2) { margin-left: 0; }
  .map__cards.is-shown .fcard { transform: none; }
}

/* la separación negra empieza ahora en "Qué es" (la tira de frames ya no existe) */
.about { position: relative; border-top: 1px solid rgba(242,242,242,.09); }
.about::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(70%, 900px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(241,235,224,.45), transparent);
}
@media (max-width: 760px) {
  .map__cards { bottom: auto; top: calc(min(110vw, 620px) - 205px); }
  .fcard figcaption { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 11px 9px; font-size: 10px; }
}
.fcard figcaption { flex-wrap: wrap; }

/* =========================================================
   V26 — foco en las ciudades del proyecto + panel de explicación
   ========================================================= */
.map__focus {
  --fx: 50%; --fy: 50%; --frx: 200px; --fry: 160px;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  backdrop-filter: blur(7px) brightness(.72) saturate(.8);
  -webkit-backdrop-filter: blur(7px) brightness(.72) saturate(.8);
  -webkit-mask-image: radial-gradient(ellipse var(--frx) var(--fry) at var(--fx) var(--fy), transparent 0%, transparent 62%, rgba(0,0,0,.55) 100%, #000 160%);
  mask-image: radial-gradient(ellipse var(--frx) var(--fry) at var(--fx) var(--fy), transparent 0%, transparent 62%, rgba(0,0,0,.55) 100%, #000 160%);
  opacity: 0; transition: opacity 1.2s ease;
}
.map__focus.is-on { opacity: 1; }

.map__info {
  position: absolute; z-index: 6; right: var(--gutter); top: 0;
  height: clamp(520px, 78vh, 900px); width: min(340px, 27vw);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  pointer-events: none; opacity: 0; transform: translateX(30px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.1,1);
}
.map__info.is-shown { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; }
.map__info-quote {
  margin: 0 0 6px;
  font: italic 300 clamp(20px, 1.9vw, 28px)/1.25 var(--f-serif);
  letter-spacing: 0; color: #f1ebe0;
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
}
.map__info-quote cite {
  display: block; margin-top: 12px; font: 300 11px/1 "Jost", sans-serif; font-style: normal;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(241,235,224,.6);
}
.map__info p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(242,242,242,.75); text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.map__info-meta {
  display: grid; grid-template-columns: 1fr 1fr; margin: 8px 0 0;
  border-top: 1px solid rgba(242,242,242,.14);
}
.map__info-meta div { padding: 10px 0 0; }
.map__info-meta dt { font-size: 10px; text-transform: uppercase; color: var(--olive); margin-bottom: 3px; }
.map__info-meta dd { margin: 0; font: 500 18px/1.1 "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; color: #f1ebe0; }

@media (max-width: 760px) {
  .map__info {
    position: relative; right: auto; top: auto; height: auto; width: auto;
    padding: 0 var(--gutter); margin-top: 18px;
    display: none; transform: translateY(16px);
  }
  .map__info.is-shown { display: flex; animation: info-in .8s cubic-bezier(.2,.7,.1,1) both; }
  @keyframes info-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .map__info p { font-size: 12.5px; }
}
@media (min-width: 761px) {
  .map__cards { width: min(250px, 21vw); gap: 12px; }
  .fcard:nth-child(2) { margin-left: 16px; }
  .fcard figcaption { padding: 7px 10px 8px; font-size: 10px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .map__cards { width: min(210px, 19vw); }
}
@media (max-width: 760px) {
  .map__stage { display: flex; flex-direction: column; }
  .map__globe { order: 1; }
  .map__cards { order: 2; position: relative; top: auto; bottom: auto; margin-top: -90px; display: none; }
  .map__cards.is-shown { display: flex; }
  .map__cards.is-shown .fcard { animation: fcard-in .8s cubic-bezier(.2,.7,.1,1) both; }
  .map__cards.is-shown .fcard:nth-child(2) { animation-delay: .12s; }
  .map__cards.is-shown .fcard:nth-child(3) { animation-delay: .24s; }
  @keyframes fcard-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
  .map__info { order: 3; margin-top: 22px; }
  .map__stage > .wrap { order: 4; }
  .map__stats { margin-top: 28px; }
}
/* V27 — región Oppo: nombres de Madrid y Valencia visibles */
.map[data-active="oppo"] .pin[data-also~="oppo"] .pin__label { opacity: 1; }
/* V28 — tarjetas solo imagen, sin texto ni marco de cristal */
.fcard { background: none; border: 1px solid rgba(255,255,255,.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.fcard figcaption { display: none; }
/* V29 — región DJI (Canarias y Portugal): 4 tarjetas */
.map[data-active="dji"] .pin[data-also~="dji"] .pin__label { opacity: 1; }
.fcard:nth-child(4) { --r: 1.3deg; margin-left: 14px; }
.map__cards.is-shown .fcard:nth-child(4) { transition-delay: .42s; }
@media (min-width: 761px) { .map__cards--4 { width: min(210px, 18vw); gap: 10px; } }
@media (max-width: 760px) { .fcard:nth-child(4) { margin-left: 0; } .map__cards.is-shown .fcard:nth-child(4) { animation-delay: .36s; } }

/* =========================================================
   V30 — tarjetas ancladas a zonas vacías del mapa (Oppo, DJI)
   ========================================================= */
.map__cards.map__cards--geo {
  position: absolute; left: 0; right: 0; top: 0; width: auto;
  height: clamp(520px, 78vh, 900px);
  display: block; padding: 0; margin: 0; overflow: visible; order: initial;
  pointer-events: none;
}
.map__cards--geo .fcard {
  position: absolute; width: clamp(150px, 15vw, 230px); margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.85);
}
.map__cards--geo.is-shown .fcard { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); pointer-events: auto; }
.map__cards--geo .fcard:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.08) !important; }
@media (max-width: 760px) {
  .map__cards.map__cards--geo { height: min(110vw, 620px); display: block; }
  .map__cards.map__cards--geo:not(.is-shown) { display: block; visibility: hidden; }
  .map__cards--geo .fcard { width: 30vw; flex: none; animation: none !important; }
  .map__cards--geo.is-shown .fcard { opacity: 1; }
}

/* =========================================================
   V31 — la info de cada proyecto, sobre un papel de cuaderno
   (blanco roto #F2F2F2 + cuadrícula + grano + cinta + notas en rojo)
   ========================================================= */
.map__info.paper {
  --ink-dark: #1F3D2E; --pen: #c9302a;
  top: calc(clamp(520px, 78vh, 900px) / 2); height: auto;
  width: min(330px, 26vw); padding: 44px 26px 24px;
  justify-content: flex-start; gap: 12px;
  color: var(--ink-dark);
  background-color: #F2F2F2;
  background-image:
    linear-gradient(rgba(60,60,60,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,60,60,.11) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -18px rgba(0,0,0,.85), 0 8px 18px rgba(0,0,0,.35);
  transform: translate(30px, -50%) rotate(1.4deg);
}
.map__info.paper.is-shown { transform: translate(0, -50%) rotate(1.4deg); }
/* grano y manchas del papel */
.map__info.paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; opacity: .55;
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(120,100,70,.10), transparent 45%),
    radial-gradient(ellipse at 10% 95%, rgba(120,100,70,.08), transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
/* trozo de cinta adhesiva */
.map__info.paper::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(232,226,208,.72);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
}
.paper > * { position: relative; z-index: 1; }
/* regla con cota a mano (como "3,2 m") */
.paper__rule {
  position: absolute !important; top: 16px; left: 26px; right: 70px; height: 1px; background: var(--pen);
}
.paper__rule::before, .paper__rule::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--pen); }
.paper__rule::before { left: 0; } .paper__rule::after { right: 0; }
.paper__rule span {
  position: absolute; left: 50%; top: -19px; transform: translateX(-50%) rotate(-1deg);
  white-space: nowrap; padding: 0 6px; background: #F2F2F2;
  font: 600 17px/1 "Caveat", cursive !important; letter-spacing: 0 !important; color: var(--pen);
}
/* año rodeado a mano */
.paper__year {
  position: absolute !important; top: 6px; right: 16px;
  font: 600 22px/1 "Caveat", cursive !important; letter-spacing: 0 !important; color: var(--pen);
  transform: rotate(-6deg);
}
.paper__year::after {
  content: ""; position: absolute; inset: -6px -10px -5px -9px;
  border: 1.6px solid var(--pen);
  border-radius: 52% 46% 55% 44% / 58% 50% 48% 44%;
  transform: rotate(-4deg);
}
.paper__brand {
  margin: 6px 0 2px;
  font: 500 30px/1 "Jost", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-dark);
}
.map__info.paper .map__info-quote { color: #2a2a26; text-shadow: none; font-size: clamp(18px, 1.5vw, 22px); margin: 0; }
.map__info.paper .map__info-quote cite { color: rgba(31,61,46,.55); }
.map__info.paper p { color: rgba(31,61,46,.82); text-shadow: none; font-size: 12.5px; line-height: 1.55; }
.map__info.paper .map__info-meta { border-top: 1px dashed rgba(31,61,46,.3); margin-top: 6px; }
.map__info.paper .map__info-meta dt { color: var(--pen); }
.map__info.paper .map__info-meta dd { color: var(--ink-dark); font-size: 17px; }

@media (max-width: 760px) {
  .map__info.paper {
    top: auto; width: auto; margin: 26px var(--gutter) 0; padding: 44px 22px 22px;
    transform: rotate(-.8deg);
  }
  .map__info.paper.is-shown { transform: rotate(-.8deg); }
}
/* papel: más ancho y compacto en escritorio; debajo del mapa por debajo de 1100px */
.map__info.paper { width: clamp(300px, 25vw, 360px); }
.paper__brand { font-size: 24px; letter-spacing: .12em; }
.map__info.paper .map__info-quote { font-size: clamp(17px, 1.3vw, 20px); }
.map__info.paper p { font-size: 12px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .map__stage { display: flex; flex-direction: column; }
  .map__globe { order: 1; }
  .map__info.paper {
    order: 3; position: relative; right: auto; top: auto; width: min(560px, calc(100% - 2 * var(--gutter)));
    margin: 26px auto 0; display: none; transform: rotate(-.8deg);
  }
  .map__info.paper.is-shown { display: flex; transform: rotate(-.8deg); animation: info-in .8s cubic-bezier(.2,.7,.1,1) both; }
  .map__stage > .wrap { order: 4; }
  .map__stats { margin-top: 28px; }
}
@keyframes info-in { from { opacity: 0; transform: translateY(16px) rotate(-.8deg); } to { opacity: 1; transform: rotate(-.8deg); } }

/* V32 — Insta360 (Indonesia) + frames más grandes en general */
.map[data-active="insta360"] .pin[data-also~="insta360"] .pin__label { opacity: 1; }
.map__cards--geo .fcard { width: clamp(190px, 19vw, 300px); }
@media (min-width: 761px) {
  .map__cards { width: min(300px, 24vw); }
  .map__cards--4 { width: min(250px, 21vw); }
}
@media (min-width: 761px) and (max-height: 760px) { .map__cards { width: min(250px, 21vw); } }
@media (max-width: 760px) {
  .map__cards--geo .fcard { width: 40vw; }
  .fcard { flex-basis: 72%; }
}

/* V33 — papel arrugado: pliegues con relieve (luz difusa sobre ruido) */
.map__info.paper::after {
  opacity: .9; mix-blend-mode: multiply;
  background-size: auto, auto, 160px 160px, 520px 520px, 260px 260px;
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(120,100,70,.10), transparent 45%),
    radial-gradient(ellipse at 10% 95%, rgba(120,100,70,.08), transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.3'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.0045' numOctaves='5' seed='23' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='16' diffuseConstant='1.2'><feDistantLight azimuth='225' elevation='42'/></feDiffuseLighting><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.75' intercept='.33'/><feFuncG type='linear' slope='.75' intercept='.33'/><feFuncB type='linear' slope='.75' intercept='.33'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.02 .035' numOctaves='3' seed='7' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='4'><feDistantLight azimuth='45' elevation='55'/></feDiffuseLighting><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.6' intercept='.45'/><feFuncG type='linear' slope='.6' intercept='.45'/><feFuncB type='linear' slope='.6' intercept='.45'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
/* un borde ligeramente irregular, como papel manoseado */
.map__info.paper { border-radius: 4px 7px 3px 6px / 6px 3px 7px 4px; }

/* V34 — botones del mapa: cuadrados, verde pastel; el seleccionado en blanco */
.map__tabs button {
  border-radius: 2px;
  background: #c8d9ad; border: 1px solid #c8d9ad;
  color: #1d2414;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.6);
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}
.map__tabs button:hover { background: #d8e6c1; border-color: #d8e6c1; color: #11160b; transform: translateY(-1px); }
.map__tabs button.is-active {
  background: #ffffff; border-color: #ffffff; color: #0B0D00;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 8px 24px -8px rgba(255,255,255,.35);
}

/* =========================================================
   V35 — Deportes: polaroid pegada al papel
   ========================================================= */
.map[data-active="deportes"] .pin[data-also~="deportes"] .pin__label { opacity: 1; }
.paper--photo { overflow: visible; }
.polaroid {
  position: absolute !important; z-index: 3 !important;
  top: -38px; left: -58px; width: 150px; margin: 0;
  padding: 8px 8px 28px; background: #faf8f3;
  box-shadow: 0 18px 30px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.25);
  transform: rotate(-8deg);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 60% 40%; filter: saturate(.85) contrast(1.05); }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font: 600 17px/1 "Caveat", cursive !important; letter-spacing: 0 !important; color: #2a2a26;
}
/* un trocito de cinta sujetando la foto */
.polaroid::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 58px; height: 18px;
  transform: translateX(-50%) rotate(4deg); background: rgba(232,226,208,.75);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.paper--photo .paper__brand { margin-left: 92px; }
.paper--photo .paper__rule { left: 110px; }
@media (max-width: 1100px) {
  .polaroid { top: -30px; left: auto; right: -10px; width: 120px; transform: rotate(6deg); }
  .paper--photo .paper__brand { margin-left: 0; }
  .paper--photo .paper__rule { left: 26px; right: 140px; }
  .paper--photo .paper__year { right: 140px; }
}
@media (max-width: 760px) {
  .map__info.paper { width: auto !important; }
}
@media (max-width: 1100px) {
  .map__info.paper.paper--photo.is-shown { display: block; }
  .paper--photo > p, .paper--photo > .map__info-meta, .paper--photo > .paper__brand { margin-bottom: 12px; }
  .polaroid {
    position: relative !important; float: right; top: auto; right: auto; left: auto;
    width: 118px; margin: -54px -14px 10px 14px; transform: rotate(6deg);
  }
  .paper--photo .paper__rule { right: 150px; }
  .paper--photo .paper__year { right: 150px; }
  .paper--photo .map__info-meta { clear: both; }
}

/* =========================================================
   V36 — Deportes: solo los municipios de la terreta
   ========================================================= */
.pin-wrap--local { display: none !important; }
.map[data-active="deportes"] .pin-wrap--local { display: grid !important; }
.map[data-active="deportes"] .pin-wrap:not(.pin-wrap--local) { display: none !important; }
.pin--local { opacity: 1; transform: none; animation: local-pop .7s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d) + 2.4s); }
.pin--local .pin__label { opacity: 1; font-size: 10px; }
@keyframes local-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* V37 — Deportes: luz de sol fuerte, cálida (como lo vería un niño que flipa con la naturaleza) */
.map[data-active="deportes"] .map__globe::after {
  opacity: 1;
  background:
    radial-gradient(circle at 82% 6%, rgba(255,248,225,.55) 0%, rgba(255,236,190,.28) 14%, rgba(255,214,150,.12) 30%, transparent 55%),
    linear-gradient(180deg, rgba(255,240,205,.18) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 60%, rgba(255,250,235,.06), transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 1.2s ease;
}
/* V38 — Deportes: luz de día limpia (sin tinte cálido), estilo relieve exagerado */
.map[data-active="deportes"] .map__globe::after {
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,245,.35) 0%, rgba(220,240,255,.14) 18%, transparent 50%),
    linear-gradient(180deg, rgba(220,238,255,.12) 0%, transparent 35%);
}

/* V39 — Deportes: los pines se funden en vez de desaparecer de golpe */
.map .pin-wrap:not(.pin-wrap--local) { transition: opacity 1.4s ease, visibility 0s linear 0s; }
.map[data-active="deportes"] .pin-wrap:not(.pin-wrap--local) { display: grid !important; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s linear 1.4s; }
.pin--local { animation-delay: calc(var(--d) + 4.8s); }
.map[data-active="deportes"] .pin-wrap:not(.pin-wrap--local) { opacity: 1; visibility: visible; }
.map[data-active="deportes"] .pin-wrap:not(.pin-wrap--local) .pin { opacity: 0 !important; transition: opacity 1.4s ease !important; pointer-events: none; }
.map:not([data-active="deportes"]) .pin-wrap:not(.pin-wrap--local) .pin { transition: opacity 1.6s ease .8s, transform .6s var(--ease); }

/* V40 — Deportes al atardecer: sol bajo en el horizonte (oeste), velo dorado */
.map[data-active="deportes"] .map__globe::after {
  background:
    radial-gradient(ellipse 60% 45% at 18% -6%, rgba(255,196,120,.62) 0%, rgba(255,150,80,.32) 30%, rgba(230,110,70,.12) 55%, transparent 75%),
    linear-gradient(180deg, rgba(255,160,90,.30) 0%, rgba(255,130,80,.12) 28%, transparent 55%),
    linear-gradient(0deg, rgba(120,60,90,.14) 0%, transparent 40%);
  mix-blend-mode: screen;
}

/* =========================================================
   V41 — polaroid sin tapar el texto + etiqueta "19 años"
   ========================================================= */
.paper--photo .paper__brand { margin-left: 0; font-size: 20px; letter-spacing: .08em; line-height: 1.15; max-width: 85%; }
.paper--photo .paper__rule { left: 26px; right: 90px; }
/* escritorio: la foto cuelga a la izquierda del papel, fuera del texto */
@media (min-width: 1101px) {
  .polaroid { top: 54px; left: -150px; width: 160px; transform: rotate(-7deg); }
}
/* pantallas pequeñas: la foto va arriba, antes del texto */
@media (max-width: 1100px) {
  .polaroid {
    position: relative !important; float: none; display: block;
    top: auto; right: auto; left: auto;
    width: 150px; margin: -6px 0 16px 6px; transform: rotate(-4deg);
  }
  .paper--photo .paper__rule, .paper--photo .paper__year { right: auto; }
  .paper--photo .paper__rule { left: 26px; right: 90px; }
  .paper--photo .paper__year { right: 16px; }
}
/* etiqueta tipo Instagram dentro de la foto */
.polaroid { position: relative; }
.photo-tag {
  position: absolute; left: 50%; top: 62%; transform: translateX(-30%);
  padding: 5px 8px; border-radius: 5px; white-space: nowrap;
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0 !important;
  color: #fff; background: rgba(0,0,0,.78);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  animation: tag-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: 6.8s;
}
.photo-tag::before {
  content: ""; position: absolute; left: 30%; top: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.78);
}
@keyframes tag-pop { from { opacity: 0; transform: translateX(-30%) scale(.5); } to { opacity: 1; transform: translateX(-30%) scale(1); } }

/* =========================================================
   V42 — puntos y líneas del mapa en verde (paleta de la marca)
   ========================================================= */
.pin .pin__core {
  background: radial-gradient(circle, #cfe3a6 0%, rgba(140,180,70,.9) 32%, rgba(70,105,30,.45) 58%, rgba(31,61,46,0) 78%);
  box-shadow: 0 0 12px 3px rgba(90,130,40,.35);
}
.pin .pin__ring { border-color: #7b9a3e; }
.pin.pin--star .pin__core {
  background: radial-gradient(circle, #ffffff 0%, #f1f8de 20%, rgba(180,214,110,.85) 42%, rgba(90,130,40,.5) 62%, rgba(31,61,46,0) 82%);
  box-shadow: 0 0 22px 8px rgba(120,170,50,.45), 0 0 44px 14px rgba(70,105,30,.3);
}
.pin.pin--star .pin__ring { border-color: #a9cf5a; }
.pin--home .pin__ring { border-color: #A2B5A0; }

/* V43 — puntos y líneas del mapa en amarillo dorado */
.pin .pin__core {
  background: radial-gradient(circle, #fff1b8 0%, rgba(240,200,80,.9) 32%, rgba(170,120,20,.45) 58%, rgba(90,60,10,0) 78%);
  box-shadow: 0 0 12px 3px rgba(220,170,40,.35);
}
.pin .pin__ring { border-color: #e2b843; }
.pin.pin--star .pin__core {
  background: radial-gradient(circle, #ffffff 0%, #fff6d6 20%, rgba(250,214,100,.88) 42%, rgba(200,150,30,.5) 62%, rgba(90,60,10,0) 82%);
  box-shadow: 0 0 22px 8px rgba(240,190,50,.45), 0 0 44px 14px rgba(170,120,20,.3);
}
.pin.pin--star .pin__ring { border-color: #f5d26a; }
.pin--home .pin__ring { border-color: #ffd84a; }

/* V44 — Valencia y Madrid: lo que más brilla del mapa */
.pin--home, .pin--major { width: 24px; height: 24px; }
.pin.pin--home .pin__core, .pin.pin--major .pin__core {
  inset: -6px;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 14%, #fff4c8 26%, rgba(255,218,100,.92) 42%, rgba(220,165,40,.55) 62%, rgba(90,60,10,0) 84%);
  box-shadow: 0 0 26px 10px rgba(255,210,80,.6), 0 0 60px 22px rgba(240,180,40,.38), 0 0 110px 36px rgba(200,140,20,.18);
  animation: top-glow 3.2s ease-in-out infinite;
}
.pin.pin--home .pin__ring, .pin.pin--major .pin__ring { border-color: #ffe27a; border-width: 2px; opacity: 1; }
@keyframes top-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
/* Tenerife y Uluwatu siguen destacando, pero un escalón por debajo */
.pin.pin--star:not(.pin--home):not(.pin--major) .pin__core { box-shadow: 0 0 16px 5px rgba(240,190,50,.38), 0 0 30px 10px rgba(170,120,20,.22); }

/* V45 — Valencia y Madrid: brillo totalmente degradado, sin bordes visibles */
.pin.pin--home .pin__core, .pin.pin--major .pin__core {
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255,255,255,1) 0%,
    rgba(255,250,225,.95) 10%,
    rgba(255,226,130,.75) 22%,
    rgba(250,200,80,.45) 38%,
    rgba(230,170,50,.22) 56%,
    rgba(210,150,30,.08) 76%,
    rgba(200,140,20,0) 100%);
  box-shadow: none;
  filter: blur(1.5px);
  animation: top-glow-soft 3.2s ease-in-out infinite;
}
@keyframes top-glow-soft {
  0%, 100% { filter: blur(1.5px) brightness(1); }
  50%      { filter: blur(1.5px) brightness(1.22); }
}
.pin.pin--home .pin__ring, .pin.pin--major .pin__ring { border-width: 1px; opacity: .55; filter: blur(2px); }

/* V46 — términos y créditos en el pie */
.footer__legal { margin-top: 28px; border-top: 1px solid rgba(242,242,242,.06); padding-top: 16px; }
.footer__legal summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; color: rgba(242,242,242,.45); letter-spacing: -.02em;
  transition: color .3s;
}
.footer__legal summary::-webkit-details-marker { display: none; }
.footer__legal summary::after { content: "+"; font-size: 13px; transition: transform .3s; }
.footer__legal[open] summary::after { transform: rotate(45deg); }
.footer__legal summary:hover { color: rgba(242,242,242,.8); }
.footer__legal-body { max-width: 760px; padding-top: 12px; }
.footer__legal-body p { margin: 0 0 10px; font-size: 11px; line-height: 1.6; color: rgba(242,242,242,.4); }
.footer__legal-body strong { font-weight: 400; color: rgba(242,242,242,.6); }


/* =========================================================
   V49 — reproductor del portfolio
   ========================================================= */
html.player-open, html.player-open body { overflow: hidden; }
.player { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
.player.is-open { visibility: visible; opacity: 1; transition: opacity .45s ease, visibility 0s; }
.player__backdrop { position: absolute; inset: 0; background: rgba(5,6,2,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.player__stage {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
  width: min(1200px, 92vw);
  transform: translateY(18px) scale(.97); transition: transform .55s cubic-bezier(.2,.7,.1,1);
}
.player.is-open .player__stage { transform: none; }
.player.is-vertical .player__stage { width: min(440px, 88vw); }
.player__frame { position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.player__video { display: block; width: 100%; max-height: 76vh; background: #000; cursor: pointer; }
.player.is-vertical .player__video { max-height: 78vh; aspect-ratio: 9 / 16; object-fit: contain; }
.player__frame:fullscreen { border-radius: 0; display: grid; place-items: center; }
.player__frame:fullscreen .player__video { max-height: 100vh; height: 100%; }

.player__bar { display: flex; align-items: center; gap: 14px; padding: 4px 2px; }
.player__btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #f1ebe0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  transition: background .25s, border-color .25s, transform .25s;
}
.player__btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: scale(1.05); }
.player__btn svg { width: 17px; height: 17px; fill: currentColor; }
.player__mute svg, .player__full svg { fill: none; }
.player__time { flex: none; min-width: 84px; font-size: 12px; color: rgba(242,242,242,.55); font-variant-numeric: tabular-nums; }
.player__time b { color: #f1ebe0; font-weight: 400; }
.player__timeline { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.player__timeline::before, .player__buffer, .player__progress { content: ""; position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; }
.player__timeline::before { right: 0; background: rgba(255,255,255,.14); }
.player__buffer { width: 0; background: rgba(255,255,255,.24); }
.player__progress { width: 0; background: #f1ebe0; box-shadow: 0 0 10px rgba(241,235,224,.4); }
.player__progress i { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateY(-50%) scale(0); transition: transform .2s; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.player__timeline:hover .player__progress i, .player__timeline:active .player__progress i { transform: translateY(-50%) scale(1); }
.player__timeline:hover::before, .player__timeline:hover .player__buffer, .player__timeline:hover .player__progress { height: 5px; }
.player__title { margin: 0; text-align: center; font: 500 15px/1 "Jost", "Helvetica Neue", Arial, sans-serif !important; letter-spacing: .28em !important; text-transform: uppercase; color: rgba(241,235,224,.8); }
.player__close {
  position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #f1ebe0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: background .25s, transform .3s;
}
.player__close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
.player__close svg { width: 18px; height: 18px; }
.piece { cursor: pointer; }
@media (max-width: 600px) {
  .player__stage { width: 94vw; }
  .player__bar { gap: 10px; }
  .player__time { min-width: 70px; font-size: 11px; }
  .player__full { display: none; }
  .player__close { top: -48px; }
}
/* con el reproductor abierto, fuera el grano y la viñeta de la web: el proyecto se ve limpio */
.grain, .vignette, body::before, body::after { transition: opacity .4s ease; }
html.player-open .grain, html.player-open .vignette,
html.player-open body::before, html.player-open body::after { opacity: 0 !important; animation-play-state: paused; }

/* =========================================================
   V50 — verticales en 2 filas (4 arriba, 3 abajo centrados)
   ========================================================= */
.pf__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.pf__grid .piece { flex: 0 0 calc((100% - 3 * 18px) / 4); aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .pf__grid { gap: 12px; }
  .pf__grid .piece { flex-basis: calc((100% - 12px) / 2); }
}
/* V51 — Qué es: pregunta "¿Qué recibes?" */
.style-card__ask { margin: 16px 0 0; font: italic 300 19px/1.2 var(--f-serif) !important; letter-spacing: 0 !important; color: #DCC8A3 !important; }
.style-card__ask + .style-card__list { margin-top: 10px; }

/* =========================================================
   V52 — tarjetas de servicio: blanco roto con textura de tejido
   + cajita enmarcada con lo que recibes
   ========================================================= */
.style-card {
  --ink-dark: #1F3D2E;
  color: var(--ink-dark);
  border: 1px solid rgba(31,61,46,.08) !important;
  background-color: #F2F2F2 !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(31,61,46,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(31,61,46,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 85% -10%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(ellipse at 0% 110%, rgba(31,61,46,.07), transparent 60%) !important;
  background-size: auto !important;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.6) inset;
}
/* grano fino de tela por encima */
.style-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; opacity: .45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.25'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
}
.style-card > * { position: relative; z-index: 1; }
.style-card .tag { color: #6B7F4E; }
.style-card h3 {
  color: var(--ink-dark) !important; -webkit-text-fill-color: var(--ink-dark) !important;
  -webkit-text-stroke: 0 !important; background: none !important; filter: none !important; animation: none !important;
}
.style-card p { color: rgba(31,61,46,.78) !important; }
.style-card .style-card__note { color: rgba(31,61,46,.58) !important; }
.style-card.spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 45%); }

/* cajita con lo que recibes */
.deliver {
  position: relative; margin: 26px 0 20px;
  padding: 22px 20px 16px;
  border: 1px solid rgba(31,61,46,.75); border-radius: 4px;
  background: rgba(255,255,255,.5);
  box-shadow: 4px 4px 0 rgba(31,61,46,.12);
}
.deliver__label {
  position: absolute; top: -9px; left: 16px; padding: 0 8px;
  background: #F2F2F2; font-size: 11px; line-height: 18px; text-transform: uppercase; color: var(--ink-dark);
}
.deliver__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.deliver__list li { position: relative; padding-left: 30px; color: var(--ink-dark); font-size: 14px; line-height: 1.45; }
.deliver__list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-dark) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 12px no-repeat;
}
.deliver--grid .deliver__list { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 600px) { .deliver--grid .deliver__list { grid-template-columns: 1fr; } }

/* =========================================================
   V53 — negro del fondo algo más claro + blanco roto más oscuro
   + franja de marcas bajo el mapa
   ========================================================= */
:root { --bg-dark: #121310; }
body { background: var(--bg-dark); }
.about, .work, .baul, .pablo, .footer, .brands-band { background: var(--bg-dark) !important; }
.style-card, .style-card .deliver__label { background-color: #dcdad3 !important; }
.style-card .deliver__label { background: #dcdad3; }
.deliver { background: rgba(255,255,255,.28); }

.brands-band { position: relative; padding: clamp(48px, 6vw, 80px) 0 clamp(20px, 3vw, 40px); border-top: 1px solid rgba(242,242,242,.09); }
.brands-band::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(70%, 900px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(241,235,224,.45), transparent);
}
.brands-band .brands { margin-top: 0; }
/* la separación ya la hace la franja de marcas */
.about { border-top: 0; }
.about::before { display: none; }
/* V54 — menos aire entre el mapa, las marcas y "Qué es" */
.brands-band { padding: clamp(28px, 3.5vw, 48px) 0 0; }
.brands-band .brands__title { margin-bottom: 18px; }
.about { padding-top: clamp(48px, 6vw, 80px) !important; }
.map { padding-bottom: clamp(24px, 3vw, 40px) !important; }

/* =========================================================
   V55 — marcas pegadas al mapa, fundido suave y agradecimiento
   ========================================================= */
.brands-band { padding: 0; border-top: 0; }
.brands-band::before { display: none; }
.brands-band .brands__viewport { box-shadow: none; }
/* el blanco no se corta: se funde con el fondo hacia abajo */
.brands-band .brands { position: relative; }
.brands-band .brands::after {
  content: ""; display: block; height: clamp(90px, 10vw, 150px); pointer-events: none;
  background: linear-gradient(180deg, var(--bone) 0%, rgba(242,242,242,.55) 22%, rgba(242,242,242,.18) 48%, rgba(242,242,242,.05) 72%, rgba(18,19,16,0) 100%);
  margin-top: -1px;
}
.brands__thanks {
  position: relative; z-index: 1; margin: clamp(-70px, -6vw, -46px) 0 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 clamp(15px, 1.4vw, 19px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .26em !important; text-transform: uppercase; color: #2a2a26;
}
.heart { width: 18px; height: 18px; fill: #6e1414; flex: none; animation: heartbeat 1.3s ease-in-out infinite; transform-origin: center; filter: drop-shadow(0 0 4px rgba(110,20,20,.35)); }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.22); }
  28% { transform: scale(1); }
  42% { transform: scale(1.14); }
  60% { transform: scale(1); }
}
.map { padding-bottom: 0 !important; }
.map__stats { margin-bottom: 26px; }
/* fundido más largo y suave; el agradecimiento al final del fundido, sobre lo oscuro */
.brands-band .brands::after {
  height: clamp(200px, 20vw, 300px);
  background: linear-gradient(180deg,
    rgba(242,242,242,1) 0%, rgba(232,232,230,.86) 10%, rgba(200,200,196,.62) 24%,
    rgba(150,150,146,.38) 40%, rgba(90,90,86,.18) 58%, rgba(40,41,38,.06) 78%, rgba(18,19,16,0) 100%);
}
.brands__thanks { margin-top: clamp(-90px, -7vw, -60px); color: #e9e3d6; }
.heart { fill: #7a1414; filter: drop-shadow(0 0 6px rgba(140,20,20,.5)); }

/* =========================================================
   V56 — fundido de la banda de marcas, bien hecho:
   el degradado es la propia banda (mismo grano, sin escalón)
   ========================================================= */
.brands-band .brands::after { display: none; }
.brands-band .brands__viewport {
  --fade: clamp(180px, 18vw, 260px);
  padding: 34px 0 calc(34px + var(--fade));
  background: linear-gradient(180deg,
    #F2F2F2 0,
    #F2F2F2 calc(100% - var(--fade)),
    rgba(242,242,242,.82) calc(100% - var(--fade) * .86),
    rgba(242,242,242,.58) calc(100% - var(--fade) * .70),
    rgba(242,242,242,.36) calc(100% - var(--fade) * .52),
    rgba(242,242,242,.19) calc(100% - var(--fade) * .35),
    rgba(242,242,242,.08) calc(100% - var(--fade) * .18),
    rgba(242,242,242,0) 100%);
}
/* el grano de la banda se apaga con el blanco, sin cortar */
.brands-band .brands__viewport::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
/* los desenfoques laterales solo en la franja de los logos */
.brands-band .brands__viewport::after { bottom: var(--fade); }
.brands__thanks { margin-top: calc(clamp(180px, 18vw, 260px) * -.42); }
.heart { width: 20px; height: 20px; }
/* la franja de marcas va por encima de "Qué es", para que su fundido no quede tapado */
.brands-band { position: relative; z-index: 2; }

/* V57 — agradecimiento: fuera del gris, en cursiva, como una firma */
.brands__thanks {
  margin: clamp(10px, 1.5vw, 20px) 0 0 !important;
  font: italic 300 clamp(20px, 1.9vw, 26px)/1.2 var(--f-serif) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: rgba(241,235,224,.82) !important; gap: 12px;
}
.brands__thanks .heart { width: 16px; height: 16px; margin-top: 2px; }
.brands-band .brands__viewport { --fade: clamp(150px, 14vw, 210px); }

/* =========================================================
   V58 — cabecera editorial (tipo cartel): grotesca apretada, blanco plano
   ========================================================= */
.hero { justify-content: stretch; align-items: stretch; }
.hero__shade {
  background:
    linear-gradient(180deg, rgba(11,13,0,.35) 0%, transparent 30%, transparent 65%, rgba(11,13,0,.6) 100%);
}
.hero__poster {
  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-rows: auto 1fr;
  padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(90px, 14vh, 150px);
  color: #f4f2ec;
}
.poster__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  margin: 0;
  font: 400 clamp(30px, 4.6vw, 72px)/1 var(--f-sans) !important;
  letter-spacing: -.05em !important; text-transform: uppercase;
  color: #f4f2ec; -webkit-text-fill-color: #f4f2ec;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.poster__list {
  list-style: none; margin: 0; padding: 0;
  align-self: center; justify-self: start;
  margin-left: 33%;
  font: 400 clamp(15px, 1.5vw, 22px)/1.25 var(--f-sans) !important;
  letter-spacing: -.04em !important; text-transform: uppercase;
  color: #f4f2ec;
}
.poster__list li { opacity: 0; transform: translateY(10px); animation: poster-in .9s cubic-bezier(.2,.7,.1,1) forwards; }
.poster__list li:nth-child(1) { animation-delay: .5s; }
.poster__list li:nth-child(2) { animation-delay: .62s; }
.poster__list li:nth-child(3) { animation-delay: .74s; }
.poster__top span { opacity: 0; animation: poster-in .9s cubic-bezier(.2,.7,.1,1) .2s forwards; }
.poster__top span + span { animation-delay: .32s; }
@keyframes poster-in { to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hero__poster { padding-top: 120px; }
  .poster__top { font-size: clamp(24px, 7.4vw, 36px); }
  .poster__list { margin-left: 0; font-size: 15px; }
}

/* =========================================================
   V59 — transición cabecera → mapa: borde irregular con textura de corteza
   ========================================================= */
.hero__edge {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none;
  height: clamp(70px, 8vw, 120px);
  background-color: #0B0D00;
  /* vetas de corteza: líneas finas y quebradas */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='160'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.006 .055' numOctaves='4' seed='14' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0'/></feComponentTransfer><feColorMatrix type='matrix' values='0 0 0 0 .78  0 0 0 0 .8  0 0 0 0 .66  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  background-size: 520px 160px;
  /* silueta irregular, como el borde de un trozo de corteza */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 42 L18 38 L33 44 L52 36 L70 41 L86 33 L104 39 L121 31 L140 37 L157 35 L176 43 L193 36 L212 40 L230 30 L248 36 L266 33 L284 41 L301 35 L320 38 L338 29 L357 35 L374 32 L392 40 L410 34 L428 37 L447 28 L465 34 L482 31 L500 39 L519 33 L537 36 L555 27 L574 33 L591 30 L609 38 L627 32 L646 35 L664 27 L682 34 L700 30 L718 38 L737 33 L755 36 L773 28 L791 35 L809 31 L828 39 L846 33 L864 37 L882 29 L901 35 L919 32 L937 40 L955 34 L973 38 L1000 33 L1000 100 L0 100 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 42 L18 38 L33 44 L52 36 L70 41 L86 33 L104 39 L121 31 L140 37 L157 35 L176 43 L193 36 L212 40 L230 30 L248 36 L266 33 L284 41 L301 35 L320 38 L338 29 L357 35 L374 32 L392 40 L410 34 L428 37 L447 28 L465 34 L482 31 L500 39 L519 33 L537 36 L555 27 L574 33 L591 30 L609 38 L627 32 L646 35 L664 27 L682 34 L700 30 L718 38 L737 33 L755 36 L773 28 L791 35 L809 31 L828 39 L846 33 L864 37 L882 29 L901 35 L919 32 L937 40 L955 34 L973 38 L1000 33 L1000 100 L0 100 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* las vetas se apagan hacia abajo para fundirse con el mapa */
.hero__edge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, #0B0D00 100%);
}
.hero__meta { z-index: 4; bottom: clamp(80px, 9vw, 130px); }

/* V60 — transición rehecha: franja de corteza verde con grietas, bordes orgánicos */
.hero__edge {
  height: clamp(64px, 7vw, 104px);
  background-color: #2b4120;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.009 .03' numOctaves='3' seed='31' stitchTiles='stitch' result='n'/><feColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='1 .35 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer><feColorMatrix type='matrix' values='0 0 0 0 .9  0 0 0 0 .89  0 0 0 0 .8  0 0 0 .9 0'/></filter><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .9  0 0 0 0 .89  0 0 0 0 .8  1 0 0 0 -.62'/></filter><rect width='100%' height='100%' filter='url(%23c)'/><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  background-size: 600px 200px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 16.6 L16.8 9.0 L29.0 13.1 L43.6 11.2 L51.8 18.0 L65.0 22.8 L75.0 17.6 L94.5 14.8 L113.8 18.6 L132.1 7.9 L147.0 17.6 L164.7 3.6 L175.2 9.1 L184.7 10.6 L201.8 10.6 L215.0 15.7 L232.7 13.5 L238.8 19.6 L250.6 15.5 L260.3 10.5 L272.4 20.7 L288.6 14.7 L307.7 19.5 L326.9 10.7 L345.7 11.5 L363.4 13.3 L374.6 15.7 L389.5 5.6 L400.8 10.4 L414.3 8.8 L428.0 11.6 L434.7 15.5 L451.6 16.1 L468.5 9.4 L478.1 11.1 L494.7 20.1 L505.0 13.3 L524.1 14.2 L536.1 19.2 L543.2 17.7 L557.0 10.5 L567.3 11.9 L584.4 17.6 L601.2 11.6 L607.5 13.5 L626.6 14.7 L635.8 15.8 L649.1 7.3 L665.8 15.6 L675.0 8.7 L686.1 6.0 L699.8 8.1 L714.5 14.7 L734.3 17.2 L752.9 17.8 L770.1 11.9 L787.5 18.3 L806.3 18.4 L818.3 10.0 L838.1 12.2 L851.0 9.1 L860.1 5.4 L874.0 15.1 L892.4 8.4 L912.0 14.4 L919.6 7.4 L934.6 8.2 L942.4 20.2 L957.0 17.4 L964.5 20.8 L971.3 11.3 L988.4 19.1 L996.3 11.9 L1000 14.0 L1000 86.0 L994.0 88.8 L974.6 95.9 L965.1 89.2 L950.2 81.7 L943.0 85.5 L923.4 86.7 L903.8 83.3 L884.9 78.5 L876.2 85.1 L863.5 87.6 L847.1 88.7 L839.2 89.2 L822.1 85.3 L804.9 87.3 L787.1 84.5 L774.1 83.0 L760.6 87.5 L746.1 92.4 L733.9 86.5 L715.9 83.8 L699.7 92.4 L688.1 87.9 L677.3 90.1 L658.2 81.6 L644.8 77.0 L636.1 82.3 L617.2 78.2 L600.7 83.1 L584.5 82.1 L575.8 79.8 L567.3 90.6 L552.2 91.1 L540.2 89.9 L529.3 88.1 L522.0 94.0 L515.0 88.4 L499.9 92.8 L491.9 85.3 L476.0 88.8 L462.5 79.5 L450.2 90.6 L440.1 76.9 L423.5 89.4 L411.8 89.4 L395.1 77.7 L386.5 88.9 L368.9 84.3 L354.4 87.0 L334.8 90.9 L322.2 84.0 L312.3 86.7 L304.8 87.7 L292.1 90.8 L275.7 86.7 L264.7 93.8 L256.9 83.4 L245.1 84.9 L230.7 86.1 L211.4 82.8 L205.4 88.6 L187.0 84.1 L168.1 82.7 L151.9 77.5 L144.1 77.9 L128.7 84.2 L118.6 81.7 L105.2 89.0 L85.7 93.7 L66.4 95.1 L55.4 86.0 L42.4 87.4 L35.6 86.4 L19.8 89.6 L8.4 90.4 L0.0 91.1 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 16.6 L16.8 9.0 L29.0 13.1 L43.6 11.2 L51.8 18.0 L65.0 22.8 L75.0 17.6 L94.5 14.8 L113.8 18.6 L132.1 7.9 L147.0 17.6 L164.7 3.6 L175.2 9.1 L184.7 10.6 L201.8 10.6 L215.0 15.7 L232.7 13.5 L238.8 19.6 L250.6 15.5 L260.3 10.5 L272.4 20.7 L288.6 14.7 L307.7 19.5 L326.9 10.7 L345.7 11.5 L363.4 13.3 L374.6 15.7 L389.5 5.6 L400.8 10.4 L414.3 8.8 L428.0 11.6 L434.7 15.5 L451.6 16.1 L468.5 9.4 L478.1 11.1 L494.7 20.1 L505.0 13.3 L524.1 14.2 L536.1 19.2 L543.2 17.7 L557.0 10.5 L567.3 11.9 L584.4 17.6 L601.2 11.6 L607.5 13.5 L626.6 14.7 L635.8 15.8 L649.1 7.3 L665.8 15.6 L675.0 8.7 L686.1 6.0 L699.8 8.1 L714.5 14.7 L734.3 17.2 L752.9 17.8 L770.1 11.9 L787.5 18.3 L806.3 18.4 L818.3 10.0 L838.1 12.2 L851.0 9.1 L860.1 5.4 L874.0 15.1 L892.4 8.4 L912.0 14.4 L919.6 7.4 L934.6 8.2 L942.4 20.2 L957.0 17.4 L964.5 20.8 L971.3 11.3 L988.4 19.1 L996.3 11.9 L1000 14.0 L1000 86.0 L994.0 88.8 L974.6 95.9 L965.1 89.2 L950.2 81.7 L943.0 85.5 L923.4 86.7 L903.8 83.3 L884.9 78.5 L876.2 85.1 L863.5 87.6 L847.1 88.7 L839.2 89.2 L822.1 85.3 L804.9 87.3 L787.1 84.5 L774.1 83.0 L760.6 87.5 L746.1 92.4 L733.9 86.5 L715.9 83.8 L699.7 92.4 L688.1 87.9 L677.3 90.1 L658.2 81.6 L644.8 77.0 L636.1 82.3 L617.2 78.2 L600.7 83.1 L584.5 82.1 L575.8 79.8 L567.3 90.6 L552.2 91.1 L540.2 89.9 L529.3 88.1 L522.0 94.0 L515.0 88.4 L499.9 92.8 L491.9 85.3 L476.0 88.8 L462.5 79.5 L450.2 90.6 L440.1 76.9 L423.5 89.4 L411.8 89.4 L395.1 77.7 L386.5 88.9 L368.9 84.3 L354.4 87.0 L334.8 90.9 L322.2 84.0 L312.3 86.7 L304.8 87.7 L292.1 90.8 L275.7 86.7 L264.7 93.8 L256.9 83.4 L245.1 84.9 L230.7 86.1 L211.4 82.8 L205.4 88.6 L187.0 84.1 L168.1 82.7 L151.9 77.5 L144.1 77.9 L128.7 84.2 L118.6 81.7 L105.2 89.0 L85.7 93.7 L66.4 95.1 L55.4 86.0 L42.4 87.4 L35.6 86.4 L19.8 89.6 L8.4 90.4 L0.0 91.1 Z' fill='black'/></svg>");
  filter: drop-shadow(0 -2px 6px rgba(0,0,0,.35));
}
.hero__edge::after { display: none; }
/* debajo de la franja, el fondo del mapa (sin franja recta) */
.hero__edge-base {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none;
  height: clamp(64px, 7vw, 104px); background: #0B0D00;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 16.6 L16.8 9.0 L29.0 13.1 L43.6 11.2 L51.8 18.0 L65.0 22.8 L75.0 17.6 L94.5 14.8 L113.8 18.6 L132.1 7.9 L147.0 17.6 L164.7 3.6 L175.2 9.1 L184.7 10.6 L201.8 10.6 L215.0 15.7 L232.7 13.5 L238.8 19.6 L250.6 15.5 L260.3 10.5 L272.4 20.7 L288.6 14.7 L307.7 19.5 L326.9 10.7 L345.7 11.5 L363.4 13.3 L374.6 15.7 L389.5 5.6 L400.8 10.4 L414.3 8.8 L428.0 11.6 L434.7 15.5 L451.6 16.1 L468.5 9.4 L478.1 11.1 L494.7 20.1 L505.0 13.3 L524.1 14.2 L536.1 19.2 L543.2 17.7 L557.0 10.5 L567.3 11.9 L584.4 17.6 L601.2 11.6 L607.5 13.5 L626.6 14.7 L635.8 15.8 L649.1 7.3 L665.8 15.6 L675.0 8.7 L686.1 6.0 L699.8 8.1 L714.5 14.7 L734.3 17.2 L752.9 17.8 L770.1 11.9 L787.5 18.3 L806.3 18.4 L818.3 10.0 L838.1 12.2 L851.0 9.1 L860.1 5.4 L874.0 15.1 L892.4 8.4 L912.0 14.4 L919.6 7.4 L934.6 8.2 L942.4 20.2 L957.0 17.4 L964.5 20.8 L971.3 11.3 L988.4 19.1 L996.3 11.9 L1000 14.0 L1000 100 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 16.6 L16.8 9.0 L29.0 13.1 L43.6 11.2 L51.8 18.0 L65.0 22.8 L75.0 17.6 L94.5 14.8 L113.8 18.6 L132.1 7.9 L147.0 17.6 L164.7 3.6 L175.2 9.1 L184.7 10.6 L201.8 10.6 L215.0 15.7 L232.7 13.5 L238.8 19.6 L250.6 15.5 L260.3 10.5 L272.4 20.7 L288.6 14.7 L307.7 19.5 L326.9 10.7 L345.7 11.5 L363.4 13.3 L374.6 15.7 L389.5 5.6 L400.8 10.4 L414.3 8.8 L428.0 11.6 L434.7 15.5 L451.6 16.1 L468.5 9.4 L478.1 11.1 L494.7 20.1 L505.0 13.3 L524.1 14.2 L536.1 19.2 L543.2 17.7 L557.0 10.5 L567.3 11.9 L584.4 17.6 L601.2 11.6 L607.5 13.5 L626.6 14.7 L635.8 15.8 L649.1 7.3 L665.8 15.6 L675.0 8.7 L686.1 6.0 L699.8 8.1 L714.5 14.7 L734.3 17.2 L752.9 17.8 L770.1 11.9 L787.5 18.3 L806.3 18.4 L818.3 10.0 L838.1 12.2 L851.0 9.1 L860.1 5.4 L874.0 15.1 L892.4 8.4 L912.0 14.4 L919.6 7.4 L934.6 8.2 L942.4 20.2 L957.0 17.4 L964.5 20.8 L971.3 11.3 L988.4 19.1 L996.3 11.9 L1000 14.0 L1000 100 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero__edge { z-index: 4; }

/* V61 — corteza: grietas nítidas (curvas de nivel del ruido), verde musgo, bordes suaves */
.hero__edge {
  background-color: #2f4c26;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><filter id='a' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .016' numOctaves='3' seed='8' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0'/></feComponentTransfer><feColorMatrix type='matrix' values='0 0 0 0 .93  0 0 0 0 .92  0 0 0 0 .84  0 0 0 .95 0'/></filter><filter id='b' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='2' seed='19' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0'/></feComponentTransfer><feColorMatrix type='matrix' values='0 0 0 0 .93  0 0 0 0 .92  0 0 0 0 .84  0 0 0 .6 0'/></filter><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='1' seed='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .93  0 0 0 0 .92  0 0 0 0 .84  1.2 0 0 0 -.78'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  background-size: 600px 200px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 18.1 L21.5 14.1 L48.7 12.6 L70.2 12.3 L95.7 21.2 L109.5 18.0 L126.0 12.6 L139.9 12.7 L154.0 11.3 L179.3 12.5 L197.2 9.4 L211.6 10.7 L237.4 10.2 L258.1 13.8 L282.9 6.3 L301.1 12.2 L327.9 17.8 L345.0 12.2 L366.2 19.2 L387.3 21.5 L403.2 15.7 L421.5 19.7 L437.9 17.7 L447.9 16.9 L466.9 20.7 L486.4 13.8 L509.4 18.4 L526.1 10.8 L548.0 5.8 L573.1 9.7 L588.8 11.4 L603.6 14.1 L621.9 11.8 L645.7 12.9 L669.9 17.9 L690.1 19.4 L703.6 17.8 L724.4 15.9 L742.7 19.4 L757.6 21.1 L770.5 15.5 L792.2 13.3 L802.6 16.7 L821.3 15.6 L847.8 7.6 L860.9 15.1 L876.6 11.7 L902.0 14.5 L914.9 9.3 L935.1 8.6 L962.6 16.0 L981.1 10.2 L1000 14.0 L1000 86.0 L997.3 84.9 L984.2 83.8 L958.9 81.3 L947.4 80.8 L933.8 83.6 L906.8 84.9 L885.1 84.6 L869.5 84.9 L841.7 83.9 L813.7 83.6 L789.9 88.5 L774.6 85.4 L761.6 86.0 L750.6 91.7 L739.8 91.0 L715.4 90.0 L702.5 87.4 L678.3 84.4 L663.1 82.6 L637.3 81.3 L612.8 86.9 L584.9 80.3 L563.9 85.1 L546.5 81.6 L520.9 84.1 L503.4 83.4 L488.2 83.2 L476.6 90.3 L465.6 85.3 L438.4 86.4 L424.6 91.8 L404.9 89.5 L381.6 85.6 L366.7 89.2 L347.7 87.7 L336.7 84.7 L325.1 88.8 L308.7 83.0 L286.0 86.6 L271.3 86.3 L257.5 83.9 L246.1 85.0 L234.4 80.5 L211.4 81.1 L190.3 87.1 L174.4 83.7 L156.7 84.6 L134.5 85.5 L110.2 85.1 L92.5 86.8 L74.4 90.1 L60.6 89.5 L33.5 87.1 L20.9 85.0 L0.0 87.7 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0.0 18.1 L21.5 14.1 L48.7 12.6 L70.2 12.3 L95.7 21.2 L109.5 18.0 L126.0 12.6 L139.9 12.7 L154.0 11.3 L179.3 12.5 L197.2 9.4 L211.6 10.7 L237.4 10.2 L258.1 13.8 L282.9 6.3 L301.1 12.2 L327.9 17.8 L345.0 12.2 L366.2 19.2 L387.3 21.5 L403.2 15.7 L421.5 19.7 L437.9 17.7 L447.9 16.9 L466.9 20.7 L486.4 13.8 L509.4 18.4 L526.1 10.8 L548.0 5.8 L573.1 9.7 L588.8 11.4 L603.6 14.1 L621.9 11.8 L645.7 12.9 L669.9 17.9 L690.1 19.4 L703.6 17.8 L724.4 15.9 L742.7 19.4 L757.6 21.1 L770.5 15.5 L792.2 13.3 L802.6 16.7 L821.3 15.6 L847.8 7.6 L860.9 15.1 L876.6 11.7 L902.0 14.5 L914.9 9.3 L935.1 8.6 L962.6 16.0 L981.1 10.2 L1000 14.0 L1000 86.0 L997.3 84.9 L984.2 83.8 L958.9 81.3 L947.4 80.8 L933.8 83.6 L906.8 84.9 L885.1 84.6 L869.5 84.9 L841.7 83.9 L813.7 83.6 L789.9 88.5 L774.6 85.4 L761.6 86.0 L750.6 91.7 L739.8 91.0 L715.4 90.0 L702.5 87.4 L678.3 84.4 L663.1 82.6 L637.3 81.3 L612.8 86.9 L584.9 80.3 L563.9 85.1 L546.5 81.6 L520.9 84.1 L503.4 83.4 L488.2 83.2 L476.6 90.3 L465.6 85.3 L438.4 86.4 L424.6 91.8 L404.9 89.5 L381.6 85.6 L366.7 89.2 L347.7 87.7 L336.7 84.7 L325.1 88.8 L308.7 83.0 L286.0 86.6 L271.3 86.3 L257.5 83.9 L246.1 85.0 L234.4 80.5 L211.4 81.1 L190.3 87.1 L174.4 83.7 L156.7 84.6 L134.5 85.5 L110.2 85.1 L92.5 86.8 L74.4 90.1 L60.6 89.5 L33.5 87.1 L20.9 85.0 L0.0 87.7 Z' fill='black'/></svg>");
}
.hero__edge-base {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 18.1 L21.5 14.1 L48.7 12.6 L70.2 12.3 L95.7 21.2 L109.5 18.0 L126.0 12.6 L139.9 12.7 L154.0 11.3 L179.3 12.5 L197.2 9.4 L211.6 10.7 L237.4 10.2 L258.1 13.8 L282.9 6.3 L301.1 12.2 L327.9 17.8 L345.0 12.2 L366.2 19.2 L387.3 21.5 L403.2 15.7 L421.5 19.7 L437.9 17.7 L447.9 16.9 L466.9 20.7 L486.4 13.8 L509.4 18.4 L526.1 10.8 L548.0 5.8 L573.1 9.7 L588.8 11.4 L603.6 14.1 L621.9 11.8 L645.7 12.9 L669.9 17.9 L690.1 19.4 L703.6 17.8 L724.4 15.9 L742.7 19.4 L757.6 21.1 L770.5 15.5 L792.2 13.3 L802.6 16.7 L821.3 15.6 L847.8 7.6 L860.9 15.1 L876.6 11.7 L902.0 14.5 L914.9 9.3 L935.1 8.6 L962.6 16.0 L981.1 10.2 L1000 14.0 L1000 100 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M0 100 L0.0 18.1 L21.5 14.1 L48.7 12.6 L70.2 12.3 L95.7 21.2 L109.5 18.0 L126.0 12.6 L139.9 12.7 L154.0 11.3 L179.3 12.5 L197.2 9.4 L211.6 10.7 L237.4 10.2 L258.1 13.8 L282.9 6.3 L301.1 12.2 L327.9 17.8 L345.0 12.2 L366.2 19.2 L387.3 21.5 L403.2 15.7 L421.5 19.7 L437.9 17.7 L447.9 16.9 L466.9 20.7 L486.4 13.8 L509.4 18.4 L526.1 10.8 L548.0 5.8 L573.1 9.7 L588.8 11.4 L603.6 14.1 L621.9 11.8 L645.7 12.9 L669.9 17.9 L690.1 19.4 L703.6 17.8 L724.4 15.9 L742.7 19.4 L757.6 21.1 L770.5 15.5 L792.2 13.3 L802.6 16.7 L821.3 15.6 L847.8 7.6 L860.9 15.1 L876.6 11.7 L902.0 14.5 L914.9 9.3 L935.1 8.6 L962.6 16.0 L981.1 10.2 L1000 14.0 L1000 100 Z' fill='black'/></svg>");
}

/* V62 — sin franja de color: el oscuro del mapa sube al vídeo agrietándose (corteza) */
.hero__edge-base { display: none; }
.hero__edge {
  height: 220px; bottom: -1px;
  background: url("assets/img/bark-edge.svg?v=20261027") repeat-x left bottom / auto 220px !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  filter: none !important;
}
@media (max-width: 760px) {
  .hero__edge { height: 160px; background-size: auto 160px !important; }
}

/* =========================================================
   V63 — portada más centrada y pequeña en blanco roto;
   todos los títulos con la tipografía de la cabecera
   ========================================================= */
:root { --offwhite: #e9e5db; }

/* portada */
.hero__poster {
  width: min(980px, 100%); margin: 0 auto;
  padding: clamp(150px, 26vh, 260px) var(--gutter) clamp(110px, 18vh, 180px);
  color: var(--offwhite);
}
.poster__top { font-size: clamp(22px, 2.6vw, 38px) !important; color: var(--offwhite); -webkit-text-fill-color: var(--offwhite); text-shadow: 0 1px 18px rgba(0,0,0,.3); }
.poster__list { margin-left: 0; justify-self: center; text-align: left; font-size: clamp(13px, 1.1vw, 16px) !important; color: var(--offwhite); line-height: 1.3; }
.hero__meta { display: none; }

/* títulos de sección: misma grotesca apretada, un solo color, sin brillo ni metal */
.h-section, .h-section em,
.pf__title, .chest h3, .footer__big, .footer__big em, .footer__big .shine {
  font-family: var(--f-sans) !important; font-weight: 400 !important; font-style: normal !important;
  letter-spacing: -.05em !important; text-transform: uppercase !important;
  color: var(--offwhite) !important; -webkit-text-fill-color: var(--offwhite) !important;
  -webkit-text-stroke: 0 !important; background: none !important; animation: none !important;
  filter: none !important; text-shadow: none !important;
}
.h-section { font-size: clamp(30px, 4.6vw, 64px) !important; line-height: 1 !important; }
.h-section em { font-size: 1em !important; }
.pf__title { font-size: clamp(20px, 2vw, 28px) !important; }
.pf__title span { color: var(--olive) !important; -webkit-text-fill-color: var(--olive) !important; font-size: 11px; letter-spacing: -.02em !important; }
.footer__big { font-size: clamp(44px, 9vw, 140px) !important; }

/* títulos sobre papel / tarjetas claras: misma fuente, tinta oscura */
.paper__brand, .style-card h3 {
  font-family: var(--f-sans) !important; font-weight: 400 !important; font-style: normal !important;
  letter-spacing: -.05em !important; text-transform: uppercase !important;
  color: #1F3D2E !important; -webkit-text-fill-color: #1F3D2E !important;
}
.paper__brand { font-size: 22px !important; line-height: 1.05 !important; }
.paper--photo .paper__brand { font-size: 18px !important; }
.style-card h3 { font-size: clamp(22px, 2.2vw, 32px) !important; line-height: 1.05 !important; }

/* =========================================================
   V64 — El Baúl: vista tipo Finder (carpetas estilo macOS)
   ========================================================= */
.chest { display: none; }
.baul__grid { grid-template-columns: 1fr; max-width: 720px; }
.vault {
  position: relative; margin-top: clamp(40px, 5vw, 70px);
  container-type: inline-size;
  aspect-ratio: 1828 / 1014;
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 60% 55%, #dedede 0%, #bdbdbd 45%, #8f8f8f 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.vault, .vault * { letter-spacing: 0 !important; }
.vault__panel, .vault__root { position: absolute; background: #fff; }
.vault__root { left: 1.1%; top: 3%; width: 16.5%; height: 43.7%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vault__big { width: 64%; height: auto; margin-bottom: 8%; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.18)); }
.vault__name { margin: 0; font: 500 1.95cqw/1.25 inherit !important; font-family: inherit !important; color: #2b2b2b; }
.vault__count { margin: .3cqw 0 0; font: 400 1.6cqw/1 inherit !important; font-family: inherit !important; color: #2e7cf6; }

.vault__main { left: 24.3%; top: 3%; width: 51.6%; height: 48.6%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); padding: .6cqw 1cqw; }
.vf { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35cqw; will-change: transform, opacity; }
.vf__ico { width: 4.9cqw; height: auto; filter: drop-shadow(0 .15cqw .25cqw rgba(0,0,0,.12)); }
.vf span { font-size: 1cqw; line-height: 1.15; color: #2b2b2b; text-align: center; white-space: nowrap; }
.vf.is-hl::after { content: ""; position: absolute; inset: 4% 6%; border: .13cqw solid #6B7F4E; pointer-events: none; }

.vault__sub { display: grid; padding: .5cqw .6cqw; }
.vault__sub .vf__ico { width: 3.4cqw; }
.vault__sub .vf span { font-size: .72cqw; }
.vault__sub--risers { left: 79.6%; top: 12.8%; width: 17.6%; height: 10.6%; grid-template-columns: repeat(3, 1fr); }
.vault__sub--textures { left: 44.3%; top: 61.8%; width: 25.3%; height: 11.4%; grid-template-columns: repeat(4, 1fr); }
.vault__sub--foley { left: 11.2%; top: 61.8%; width: 29.7%; height: 33.2%; display: flex; flex-direction: column; padding: .4cqw .5cqw; }
.vault__row4 { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1.15; }
.vault__row4 .vf__ico { width: 4.2cqw; }
.vault__row4 .vf span { font-size: .9cqw; }
.vault__row6 { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); flex: 2; }
.vault__row6 .vf__ico { width: 2.75cqw; }
.vault__row6 .vf span { font-size: .58cqw; white-space: normal; }

.vault__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.vault__lines line { stroke: #6B7F4E; stroke-width: 1.4; }

/* móvil: sin diagrama, en columna */
@media (max-width: 760px) {
  .vault { aspect-ratio: auto; padding: 14px; display: grid; gap: 12px; container-type: inline-size; }
  .vault__panel, .vault__root { position: static; width: auto !important; height: auto !important; border-radius: 4px; }
  .vault__root { padding: 18px 0; }
  .vault__big { width: 30%; }
  .vault__name { font-size: 5cqw !important; }
  .vault__count { font-size: 4cqw !important; }
  .vault__main { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 10px 0; padding: 12px 6px; }
  .vf__ico { width: 14cqw; }
  .vf span { font-size: 3cqw; }
  .vault__sub { grid-template-columns: repeat(3, 1fr) !important; gap: 8px 0; padding: 10px 6px; }
  .vault__sub .vf__ico, .vault__row4 .vf__ico, .vault__row6 .vf__ico { width: 11cqw; }
  .vault__sub .vf span, .vault__row4 .vf span, .vault__row6 .vf span { font-size: 2.6cqw; }
  .vault__row4, .vault__row6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 8px 0; }
  .vault__lines { display: none; }
  .vf.is-hl::after { border-width: 1px; }
}
/* carpeta grande del baúl a su tamaño, como en Finder */
.vault__root .vault__big { width: 10cqw; }
.vault__name { font-size: 2.1cqw !important; font-weight: 500 !important; }
.vault__count { font-size: 1.75cqw !important; }
@media (max-width: 760px) { .vault__root .vault__big { width: 30cqw; } }
/* móvil: cada subpanel dice de qué carpeta sale */
@media (max-width: 760px) {
  .vault__sub::before { grid-column: 1 / -1; font-size: 3cqw; color: #6B7F4E; padding: 0 4px 4px; }
  .vault__sub--risers::before { content: "Risers ›"; }
  .vault__sub--foley::before { content: "Foley ›"; }
  .vault__sub--textures::before { content: "Textures ›"; }
}
/* V65 — portada: "Blogo Visuals ··· 2026" más recogido hacia el centro */
.poster__top { width: min(620px, 100%); justify-self: center; }
.hero__poster { justify-items: center; }
@media (max-width: 760px) { .poster__top { width: 100%; } }
.poster__top { width: min(420px, 100%); }
@media (max-width: 760px) { .poster__top { width: 100%; } }
.poster__top { width: auto; justify-content: center; gap: clamp(48px, 6vw, 96px); white-space: nowrap; }
@media (max-width: 760px) { .poster__top { width: 100%; justify-content: space-between; gap: 16px; white-space: normal; } }

/* V66 — fuera tipografías romanas: todo lo que era serif pasa a sans (Jost), sin cursiva */
.serif, em, .about__big, .about__side em, .map__info-quote, .map__quote, .baul__big, .pablo__dream,
.reel__t, .piece__t, .facts dd, .style-card__ask, .brands__thanks, .nav__word em, .map__info-meta dd {
  font-style: normal !important;
}
.map__quote {
  font: 400 clamp(14px, 1.15vw, 17px)/1.4 var(--f-sans) !important;
  letter-spacing: -.035em !important; color: rgba(233,229,219,.7) !important;
}
.about__big, .baul__big, .pablo__dream { font-weight: 300 !important; letter-spacing: -.01em; }
.brands__thanks { font-weight: 300 !important; }

/* =========================================================
   V67 — botón de tema + marcas sin fondo blanco (oscuro) + modo claro
   ========================================================= */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid rgba(242,242,242,.18); color: #e9e5db;
  transition: background .3s, border-color .3s, transform .3s;
}
.theme-toggle:hover { background: rgba(255,255,255,.08); transform: rotate(-12deg); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .ti-moon { fill: currentColor; stroke: none; display: none; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }
html[data-theme="light"] .theme-toggle .ti-moon { display: block; }
@media (max-width: 1080px) { .theme-toggle, .theme-wrap { order: 2; margin-left: auto; } .nav__burger { order: 3; } }

/* transición suave al cambiar */
html.theme-anim body, html.theme-anim section, html.theme-anim .footer,
html.theme-anim .h-section, html.theme-anim p, html.theme-anim .nav { transition: background-color .6s ease, color .6s ease !important; }

/* --- MODO OSCURO: banda de marcas sin fondo blanco --- */
html:not([data-theme="light"]) .brands-band .brands__viewport { background: transparent !important; padding-bottom: 34px; }
html:not([data-theme="light"]) .brands-band .brands__viewport::before,
html:not([data-theme="light"]) .brands-band .brands__viewport::after { display: none; }
html:not([data-theme="light"]) .brand { color: #e9e5db; }
html:not([data-theme="light"]) .brand img { filter: invert(1) brightness(.95) sepia(.08); }
html:not([data-theme="light"]) .brands__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html:not([data-theme="light"]) .brands__thanks { margin-top: 8px !important; }
.brands-band { padding-top: clamp(20px, 3vw, 40px) !important; }

/* --- MODO CLARO --- */
html[data-theme="light"] { --bg-dark: #F2F2F2; }
html[data-theme="light"] body { background: #F2F2F2; color: #1F3D2E; }
html[data-theme="light"] .map,
html[data-theme="light"] .about, html[data-theme="light"] .work, html[data-theme="light"] .baul,
html[data-theme="light"] .pablo, html[data-theme="light"] .footer, html[data-theme="light"] .brands-band { background: #F2F2F2 !important; }
html[data-theme="light"] .brands-band .brands__viewport { background: #F2F2F2 !important; padding-bottom: 34px; }
html[data-theme="light"] .brands-band .brands__viewport::before { display: none; }
html[data-theme="light"] .brands-band .brands__viewport::after { bottom: 0; }
/* textos */
html[data-theme="light"] .h-section, html[data-theme="light"] .h-section em,
html[data-theme="light"] .pf__title, html[data-theme="light"] .chest h3,
html[data-theme="light"] .footer__big, html[data-theme="light"] .footer__big em, html[data-theme="light"] .footer__big .shine,
html[data-theme="light"] .map__stats b {
  color: #1F3D2E !important; -webkit-text-fill-color: #1F3D2E !important;
}
html[data-theme="light"] .map__quote, html[data-theme="light"] .section-head__aside,
html[data-theme="light"] .map__stats span, html[data-theme="light"] .muted,
html[data-theme="light"] .about__side p, html[data-theme="light"] .baul__copy > p:not(.baul__big),
html[data-theme="light"] .pablo__text > p.muted, html[data-theme="light"] .footer__row,
html[data-theme="light"] .footer__legal summary, html[data-theme="light"] .footer__legal-body p,
html[data-theme="light"] .status, html[data-theme="light"] .lines__label { color: rgba(31,61,46,.68) !important; }
html[data-theme="light"] .about__big, html[data-theme="light"] .baul__big, html[data-theme="light"] .pablo__dream,
html[data-theme="light"] .facts dd, html[data-theme="light"] .brands__thanks, html[data-theme="light"] .about__side strong { color: #1F3D2E !important; -webkit-text-fill-color: #1F3D2E !important; }
html[data-theme="light"] .about__big .muted { color: rgba(31,61,46,.6) !important; -webkit-text-fill-color: rgba(31,61,46,.6) !important; }
html[data-theme="light"] .index { color: #6B7F4E; border-color: rgba(91,106,44,.45); }
html[data-theme="light"] .facts, html[data-theme="light"] .facts div, html[data-theme="light"] .pf__bar,
html[data-theme="light"] .footer, html[data-theme="light"] .footer__legal { border-color: rgba(31,61,46,.12) !important; }
html[data-theme="light"] .btn-ghost { color: #1F3D2E; border-color: rgba(31,61,46,.25); }
html[data-theme="light"] .pf__arrow { color: #1F3D2E; border-color: rgba(31,61,46,.2); background: rgba(31,61,46,.03); }
/* barra superior */
html[data-theme="light"] .nav.is-scrolled { background: rgba(242,242,242,.82); border-bottom-color: rgba(31,61,46,.1); }
html[data-theme="light"] .nav.is-scrolled .nav__links a, html[data-theme="light"] .nav.is-scrolled .nav__word { color: #1F3D2E; }
html[data-theme="light"] .nav.is-scrolled .theme-toggle, html[data-theme="light"] .nav.is-scrolled .nav__burger { color: #1F3D2E; border-color: rgba(31,61,46,.2); }
html[data-theme="light"] .nav.is-scrolled .nav__burger i { background: #1F3D2E; }
/* tarjetas de servicio y papeles: un pelín más oscuras para separarse del fondo claro */
html[data-theme="light"] .style-card { box-shadow: 0 30px 60px -36px rgba(0,0,0,.35), 0 0 0 1px rgba(31,61,46,.08); }
/* el globo: su espacio oscuro se funde con el fondo claro */
html[data-theme="light"] .map__globe { background: transparent; }
/* grano y viñeta más suaves en claro */
html[data-theme="light"] .vignette { opacity: .25; }
html[data-theme="light"] .grain { opacity: .06; }
html[data-theme="light"] .nav.is-scrolled .nav__word em { color: #6B7F4E; -webkit-text-fill-color: #6B7F4E; }
html[data-theme="light"] .nav.is-scrolled .nav__links a span { color: #6B7F4E; }
/* V68 — frase principal de "Qué es" en la misma grotesca apretada que el párrafo */
.about__big {
  font-family: var(--f-sans) !important; font-weight: 400 !important;
  font-size: clamp(22px, 2.3vw, 34px) !important; line-height: 1.15 !important;
  letter-spacing: -.045em !important;
}
.about__big .muted { font-family: "Jost", "Helvetica Neue", Arial, sans-serif !important; letter-spacing: .02em !important; }

/* V69 — palabra "censurada" con mosaico de píxeles en el título del mapa */
.pixel {
  display: inline-grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 2.6em; height: .74em; vertical-align: -.02em; margin: 0 .08em;
  color: inherit;
}
.pixel i { display: block; background: currentColor; opacity: var(--o); }
.pixel i:nth-child(3n) { animation: pix 2.4s steps(1) infinite; }
.pixel i:nth-child(5n+1) { animation: pix 3.1s steps(1) infinite .6s; }
@keyframes pix { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(1 - var(--o) * .7); } }
.h-section .pixel { color: #e9e5db; }
html[data-theme="light"] .h-section .pixel { color: #1F3D2E; }
/* el mosaico apoyado en la línea base y a la altura de las mayúsculas */
.pixel { display: inline-block; position: relative; vertical-align: baseline; height: .72em; }
.pixel i { position: absolute; width: 12.5%; height: 33.34%; }
.pixel i:nth-child(1) { left: 0.00%; top: 0.00%; }
.pixel i:nth-child(2) { left: 12.50%; top: 0.00%; }
.pixel i:nth-child(3) { left: 25.00%; top: 0.00%; }
.pixel i:nth-child(4) { left: 37.50%; top: 0.00%; }
.pixel i:nth-child(5) { left: 50.00%; top: 0.00%; }
.pixel i:nth-child(6) { left: 62.50%; top: 0.00%; }
.pixel i:nth-child(7) { left: 75.00%; top: 0.00%; }
.pixel i:nth-child(8) { left: 87.50%; top: 0.00%; }
.pixel i:nth-child(9) { left: 0.00%; top: 33.33%; }
.pixel i:nth-child(10) { left: 12.50%; top: 33.33%; }
.pixel i:nth-child(11) { left: 25.00%; top: 33.33%; }
.pixel i:nth-child(12) { left: 37.50%; top: 33.33%; }
.pixel i:nth-child(13) { left: 50.00%; top: 33.33%; }
.pixel i:nth-child(14) { left: 62.50%; top: 33.33%; }
.pixel i:nth-child(15) { left: 75.00%; top: 33.33%; }
.pixel i:nth-child(16) { left: 87.50%; top: 33.33%; }
.pixel i:nth-child(17) { left: 0.00%; top: 66.67%; }
.pixel i:nth-child(18) { left: 12.50%; top: 66.67%; }
.pixel i:nth-child(19) { left: 25.00%; top: 66.67%; }
.pixel i:nth-child(20) { left: 37.50%; top: 66.67%; }
.pixel i:nth-child(21) { left: 50.00%; top: 66.67%; }
.pixel i:nth-child(22) { left: 62.50%; top: 66.67%; }
.pixel i:nth-child(23) { left: 75.00%; top: 66.67%; }
.pixel i:nth-child(24) { left: 87.50%; top: 66.67%; }

/* =========================================================
   V70 — carteles de proyecto tipo póster (hoja roja + grotesca + caligrafía)
   ========================================================= */
.map__info.poster {
  width: clamp(270px, 23vw, 340px) !important; aspect-ratio: 3 / 4; height: auto;
  padding: 26px 22px 24px !important; gap: 0 !important;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 0 !important;
  background-color: #c7382b !important;
  background-image:
    /* pliegue horizontal a un tercio */
    linear-gradient(178deg, transparent 0 46%, rgba(0,0,0,.10) 46.6%, rgba(255,255,255,.10) 47.2%, transparent 48.4%),
    /* luz y desgaste */
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(0,0,0,.16), transparent 60%) !important;
  background-size: auto !important;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 6px 14px rgba(0,0,0,.3) !important;
  transform: translate(30px, -50%) rotate(0deg) !important;
  color: #1F3D2E;
}
.map__info.poster.is-shown { transform: translate(0, -50%) rotate(0deg) !important; }
.map__info.poster::before { display: none !important; }
/* grano de papel impreso */
.map__info.poster::after {
  opacity: .55 !important; mix-blend-mode: multiply !important;
  background-size: 160px 160px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.26'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>") !important;
}
.poster__head, .poster__foot {
  margin: 0; position: relative; z-index: 2;
  font: 400 clamp(22px, 2.05vw, 30px)/.93 var(--f-sans) !important;
  letter-spacing: -.065em !important; text-transform: uppercase; color: #1F3D2E !important;
  -webkit-text-fill-color: #1F3D2E !important;
}
.poster__foot { text-align: right; }
.poster__head i, .poster__foot i {
  font-family: "Pinyon Script", cursive !important; font-style: normal; font-weight: 400;
  text-transform: none; letter-spacing: 0 !important;
  font-size: 1.55em; line-height: 0; position: relative; z-index: 3;
  margin: 0 -.06em; display: inline-block; transform: translateY(.08em) rotate(-4deg);
}
.poster__body {
  margin: 0 !important; max-width: 82%; align-self: flex-start;
  font: 400 11px/1.4 var(--f-sans) !important; letter-spacing: -.03em !important;
  color: rgba(18,17,16,.72) !important; text-shadow: none !important;
}
/* polaroid del póster 2024 */
.poster.paper--photo .polaroid { z-index: 4 !important; }
@media (max-width: 1100px) {
  .map__info.poster { width: min(420px, calc(100% - 2 * var(--gutter))) !important; aspect-ratio: auto; min-height: 380px; margin: 26px auto 0 !important; transform: none !important; }
  .map__info.poster.is-shown { transform: none !important; }
  .poster__head, .poster__foot { font-size: clamp(24px, 6.4vw, 32px) !important; }
  .poster.paper--photo .polaroid { float: right; margin: -40px -18px 8px 10px; }
}
/* caligrafía más grande y montada sobre las letras, como en la referencia */
.poster__head i, .poster__foot i { font-size: 1.95em; margin: 0 -.12em 0 -.08em; transform: translateY(.1em) rotate(-6deg); }
.poster__head, .poster__foot { font-size: clamp(24px, 2.25vw, 33px) !important; }
@media (max-width: 760px) { .map__cards--geo .fcard { width: 31vw; } }

/* =========================================================
   V71 — paleta oficial Blogo Visuals en los carteles
   #1F3D2E Forest shade · #6B7F4E Moss green · #A2B5A0 Sage mist
   #DCC8A3 Sand beige · #4C6A73 River blue · #5A4A3A Earth brown
   ========================================================= */
:root {
  --bv-forest: #1F3D2E; --bv-moss: #6B7F4E; --bv-sage: #A2B5A0;
  --bv-sand: #DCC8A3; --bv-river: #4C6A73; --bv-earth: #5A4A3A;
}
.map__info.poster { --pbg: var(--bv-forest); --pink: var(--bv-sand); background-color: var(--pbg) !important; color: var(--pink); }
.map__info.poster .poster__head, .map__info.poster .poster__foot { color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; }
.map__info.poster .poster__body { color: var(--pink) !important; opacity: .8; }
.map__info.poster[data-info="usa"]      { --pbg: var(--bv-forest); --pink: var(--bv-sand); }
.map__info.poster[data-info="insta360"] { --pbg: var(--bv-river);  --pink: var(--bv-sand); }
.map__info.poster[data-info="dji"]      { --pbg: var(--bv-sage);   --pink: var(--bv-forest); }
.map__info.poster[data-info="oppo"]     { --pbg: var(--bv-sand);   --pink: var(--bv-forest); }
.map__info.poster[data-info="deportes"] { --pbg: var(--bv-earth);  --pink: var(--bv-sand); }
/* en hojas claras el grano se nota menos; en oscuras, un pelín menos para no ensuciar */
.map__info.poster[data-info="dji"]::after, .map__info.poster[data-info="oppo"]::after { opacity: .4 !important; }
.map__info.poster[data-info="usa"]::after, .map__info.poster[data-info="insta360"]::after, .map__info.poster[data-info="deportes"]::after { opacity: .35 !important; mix-blend-mode: overlay !important; }

/* =========================================================
   V72 — REBRANDING con la paleta oficial
   Forest #1F3D2E · Moss #6B7F4E · Sage #A2B5A0 · Sand #DCC8A3 · River #4C6A73 · Earth #5A4A3A
   ========================================================= */
:root {
  --ink: #1F3D2E; --ink-2: #1F3D2E; --moss: #1F3D2E; --olive: #6B7F4E; --bg-dark: #1F3D2E;
  --bone: #F2F2F2; --glow: rgba(220,200,163,.35);
}
body, .hero, .map, .about, .work, .baul, .pablo, .footer, .brands-band { background-color: #1F3D2E !important; }
.footer { background: #1F3D2E !important; }
.about { background: #1F3D2E !important; }
.index { color: #A2B5A0; border-color: rgba(162,181,160,.45); }
.tag, .lines__label, .facts dt, .map__info-meta dt, .pf__title span { color: #A2B5A0 !important; -webkit-text-fill-color: #A2B5A0 !important; }

/* CTA "Hablemos" y botones brillantes: arena */
.btn-shine { color: #1F3D2E; background: linear-gradient(135deg, #e8dabd, #DCC8A3 45%, #efe3cc 60%, #c9b38a); }

/* botones del mapa: sage; seleccionado arena */
.map__tabs button { background: #A2B5A0 !important; border-color: #A2B5A0 !important; color: #1F3D2E !important; }
.map__tabs button:hover { background: #b3c3b1 !important; border-color: #b3c3b1 !important; }
.map__tabs button.is-active { background: #DCC8A3 !important; border-color: #DCC8A3 !important; color: #1F3D2E !important; box-shadow: 0 8px 24px -10px rgba(220,200,163,.45) !important; }

/* pines del mapa: arena (normal) y sage claro; Valencia/Madrid brillan en arena */
.pin .pin__core {
  background: radial-gradient(circle, #efe3cc 0%, rgba(220,200,163,.9) 32%, rgba(220,200,163,.35) 58%, rgba(220,200,163,0) 78%) !important;
  box-shadow: 0 0 12px 3px rgba(220,200,163,.3) !important;
}
.pin .pin__ring { border-color: #DCC8A3 !important; }
.pin.pin--star .pin__core {
  background: radial-gradient(circle, #ffffff 0%, #f3ead8 20%, rgba(220,200,163,.85) 42%, rgba(220,200,163,.4) 62%, rgba(220,200,163,0) 82%) !important;
  box-shadow: 0 0 22px 8px rgba(220,200,163,.4), 0 0 44px 14px rgba(220,200,163,.22) !important;
}
.pin.pin--home .pin__core, .pin.pin--major .pin__core {
  background: radial-gradient(circle closest-side, #fff 0%, rgba(250,244,232,.95) 10%, rgba(232,216,186,.75) 22%, rgba(220,200,163,.45) 38%, rgba(220,200,163,.22) 56%, rgba(220,200,163,.08) 76%, rgba(220,200,163,0) 100%) !important;
  box-shadow: none !important;
}
.pin.pin--home .pin__ring, .pin.pin--major .pin__ring, .pin.pin--star .pin__ring { border-color: #DCC8A3 !important; }

/* tarjetas de servicio: arena, tinta forest */
.style-card, .style-card .deliver__label { background-color: #DCC8A3 !important; }
.style-card .deliver__label { background: #DCC8A3 !important; }
.style-card, .style-card h3, .style-card .deliver__list li { color: #1F3D2E !important; -webkit-text-fill-color: #1F3D2E !important; }
.style-card p { color: rgba(31,61,46,.82) !important; }
.style-card .style-card__note { color: rgba(31,61,46,.62) !important; }
.style-card .tag { color: #6B7F4E !important; -webkit-text-fill-color: #6B7F4E !important; }
.deliver { border-color: rgba(31,61,46,.7); background: rgba(242,242,242,.22); box-shadow: 4px 4px 0 rgba(31,61,46,.14); }
.deliver__list li::before { background-color: #1F3D2E; }

/* corazón: arena */
.heart { fill: #DCC8A3 !important; filter: drop-shadow(0 0 6px rgba(220,200,163,.4)) !important; }

/* banda de marcas (modo oscuro) sobre forest */
html:not([data-theme="light"]) .brand { color: #F2F2F2; }

/* modo claro: fondo blanco roto, tinta forest */
html[data-theme="light"] body, html[data-theme="light"] .map, html[data-theme="light"] .about, html[data-theme="light"] .work,
html[data-theme="light"] .baul, html[data-theme="light"] .pablo, html[data-theme="light"] .footer, html[data-theme="light"] .brands-band { background-color: #F2F2F2 !important; background-image: none; }
html[data-theme="light"] .index { color: #6B7F4E; border-color: rgba(107,127,78,.5); }
html[data-theme="light"] .tag, html[data-theme="light"] .lines__label, html[data-theme="light"] .facts dt { color: #6B7F4E !important; -webkit-text-fill-color: #6B7F4E !important; }

/* =========================================================
   V72 — títulos con rectángulo detrás (las letras se salen)
   ========================================================= */
.h-section {
  position: relative; display: inline-block; isolation: isolate;
  max-width: 100%;
}
.h-section::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: .55em; top: -.28em; right: -.9em; bottom: -.32em;
  background: #4C6A73;
}
html[data-theme="light"] .h-section::before { background: #A2B5A0; }
.section-head { position: relative; }
/* el título necesita aire para el rectángulo */
.section-head .h-section { margin: .3em 0 .35em; }
.pf__title { position: relative; display: inline-block; isolation: isolate; }
.pf__title::before { content: ""; position: absolute; z-index: -1; left: .5em; top: -.25em; right: -.7em; bottom: -.28em; background: #6B7F4E; }
html[data-theme="light"] .pf__title::before { background: #DCC8A3; }
/* títulos en bloque compacto tipo cartel; el rectángulo nunca se sale de la pantalla */
.h-section { max-width: min(11.5em, calc(100% - 1.2em)); line-height: .93 !important; }
.h-section::before { left: .5em; top: -.35em; right: -.75em; bottom: -.5em; }
.section-head { padding-right: 1.2em; overflow: visible; }
.wrap { overflow-x: clip; }

/* V73 — el fondo vuelve a ser neutro oscuro (fuera de la paleta, a petición) */
:root { --ink: #0B0D00; --ink-2: #1A1D0A; --moss: #34402C; --bg-dark: #121310; }
body { background-color: #121310 !important; }
.hero, .map { background-color: #0B0D00 !important; }
.about, .work, .baul, .pablo, .footer, .brands-band { background-color: #121310 !important; }
html[data-theme="light"] body, html[data-theme="light"] .map, html[data-theme="light"] .about, html[data-theme="light"] .work,
html[data-theme="light"] .baul, html[data-theme="light"] .pablo, html[data-theme="light"] .footer, html[data-theme="light"] .brands-band { background-color: #F2F2F2 !important; }

/* =========================================================
   V74 — fondos: Java brown (oscuro) y Transparent yellow (claro)
   + transición tipo pestaña de carpeta
   ========================================================= */
:root { --page: #1D120E; --ink: #1D120E; --bg-dark: #1D120E; }
html[data-theme="light"] { --page: #F3E5C2; }
body { background-color: var(--page) !important; }
.map, .about, .work, .baul, .pablo, .footer, .brands-band,
html[data-theme="light"] body, html[data-theme="light"] .map, html[data-theme="light"] .about, html[data-theme="light"] .work,
html[data-theme="light"] .baul, html[data-theme="light"] .pablo, html[data-theme="light"] .footer, html[data-theme="light"] .brands-band {
  background-color: var(--page) !important; background-image: none !important;
}
.hero { background-color: #000 !important; }
/* el oscurecido de la portada ya no tira al fondo verdoso */
.hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 75%, rgba(0,0,0,.35) 100%) !important; }
/* textos del modo claro sobre el amarillo */
html[data-theme="light"] .nav.is-scrolled { background: rgba(243,229,194,.85); }
html[data-theme="light"] .style-card, html[data-theme="light"] .style-card .deliver__label { background-color: #DCC8A3 !important; }

/* pestaña de carpeta */
.hero__tab {
  position: absolute; left: 50%; bottom: -1px; z-index: 5; transform: translateX(-50%);
  width: clamp(300px, 34vw, 460px); height: clamp(52px, 5vw, 66px);
  display: grid; place-items: center; pointer-events: none;
}
.hero__tab svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--page); filter: drop-shadow(0 -6px 14px rgba(0,0,0,.28)); }
.hero__tab span {
  position: relative; top: .18em;
  font: 400 clamp(13px, 1.2vw, 17px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .02em !important; text-transform: uppercase;
  color: #F3E5C2;
}
html[data-theme="light"] .hero__tab span { color: #1D120E; }
/* el contenido del mapa empieza pegado a la pestaña, sin franja muerta */
.map { padding-top: clamp(28px, 4vw, 56px) !important; }

/* V75 — fondos definitivos: verde oliva oscuro (oscuro) y blanco roto (claro) */
:root { --page: #41452B; --ink: #41452B; --bg-dark: #41452B; }
html[data-theme="light"] { --page: #EBEBE4; }
html[data-theme="light"] .nav.is-scrolled { background: rgba(235,235,228,.86); }
html:not([data-theme="light"]) .hero__tab span { color: #EBEBE4; }
html[data-theme="light"] .hero__tab span { color: #41452B; }
.nav.is-scrolled { background: rgba(65,69,43,.72); }

/* =========================================================
   V76 — verde del arrozal (vídeo de portada) para textos y botones
   sombra #131703 · medio #35390E · hoja #4E511A
   ========================================================= */
:root { --rice-dark: #262B0A; --rice: #4E511A; --rice-light: #8E9147; --rice-pale: #B9BB82; }

/* botones del mapa */
.map__tabs button { background: var(--rice-pale) !important; border-color: var(--rice-pale) !important; color: var(--rice-dark) !important; }
.map__tabs button:hover { background: #c7c995 !important; border-color: #c7c995 !important; }
.map__tabs button.is-active { background: #EBEBE4 !important; border-color: #EBEBE4 !important; color: var(--rice-dark) !important; }

/* modo claro: tinta en verde arroz */
html[data-theme="light"] .h-section, html[data-theme="light"] .h-section em,
html[data-theme="light"] .pf__title, html[data-theme="light"] .footer__big, html[data-theme="light"] .footer__big em,
html[data-theme="light"] .footer__big .shine, html[data-theme="light"] .map__stats b,
html[data-theme="light"] .about__big, html[data-theme="light"] .baul__big, html[data-theme="light"] .pablo__dream,
html[data-theme="light"] .facts dd, html[data-theme="light"] .brands__thanks, html[data-theme="light"] .about__side strong,
html[data-theme="light"] .h-section .pixel {
  color: var(--rice-dark) !important; -webkit-text-fill-color: var(--rice-dark) !important;
}
html[data-theme="light"] .map__quote, html[data-theme="light"] .section-head__aside, html[data-theme="light"] .map__stats span,
html[data-theme="light"] .about__side p, html[data-theme="light"] .baul__copy > p:not(.baul__big),
html[data-theme="light"] .pablo__text > p.muted, html[data-theme="light"] .footer__row, html[data-theme="light"] .status,
html[data-theme="light"] .lines__label { color: rgba(38,43,10,.72) !important; -webkit-text-fill-color: rgba(38,43,10,.72) !important; }
html[data-theme="light"] .index, html[data-theme="light"] .tag, html[data-theme="light"] .facts dt { color: var(--rice) !important; -webkit-text-fill-color: var(--rice) !important; border-color: rgba(78,81,26,.45); }
html[data-theme="light"] .h-section::before { background: var(--rice-pale); }
html[data-theme="light"] .nav.is-scrolled .nav__links a, html[data-theme="light"] .nav.is-scrolled .nav__word,
html[data-theme="light"] .nav.is-scrolled .theme-toggle, html[data-theme="light"] .nav.is-scrolled .nav__burger { color: var(--rice-dark); }
html[data-theme="light"] .nav.is-scrolled .nav__burger i { background: var(--rice-dark); }

/* modo oscuro: acentos en hoja de arroz */
html:not([data-theme="light"]) .index, html:not([data-theme="light"]) .tag,
html:not([data-theme="light"]) .lines__label, html:not([data-theme="light"]) .facts dt { color: var(--rice-pale) !important; -webkit-text-fill-color: var(--rice-pale) !important; border-color: rgba(185,187,130,.45); }

/* pestaña de la carpeta a la izquierda */
.hero__tab { left: var(--gutter); transform: none; }
html[data-theme="light"] .map__tabs button.is-active { background: var(--rice-dark) !important; border-color: var(--rice-dark) !important; color: #EBEBE4 !important; }
/* V77 — sobre la portada (barra sin fondo) el logo y los textos van en blanco, en cualquier modo */
.nav:not(.is-scrolled) .nav__word, .nav:not(.is-scrolled) .nav__word em,
.nav:not(.is-scrolled) .nav__links a, .nav:not(.is-scrolled) .theme-toggle, .nav:not(.is-scrolled) .nav__burger {
  color: #EBEBE4 !important; -webkit-text-fill-color: #EBEBE4 !important;
}
.nav:not(.is-scrolled) .nav__burger i { background: #EBEBE4 !important; }
.nav:not(.is-scrolled) .theme-toggle, .nav:not(.is-scrolled) .nav__burger { border-color: rgba(235,235,228,.3) !important; }

/* =========================================================
   V78 — "visuals" se convierte en "VS" al bajar
   ========================================================= */
.nav__word .vs { display: inline-flex; align-items: baseline; white-space: nowrap; }
.vs__m {
  display: inline-block; overflow: hidden; vertical-align: baseline;
  max-width: 3.2em; opacity: 1;
  transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .4s ease .1s, filter .4s ease;
}
.vs__l { position: relative; display: inline-grid; vertical-align: baseline; }
.vs__l b { grid-area: 1 / 1; font-weight: inherit; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.1,1); }
.vs__l b:first-child { opacity: 1; }
.vs__l b:last-child { opacity: 0; transform: translateY(.35em); }
/* estado "VS" */
.nav.is-scrolled .vs__m { max-width: 0; opacity: 0; filter: blur(3px); transition: max-width .7s cubic-bezier(.65,0,.35,1), opacity .3s ease, filter .3s ease; }
.nav.is-scrolled .vs__l b:first-child { opacity: 0; transform: translateY(-.35em); }
.nav.is-scrolled .vs__l b:last-child { opacity: 1; transform: none; transition-delay: .25s; }
.nav.is-scrolled .nav__word .vs { letter-spacing: .02em; }
.vs__l { display: inline-block; position: relative; }
.vs__l b { display: inline-block; }
.vs__l b:last-child { position: absolute; left: 0; bottom: 0; }
.nav.is-scrolled .vs__l b:first-child { position: absolute; left: 0; bottom: 0; }
.nav.is-scrolled .vs__l b:last-child { position: static; }

/* V79 — modo oscuro: negro mate */
:root { --page: #141414; --ink: #141414; --bg-dark: #141414; }
html[data-theme="light"] { --page: #EBEBE4; }
.nav.is-scrolled { background: rgba(20,20,20,.78); }
html[data-theme="light"] .nav.is-scrolled { background: rgba(235,235,228,.86); }

/* =========================================================
   V80 — títulos tipo cartel: líneas justificadas + papel River blue
   ========================================================= */
.h-section.h-poster {
  display: block; position: relative; isolation: isolate;
  width: min(15.5em, 100%); max-width: none;
  margin: 1.3em 0 1.4em; padding: 0;
  font-size: clamp(28px, 4vw, 58px) !important; line-height: .98 !important;
  letter-spacing: -.035em !important; color: #F2F2F2 !important; -webkit-text-fill-color: #F2F2F2 !important;
}
.h-poster .hl { display: block; text-align: justify; text-align-last: justify; white-space: nowrap; }
.h-poster .hl:not(.hl--solo) { white-space: normal; }
.h-poster .hl--solo { text-align: left; text-align-last: left; }
/* pocas palabras por línea: el ancho de cada línea manda el hueco */
.h-poster .pixel { margin: 0; }
/* papel River blue: más alto que el texto, más estrecho que él */
.h-section.h-poster::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 11%; right: 11%; top: -1.15em; bottom: -1.15em;
  background-color: #4C6A73 !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.018' numOctaves='4' seed='11' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.4'><feDistantLight azimuth='225' elevation='52'/></feDiffuseLighting><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.26'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.22'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>") !important;
  background-blend-mode: soft-light, multiply;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
html[data-theme="light"] .h-section.h-poster { color: #F2F2F2 !important; -webkit-text-fill-color: #F2F2F2 !important; }
html[data-theme="light"] .h-section.h-poster::before { background-color: #4C6A73 !important; }
/* sobre fondo claro, las letras que salen del papel necesitan tinta: contorno sutil */
html[data-theme="light"] .h-section.h-poster { text-shadow: 0 0 1px rgba(20,20,20,.55), 0 1px 0 rgba(20,20,20,.35) !important; }
.h-poster .pixel { color: #F2F2F2 !important; }
.section-head { flex-direction: column; align-items: flex-start; }
.section-head .index { margin-bottom: .2em; }
@media (max-width: 760px) {
  .h-section.h-poster { width: 100%; font-size: clamp(24px, 7.6vw, 34px) !important; }
}
/* papel más alto que el texto (como en la referencia) y textura más presente */
.h-section.h-poster { margin: 2.1em 0 2.2em; }
.h-section.h-poster::before { top: -1.75em; bottom: -1.75em; left: 12%; right: 12%; }
.section-head .index { position: relative; z-index: 2; }
/* la animación de entrada no debe recortar el papel */
.section-head.reveal .h-section.h-poster { clip-path: inset(0 0 100% 0); }
.section-head.reveal.is-in .h-section.h-poster { clip-path: inset(-3em -6em -3em -6em); }
.h-section.h-poster { width: min(10.5em, 100%); }
.h-section.h-poster::before { background-blend-mode: overlay, multiply; }

/* =========================================================
   V81 — títulos compactos con "selección de texto" (tiradores)
   ========================================================= */
.h-section.h-sel {
  display: block; position: relative; isolation: auto;
  width: min(9.6em, 100%); max-width: none; margin: .5em 0 .6em; padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(30px, 3.6vw, 52px) !important; line-height: .92 !important;
  letter-spacing: -.055em !important; text-transform: none !important;
  text-align: justify; text-align-last: left; word-spacing: .05em;
  color: #EBEBE4 !important; -webkit-text-fill-color: #EBEBE4 !important;
  text-shadow: none !important;
}
.h-section.h-sel::before { display: none !important; content: none !important; }
html[data-theme="light"] .h-section.h-sel { color: #2b2b26 !important; -webkit-text-fill-color: #2b2b26 !important; }
html[data-theme="light"] .h-section.h-sel .pixel { color: #2b2b26 !important; }
.h-sel .pixel { color: #EBEBE4 !important; }

/* la selección */
.h-sel .sel {
  position: relative; color: inherit; -webkit-text-fill-color: inherit;
  background: rgba(76,106,115,.62); padding: 0 .04em; margin: 0 -.04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html[data-theme="light"] .h-sel .sel { background: rgba(76,106,115,.42); }
/* tiradores: inicio arriba-izquierda, final abajo-derecha */
.h-sel .sel::before, .h-sel .sel::after {
  content: ""; position: absolute; width: .065em; background: #4C6A73; pointer-events: none;
}
.h-sel .sel::before { left: -.04em; top: -.18em; bottom: 0; }
.h-sel .sel::after { right: -.04em; top: 0; bottom: -.18em; }
.h-sel .sel > .knob { display: none; }
.h-sel .sel { --k: .26em; }
.h-sel .sel { background-image:
    radial-gradient(circle at center, #4C6A73 65%, transparent 68%),
    radial-gradient(circle at center, #4C6A73 65%, transparent 68%);
  background-size: var(--k) var(--k), var(--k) var(--k);
  background-repeat: no-repeat;
  background-position: -100em -100em, -100em -100em;
}
/* los círculos van fuera de la caja: los dibujamos con sombras de los tiradores */
.h-sel .sel::before { box-shadow: 0 -.02em 0 0 #4C6A73; border-radius: 0; }
.h-sel .sel::before { background: linear-gradient(#4C6A73, #4C6A73) bottom / 100% 100% no-repeat; }
.h-sel .knob-s, .h-sel .knob-e { display: none; }
/* tiradores definitivos: palito + bolita (inicio con bolita arriba, final con bolita abajo) */
.h-sel .sel { background-image: none; background-color: rgba(76,106,115,.62); }
html[data-theme="light"] .h-sel .sel { background-color: rgba(76,106,115,.4); }
.h-sel .sel::before, .h-sel .sel::after {
  width: .26em; box-shadow: none; border-radius: 0;
  background:
    radial-gradient(circle at 50% var(--cy), #4C6A73 .11em, transparent .115em),
    linear-gradient(#4C6A73, #4C6A73) center / .055em 100% no-repeat;
}
.h-sel .sel::before { --cy: .13em; left: -.17em; top: -.3em; bottom: -.02em; background-size: auto, .055em calc(100% - .13em); background-position: 0 0, center bottom; background-repeat: no-repeat; }
.h-sel .sel::after  { --cy: calc(100% - .13em); right: -.17em; top: -.02em; bottom: -.3em; background-size: auto, .055em calc(100% - .13em); background-position: 0 0, center top; background-repeat: no-repeat; }
.h-sel .sel { white-space: nowrap; }
.h-section.h-sel { width: min(11.5em, 100%); word-spacing: 0; }
@media (max-width: 760px) { .h-section.h-sel { width: 100%; font-size: clamp(28px, 8.4vw, 40px) !important; } }

/* =========================================================
   V82 — marcas en un set de estudio: backdrop + dos softbox
   ========================================================= */
.brands-band { padding: clamp(30px, 4vw, 60px) 0 clamp(10px, 2vw, 24px) !important; overflow: hidden; }
.studio {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr; place-items: center;
  min-height: clamp(300px, 34vw, 440px);
}
/* backdrop de papel continuo, iluminado en el centro */
.studio__backdrop {
  position: relative; z-index: 2;
  width: min(760px, 70%); padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 56px);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255,250,236,.16), transparent 70%),
    linear-gradient(180deg, #2c2b28 0%, #232220 70%, #1b1a18 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.9);
}
/* curva del papel al tocar el suelo */
.studio__backdrop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 26px;
  background: linear-gradient(180deg, #1b1a18, rgba(27,26,24,0));
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.studio__brands {
  margin: 0; text-align: center;
  font: 700 clamp(22px, 2.6vw, 38px)/.95 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -.06em !important; text-transform: uppercase; color: #EBEBE4;
  text-shadow: 0 0 24px rgba(255,248,230,.12);
}
.studio__brands span { white-space: nowrap; margin: 0 .16em; }
.studio__brands sup {
  font-size: .38em; font-weight: 400; letter-spacing: -.02em; vertical-align: .95em;
  margin-right: .12em; color: rgba(235,235,228,.8);
}
/* softbox a cada lado */
.softbox { position: absolute; z-index: 3; bottom: 0; width: clamp(120px, 14vw, 200px); height: auto; pointer-events: none; }
.softbox--l { left: max(0px, calc(50% - 560px)); }
.softbox--r { right: max(0px, calc(50% - 560px)); }
/* haces de luz hacia las marcas */
.beam {
  position: absolute; z-index: 1; top: 8%; height: 70%; width: 46%; pointer-events: none;
  mix-blend-mode: screen; filter: blur(14px); opacity: .55;
}
.beam--l { left: calc(max(0px, calc(50% - 560px)) + 7%);
  background: radial-gradient(ellipse 80% 55% at 0% 42%, rgba(255,250,236,.55), rgba(255,248,230,.18) 45%, transparent 75%); }
.beam--r { right: calc(max(0px, calc(50% - 560px)) + 7%);
  background: radial-gradient(ellipse 80% 55% at 100% 42%, rgba(255,250,236,.55), rgba(255,248,230,.18) 45%, transparent 75%); }
/* difusor encendido: brillo propio */
.softbox rect[fill="url(#sbFace)"] { filter: drop-shadow(0 0 10px rgba(255,248,230,.9)); }
/* modo claro */
html[data-theme="light"] .studio__backdrop { background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255,255,255,.7), transparent 70%), linear-gradient(180deg, #d9d8cf 0%, #cfcdc3 70%, #c4c2b7 100%); }
html[data-theme="light"] .studio__backdrop::after { background: linear-gradient(180deg, #c4c2b7, rgba(196,194,183,0)); }
html[data-theme="light"] .studio__brands { color: #2b2b26; text-shadow: none; }
html[data-theme="light"] .studio__brands sup { color: rgba(43,43,38,.7); }
html[data-theme="light"] .beam { mix-blend-mode: soft-light; opacity: .5; }
@media (max-width: 760px) {
  .studio__backdrop { width: 100%; }
  .softbox { width: 74px; bottom: auto; top: -10px; }
  .softbox--l { left: -10px; } .softbox--r { right: -10px; }
  .beam { width: 60%; }
}
/* set en fila: foco | fondo | foco */
.studio { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: clamp(8px, 2vw, 28px); min-height: 0; }
.softbox { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; align-self: end; width: clamp(90px, 13vw, 190px) !important; }
.softbox--l { grid-column: 1; grid-row: 1; }
.softbox--r { grid-column: 3; grid-row: 1; }
.studio__backdrop { grid-column: 2; grid-row: 1; width: 100% !important; align-self: center; }
.beam { top: 0 !important; height: 80% !important; width: 42% !important; }
.beam--l { left: clamp(40px, 8vw, 120px) !important; }
.beam--r { right: clamp(40px, 8vw, 120px) !important; }
@media (max-width: 760px) {
  .studio { column-gap: 0; padding: 0 6px; }
  .softbox { width: 70px !important; }
  .studio__backdrop { padding: 34px 14px; }
  .studio__brands { font-size: clamp(16px, 4.8vw, 22px) !important; }
}

/* V83 — octabox realistas + rótulo "Hemos producido para" */
.softbox { width: clamp(110px, 14vw, 200px) !important; filter: drop-shadow(0 20px 26px rgba(0,0,0,.55)); }
.softbox--r { transform: scaleX(-1); }
.studio__label {
  margin: 0 0 clamp(16px, 2vw, 26px); text-align: left;
  font: 400 clamp(11px, 1vw, 13px)/1 var(--f-sans) !important; letter-spacing: -.02em !important;
  text-transform: uppercase; color: rgba(235,235,228,.6);
}
html[data-theme="light"] .studio__label { color: rgba(43,43,38,.6); }
/* haces más suaves y anchos, saliendo de la cara del octabox */
.beam { opacity: .5 !important; filter: blur(22px) !important; }
@media (max-width: 760px) { .softbox { width: 78px !important; } }
/* "Hemos producido para": fuera del fondo, encima, letra fina */
.studio > .studio__label {
  grid-column: 2; grid-row: 1; align-self: start; justify-self: start;
  margin: 0 0 14px; transform: translateY(-100%); position: relative; top: -10px;
  font: 300 clamp(12px, 1.05vw, 14px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .14em !important; text-transform: uppercase; color: rgba(235,235,228,.6);
}
html[data-theme="light"] .studio > .studio__label { color: rgba(43,43,38,.6); }
.studio { padding-top: 34px; }

/* =========================================================
   V84 — servicios como pósters (mismo flow que los proyectos del mapa)
   ========================================================= */
.lines__label {
  font: 300 clamp(12px, 1.05vw, 14px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .14em !important; text-transform: uppercase; color: rgba(235,235,228,.6) !important; -webkit-text-fill-color: rgba(235,235,228,.6) !important;
}
html[data-theme="light"] .lines__label { color: rgba(43,43,38,.6) !important; -webkit-text-fill-color: rgba(43,43,38,.6) !important; }
.svc-posters { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.svc {
  --pbg: #1F3D2E; --pink: #DCC8A3;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  min-height: clamp(460px, 42vw, 600px); padding: clamp(24px, 2.6vw, 36px);
  background-color: var(--pbg);
  background-image:
    linear-gradient(178deg, transparent 0 44%, rgba(0,0,0,.12) 44.6%, rgba(255,255,255,.08) 45.2%, transparent 46.4%),
    radial-gradient(ellipse at 20% 12%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(ellipse at 85% 92%, rgba(0,0,0,.2), transparent 60%);
  color: var(--pink);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 6px 14px rgba(0,0,0,.25);
}
.svc[data-c="earth"] { --pbg: #5A4A3A; }
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.5'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
.svc__head, .svc__foot {
  margin: 0; font: 700 clamp(28px, 2.8vw, 42px)/.92 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -.065em !important; text-transform: uppercase;
  color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important;
}
.svc__foot { text-align: right; }
.svc__head i, .svc__foot i {
  font-family: "Pinyon Script", cursive !important; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0 !important;
  font-size: 1.9em; line-height: 0; display: inline-block; margin: 0 -.06em; transform: translateY(.1em) rotate(-6deg);
}
.svc__body { display: grid; gap: 16px; max-width: 46ch; }
.svc__body p { margin: 0; font: 400 13px/1.5 var(--f-sans) !important; letter-spacing: -.03em !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; opacity: .85; }
.svc .svc__note { opacity: .65; }
/* cajita: línea fina en arena sobre el póster */
.svc .deliver { margin: 6px 0 0; padding: 20px 16px 14px; background: transparent; border: 1px solid rgba(220,200,163,.55); border-radius: 0; box-shadow: none; }
.svc .deliver__label { background: var(--pbg) !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; font-size: 10px; top: -7px; }
.svc .deliver__list li { color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; font-size: 12.5px; }
.svc .deliver__list li::before { background-color: var(--pink); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>"); }
.svc[data-c="earth"] .deliver__list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4A3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>"); }
@media (max-width: 960px) { .svc-posters { grid-template-columns: 1fr; } .svc { min-height: 0; } }

/* V85 — focos: foto real del octabox (Godox), recortada, sobre pie de luz */
.sbx { position: relative; align-self: end; width: clamp(80px, 10vw, 150px); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sbx--l { grid-column: 1; grid-row: 1; }
.sbx--r { grid-column: 3; grid-row: 1; }
.sbx img {
  position: relative; z-index: 2; display: block; width: 100%; height: auto;
  filter: brightness(1.05) contrast(1.05) drop-shadow(0 18px 24px rgba(0,0,0,.6));
}
/* el difusor "encendido": brillo cálido sobre la cara */
.sbx::before {
  content: ""; position: absolute; z-index: 3; top: 4%; height: 84%; width: 46%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,250,236,.55), rgba(255,246,226,.12) 60%, transparent 80%);
  mix-blend-mode: screen; filter: blur(6px);
}
.sbx--l::before { right: 4%; }
.sbx--r::before { left: 4%; }
/* el original mira a la izquierda: el foco izquierdo se voltea para apuntar al centro */
.sbx--l img { transform: scaleX(-1); }
/* pie de luz con trípode */
.sbx__stand { position: relative; width: 4px; height: clamp(90px, 11vw, 150px); margin-top: -18%; background: linear-gradient(90deg, #3a3a3a, #6a6a66, #3a3a3a); z-index: 1; }
.sbx__stand::before, .sbx__stand::after {
  content: ""; position: absolute; bottom: -2px; width: 3px; height: clamp(34px, 4vw, 52px); background: #4e4e4b; transform-origin: bottom center;
}
.sbx__stand::before { left: 0; transform: rotate(32deg); }
.sbx__stand::after { right: 0; transform: rotate(-32deg); }
.sbx--l .sbx__stand { margin-left: 40%; }
.sbx--r .sbx__stand { margin-right: 40%; }
.softbox { display: none !important; }
@media (max-width: 760px) { .sbx { width: 64px; } .sbx__stand { height: 60px; } }
/* la cara (rejilla) apunta a las marcas: izquierdo sin voltear, derecho volteado */
.sbx--l img { transform: none; }
.sbx--r img { transform: scaleX(-1); }
.sbx--l::before { right: auto; left: 4%; }
.sbx--r::before { left: auto; right: 4%; }
.sbx--l .sbx__stand { margin-left: 0; margin-right: -30%; }
.sbx--r .sbx__stand { margin-right: 0; margin-left: -30%; }
.sbx--l img { transform: scaleX(-1); }
.sbx--r img { transform: none; }
.sbx--l::before { left: auto; right: 4%; }
.sbx--r::before { right: auto; left: 4%; }
/* marcas por tamaño: grandes, medianas y pequeñas */
.studio__brands .b-m { font-size: .7em; }
.studio__brands .b-s { font-size: .48em; letter-spacing: -.04em; }
.studio__brands .b-m sup, .studio__brands .b-s sup { font-size: .5em; }

/* V86 — "Una nueva rama está naciendo": rama que crece al aparecer */
.branch { margin: clamp(26px, 3vw, 40px) 0 clamp(18px, 2vw, 26px); }
.branch__svg { display: block; width: min(420px, 100%); height: auto; overflow: visible; }
.branch__stem, .branch__twig { fill: none; stroke: #A2B5A0; stroke-width: 2.4; stroke-linecap: round; }
.branch__twig { stroke-width: 1.8; }
.branch__leaf { fill: #6B7F4E; stroke: #A2B5A0; stroke-width: 1; transform-box: fill-box; transform-origin: 0% 50%; }
.branch__stem { stroke-dasharray: 520; stroke-dashoffset: 520; }
.branch__twig { stroke-dasharray: 80; stroke-dashoffset: 80; }
.branch__leaf { opacity: 0; transform: scale(0); }
.branch.is-in .branch__stem { animation: grow 1.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
.branch.is-in .branch__twig { animation: grow .8s cubic-bezier(.4,0,.2,1) var(--d) forwards; }
.branch.is-in .branch__leaf { animation: leaf .7s cubic-bezier(.34,1.56,.64,1) var(--d) forwards; }
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes leaf { to { opacity: 1; transform: scale(1); } }
.branch__label {
  margin: 12px 0 0; font: 300 clamp(12px, 1.05vw, 14px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .14em !important; text-transform: uppercase; color: #A2B5A0;
  opacity: 0; transition: opacity 1s ease 1.6s;
}
.branch.is-in .branch__label { opacity: 1; }
html[data-theme="light"] .branch__stem, html[data-theme="light"] .branch__twig { stroke: #6B7F4E; }
html[data-theme="light"] .branch__label { color: #6B7F4E; }
.branch.reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* V87 — proceso en tres bloques: prepro · rodaje · postpo */
.phases__intro {
  margin: clamp(22px, 2.6vw, 34px) 0 12px;
  font: 300 clamp(12px, 1.05vw, 14px)/1 "Jost", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .14em !important; text-transform: uppercase; color: rgba(235,235,228,.6);
}
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.phase {
  position: relative; padding: 18px 18px 20px;
  border: 1px solid rgba(162,181,160,.35); background: rgba(162,181,160,.06);
}
.phase__n { font: 300 12px/1 "Jost", sans-serif !important; letter-spacing: .1em !important; color: #A2B5A0; }
.phase h4 {
  margin: 10px 0 12px; font: 700 clamp(18px, 1.6vw, 22px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -.05em !important; text-transform: uppercase; color: #EBEBE4;
}
.phase ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.phase ul li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.35; color: rgba(235,235,228,.75); letter-spacing: -.03em; }
.phase ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1px; background: #A2B5A0; }
/* flechita entre fases */
.phase:not(:last-child)::after {
  content: "→"; position: absolute; right: -10px; top: 50%; transform: translate(50%, -50%); z-index: 2;
  font: 300 14px/1 "Jost", sans-serif; color: #A2B5A0; background: var(--page); padding: 2px 0;
}
html[data-theme="light"] .phases__intro { color: rgba(43,43,38,.6); }
html[data-theme="light"] .phase { border-color: rgba(78,81,26,.3); background: rgba(78,81,26,.04); }
html[data-theme="light"] .phase h4 { color: #262B0A; }
html[data-theme="light"] .phase ul li { color: rgba(38,43,10,.75); }
html[data-theme="light"] .phase__n, html[data-theme="light"] .phase:not(:last-child)::after { color: #4E511A; }
html[data-theme="light"] .phase ul li::before { background: #4E511A; }
@media (max-width: 760px) {
  .phases { grid-template-columns: 1fr; }
  .phase:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -10px; transform: translate(50%, 50%); }
}

/* V88 — Baúl: solo las carpetas, sin el fondo gris/blanco de Finder */
.vault { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
.vault__panel, .vault__root { background: transparent !important; box-shadow: none !important; }
.vault .vf span, .vault__name { color: #EBEBE4 !important; }
.vault__count { color: #A2B5A0 !important; }
.vf.is-hl::after { border-color: rgba(162,181,160,.6); }
.vault__lines line { stroke: #A2B5A0; }
html[data-theme="light"] .vault .vf span, html[data-theme="light"] .vault__name { color: #262B0A !important; }
html[data-theme="light"] .vault__count { color: #4E511A !important; }
html[data-theme="light"] .vf.is-hl::after { border-color: rgba(78,81,26,.5); }
html[data-theme="light"] .vault__lines line { stroke: #4E511A; }
.vault__sub::before { color: #A2B5A0 !important; }
.pablo__text > p.muted + p.muted { margin-top: -14px; }
.pablo__photo img { object-position: 50% 42%; }
/* texto de Pablo: regular, con negritas solo en lo importante */
.pablo__text > p.muted {
  font: 400 clamp(15px, 1.15vw, 17px)/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -.01em !important; color: rgba(235,235,228,.7) !important; -webkit-text-fill-color: rgba(235,235,228,.7) !important;
}
.pablo__text > p.muted strong { font-weight: 700; color: #EBEBE4; -webkit-text-fill-color: #EBEBE4; }
html[data-theme="light"] .pablo__text > p.muted { color: rgba(38,43,10,.72) !important; -webkit-text-fill-color: rgba(38,43,10,.72) !important; }
html[data-theme="light"] .pablo__text > p.muted strong { color: #262B0A; -webkit-text-fill-color: #262B0A; }
/* la portada siempre cubre la pieza mientras carga */
.piece__media video { background: #111 center / cover no-repeat; object-fit: cover; }

/* V89 — textos sobre vídeo siempre en blanco (también en modo claro) */
.piece figcaption, .piece .piece__t, .reel figcaption, .reel figcaption *, .frame figcaption,
html[data-theme="light"] .piece figcaption, html[data-theme="light"] .piece .piece__t,
html[data-theme="light"] .reel figcaption, html[data-theme="light"] .reel figcaption *, html[data-theme="light"] .frame figcaption {
  color: #F2F2F2 !important; -webkit-text-fill-color: #F2F2F2 !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.piece .piece__t { font-weight: 400 !important; }

/* V90 — Pablo Gómez: "blo" + "Gó" = Blogo, anotación a mano */
.name-mark { position: relative; overflow: visible !important; clip-path: none !important; }
.name-mark .nm { position: relative; }
.nm-svg { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.nm-line { fill: none; stroke: #DCC8A3; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1); }
.nm-label { position: absolute; transform: translate(-50%, 0) rotate(-4deg); white-space: nowrap; pointer-events: none;
  font: 600 clamp(34px, 3.4vw, 48px)/1 "Caveat", cursive !important; letter-spacing: 0 !important;
  color: #DCC8A3 !important; -webkit-text-fill-color: #DCC8A3 !important; text-transform: none !important;
  opacity: 0; transition: opacity .6s ease .9s; }
.name-mark.nm-on .nm-label { opacity: 1; }
html[data-theme="light"] .nm-line { stroke: #6B7F4E; }
html[data-theme="light"] .nm-label { color: #6B7F4E !important; -webkit-text-fill-color: #6B7F4E !important; }

/* V92 — preguntas frecuentes (antes de El baúl) */
.faq { padding: clamp(80px, 11vw, 150px) 0 clamp(40px, 5vw, 70px); background-color: var(--page) !important; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .section-head { position: sticky; top: 110px; margin: 0; }
.faq .h-section.h-sel { width: auto; padding: .35em .35em .35em 0; margin: -.35em 0; }
.faq__list { border-top: 1px solid rgba(235,235,228,.16); }
.faq__item { border-bottom: 1px solid rgba(235,235,228,.16); }
.faq__item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 12px;
  padding: clamp(20px, 2.2vw, 28px) 0; color: #EBEBE4;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__n { font: 400 13px/1 "Jost", sans-serif !important; letter-spacing: .04em !important; opacity: .5; }
.faq__q { font: 400 clamp(19px, 1.9vw, 26px)/1.25 "Jost", sans-serif !important; letter-spacing: -.01em !important; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.faq__item summary:hover .faq__q { transform: translateX(6px); }
.faq__ico { position: relative; width: 18px; height: 18px; justify-self: end; }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s cubic-bezier(.3,.7,.2,1); }
.faq__ico::after { transform: rotate(90deg); }
.faq__item[open] .faq__ico::after { transform: rotate(0deg); }
.faq__a { padding: 0 28px clamp(22px, 2.4vw, 30px) 56px; max-width: 62ch; }
.faq__a p { margin: 0 0 12px; font: 400 16px/1.65 "Jost", sans-serif !important; letter-spacing: 0 !important; color: rgba(235,235,228,.72); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: #DCC8A3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq__a a:hover { color: #EBEBE4; }
/* apertura suave donde el navegador lo permite */
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.3,.7,.2,1), content-visibility .45s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq { interpolate-size: allow-keywords; }
html[data-theme="light"] .faq__list, html[data-theme="light"] .faq__item { border-color: rgba(65,69,43,.2); }
html[data-theme="light"] .faq__item summary { color: #262B0A; }
html[data-theme="light"] .faq__a p { color: rgba(38,43,10,.72); }
html[data-theme="light"] .faq__a a { color: #1F3D2E; }
html[data-theme="light"] .faq__a a:hover { color: #6B7F4E; }
@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq .section-head { position: static; }
  .faq__item summary { grid-template-columns: 34px 1fr 22px; }
  .faq__a { padding-left: 46px; padding-right: 0; }
}
/* El baúl ya no necesita tanto aire arriba */
.faq + .baul { padding-top: clamp(70px, 9vw, 120px); }

/* V93 — el propio título "Preguntas frecuentes" es el desplegable, entre dos líneas rectas */
.faq { padding: clamp(56px, 7vw, 100px) 0 0; }
.faq__bar {
  list-style: none; cursor: pointer; display: block;
  border-top: 1px solid rgba(235,235,228,.22); border-bottom: 1px solid rgba(235,235,228,.22);
  transition: background-color .3s;
}
.faq__bar::-webkit-details-marker { display: none; }
.faq__bar:hover { background-color: rgba(235,235,228,.03); }
.faq__bar-in { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 18px; padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px); color: #EBEBE4; }
.faq__title { margin: 0; font: 400 clamp(24px, 2.8vw, 38px)/1.1 "Jost", sans-serif !important; letter-spacing: -.01em !important; text-transform: none; color: inherit; -webkit-text-fill-color: currentColor; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.faq__bar:hover .faq__title { transform: translateX(6px); }
.faq__count { font: 400 13px/1 "Jost", sans-serif !important; letter-spacing: .04em !important; opacity: .5; }
.faq__bar .faq__ico { width: 22px; height: 22px; }
.faq__all[open] > .faq__bar .faq__ico::after { transform: rotate(0deg); }
.faq__list { border-top: 0; }
.faq__all::details-content { block-size: 0; overflow: hidden; transition: block-size .6s cubic-bezier(.3,.7,.2,1), content-visibility .6s allow-discrete; }
.faq__all[open]::details-content { block-size: auto; }
.faq__all[open] .faq__list { padding-bottom: clamp(16px, 2vw, 28px); }
html[data-theme="light"] .faq__bar { border-color: rgba(65,69,43,.28); }
html[data-theme="light"] .faq__bar:hover { background-color: rgba(65,69,43,.04); }
html[data-theme="light"] .faq__bar-in { color: #262B0A; }

/* V94 — verticales: carrusel pequeño con flechas, como el de horizontales */
.pf__track--v { grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; }
.pf__track--v .piece__t { font-size: 15px; }
.pf__track--v .piece figcaption { padding: 40px 14px 12px; }
.pf__track--v .piece__sound { transform: scale(.85); transform-origin: top right; }
@media (max-width: 900px) { .pf__track--v { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; } }
@media (max-width: 560px) { .pf__track--v { grid-auto-columns: 46%; } }

/* V95 — menú móvil: la X se queda donde estaban las rayitas y el botón de tema se aparta a la izquierda */
@media (max-width: 1080px) {
  .nav.is-open .nav__burger { order: 3; }
  .nav.is-open .nav__links { order: 4; }
  .theme-toggle { transition: transform .45s cubic-bezier(.3,.7,.2,1), background .3s; }
  .nav.is-open .theme-toggle { transform: translateX(-28px); }
  .nav.is-open .theme-toggle:hover { transform: translateX(-28px) rotate(-12deg); }
}

/* =========================================================
   V96 — momentos del día: mañana · mediodía · tarde · noche
   (mañana y mediodía usan la base clara; tarde y noche, la oscura)
   ========================================================= */
html[data-time="manana"] { --page: #E3E8DF; }
html[data-time="manana"] .nav.is-scrolled { background: rgba(227,232,223,.86); }
html[data-time="tarde"] { --page: #211A14; --ink: #211A14; --bg-dark: #211A14; }
html[data-time="tarde"] .nav.is-scrolled { background: rgba(33,26,20,.8); }

/* botón: un icono por momento, gira al cambiar */
.theme-toggle { position: relative; }
.theme-toggle .ti { display: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ti-noche { fill: currentColor; stroke: none; }
html:not([data-time]) .theme-toggle .ti-noche,
html[data-time="manana"] .theme-toggle .ti-manana, html[data-time="mediodia"] .theme-toggle .ti-mediodia,
html[data-time="tarde"] .theme-toggle .ti-tarde, html[data-time="noche"] .theme-toggle .ti-noche { display: block; }
html:not([data-time])[data-theme="light"] .theme-toggle .ti-noche { display: none; }
html:not([data-time])[data-theme="light"] .theme-toggle .ti-mediodia { display: block; }
.theme-toggle.is-turning .ti { animation: ti-turn .6s cubic-bezier(.3,.7,.2,1); }
@keyframes ti-turn { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* etiqueta con el nombre del momento (al cambiar y al pasar el ratón) */
.theme-toggle__label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 400 11px/1 "Jost", sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase;
  background: rgba(20,20,20,.82); color: #EBEBE4; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s, transform .3s;
}
html[data-theme="light"] .theme-toggle__label { background: rgba(65,69,43,.88); color: #EBEBE4; }
.theme-toggle.show-label .theme-toggle__label { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .theme-toggle:hover .theme-toggle__label { opacity: 1; transform: translate(-50%, 0); } }
/* al pasar el ratón gira solo el icono (la etiqueta se queda recta) */
.theme-toggle:hover { transform: none; }
.theme-toggle .ti { transition: transform .3s; }
.theme-toggle:hover .ti { transform: rotate(-12deg); }
@media (max-width: 1080px) { .nav.is-open .theme-toggle:hover { transform: translateX(-28px); } }
/* el color de la luz sobre el globo: mañana rosada y suave, tarde dorada */
.map .maplibregl-canvas { transition: filter 1.2s ease; }
html[data-time="manana"] .map .maplibregl-canvas { filter: sepia(.14) saturate(.82) hue-rotate(-16deg) brightness(1.05) contrast(.93); }
html[data-time="tarde"] .map .maplibregl-canvas { filter: sepia(.38) saturate(1.4) hue-rotate(-12deg) brightness(1.02) contrast(1.05); }

/* V97 — desplegable de momentos del día */
.theme-wrap { position: relative; display: flex; }
.theme-toggle__label { display: none !important; }
.theme-menu {
  position: absolute; top: 100%; right: -8px; z-index: 60; min-width: 172px;
  margin-top: 10px; padding: 6px; border-radius: 16px;
  display: grid; gap: 2px;
  background: rgba(20,20,20,.9); border: 1px solid rgba(235,235,228,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .25s ease, transform .3s cubic-bezier(.3,.7,.2,1), visibility 0s .3s;
}
/* puente invisible para que el ratón no pierda el menú al bajar */
.theme-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.theme-wrap.is-open .theme-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s cubic-bezier(.3,.7,.2,1), visibility 0s; }
@media (hover: hover) {
  .theme-wrap:hover .theme-menu, .theme-wrap:focus-within .theme-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s cubic-bezier(.3,.7,.2,1), visibility 0s; }
}
.theme-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px;
  background: transparent; color: rgba(235,235,228,.68); cursor: pointer; text-align: left;
  font: 400 13px/1 "Jost", sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.theme-menu button:hover { background: rgba(235,235,228,.07); color: #EBEBE4; }
.theme-menu button.is-active { background: rgba(235,235,228,.12); color: #EBEBE4; }
.theme-menu button.is-active::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #DCC8A3; }
.theme-menu .ti { display: block; width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.theme-menu .ti-noche { fill: currentColor; stroke: none; }
.theme-menu button:hover .ti { transform: rotate(-12deg); }
html[data-theme="light"] .theme-menu { background: rgba(240,240,234,.94); border-color: rgba(65,69,43,.12); box-shadow: 0 18px 40px -20px rgba(38,43,10,.35); }
html[data-theme="light"] .theme-menu button { color: rgba(38,43,10,.62); }
html[data-theme="light"] .theme-menu button:hover { background: rgba(65,69,43,.06); color: #262B0A; }
html[data-theme="light"] .theme-menu button.is-active { background: rgba(65,69,43,.1); color: #262B0A; }
html[data-theme="light"] .theme-menu button.is-active::after { background: #6B7F4E; }

/* V98 — temporadas altas y bajas (encima del portfolio) */
.season { margin: 0 0 clamp(64px, 8vw, 110px); }
.season__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.season__k { font: 400 12px/1 "Jost", sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase; color: #EBEBE4; opacity: .75; }
.season__note { margin: 0; max-width: 46ch; font: 400 14px/1.5 "Jost", sans-serif !important; letter-spacing: 0 !important; color: rgba(235,235,228,.6); }
.season__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.season__bar li { position: relative; display: grid; gap: 10px; cursor: default; }
.season__bar i {
  display: block; height: 16px; border-radius: 3px; background: var(--c, #DCC8A3);
  transform-origin: bottom; transition: transform .35s cubic-bezier(.3,.7,.2,1), filter .35s;
}
.season__bar li:first-child i { border-radius: 9px 3px 3px 9px; }
.season__bar li:last-child i { border-radius: 3px 9px 9px 3px; }
.season__bar li:hover i { transform: scaleY(1.5); filter: brightness(1.08); }
.season__bar span { font: 400 11px/1 "Jost", sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase; text-align: center; color: rgba(235,235,228,.55); }
.season__bar li.is-now span { color: #EBEBE4; }
.season__bar li.is-now span::after { content: ""; display: block; width: 4px; height: 4px; margin: 6px auto 0; border-radius: 50%; background: currentColor; }
/* nombre del mes y temporada al pasar el ratón */
.season__bar li::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 3;
  font: 400 11px/1 "Jost", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(20,20,20,.9); color: #EBEBE4; opacity: 0; transition: opacity .25s, transform .25s;
}
.season__bar li:hover::after { opacity: 1; transform: translate(-50%, 0); }
.season__bar li:first-child::after { left: 0; transform: translate(0, 4px); }
.season__bar li:first-child:hover::after { transform: none; }
.season__bar li:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.season__bar li:last-child:hover::after { transform: none; }
.season__legend { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 400 11px/1 "Jost", sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase; color: rgba(235,235,228,.55); }
.season__legend b { width: 120px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #6B7F4E, #DCC8A3 50%, #B4523F); }
html[data-theme="light"] .season__k { color: #262B0A; }
html[data-theme="light"] .season__note, html[data-theme="light"] .season__bar span, html[data-theme="light"] .season__legend { color: rgba(38,43,10,.62); }
html[data-theme="light"] .season__bar li.is-now span { color: #262B0A; }
html[data-theme="light"] .season__bar li::after { background: rgba(65,69,43,.92); }
@media (max-width: 640px) {
  .season__bar { gap: 3px; }
  .season__bar span { font-size: 9px !important; letter-spacing: 0 !important; }
  .season__bar i { height: 14px; }
}
/* título de la barra de temporadas */
.season__head { flex-direction: column; align-items: flex-start; gap: 10px; }
.season__title { margin: 0; font: 400 clamp(22px, 2.6vw, 34px)/1.15 "Jost", sans-serif !important; letter-spacing: -.01em !important; text-transform: none; color: #EBEBE4; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .season__title { color: #262B0A; }

/* V99 — la rama con desenfoque suave en algunas zonas y un eco borroso */
.branch__ghost { opacity: .32; }
html[data-theme="light"] .branch__ghost { opacity: .38; }

/* V100 — los pies de los softbox eran una "V" que parecía una flecha: ahora son trípodes de verdad (patas abiertas hacia el suelo) */
.sbx__stand::before, .sbx__stand::after { top: 68%; bottom: auto; left: 50%; right: auto; margin-left: -1.5px; transform-origin: top center; height: clamp(36px, 4.4vw, 56px); }
.sbx__stand::before { transform: rotate(30deg); }
.sbx__stand::after { transform: rotate(-30deg); }

/* V101 — pie de luz realista (SVG) que sujeta el softbox por detrás, en el aro trasero */
.sbx__stand { display: none !important; }
.sbx::after { content: ""; display: block; width: 100%; padding-top: 123%; }
.sbx__rig { position: absolute; z-index: 1; top: 0; margin-top: 96%; width: 80%; height: auto; overflow: visible; }
.sbx--l .sbx__rig { left: -37%; }
.sbx--r .sbx__rig { right: -37%; }
.sbx--l .sbx__metal { fill: url(#rigL); }
.sbx--r .sbx__metal { fill: url(#rigR); }
.sbx__part { fill: #1b1b1a; }
.sbx__foot { fill: #0e0e0e; }
.sbx__leg { fill: none; stroke: #2b2b29; stroke-width: 3.4; stroke-linecap: round; }
.sbx__leg--back { stroke: #55554f; stroke-width: 2.6; }
.sbx__brace { fill: none; stroke: #3c3c39; stroke-width: 1.5; stroke-linecap: round; }
.sbx__floor { fill: rgba(0,0,0,.28); filter: blur(2px); }
html:not([data-theme="light"]) .sbx__floor { fill: rgba(0,0,0,.5); }

/* fuera los numeritos de cada sección (01, 02…) */
.section-head .index { display: none !important; }
@media (max-width: 760px) {
  /* en móvil el trípode se mete un poco para que las patas no se salgan de la pantalla */
  .sbx__rig { width: 64%; margin-top: 100%; }
  .sbx--l .sbx__rig { left: -12%; }
  .sbx--r .sbx__rig { right: -12%; }
  .sbx::after { padding-top: 95%; }
}

/* V102 — clips tipo GIF del backstage junto a la foto de "Qué es Blogo Visuals" */
.about__media { position: relative; }
.about__gifs { position: absolute; z-index: 4; right: -16%; bottom: -7%; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.gif {
  display: block; width: clamp(92px, 9.5vw, 150px); aspect-ratio: 9 / 16; object-fit: cover;
  background: #111 center / cover no-repeat; border-radius: 14px;
  border: 4px solid #EBEBE4; box-shadow: 0 24px 40px -18px rgba(0,0,0,.65);
  transform: rotate(var(--r)) translateY(var(--y)); transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
.gif--a { --r: -6deg; --y: -26%; }
.gif--b { --r: 5deg; --y: 0%; }
html:not([data-theme="light"]) .gif { border-color: #2a2a28; }
/* aparecen al entrar la foto */
.about__gifs .gif { opacity: 0; transform: rotate(0deg) translateY(30px) scale(.9); transition: opacity .6s ease, transform .8s cubic-bezier(.3,.7,.2,1); }
.about__media:has(.about__photo.is-in) .gif { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)); }
.about__media:has(.about__photo.is-in) .gif--b { transition-delay: .15s; }
@media (max-width: 960px) {
  .about__media { max-width: 520px; }
  .about__gifs { right: -18%; }
}
@media (max-width: 640px) {
  .about__gifs { position: relative; right: auto; bottom: auto; justify-content: center; margin-top: -64px; gap: 10px; }
  .gif { width: 34vw; max-width: 140px; }
}

/* V103 — banda de vídeo en bucle (tipo GIF) con grano de película encima */
.gif-band { position: relative; margin: clamp(56px, 8vw, 110px) 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 12 / 5; background: #111; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.gif-band video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111 center / cover no-repeat; filter: saturate(.9) contrast(1.04); }
.gif-band::before {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .7s steps(5) infinite;
}
.gif-band::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 120px rgba(0,0,0,.35); }
.gif-band + .lines__label { margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 640px) { .gif-band { aspect-ratio: 16 / 10; border-radius: 18px; } }
/* clips del backstage: sin marco y más grandes */
.gif { border: 0 !important; width: clamp(120px, 12.5vw, 200px); border-radius: 16px; box-shadow: 0 26px 46px -18px rgba(0,0,0,.7); }
.about__gifs { right: -20%; bottom: -10%; gap: 14px; }
@media (max-width: 960px) { .about__gifs { right: -22%; } }
@media (max-width: 640px) { .about__gifs { right: auto; bottom: auto; } .gif { width: 40vw; max-width: 180px; } }
/* clips del backstage: debajo de la foto, en el hueco libre, sin tapar nada */
.about__gifs, .about__gifs[class] { position: relative; right: auto !important; bottom: auto !important; margin-top: clamp(24px, 3vw, 40px); justify-content: flex-start; align-items: flex-start; gap: clamp(14px, 2vw, 26px); padding-left: 6px; }
.about__gifs .gif { width: auto; flex: 0 0 calc(50% - 16px); max-width: 210px; }
.gif--a { --r: -4deg; --y: 0%; }
.gif--b { --r: 4deg; --y: 14%; }
.about__media { padding-bottom: 6%; }
@media (max-width: 640px) { .about__gifs, .about__gifs[class] { justify-content: center; margin-top: 22px; padding-left: 0; } }

/* V104 — cabecera: fuera del cuadro, desenfoque y mucho grano; dentro, nítido con poco grano */
.hero__haze, .hero__noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-sizing: border-box; padding: var(--ft, 30%) var(--fr, 35%) var(--fb, 30%) var(--fl, 35%); opacity: 0; transition: opacity 1.2s ease .2s; }
.hero.has-frame .hero__haze, .hero.has-frame .hero__noise { opacity: 1; }
/* el agujero del cuadro: la máscara quita la caja de contenido */
.hero__haze, .hero__noise {
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hero__haze { -webkit-backdrop-filter: blur(14px) saturate(.75) brightness(.82); backdrop-filter: blur(14px) saturate(.75) brightness(.82); background: rgba(10,10,10,.12); }
.hero__noise {
  opacity: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-origin: border-box; background-clip: border-box;
  animation: hero-noise .6s steps(4) infinite;
}
.hero.has-frame .hero__noise { opacity: .7; }
@keyframes hero-noise { 0% { background-position: 0 0; } 25% { background-position: -40px 25px; } 50% { background-position: 30px -35px; } 75% { background-position: -20px -15px; } 100% { background-position: 0 0; } }
/* marco fino y cruz */
.hero__frame {
  position: absolute; z-index: 1; pointer-events: none;
  top: var(--ft, 30%); left: var(--fl, 35%); right: var(--fr, 35%); bottom: var(--fb, 30%);
  border: 1px solid rgba(235,235,228,.85);
  opacity: 0; transform: scale(.96); transition: opacity 1s ease .4s, transform 1.2s cubic-bezier(.3,.7,.2,1) .4s;
}
.hero.has-frame .hero__frame { opacity: 1; transform: none; }
.hero__cross { position: absolute; left: 64%; top: 38%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.hero__cross::before, .hero__cross::after { content: ""; position: absolute; background: rgba(235,235,228,.9); }
.hero__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.hero__cross::after { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }
.hero__poster { z-index: 2; }
.hero__noise { mix-blend-mode: normal; }
.hero.has-frame .hero__noise { opacity: .3; }
/* grano neutro (puntos claros y oscuros) para que no lave la imagen */
.hero__noise {
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='3 0 0 0 -1  3 0 0 0 -1  3 0 0 0 -1  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero.has-frame .hero__noise { opacity: 1; }
/* cabecera: sin desenfoque fuera del cuadro (solo el grano) */
.hero__haze { display: none !important; }

/* =========================================================
   V105 — frames en tarjetas 21:9 (como la referencia, sin fechas)
   ========================================================= */
.cards21 { position: relative; aspect-ratio: 21 / 9; margin: 0 0 clamp(64px, 8vw, 110px); border-radius: 24px; overflow: hidden; background: #0d0d0c; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); isolation: isolate; }
.cards21.reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
.cards21__bg { position: absolute; inset: 0; z-index: 0; }
.cards21__bg img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(42px) saturate(1.15) brightness(.6); opacity: 0; transition: opacity 1.2s ease; }
.cards21__bg img.is-on { opacity: 1; }
.cards21__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%); }
.cards21__stage { position: absolute; inset: 0; z-index: 1; perspective: 1400px; }
/* tamaño de la tarjeta central */
.c21, .cards21__frame { position: absolute; left: 50%; top: 50%; width: 48.5%; height: 74.5%; margin: 0; transform: translate(-50%, -50%); }
.c21 {
  border-radius: 6px; overflow: hidden; background: #111; cursor: pointer;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.75);
  transition: transform 1s cubic-bezier(.55,.05,.2,1), filter 1s ease, opacity .8s ease;
  transform-style: preserve-3d;
}
.c21 video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111 center / cover no-repeat; }
.c21[data-pos="0"]  { z-index: 5; cursor: default; transform: translate(-50%, -50%); }
.c21[data-pos="1"]  { z-index: 4; filter: brightness(.55); transform: translate(-26%, -50%) scale(.72) rotateY(-24deg); }
.c21[data-pos="-1"] { z-index: 4; filter: brightness(.55); transform: translate(-74%, -50%) scale(.72) rotateY(24deg); }
.c21[data-pos="2"]  { z-index: 3; filter: brightness(.4); transform: translate(-10%, -50%) scale(.64) rotateY(-30deg); }
.c21[data-pos="-2"] { z-index: 3; filter: brightness(.4); transform: translate(-90%, -50%) scale(.64) rotateY(30deg); }
.c21[data-pos="far"] { z-index: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.5); }
/* textos alrededor de la tarjeta central */
.cards21__frame { z-index: 6; pointer-events: none; }
.cards21__name, .cards21__num, .cards21__by {
  position: absolute; white-space: nowrap; color: #EBEBE4;
  font: 500 clamp(9px, .8vw, 12px)/1 "Jost", sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase;
}
.cards21__name { left: 0; bottom: calc(100% + 10px); }
.cards21__num { right: 0; bottom: calc(100% + 10px); opacity: .8; }
.cards21__by { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
.cards21__by svg { width: 14px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }
/* flechas redondas */
.cards21__arrow {
  position: absolute; z-index: 7; top: 50%; width: clamp(30px, 3.4vw, 44px); height: clamp(30px, 3.4vw, 44px); margin-top: calc(clamp(30px, 3.4vw, 44px) / -2);
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(235,235,228,.14); color: #EBEBE4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .25s, transform .25s;
}
.cards21__arrow:hover { background: rgba(235,235,228,.26); transform: scale(1.06); }
.cards21__arrow svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cards21__arrow--prev { left: 11.5%; }
.cards21__arrow--next { right: 11.5%; }
@media (max-width: 760px) {
  .cards21 { aspect-ratio: 4 / 3; border-radius: 18px; }
  .c21, .cards21__frame { width: 72%; height: 62%; }
  .cards21__arrow--prev { left: 3%; }
  .cards21__arrow--next { right: 3%; }
}

/* V106 — tarjetas integradas en el fondo de la web (sin banda propia) y sin firma debajo */
.cards21 { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.cards21__bg, .cards21__by { display: none !important; }
.cards21__name, .cards21__num { color: #EBEBE4; }
html[data-theme="light"] .cards21__name, html[data-theme="light"] .cards21__num { color: #262B0A; }
.c21[data-pos="1"], .c21[data-pos="-1"] { filter: brightness(.75) saturate(.85); }
.c21[data-pos="2"], .c21[data-pos="-2"] { filter: brightness(.6) saturate(.7); opacity: .85; }
.c21 { border-radius: 10px; }
.cards21__arrow { background: transparent; border: 1px solid rgba(235,235,228,.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cards21__arrow:hover { background: rgba(235,235,228,.08); }
html[data-theme="light"] .cards21__arrow { color: #262B0A; border-color: rgba(38,43,10,.25); }
html[data-theme="light"] .cards21__arrow:hover { background: rgba(38,43,10,.06); }
.cards21__arrow--prev { left: 6%; }
.cards21__arrow--next { right: 6%; }
/* flechas con el color de fondo de la web para que se vean encima de las tarjetas */
.cards21__arrow { background: var(--page) !important; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.cards21__arrow:hover { filter: brightness(1.08); }

/* "¿Qué C▒▒▒ es trabajar en una oficina?": la C a la vista y el resto pixelado */
.censor { white-space: nowrap; }
.censor .pixel { width: 2.05em; margin: 0 .08em 0 .03em; }

/* V107 — lista de espera de El baúl */
.notify { position: relative; max-width: 520px; }
.notify__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.3,.7,.2,1), opacity .4s ease .1s; }
.notify__panel > * { min-height: 0; overflow: hidden; }
.notify__panel { gap: 0; }
.notify.is-open .notify__panel { grid-template-rows: 1fr; opacity: 1; }
.notify__panel { grid-template-rows: 0fr 0fr 0fr; }
.notify.is-open .notify__panel { grid-template-rows: auto auto auto; gap: 14px; }
.notify.is-open .notify__open { display: none; }
.notify__row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid rgba(235,235,228,.22); background: rgba(235,235,228,.05); }
.notify__email { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; color: #EBEBE4; font: 400 15px/1 "Jost", sans-serif; letter-spacing: 0; outline: none; }
.notify__email::placeholder { color: rgba(235,235,228,.45); }
.notify__send { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: .9em 1.4em; cursor: pointer; font-size: 13px; white-space: nowrap; }
.notify__send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.notify__send:hover svg { transform: translateX(3px); }
.notify__send:disabled { opacity: .6; cursor: default; }
.notify__ok { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font: 400 13px/1.5 "Jost", sans-serif !important; letter-spacing: 0 !important; color: rgba(235,235,228,.65); }
.notify__ok input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #6B7F4E; }
.notify__ok a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.notify__msg { margin: 0; font: 400 13px/1.5 "Jost", sans-serif !important; letter-spacing: 0 !important; color: rgba(235,235,228,.7); }
.notify__msg:empty { display: none; }
.notify__msg.is-error { color: #D98B76; }
.notify__msg.is-ok { color: #A2B5A0; }
.notify.is-done .notify__row, .notify.is-done .notify__ok { display: none; }
.notify__row:focus-within { border-color: rgba(220,200,163,.7); }
html[data-theme="light"] .notify__row { border-color: rgba(38,43,10,.22); background: rgba(38,43,10,.03); }
html[data-theme="light"] .notify__email { color: #262B0A; }
html[data-theme="light"] .notify__email::placeholder { color: rgba(38,43,10,.45); }
html[data-theme="light"] .notify__ok, html[data-theme="light"] .notify__msg { color: rgba(38,43,10,.7); }
html[data-theme="light"] .notify__msg.is-error { color: #A4472F; }
html[data-theme="light"] .notify__msg.is-ok { color: #4F6A3A; }
@media (max-width: 480px) { .notify__send { padding: .9em 1.1em; } .notify__email { padding: 0 10px; } }
.notify__panel, .notify.is-open .notify__panel { grid-template-rows: none; transition: none; }
.notify__panel > * { overflow: visible; }
.notify__panel { display: none; opacity: 1; }
.notify.is-open .notify__panel { display: grid; gap: 14px; animation: notify-in .55s cubic-bezier(.3,.7,.2,1); }
@keyframes notify-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* =========================================================
   V108 — contacto: ventana a pantalla completa con los dos correos
   ========================================================= */
.work__cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }
html.contact-open { overflow: hidden; }
.contact {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: var(--page); color: #EBEBE4;
  opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .55s cubic-bezier(.3,.7,.2,1);
}
.contact.is-open { opacity: 1; transform: none; }
.contact[hidden] { display: none; }
.contact__inner { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(90px, 12vh, 140px); padding-bottom: clamp(48px, 8vh, 90px); }
.contact__close {
  position: absolute; top: 22px; right: var(--gutter); width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(235,235,228,.25); background: transparent; color: inherit; cursor: pointer; transition: transform .3s, background .3s;
}
.contact__close:hover { transform: rotate(90deg); background: rgba(235,235,228,.06); }
.contact__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.contact__k { margin: 0 0 14px; font: 400 12px/1 "Jost", sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase; opacity: .6; }
.contact__title { margin: 0 0 clamp(36px, 5vw, 64px); font: clamp(56px, 11vw, 160px)/.9 var(--f-display); letter-spacing: -.04em; text-transform: uppercase; color: inherit; -webkit-text-fill-color: currentColor; }
.contact__list { border-top: 1px solid rgba(235,235,228,.18); }
.contact__item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px;
  padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid rgba(235,235,228,.18);
}
.contact__n { font: 400 13px/1 "Jost", sans-serif !important; opacity: .5; }
.contact__what { margin: 0 0 6px; font: 400 clamp(17px, 1.6vw, 22px)/1.3 "Jost", sans-serif !important; letter-spacing: -.01em !important; }
.contact__who { margin: 0; font: 400 12px/1.4 "Jost", sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; opacity: .55; }
.contact__mail {
  font: 400 clamp(18px, 2vw, 28px)/1.2 "Jost", sans-serif !important; letter-spacing: -.01em !important; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(220,200,163,.6);
  transition: color .25s, text-decoration-color .25s; word-break: break-all;
}
.contact__mail:hover { color: #DCC8A3; text-decoration-color: currentColor; }
.contact__copy {
  border: 1px solid rgba(235,235,228,.25); border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  padding: .7em 1.2em; font: 500 11px/1 "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.contact__copy:hover { background: rgba(235,235,228,.07); }
.contact__copy.is-done { border-color: #A2B5A0; color: #A2B5A0; }
.contact__ig { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(28px, 4vw, 48px); color: inherit; opacity: .7; font: 400 14px/1 "Jost", sans-serif !important; letter-spacing: .04em !important; text-decoration: none; transition: opacity .25s; }
.contact__ig:hover { opacity: 1; }
.contact__ig svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* entrada escalonada */
.contact .contact__title, .contact .contact__item, .contact .contact__ig { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.3,.7,.2,1); }
.contact.is-open .contact__title { opacity: 1; transform: none; transition-delay: .1s; }
.contact.is-open .contact__item { opacity: 1; transform: none; transition-delay: .2s; }
.contact.is-open .contact__item + .contact__item { transition-delay: .3s; }
.contact.is-open .contact__ig { opacity: .7; transform: none; transition-delay: .4s; }
html[data-theme="light"] .contact { color: #262B0A; }
html[data-theme="light"] .contact__close, html[data-theme="light"] .contact__copy { border-color: rgba(38,43,10,.22); }
html[data-theme="light"] .contact__list, html[data-theme="light"] .contact__item { border-color: rgba(38,43,10,.16); }
html[data-theme="light"] .contact__mail { text-decoration-color: rgba(107,127,78,.6); }
html[data-theme="light"] .contact__mail:hover { color: #6B7F4E; }
html[data-theme="light"] .contact__copy.is-done { border-color: #6B7F4E; color: #4F6A3A; }
@media (max-width: 760px) {
  .contact__item { grid-template-columns: 34px minmax(0, 1fr); }
  .contact__mail { grid-column: 2; }
  .contact__copy { grid-column: 2; justify-self: start; }
}
/* título de contacto más largo: un poco más pequeño */
.contact__title { font-size: clamp(44px, 8vw, 120px); max-width: 12ch; }
.nav__cta { white-space: nowrap; }
/* con el botón más largo, el menú no debe partirse en dos líneas */
.nav__links a, .nav__word { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1360px) {
  .nav { gap: 16px; }
  .nav__links { gap: clamp(12px, 1.4vw, 22px) !important; }
  .nav__links a { font-size: 11.5px !important; }
  .nav__cta { padding: .85em 1.2em !important; font-size: 11px !important; }
}

/* V109 — sin huecos vacíos: en móvil solo ocupa sitio la nota del proyecto activo */
@media (max-width: 760px) {
  .map__info.poster:not(.is-shown) { display: none !important; }
  .map__info.poster.is-shown { transform: none !important; }
}

/* =========================================================
   V110 — menos huecos y más ligera
   ========================================================= */
/* aire entre secciones más contenido (antes hasta 180px arriba y abajo) */
.about, .work, .baul, .pablo { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.baul { padding-bottom: clamp(24px, 3vw, 48px) !important; }
.baul + .pablo { padding-top: clamp(32px, 4vw, 64px) !important; }
/* clips del backstage en móvil: caben los dos sin salirse */
@media (max-width: 640px) {
  .about__gifs, .about__gifs[class] { gap: 12px; padding: 0; }
  .about__gifs .gif { flex: 0 0 calc(50% - 6px); max-width: none; }
}
/* el grano de la cabecera se mueve con transform (sin repintar la imagen) */
.hero__noise { background: none !important; animation: none !important; overflow: hidden; }
.hero__noise::before {
  content: ""; position: absolute; inset: -40px; will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='3 0 0 0 -1  3 0 0 0 -1  3 0 0 0 -1  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: hero-grain .5s steps(4) infinite;
}
@keyframes hero-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(18px, -20px); } 75% { transform: translate(-12px, -8px); } 100% { transform: translate(0, 0); } }
/* en móvil y con "reducir movimiento": grano quieto y menos desenfoques de fondo (lo que más traba) */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .grain, .hero__noise::before, .gif-band::before { animation: none !important; }
  .nav.is-scrolled, .theme-menu, .cards21__arrow, .theme-toggle__label { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:not([data-theme="light"]) .nav.is-scrolled { background: rgba(20,20,20,.94) !important; }
  html[data-theme="light"] .nav.is-scrolled { background: rgba(235,235,228,.96) !important; }
  html[data-time="tarde"] .nav.is-scrolled { background: rgba(33,26,20,.95) !important; }
  html[data-time="manana"] .nav.is-scrolled { background: rgba(227,232,223,.96) !important; }
}
/* la columna de la foto nunca más ancha que la pantalla */
.about__grid > * { min-width: 0; }
.about__media { width: 100%; }
.about__gifs .gif { min-width: 0; }