/* A single changing color field; chapters remain in the normal page flow. */
:root {
  --motion-reveal: 600ms;
  --motion-heading: 500ms;
  --motion-stagger: 70ms;
  --motion-feedback: 160ms;
  --motion-chapter: 360ms;
}
html.keyboard-navigation { scroll-behavior: auto; }
html.keyboard-navigation .button,
html.keyboard-navigation .ticket-luma,
html.keyboard-navigation .topic-tab,
html.keyboard-navigation .topics-section,
html.keyboard-navigation .topic-navigation,
html.keyboard-navigation .gallery-visual { transition: none; }
html.keyboard-navigation .button:active { transform: none; }
.topics-section {
  --topic-bg: var(--lime);
  --topic-ink: var(--ink);
  --topic-accent: var(--cobalt);
  --topic-on-accent: var(--paper);
  background: var(--topic-bg);
  color: var(--topic-ink);
  padding-top: 0;
  transition: background-color var(--motion-chapter) var(--ease-out), color var(--motion-chapter) var(--ease-out);
}
.topics-section[data-topic="imagenes"] { --topic-bg: var(--pink); --topic-accent: var(--ink); }
.topics-section[data-topic="videos"] { --topic-accent: var(--ink); }
.topics-section[data-topic="web"] { --topic-bg: var(--cobalt); --topic-ink: var(--paper); --topic-accent: var(--paper); --topic-on-accent: var(--cobalt); }
.topics-section[data-topic="presentaciones"] { --topic-bg: var(--cyan); }
.topics-section[data-topic="publicidad"] { --topic-bg: var(--orange); --topic-accent: var(--ink); }
.topics-section[data-topic="3d"] { --topic-bg: var(--lime); }
.topics-section[data-topic="automatizaciones"] { --topic-bg: var(--orange); --topic-accent: var(--ink); }
.topics-section[data-topic="otros"] { --topic-bg: var(--pink); --topic-accent: var(--ink); }
.topics-intro {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:end;
  gap:32px;
  max-width:1320px;
  margin:0 auto 26px;
  padding:44px 0 10px;
  background:transparent;
  color:inherit;
}
.topics-intro .section-eyebrow { color:inherit; font-size:11px; margin:0 0 16px; }
.topics-intro h2 { margin:0; font-size:clamp(36px,4vw,58px); line-height:.96; letter-spacing:-.06em; font-weight:780; }
.topics-intro .topics-intro-copy { max-width:38ch; margin:0 0 3px; font-size:clamp(14px,1.4vw,18px); line-height:1.5; letter-spacing:-.02em; }
.topic-board {
  --chapter-space: calc(100svh - var(--site-header-height, 64px) - var(--topic-nav-height, 72px) - 16px);
  --chapter-image-height: clamp(9rem, calc((var(--chapter-space) - 9.5rem) / 2), 17rem);
  max-width: 1320px;
  padding: 0;
  background: transparent;
  color: inherit;
}
.topic-navigation {
  top: var(--site-header-height, 64px);
  margin: 0;
  padding: 9px 0;
  background: var(--topic-bg);
  border-color: currentColor;
  transition: background-color var(--motion-chapter) var(--ease-out), color var(--motion-chapter) var(--ease-out);
}
.topic-tab[aria-current="true"] { background: var(--topic-accent); color: var(--topic-on-accent); }
/* Minimum height gives each chapter a screen; content can always grow past it. */
.topic-chapter { display: flow-root; min-height: max(0px, var(--chapter-space)); padding-bottom: 18px; }
.topic-chapter + .topic-chapter { border-color: currentColor; padding-top: 0; }
.topic-heading { margin: 16px 0 14px; gap: 24px; }
.topic-panel-label { margin-bottom: 6px; }
.topic-chapter h3 { font-size: clamp(2rem, 4vw, 3.25rem); }
.topic-chapter[data-topic="presentaciones"] h3 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); }
.topic-summary { max-width: 40ch; margin: 0; font-size: .875rem; line-height: 1.3; }
.topics-note { color: inherit; opacity: .75; }
.topic-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: currentColor transparent;
  scroll-behavior: auto;
  padding: 3px;
}
.topic-tab { flex: 1 0 auto; white-space: nowrap; }
.topic-tab:focus-visible { outline: 2px dashed currentColor; outline-offset: -4px; }
.topic-chapter { scroll-margin-top: calc(var(--topic-nav-height, 72px) + 8px); }
.topic-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 16px clamp(12px, 1.3vw, 18px);
  min-width: 0;
  padding: 0;
}
.gallery-card {
  position: relative;
  grid-column: span 3;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gallery-card:first-child, .gallery-card:nth-child(n+4) { grid-column: span 6; }
.gallery-card:has(.gallery-color:focus-visible) { outline: 3px solid currentColor; outline-offset: 5px; }
.gallery-picture {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

.gallery-visual {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow: hidden;
  container-type: size;
  background: #f5efe2;
  color: #080808;
  filter: grayscale(1) brightness(1.06);
  transition: filter 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.gallery-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-visual strong, .gallery-visual b { font-weight: 760; }
.gallery-visual small { font-size: 2.7cqi; font-weight: 650; letter-spacing: .03em; }
.gallery-card.is-color .gallery-visual,
.gallery-card:has(.gallery-color:focus-visible) .gallery-visual { filter: grayscale(0) brightness(1); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  padding: clamp(14px, 1.5vw, 22px);
  color: #fffdf3;
  background: linear-gradient(180deg, transparent 42%, #0003 62%, #000c 100%);
  pointer-events: none;
}
.gallery-overlay h4 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.gallery-description {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  max-width: 36ch;
  font-size: .875rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: inherit;
  transition: max-height 220ms var(--ease-out), opacity 180ms ease, margin 220ms var(--ease-out);
}
.gallery-card.is-color .gallery-description,
.gallery-card:has(.gallery-color:focus-visible) .gallery-description { max-height: 7em; opacity: 1; margin-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .gallery-card.is-hovered .gallery-visual { filter: grayscale(0) brightness(1); transform: scale(1.025); }
  .gallery-card.is-hovered .gallery-description { max-height: 7em; opacity: 1; margin-top: 8px; }
  .topic-tab:not([aria-current="true"]):hover { border-color: currentColor; }
}
/* Scenes are artwork within the card, not interactive interfaces. */
.gallery-cinema { position: relative; height: 100%; background: #0a0a0a; }
.gallery-frame { position: absolute; inset: 7%; border: 1px solid #fff5; }
.gallery-storyboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  height: 100%;
  padding: 8% 5%;
  background: #111;
}
.gallery-storyboard > div { position: relative; min-width: 0; overflow: hidden; }
.gallery-storyboard span { position: absolute; bottom: 6px; left: 6px; color: #fff; font-size: 3cqi; font-weight: 650; }
.gallery-browser { position: absolute; inset: 9% 5%; background: #fff9ec; box-shadow: 0 8px 0 #1422d72b; }
.gallery-browser-bar { height: 13%; display: flex; justify-content: space-between; align-items: center; padding: 0 6%; border-bottom: 1px solid #1112; font-size: 2.7cqi; font-weight: 750; }
.gallery-browser-bar i { font-style: normal; letter-spacing: .14em; }
.gallery-web-product { height: 72%; display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: 0; }
.gallery-web-product > div { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 12% 7% 12% 12%; }
.gallery-web-product strong { margin: 14% 0; font-size: 8.2cqi; line-height: .95; letter-spacing: -.06em; }
.gallery-web-product span { font-size: 2.9cqi; line-height: 1.3; }
.gallery-web-product img { object-position: 54% center; }
.gallery-web-foot { height: 15%; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #1112; font-size: 2.5cqi; }
.gallery-portfolio { height: 100%; padding: 7% 7% 0; background: #ff7b92; }
.gallery-sitebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid currentColor; padding-bottom: 5%; }
.gallery-sitebar strong { font-size: 3.3cqi; line-height: 1; letter-spacing: -.03em; }
.gallery-sitebar span { font-size: 2.5cqi; }
.gallery-portfolio-title { display: block; font-size: 7.5cqi; line-height: .92; letter-spacing: -.065em; margin: 4% 0; }
.gallery-portfolio-image { height: 50%; margin: 0 -8.2%; }
.gallery-portfolio-image img { object-position: center 42%; }
.gallery-editorial { height: 100%; padding: 7%; background: #fff8e8; }
.gallery-editorial-image { height: 50%; margin: 7% 0 5%; background: #080808; }
.gallery-editorial-image img { object-fit: contain; }
.gallery-editorial-foot { display: flex; align-items: end; justify-content: space-between; gap: 5%; }
.gallery-editorial-foot strong { font-size: 7.8cqi; line-height: .95; letter-spacing: -.05em; }
.gallery-editorial-foot span { text-align: right; font-size: 2.5cqi; line-height: 1.3; }
.gallery-slide { position: relative; height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; background: #ffefce; }
.gallery-slide > div:first-child { display: flex; flex-direction: column; justify-content: center; padding: 12% 7% 12% 13%; }
.gallery-slide strong { display: block; margin: 7% 0; font-size: 8cqi; line-height: .92; letter-spacing: -.055em; }
.gallery-slide span { font-size: 2.7cqi; line-height: 1.4; }
.gallery-slide-image { min-width: 0; overflow: hidden; }
.gallery-slide-image img { object-position: 51% center; }
.gallery-slide-number { position: absolute; bottom: 6%; right: 6%; color: #fff; }
.gallery-process { position: relative; height: 100%; padding: 6%; overflow: hidden; background: #1320d7; color: #fff9ed; }
.gallery-process > small, .gallery-process > strong, .gallery-process-steps { position: relative; z-index: 1; }
.gallery-process > strong { display: block; font-size: 8cqi; line-height: .94; letter-spacing: -.06em; margin: 5% 0; }
.gallery-process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9%; border-top: 1px solid #fff9; padding-top: 3%; }
.gallery-process-steps > div { display: flex; flex-direction: column; gap: 5px; }
.gallery-process-steps b { font-size: 8cqi; line-height: 1; }
.gallery-process-steps span { font-size: 3.1cqi; }
.gallery-process-texture { position: absolute; inset: 0; opacity: .22; mix-blend-mode: screen; }
.gallery-manifesto { height: 100%; padding: 8%; background: #090909; color: #fff5e6; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 8%; }
.gallery-manifesto img { height: 43%; object-fit: contain; }
.gallery-manifesto strong { font-size: 6cqi; line-height: 1.04; letter-spacing: -.04em; }
.gallery-manifesto small { font-size: 2.3cqi; opacity: .7; }
.gallery-advert { height: 100%; position: relative; overflow: hidden; background: #64ddf0; }
.gallery-advert > strong { position: absolute; z-index: 1; top: 7%; left: 7%; font-size: 9cqi; line-height: .87; letter-spacing: -.07em; color: #1320d7; }
.gallery-advert > img { position: absolute; top: 17%; height: 78%; object-fit: contain; }
.gallery-advert > div { position: absolute; bottom: 6%; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.gallery-advert span { max-width: 12ch; font-size: 4cqi; line-height: 1.05; font-weight: 750; }
.gallery-advert small { max-width: 14ch; font-size: 2.3cqi; text-align: right; }
.gallery-poster { position: relative; height: 100%; display: grid; place-items: center; padding: 5cqh 0 24cqh; background: var(--cobalt); }
.gallery-poster > div { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3cqh; width: 62%; height: 100%; padding: 4cqh 2cqi; background: var(--cyan); color: var(--cobalt); transform: rotate(-5deg); box-shadow: 7px 7px 0 #05050535; }
.gallery-poster img { min-height: 0; object-fit: contain; }
.gallery-poster small { text-align: center; font-size: min(2.7cqi, 5.5cqh); white-space: nowrap; }
.gallery-lettering { height: 100%; display: flex; align-items: center; padding: 6%; background: #050505; }
.gallery-lettering img { object-fit: contain; }
.gallery-product-study { position: relative; height: 100%; background: #64ddf0; }
.gallery-product-study img { object-position: center 38%; }
.gallery-materials { position: absolute; left: 8%; right: 8%; bottom: 7%; display: flex; justify-content: center; gap: 8%; }
.gallery-materials i { width: 11%; aspect-ratio: 1; background: #1320d7; border-radius: 50%; border: 2px solid #fff9; }
.gallery-materials i:nth-child(2) { background: #ff7a18; }
.gallery-materials i:nth-child(3) { background: #ff168c; }
.gallery-object { position: relative; height: 100%; perspective: 750px; background: #ffd5b1; }
.gallery-object-shadow { position: absolute; left: 27%; top: 80%; width: 55%; height: 10%; border-radius: 50%; background: #321b6133; filter: blur(9px); transform: rotate(-9deg); }
.gallery-box { position: absolute; left: 26%; top: 17%; width: 46%; height: 65%; transform-style: preserve-3d; transform: rotateX(-13deg) rotateY(-29deg) rotateZ(-5deg); }
.gallery-box-front { position: absolute; inset: 0; background: #fff5df; transform: translateZ(28px); border: 1px solid #e1d3b8; }
.gallery-box-front img { height: 78%; padding: 9%; object-fit: contain; }
.gallery-box-front small { position: absolute; bottom: 8%; left: 8%; right: 8%; font-size: 2.4cqi; letter-spacing: .09em; text-align: center; }
.gallery-box-side { position: absolute; right: -28px; top: 0; width: 56px; height: 100%; background: #1320d7; transform: rotateY(90deg); display: grid; place-items: center; color: #fff6dc; }
.gallery-box-side strong { font-size: 7.3cqi; transform: rotate(90deg); white-space: nowrap; }
.gallery-box-top { position: absolute; left: 0; top: -28px; width: 100%; height: 56px; background: #ff168c; transform: rotateX(90deg); }
.gallery-flow { position: relative; height: 100%; padding: 8%; background: #fff5df; overflow: hidden; }
.gallery-flow-steps { display: flex; align-items: center; justify-content: space-between; gap: 3%; margin-top: 8%; font-size: 5.3cqi; font-weight: 720; letter-spacing: -.04em; }
.gallery-flow-steps span { padding-bottom: 4%; border-bottom: 2px solid #ff168c; }
.gallery-flow-steps i { font-style: normal; font-size: 4cqi; }
.gallery-flow-image { position: absolute; right: -5%; bottom: -5%; width: 68%; height: 59%; transform: rotate(-6deg); }
.gallery-flow-image img { object-position: center; }
.gallery-flow > strong { position: absolute; left: 8%; bottom: 10%; z-index: 1; max-width: 10ch; font-size: 9.7cqi; line-height: .91; letter-spacing: -.06em; }
.gallery-statement { position: relative; height: 100%; background: #080808; color: #fff7e5; }
.gallery-statement img { opacity: .4; }
.gallery-statement > strong { position: absolute; inset: 9%; display: flex; align-items: center; font-size: 15.5cqi; letter-spacing: -.075em; line-height: .9; }
@media (max-width: 760px) {
  .topics-intro { grid-template-columns:1fr; gap:18px; padding:30px 0 12px; margin-bottom:14px; }
  .topics-intro h2 { font-size:40px; }
  .topics-intro .section-eyebrow { font-size:10px; margin-bottom:14px; }
  .topics-intro .topics-intro-copy { max-width:38ch; font-size:14px; }
  .topic-navigation { margin: 0; padding: 6px 0; }
  .topic-tabs { display: flex; gap: 4px; }
  .topic-tab { flex: 0 0 auto; min-height: 44px; padding: 10px 13px; font-size: 13px; }
  .topic-board {
    --chapter-space: calc(100svh - var(--site-header-height, 56px) - var(--topic-nav-height, 64px) - 16px);
    --chapter-lead-height: clamp(9rem, calc((var(--chapter-space) - 10.5rem) * .38), 14rem);
    --chapter-tile-height: clamp(7rem, calc((var(--chapter-space) - 10.5rem) * .31), 11rem);
  }
  .topic-heading { gap: 6px; margin: 16px 0 14px; }
  .topic-panel-label { margin-bottom: 6px; }
  .topic-chapter h3 { font-size: clamp(2.125rem, 9vw, 2.5rem); }
  .topic-chapter[data-topic="presentaciones"] h3 { font-size: clamp(1.5rem, 7.1vw, 1.8rem); }
  .topic-summary { min-height: 0; max-width: 40ch; font-size: .8125rem; line-height: 1.3; }
  .topic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:start; gap: 14px 12px; }
  .gallery-card, .gallery-card:nth-child(n+4) { grid-column: span 1; }
  .gallery-card:first-child { grid-column: 1 / -1; }
  .gallery-picture { height: var(--chapter-tile-height); aspect-ratio: auto; }
  .gallery-card:first-child .gallery-picture { height: var(--chapter-lead-height); aspect-ratio: auto; }
  .gallery-overlay { padding: 12px; gap: 0; }
  .gallery-overlay h4 { font-size: clamp(1rem, 4.25vw, 1.125rem); max-width: 16ch; line-height: 1.04; }
  .gallery-card:first-child .gallery-overlay h4 { font-size: clamp(1.5rem, 5.5vw, 1.75rem); max-width: 20ch; }
  .gallery-description { max-width: none; font-size: .75rem; line-height: 1.3; }
}
@media (max-width: 360px) {
  .topic-tabs { display: flex; }
  .topic-tab { padding: 10px 11px; font-size: 12px; }
  .gallery-overlay { padding: 10px; }
  .gallery-overlay h4 { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-visual, .topics-section, .topic-navigation, .topic-tab { transition: none; }
  .gallery-card.is-hovered .gallery-visual { transform: none; }
}
.motion-paused .gallery-visual, .motion-paused .topics-section, .motion-paused .topic-navigation, .motion-paused .topic-tab { transition: none; }
.motion-paused .gallery-card.is-hovered .gallery-visual { transform: none; }
@media print {
  .topic-navigation { position: static; }
  .topic-tabs { overflow: visible; flex-wrap: wrap; }
  .topic-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-card { break-inside: avoid; }
  .gallery-picture, .gallery-card:first-child .gallery-picture { aspect-ratio: 4 / 5; }
}

/* One title at rest; color and the short explanation appear on interaction. */
.gallery-color { position:absolute; inset:0; z-index:3; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; color:inherit; }
.gallery-color:focus { outline:none; }
.gallery-browser { inset:5%; box-shadow:none; }
.gallery-web-foot { display:none; }
.gallery-web-product { height:87%; }
.gallery-web-product > div { padding:8%; }
.gallery-web-product small,.gallery-web-product span,.gallery-sitebar span,.gallery-editorial-foot span,.gallery-slide span,.gallery-slide-number { display:none; }
.gallery-web-product strong { font-size:min(8cqi,27cqh); margin:0; }
.gallery-portfolio-title { font-size:6.4cqi; margin:3% 0; }
.gallery-portfolio-image { height:62%; }
.gallery-manifesto { padding:6%; }
.gallery-manifesto img { height:100%; }
.gallery-advert > img { inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-advert > strong { font-size:9cqi; color:var(--paper); text-shadow:0 1px 12px #0006; }
.gallery-statement > strong { font-size:12cqi; }
.gallery-flow-image { height:62%; width:58%; transform:none; }
.gallery-flow-steps { position:relative; z-index:1; }
/* Wide examples keep their lettering within the artwork's height as well as width. */
.gallery-slide>div:first-child { padding:8cqh 4cqi; }
.gallery-slide strong { font-size:min(8cqi,21cqh); margin:4cqh 0; }
.gallery-slide small, .gallery-flow>small { font-size:min(2.7cqi,6cqh); }
.gallery-flow { padding:7cqh 8cqi; }
.gallery-flow-steps { margin-top:6cqh; font-size:min(5.3cqi,17cqh); }
.gallery-statement>strong { font-size:min(12cqi,27cqh); }
@media(max-width:760px){
 .gallery-card:not(:first-child) .gallery-overlay { padding:10px; }
}

.gallery-process-steps { margin-top:7%; padding-top:5%; }

/* Five pieces in two rows. The media shrinks with the viewport, never the copy. */
@media(min-width:761px){
 .gallery-card .gallery-picture { height:var(--chapter-image-height); aspect-ratio:auto; }
 .gallery-card:first-child .gallery-overlay h4 { font-size:clamp(1.5rem,2.2vw,2rem); }
}
@media(min-width:761px) and (max-width:1023px){
 .gallery-card:not(:first-child) .gallery-overlay { padding:12px; }
 .gallery-card:not(:first-child) .gallery-overlay h4 { font-size:1.0625rem; }
 .gallery-description { font-size:.75rem; }
}
.gallery-picture { transition:transform var(--motion-feedback) var(--ease-out); }
.gallery-color:active { background:#ffffff08; }

@media(hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
 html:not(.motion-paused):not(.keyboard-navigation) .gallery-card:has(.gallery-color:active) .gallery-picture { transform:scale(.985); }
}
.motion-paused .gallery-picture,
.keyboard-navigation .gallery-picture { transition:none; }
@media(prefers-reduced-motion:reduce){.gallery-picture{transition:none}}
@media(min-width:600px) and (max-width:760px){
 .topics-intro { grid-template-columns:1fr 1fr; align-items:end; gap:25px; }
 .topic-heading { grid-template-columns:1fr 1fr; gap:25px; }
}

/* Distinct campaign examples leave the main slogan for the closing invitation. */
.gallery-manifesto{position:relative;background:var(--cobalt);color:var(--lime);padding:8%;overflow:hidden;isolation:isolate}
.gallery-manifesto strong{position:relative;z-index:1;font-size:12cqi;line-height:.92;letter-spacing:-.06em;max-width:8ch}
.gallery-manifesto>div{position:absolute;inset:0 0 0 40%;opacity:.3;z-index:-1}
.gallery-manifesto img{height:100%;object-fit:cover}
.gallery-lettering{justify-content:center;align-items:start;padding:3% 4% 13%}
.gallery-phrase-agente{height:100%;max-width:100%;aspect-ratio:1;background-image:url("landing-assets/v16/frases-chicha.webp");background-repeat:no-repeat;background-size:312.83% 208.55%;background-position:1.34% 96.81%}

/* These are static creative examples: no player, fake controls or looping scenes. */
.gallery-avatar, .gallery-staging { position:relative; height:100%; }
.gallery-avatar img { object-position:60% 38%; }
.gallery-avatar-label { position:absolute; left:6%; top:7%; max-width:30%; padding:6cqh 4cqi; background:var(--cyan); color:var(--ink); }
.gallery-avatar-label small { display:block; font-size:min(2.1cqi,5.5cqh); margin-bottom:4cqh; }
.gallery-avatar-label strong { display:block; font-size:min(5cqi,17cqh); line-height:.96; letter-spacing:-.05em; }
.gallery-tour { display:grid; grid-template-columns:1.8fr 1fr; gap:1.4%; height:100%; background:var(--paper); }
.gallery-tour-main, .gallery-tour-detail { min-width:0; overflow:hidden; }
.gallery-tour-detail img { width:170%; max-width:none; object-position:80% 50%; transform:translateX(-24%); }
.gallery-composition-frame { position:absolute; inset:8%; border:1px solid #fff9; }
.gallery-composition-frame::before, .gallery-composition-frame::after { content:""; position:absolute; top:0; bottom:0; left:33.33%; border-left:1px solid #fff4; }
.gallery-composition-frame::after { left:66.66%; }
.gallery-product-story { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2%; padding:5cqh 4cqi 20cqh; height:100%; background:var(--ink); }
.gallery-product-story>div { position:relative; min-width:0; overflow:hidden; }
.gallery-product-story>div:nth-child(2) img { width:190%; max-width:none; transform:translateX(-23%); }
.gallery-product-story>div:nth-child(3) img { object-position:75% center; }
.gallery-product-story small { position:absolute; top:5%; left:8%; color:var(--paper); font-size:3cqi; }
.gallery-moodboard { display:grid; grid-template-columns:1.7fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,.45fr); gap:4%; height:100%; padding:6cqh 5cqi 32cqh; background:var(--paper); }
.gallery-moodboard-main { grid-row:1 / 3; min-height:0; }
.gallery-moodboard-reference { min-height:0; }
.gallery-palette { display:flex; }
.gallery-palette i { flex:1; background:var(--cobalt); }
.gallery-palette i:nth-child(2) { background:var(--orange); }
.gallery-palette i:nth-child(3) { background:var(--cyan); }
.gallery-moodboard>small { position:absolute; bottom:23%; left:5%; font-size:min(2.5cqi,5.5cqh); }
.gallery-print { position:relative; height:100%; display:flex; align-items:center; justify-content:center; gap:8%; padding:7cqh 9cqi 21cqh; background:var(--orange); }
.gallery-print-paper { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:3cqh; height:100%; aspect-ratio:.85; max-width:45%; padding:3cqh 1cqi; background:var(--cyan); color:var(--cobalt); transform:rotate(-5deg); box-shadow:8px 8px 0 #05050525; }
.gallery-print-paper img { min-height:0; object-fit:contain; }
.gallery-print-paper small { text-align:center; font-size:min(2.3cqi,5.5cqh); white-space:nowrap; }
.gallery-print-mark { color:var(--cobalt); font-size:min(8.5cqi,22cqh); font-weight:850; letter-spacing:-.065em; line-height:.88; }
.gallery-event-site { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); gap:4cqh; padding:6cqh 5cqi; background:var(--cyan); color:var(--cobalt); }
.gallery-event-site .gallery-sitebar, .gallery-catalog .gallery-sitebar { padding-bottom:4cqh; }
.gallery-event-site .gallery-sitebar strong, .gallery-catalog .gallery-sitebar strong { font-size:min(3.3cqi,8cqh); }
.gallery-event-body { min-height:0; display:grid; grid-template-columns:1.2fr 1fr; gap:5%; align-items:center; }
.gallery-event-body>div { min-width:0; }
.gallery-event-body strong { display:block; margin:2cqh 0; font-size:min(8cqi,18cqh); line-height:.93; letter-spacing:-.06em; }
.gallery-event-body small { font-size:min(2.7cqi,5.5cqh); }
.gallery-event-body span { font-size:min(2.4cqi,5.5cqh); font-weight:750; }
.gallery-event-body img { object-fit:contain; min-height:0; max-height:100%; }
.gallery-catalog { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); gap:5cqh; padding:6cqh 5cqi; background:var(--paper); }
.gallery-catalog-items { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4%; }
.gallery-catalog-items>div { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:3cqh; }
.gallery-catalog-items img { min-height:0; }
.gallery-catalog-items small { display:block; font-size:min(2.4cqi,6cqh); }
.gallery-report { height:100%; display:grid; grid-template-columns:1.1fr 1fr; gap:6%; align-items:center; padding:8cqh 7cqi; color:var(--paper); background:var(--cobalt); }
.gallery-report strong { display:block; font-size:min(7.2cqi,23cqh); line-height:.98; letter-spacing:-.05em; margin-top:5cqh; }
.gallery-report small { font-size:min(2.2cqi,5.5cqh); }
.gallery-report-chart { display:flex; align-items:end; gap:8%; height:78%; padding-bottom:4cqh; border-bottom:1px solid currentColor; }
.gallery-report-chart i { flex:1; height:22%; background:var(--cyan); }
.gallery-report-chart i:nth-child(2) { height:39%; }
.gallery-report-chart i:nth-child(3) { height:55%; }
.gallery-report-chart i:nth-child(4) { height:46%; }
.gallery-report-chart i:nth-child(5) { height:82%; background:var(--pink); }
.gallery-lesson { height:100%; display:grid; grid-template-columns:1.1fr 1fr; gap:6%; padding:7cqh 6cqi; background:var(--pink); color:var(--ink); }
.gallery-lesson>div:first-child { display:flex; flex-direction:column; justify-content:center; }
.gallery-lesson small { font-size:min(2.7cqi,5.5cqh); }
.gallery-lesson strong { font-size:min(8cqi,21cqh); line-height:.97; letter-spacing:-.05em; margin-top:4cqh; }
.gallery-lesson-sheet { min-height:0; padding:4cqh 2cqi; background:var(--paper); transform:rotate(3deg); }
.gallery-lesson-sheet img { height:82%; object-position:75% center; }
.gallery-lesson-sheet span { display:block; font-size:min(2.1cqi,5.5cqh); font-weight:700; margin-top:3cqh; }
.gallery-billboard { position:relative; height:100%; padding:5cqh 4cqi; background:var(--ink); }
.gallery-billboard>img { position:absolute; inset:0; opacity:.48; }
.gallery-billboard-panel { position:relative; z-index:1; height:82%; width:72%; margin:0 auto; padding:5cqh 7cqi; background:var(--lime); color:var(--ink); transform:rotate(-3deg); border:4px solid var(--ink); box-shadow:8px 10px 0 #05050570; }
.gallery-billboard-panel strong { display:block; font-size:min(8cqi,18cqh); line-height:.9; letter-spacing:-.065em; }
.gallery-billboard-panel span { display:block; margin-top:3cqh; font-size:min(2cqi,4.5cqh); font-weight:700; }
.gallery-social-series { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4%; height:100%; padding:7cqh 7cqi 23cqh; background:var(--paper); }
.gallery-social-series>div { position:relative; min-height:0; overflow:hidden; padding:3cqh 2cqi; background:var(--orange); color:var(--ink); transform:rotate(-3deg); }
.gallery-social-series>div:nth-child(2) { background:var(--cyan); transform:rotate(2deg); }
.gallery-social-series>div:nth-child(3) { background:var(--pink); transform:rotate(-1deg); }
.gallery-social-series strong { position:relative; z-index:1; display:block; font-size:min(5.5cqi,15cqh); line-height:.96; letter-spacing:-.05em; margin-top:5cqh; }
.gallery-social-series small { position:relative; z-index:1; font-size:min(2.5cqi,6cqh); }
.gallery-social-series img { position:absolute; inset:auto 0 0; height:55%; object-position:70% center; mix-blend-mode:multiply; }
.gallery-social-series>div:nth-child(2) img { height:100%; opacity:.35; }

.gallery-set-design { position:relative; height:100%; padding:6cqh 5cqi; background:var(--cobalt); }
.gallery-set-image { height:76%; width:76%; margin-left:auto; }
.gallery-floor-plan { position:absolute; left:6%; bottom:19%; width:34%; height:51%; display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr; padding:4cqh 2cqi; background:var(--paper); box-shadow:6px 6px 0 #05050550; transform:rotate(-5deg); }
.gallery-floor-plan i { border:2px solid var(--cobalt); margin:1px; }
.gallery-floor-plan i:first-child { grid-row:1/3; border-bottom-width:6px; }
.gallery-set-design>small { position:absolute; left:45%; bottom:26%; font-size:min(2.3cqi,5.5cqh); color:var(--paper); }
.gallery-exhibition { height:100%; display:grid; grid-template-columns:1fr 1.7fr; gap:2%; padding:6cqh 0 23cqh 6cqi; background:var(--paper); color:var(--cobalt); }
.gallery-exhibition>div { align-self:center; }
.gallery-exhibition small { font-size:min(2.7cqi,5.5cqh); }
.gallery-exhibition strong { display:block; font-size:min(7.3cqi,18cqh); line-height:.92; letter-spacing:-.05em; margin-top:4cqh; }
.gallery-exhibition img { object-position:60% center; }
.gallery-voice { height:100%; padding:7cqh 7cqi; color:var(--cyan); background:var(--cobalt); }
.gallery-voice strong { display:block; margin-top:5cqh; font-size:min(8cqi,19cqh); line-height:.98; letter-spacing:-.05em; color:var(--paper); }
.gallery-waveform { display:flex; align-items:center; gap:2.6%; height:27%; margin-top:7cqh; }
.gallery-waveform i { flex:1; min-height:3px; background:var(--cyan); border-radius:2px; }
.gallery-waveform i:nth-child(3n) { background:var(--pink); }
.gallery-prompt-library { position:relative; height:100%; padding:6%; background:var(--orange); }
.gallery-prompt-library>div { position:absolute; inset:8% 16% 9% 8%; padding:6cqh 5cqi; background:var(--paper); box-shadow:3px 4px 0 #05050530; transform:rotate(-6deg); }
.gallery-prompt-library>div:nth-child(2) { inset:13% 11% 8% 13%; background:var(--cyan); transform:rotate(3deg); }
.gallery-prompt-library>div:nth-child(3) { inset:20% 7% 5% 17%; background:var(--lime); transform:rotate(-2deg); }
.gallery-prompt-library strong { display:block; font-size:min(7.5cqi,20cqh); line-height:.95; letter-spacing:-.05em; margin-top:4cqh; }
.gallery-prompt-library span { display:block; font-size:min(2.4cqi,5.5cqh); margin-top:4cqh; }
.gallery-brand-system { height:100%; display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,.22fr); gap:5%; padding:6cqh 5cqi; background:var(--paper); }
.gallery-brand-poster { position:relative; min-height:0; grid-row:1/3; overflow:hidden; background:var(--pink); }
.gallery-brand-poster img { object-position:65% center; mix-blend-mode:multiply; }
.gallery-brand-poster strong { position:absolute; inset:auto 6% 7%; font-size:min(5.2cqi,15cqh); line-height:.94; letter-spacing:-.05em; }
.gallery-brand-type { min-height:0; padding:4cqh 3cqi; color:var(--cobalt); background:var(--cyan); }
.gallery-brand-type small { font-size:min(2.7cqi,5.5cqh); }
.gallery-brand-type strong { display:block; font-size:min(10cqi,24cqh); line-height:.95; letter-spacing:-.08em; margin-top:3cqh; }
.gallery-brand-palette { display:flex; }
.gallery-brand-palette i { flex:1; background:var(--cobalt); }
.gallery-brand-palette i:nth-child(2) { background:var(--pink); }
.gallery-brand-palette i:nth-child(3) { background:var(--orange); }
.gallery-brand-palette i:nth-child(4) { background:var(--cyan); }
@media(max-width:760px){
 .gallery-billboard-panel { width:84%; border-width:2px; }
 .gallery-print-mark { font-size:min(9cqi,22cqh); }
}
@media print{
 .topic-chapter { min-height:0; }
 .gallery-card, .gallery-card:first-child, .gallery-card:nth-child(n+4) { grid-column:auto; }
 .gallery-card .gallery-picture, .gallery-card:first-child .gallery-picture, .gallery-card:nth-child(n+4) .gallery-picture { height:auto; aspect-ratio:4/3; }
}

/* Touch and keyboard expose the same information as hover. */
.gallery-scene-avatar img { object-position: 55% 30%; }
.gallery-scene-tour img { object-position: center 50%; }
.gallery-scene-staging img { object-position: 56% 45%; }
.gallery-voice-strip { position:absolute; left:6%; right:6%; top:8%; height:18%; padding:2cqh 3cqi; background:#050505ad; }
.gallery-voice-strip .gallery-waveform { height:100%; margin:0; }
.gallery-card.is-color .gallery-overlay,
.gallery-card:has(.gallery-color:focus-visible) .gallery-overlay { background:linear-gradient(transparent 8%,#0005 40%,#000e 100%); }
@media(hover:hover) and (pointer:fine){
 .gallery-card.is-hovered .gallery-overlay { background:linear-gradient(transparent 8%,#0005 40%,#000e 100%); }
}
.motion-paused .gallery-description,
.keyboard-navigation .gallery-description { transition:none; }
@media(prefers-reduced-motion:reduce){ .gallery-description { transition:none; } }
@media print{ .gallery-description { max-height:none; opacity:1; margin-top:8px; } }

/* A sticky stage uses document scrolling; it never intercepts wheel or touch. */
.topic-board.has-story { max-width:1440px; position:relative; }
.has-story .topic-stage {
  position:sticky;
  top:var(--site-header-height,64px);
  height:calc(100svh - var(--site-header-height,64px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 28px;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  min-width:0;
  background:var(--topic-bg);
  transition:background-color 160ms linear;
}
.has-story .topic-stage>*,.has-story .topic-tabs { min-width:0; max-width:100%; }
.has-story .topic-navigation { position:relative; top:auto; z-index:5; padding:7px 0; }
.has-story .topic-tabs { scrollbar-width:none; }
.has-story .topic-tabs::-webkit-scrollbar { display:none; }
.has-story .topic-chapters { position:relative; min-height:0; }
.has-story .topic-chapter {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:12px 0 6px;
  border:0;
  visibility:hidden;
  opacity:0;
  transform:translateY(24px);
  transition:opacity 280ms ease,transform 360ms var(--ease-out),visibility 0s 360ms;
  pointer-events:none;
}
.has-story .topic-chapters[data-direction="up"] .topic-chapter:not(.is-active) { transform:translateY(-24px); }
.has-story .topic-chapter.is-active {
  z-index:1;
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
  pointer-events:auto;
}
.has-story .topic-heading { flex:none; grid-template-columns:1.1fr 1fr; margin:0 0 12px; gap:24px; align-items:end; }
.has-story .topic-panel-label { display:none; }
.has-story .topic-chapter h3 { font-size:clamp(30px,3.4vw,48px); }
.has-story .topic-chapter[data-topic="presentaciones"] h3,
.has-story .topic-chapter[data-topic="automatizaciones"] h3 { font-size:clamp(26px,3vw,42px); }
.has-story .topic-summary { max-width:42ch; font-size:14px; line-height:1.3; }
.has-story .topic-gallery { flex:1; min-height:0; grid-template-rows:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; }
.has-story .gallery-card { min-height:0; height:100%; overflow:hidden; }
.has-story .gallery-card .gallery-picture { height:100%; aspect-ratio:auto; }
.topic-scroll-hint { display:none; }
.has-story .topic-scroll-hint { display:flex; justify-content:space-between; align-items:center; margin:0; font-size:11px; letter-spacing:.01em; }
.topic-progress { font-variant-numeric:tabular-nums; font-weight:700; }
/* Keep the photograph bright; the label alone carries its contrast. */
.gallery-overlay,
.gallery-card.is-color .gallery-overlay,
.gallery-card.is-hovered .gallery-overlay,
.gallery-card:has(.gallery-color:focus-visible) .gallery-overlay { background:none; padding:14px; }
.gallery-overlay h4 { background:#080808eb; color:#fff; padding:7px 10px; width:fit-content; max-width:22ch; font-size:clamp(18px,1.6vw,24px); line-height:1.03; letter-spacing:-.035em; }
.gallery-description { background:#080808ed; color:#fff; padding:0 10px; max-width:34ch; }
.gallery-card.is-color .gallery-description,
.gallery-card.is-hovered .gallery-description,
.gallery-card:has(.gallery-color:focus-visible) .gallery-description { margin-top:0; padding-top:7px; padding-bottom:8px; }
.gallery-card.is-hovered .gallery-visual { transform:none; }
.gallery-card:has(.gallery-color:focus-visible) { outline:0; }
.gallery-color:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
.gallery-visual { background:#f8f4eb; }
.gallery-deck { height:100%; overflow:hidden; background:var(--paper); }
.gallery-deck-track { display:flex; width:300%; height:100%; animation:gallery-deck-cycle 12s infinite; }
.gallery-deck-page { flex:1 0 33.3333%; min-width:0; width:33.3333%; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--cyan); }
.gallery-deck-page:nth-child(2) { background:var(--pink); }
.gallery-deck-page:nth-child(3) { background:var(--lime); }
.gallery-deck-page>div { padding:8cqh 4cqi; display:flex; flex-direction:column; justify-content:center; }
.gallery-deck-page strong { font-size:min(7cqi,20cqh); line-height:1.03; margin-top:4cqh; }
.gallery-deck-page small { font-size:min(2.4cqi,6cqh); }
.gallery-deck-page img { min-height:0; object-position:65% center; }
.gallery-automation { height:100%; padding:6cqh 5cqi; background:#faf6e9; display:grid; grid-template-rows:1fr 1.65fr; gap:7cqh; }
.gallery-auto-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8%; position:relative; align-items:center; }
.gallery-auto-nodes::before { content:""; position:absolute; left:10%; right:10%; top:50%; height:2px; background:var(--cobalt); }
.gallery-auto-nodes::after { content:""; position:absolute; left:10%; top:calc(50% - 4px); width:9px; height:9px; background:var(--pink); border-radius:50%; animation:gallery-flow-dot 6s infinite; }
.gallery-auto-node { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqh; padding:3cqh 1cqi; border:1px solid var(--cobalt); background:#fff; color:var(--cobalt); animation:gallery-node-pulse 6s infinite; animation-delay:calc(var(--node)*.8s); }
.gallery-auto-node>span { font-size:min(6cqi,13cqh); line-height:1; }
.gallery-auto-node strong { font-size:min(2.8cqi,6cqh); line-height:1.1; text-align:center; }
.gallery-auto-result { min-height:0; display:grid; grid-template-columns:1.2fr 1fr; gap:6%; overflow:hidden; }
.gallery-auto-result img { min-height:0; object-position:70% center; }
.gallery-auto-notes { display:flex; flex-direction:column; justify-content:center; gap:8%; padding:7%; background:var(--cyan); }
.gallery-auto-notes i { height:8%; background:var(--cobalt); width:80%; transform-origin:left; animation:gallery-note-reveal 6s infinite; }
.gallery-auto-notes i:nth-child(2) { width:95%; animation-delay:.2s; }
.gallery-auto-notes i:nth-child(3) { width:55%; animation-delay:.4s; }
.gallery-auto-notes b { font-size:min(2.8cqi,7cqh); line-height:1.1; margin-top:5%; }
/* Short, quiet loops make each result legible without adding playback controls. */
.gallery-visual img { animation:gallery-photo-pan 9s ease-in-out infinite alternate; transform:scale(1.025); }
.gallery-browser { overflow:hidden; }
.gallery-web-product,.gallery-portfolio-image,.gallery-editorial-image,.gallery-catalog-items { animation:gallery-site-scroll 9s ease-in-out infinite; }
.gallery-process-steps>div,.gallery-flow-steps { animation:gallery-step-reveal 7s ease-in-out infinite; }
.gallery-process-steps>div:nth-child(2) { animation-delay:.3s; }
.gallery-process-steps>div:nth-child(3) { animation-delay:.6s; }
.gallery-report-chart i { transform-origin:bottom; animation:gallery-chart-grow 7s ease-in-out infinite; }
.gallery-report-chart i:nth-child(2n) { animation-delay:.3s; }
.gallery-waveform i { transform-origin:center; animation:gallery-voice-wave 1.3s ease-in-out infinite alternate; }
.gallery-waveform i:nth-child(3n) { animation-delay:-.6s; }
.gallery-waveform i:nth-child(2n) { animation-delay:-.3s; }
.gallery-prompt-library>div,.gallery-lesson-sheet { animation:gallery-paper-shift 8s ease-in-out infinite; }
.gallery-prompt-library>div:nth-child(2) { animation-delay:.4s; }
.gallery-prompt-library>div:nth-child(3) { animation-delay:.8s; }
.gallery-phrase-agente { animation:gallery-letter-reveal 8s ease-in-out infinite; }
.gallery-visual *,.gallery-visual *::before,.gallery-visual *::after { animation-play-state:paused!important; }
.topic-stage.is-onscreen:not(.is-page-hidden) .topic-chapter.is-active .gallery-visual *,
.topic-stage.is-onscreen:not(.is-page-hidden) .topic-chapter.is-active .gallery-visual *::before,
.topic-stage.is-onscreen:not(.is-page-hidden) .topic-chapter.is-active .gallery-visual *::after { animation-play-state:running!important; }
@keyframes gallery-photo-pan { from { transform:scale(1.025) translateX(-.4%); } to { transform:scale(1.07) translateX(.5%); } }
@keyframes gallery-site-scroll { 0%,18%,100% { transform:translateY(0); } 65%,82% { transform:translateY(-8%); } }
@keyframes gallery-deck-cycle { 0%,25% { transform:translateX(0); } 33%,58% { transform:translateX(-33.3333%); } 66%,91% { transform:translateX(-66.6667%); } 100% { transform:translateX(0); } }
@keyframes gallery-chart-grow { 0%,8% { transform:scaleY(.22); } 40%,100% { transform:scaleY(1); } }
@keyframes gallery-step-reveal { 0%,8% { opacity:.35; transform:translateY(5%); } 35%,100% { opacity:1; transform:translateY(0); } }
@keyframes gallery-voice-wave { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
@keyframes gallery-paper-shift { 0%,15%,100% { translate:0 0; } 55%,75% { translate:2% -3%; } }
@keyframes gallery-letter-reveal { 0%,100% { transform:scale(.97); } 45%,70% { transform:scale(1.025); } }
@keyframes gallery-flow-dot { 0%,12% { left:10%; opacity:0; } 20% { opacity:1; } 80% { left:88%; opacity:1; } 90%,100% { left:88%; opacity:0; } }
@keyframes gallery-node-pulse { 0%,30%,100% { background:#fff; } 40%,65% { background:var(--lime); } }
@keyframes gallery-note-reveal { 0%,35% { transform:scaleX(.15); opacity:.3; } 70%,100% { transform:scaleX(1); opacity:1; } }
@media(max-width:760px){
 .has-story .topic-stage { grid-template-rows:auto minmax(0,1fr) 24px; }
 .has-story .topic-navigation { padding:4px 0; }
 .has-story .topic-tab { min-height:42px; padding:9px 12px; }
 .has-story .topic-chapter { padding:10px 0 4px; }
 .has-story .topic-heading { grid-template-columns:minmax(0,1fr); gap:5px; margin-bottom:10px; align-items:start; }
 .has-story .topic-chapter h3 { font-size:30px; line-height:1; }
 .has-story .topic-chapter[data-topic="presentaciones"] h3,
 .has-story .topic-chapter[data-topic="automatizaciones"] h3 { font-size:clamp(22px,6.2vw,29px); letter-spacing:-.065em; }
 .has-story .topic-chapter[data-topic="automatizaciones"] .topic-heading,
 .has-story .topic-chapter[data-topic="presentaciones"] .topic-heading { grid-template-columns:1fr; gap:4px; }
 .has-story .topic-summary { font-size:12px; line-height:1.25; }
 .has-story .topic-gallery { grid-template-rows:1.16fr 1fr 1fr; gap:9px; }
 .has-story .gallery-card .gallery-picture { height:100%; }
 .gallery-card .gallery-overlay,.gallery-card:not(:first-child) .gallery-overlay { padding:8px; }
 .gallery-card .gallery-overlay h4 { font-size:18px; padding:6px 7px; line-height:1.04; max-width:100%; }
 .gallery-card:first-child .gallery-overlay h4 { font-size:22px; }
 .gallery-description { font-size:12px; line-height:1.25; padding-left:7px; padding-right:7px; }
 .has-story .topic-scroll-hint { font-size:10px; }
}
@media(max-width:360px){
 .has-story .topic-heading { grid-template-columns:1fr; gap:5px; }
 .has-story .topic-heading h3 { font-size:27px; }
 .has-story .topic-chapter[data-topic="automatizaciones"] h3,
 .has-story .topic-chapter[data-topic="presentaciones"] h3 { font-size:24px; }
 .has-story .topic-summary { font-size:11px; }
 .gallery-card .gallery-overlay h4 { font-size:17px; }
 .gallery-card:first-child .gallery-overlay h4 { font-size:20px; }
 .gallery-description { font-size:11px; }
 .gallery-card.is-color .gallery-overlay,
 .gallery-card:has(.gallery-color:focus-visible) .gallery-overlay { padding:6px; gap:4px; background:#080808ed; justify-content:center; }
 .gallery-card.is-color .gallery-overlay h4,
 .gallery-card:has(.gallery-color:focus-visible) .gallery-overlay h4 { flex:none; font-size:15px; line-height:1.02; padding:0; background:none; }
 .gallery-card.is-color .gallery-description,
 .gallery-card:has(.gallery-color:focus-visible) .gallery-description { flex:none; max-height:none; padding:0; background:none; line-height:1.2; }
}
.keyboard-navigation .gallery-visual *,
.keyboard-navigation .gallery-visual *::before,
.keyboard-navigation .gallery-visual *::after { animation:none!important; }
.keyboard-navigation .has-story .topic-chapter,.keyboard-navigation .topic-stage { transition:none; }
.motion-paused .gallery-visual *,.motion-paused .gallery-visual *::before,.motion-paused .gallery-visual *::after { animation:none!important; }
.motion-paused .has-story .topic-chapter,.motion-paused .topic-stage { transition:none; }
@media(prefers-reduced-motion:reduce){
 .gallery-visual *,.gallery-visual *::before,.gallery-visual *::after { animation:none!important; }
 .has-story .topic-chapter,.topic-stage { transition:none; }
}
@media print{
 .topic-board.has-story { height:auto!important; }
 .has-story .topic-stage { display:block; position:static; height:auto; }
 .has-story .topic-chapter { position:static; visibility:visible; opacity:1; transform:none; pointer-events:auto; }
 .has-story .topic-gallery { display:grid; height:auto; }
 .has-story .gallery-card .gallery-picture { height:auto; aspect-ratio:4/3; }
 .topic-scroll-hint { display:none!important; }
 .gallery-visual * { animation:none!important; }
}
/* V23: much smaller labels; each photo gets its own camera move so no tile reads as a still. */
.has-story .topic-chapter h3,
.has-story .topic-chapter[data-topic="presentaciones"] h3,
.has-story .topic-chapter[data-topic="automatizaciones"] h3 { font-size:clamp(20px,1.9vw,28px); letter-spacing:-.045em; }
.has-story .topic-summary { font-size:13px; }
.gallery-overlay h4,
.gallery-card:first-child .gallery-overlay h4,
.gallery-card:not(:first-child) .gallery-overlay h4 { font-size:13px; font-weight:650; line-height:1.15; letter-spacing:-.01em; padding:5px 8px; max-width:none; }
.gallery-description { font-size:12px; }
.gallery-visual strong { font-size:min(4.6cqi,11cqh)!important; }
.gallery-visual small,.gallery-visual b { font-size:min(2.1cqi,5cqh)!important; }
.gallery-visual img { animation:gallery-cam-a 10s ease-in-out infinite alternate; }
.gallery-card:nth-child(2) .gallery-visual img { animation-name:gallery-cam-b; animation-duration:11s; }
.gallery-card:nth-child(3) .gallery-visual img { animation-name:gallery-cam-c; animation-duration:9s; }
.gallery-card:nth-child(4) .gallery-visual img { animation-name:gallery-cam-d; animation-duration:12s; }
.gallery-card:nth-child(5) .gallery-visual img { animation-name:gallery-cam-b; animation-direction:alternate-reverse; }
@keyframes gallery-cam-a { from { transform:scale(1.04) translate(-2%,1%); } to { transform:scale(1.16) translate(2%,-1.5%); } }
@keyframes gallery-cam-b { from { transform:scale(1.15) translate(2.5%,0); } to { transform:scale(1.05) translate(-2.5%,0); } }
@keyframes gallery-cam-c { from { transform:scale(1.06) translate(0,2.5%); } to { transform:scale(1.14) translate(0,-2.5%); } }
@keyframes gallery-cam-d { from { transform:scale(1.18) rotate(-.6deg); } to { transform:scale(1.04) rotate(.6deg); } }
@media(max-width:760px){
 .has-story .topic-chapter h3,
 .has-story .topic-chapter[data-topic="presentaciones"] h3,
 .has-story .topic-chapter[data-topic="automatizaciones"] h3 { font-size:21px; }
 .has-story .topic-summary { font-size:12px; }
 .gallery-card .gallery-overlay h4,.gallery-card:first-child .gallery-overlay h4 { font-size:12px; padding:4px 6px; }
 .gallery-description { font-size:11px; }
}
/* V46: topics travel bottom-to-top in step with the scroll (JS sets --shift per chapter); the board stays pinned. */
.has-story .topic-chapters { overflow:hidden; }
.has-story .topic-chapter,
.has-story .topic-chapter.is-active,
.has-story .topic-chapters[data-direction="up"] .topic-chapter:not(.is-active) {
  visibility:visible; opacity:1; transition:none;
  transform:translate3d(0, calc(var(--shift, 0) * (100% + 40px)), 0);
}
.has-story .topic-chapter:not(.is-active) { pointer-events:none; }
@media(prefers-reduced-motion:reduce){ .has-story .topic-chapter:not(.is-active) { visibility:hidden; } }
.gallery-visual { filter:grayscale(1) contrast(1.18) brightness(.94); }
.gallery-print-mark { font-size:min(5.2cqi,13cqh); }
.gallery-print-mark { font-size:min(5.2cqi,13cqh)!important; }
.gallery-moodboard { background:#151515; color:var(--paper); }
/* V25: one fixed reading order for every tab — section title + copy, tabs, one summary line, five examples. */
.has-story .topic-stage { grid-template-rows:auto auto minmax(0,1fr) 28px; }
.topic-stage .topics-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:24px; margin:0; padding:14px 0 12px; max-width:none; }
.topic-stage .topics-intro .section-eyebrow { margin:0 0 6px; }
.topic-stage .topics-intro h2 { font-size:clamp(26px,2.6vw,38px); line-height:1; }
.topic-stage .topics-intro h2 br { display:none; }
.topic-stage .topics-intro .topics-intro-copy { max-width:52ch; font-size:14px; line-height:1.4; }
.has-story .topic-heading { display:block; margin:0 0 10px; }
.has-story .topic-heading h3 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.has-story .topic-summary { max-width:none; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.gallery-frame { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); background:#151515; }
.gallery-frame-bar { display:flex; align-items:center; gap:5px; padding:1.6cqh 2.4cqi; background:#151515; color:#fff7e7b0; }
.gallery-frame-bar i { width:7px; height:7px; border-radius:50%; background:#fff7e760; }
.gallery-frame-bar span { margin-left:8px; font-size:min(2.2cqi,5cqh); font-weight:600; letter-spacing:.02em; }
.gallery-frame img { min-height:0; }
@media(max-width:760px){
 .topic-stage .topics-intro { grid-template-columns:1fr; gap:6px; padding:10px 0 8px; }
 .topic-stage .topics-intro .section-eyebrow { display:none; }
 .topic-stage .topics-intro h2 { font-size:22px; letter-spacing:-.05em; }
 .topic-stage .topics-intro .topics-intro-copy { font-size:12px; line-height:1.35; }
 .has-story .topic-stage { grid-template-rows:auto auto minmax(0,1fr) 24px; }
 .has-story .topic-summary { font-size:13px; }
 .has-story .topic-heading { margin-bottom:8px; }
}
.gallery-visual .gallery-frame { position:absolute; inset:0; width:auto; height:auto; max-width:none; margin:0; }
.gallery-visual { background:#151515; }
.gallery-visual { filter:grayscale(1) brightness(1.08) contrast(1.02); }

/* V34: the intro title and copy follow the active tab, so the one-line summary under the tabs would repeat them. */
.titulo-por-tema .has-story .topic-summary { display:none; }
.titulo-por-tema .topic-stage .topics-intro h2,
.titulo-por-tema .topic-stage .topics-intro .topics-intro-copy { margin-bottom:0; }
/* V36: the per-topic copy is now two full sentences about what you learn; give it room to read well. */
.titulo-por-tema .topic-stage .topics-intro .topics-intro-copy { max-width:64ch; font-size:15px; line-height:1.45; }
@media (max-width:760px) { .titulo-por-tema .topic-stage .topics-intro .topics-intro-copy { max-width:none; font-size:12.5px; line-height:1.38; } }