/* Montserrat 400–700 (variable), self-hosted from Google Fonts' own files,
   SIL Open Font License (fonts/montserrat/OFL.txt). Same subsets and
   unicode ranges Google served, so rendering is unchanged. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   STGO custom layer — hand-written, NOT Webflow-generated.
   Keep separate from stgo-2026.webflow.css (generated file stays pristine).
   Currently used by: index.html — operating-areas chapter (magnetic video
   portal + full-viewport sector spreads + horizontal capability rails,
   2026-08-15 definitive), transversal close, STGO Labs metadata line.
   Tokens follow the house system: near-black stage, #ffe600 yellow,
   #f3350c red punctuation, mono labels, dashed hairlines, rounded cards.
   ========================================================================== */

/* ===========================================================================
   INDICE — secciones de este fichero, en orden de cascada (no reordenar:
   varios bloques dependen del orden para resolver empates de especificidad)

    1. STGO custom layer — hand-written, NOT Webflow-generated.
    2. PORTAL — persistent visual window with magnetic sector transitions
    3. SECTOR SPREADS — one composed viewport per sector
    4. SECTOR LENS — transversal relevance selector (editorial, no pills)
    5. CAPABILITY RAIL — horizontal depth (Apple principle, STGO language)
    6. Responsive: below 992px — vertical reading order, swipeable rail,
    7. HOME RESPONSIVE — desktop grammar translated to vertical reading
    8. HOME MASCOT — responsive scroll morph + contextual Anima assistant
    9. CLIENT LOGOS — continuous Framer-style rail + contained card reveal
   10. CEMI — press coverage rail
   11. CEMI — agent pipeline panel (left column)
   =========================================================================== */

/* --- shared mono caps line (intro enumeration + Labs metadata) --- */
.text-style-label.text-gris.stgo-index_caps {
  opacity: 0.72;
  letter-spacing: 0.02em;
  max-width: 40em;
  margin-bottom: 2rem;
  text-align: left;
}

/* ==========================================================================
   PORTAL — persistent visual window with magnetic sector transitions
   ========================================================================== */

.stgo-port_grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
}

.stgo-port_col,
.stgo-port_entries {
  position: relative;
  z-index: 1;
}

/* grid items default to min-width:auto — without this the rail's content
   would widen the column instead of overflowing horizontally */
.stgo-port_entries,
.stgo-port_entry,
.stgo-rail_zone {
  min-width: 0;
}

.stgo-port {
  position: sticky;
  /* air above (below the ~6rem navbar) and below: the portal floats,
     it does not fill the viewport edge to edge */
  top: 6rem;
  height: calc(100vh - 11.5rem);
  height: calc(100dvh - 11.5rem);
  min-height: 27rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: #131313;
}

.stgo-port_layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--pdur, 500ms) ease,
    filter var(--pdur, 500ms) ease, transform var(--pdur, 500ms) ease;
}

.stgo-port_layer.is-active {
  opacity: 1;
}

.stgo-port_layer video,
.stgo-port_layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stgo-port::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.stgo-port_meta {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.stgo-port_meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stgo-port_name {
  color: #f8f7f3;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.stgo-port_name.is-switching {
  opacity: 0;
  transform: translateY(6px);
}

/* ==========================================================================
   SECTOR SPREADS — one composed viewport per sector
   ========================================================================== */

.stgo-port_entry {
  padding: 2.5rem 0;
}

/* Experimental sector atmospheres. One fixed, full-viewport layer sits
   behind the portal and spreads, then crossfades with the active sector. */
.stgo-area_atmospheres {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stgo-area_gradient {
  --stgo-gradient-opacity: 0.7;
  --stgo-lava-color: rgba(255, 255, 255, 0.55);
  --stgo-lava-highlight: rgba(255, 255, 255, 0.32);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.45, 0.05, 0.3, 0.95);
}

.stgo-area_gradient::before,
.stgo-area_gradient::after {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  transform-origin: center;
  background-repeat: no-repeat;
}

/* Two independent tonal fields reshape the balance of light and darkness.
   They remain soft gradients—not discrete blobs—while their unequal scaling
   gives the atmosphere a slow, liquid expansion and contraction. */
.stgo-area_gradient::before {
  z-index: 2;
  background: radial-gradient(ellipse 38% 52% at 50% 50%, var(--stgo-lava-highlight) 0%, var(--stgo-lava-color) 38%, transparent 76%);
  mix-blend-mode: screen;
  animation: stgo-atmosphere-lava-color 16s cubic-bezier(0.45, 0.05, 0.3, 0.95) infinite alternate;
  animation-play-state: paused;
}

.stgo-area_gradient::after {
  z-index: 3;
  background: radial-gradient(ellipse 42% 58% at 50% 50%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 36%, transparent 76%);
  /* pure black: multiply and normal composite to the same pixels, and normal skips a blend pass
     on a layer twice the size of the screen (it used to read mix-blend-mode: multiply) */
  mix-blend-mode: normal;
  animation: stgo-atmosphere-lava-shadow 20s cubic-bezier(0.42, 0.04, 0.28, 0.96) infinite alternate-reverse;
  animation-play-state: paused;
}

.stgo-area_gradient.is-active {
  opacity: var(--stgo-gradient-opacity);
}

.stgo-area_gradient > div {
  position: absolute;
  inset: 0;
}

.stgo-area_gradient-base {
  z-index: 0;
}

.stgo-area_gradient-vignette {
  z-index: 4;
}

.stgo-area_gradient-noise {
  inset: 0;
  z-index: 5;
  opacity: 0.48;
  mix-blend-mode: overlay;
  /* The SVG maps contain two source pixels per CSS pixel. Their quantised
     luminance preserves a sharp high-ISO texture on Retina displays. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='fine' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' seed='4' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0' result='mono'/%3E%3CfeComponentTransfer in='mono'%3E%3CfeFuncR type='discrete' tableValues='.05 .2 .38 .58 .78 .96'/%3E%3CfeFuncG type='discrete' tableValues='.05 .2 .38 .58 .78 .96'/%3E%3CfeFuncB type='discrete' tableValues='.05 .2 .38 .58 .78 .96'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fine)' opacity='.96'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cfilter id='coarse' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='4' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0' result='mono'/%3E%3CfeComponentTransfer in='mono'%3E%3CfeFuncR type='discrete' tableValues='.1 .28 .45 .62 .8 .94'/%3E%3CfeFuncG type='discrete' tableValues='.1 .28 .45 .62 .8 .94'/%3E%3CfeFuncB type='discrete' tableValues='.1 .28 .45 .62 .8 .94'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23coarse)' opacity='.62'/%3E%3C/svg%3E");
  background-size: 128px 128px, 320px 320px;
  background-blend-mode: hard-light;
}

.stgo-area_gradient.is-active::before,
.stgo-area_gradient.is-active::after {
  animation-play-state: running;
  will-change: transform;
}

@keyframes stgo-atmosphere-lava-color {
  0% { transform: translate3d(-18%, -16%, 0) scale3d(1.14, 1.34, 1) rotate(-4deg); }
  24% { transform: translate3d(7%, -12%, 0) scale3d(1.46, 1.13, 1) rotate(3deg); }
  51% { transform: translate3d(18%, 14%, 0) scale3d(1.17, 1.52, 1) rotate(5deg); }
  76% { transform: translate3d(-4%, 18%, 0) scale3d(1.55, 1.12, 1) rotate(-3deg); }
  100% { transform: translate3d(-18%, 3%, 0) scale3d(1.16, 1.48, 1) rotate(-5deg); }
}

@keyframes stgo-atmosphere-lava-shadow {
  0% { transform: translate3d(18%, 17%, 0) scale3d(1.42, 1.13, 1) rotate(4deg); }
  28% { transform: translate3d(-6%, 15%, 0) scale3d(1.12, 1.5, 1) rotate(-5deg); }
  57% { transform: translate3d(-18%, -8%, 0) scale3d(1.48, 1.12, 1) rotate(-3deg); }
  80% { transform: translate3d(4%, -18%, 0) scale3d(1.13, 1.55, 1) rotate(5deg); }
  100% { transform: translate3d(18%, 4%, 0) scale3d(1.38, 1.16, 1) rotate(3deg); }
}

/* One chart per block (2026-09-29): each atmosphere is a dark ground tinted
   with the block's colour, a static chart drawn by js/stgo-area-mapas.js,
   the shared vignette and grain. The slow tonal fields (::before/::after)
   stay, much quieter, so the ground still breathes under the chart. */
.stgo-area_gradient .stgo-area_mapa {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 55% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 90% at 55% 50%, #000 45%, transparent 100%);
}

.stgo-area_gradient .stgo-area_gradient-vignette {
  background: radial-gradient(circle at center, transparent 36%, rgba(0, 0, 0, 0.18) 64%, rgba(0, 0, 0, 0.7) 100%), linear-gradient(to bottom, transparent 62%, rgba(0, 0, 0, 0.45) 100%);
}

/* 01 · Architecture — mineral gold, a parcel plan. */
.stgo-area_gradient.is-architecture {
  --stgo-gradient-opacity: 0.85;
  --stgo-lava-color: rgba(204, 150, 61, 0.3);
  --stgo-lava-highlight: rgba(237, 225, 202, 0.14);
}

.stgo-area_gradient.is-architecture .stgo-area_gradient-base {
  background: radial-gradient(ellipse 90% 80% at 30% 18%, #1f1a12 0%, #110f0b 48%, #060505 100%);
}

.stgo-area_gradient.is-architecture::before { animation-duration: 18s; animation-delay: -7s; }
.stgo-area_gradient.is-architecture::after { animation-duration: 22s; animation-delay: -13s; }

/* 02 · Cinematic — optical cyan, a scan. */
.stgo-area_gradient.is-cinematic {
  --stgo-gradient-opacity: 0.85;
  --stgo-lava-color: rgba(67, 196, 198, 0.28);
  --stgo-lava-highlight: rgba(213, 224, 226, 0.14);
}

.stgo-area_gradient.is-cinematic .stgo-area_gradient-base {
  background: radial-gradient(ellipse 90% 80% at 30% 18%, #0f1c1d 0%, #0a1213 48%, #050606 100%);
}

.stgo-area_gradient.is-cinematic::before { animation-duration: 15s; animation-delay: -6s; }
.stgo-area_gradient.is-cinematic::after { animation-duration: 19s; animation-delay: -11s; }

/* 03 · Dev — restrained magenta, a topology. */
.stgo-area_gradient.is-dev {
  --stgo-gradient-opacity: 0.85;
  --stgo-lava-color: rgba(194, 71, 182, 0.26);
  --stgo-lava-highlight: rgba(225, 214, 224, 0.13);
}

.stgo-area_gradient.is-dev .stgo-area_gradient-base {
  background: radial-gradient(ellipse 90% 80% at 30% 18%, #1c121b 0%, #110c11 48%, #060506 100%);
}

.stgo-area_gradient.is-dev::before { animation-duration: 17s; animation-delay: -8s; }
.stgo-area_gradient.is-dev::after { animation-duration: 21s; animation-delay: -14s; }

@media (min-width: 992px) and (min-height: 660px) {
  .stgo-port_entry {
    /* full available viewport below the fixed navbar (~6rem allowance) */
    height: calc(100vh - 6rem);
    height: calc(100dvh - 6rem);
    min-height: 34rem;
    display: flex;
    flex-direction: column;
    /* composition: the whole cluster is centred so the block breathes
       evenly above and below instead of leaving one void in the middle */
    justify-content: center;
    padding: 2rem 0 2.25rem;
  }

  .stgo-spread_head {
    margin-bottom: 1.7rem;
  }
}

.stgo-port_entry-media {
  display: none;
}

.stgo-index_entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.stgo-index_title {
  margin: 0 0 0.8rem;
  font-family: Montserrat, sans-serif;
  color: #ffe600;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.05;
}

/* the area description uses the house manifesto typography: one large
   bold paragraph in the body face, key clause in yellow (hero device) */
.stgo-spread_manifest {
  margin: 0;
  color: #f8f7f3;
  /* height-aware scale: taller viewports earn the full manifesto size,
     shallow ones keep the spread inside the fold */
  font-size: clamp(1.02rem, 2.05vh, 1.55rem);
  font-weight: 600;
  line-height: 1.42;
  max-width: 42em;
}

.stgo-spread_manifest .is-key {
  color: #ffe600;
}

.stgo-spread_copy.is-mobile {
  display: none;
}

.stgo-spread_head {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   SECTOR LENS — transversal relevance selector (editorial, no pills)
   ========================================================================== */

.stgo-lens {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 1.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  padding: 0 3.5rem 0.25rem 0;
  margin-bottom: 1.1rem;
}

.stgo-lens::-webkit-scrollbar {
  display: none;
}

/* The sector line uses the site's signature mask fade to reveal that the
   row continues. JS removes each edge fade when that edge is reached. */
.stgo-lens.has-overflow.is-at-start:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%);
}

.stgo-lens.has-overflow:not(.is-at-start):not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
}

.stgo-lens.has-overflow:not(.is-at-start).is-at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
}

.stgo-lens_label {
  flex: 0 0 auto;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: #b6b6b6;
  opacity: 0.55;
  margin-right: 0.4rem;
}

.stgo-lens_btn {
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b6b6b6;
  transition: color 0.25s ease;
}

.stgo-lens_btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ffe600;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.stgo-lens_btn:hover {
  color: #f8f7f3;
}

.stgo-lens_btn:focus-visible {
  outline: 1px dashed rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

.stgo-lens_btn.is-active {
  color: #f8f7f3;
}

.stgo-lens_btn.is-active::after {
  transform: scaleX(1);
}

/* ==========================================================================
   CAPABILITY RAIL — horizontal depth (Apple principle, STGO language)
   ========================================================================== */

.stgo-rail_zone {
  position: relative;
}

.stgo-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 0 3.5rem 0.25rem 0;
}

.stgo-rail::-webkit-scrollbar {
  display: none;
}

/* Mirror the sector selector's optical cue: the cards dissolve into the
   stage while more content remains, then resolve fully at each edge. */
.stgo-rail.has-overflow.is-at-start:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4.5rem), transparent 100%);
}

.stgo-rail.has-overflow:not(.is-at-start):not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 4.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 4.5rem), transparent 100%);
}

.stgo-rail.has-overflow:not(.is-at-start).is-at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 100%);
}

.stgo-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.stgo-rcard {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: clamp(12.5rem, 16.5vw, 17rem);
  /* content defines most of the height; the floor only evens small cards */
  min-height: clamp(11.5rem, 27vh, 17rem);
  scroll-snap-align: start;
  border-radius: 1.25rem;
  background-color: #161616;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1.3rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, transform 0.35s ease,
    opacity 0.35s ease;
}

.stgo-rcard:hover {
  background-color: #1b1b1b;
}

/* Every capability keeps the same geometry. Importance comes only from the
   selected sector, so the previous lead-card treatment cannot conflict with
   the reordered result. */
.stgo-rcard.is-lead {
  width: clamp(12.5rem, 16.5vw, 17rem);
}

/* --- sector-lens relevance states ---------------------------------- */

/* One response, three clear relevance levels: stable card surfaces and
   geometry, with yellow metadata for primary capabilities and opacity only
   for the supporting levels. */
.stgo-rcard.is-sector-primary {
  opacity: 1;
}

.stgo-rcard.is-sector-primary .stgo-rcard_label {
  color: #ffe600;
  opacity: 1;
}

/* SECONDARY: relevant, quieter */
.stgo-rcard.is-sector-secondary {
  opacity: 0.62;
}

/* NEUTRAL: clearly subdued but still readable */
.stgo-rcard.is-sector-muted {
  opacity: 0.34;
}

.stgo-rcard_label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b6b6b6;
  opacity: 0.7;
  margin-bottom: 0.55rem;
}

.stgo-rcard.is-lead .stgo-rcard_label {
  color: #b6b6b6;
  opacity: 0.7;
}

.stgo-rcard_title {
  margin: 0 0 0.5rem;
  font-family: Montserrat, sans-serif;
  color: #f8f7f3;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
}

.stgo-rcard.is-lead .stgo-rcard_title {
  font-size: 1.02rem;
}

.stgo-rcard.is-lead.is-sector-primary .stgo-rcard_label {
  color: #ffe600;
  opacity: 1;
}

.stgo-rcard_text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #b6b6b6;
}

.stgo-rail_nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.stgo-rail_status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 8.5rem;
  margin-right: auto;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: #707070;
}

.stgo-rail_current {
  color: #ffe600;
}

.stgo-rail_track {
  position: relative;
  width: 4.5rem;
  height: 1px;
  margin-left: 0.35rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
}

.stgo-rail_track::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffe600;
  transform: scaleX(var(--rail-progress, 0));
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.stgo-rail_btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #1d1d1d;
  color: #f8f7f3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    opacity 0.25s ease;
}

.stgo-rail_btn:hover {
  background-color: #262626;
  color: #ffe600;
}

.stgo-rail_btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.rail-fits .stgo-rail_nav {
  display: none;
}

/* short laptop viewports: recover vertical budget without hiding content */
/* shallow/standard-laptop viewports: the compact tier keeps the whole
   spread (description, CTA, lens, rail, controls) inside the fold —
   measured: wider cards cut the rail from ~328px to ~238px */
@media (min-width: 992px) and (min-height: 660px) and (max-height: 830px) {
  .stgo-spread_manifest {
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 48em;
  }

  .stgo-index_title {
    font-size: 2rem;
  }

  .stgo-rcard {
    /* wider cards on shallow viewports: fewer text lines, and since the
       rail stretches every card to the tallest one, less total height */
    width: clamp(15.5rem, 21vw, 19rem);
    padding: 1.1rem 1.2rem 1.2rem;
  }

  .stgo-rcard.is-lead {
    width: clamp(15.5rem, 21vw, 19rem);
  }

  .stgo-rcard_text {
    font-size: 0.8rem;
  }

  .stgo-port_entry {
    padding-bottom: 1.5rem;
  }

  .stgo-spread_head {
    margin-bottom: 1.1rem;
  }

  .stgo-lens {
    margin-bottom: 0.8rem;
  }

  .stgo-rail_nav {
    margin-top: 0.45rem;
  }

  .stgo-spread_head {
    margin-bottom: 1.1rem;
  }

  .stgo-rcard {
    min-height: clamp(11rem, 25vh, 13rem);
  }

  .stgo-rcard.is-lead {
    min-height: clamp(11rem, 25vh, 13rem);
  }

  .stgo-rail_nav {
    margin-top: 0.45rem;
  }
}

/* very shallow desktop viewports: last tier before the mobile flow */
@media (min-width: 992px) and (min-height: 660px) and (max-height: 700px) {
  .stgo-port_entry {
    padding-top: 1.25rem;
  }

  .stgo-spread_manifest {
    font-size: 0.88rem;
    line-height: 1.35;
    max-width: 54em;
  }

  .stgo-rcard {
    min-height: 0;
    padding: 1rem 1.1rem 1.05rem;
  }

  .stgo-rcard_title {
    font-size: 0.95rem;
  }

  .stgo-spread_head {
    margin-bottom: 0.9rem;
  }
}

/* ==========================================================================
   Responsive: below 992px — vertical reading order, swipeable rail,
   no portal, no magnetism.
   ========================================================================== */

@media (max-width: 991px), (max-height: 659px) {
  .stgo-port_grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stgo-port_col {
    display: none;
  }

  .stgo-port_entry {
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    padding: 2.25rem 0 2rem;
  }

  .stgo-port_entry-media {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    margin: 0.25rem 0 1.5rem;
  }

  .stgo-port_entry-media img {
    display: block;
    width: 100%;
    height: auto;
  }

  .stgo-index_title {
    font-size: 2.15rem;
  }

  .stgo-spread_manifest {
    font-size: 1.12rem;
  }

  .stgo-rcard {
    width: min(78vw, 19rem);
    min-height: 15rem;
  }

  .stgo-rcard.is-lead {
    width: min(78vw, 19rem);
  }

  /* touch scrolls the rail natively */
  .stgo-rail_nav {
    display: none;
  }

}

@media (max-width: 479px) {
  .stgo-index_title {
    font-size: 1.85rem;
  }

}

/* --- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .stgo-area_gradient {
    transition: none;
  }

  .stgo-area_gradient::before,
  .stgo-area_gradient::after {
    animation: none;
    transform: none;
  }

  .stgo-port_layer {
    transition: opacity 0.12s linear;
    transform: none;
  }

  .stgo-rcard,
  .stgo-rcard:hover,
  .stgo-rcard.is-sector-primary {
    transform: none;
    transition-duration: 0.01s;
  }

  .stgo-lens_btn::after {
    transition: none;
  }

  .stgo-rail_track::after {
    transition: none;
  }

  .stgo-rail {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   HOME RESPONSIVE — desktop grammar translated to vertical reading

   This layer is deliberately scoped to index.html through .stgo-home. It
   does not change shared Webflow components on sector or template pages.
   ========================================================================== */

.stgo-home .stgo-home_hero .stgo-home_slogan {
  display: block;
}

/* the spaces between the slogan's words are real text now (the H1 reads
   «Generamos ideas, producimos…» for search engines and screen readers);
   they draw exactly what the old ::after " " drew, and collapse on phones,
   where each word is its own block */

@media screen and (max-width: 991px) {
  .stgo-home {
    overflow-x: clip;
  }

  .stgo-home .navbar_content,
  .stgo-home .navbar_component {
    min-width: 0;
  }

  .stgo-home .navbar_content {
    gap: 1rem;
  }

  .stgo-home .navbar_logo {
    width: min(16rem, 44vw);
  }

  /* HERO — preserve the two-beat mobile composition through the tablet
     breakpoint within a compact 95svh cinematic stage. */
  .stgo-home .stgo-home_hero {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero .home-header_component {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero .home-header_content {
    justify-content: flex-start;
    min-height: 100%;
    gap: 0;
  }

  .stgo-home .stgo-home_hero .home-header_bottom {
    flex-flow: column;
    align-items: stretch;
    gap: 0;
  }

  .stgo-home .stgo-home_hero .home-header_subheading {
    align-items: flex-start;
    width: 100%;
    max-width: 27rem;
    margin-top: calc(47.5vh - 1.125rem);
    margin-top: calc(47.5svh - 1.125rem);
    margin-left: 0;
    padding-bottom: 0;
    transform: translateY(-50%);
  }

  .stgo-home .stgo-home_hero .stgo-home_word-indent {
    display: none;
  }

  .stgo-home .stgo-home_hero .home-header_words-wrap {
    width: 100%;
  }

  .stgo-home .stgo-home_hero .home-header_subhead {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 88%;
    text-align: left;
  }

  .stgo-home .stgo-home_hero .stgo-home_slogan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .stgo-home .stgo-home_hero .stgo-home_slogan-line {
    display: block;
    width: 100%;
  }

  .stgo-home .stgo-home_hero .stgo-home_slogan-line::after {
    content: none;
  }

  .stgo-home .stgo-home_hero .home-header_contact {
    display: grid;
    grid-template-columns: minmax(9rem, 0.75fr) minmax(0, 1.25fr);
    flex: none;
    align-items: stretch;
    align-self: flex-start;
    width: 100%;
    max-width: 38rem;
    min-width: 0;
    margin-top: calc(4.5vh + 1.125rem);
    margin-top: calc(4.5svh + 1.125rem);
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .stgo-home .stgo-home_hero .backgroundstgo2026 {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  /* The manifesto follows the same full text column as the chapter intro. */
  .stgo-home .stgo-home_chapters > .padding-global-2 .div-info-principal {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  .stgo-home .container-button.container-button2 {
    width: auto;
    padding-right: 0;
  }

  /* OPERATING AREAS — the existing mobile model is the page precedent. */
  .stgo-home .stgo-home_areas .stgo-port_entry-media {
    aspect-ratio: 4 / 3;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry-media img {
    height: 100%;
    object-fit: cover;
  }

  /* PROOF — contain the long statement before cards begin. */
  .stgo-home .stgo-home_proof .testimonials_heading {
    max-width: 44rem;
  }

  .stgo-home .stgo-home_brands .padding-section-medium-2 {
    padding-top: 4rem;
  }

  .stgo-home .stgo-home_brands .spacer-xlarge-2 {
    padding-top: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  /* HERO — two beats on one continuous cinematic stage: the statement sits
     around mid-screen; the contact portrait arrives just after the fold. */
  .stgo-home .stgo-home_hero {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero .home-header_component {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero .home-header_content {
    justify-content: flex-start;
    min-height: 100%;
    gap: 0;
  }

  .stgo-home .stgo-home_hero .home-header_bottom {
    flex-flow: column;
    align-items: stretch;
    gap: 0;
  }

  .stgo-home .stgo-home_hero .home-header_subheading {
    align-items: flex-start;
    width: 100%;
    max-width: 27rem;
    margin-top: calc(47.5vh - 1.125rem);
    margin-top: calc(47.5svh - 1.125rem);
    margin-left: 0;
    padding-bottom: 0;
  }

  .stgo-home .stgo-home_hero .stgo-home_word-indent {
    display: none;
  }

  .stgo-home .stgo-home_hero .home-header_words-wrap {
    width: 100%;
  }

  .stgo-home .stgo-home_hero .home-header_subhead {
    font-size: clamp(2.25rem, 6.2vw, 3rem);
    text-align: left;
  }

  /* phones stack the card: the portrait becomes a wide, properly framed
     banner instead of a 7.5rem vertical sliver squeezing the copy */
  .stgo-home .stgo-home_hero .home-header_contact {
    display: grid;
    grid-template-columns: 1fr;
    flex: none;
    align-items: stretch;
    width: 100%;
    margin-top: calc(4vh + 1.125rem);
    margin-top: calc(4svh + 1.125rem);
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos {
    width: 100%;
    max-width: none;
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos.stgo-mascot-source {
    height: clamp(11rem, 52vw, 15rem);
    overflow: hidden;
  }

  .stgo-home .stgo-home_hero .backgroundstgo2026 {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .stgo-home .stgo-home_hero .backgroundstgo2026 video {
    object-position: 50% 26%;
  }

  /* LEGACY CARD CHAPTER — a native snap rail translates the desktop
     horizontal rhythm to touch without trapping the page's vertical flow. */
  .stgo-home .stgo-home_chapters .sticky-container {
    display: block;
    height: auto;
    margin-top: clamp(2.5rem, 7vw, 3.5rem);
    margin-bottom: 1rem;
  }

  .stgo-home .stgo-home_chapters .sticky-wrap {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .stgo-home .stgo-home_chapters .scroll-inner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    height: auto;
    padding-right: clamp(3rem, 16vw, 7rem);
    padding-left: 1.5rem;
    overflow-x: auto;
    overflow-y: clip;
    scroll-padding-left: 1.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
  }

  .stgo-home .stgo-home_chapters .scroll-inner::-webkit-scrollbar {
    display: none;
  }

  .stgo-home .stgo-home_chapters .scroll-card,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-destacado,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-casidestacado {
    display: grid;
    grid-template-areas: "card";
    align-items: end;
    flex: 0 0 min(87vw, 34rem);
    width: min(87vw, 34rem);
    min-width: min(87vw, 34rem);
    max-width: 34rem;
    height: auto;
    min-height: clamp(38rem, 82svh, 44rem);
    margin: 0;
    bottom: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .stgo-home .stgo-home_chapters .media-wrapper,
  .stgo-home .stgo-home_chapters .media-wrapper.button-solid {
    grid-area: card;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .stgo-home .stgo-home_chapters .content-wrapper {
    z-index: 4;
    grid-area: card;
    align-self: end;
    width: 100%;
    padding: 1.5rem;
    position: relative;
    inset: auto;
  }

  .stgo-home .stgo-home_chapters .text-wrapper {
    text-align: left;
    padding: 0;
  }

  .stgo-home .stgo-home_chapters .media-wrapper,
  .stgo-home .stgo-home_chapters .media-wrapper.button-solid {
    z-index: 1;
  }

  .stgo-home .stgo-home_chapters .div-block-127 {
    z-index: 1;
    height: 72%;
  }

  .stgo-home .stgo-home_chapters .div-block-128 {
    text-align: left;
  }

  .stgo-home .stgo-home_chapters .heading-style-display.heading-style-reducido {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    text-align: left;
  }

  .stgo-home .stgo-home_chapters .about_quote.about-slider {
    width: 100%;
    max-width: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
  }

  .stgo-home .stgo-home_chapters .container-button {
    width: auto;
    padding-right: 0;
  }

  .stgo-home .stgo-home_chapters .grid-cards {
    padding-top: 1.25rem;
    padding-bottom: 0;
  }

  .stgo-home .stgo-home_chapters > .padding-global-2 {
    padding-top: 3rem;
  }

  /* OPERATING AREAS — mobile restores the native media-first card anatomy:
     a short area statement lives on the image; filters and rail follow. */
  .stgo-home .stgo-home_areas .stgo-index_caps {
    margin-bottom: 1.25rem;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry-media {
    grid-area: 1 / 1;
    position: relative;
    height: clamp(32rem, 72svh, 40rem);
    aspect-ratio: auto;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, 0.2) 52%,
      rgba(0, 0, 0, 0.94) 100%
    );
  }

  .stgo-home .stgo-home_areas .stgo-port_entry-media img {
    height: 100%;
    object-fit: cover;
  }

  .stgo-home .stgo-home_areas .stgo-spread_head {
    z-index: 1;
    grid-area: 1 / 1;
    align-self: end;
    margin: 0 0 1.5rem;
    padding: clamp(1.25rem, 5vw, 1.75rem);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7);
  }

  .stgo-home .stgo-home_areas .stgo-lens,
  .stgo-home .stgo-home_areas .stgo-rail_zone {
    grid-column: 1;
  }

  .stgo-home .stgo-home_areas .stgo-index_title {
    font-size: clamp(2rem, 7vw, 2.4rem);
  }

  .stgo-home .stgo-home_areas .stgo-spread_manifest {
    max-width: 31rem;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 500;
  }

  .stgo-home .stgo-home_areas .stgo-spread_copy.is-desktop {
    display: none;
  }

  .stgo-home .stgo-home_areas .stgo-spread_copy.is-mobile {
    display: inline;
  }

  .stgo-home .stgo-home_areas .stgo-lens {
    gap: 1.25rem;
    padding-right: 2.75rem;
  }

  .stgo-home .stgo-home_areas .stgo-rail {
    gap: 0.75rem;
    padding-right: 2.75rem;
  }

  .stgo-home .stgo-home_areas .stgo-rcard,
  .stgo-home .stgo-home_areas .stgo-rcard.is-lead {
    width: min(80vw, 19rem);
    min-height: 14rem;
  }

  /* STANDARD — same desktop ingredients, recomposed as one mobile panel. */
  .stgo-home .stgo-home_standard {
    min-height: auto;
  }

  .stgo-home .stgo-home_standard .home-header_component {
    min-height: 0;
  }

  .stgo-home .stgo-home_standard .home-header_content {
    gap: 0;
    min-height: 0;
  }

  .stgo-home .stgo-home_standard .head-grid {
    position: relative;
    z-index: 1;
  }

  .stgo-home .stgo-home_standard .spacer-xhuge {
    position: relative;
    padding-top: 9rem;
  }

  .stgo-home .stgo-home_standard .showreel_play-wrapper {
    left: 0;
    bottom: 1.5rem;
  }

  .stgo-home .stgo-home_standard .showreel_play-text {
    font-size: 1.5rem;
  }

  .stgo-home .stgo-home_standard .showreel_play-icon-wrap {
    width: 3rem;
  }

  .stgo-home .stgo-home_standard .head-grid-2 {
    align-items: stretch;
  }

  .stgo-home .stgo-home_standard .about_quote {
    max-width: 44rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
  }

  /* PROOF — one readable evidence card at a time; metrics become a sequence. */
  .stgo-home .stgo-home_proof .testimonials_main {
    gap: 3rem;
  }

  .stgo-home .stgo-home_proof .testimonials_items {
    display: flex;
    flex-flow: column;
    gap: 1rem;
  }

  .stgo-home .stgo-home_proof .testimonials_cover {
    min-height: 30rem;
  }

  

  .stgo-home .stgo-home_proof .testimonials_main-wrap {
    padding: 2rem;
  }

  .stgo-home .stgo-home_proof .testimonials_numbers-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .stgo-home .stgo-home_proof .number_block {
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px dotted rgba(255, 255, 255, 0.22);
  }

  .stgo-home .stgo-home_proof .number_number {
    font-size: clamp(4rem, 14vw, 5rem);
  }

  .stgo-home .stgo-home_proof .number_desc {
    max-width: 22rem;
  }

  /* CTA + FOOTER — retain the framed close without desktop-sized voids. */
  .stgo-home .stgo-home_cta .padding-section-medium {
    padding-top: 4rem;
  }

  .stgo-home .stgo-home_cta .heading-style-h1 {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }

  .stgo-home .stgo-home_cta .button-secondary {
    max-width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .stgo-home .navbar_logo {
    width: min(14rem, 52vw);
  }

  .stgo-home .stgo-home_hero .home-header_component {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero {
    min-height: 95vh;
    min-height: 95svh;
  }

  .stgo-home .stgo-home_hero .home-header_content {
    gap: 2rem;
    padding: 1rem;
  }

  .stgo-home .stgo-home_hero .home-header_subhead {
    font-size: clamp(2.1rem, 9.4vw, 2.45rem);
  }

  .stgo-home .stgo-home_hero .home-header_words-wrap {
    height: 2.6rem;
  }

  .stgo-home .stgo-home_hero .home-header_contact {
    grid-template-columns: 1fr;
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos {
    padding: 0.85rem;
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos.home-stgo2026-sinpadding {
    padding: 0;
  }

  .stgo-home .stgo-home_hero .home-header_contact-text {
    font-size: 0.7rem;
  }

  .stgo-home .stgo-home_chapters .scroll-inner {
    padding-right: 3rem;
    padding-left: 1rem;
    scroll-padding-left: 1rem;
  }

  .stgo-home .stgo-home_chapters .scroll-card,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-destacado,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-casidestacado {
    flex-basis: 87vw;
    width: 87vw;
    min-width: 87vw;
    min-height: clamp(38rem, 82svh, 44rem);
  }

  .stgo-home .stgo-home_chapters .content-wrapper {
    padding: 1.25rem;
  }

  .stgo-home .stgo-home_chapters .heading-style-display.heading-style-reducido {
    font-size: 1.5rem;
  }

  .stgo-home .stgo-home_chapters .about_quote.about-slider {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .stgo-home .stgo-home_chapters > .padding-global-2 {
    padding-top: 2.5rem;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .stgo-home .stgo-home_areas .stgo-port_entry-media {
    height: clamp(31rem, 70svh, 36rem);
    aspect-ratio: auto;
  }

  .stgo-home .stgo-home_areas .stgo-index_title {
    font-size: 1.85rem;
  }

  .stgo-home .stgo-home_areas .stgo-spread_manifest {
    font-size: 0.95rem;
  }

  .stgo-home .stgo-home_areas .stgo-rcard,
  .stgo-home .stgo-home_areas .stgo-rcard.is-lead {
    width: min(84vw, 18rem);
    min-height: 14.5rem;
    padding: 1.15rem;
  }

  .stgo-home .stgo-home_standard .home-header_content {
    padding: 1rem;
  }

  .stgo-home .stgo-home_standard .heading-style-h4 {
    font-size: 1.7rem;
  }

  .stgo-home .stgo-home_standard .spacer-xhuge {
    padding-top: 7.5rem;
  }

  .stgo-home .stgo-home_standard .showreel_play-text {
    font-size: 1.25rem;
  }

  .stgo-home .stgo-home_standard .about_quote {
    font-size: 0.95rem;
  }

  .stgo-home .stgo-home_proof .testimonials_cover {
    min-height: 26rem;
  }

  

  .stgo-home .stgo-home_proof .testimonials_main-wrap {
    padding: 1.5rem;
  }

  .stgo-home .stgo-home_proof .number_number {
    font-size: clamp(3.5rem, 17vw, 4.5rem);
  }

  .stgo-home .stgo-home_brands .padding-section-medium-2 {
    padding-top: 3rem;
  }

  .stgo-home .stgo-home_cta .padding-section-medium {
    padding-top: 3.5rem;
  }

  .stgo-home .stgo-home_cta .heading-style-h1 {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .stgo-home .stgo-home_cta .button_text {
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   HOME MASCOT — responsive scroll morph + contextual Anima assistant

   The fixed layer is intentionally home-only. Ambient narration and the
   transcript are two states of the same component, controlled by one button.
   ========================================================================== */

.stgo-mascot {
  display: none;
}

@media screen {
  .stgo-home .stgo-home_hero .home-header_contact {
    pointer-events: none;
    position: relative;
  }

  .stgo-home .stgo-mascot-source {
    opacity: var(--stgo-mascot-portrait-opacity, 1);
  }

  /* on scroll the copy dissolves in place -- opacity plus blur, no
     folding transform: the card never deforms */
  .stgo-home .stgo-mascot-copy {
    opacity: var(--stgo-mascot-copy-opacity, 1);
    filter: blur(var(--stgo-mascot-copy-blur, 0px));
  }

  .stgo-mascot {
    --stgo-mascot-size: 5.75rem;
    --stgo-mascot-control: 2.25rem;
    --stgo-mascot-edge: clamp(1.25rem, 1.8vw, 1.75rem);
    --stgo2026-dock-gap: clamp(0.65rem, 0.9vw, 0.85rem);
    z-index: 101;
    pointer-events: none;
    display: block;
    position: fixed;
    inset: 0;
  }

  .stgo-mascot [hidden] {
    display: none !important;
  }

  .stgo-mascot_shell {
    width: var(--stgo-mascot-size);
    height: var(--stgo-mascot-size);
    opacity: var(--stgo-mascot-dock-opacity, 0);
    transform: translate3d(var(--stgo-mascot-x, 0), var(--stgo-mascot-y, 0), 0) scale3d(var(--stgo-mascot-scale-x, 1), var(--stgo-mascot-scale-y, 1), 1) rotate(var(--stgo-mascot-tilt, 0deg));
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }

  .stgo-mascot.is-morphing .stgo-mascot_shell {
    will-change: transform, opacity;
  }

  .stgo-mascot_avatar {
    background: #111;
    border-radius: 1.35rem;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.09);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  }

  .stgo-mascot_avatar::after {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 50% 110%, rgba(0, 0, 0, 0.72), transparent 58%);
    position: absolute;
    inset: 0;
  }

  .stgo-mascot_avatar video {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
    display: block;
  }

  .stgo-mascot_menu {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .stgo-mascot_toggle {
    width: var(--stgo-mascot-control);
    height: var(--stgo-mascot-control);
    border-radius: 50%;
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    background: var(--_colors---primary--stgo);
    box-shadow: 0 0.65rem 1.6rem rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.08);
  }

  .stgo-mascot_toggle {
    color: #0f0f0f;
    background: transparent;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .stgo-mascot_toggle {
    z-index: 4;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    background: var(--_colors---primary--stgo);
  }

  .stgo-mascot_toggle::before {
    content: "";
    position: absolute;
    inset: -0.3rem;
    border-radius: 50%;
  }

  .stgo-mascot_toggle:disabled {
    cursor: default;
    pointer-events: none;
  }

  .stgo-mascot_toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1.05rem;
    height: 1.05rem;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .stgo-mascot_unread {
    color: #fff;
    background: var(--_colors---primary--accent);
    border: 2px solid #111;
    border-radius: 999px;
    min-width: 1.12rem;
    height: 1.12rem;
    padding: 0 0.2rem;
    font-family: "Roboto Mono", monospace;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: -0.48rem;
    right: -0.48rem;
    box-shadow: 0 0.25rem 0.65rem rgba(0, 0, 0, 0.42);
  }

  .stgo-mascot.is-docked .stgo-mascot_shell,
  .stgo-mascot.is-docked .stgo-mascot_menu {
    pointer-events: auto;
  }

  .stgo-mascot.is-docked .stgo-mascot_shell {
    cursor: pointer;
  }

  .stgo-mascot.is-open .stgo-mascot_avatar {
    transform: scale(0.96) translate3d(0.08rem, 0.08rem, 0);
  }

  .stgo-mascot.is-open .stgo-mascot_toggle svg {
    transform: rotate(45deg);
  }

  .stgo-mascot_toggle:focus-visible,
  .stgo2026_submit:focus-visible,
  .stgo2026_stop:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0.25rem;
  }

  /* The expanded state has no global card. The panel is only an invisible
     layout boundary for independent liquid bubbles and controls. */
  .stgo2026_panel {
    color: #f4f3ef;
    background: transparent;
    border: 0;
    width: min(29rem, calc(100vw - var(--stgo-mascot-edge) - var(--stgo-mascot-edge) - var(--stgo-mascot-size) - var(--stgo2026-dock-gap)));
    height: min(34rem, calc(100dvh - var(--stgo-mascot-edge) - var(--stgo-mascot-edge)));
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    right: calc(var(--stgo-mascot-edge) + var(--stgo-mascot-size) + var(--stgo2026-dock-gap));
    bottom: var(--stgo-mascot-edge);
    z-index: 2;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(1rem, 1rem, 0) scale(0.94);
    transform-origin: 100% 100%;
    transition: opacity 0.28s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.48s;
  }

  .stgo2026_panel::after { content: none; }

  .stgo-mascot.is-open .stgo2026_panel {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .stgo2026_entry-meta {
    font-family: "Roboto Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.09em;
  }

  .stgo2026_history {
    flex: 1;
    min-height: 0;
    width: calc(100% + 3px);
    margin-right: -3px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1.35rem 1.35rem 0.8rem 0.8rem;
  }

  .stgo2026_history::before {
    content: "";
    background: linear-gradient(to bottom, rgba(34, 34, 32, 0.62) 0%, rgba(17, 17, 16, 0.42) 72%, rgba(10, 10, 10, 0) 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  }

  .stgo2026_transcript {
    height: 100%;
    /* breathing room under the last message: without it the closing line sits
       flush against the container's cut and reads as clipped */
    padding: 1.55rem calc(0.42rem + 3px) 1.15rem 0.42rem;
    pointer-events: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 1.5rem;
    scrollbar-color: rgba(244, 243, 239, 0.22) transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
  }

  .stgo2026_transcript::-webkit-scrollbar { width: 0.18rem; }
  .stgo2026_transcript::-webkit-scrollbar-track { background: transparent; }
  .stgo2026_transcript::-webkit-scrollbar-thumb {
    background: rgba(244, 243, 239, 0.22);
    border-radius: 999px;
  }

  .stgo2026_transcript:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 221, 0, 0.36);
  }

  .stgo2026_transcript:focus-visible { outline: 0; }

  .stgo2026_entry {
    width: fit-content;
    max-width: 92%;
    margin: 0 0 0.62rem;
    padding: 0.82rem 0.94rem 0.88rem;
    border-radius: 1.08rem 1.08rem 0.24rem 1.08rem;
    background: linear-gradient(145deg, rgba(43, 43, 41, 0.94), rgba(13, 13, 13, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 0.8rem 2.1rem rgba(0, 0, 0, 0.32);
    margin-left: auto;
    animation: stgo2026-entry-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .stgo2026_entry:first-of-type { margin-top: auto; }

  .stgo2026_entry.is-user {
    color: #0e0e0e;
    background: var(--_colors---primary--stgo);
    border-color: rgba(0, 0, 0, 0.08);
    border-radius: 0.95rem 0.95rem 0.95rem 0.22rem;
    margin-left: 0;
    margin-right: auto;
  }

  .stgo2026_entry-meta {
    color: var(--_colors---primary--stgo);
    margin-bottom: 0.34rem;
    font-size: 0.56rem;
  }

  .stgo2026_entry.is-user .stgo2026_entry-meta {
    color: rgba(0, 0, 0, 0.58);
  }

  .stgo2026_entry-copy {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.42;
  }

  .stgo2026_entry.is-thinking .stgo2026_entry-copy {
    color: rgba(244, 243, 239, 0.72);
    align-items: center;
    gap: 0.42rem;
    display: flex;
  }

  .stgo2026_thinking-dots {
    height: 0.7rem;
    align-items: center;
    gap: 0.18rem;
    display: inline-flex;
  }

  .stgo2026_thinking-dots i {
    background: var(--_colors---primary--stgo);
    border-radius: 50%;
    width: 0.22rem;
    height: 0.22rem;
    animation: stgo2026-thinking 1.05s ease-in-out infinite alternate;
  }

  .stgo2026_thinking-dots i:nth-child(2) { animation-delay: 0.16s; }
  .stgo2026_thinking-dots i:nth-child(3) { animation-delay: 0.32s; }

  .stgo2026_contact-link {
    color: var(--_colors---primary--stgo);
    text-decoration-color: rgba(255, 221, 0, 0.48);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  .stgo2026_entry.is-user .stgo2026_contact-link {
    color: #0e0e0e;
    text-decoration-color: rgba(14, 14, 14, 0.4);
  }

  .stgo2026_contact-link:hover { text-decoration-color: currentColor; }
  .stgo2026_contact-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 0.16rem;
  }

  .stgo2026_route-link {
    color: #111;
    background: var(--_colors---primary--stgo);
    border-radius: 999px;
    width: fit-content;
    margin-top: 0.62rem;
    padding: 0.42rem 0.72rem;
    font-family: "Roboto Mono", monospace;
    font-size: 0.58rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .stgo2026_route-link::after { content: "↗"; }
  .stgo2026_route-link:hover { background: #fff06a; }
  .stgo2026_route-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0.18rem;
  }

  .stgo2026_ai {
    background: transparent;
    border: 0;
    padding: 0 0.36rem 0.1rem;
    width: 100%;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.34rem;
  }

  .stgo2026_download-copy {
    color: rgba(244, 243, 239, 0.62);
    font-family: "Roboto Mono", monospace;
    font-size: 0.58rem;
    line-height: 1.35;
  }

  .stgo2026_download-copy {
    width: 100%;
    margin-bottom: 0.42rem;
    display: flex;
    justify-content: space-between;
  }

  .stgo2026_download-copy b {
    color: rgba(244, 243, 239, 0.86);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .stgo2026_download-copy span {
    color: var(--_colors---primary--stgo);
    font-variant-numeric: tabular-nums;
  }

  .stgo2026_download-meta {
    color: rgba(244, 243, 239, 0.5);
    font-family: "Roboto Mono", monospace;
    font-size: 0.54rem;
    line-height: 1.35;
    margin-top: 0.42rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stgo2026_download-meta:empty {
    display: none;
  }

  /* bytes done, shaders compiling: full bar that breathes, not a fake sweep */
  .stgo2026_download-track.is-preparing i {
    animation: stgo2026-breathe 1.4s ease-in-out infinite;
  }

  @keyframes stgo2026-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }

  .stgo2026_download-track {
    background: rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    height: 0.22rem;
    overflow: hidden;
  }

  .stgo2026_download-track i {
    background: var(--_colors---primary--stgo);
    width: var(--stgo2026-download, 0%);
    height: 100%;
    display: block;
    transition: width 0.24s ease;
  }

  /* until Chrome reports real progress the bar sweeps, so "loading" is always
     visibly alive -- a bar stuck at 0% reads as broken even when it is not */
  .stgo2026_download-track.is-indeterminate i {
    width: 34%;
    animation: stgo2026-sweep 1.15s ease-in-out infinite;
  }

  @keyframes stgo2026-sweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
  }

  .stgo2026_download {
    background: rgba(14, 14, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    width: 100%;
    padding: 0.62rem 0.72rem;
  }

  .stgo2026_form {
    background: rgba(18, 18, 18, 0.94);
    border: 1px solid rgba(255, 221, 0, 0.28);
    border-radius: 1.2rem;
    width: 100%;
    min-height: 2.45rem;
    padding: 0.24rem 0.24rem 0.24rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.34rem;
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.28);
  }

  .stgo2026_form:focus-within {
    border-color: rgba(255, 221, 0, 0.72);
    box-shadow: 0 0 0 1px rgba(255, 221, 0, 0.18), 0 0.7rem 1.8rem rgba(0, 0, 0, 0.28);
  }
  .stgo2026_form:has(.stgo2026_input:disabled) { border-color: rgba(255, 255, 255, 0.11); }
  .stgo2026_form.is-activation {
    cursor: pointer;
    border-color: rgba(255, 221, 0, 0.46);
  }

  .stgo2026_input {
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    width: 100%;
    min-height: 1.85rem;
    max-height: 5.5rem;
    padding: 0.3rem 0;
    resize: none;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .stgo2026_input::placeholder { color: rgba(244, 243, 239, 0.4); }
  .stgo2026_input:disabled { cursor: default; opacity: 0.72; }
  .stgo2026_form.is-activation .stgo2026_input {
    cursor: pointer;
    pointer-events: auto;
  }
  .stgo2026_form.is-activation .stgo2026_input::placeholder {
    color: var(--_colors---primary--stgo);
    opacity: 0.9;
  }

  .stgo2026_submit,
  .stgo2026_stop {
    color: #111;
    background: var(--_colors---primary--stgo);
    border: 0;
    border-radius: 50%;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    padding: 0;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .stgo2026_submit svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 1rem;
    height: 1rem;
  }

  .stgo2026_stop span {
    background: #111;
    border-radius: 0.08rem;
    width: 0.62rem;
    height: 0.62rem;
  }

  .stgo2026_submit:disabled { cursor: default; opacity: 0.28; }

  .stgo2026_local-note {
    color: rgba(244, 243, 239, 0.58);
    background: transparent;
    border: 0;
    width: 100%;
    margin: 0;
    padding: 0.08rem 0.14rem 0;
    font-size: 0.54rem;
    line-height: 1.3;
    text-align: left;
  }

  .stgo2026_local-note span {
    background: #55b982;
    border-radius: 50%;
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.34rem;
    display: inline-block;
    box-shadow: 0 0 0 0.18rem rgba(85, 185, 130, 0.08);
  }

  .stgo2026_sr-only {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @keyframes stgo2026-entry-in {
    from { opacity: 0; transform: translate3d(0, 0.45rem, 0); }
    to { opacity: 1; transform: none; }
  }

  @keyframes stgo2026-thinking {
    from { opacity: 0.28; transform: translate3d(0, 0.08rem, 0) scale(0.82); }
    to { opacity: 1; transform: translate3d(0, -0.08rem, 0) scale(1); }
  }
}

@media screen and (max-width: 991px) {
  .stgo-mascot {
    --stgo-mascot-size: 4.65rem;
    --stgo-mascot-control: 1.85rem;
    --stgo-mascot-edge: max(0.8rem, env(safe-area-inset-right));
  }

  .stgo-mascot_avatar { border-radius: 1.05rem; }

  .stgo2026_panel {
    width: min(30rem, calc(100vw - var(--stgo-mascot-edge) - var(--stgo-mascot-edge) - var(--stgo-mascot-size) - var(--stgo2026-dock-gap)));
    height: min(34rem, 62dvh);
    right: calc(var(--stgo-mascot-edge) + var(--stgo-mascot-size) + var(--stgo2026-dock-gap));
    bottom: var(--stgo-mascot-edge);
    gap: 0;
  }

  .stgo2026_transcript { padding: 1.25rem calc(0.25rem + 3px) 1rem 0.25rem; }
  .stgo2026_entry { max-width: 94%; }
  .stgo2026_ai { padding-inline: 0.18rem; }
}

@media screen and (max-width: 479px) {
  .stgo-mascot {
    --stgo-mascot-size: 4.25rem;
    --stgo-mascot-control: 1.72rem;
    --stgo-mascot-edge: max(0.68rem, env(safe-area-inset-right));
  }

  .stgo2026_panel {
    width: calc(100vw - var(--stgo-mascot-edge) - var(--stgo-mascot-edge) - var(--stgo-mascot-size) - var(--stgo2026-dock-gap));
    height: min(29rem, 54dvh);
  }

  /* where the local AI cannot run, the requirements card takes most of that height: the panel
     grows so the welcome above it still reads whole (at 54dvh it was cut in half) */
  .stgo2026_panel:has(.stgo2026_bridge:not([hidden])) {
    height: min(32rem, 70dvh);
  }

  .stgo2026_entry-copy { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-mascot_avatar,
  .stgo-mascot_toggle svg,
  .stgo2026_panel,
  .stgo2026_entry {
    transition: none;
    animation: none;
  }

  .stgo2026_thinking-dots i { animation: none; }
}

@media print {
  .stgo-mascot {
    display: none;
  }
}

/* HOME / CALIDAD — scroll-driven multicard evidence canvas.
   This layer preserves the original first frame and extends it spatially. */
.stgo-home .stgo-home_proof {
  overflow-x: clip;
}

.stgo-home .stgo-proof_runway {
  --stgo-proof-runway-height: 100svh;
  position: relative;
  height: var(--stgo-proof-runway-height);
}

.stgo-home .stgo-proof_stage {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  padding-top: clamp(6.75rem, 9vh, 8.5rem);
  padding-bottom: clamp(2.5rem, 4.5vh, 4.5rem);
  grid-template-columns: minmax(21rem, 0.4fr) minmax(0, 1fr);
  align-items: stretch;
}

.stgo-home .stgo-proof_stage .testimonials_head,
.stgo-home .stgo-proof_stage .testimonials_items {
  min-height: 0;
}

.stgo-home .stgo-proof_stage .testimonials_head {
  height: 100%;
}

.stgo-home .stgo-proof_stage .testimonials_items {
  --stgo-proof-edge-opacity: 1;
  --stgo-proof-screen-overhang: clamp(2rem, 3vw, 4rem);
  --stgo-proof-container-gutter: max(var(--fixed--3rem), calc((100vw - 90rem) / 2));
  display: block;
  position: relative;
  width: calc(100% + var(--stgo-proof-container-gutter) + var(--stgo-proof-screen-overhang));
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius--medium);
  contain: layout paint;
}

/* The canvas extends past the viewport. This screen-edge veil therefore has
   no visible box ending: content leaves the frame through a continuous,
   softly defocused falloff, like the site's permanent vertical vignettes. */
.stgo-home .stgo-proof_stage .testimonials_items::after {
  content: "";
  z-index: 20;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: var(--stgo-proof-screen-overhang);
  bottom: 0;
  width: clamp(6.5rem, 8.5vw, 9.5rem);
  background:
    radial-gradient(ellipse 110% 42% at 100% 8%, rgba(15, 15, 15, 0.34) 0%, transparent 72%),
    radial-gradient(ellipse 120% 48% at 100% 94%, rgba(15, 15, 15, 0.38) 0%, transparent 74%),
    linear-gradient(90deg, transparent 0%, rgba(15, 15, 15, 0.06) 42%, rgba(15, 15, 15, 0.34) 76%, #0f0f0f 100%);
  -webkit-backdrop-filter: blur(8px) saturate(0.78);
  backdrop-filter: blur(8px) saturate(0.78);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 34%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 34%, #000 74%);
  opacity: var(--stgo-proof-edge-opacity);
  transition: opacity 280ms ease;
}

.stgo-home .stgo-proof_grid-canvas {
  --stgo-proof-column-width: 30rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stgo-proof-column-width);
  gap: var(--fixed--1rem);
  width: max-content;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.stgo-home .stgo-proof_runway.is-active .stgo-proof_grid-canvas {
  will-change: transform;
}

.stgo-home .stgo-proof_grid-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: var(--fixed--1rem);
}

.stgo-home .stgo-proof_grid-column.is-hero {
  grid-template-rows: minmax(0, 1fr);
}

/* HOME / POR QUÉ STGO — eight arguments, one card (2026-09-29,
   docs/plans/2026-09-29-argumentos-proof.md). The owner picked the thesis
   card's layout and proportion for all eight: the site's text-on-media card,
   full-bleed image, the words at its foot over a scrim strong enough for any
   frame, every card the runway's column width.
   One type scale for the whole block, set against the rest of the home:
   claims at the H5 step (as the thesis), body at the size of the manifesto
   beside it, mono at the site's 12px card-label size. */
.stgo-home .stgo-proof_stage {
  --stgo-arg-claim: clamp(1.5rem, 2vw, 2rem);
  --stgo-arg-body: clamp(0.88rem, 1vw, 1rem);
  --stgo-arg-mono: 0.75rem;
}

.stgo-home .stgo-proof_grid-column.is-arg {
  grid-template-rows: minmax(0, 1fr);
}

.stgo-home .stgo-arg {
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: clip;
  border-radius: var(--border-radius--medium);
  background: #141414;
}

.stgo-home .stgo-arg_media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.stgo-home .stgo-arg_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the scrim, shared with the thesis card */
.stgo-home .stgo-arg_media::after,
.stgo-home .stgo-proof_grid-canvas.is-args .testimonials_cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.66) 54%, rgba(0, 0, 0, 0.92) 100%);
}

/* the arguments' text block takes the thesis's own box (.testimonials_main-wrap) */
.stgo-home .stgo-arg_body {
  position: relative;
  padding: var(--fixed--2-75rem) var(--fixed--4-5rem) var(--fixed--2-75rem) var(--fixed--2-75rem);
}

.stgo-home .stgo-arg_body,
.stgo-home .stgo-arg_thesis {
  display: grid;
  gap: 0.85rem;
  max-width: 31rem;
}

.stgo-home .stgo-arg_tag {
  margin: 0;
  color: rgba(248, 247, 243, 0.7);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: var(--stgo-arg-mono);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stgo-home .stgo-arg_claim {
  margin: 0;
  color: var(--_colors---primary--stgo);
  font-family: var(--_typography---font-family--secondary);
  font-size: var(--stgo-arg-claim);
  line-height: 1.05;
  font-weight: var(--_typography---font-weight--bold);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.stgo-home .stgo-arg_text {
  margin: 0;
  color: #f8f7f3;
  font-family: var(--_typography---font-family--secondary);
  font-size: var(--stgo-arg-body);
  line-height: 1.42;
  font-weight: var(--_typography---font-weight--medium);
}

.stgo-home .stgo-arg_proof {
  display: flex;
  gap: 0.6rem;
  margin: 0.2rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dotted rgba(255, 255, 255, 0.24);
  color: rgba(248, 247, 243, 0.72);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: var(--stgo-arg-mono);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stgo-home .stgo-arg_proof::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.42em;
  border-radius: 50%;
  background: #f3350c;
}

.stgo-home .stgo-arg_link {
  margin-left: 0.3rem;
  color: var(--_colors---primary--stgo);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.stgo-home .stgo-arg_link:hover,
.stgo-home .stgo-arg_link:focus-visible {
  color: #fff;
}

/* the manifesto beside the cards reads at the cards' body size */
.stgo-home .stgo-proof_stage .stgo-proof_manifesto-body .about_quote {
  font-size: var(--stgo-arg-body);
  line-height: 1.42;
}

@media screen and (min-width: 992px) and (max-height: 850px) {
  .stgo-home .stgo-proof_stage {
    --stgo-arg-claim: clamp(1.3rem, 1.75vw, 1.6rem);
    --stgo-arg-body: clamp(0.82rem, 0.9vw, 0.9rem);
    --stgo-arg-mono: 0.7rem;
  }

  .stgo-home .stgo-arg_body {
    padding: var(--fixed--2rem) var(--fixed--3rem) var(--fixed--2rem) var(--fixed--2rem);
    gap: 0.65rem;
  }

  .stgo-home .stgo-proof_stage .stgo-proof_manifesto-body .about_quote {
    line-height: 1.36;
  }
}

@media screen and (max-width: 991px) {
  .stgo-home .stgo-proof_stage {
    --stgo-arg-claim: clamp(1.45rem, 4.2vw, 1.95rem);
    --stgo-arg-body: clamp(0.92rem, 2.3vw, 1.02rem);
  }

  /* the same heights as the thesis on the rail */
  .stgo-home .stgo-arg {
    height: auto;
    min-height: 36rem;
  }

  .stgo-home .stgo-arg_body {
    padding: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .stgo-home .stgo-arg {
    min-height: 30rem;
  }

  .stgo-home .stgo-arg_body {
    padding: 1.5rem;
  }
}

/* without the runway (reduced motion) the arguments read as a two-column
   sheet under the thesis, not as a stack of full-width banners */
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .stgo-home .stgo-proof_grid-canvas.is-args {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
  }

  .stgo-home .stgo-proof_grid-canvas.is-args .stgo-proof_grid-column.is-hero {
    grid-column: 1 / -1;
  }

  .stgo-home .stgo-proof_grid-canvas.is-args .testimonials_cover,
  .stgo-home .stgo-arg {
    min-height: 34rem;
  }
}

@media screen and (max-width: 479px) {
  /* on a phone the words take most of the card: give the image room above them */
  .stgo-home .stgo-arg,
  .stgo-home .stgo-proof_grid-canvas.is-args .testimonials_cover {
    min-height: 31rem;
  }
}

.stgo-home .stgo-proof_grid-column > .testimonials_cover{
  min-width: 0;
  min-height: 0;
}

@media screen and (min-width: 992px) and (max-height: 850px) {
  /* the page's bottom blur covers ~3rem: the cards' proof lines end above it */
  .stgo-home .stgo-proof_stage {
    padding-top: 5.25rem;
    padding-bottom: 3rem;
  }

  .stgo-home .stgo-proof_stage .heading-style-h4 {
    font-size: clamp(2.1rem, 3.3vw, 2.6rem);
    line-height: 1.02;
  }

  .stgo-home .stgo-proof_stage .about_quote {
    font-size: clamp(0.78rem, 1.65vh, 0.9rem);
    line-height: 1.3;
  }

  .stgo-home .stgo-proof_stage .spacer-medium {
    padding-top: 1.5rem;
  }

  .stgo-home .stgo-proof_stage .spacer-small {
    padding-top: 1rem;
  }
}

@media screen and (max-width: 991px) {
  .stgo-home .stgo-proof_runway {
    height: auto;
  }

  .stgo-home .stgo-proof_stage {
    position: relative;
    top: auto;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .stgo-home .stgo-proof_stage .testimonials_items {
    width: 100%;
    height: auto;
    overflow: visible;
    border-radius: 0;
    contain: none;
  }

  .stgo-home .stgo-proof_stage .testimonials_items::after {
    display: none;
  }

  /* The evidence becomes the same snap rail the chapters use below the hero:
     the same gesture, the same cards, only the arrangement changes. It breaks
     out of the page gutter so the next card peeks, which is what tells a thumb
     there is more to the right. */
  .stgo-home .stgo-proof_grid-canvas {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0.75rem;
    width: auto;
    height: auto;
    margin-inline: calc(50% - 50vw);
    padding-left: 1.5rem;
    padding-right: clamp(3rem, 16vw, 7rem);
    overflow-x: auto;
    overflow-y: clip;
    scroll-padding-left: 1.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
    transform: none;
    will-change: auto;
  }

  .stgo-home .stgo-proof_grid-canvas::-webkit-scrollbar {
    display: none;
  }

  /* the columns exist to compose the desktop grid; on the rail the cards they
     hold are the slides, so the columns step out of the box tree */
  .stgo-home .stgo-proof_grid-column {
    display: contents;
  }

  .stgo-home .stgo-proof_grid-column > * {
    /* two of the cards carry height:100%, which with the column out of the box
       tree resolves to their own min-height and leaves the rail ragged */
    height: auto;
    flex: 0 0 min(87vw, 34rem);
    width: min(87vw, 34rem);
    min-width: min(87vw, 34rem);
    max-width: 34rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .stgo-home .stgo-proof_grid-column.is-hero .testimonials_cover {
    min-height: 36rem;
  }

  

  

  

  

  

  

  

  
}

@media screen and (max-width: 767px) {
  .stgo-home .stgo-proof_grid-column.is-hero .testimonials_cover {
    min-height: 30rem;
  }

  

  

  

  

  
}

@media screen and (max-width: 479px) {
  .stgo-home .stgo-proof_grid-column.is-hero .testimonials_cover {
    min-height: 26rem;
  }

  

  
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .stgo-home .stgo-proof_runway {
    height: auto;
  }

  .stgo-home .stgo-proof_stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
  }

  .stgo-home .stgo-proof_stage .testimonials_items {
    width: 100%;
    height: auto;
    overflow: visible;
    contain: none;
  }

  .stgo-home .stgo-proof_stage .testimonials_items::after {
    display: none;
  }

  .stgo-home .stgo-proof_grid-canvas {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    transform: none;
    will-change: auto;
  }

  .stgo-home .stgo-proof_grid-column {
    display: flex;
    flex-direction: column;
  }

  .stgo-home .stgo-proof_grid-column > *{
    min-height: 32rem;
  }
}

/* HOME / 16-year editorial manifesto.
   Deliberately scoped to the fixed left column; the evidence canvas remains
   an independent, approved composition. */
.stgo-home .stgo-proof_manifesto {
  width: 100%;
  max-width: 21.875rem;
}

.stgo-home .stgo-proof_manifesto-lockup {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(10.25rem, 24vh, 12.5rem);
  overflow: hidden;
}

.stgo-home .stgo-proof_manifesto-year {
  z-index: 0;
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: -0.09em;
  color: #f8f7f3;
  font-family: var(--_typography---font-family--font-family);
  font-size: clamp(12rem, 15vw, 15.5rem);
  line-height: 0.72;
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: -0.09em;
  opacity: 0.075;
  transform: translateY(-50%);
}

.stgo-home .stgo-proof_stage .stgo-proof_manifesto-heading {
  z-index: 1;
  position: relative;
  width: 100%;
  color: #f8f7f3;
  font-family: var(--_typography---font-family--font-family);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}

.stgo-home .stgo-proof_manifesto-visual,
.stgo-home .stgo-proof_manifesto-lead,
.stgo-home .stgo-proof_manifesto-word-frame {
  display: block;
}

.stgo-home .stgo-proof_manifesto-lead {
  max-width: none;
}

.stgo-home .stgo-proof_manifesto-lead > span {
  display: block;
}

.stgo-home .stgo-proof_manifesto-word-frame {
  width: 100%;
  min-height: 1.1em;
  color: var(--_colors---primary--stgo);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.stgo-home .stgo-proof_manifesto-word {
  display: inline-block;
}

.stgo-home .stgo-proof_manifesto-body {
  display: grid;
  gap: clamp(0.62rem, 1.1vh, 0.82rem);
  margin-top: clamp(0.85rem, 1.5vh, 1.15rem);
}

.stgo-home .stgo-proof_manifesto-body .about_quote {
  margin: 0;
  color: var(--_colors---grey--100);
  font-size: clamp(0.76rem, 0.86vw, 0.88rem);
  line-height: 1.42;
  font-weight: var(--_typography---font-weight--semibold);
}

.stgo-home .stgo-proof_manifesto-body strong {
  color: inherit;
  font-weight: var(--_typography---font-weight--bold);
}

.stgo-home .stgo-proof_manifesto-body .stgo-proof_manifesto-highlight {
  color: var(--_colors---primary--stgo);
}

.stgo-home .stgo-proof_manifesto > .container-button {
  margin-top: clamp(0.45rem, 1vh, 0.7rem);
}

.stgo-home .stgo-proof_manifesto-sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media screen and (min-width: 992px) and (max-height: 850px) {
  .stgo-home .stgo-proof_manifesto-lockup {
    min-height: clamp(9.75rem, 22vh, 11rem);
  }

  .stgo-home .stgo-proof_stage .stgo-proof_manifesto-heading {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }

  .stgo-home .stgo-proof_manifesto-body {
    gap: 0.55rem;
    margin-top: 0.65rem;
  }

  .stgo-home .stgo-proof_manifesto-body .about_quote {
    font-size: clamp(0.7rem, 1.5vh, 0.8rem);
    line-height: 1.34;
  }
}

@media screen and (max-width: 991px) {
  .stgo-home .stgo-proof_manifesto {
    max-width: 44rem;
  }

  .stgo-home .stgo-proof_manifesto-lockup {
    min-height: clamp(12rem, 34vw, 15rem);
  }

  .stgo-home .stgo-proof_manifesto-year {
    font-size: clamp(11rem, 31vw, 15rem);
  }

  .stgo-home .stgo-proof_stage .stgo-proof_manifesto-heading {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }

  .stgo-home .stgo-proof_manifesto-body {
    gap: 0.9rem;
    margin-top: 1.1rem;
  }

  .stgo-home .stgo-proof_manifesto-body .about_quote {
    max-width: 44rem;
    font-size: 0.95rem;
    line-height: 1.48;
  }
}

@media screen and (max-width: 479px) {
  .stgo-home .stgo-proof_manifesto-lockup {
    min-height: 10.25rem;
  }

  .stgo-home .stgo-proof_manifesto-year {
    left: -0.05em;
    font-size: clamp(9.5rem, 47vw, 12rem);
    opacity: 0.065;
  }

  .stgo-home .stgo-proof_stage .stgo-proof_manifesto-heading {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }

  .stgo-home .stgo-proof_manifesto-body {
    gap: 0.75rem;
    margin-top: 0.9rem;
  }

  .stgo-home .stgo-proof_manifesto-body .about_quote {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.46;
  }
}

/* ===========================================================================
   CLIENT LOGOS — continuous Framer-style rail + contained card reveal
   ========================================================================== */

.stgo-home .stgo-home_brands .brands_list-wrapper {
  --stgo-brands-loop-duration: 43s;
  overflow: hidden;
  /* the wrapper clips so the rail can run under the edge masks, which also
     sliced the top off a slab the moment it lifted. The padding gives the
     lift and its shadow somewhere to go; the negative margin keeps the
     section's rhythm exactly where it was. */
  padding: 2.75rem 0;
  margin: -2.75rem 0;
}

.stgo-home .stgo-home_brands .brands_list {
  flex: none;
  animation: stgo-brands-loop var(--stgo-brands-loop-duration) linear infinite;
  will-change: transform;
}

/* off screen the strip holds still (js/stgo-lazy-video.js) and resumes from the same place */
.stgo-home .stgo-home_brands.is-fuera .brands_list {
  /* not merely paused: a paused animation keeps the three long strips as GPU layers
     for the whole visit. Off screen the strip is plain content; it restarts unseen */
  animation: none;
  will-change: auto;
}

.stgo-home .stgo-home_brands .brands_item-logo-wrap-2 {
  position: relative;
  overflow: hidden;
  border: 0;
  /* a thick piece of glass casts and catches light: a contact shadow under the
     edge, a wider soft drop, and a cold halo where the rim picks up the room */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(190, 215, 255, 0.1);
  transform: translateZ(0);
  transition:
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The marks ship white on transparent. brightness(0) drops every channel to
   black and leaves the alpha, so one rule serves all eight without a second
   set of files. --k is the optical correction carried over from the
   institutional row: a one-line wordmark reads far larger than a three-line
   block at the same size. */
/* The caption. The template shipped it at 70% of the item, which is 192px —
   twenty short of what the longest name needs, so two of them broke onto a
   second line. Opening it to the full plate keeps every name on one line at
   the size it already had, and the sector sits under it as a quieter second
   register. Both are grey: the original black was near-invisible on this
   stage. */
.stgo-home .stgo-home_brands .brands_item-texts-2 {
  max-width: 100%;
  gap: 0.3rem;
}

.stgo-home .stgo-home_brands .brands_item-name-2 {
  font-size: 0.94rem;
  line-height: 1.25;
  white-space: nowrap;
  color: #ffe600;
}

.stgo-home .stgo-home_brands .brands_item-desc {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.3);
}

/* On the small plate the longest names are wider than the tile, and with
   nowrap they were pushing their own item wider than the rest: the rail ended
   up with two item widths and gaps alternating 18 and 27px. Sizing the type to
   the plate keeps every name on one line without any of them setting the
   item's width. */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-home_brands .brands_item-name-2 {
    font-size: 0.78rem;
  }

  .stgo-home .stgo-home_brands .brands_item-desc {
    font-size: 0.62rem;
  }
}

.stgo-home .stgo-home_brands .brands_item-logo-2 {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  /* --k is an equal-ink-area factor: on a square plate a wide wordmark and a
     square monogram only look the same size when their inked area matches,
     not their width or their height. Two of the files also carry baked-in
     margin (ABANCA inks 78%, Wind Waves 90%), which the factor absorbs. */
  max-width: calc(88% * var(--k, 1));
  max-height: calc(52% * var(--k, 1));
  object-fit: contain;
}

/* The only hover the slab needs: it rises off the page and its shadow opens.
   No colour, no deformation — the gesture is physical, the same argument the
   material itself makes. The contact shadow stays in the stack: dropping it on
   hover detached the slab from the page at exactly the moment it should feel
   most solid. */
@media (hover: hover) and (pointer: fine) {
  .stgo-home .stgo-home_brands .brands_item-block-2:hover .brands_item-logo-wrap-2 {
    transform: translate3d(0, -0.45rem, 0) scale(1.02);
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.55),
      0 1.6rem 3.6rem rgba(0, 0, 0, 0.55),
      0 0 2rem rgba(190, 215, 255, 0.18);
  }

  /* lifted towards the light, the chamfer catches a little more of it */
  .stgo-home .stgo-home_brands .brands_item-block-2:hover .brands_item-logo-wrap-2::after {
    box-shadow:
      inset 5px 5px 0.5px -4px rgba(255, 255, 255, 1),
      inset -6px -6px 1px -5px rgba(0, 0, 0, 0.6),
      inset 2px 2px 2px -1px rgba(255, 255, 255, 0.75),
      inset -2px -2px 2px -1px rgba(0, 0, 0, 0.34),
      inset 0 0 10px 8px rgba(0, 0, 0, 0.05),
      inset 0 0 3px 2px rgba(0, 0, 0, 0.04),
      inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  }
}

@keyframes stgo-brands-loop {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-home .stgo-home_brands .brands_list-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .stgo-home .stgo-home_brands .brands_list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .stgo-home .stgo-home_brands .brands_list {
    animation: none;
    will-change: auto;
  }

  .stgo-home .stgo-home_brands .brands_item-logo-wrap-2,
  .stgo-home .stgo-home_brands .brands_item-logo-wrap-2::before,
  .stgo-home .stgo-home_brands .brands_item-logo-2 {
    transition-duration: 0.01ms;
  }
}
/* Keep the hero word sources out of layout before its typewriter controller loads. */
.stgo-home .home-header_words > .home-header_word:not(:first-child) {
  display: none;
}

/* ===========================================================================
   CEMI — press coverage rail
   Reuses the operating-areas lens and rail chrome verbatim (.stgo-lens,
   .stgo-rail, .stgo-rcard, .stgo-rail_nav) so behaviour is identical:
   same relevance grouping, same reorder, same drag, controls and progress.
   Only the card's internal editorial layout and the source link are new.
   =========================================================================== */

/* The inherited Projects grid sizes both columns from their content, so a
   scrolling rail would widen the text column and push it off-screen. Pinning
   the tracks makes the geometry deterministic, and minmax(0,…) lets the rail
   scroll inside instead of stretching its column. */

/* press plates carry more copy than a capability card, so they run a little
   wider and let their height follow the content */
.stgo-home .stgo-cemi_card.stgo-rcard {
  width: clamp(13.5rem, 17.5vw, 16.5rem);
  min-height: 0;
  padding: 1.15rem 1.25rem 1.25rem;
}

.stgo-home .stgo-cemi_card .stgo-rcard_in {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stgo-home .stgo-cemi_card .stgo-rcard_label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}

.stgo-home .stgo-cemi_card-date {
  color: rgba(244, 243, 239, 0.4);
}

.stgo-home .stgo-cemi_card .stgo-rcard_title {
  font-size: 0.94rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.stgo-home .stgo-cemi_card .stgo-rcard_text {
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* the link closes every plate on the same baseline, whatever the copy runs to */
.stgo-home .stgo-cemi_card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  align-self: flex-start;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 0.15rem;
  transition: color 0.22s ease, border-color 0.22s ease;
}

.stgo-home .stgo-cemi_card-link svg {
  transition: transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .stgo-home .stgo-cemi_card-link:hover {
    color: #ffe600;
    border-bottom-color: rgba(255, 230, 0, 0.55);
  }

  .stgo-home .stgo-cemi_card-link:hover svg {
    transform: translate3d(1px, -1px, 0);
  }
}

.stgo-home .stgo-cemi_card-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 0.25rem;
}

@media screen and (max-width: 991px) {
  

  .stgo-home .stgo-cemi_card.stgo-rcard {
    width: min(78vw, 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-home .stgo-cemi_card-link,
  .stgo-home .stgo-cemi_card-link svg {
    transition: none;
  }
}

/* ===========================================================================
   CEMI — agent pipeline panel (left column)
   Deliberately off-system: its own blue (#0052FF), its own grid and its own
   mono, sitting over the nebula like an instrument dropped into an editorial
   page. Ported from a React + framer-motion + Tailwind component to plain
   SVG + CSS + a ~40-line controller: the packet motion is native SMIL
   (<animateMotion>), every pulse is a CSS keyframe, and JS only drives the
   log rotation and the counter. No framework, no new dependency.
   =========================================================================== */

/* the section runs on a 12px page padding so the rail can bleed off the right
   edge; a closed card should not sit that close to the viewport */

/* CEMI · block 04 of the operating areas. Since 2026-09-30 its portal layer is a
   pre-rendered loop like 01–03 (videos/STGO-WEB_portal-04-cemi*), and on phones the
   entry shows its poster like the other three: the live vision card (a canvas drawn
   every frame over eight clips) is gone. */

/* 04 · CEMI — steel navy, the tactical chart (rules for all four charts sit
   with the areas' atmospheres, at the top of this file). */
.stgo-area_gradient.is-cemi {
  --stgo-gradient-opacity: 0.85;
  --stgo-lava-color: rgba(64, 96, 122, 0.34);
  --stgo-lava-highlight: rgba(196, 210, 222, 0.16);
}

.stgo-area_gradient.is-cemi .stgo-area_gradient-base {
  background: radial-gradient(ellipse 90% 80% at 30% 18%, #131b23 0%, #0b1016 48%, #050607 100%);
}


/* Both instruments share one glass material: a light tint plus a real
   backdrop blur, so the nebula reads through instead of being covered. The
   blur is what keeps the 8-11px labels legible over moving colour — a plain
   translucent fill would let the nebula's detail fight the type. */
.stgo-home .stgo-git{
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: #000000cf;
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  box-shadow:
    0 1rem 2.5rem rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* without a backdrop filter the tint alone would be unreadable over the nebula */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stgo-home .stgo-git{
    background: #000000f2;
  }
}

/* ---------------------------------------------------------------------------
   CEMI — contribution bar under the pipeline panel.
   Same card language as the panel and the same green it already uses for
   LIVE and healthy outputs, so this reads as the same instrument reporting
   activity rather than a third colour arriving.

   The shine is one keyframe plus a per-cell delay: light travels the grid
   diagonally and then rests. A per-cell random blink would strobe; a sweep
   reads as continuous work.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-git {
  --weeks: 39;
  --cell-gap: 0.22em;
  overflow: hidden;
  padding: 14px 18px 16px;
  font-size: clamp(9px, 2.5%, 13px);
}

.stgo-home .stgo-git_months,
.stgo-home .stgo-git_grid {
  display: grid;
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  gap: var(--cell-gap);
}

.stgo-home .stgo-git_months {
  margin-bottom: 0.55em;
}

.stgo-home .stgo-git_month {
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.78em;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.44);
  white-space: nowrap;
}

.stgo-home .stgo-git_grid {
  position: relative;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  grid-auto-flow: column;
}

.stgo-home .stgo-git_cell {
  aspect-ratio: 1;
  border-radius: 0.18em;
  background: var(--c);
}

/* One animation, not 398.
   The bar used to breathe per cell — a filter on each of 199 cells plus an
   opacity sweep on each ::after. Measured, that was the most expensive thing
   on the site: 61% CPU and 232ms/s of style recalc, and the filter alone
   accounted for 627ms/s because animating it forces a style pass and a repaint
   on every cell, every frame.

   A single band crossing the grid costs the same as a static bar (27% CPU,
   22ms/s) because it only animates transform, which never leaves the
   compositor. `overlay` is what makes it read: it lifts the green cells and
   leaves the near-black gaps alone, so the light passes over the work rather
   than washing the whole panel. */
.stgo-home .stgo-git_sweep {
  position: absolute;
  inset: -12% -45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(200, 255, 220, 0.8) 50%,
    transparent 58%);
  mix-blend-mode: overlay;
  transform: translate3d(-45%, 0, 0);
  animation: stgo-git-sweep 8s cubic-bezier(0.4, 0.1, 0.5, 1) infinite;
  will-change: transform;
}

.stgo-home .stgo-git_cell.is-l0 { --c: #17171c; }
.stgo-home .stgo-git_cell.is-l1 { --c: #123d24; --c-hi: #1d6339; }
.stgo-home .stgo-git_cell.is-l2 { --c: #196b38; --c-hi: #279a4f; }
.stgo-home .stgo-git_cell.is-l3 { --c: #24a352; --c-hi: #57d888; }
.stgo-home .stgo-git_cell.is-l4 { --c: #4ade80; --c-hi: #b6f7cf; }

@keyframes stgo-git-sweep {
  0% { transform: translate3d(-45%, 0, 0); }
  46%, 100% { transform: translate3d(45%, 0, 0); }
}

@media screen and (max-width: 479px) {
  .stgo-home .stgo-git {
    padding: 12px 13px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-home .stgo-git_sweep {
    animation: none;
    opacity: 0;
  }
}

/* Below the desktop split a single row would drive the marks under 20px, so
   they wrap. Letting them wrap on their own widths broke 1/2/3/1 and orphaned
   SEPI, so each item takes a fixed fraction of the row instead: three up, then
   two, with justify-content centring whatever the last row holds. */
/* Single row only while it keeps the marks above ~24px. With eight logos that
   floor is reached around 1200, where the small type in Xunta, GAIN and the
   STGO strapline starts turning to mush; below it they break into two rows of
   four — an exact split for eight. */

/* four up: the height is capped so the widest mark still clears its cell */

/* ---------------------------------------------------------------------------
   CLIENT TILES — glass slab.
   Two stacked pseudo-elements do the whole job with no filter: ::after carries
   the bevel — a bright chamfer catching light top-left, a deep one bottom-right,
   a faint haze across the face — while ::before lays a specular sheen over the
   top third. A displacement filter was tried here and abandoned: feImage will
   not track the element's box, so it left colour fringes stranded in a corner.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-home_brands .brands_item-logo-wrap-2::before,
.stgo-home .stgo-home_brands .brands_item-logo-wrap-2::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.stgo-home .stgo-home_brands .brands_item-logo-wrap-2::before {
  z-index: 3;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 26%);
  mix-blend-mode: soft-light;
}

.stgo-home .stgo-home_brands .brands_item-logo-wrap-2::after {
  z-index: 2;
  transition: box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    inset 4px 4px 0.5px -4px rgba(255, 255, 255, 0.95),
    inset -5px -5px 1px -5px rgba(0, 0, 0, 0.55),
    inset 2px 2px 2px -1px rgba(255, 255, 255, 0.6),
    inset -2px -2px 2px -1px rgba(0, 0, 0, 0.3),
    inset 0 0 10px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 3px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
   CERTIFICACIONES — a register, not a badge wall.
   The four standards were already on the page, but as assertions: ENS inside a
   card with the auditor's seal, the three ISOs compressed into one line of a
   photo tile. Nowhere could a reader see all four and learn what each one
   governs. This is that reading: code, name, scope — typography only.
   It sits below the numbers deliberately quieter than them. The figures shout
   scale in yellow; this has to sound like a spec sheet.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-cert_head {
  margin-top: 1.35rem;
  margin-bottom: 1.75rem;
}

.stgo-home .stgo-cert_head .text-style-label {
  color: rgba(255, 255, 255, 0.42);
}

/* Four across, as it was: the row reads as one register rather than a 2x2
   block. The columns run taller to fit the prose, which is the trade the
   single row is worth. */
.stgo-home .stgo-cert_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem;
  align-items: start;
}

.stgo-home .stgo-cert_item {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
}

/* A certification mark is a credential, not decoration: it may not be recoloured
   or inverted. Inverting them turned the ENS badge into an ochre smear and put
   the Kiwa seals in negative. They go on their own white plate instead, which
   is how they are meant to be reproduced on a dark ground. */
.stgo-home .stgo-cert_plate {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.45rem;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

/* the seal carries the credential, so it is the largest thing in the cell; it
   gives a little back as the column narrows so the prose keeps a measure */
.stgo-home .stgo-cert_seal {
  display: block;
  width: auto;
  height: clamp(5.25rem, 7vw, 6.5rem);
}

.stgo-home .stgo-cert_body {
  min-width: 0;
}

/* a hairline between columns turns four blocks into one instrument panel */

/* the standard's name carries the weight, in the same voice the figures above
   use for their captions: white, bold, sans */
.stgo-home .stgo-cert_code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.stgo-home .stgo-cert_scope {
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: #ffe600;
}

.stgo-home .stgo-cert_name {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

.stgo-home .stgo-cert_desc {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.36);
}

/* four columns only while the measure stays readable: at 992 they left 197px,
   about 27 characters a line, which is below where prose stops scanning */
/* four across only while the prose survives it: at 992 the columns left 15
   characters a line, which is not a tall column, it is a broken one */
@media screen and (max-width: 1279px) {
  .stgo-home .stgo-cert_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }
}

@media screen and (max-width: 600px) {
  .stgo-home .stgo-cert_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .stgo-home .stgo-cert_item + .stgo-cert_item {
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stgo-home .stgo-cert_seal {
    height: 5.5rem;
  }
}

/* The rail now sits between the figures and the certifications, so it no longer
   needs the section-closing air it carried when it was the last block: 64px
   above and 128px below left it floating between two dense registers. */
/* the figures already close with their own 48px, so the rail adds none */
.stgo-home .stgo-home_brands .spacer-xlarge-2 {
  padding-top: 0;
}

.stgo-home .stgo-home_brands .padding-section-medium-2 {
  padding-top: 3rem;
}

/* ---------------------------------------------------------------------------
   The three figures miss a single row by about 74px between roughly 1400 and
   1520 wide, so the third wraps and leaves a 273px hole under the second
   caption — which is the vertical space that was unbalancing this stretch.
   Five per cent off the numerals and a tighter gutter buy the row back; at
   that size the change is invisible, the recovered space is not.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1200px) {
  /* The three blocks are 1338px wide at the design size, so they hold a single
     row only while the container clears that plus the gutters. Sizing the
     numerals off the viewport keeps the row intact all the way down to 1200
     instead of dropping the third one and opening a 273px hole; above 1520
     the min() hands the design size straight back, unchanged. */
  .stgo-home .stgo-home_proof .number_number {
    /* the third block floors at 232px because its caption will not shrink, so
       only the first two scale: 6.93 x the numeral size, plus that floor and
       the gutters, is what has to clear the container */
    font-size: min(10rem, calc((100vw - 384px) / 7));
  }

  .stgo-home .stgo-home_proof .testimonials_numbers-main {
    gap: 1.75rem;
  }
}

/* below 1200 the wrap is unavoidable, so the two rows simply sit closer */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .stgo-home .stgo-home_proof .testimonials_numbers-main {
    row-gap: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
   AWARDS — the studio block, brought to the home without its box.
   On studio it is a black card with a 20px radius, 12px of page padding and
   48px of inner padding, which put the table at x=108 while the figures and
   the certifications above and below it sit at x=48. Stripping the container
   lines the table up with the rest of the sequence and lets it run full width.
   Scoped to .stgo-home so studio.html keeps its card.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-home_awards .awards_component {
  background: none;
  border-radius: 0;
}

.stgo-home .stgo-home_awards .padding-global,
.stgo-home .stgo-home_awards .padding-global.is-tiny {
  padding-left: 0;
  padding-right: 0;
}

/* the rhythm comes from the blocks around it, not from the block itself */
.stgo-home .stgo-home_awards .padding-section-medium {
  padding-top: 0;
}

/* the table now follows the certifications, so it carries its own gap above */
.stgo-home .stgo-home_awards {
  margin-top: 3rem;
}

/* ---------------------------------------------------------------------------
   AWARDS — a wheel without the drum.
   The rows stay flat: no perspective, no tilt. What carries the feel is the
   motion, not the geometry — the list rides a physics loop with inertia, a
   pull towards whole rows and elastic ends, so it behaves like an iOS picker
   while reading like the printed table it was.

   Only transform and opacity move, and the loop stops the frame it settles.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-wheel {
  --fila: 3.25rem;
  --visibles: 6;
}

/* narrower viewports wrap the scope column, so the rows grow; fewer of them
   are shown at a time to keep the block around the same height on screen */
@media screen and (max-width: 1279px) {
  .stgo-home .stgo-wheel { --visibles: 5; }
}

@media screen and (max-width: 991px) {
  .stgo-home .stgo-wheel { --visibles: 4; }
}

/* alcance is the column that actually carries prose, so it runs at twice a
   normal column; the width comes off the other three in equal share
   (25% -> 20% each). head and drum share the rule so they stay in register. */
.stgo-home .stgo-home_awards .awards_row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}

/* the header row already carries a rule of its own -- webflow gives every
   awards_row a dotted border-top, only in the darker grey. lifting it to
   grey--200 and spacing the labels 23.6px below it makes this opening
   identical to the one above the certification seals, so the two registers
   read as one document. */
.stgo-home .stgo-wheel_head .awards_row {
  border-top-color: var(--_colors---grey--200);
  padding-top: 1.475rem;
}

/* below 767 the seal block's label inherits a taller line box, which pushes
   its text 2px further from the rule; the header matches it by hand so the
   two openings stay flush at every width */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-wheel_head .awards_row {
    padding-top: 1.6rem;
  }
}

.stgo-home .stgo-wheel_stage {
  position: relative;
  height: calc(var(--alto-fila, var(--fila)) * var(--visibles));
  overflow: hidden;
  touch-action: pan-x;
  cursor: grab;
  /* dragging is a gesture, not a text selection: highlighting the rows while
     you turn the list makes it unreadable */
  user-select: none;
  -webkit-user-select: none;
  /* the row in play sits against the header; what is further down is more
     hidden, as if it had not come round yet. --velo is that fade's strength:
     the script takes it to 0 while the list unfolds, because a list shown in
     full cannot keep its last entries dimmed. */
  --velo: 1;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 calc(48% + 52% * (1 - var(--velo))),
    rgba(0, 0, 0, calc(0.45 + 0.55 * (1 - var(--velo)))) calc(82% + 18% * (1 - var(--velo))),
    rgba(0, 0, 0, calc(1 - var(--velo))) 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 calc(48% + 52% * (1 - var(--velo))),
    rgba(0, 0, 0, calc(0.45 + 0.55 * (1 - var(--velo)))) calc(82% + 18% * (1 - var(--velo))),
    rgba(0, 0, 0, calc(1 - var(--velo))) 100%);
  transition: height 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Unfolding: a line of the register's own type, not a piece of UI. It sits
   centred under the list, and the caret is the only drawing. */
.stgo-home .stgo-wheel_mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--_colors---grey--400);
  font-family: var(--_typography---font-family--detail);
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 260ms ease;
}

.stgo-home .stgo-wheel_mas:hover,
.stgo-home .stgo-wheel_mas:focus-visible {
  color: #fff;
}

.stgo-home .stgo-wheel_mas-flecha {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stgo-home .stgo-wheel.is-abierta .stgo-wheel_mas-flecha {
  margin-top: 3px;
  transform: rotate(225deg);
}

/* with reduced motion the register is laid out flat and complete: there is
   nothing left to unfold */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .stgo-home .stgo-wheel_mas {
    display: none;
  }
}

/* On a phone the stacked register runs long, so it opens on the four most
   recent milestones and the rest come in behind the same control the wheel
   uses on a desktop. */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-wheel_drum .awards_row:nth-child(n+5) {
    display: none;
  }

  .stgo-home .stgo-wheel.is-abierta .stgo-wheel_drum .awards_row:nth-child(n+5) {
    display: grid;
    animation: stgo-hito-entra 440ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .stgo-home .stgo-wheel_mas {
    margin-top: 1.4rem;
  }
}

@keyframes stgo-hito-entra {
  from { opacity: 0; transform: translate3d(0, -0.5rem, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-home .stgo-wheel.is-abierta .stgo-wheel_drum .awards_row:nth-child(n+5) {
    animation: none;
  }
}

.stgo-home .stgo-wheel_stage.is-dragging {
  cursor: grabbing;
}

.stgo-home .stgo-wheel_drum {
  position: absolute;
  inset: 0;
}

.stgo-home .stgo-wheel_drum .awards_row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--alto-fila, var(--fila));
  align-items: center;
  border: 0;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce), screen and (max-width: 767px) {
  .stgo-home .stgo-wheel_stage {
    touch-action: auto;
    cursor: default;
    height: auto;
    perspective: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .stgo-home .stgo-wheel_drum {
    position: static;
    transform-style: flat;
  }

  .stgo-home .stgo-wheel_drum .awards_row {
    position: static;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-bottom: 1px dotted var(--_colors---grey--500);
    /* a still list: no layer per row */
    will-change: auto;
  }

  .stgo-home .stgo-wheel_drum .awards_row:last-child {
    border-bottom: 0;
  }
}

/* On a phone the register stops being a table -- four columns cannot hold a
   sentence at 56px each. Each milestone becomes a block with the year in the
   margin, which is how a register reads on paper anyway. The column headings
   go with the columns; the rule stays, so the opening still matches the one
   above the seals. */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-wheel_head .text-color-white {
    display: none;
  }

  .stgo-home .stgo-wheel_head .awards_row {
    padding-bottom: 0;
  }

  .stgo-home .stgo-wheel_drum .awards_row {
    /* the year sits at the top of its milestone, the way a timeline reads,
       not floating in the middle of the block */
    align-items: start;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-column-gap: 0.75rem;
    grid-row-gap: 0.15rem;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }

  .stgo-home .stgo-wheel_drum .awards_data:nth-child(1) {
    grid-area: 1 / 1 / span 3 / auto;
  }

  .stgo-home .stgo-wheel_drum .awards_data:nth-child(2) {
    grid-area: 1 / 2;
    font-size: 0.75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .stgo-home .stgo-wheel_drum .awards_data:nth-child(3) {
    grid-area: 2 / 2;
    color: #fff;
  }

  .stgo-home .stgo-wheel_drum .awards_data:nth-child(4) {
    grid-area: 3 / 2;
    margin-top: 0.25rem;
  }
}

/* ---------------------------------------------------------------------------
   FOOTER — the plane the page comes to rest on

   The page already speaks in black cards: the call to action above is pure
   black, 20px radius, inset 12px on a #0f0f0f ground. The footer is the same
   material at the bottom of the stack — full bleed, rounded at the shoulders,
   and running up underneath that card, which is outlined with a hairline and
   drops its shadow onto it. That is what makes the end of the page read as an
   end: a lower plane, not another section.

   Inside, three zones and no more: who and where (left) against where to go
   (right); one rail carrying every mark the company is required or entitled to
   show; one line of colophon.
   --------------------------------------------------------------------------- */
.stgo-home .stgo-foot {
  padding: 0;
}

.stgo-home .stgo-foot_carta {
  position: relative;
  z-index: 0;
  /* it runs up behind the card above; the shadow lands on its leading edge */
  margin-top: -3.5rem;
  padding-top: 8rem;
  padding-bottom: 3rem;
  border-radius: 1.75rem 1.75rem 0 0;
  /* A shadow cast in black onto black does not exist. The leading edge catches
     a little light instead -- lighter than the page it emerges from, so the
     shoulders read either side of the card above -- and falls away to true
     black, which is what makes the bottom of the page feel like the bottom. */
  background: linear-gradient(to bottom, #161616 0, #000 15rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 -1.5rem 3.5rem rgba(0, 0, 0, 0.85);
  /* framed like the card above it, so the page reads as a stack of cards down
     to the last one rather than as a section that simply stops */
  margin-left: var(--fixed--0-75rem);
  margin-right: var(--fixed--0-75rem);
}

/* the card above is what is casting it: outlined against the lighter edge of
   the footer, and dropping onto it */
.stgo-home .stgo-home_cta .cta_component {
  position: relative;
  z-index: 1;
  box-shadow: 0 2rem 3.5rem -0.5rem rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.06);
}

.stgo-home .stgo-foot_alto {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: 3rem 1.75rem;
}

/* the identity block needs no labels: an address, a telephone and a name are
   self-evident, and four labels here would only compete with the three that
   actually organise something */
.stgo-home .stgo-foot_identidad {
  grid-area: 1 / 1 / 3 / 2;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: 0;
}

.stgo-home .stgo-foot_marca img {
  display: block;
  width: clamp(8.5rem, 13vw, 11rem);
  height: auto;
  margin-bottom: 0.35rem;
}

.stgo-home .stgo-foot_dato,
.stgo-home .stgo-foot_social {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--_colors---grey--250);
}

.stgo-home .stgo-foot_social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.stgo-home .stgo-foot_grupo {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.stgo-home .stgo-foot_grupo .text-style-label {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
}

.stgo-home .stgo-foot_enlace {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--_colors---grey--250);
  text-decoration: none;
  transition: color 220ms ease;
}

.stgo-home .stgo-foot_enlace:hover,
.stgo-home .stgo-foot_enlace:focus-visible {
  color: #fff;
}

/* The marks take the empty half of the band rather than a register of their
   own: the three link columns run four lines deep and the identity column runs
   twice that, so the room under them is exactly where the seals and the funding
   logos belong. Certifications sit under one column, funding spans the two on
   the right because five logos need the width. Separate plates, because a
   certification is not a subsidy. */
.stgo-home .stgo-foot_marcas {
  gap: 0;
}

.stgo-home .stgo-foot_marcas.is-ayudas {
  grid-area: 2 / 2 / auto / 5;
}

/* light ground, because none of these marks may be recoloured -- but the site's
   own paper rather than pure white, which on a black page glares */
.stgo-home .stgo-foot_placa {
  display: inline-flex;
  vertical-align: top;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.3rem;
  max-width: 100%;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  background: var(--_colors---primary--paper);
  list-style: none;
}

/* The certifications close the page the way a company's marks close an invoice:
   left of the small print, at a size that says they are worth something. They
   are the one thing here a client may actually need to verify. */
.stgo-home .stgo-foot_pie {
  display: flex;
  flex-wrap: wrap;
  /* the small print stretches to the height the seals set, so its last line can
     be dropped to their base */
  align-items: stretch;
  gap: 1.25rem 2rem;
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px dotted var(--_colors---grey--500);
}

/* Each seal is already its own card -- the files carry their own opaque ground,
   white or blue -- so a plate underneath was redundant. Standing on the black
   directly, close together and large, they read as the certificates they are. */
.stgo-home .stgo-foot_sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stgo-home .stgo-foot_sellos img {
  display: block;
  width: auto;
  height: 6.5rem;
}

/* the small print, set the way an invoice sets it: monospaced, low, and not
   shouting in capitals like the labels above */
.stgo-home .stgo-foot_legal {
  /* wide, but with a measure: small print still has to be read, and it wraps
     under the seals rather than strangling itself when the row runs out */
  flex: 1 1 26rem;
  display: flex;
  flex-flow: column;
  /* four paragraphs mean three gaps: tighter, so five lines still land inside
     the height of the seals */
  gap: 0.35rem;
  min-width: 0;
}

/* links inside the small print are underlined rather than coloured: at this
   size and weight a colour change would not register as a link */
.stgo-home .stgo-foot_legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color 220ms ease, text-decoration-color 220ms ease;
}

.stgo-home .stgo-foot_legal a:hover,
.stgo-home .stgo-foot_legal a:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

.stgo-home .stgo-foot_legal p {
  margin: 0;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}

/* dimmer than the identification line, but still legal text: it has to be
   readable, not decorative */
.stgo-home .stgo-foot_legal p + p {
  color: rgba(255, 255, 255, 0.33);
}

/* whatever height the seals leave over goes here, in one gap, so the copyright
   line comes to rest on their base rather than floating short of it */
.stgo-home .stgo-foot_legal p:last-child {
  margin-top: auto;
}

/* normalised by ink area, not by height: their proportions run from 1.6:1 to
   4.9:1, so equal height alone does not read as equal weight */
.stgo-home .stgo-foot_ayuda {
  display: block;
  width: auto;
  height: calc(1.5rem * var(--k, 1));
}

/* beside the seals only while there is room for the small print to stay
   shorter than they are; below that it takes the full width underneath */
@media screen and (max-width: 1239px) {
  .stgo-home .stgo-foot_legal {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 991px) {
  .stgo-home .stgo-foot_alto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stgo-home .stgo-foot_identidad,
  .stgo-home .stgo-foot_marcas.is-ayudas {
    grid-area: auto;
  }

  .stgo-home .stgo-foot_marcas.is-ayudas {
    grid-column: 1 / -1;
  }

  .stgo-home .stgo-foot_identidad {
    grid-column: 1 / -1;
  }

}

@media screen and (max-width: 767px) {
  .stgo-home .stgo-foot_carta {
    margin-top: -2.25rem;
    padding-top: 5rem;
    /* the last lines clear the page's bottom blur and Anima's dock, which stay fixed over them */
    padding-bottom: calc(3rem + 5.5rem + env(safe-area-inset-bottom));
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .stgo-home .stgo-foot_alto {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .stgo-home .stgo-foot_sellos img {
    height: 5rem;
  }

  .stgo-home .stgo-foot_ayuda {
    height: calc(1.35rem * var(--k, 1));
  }
}

/* ---------------------------------------------------------------------------
   ANIMA — quick-question chips and the local-memory wipe control
   Chips are questions to tap, in the register's own type: nobody types into a
   corporate site, but everybody taps. The wipe control is the honesty piece:
   memory lives in this browser's cache and the visitor can prove it by
   deleting it.
   --------------------------------------------------------------------------- */
.stgo2026_chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.8rem;
  /* a frosted band of its own: the strip floats over whatever the page shows,
     so it needs its ground -- same material as the rest of the panel chrome */
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  /* the cut-off pill on the right edge is the scroll affordance */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.stgo2026_chips::-webkit-scrollbar {
  display: none;
}

.stgo2026_chip {
  flex: 0 0 auto;
}

.stgo2026_chip {
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  /* solid dark pills: legible over any ground the mask lets through */
  background: rgba(16, 16, 16, 0.92);
  color: rgba(255, 255, 255, 0.82);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.stgo2026_chip:hover,
.stgo2026_chip:focus-visible {
  border-color: rgba(255, 230, 0, 0.55);
  color: #ffe600;
  background: rgba(255, 230, 0, 0.06);
}

/* Anima asks before keeping her memory: two small chips under her question */
.stgo2026_permiso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/* the lead suggestion (the tour's «Visita guiada»): the one filled pill in the strip,
   same shape as its neighbours so it reads as the first option, not as another widget */
.stgo2026_chip.is-destacada {
  border-color: #ffe600;
  background: #ffe600;
  color: #0b0b0b;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stgo2026_chip.is-destacada::before {
  content: "\25B8\00a0";
}

.stgo2026_chip.is-destacada:hover,
.stgo2026_chip.is-destacada:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #0b0b0b;
}

.stgo2026_wipe {
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.stgo2026_wipe:hover,
.stgo2026_wipe:focus-visible {
  color: #fff;
}

/* Bridge for browsers without the local model: explains what activating Anima
   would give, where it runs, and how to get there -- in her own register */
/* a requirements card, not floating text: solid ground so it reads over any
   page behind it, in the same material as the download bar */
.stgo2026_bridge {
  display: flex;
  flex-flow: column;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  background: rgba(12, 12, 12, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stgo2026_bridge-label {
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: #ffe600;
}

.stgo2026_bridge-copy {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.stgo2026_bridge .stgo2026_chip {
  background: rgba(255, 255, 255, 0.07);
}

.stgo2026_bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stgo2026_bridge-actions .stgo2026_chip {
  text-decoration: none;
}

/* ===========================================================================
   TOUR — guided visit component (js/stgo-tour.js)
   A separate piece from the Anima chatbot: same knowledge, different machine.
   All classes stgo-tour_*; the only shared visual is the cloned avatar.
   =========================================================================== */
.stgo-mascot.is-yielding {
  /* instant for the same reason: the swap with the traveller is same-frame */
  opacity: 0;
  pointer-events: none;
}

.stgo-tour {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  font-family: "Inter VF", Arial, sans-serif;
}

.stgo-tour_viajero {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  gap: 0.8rem;
  /* the dog rides at the TOP corner: streaming text grows downward beneath the
     dialogue without nudging it around */
  align-items: flex-start;
  pointer-events: auto;
  max-width: 94vw;
  /* the FLIGHT: slow, weightless, one curve for both axes */
  transition: left 2100ms cubic-bezier(0.33, 0.65, 0.2, 1), top 2100ms cubic-bezier(0.33, 0.65, 0.2, 1);
}

/* flying home: the dialogue dissolves mid-air and only the dog lands */
.stgo-tour.is-regresando .stgo-tour_dialogo {
  opacity: 0;
  transition: opacity 700ms ease;
}

.stgo-tour[data-tour-lado="izquierda"] .stgo-tour_viajero {
  flex-direction: row;
}

.stgo-tour[data-tour-lado="derecha"] .stgo-tour_viajero {
  flex-direction: row-reverse;
}

.stgo-tour_avatar {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.55);
  background: #0c0c0c;
}

.stgo-tour_avatar > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.stgo-tour_avatar img,
.stgo-tour_avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stgo-tour_dialogo {
  width: min(21.5rem, 78vw);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1rem;
  background: rgba(10, 10, 10, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.stgo-tour_cabecera {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: #ffe600;
}

.stgo-tour_meta {
  color: rgba(255, 255, 255, 0.55);
}

.stgo-tour_cuerpo {
  max-height: min(26rem, 56vh);
  touch-action: pan-y;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 0.75rem 0.8rem 0.5rem;
  display: flex;
  flex-flow: column;
  gap: 0.55rem;
  scrollbar-width: thin;
}

.stgo-tour_texto {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.stgo-tour_texto.is-escribiendo {
  color: rgba(255, 255, 255, 0.45);
}

.stgo-tour_texto.is-visitante {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.4rem 0.6rem;
  border-radius: 0.6rem;
  background: rgba(255, 230, 0, 0.1);
  color: #ffe600;
  font-size: 0.76rem;
}

.stgo-tour_texto.is-pregunta {
  color: #ffe600;
}

.stgo-tour_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.stgo-tour_chip {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.92);
  color: rgba(255, 255, 255, 0.8);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.62rem;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.stgo-tour_chip:hover,
.stgo-tour_chip.is-activo {
  border-color: rgba(255, 230, 0, 0.6);
  color: #ffe600;
}

.stgo-tour_empezar {
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: #ffe600;
  color: #000;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}

.stgo-tour_ask {
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stgo-tour_ask input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.75rem;
}

.stgo-tour_ask button {
  border: 0;
  border-radius: 0.55rem;
  padding: 0 0.65rem;
  background: rgba(255, 230, 0, 0.9);
  color: #000;
  cursor: pointer;
}

.stgo-tour_hud {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stgo-tour_nav {
  margin-left: auto;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.stgo-tour_nav.is-lista {
  border-color: rgba(255, 230, 0, 0.75);
  color: #ffe600;
  animation: stgo-tour-pulso 1.6s ease-in-out infinite;
}

@keyframes stgo-tour-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(255, 230, 0, 0); }
}

.stgo-tour_niveles {
  display: flex;
  gap: 0.25rem;
}

.stgo-tour_niveles button {
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.58rem;
  cursor: pointer;
}

.stgo-tour_niveles button.is-activo {
  border-color: rgba(255, 230, 0, 0.7);
  color: #ffe600;
}

.stgo-tour_fin {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.stgo-tour_fin:hover {
  color: #fff;
}

/* the pointer: a yellow reticle travelling the page, plus a halo that frames
   the element -- or underlines the exact phrase -- being explained */
/* a big yellow CURSOR, floating: the guide's own mouse over the page */
.stgo-tour_puntero {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  transition: transform 1450ms cubic-bezier(0.3, 0.72, 0.2, 1);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 230, 0, 0.25));
}

.stgo-tour_puntero svg {
  width: 100%;
  height: 100%;
  fill: #ffe600;
  stroke: #000;
  stroke-width: 0.9;
  animation: stgo-tour-flota 3.2s ease-in-out infinite;
}

@keyframes stgo-tour-flota {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(2px, -6px, 0) rotate(3deg); }
}

.stgo-tour_halo {
  position: fixed;
  left: 0;
  top: 0;
  border: 1px dashed rgba(255, 230, 0, 0.75);
  border-radius: 0.5rem;
  background: rgba(255, 230, 0, 0.05);
  transition: transform 1450ms cubic-bezier(0.3, 0.72, 0.2, 1), width 1450ms ease, height 1450ms ease;
  pointer-events: none;
}

.stgo-tour_halo.is-texto {
  border-style: solid;
  border-width: 0 0 2px 0;
  border-radius: 0;
  background: rgba(255, 230, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .stgo-tour_viajero,
  .stgo-tour_puntero,
  .stgo-tour_halo {
    transition: none;
  }

  .stgo-tour_nav.is-lista {
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  .stgo-tour_viajero {
    left: 4vw !important;
    right: 4vw;
    top: auto !important;
    bottom: 2.5rem;
    flex-direction: column !important;
  }

  .stgo-tour_dialogo {
    width: min(24rem, 92vw);
  }
}

/* 1. one dog at a time: while the tour runs, the hero's source portrait and
   the dock yield to the traveller */
html[data-stgo-tour] .stgo-mascot-source,
html[data-stgo-tour] .stgo-home_hero .home-header_contact {
  /* instant: the traveller is born ON this exact spot in the same frame --
     any fade here would put two dogs on screen */
  opacity: 0 !important;
}

.stgo-tour_rotulo {
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: -0.2rem;
}

/* the ask form sets its own display, which out-cascades the hidden attribute
   -- same lesson as the proactivity dial, now applied here */
.stgo-tour_ask[hidden] {
  display: none !important;
}

/* the wizard is a decision screen, not a chat: it gets the height it needs so
   ESTILO, IDIOMA and the start button are all visible without inner scroll */
.stgo-tour.is-setup .stgo-tour_cuerpo {
  max-height: min(32rem, 74vh);
}

/* the dog breathes; while speaking it leans in -- width/height transition so
   the dialogue beside it shifts smoothly and settles back */
.stgo-tour_avatar {
  transition: width 750ms cubic-bezier(0.34, 1.2, 0.4, 1), height 750ms cubic-bezier(0.34, 1.2, 0.4, 1);
  animation: stgo-tour-respira 4.6s ease-in-out infinite;
}

.stgo-tour.is-hablando .stgo-tour_avatar {
  width: 6.3rem;
  height: 6.3rem;
}

@keyframes stgo-tour-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* the outgoing station dissolves before the empty component takes off */
.stgo-tour_cuerpo.is-vaciando > * {
  opacity: 0;
  transition: opacity 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .stgo-tour_avatar {
    animation: none;
    transition: none;
  }
}

/* in the wizard Anima introduces herself FACE FIRST: the portrait grows large
   so the visitor meets their guide before the flight */
.stgo-tour.is-setup .stgo-tour_avatar {
  width: 13.5rem;
  height: 13.5rem;
  border-radius: 1.9rem;
}

/* CONTINUAR: the one control that moves the tour forward earns weight and the
   right-hand seat; when the narration ends it lights solid */
.stgo-tour_continuar {
  white-space: nowrap;
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(255, 230, 0, 0.5);
  border-radius: 999px;
  background: rgba(255, 230, 0, 0.08);
  color: #ffe600;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}

.stgo-tour_continuar:hover,
.stgo-tour_continuar.is-lista {
  background: #ffe600;
  color: #000;
}

.stgo-tour_continuar.is-lista {
  animation: stgo-tour-pulso 1.6s ease-in-out infinite;
}

.stgo-tour_ajustes-toggle {
  display: block;
  width: 100%;
  padding: 0.4rem 0.8rem 0.5rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.stgo-tour_ajustes-toggle:hover {
  color: #ffe600;
}

.stgo-tour_ajustes {
  display: flex;
  flex-flow: column;
  gap: 0.45rem;
  padding: 0.2rem 0.8rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
   HERO — Anima's welcome card (right of the portrait)
   The old template copy gave way to the current story and the two real
   actions; typography follows the register labels used everywhere else.
   --------------------------------------------------------------------------- */
.stgo-hero_eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: #ffe600;
}

/* the card itself is pointer-events:none from its passive days: only the
   controls come back alive */
.stgo-hero_accion,
.stgo-hero_lang-btn,
.stgo-hero_contacto a {
  pointer-events: auto;
}

.stgo-hero_acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.stgo-hero_accion {
  padding: 0.34rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.stgo-hero_accion:hover,
.stgo-hero_accion:focus-visible {
  border-color: #ffe600;
  color: #ffe600;
}

.stgo-hero_accion.is-primaria {
  border-color: rgba(255, 230, 0, 0.8);
  background: #ffe600;
  color: #000;
}

.stgo-hero_accion.is-primaria:hover,
.stgo-hero_accion.is-primaria:focus-visible {
  background: rgba(255, 230, 0, 0.85);
  color: #000;
}

.stgo-hero_contacto {
  margin-top: 0.55rem;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}

.stgo-hero_contacto a {
  color: #ffe600;
  text-decoration: none;
}

.stgo-hero_contacto a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* inert offer on unsupported browsers: same buttons, no promise -- the yellow
   only exists where it can deliver */
.stgo-hero_accion[disabled] {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.stgo-hero_accion.is-primaria[disabled] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.stgo-hero_nota-navegador {
  margin: 0.55rem 0 0;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.stgo-hero_nota-navegador[hidden] {
  display: none !important;
}

/* thinking: the guide's version of the typing dots -- alive while she is not
   writing yet (travelling, scrolling, waiting for the model) */
.stgo-tour_texto.is-pensando {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
}

.stgo-tour_pensando {
  display: inline-flex;
  gap: 0.22rem;
}

.stgo-tour_pensando i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 230, 0, 0.85);
  animation: stgo-tour-pensando 1.2s ease-in-out infinite;
}

.stgo-tour_pensando i:nth-child(2) { animation-delay: 0.18s; }
.stgo-tour_pensando i:nth-child(3) { animation-delay: 0.36s; }

.stgo-tour_empezar .stgo-tour_pensando {
  margin-left: 0.4rem;
}

.stgo-tour_empezar:disabled .stgo-tour_pensando i {
  background: rgba(255, 230, 0, 0.7);
}

@keyframes stgo-tour-pensando {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-tour_pensando i {
    animation: none;
    opacity: 0.7;
  }
}

/* ── points of interest: exhibit plaques over the stop's blocks ──────────── */

/* layering inside the tour overlay: cursor above all, then the traveller,
   then the spots, then the halo frame */
.stgo-tour_puntero { z-index: 4; }
.stgo-tour_viajero { z-index: 3; }
.stgo-tour_halo { z-index: 1; }

.stgo-tour_spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 0, 0.55);
  background: rgba(10, 10, 10, 0.78);
  color: #ffe600;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.34, 1.3, 0.4, 1), border-color 240ms ease, color 240ms ease;
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.45);
}

.stgo-tour_spot.is-viva {
  opacity: 1;
  transform: scale(1);
}

.stgo-tour_spot.is-fuera {
  opacity: 0 !important;
  pointer-events: none;
}

/* the breathing ring that says "press me" */
.stgo-tour_spot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 0, 0.5);
  animation: stgo-tour-spot-late 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes stgo-tour-spot-late {
  0% { transform: scale(0.82); opacity: 0; }
  35% { opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.stgo-tour_spot-cruz {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

.stgo-tour_spot-rotulo {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
  background: rgba(8, 8, 8, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.34rem 0.6rem;
  border-radius: 0.5rem;
  pointer-events: none;
}

.stgo-tour_spot:hover .stgo-tour_spot-rotulo,
.stgo-tour_spot:focus-visible .stgo-tour_spot-rotulo {
  opacity: 1;
  transform: translateY(-50%);
}

/* a pressed spot goes quiet: still there, no longer calling */
.stgo-tour_spot.is-visto {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 230, 0, 0.45);
}

.stgo-tour_spot.is-visto::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stgo-tour_spot::after {
    animation: none;
    opacity: 0;
  }
}

/* hero language row: ONE line -- five core codes + the active one, the rest
   behind "+N"; usable with or without the AI */
.stgo-hero_idiomas {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.18rem;
  align-self: stretch;
  width: 100%;
  margin-top: 0.45rem;
  pointer-events: auto;
}

.stgo-hero_idiomas button {
  padding: 0.16rem 0.36rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.55);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.stgo-hero_idiomas button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.stgo-hero_idiomas button.is-activo {
  color: #ffe600;
  border-color: rgba(255, 230, 0, 0.6);
}

.stgo-hero_idiomas button[hidden] {
  display: none;
}

.stgo-hero_idiomas .stgo-hero_idiomas-mas {
  border-style: dashed;
  color: rgba(255, 255, 255, 0.75);
}

/* the open list may wrap; the closed one is a single line */
.stgo-hero_idiomas.is-abierta {
  flex-wrap: wrap;
}

/* the welcome card's copy, tighter leading now that it is one sentence */
.stgo-home .stgo-mascot-copy .home-header_contact-text {
  line-height: 1.38;
}

/* Iniciar while the model prepares: present but honest about the wait */
.stgo-tour_empezar[disabled] {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
  background: rgba(255, 230, 0, 0.35);
}

/* the definitive cure for the recurring wound: inside the tour, the hidden
   attribute ALWAYS wins over any class display */
.stgo-tour [hidden]{
  display: none !important;
}

.stgo-tour_rotulo.is-desplegable {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

.stgo-tour_rotulo.is-desplegable:hover {
  color: #ffe600;
}

/* the welcome card's ground: dark glass instead of the template's white tint */
.stgo-home .stgo-mascot-copy {
  background: #00000099 !important;
}

/* touchdown crossfade: the traveller dissolves over the re-emerging form */
.stgo-tour.is-fundido .stgo-tour_viajero {
  opacity: 0;
  transition: opacity 520ms ease;
}

/* the language field shows ~three rows; the half-cut row at the fade is the
   scroll affordance */
.stgo-tour_chips.is-idiomas {
  max-height: 7.1rem;
  overflow-y: auto;
  align-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 0.15rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* the finale's doors: chip-dressed links, stacked for tap comfort */
.stgo-tour_chips.is-puertas {
  flex-direction: column;
  align-items: stretch;
}

.stgo-tour_chips.is-puertas .stgo-tour_chip {
  text-decoration: none;
  text-align: center;
  padding: 0.42rem 0.7rem;
  border-color: rgba(255, 230, 0, 0.4);
}

/* =====================================================================
   STGO — SHOWREEL
   The reel opens as a card in the menu's own language: thin inset,
   ultra radius, page blurred behind. The card is exactly 16:9 so the
   video covers it entirely — no crop, no letterbox.
   ===================================================================== */

.showreel_play-wrapper {
  cursor: pointer;
}

.stgo-reel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.stgo-reel.is-abierta {
  opacity: 1;
}

.stgo-reel_card {
  position: relative;
  width: min(100%, calc((100vh - 1.5rem) * (16 / 9)));
  aspect-ratio: 16 / 9;
  max-height: 100%;
  background: #000;
  border-radius: var(--border-radius--ultra, 1.5rem);
  overflow: hidden;
  box-shadow: 0 2.5rem 7.5rem #000000a6;
  transform: scale(0.96);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.stgo-reel.is-abierta .stgo-reel_card {
  transform: scale(1);
}

.stgo-reel_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* paused veil: the template's own play badge, floating mid-card */
.stgo-reel_pausa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000059;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.stgo-reel_pausa img {
  width: 4.5rem;
  height: 4.5rem;
}

.stgo-reel_card.is-pausado .stgo-reel_pausa {
  opacity: 1;
}

.stgo-reel_pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ffffff26;
}

.stgo-reel_progreso {
  width: 0%;
  height: 100%;
  background: #ffe600;
}

.stgo-reel_cierre {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #00000080;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.stgo-reel_cierre:hover {
  background: #000000b3;
  transform: scale(1.06);
}

.stgo-reel_cierre:focus-visible {
  outline: 2px solid #ffe600;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .stgo-reel,
  .stgo-reel_card,
  .stgo-reel_pausa,
  .stgo-reel_cierre {
    transition: none;
  }
}

/* =====================================================================
   STGO — CONTACTO (contacto.html)
   The official contact page wears the home's dark chrome. Left: the
   studio's coordinates in the invoice register. Right: the current
   campaign — the CTA card with its mouse trail — sized to a column.
   ===================================================================== */

.stgo-contacto .section_contact {
  padding-top: clamp(7rem, 12vh, 9.5rem);
}

/* breathing room at the screen edges, in the home's register; the
   template's mobile paddings stay untouched below 992px */
@media screen and (min-width: 992px) {
  .stgo-contacto .section_contact .padding-global {
    padding-left: clamp(3rem, 6.5vw, 9rem);
    padding-right: clamp(3rem, 6.5vw, 9rem);
  }

  .stgo-contacto .section_contact .container-large {
    max-width: 100rem;
  }
}

.stgo-contacto_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  animation: stgo-contacto-entra 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stgo-contacto_head .heading-style-display {
  font-size: clamp(3.25rem, 7vw, 6.5rem);
}

.stgo-contacto_anno {
  color: rgba(248, 247, 243, 0.28);
}

.stgo-contacto_grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}

.stgo-contacto_info {
  display: flex;
  flex-flow: column;
  gap: clamp(1.6rem, 3vh, 2.4rem);
  animation: stgo-contacto-entra 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.stgo-contacto_bloque {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.stgo-contacto_label {
  color: var(--_colors---grey--400, #8a8a86);
}

.stgo-contacto_dato {
  color: #f8f7f3;
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
  margin: 0;
  transition: color 0.25s ease;
}

a.stgo-contacto_dato:hover {
  color: #ffe600;
}

.stgo-contacto_mapas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.1rem 0 0;
}

.stgo-contacto_enlace {
  color: var(--_colors---grey--250, #c9c8c4);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.25s ease;
}

.stgo-contacto_enlace:hover {
  color: #ffe600;
}

/* opening times are reference data, not a headline: they sit a register
   below the email and the phone, season by season */
.stgo-contacto_horario {
  margin: 0.15rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1.1rem;
  align-items: baseline;
}

.stgo-contacto_horario dt {
  color: #f8f7f3;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.stgo-contacto_horario dt span {
  color: var(--_colors---grey--400, #8a8a86);
  font-weight: 400;
}

.stgo-contacto_horario dd {
  margin: 0;
  color: var(--_colors---grey--250, #c9c8c4);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* on a phone the season goes above its hours: side by side the hours had a
   column too narrow for «9:00–14:00» and broke it at the dash */
@media screen and (max-width: 479px) {
  .stgo-contacto_horario {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .stgo-contacto_horario dd + dt {
    margin-top: 0.7rem;
  }
}

.stgo-contacto_nota {
  margin: 0;
  max-width: 30rem;
  color: var(--_colors---grey--250, #c9c8c4);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.stgo-contacto_nota a {
  color: #f8f7f3;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stgo-contacto_nota a:hover {
  color: #ffe600;
}

/* the hiring test: fine print that does not ask to be read. Dim enough
   to be skipped by anyone skimming, full contrast the moment a reader
   actually stops on it (hover, focus or text selection) -- real text,
   never hidden: the filter is attention, not CSS */
.stgo-contacto_prueba {
  margin: 1.4rem 0 0;
  max-width: 30rem;
  font-size: 0.75rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(248, 247, 243, 0.3);
  transition: color 0.5s ease;
}

.stgo-contacto_prueba:hover,
.stgo-contacto_prueba:focus-within {
  color: rgba(248, 247, 243, 0.82);
}

.stgo-contacto_prueba a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stgo-contacto_prueba a:hover {
  color: #ffe600;
}

.stgo-contacto_prueba::selection,
.stgo-contacto_prueba ::selection {
  background: #ffe600;
  color: #0f0f0f;
}

/* the campaign card: the home CTA compressed into a column without
   losing its voice. The trail is re-scoped INSIDE the card here: the
   template's viewport-fixed wrap breaks in a column (any ancestor
   transform re-bases fixed), and card-sized clones read better anyway */
.stgo-contacto_campana {
  animation: stgo-contacto-entra 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.stgo-contacto_cta {
  height: 100%;
}

.stgo-contacto_cta .cta_component {
  min-height: clamp(28rem, 72vh, 44rem);
  height: 100%;
  padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 2.5vw, 3rem);
  overflow: hidden;
  box-shadow: 0 2rem 3.5rem -0.5rem rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.06);
}

.stgo-contacto_cta .cta_component .heading-style-h1 {
  font-size: clamp(2.1rem, 3vw, 3.4rem);
}

/* no button and no sub-line here: the visitor has already arrived, so the
   card carries the campaign claim alone */

.stgo-contacto_cta .interaction_visual_wrap {
  position: absolute;
  inset: 0;
  height: auto;
}

/* the zero-size positioning wrap + Webflow's global img max-width:100%
   would collapse the clone to 0 -- max-width:none keeps the clamp alive */
.stgo-contacto_cta .interaction_img {
  width: clamp(8rem, 16vw, 13rem);
  min-width: 0;
  max-width: none;
}

@keyframes stgo-contacto-entra {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-contacto_head,
  .stgo-contacto_info,
  .stgo-contacto_campana {
    animation: none;
  }
}

@media screen and (max-width: 991px) {
  .stgo-contacto_grid {
    grid-template-columns: 1fr;
  }

  .stgo-contacto_cta .cta_component {
    min-height: min(34rem, 78vh);
  }
}

/* HERO — desktop: the slogan sits on the true vertical centre of the stage
   (a touch above it, optically) instead of a fixed 20em from the bottom,
   which pushed it low on tall screens. Tablet/mobile keep their own centring. */
@media screen and (min-width: 992px) {
  .stgo-home .stgo-home_hero .home-header_bottom {
    position: static;
    justify-content: flex-end;
  }

  .stgo-home .stgo-home_hero .home-header_subheading {
    position: absolute;
    top: 48%;
    left: var(--fixed--2rem);
    padding-bottom: 0;
    transform: translateY(-50%);
  }

  /* the rotating last word lives in a zero-height layer: give it its line
     (slogan size x 90% leading) so the centred box is the visible block */
  .stgo-home .stgo-home_hero .home-header_words-wrap {
    height: calc(var(--fixed--3-5rem) * 0.9);
  }
}

/* GUIDE AVATAR — the corner dock (and the tour's traveller, its clone) frame
   the guide's face: the portrait loop is a bust, so the small avatar leans in */
.stgo-mascot_avatar video {
  transform: scale(1.35);
  transform-origin: 50% 18%;
}

/* HERO — phones (≤767). The first screen holds logo, claim and film only:
   the film frame ends just above the fold with the claim centred in it and
   the yellow Play (same device as THE STGO STANDARD's) under it. Anima's
   welcome card follows on the black page, apart from the film -- set as on
   desktop: square portrait and dark glass card side by side, bottom-aligned.
   The corner dock enters once this card has scrolled away (inline mascot
   controller). */
.stgo-film_play-m {
  display: none;
}

/* portrait phones play the vertical cut of the hero montage (its <source>
   carries the same media query); its poster is frame 0 of that cut, so it
   replaces the landscape poster written inline by Webflow */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .stgo-home .stgo-home_hero .home-header_video video {
    background-image: url("../videos/STGO-WEB_demo-estilo-v3-vertical_poster.jpg") !important;
  }
}

@media screen and (max-width: 767px) {
  .stgo-home .stgo-home_hero,
  .stgo-home .stgo-home_hero .home-header_component {
    min-height: 0;
  }

  /* the film fills the first screen: its frame closes 0.75rem above the
     fold. The page's fixed bottom blur stays away while the visitor is at
     the very top (html.stgo-hero-arriba, set by the mascot controller) so
     it never smears the frame's lower edge; it returns on the first scroll */
  .stgo-home .stgo-home_hero .home-header_video {
    bottom: auto;
    height: calc(100vh - 6.75rem);
    height: calc(100svh - 6.75rem);
    border-radius: inherit;
    overflow: clip;
  }

  .stgo-home .stgo-home_hero .home-header_subheading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 7.75rem);
    min-height: calc(100svh - 7.75rem);
    margin-top: 0;
    padding-bottom: 4.5rem;
    transform: none;
  }

  

  .stgo-home .stgo-home_hero .stgo-film_play-m {
    position: absolute;
    z-index: 6;
    top: calc(100vh - 6.75rem - 5.75rem);
    top: calc(100svh - 6.75rem - 5.75rem);
    left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    cursor: pointer;
  }

  .stgo-film_play-m .stgo-film_play-m-text {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .stgo-film_play-m .stgo-film_play-m-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #ffe600;
    transition: transform 0.25s;
  }

  .stgo-film_play-m .stgo-film_play-m-icon img {
    width: 0.95rem;
    margin-left: 0.15rem;
    filter: invert(1);
  }

  .stgo-film_play-m .stgo-film_play-m-meta {
    font-family: "Roboto Mono VF", "Roboto Mono", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }

  .stgo-film_play-m:active .stgo-film_play-m-icon {
    transform: scale(0.94);
  }

  .stgo-film_play-m:focus-visible {
    outline: 1px solid #ffe600;
    outline-offset: 0.4rem;
  }

  .stgo-home .progressive-blur_wrap {
    transition: opacity 0.35s ease;
  }

  html.stgo-hero-arriba .stgo-home .progressive-blur_wrap {
    opacity: 0;
  }
}

/* AREAS RAIL (6 cards) — js/stgo-areas-rail.js drives the horizontal travel
   from the real card extent (the stock interaction moves the rail by a fixed
   percentage of its width and cannot reach a sixth card). The rail keeps a
   zero width so that stock transform resolves to 0; cards overflow it. */
@media screen and (min-width: 992px) and (min-height: 660px) {
  .stgo-home .stgo-home_chapters .sticky-container {
    height: 420vw;
  }

  .stgo-home .stgo-home_chapters .scroll-inner {
    justify-content: flex-start;
    width: 0;
    padding-left: 4vw;
    will-change: translate;
  }

  .stgo-home .stgo-home_chapters .scroll-card,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-destacado,
  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-casidestacado {
    flex: 0 0 40vw;
    width: 40vw;
    min-width: 40vw;
  }

  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-destacado {
    flex-basis: 68vw;
    width: 68vw;
    min-width: 68vw;
  }

  .stgo-home .stgo-home_chapters .scroll-card.scrollcard-casidestacado {
    flex-basis: 48vw;
    width: 48vw;
    min-width: 48vw;
  }

  /* number + tag reveal is owned by the rail script (the stock in-view
     trigger cannot see cards moved by the rail) */
  .stgo-home .stgo-home_chapters .grid-cards .label_wrap {
    opacity: 0 !important;
    transform: translate3d(0, 0.5rem, 0) !important;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .stgo-home .stgo-home_chapters .scroll-card.is-en-vista .grid-cards .label_wrap {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* CTA "Generar, producir, emocionar" — background loop behind the copy.
   isolation keeps the negative z-index inside the rounded component. */
.stgo-home .stgo-home_cta .cta_component {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the thumbnail wall paints the whole card: the template's 2.2 MB photo
     underneath was downloaded on every visit and never seen */
  background-image: none;
}

.stgo-home .stgo-home_cta .stgo-cta_bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* proof grid loops sit over their poster image */
.stgo-home .stgo-proof_loop {
  pointer-events: none;
}

/* FILM — play pill over the hero loop and the full-screen film dialog */
.stgo-home .stgo-home_hero .home-header_content {
  position: relative;
}

.stgo-film {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 2rem 2rem;
  background: rgba(5, 5, 5, 0.96);
}

.stgo-film[hidden] {
  display: none;
}

.stgo-film_video {
  width: min(100%, calc((100vh - 6rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.75rem;
}

/* phones held upright play the 9:16 cut (js/stgo-film.js) */
.stgo-film_video.is-vertical {
  width: min(100%, calc((100vh - 5rem) * 9 / 16));
  width: min(100%, calc((100dvh - 5rem) * 9 / 16));
  aspect-ratio: 9 / 16;
}

/* the site's one close control (.menu_close: light disc, close.svg), same as the contact panel */
.stgo-film_close {
  z-index: 2;
  appearance: none;
  border: 0;
  padding: 0;
}

.stgo-film_close:focus-visible {
  outline: 2px solid #ffe600;
  outline-offset: 0.25rem;
}

html.stgo-film-abierta {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  

  

  /* the close disc sits above the film, clear of the player's own controls
     (iOS draws fullscreen and mute in the video's top corners) */
  .stgo-film {
    padding: 5.5rem 0.75rem 1rem;
  }

  .stgo-film_video.is-vertical {
    width: min(100%, calc((100vh - 6.5rem) * 9 / 16));
    width: min(100%, calc((100dvh - 6.5rem) * 9 / 16));
  }
}

/* Areas rail: the whole card is the link (buttons removed); cards out of
   focus hold a still, slightly dimmed frame — js/stgo-areas-rail.js */
.stgo-home .scroll-card.is-enlace { cursor: pointer; }
.stgo-home .scroll-card .media-wrapper video { transition: filter 0.6s ease; }
.stgo-home .scroll-card.is-quieta .media-wrapper video { filter: brightness(0.62) saturate(0.7); }

/* =====================================================================
   STGO — THE STGO STANDARD · EXPERIENCIA
   The block's card holds the film with a live lens and Apple Vision
   detections (behind the home's own label, heading, Play and manifesto).
   Play grows the card to the whole window and loads the "model in
   training" universe; closing returns it to its place in the page.
   JS and data: experiencia/ (rendimiento, reposo, universo, territorio).
   Lab and data tools: 02_PROYECTO_AUDIOVISUAL/3_MONTAJE/EXPERIENCIA/.
   ===================================================================== */

.stgo-xp {
  --yel: #ffe600; --w: #ececec; --dim: rgba(236,236,236,.52); --hair: rgba(236,236,236,.16);
  --mono: "Roboto Mono VF", ui-monospace, Menlo, monospace;
  isolation: isolate;
  background-color: #000;
  cursor: none;
}
.stgo-xp.is-uni { cursor: default; }
.stgo-xp_film, .stgo-xp_gl, .stgo-xp_ov { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.stgo-xp_film { object-fit: cover; pointer-events: none; }
.stgo-xp_ov { pointer-events: none; }
.stgo-xp .head-grid, .stgo-xp .padding-section-small, .stgo-xp_play, .stgo-xp_hud { transition: opacity .35s; }
.stgo-xp.is-open .head-grid, .stgo-xp.is-open .padding-section-small, .stgo-xp.is-open .stgo-xp_play, .stgo-xp.is-open .stgo-xp_hud,
.stgo-xp.is-uni .stgo-xp_gl, .stgo-xp.is-uni .stgo-xp_ov { opacity: 0; pointer-events: none; }

/* Play: the home's own play (text + round icon), now a button that enters the experience */
.stgo-xp_play { z-index: 2; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: none; }
.stgo-xp_play .showreel_play-icon-wrap { transition: background-color .25s, transform .25s; }
.stgo-xp_play .showreel_play-icon { transition: filter .25s; }
.stgo-xp_play:hover .showreel_play-icon-wrap, .stgo-xp_play:focus-visible .showreel_play-icon-wrap { background-color: var(--yel); transform: scale(1.06); }
.stgo-xp_play:hover .showreel_play-icon, .stgo-xp_play:focus-visible .showreel_play-icon { filter: invert(1); }
.stgo-xp_play:focus-visible { outline: 1px solid var(--yel); outline-offset: .5rem; }
.stgo-xp_play-m { position: absolute; left: 0; top: calc(100% + .75rem); white-space: nowrap; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--dim); }

/* open: fixed over everything (nav 100, mascot 101) but under the film dialog and the tour */
.stgo-xp.is-fixed { position: fixed; left: var(--xp-x); top: var(--xp-y); width: var(--xp-w); height: var(--xp-h); z-index: 9500; margin: 0;
  transition: left .65s cubic-bezier(.7,0,.2,1), top .65s cubic-bezier(.7,0,.2,1), width .65s cubic-bezier(.7,0,.2,1),
    height .65s cubic-bezier(.7,0,.2,1), border-radius .65s cubic-bezier(.7,0,.2,1); }
.stgo-xp.is-fixed.is-open { left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.stgo-xp:fullscreen { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
html.stgo-xp-abierta, html.stgo-xp-abierta body { overflow: hidden; overscroll-behavior: none; }
.stgo-xp:not(.is-uni) .stgo-xp_q { display: none; }
/* «estándares» (antes «stándares») pide 2 px más que el máximo del titular: una sola línea como antes */
.stgo-xp .head-grid .brands_heading { max-width: 52rem; }

.stgo-xp_hud { position: absolute; right: 2rem; top: 1.4rem; z-index: 2; pointer-events: none; font-family: var(--mono); font-size: .64rem; line-height: 1.55;
  color: var(--dim); text-align: right; white-space: pre; }
.stgo-xp_hud b { color: var(--yel); font-weight: 400; }

/* ── carga ── */
.stgo-xp_load { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.72); opacity: 0;
  pointer-events: none; transition: opacity .35s; z-index: 5; }
.stgo-xp_load.is-on { opacity: 1; pointer-events: auto; }
.stgo-xp_load-box { width: min(640px, 86vw); font-family: var(--mono); font-size: .7rem; line-height: 1.7; color: var(--dim); }
.stgo-xp_load-t { color: #fff; font-size: .8rem; letter-spacing: .12em; margin-bottom: 1rem; display: flex; justify-content: space-between; }
.stgo-xp_load-t b { color: var(--yel); font-weight: 400; }
.stgo-xp_load-grid { display: grid; grid-template-columns: repeat(37, 1fr); gap: 2px; margin: 1rem 0 1.1rem; }
.stgo-xp_load-grid i { aspect-ratio: 16/9; background: rgba(255,255,255,.07); transition: background .2s; }
.stgo-xp_load-grid i.on { background: rgba(255,255,255,.55); }
.stgo-xp_load-grid i.hot { background: var(--yel); }
.stgo-xp_load-row { display: flex; justify-content: space-between; border-top: 1px solid var(--hair); padding: .18rem 0; }
.stgo-xp_load-row span:last-child { color: var(--w); }
.stgo-xp_load-bar { height: 1px; background: var(--hair); margin-top: .9rem; }
.stgo-xp_load-bar i { display: block; height: 1px; width: 0; background: var(--yel); transition: width .2s; }

/* ── universo ── */
.stgo-xu { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 4; }
.stgo-xp.is-uni .stgo-xu { opacity: 1; pointer-events: auto; }
.stgo-xu_c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stgo-xu_c.is-hover { cursor: pointer; }
.stgo-xu_cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stgo-xu_lay { position: absolute; left: 50%; top: 1.1rem; transform: translateX(-50%); display: flex; gap: 0; border: 1px solid var(--hair);
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px); z-index: 2; }
.stgo-xu_lay button { background: none; border: 0; border-left: 1px solid var(--hair); color: var(--dim); font: .64rem var(--mono); letter-spacing: .08em;
  padding: .45rem .8rem .4rem; cursor: pointer; text-align: left; }
.stgo-xu_lay button:first-child { border-left: 0; }
.stgo-xu_lay button b { font-weight: 400; color: rgba(236,236,236,.35); margin-right: .3rem; }
.stgo-xu_lay button span { display: block; font-size: .56rem; letter-spacing: .02em; color: rgba(236,236,236,.35); margin-top: .1rem; }
.stgo-xu_lay button:hover { color: var(--w); }
.stgo-xu_lay button.on { color: #000; background: var(--yel); }
.stgo-xu_lay button.is-loading { color: var(--yel); }
.stgo-xu_lay button.is-loading span::after { content: " · cargando mapa…"; }
.stgo-xu_attr { position: absolute; right: 1.25rem; bottom: 3.3rem; font: .54rem var(--mono); color: rgba(236,236,236,.4); opacity: 0;
  transition: opacity .4s; pointer-events: none; max-width: 46vw; text-align: right; }
.stgo-xu_tag.place { color: rgba(236,236,236,.75); font-size: .6rem; letter-spacing: .16em; transform-origin: 0 0; }
.stgo-xu_tag.place.water { color: rgba(120,170,220,.7); font-style: italic; letter-spacing: .3em; }
.stgo-xu_lay button.on b, .stgo-xu_lay button.on span { color: rgba(0,0,0,.6); }
.stgo-xu_tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stgo-xu_tag { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; color: var(--dim);
  white-space: nowrap; will-change: transform; }
.stgo-xu_tag.band { color: #fff; font-size: .72rem; letter-spacing: .14em; }
.stgo-xu_tag.band small { display: block; color: var(--dim); font-size: .6rem; letter-spacing: .04em; margin-top: .2rem; }
.stgo-xu_tag.band.fut { color: var(--yel); }
.stgo-xu_tag.layer::before { content: ""; display: inline-block; width: 6px; height: 6px; border: 1px solid var(--yel); margin-right: .45rem; }

.stgo-xu_top { position: absolute; left: 1.25rem; right: 1.25rem; top: 1.1rem; display: flex; justify-content: space-between;
  align-items: flex-start; font-family: var(--mono); font-size: .66rem; color: var(--dim); pointer-events: none; }
.stgo-xu_top .t1 { color: var(--yel); letter-spacing: .06em; font-size: .78rem; }
.stgo-xu_legend { margin-top: .6rem; line-height: 1.75; max-width: calc(50vw - 17rem); }
.stgo-xu_legend em { font-style: normal; display: inline-block; width: 22px; height: 1px; vertical-align: middle; margin-right: .5rem; }
.stgo-xu_ro { text-align: right; line-height: 1.6; white-space: pre; }
.stgo-xu_ro b { color: var(--yel); font-weight: 400; }

.stgo-xu_now { position: absolute; left: 1.25rem; bottom: 4.6rem; font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.stgo-xu_now-l { display: flex; gap: 6px; margin-top: .45rem; }
.stgo-xu_now-l button { position: relative; width: 112px; aspect-ratio: 16/9; border: 1px solid var(--yel); padding: 0; background: #111 center/cover;
  cursor: pointer; }
.stgo-xu_now-l button span { position: absolute; left: 0; bottom: 0; background: var(--yel); color: #000; font: .56rem var(--mono); padding: 1px 4px; }
.stgo-xu_pip { position: absolute; right: 1.25rem; bottom: 4.6rem; width: 300px; border: 1px solid var(--hair); background: #000;
  opacity: 0; transition: opacity .4s; }
.stgo-xu_pip.on { opacity: 1; }
.stgo-xu_pip.on { left: 1.25rem; right: auto; width: 170px; }
.stgo-xu_legend { transition: opacity .3s; }
.stgo-xu.is-focus .stgo-xu_legend { opacity: 0; }
.stgo-xu_pip canvas { display: block; width: 100%; aspect-ratio: 16/9; }
.stgo-xu_pip div { position: absolute; left: 6px; top: 5px; font: .58rem var(--mono); color: var(--yel); letter-spacing: .06em; }

.stgo-xu_tl { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.stgo-xu_tl-info { display: flex; justify-content: space-between; margin-bottom: .45rem; }
.stgo-xu_tl-info b { color: var(--w); font-weight: 400; }
.stgo-xu_tl-bar { position: relative; display: flex; height: 18px; gap: 1px; cursor: pointer; }
.stgo-xu_tl-bar i { position: relative; flex: 1 1 0; background: rgba(255,255,255,.1); transition: background .15s; }
.stgo-xu_tl-bar i:hover { background: rgba(255,255,255,.35); }
.stgo-xu_tl-bar i.on { background: var(--yel); }
.stgo-xu_tl-bar i.hit { background: rgba(255,230,0,.35); }
.stgo-xu_tl-head { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #fff; pointer-events: none; }
.stgo-xu_hint { position: absolute; left: 50%; bottom: 4.7rem; transform: translateX(-50%); font: .6rem var(--mono); color: rgba(236,236,236,.38);
  letter-spacing: .05em; pointer-events: none; }

.stgo-xu_tip { position: absolute; left: 0; top: 0; pointer-events: none; font-family: var(--mono); font-size: .62rem; line-height: 1.5;
  background: rgba(0,0,0,.86); border: 1px solid var(--hair); padding: .45rem .6rem; max-width: 300px; opacity: 0; transition: opacity .12s; }
.stgo-xu_tip.on { opacity: 1; }
.stgo-xu_tip b { color: var(--yel); font-weight: 400; }
.stgo-xu_tip p { margin: .2rem 0 0; color: var(--w); font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .78rem; line-height: 1.3; }

/* ficha */
/* ficha: panel flotante abajo a la derecha; lo secundario, plegado */
.stgo-xu_card { position: absolute; right: 1.25rem; bottom: 4.4rem; width: 400px; max-height: calc(100% - 9.5rem); overflow-y: auto;
  background: rgba(4,4,4,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--hair);
  padding: .8rem .9rem .9rem; font-family: var(--mono); font-size: .62rem; color: var(--dim);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.1,1); }
.stgo-xu_card.on { opacity: 1; transform: none; pointer-events: auto; }
.stgo-xu_card-hd { display: flex; align-items: center; gap: .6rem; }
.stgo-xu_card-id { flex: 1; color: var(--yel); letter-spacing: .06em; font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stgo-xu_card-hd button { background: none; border: 1px solid var(--hair); color: var(--w); font: inherit; width: 1.6rem; height: 1.5rem; padding: 0; cursor: pointer; }
.stgo-xu_card-hd button:hover { border-color: var(--yel); color: var(--yel); }
.stgo-xu_card h3 { font-family: Montserrat, sans-serif; font-weight: 700; color: #fff; font-size: .98rem; line-height: 1.22; margin: .45rem 0 .15rem; }
.stgo-xu_card-ctl { margin-top: .45rem; }
.stgo-xu_card.is-min .stgo-xu_card-ctl, .stgo-xu_card.is-min details { display: none; }
.stgo-xu_card.is-min h3 { margin-bottom: 0; }
.stgo-xu_card-v { display: flex; gap: 3px; margin: .35rem 0 0; flex-wrap: wrap; }
.stgo-xu_card-v button { background: none; border: 1px solid var(--hair); color: var(--w); font: inherit; font-size: .58rem; padding: .16rem .38rem; cursor: pointer; }
.stgo-xu_card-v button.on, .stgo-xu_card-v button:hover { border-color: var(--yel); color: var(--yel); }
.stgo-xu_card-v button:disabled { opacity: .3; cursor: default; border-color: var(--hair); color: var(--dim); }
.stgo-xu_card details { border-top: 1px solid var(--hair); margin-top: .6rem; }
.stgo-xu_card details + details { margin-top: 0; }
.stgo-xu_card summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: .6rem; padding: .42rem 0; color: #fff;
  letter-spacing: .1em; font-size: .58rem; }
.stgo-xu_card summary::-webkit-details-marker { display: none; }
.stgo-xu_card summary::after { content: "+"; color: var(--dim); }
.stgo-xu_card details[open] summary::after { content: "–"; color: var(--yel); }
.stgo-xu_card summary span { color: var(--dim); letter-spacing: .02em; flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stgo-xu_card summary:hover { color: var(--yel); }
.stgo-xu_card details > :not(summary) { margin-bottom: .6rem; }
.stgo-xu_card-band { margin: 0; font-family: "BDO Grotesk VF", Arial, sans-serif; color: var(--w); font-size: .84rem; line-height: 1.4; }
.stgo-xu_card table { width: 100%; border-collapse: collapse; }
.stgo-xu_card td { border-top: 1px solid var(--hair); padding: .24rem 0; vertical-align: top; }
.stgo-xu_card td:first-child { width: 34%; }
.stgo-xu_card td:last-child { color: var(--w); }
.stgo-xu_card-film { display: flex; flex-wrap: wrap; gap: 3px; }
.stgo-xu_card-film button { background: none; border: 1px solid var(--yel); color: var(--yel); font: inherit; font-size: .58rem; padding: .2rem .4rem; cursor: pointer; }
.stgo-xu_card-film button:hover { background: var(--yel); color: #000; }
.stgo-xu_card-rh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stgo-xu_card-rh button { position: relative; aspect-ratio: 16/9; padding: 0; border: 1px solid var(--hair); background: #111 center/cover; cursor: pointer; }
.stgo-xu_card-rh button:hover { border-color: var(--yel); }
.stgo-xu_card-rh span { position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.8); color: var(--w); font: .5rem var(--mono); padding: 0 3px; }
.stgo-xu_card-none { color: rgba(236,236,236,.38); }
.stgo-xu.is-focus .stgo-xu_now { opacity: 0; pointer-events: none; }
.stgo-xu_now { transition: opacity .3s; }

/* calidad HIGH / LOW (experiencia/js/rendimiento.js): un botón circular, solo dentro del universo */
.stgo-xp_q { position: absolute; z-index: 7; margin: 0; touch-action: manipulation; }
.stgo-xp_toast { position: absolute; right: 1.25rem; top: 3.1rem; z-index: 7; width: min(330px, calc(100% - 2.5rem)); cursor: default;
  background: rgba(4,4,4,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair); border-left: 2px solid var(--yel);
  padding: .7rem .8rem; font: .62rem/1.55 var(--mono); color: var(--dim);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.1,1); }
.stgo-xp_toast.on { opacity: 1; transform: none; pointer-events: auto; }
.stgo-xp_toast b { color: var(--yel); font-weight: 400; letter-spacing: .08em; }
.stgo-xp_toast p { margin: .35rem 0 .65rem; color: var(--w); font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .78rem; line-height: 1.35; }
.stgo-xp_toast-b { display: flex; gap: .4rem; }
.stgo-xp_toast-b button { background: none; border: 1px solid var(--hair); color: var(--w); font: inherit; padding: .3rem .65rem; cursor: pointer; touch-action: manipulation; }
.stgo-xp_toast-b button[data-a="pro"] { border-color: var(--yel); color: var(--yel); }
.stgo-xp_toast-b button:hover { background: var(--yel); color: #000; border-color: var(--yel); }

.stgo-xp.is-touch { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.stgo-xp.is-touch.is-uni { touch-action: none; }
.stgo-xp.is-touch .stgo-xu_tip { display: none; }
.stgo-xp button { touch-action: manipulation; }

/* ── móvil: pantallas estrechas o bajas (teléfono en vertical y en horizontal) ── */
@media (max-width: 760px), (max-height: 520px) {
  .stgo-xp_q { right: 1rem; top: calc(1rem + env(safe-area-inset-top)); }
  .stgo-xp_toast { right: 1rem; top: calc(2.9rem + env(safe-area-inset-top)); width: calc(100% - 2rem); max-width: 360px; }
  .stgo-xp_load-box { font-size: .58rem; }
  .stgo-xp_load-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .6rem; }

  .stgo-xu_top { left: 1rem; right: 1rem; top: calc(1rem + env(safe-area-inset-top)); }
  .stgo-xu_top .t1 { font-size: .58rem; max-width: 52vw; line-height: 1.5; }
  .stgo-xu_legend, .stgo-xu_ro, .stgo-xu_now, .stgo-xu_pip { display: none; }
  .stgo-xu_lay { left: .6rem; right: .6rem; top: auto; bottom: calc(2.7rem + env(safe-area-inset-bottom)); transform: none; overflow-x: auto;
    scrollbar-width: none; transition: opacity .3s; }
  .stgo-xu_lay::-webkit-scrollbar { display: none; }
  .stgo-xu_lay button { flex: 1 0 auto; font-size: .56rem; padding: .55rem .6rem; text-align: center; }
  .stgo-xu_lay button b, .stgo-xu_lay button span { display: none; }
  .stgo-xu_lay button.is-loading::after { content: " …"; }
  .stgo-xu.is-focus .stgo-xu_lay, .stgo-xu.is-focus .stgo-xu_hint { opacity: 0; pointer-events: none; }
  .stgo-xu_hint { bottom: calc(5.6rem + env(safe-area-inset-bottom)); width: 92%; text-align: center; font-size: .56rem; transition: opacity .3s; }
  .stgo-xu_tl { left: .6rem; right: .6rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .stgo-xu_tl-info { margin-bottom: .3rem; font-size: .54rem; }
  .stgo-xu_tl-info span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: .6rem; }
  .stgo-xu_tl-bar { height: 12px; }
  .stgo-xu_attr { top: calc(3.3rem + env(safe-area-inset-top)); bottom: auto; left: 1rem; right: auto; max-width: 58vw; text-align: left; }
  .stgo-xu_tag { font-size: .52rem; }
  .stgo-xu_tag.band { font-size: .6rem; }
  .stgo-xu_tag.band small { font-size: .5rem; }
  /* la ficha, como hoja inferior */
  .stgo-xu_card { left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); width: auto; max-height: 46%; padding: .7rem .75rem .75rem; }
  .stgo-xu_card-v button { font-size: .62rem; padding: .36rem .55rem; }
  .stgo-xu_card-hd button { width: 2.2rem; height: 2rem; }
}
/* teléfono en horizontal: la ficha vuelve a la derecha, a toda la altura */
@media (max-height: 520px) and (min-width: 761px) {
  .stgo-xu_card { left: auto; right: .6rem; width: 300px; top: calc(3.9rem + env(safe-area-inset-top)); bottom: .6rem; max-height: none; }
}

@media screen and (max-width: 991px) {
  .stgo-xp_hud { display: none; }
}
@media screen and (max-width: 767px) {
  /* the home centres Play on mobile; the line under it follows */
  .stgo-xp_play-m { left: 50%; transform: translateX(-50%); text-align: center; font-size: .58rem; white-space: normal; width: min(70vw, 20rem); }
}
@media (prefers-reduced-motion: reduce) {
  .stgo-xp.is-fixed { transition: none; }
}

/* =====================================================================
   NAVBAR — CONTACT (index.html, 2026-09-28)
   The hamburger is parked; Contact takes its place as the one yellow
   call in the bar and opens the contact panel (js/stgo-contacto-panel.js,
   styles lazy-loaded from css/stgo-contacto-panel.css). Below 992px the
   section links stay hidden and Contact alone sits where the burger was.
   ===================================================================== */
.stgo-nav_contacto .navbar_link-text {
  color: var(--_colors---primary--stgo, #ffe600);
}

@media screen and (max-width: 991px) {
  .navbar_links:has(> .stgo-nav_contacto) {
    display: flex;
  }

  .navbar_links:has(> .stgo-nav_contacto) > :not(.stgo-nav_contacto) {
    display: none;
  }

  .stgo-nav_contacto {
    font-size: 1rem;
  }
}

/* ===========================================================================
   ANIMA — tactical console (hero card, every width)
   The guide introduces herself as an advanced AI agent, with ONE job: who
   she is, what she does, and only actions that really work. Straight 1px
   frames with the film's detection brackets in yellow; a mono header with
   the REAL state of the on-device AI (CSS reads the controls: enabled =
   ready, browser note shown = n/a, otherwise checking); her line in the
   house display type; a split action bar only when the AI can run. No
   company summary (the claim and the next block say it), no contact (menu
   and footer), no language row (the tour asks for it). Portrait and console are two detected objects
   side by side (desktop/tablet) or one console with the portrait inside
   (phones). Self-contained: delete this block + .stgo-anima_* markup to
   return to the previous card.
   =========================================================================== */
.stgo-home .stgo-home_hero .home-header_contact-dot-wrap {
  display: none;
}

.stgo-home .stgo-home_hero .stgo-mascot-source,
.stgo-home .stgo-home_hero .stgo-mascot-copy {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.stgo-home .stgo-home_hero .stgo-mascot-copy {
  background: rgba(8, 8, 8, 0.9) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.8rem 0.95rem 0.9rem;
}

.stgo-home .stgo-home_hero .stgo-mascot-source {
  overflow: hidden;
  background: #101113;
  /* opaque card with a video over it: the blur it inherits from .home-header_contact-infos
     was computed every frame over the hero film and never seen. The blur also made the card
     a stacking context, which holds Webflow's background video (z-index -100) above the
     card's own background: isolation keeps that, without the blur */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}

.stgo-home .stgo-home_hero .stgo-mascot-source .backgroundstgo2026,
.stgo-home .stgo-home_hero .stgo-mascot-source .backgroundstgo2026 video {
  border-radius: 0;
}

.stgo-home .stgo-home_hero .backgroundstgo2026 video {
  object-position: 50% 18%;
}

.stgo-anima_tag {
  position: absolute;
  z-index: 2;
  left: 0.45rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.72);
  color: #ffe600;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
}

/* header: who + the model's real state */
.stgo-anima_cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}

.stgo-home .stgo-anima_cab .stgo-hero_eyebrow {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.stgo-anima_estado {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.stgo-anima_estado i {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #8a8a8a;
  animation: stgo-anima-latido 1.4s ease-in-out infinite;
}

.stgo-anima_estado [data-e] {
  display: none;
}

.stgo-anima_estado [data-e="c"] {
  display: inline;
}

/* the state is the truth, set by js/stgo-anima-panel.js (data-anima-estado): COMPROBANDO ·
   DISPONIBLE (can be turned on) · CARGANDO · LISTA (loaded for real) · NO DISPONIBLE AQUÍ */
.stgo-mascot-copy[data-anima-estado] .stgo-anima_estado [data-e="c"] { display: none; }
.stgo-mascot-copy[data-anima-estado="c"] .stgo-anima_estado [data-e="c"],
.stgo-mascot-copy[data-anima-estado="d"] .stgo-anima_estado [data-e="d"],
.stgo-mascot-copy[data-anima-estado="l"] .stgo-anima_estado [data-e="l"],
.stgo-mascot-copy[data-anima-estado="r"] .stgo-anima_estado [data-e="r"],
.stgo-mascot-copy[data-anima-estado="n"] .stgo-anima_estado [data-e="n"] {
  display: inline;
}

.stgo-mascot-copy[data-anima-estado="d"] .stgo-anima_estado { color: rgba(255, 255, 255, 0.72); }
.stgo-mascot-copy[data-anima-estado="d"] .stgo-anima_estado i { background: rgba(255, 255, 255, 0.72); animation: none; }
.stgo-mascot-copy[data-anima-estado="l"] .stgo-anima_estado { color: #ffe600; }
.stgo-mascot-copy[data-anima-estado="l"] .stgo-anima_estado i { background: #ffe600; }
.stgo-mascot-copy[data-anima-estado="r"] .stgo-anima_estado { color: #ffe600; }
.stgo-mascot-copy[data-anima-estado="r"] .stgo-anima_estado i { background: #ffe600; animation: none; }
.stgo-mascot-copy[data-anima-estado="n"] .stgo-anima_estado i { background: #f3350c; animation: none; }

@keyframes stgo-anima-latido {
  50% { opacity: 0.25; }
}

/* greeting */
.stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-cta {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-text {
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  line-height: 1.45;
}

.stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-text span {
  color: #ffe600;
}

/* actions: one split bar */
.stgo-home .stgo-home_hero .stgo-hero_acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.14);
}

.stgo-home .stgo-home_hero .stgo-hero_accion {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 0;
  border-radius: 0;
  background: #0c0c0c;
  color: #ececec;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  opacity: 1;
}

.stgo-home .stgo-home_hero .stgo-hero_accion.is-primaria {
  background: #ffe600;
  color: #000;
}

.stgo-home .stgo-home_hero .stgo-hero_accion.is-primaria::before {
  content: "\25B6\00A0\00A0";
  font-size: 0.8em;
}

.stgo-home .stgo-home_hero .stgo-hero_accion:not(.is-primaria)::after {
  content: "\00A0\203A";
}

.stgo-home .stgo-home_hero .stgo-hero_accion:hover,
.stgo-home .stgo-home_hero .stgo-hero_accion:focus-visible {
  color: #ffe600;
  background: #141414;
}

.stgo-home .stgo-home_hero .stgo-hero_accion.is-primaria:hover,
.stgo-home .stgo-home_hero .stgo-hero_accion.is-primaria:focus-visible {
  color: #000;
  background: #fff;
}

.stgo-home .stgo-home_hero .stgo-hero_accion[disabled],
.stgo-home .stgo-home_hero .stgo-hero_accion.is-primaria[disabled] {
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.32);
  opacity: 1;
}

/* no local AI here: the dead bar goes; one honest line says where it works
   and what she does meanwhile (authored notes from the corner dock) */
/* sin IA local: se van los dos botones; el selector de idioma se queda (traduce la tarjeta sin IA) */
.stgo-mascot-copy:has(.stgo-hero_nota-navegador:not([hidden])) .stgo-hero_accion {
  display: none;
}

.stgo-home .stgo-home_hero .stgo-mascot-copy:has(.stgo-hero_nota-navegador:not([hidden])) .stgo-hero_acciones {
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
  width: 100%;
  border: 0;
  background: none;
}

.stgo-home .stgo-home_hero .stgo-hero_nota-navegador {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dotted rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.6rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.stgo-home .stgo-home_hero .stgo-hero_nota-navegador::before {
  content: "\2193\00A0";
  color: #ffe600;
}

/* the tour asks the language itself; the card no longer carries a switcher */
.stgo-home .stgo-home_hero .stgo-mascot-copy .stgo-hero_idiomas {
  display: none;
}

/* desktop + tablet: portrait and console as two detected objects, same height */
@media screen and (min-width: 768px) {
  .stgo-home .stgo-home_hero .home-header_contact {
    align-items: stretch;
    gap: 0.6rem;
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos.stgo-mascot-source {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    height: auto;
    max-height: none;
  }

  .stgo-home .stgo-home_hero .stgo-mascot-copy {
    width: 21rem;
    max-width: 21rem;
  }
  .stgo-home .stgo-home_hero .stgo-mascot-source .backgroundstgo2026 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}

/* the navbar's blur strip (150px, Webflow's .div-block-126) is decoration: it hung over the
   top of the hero stage and swallowed every click there, the film pill included */
.div-block-126 {
  pointer-events: none;
}

/* from tablet up the film opens with the phone's Play too (2026-09-29): «Play», the yellow
   disc and its note, bottom-left of the stage, clear of Anima's console on the right */
@media screen and (min-width: 768px) {
  

  .stgo-home .stgo-home_hero .stgo-film_play-m {
    position: absolute;
    z-index: 6;
    left: 2.25rem;
    bottom: 5.25rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    cursor: pointer;
  }

  .stgo-film_play-m .stgo-film_play-m-text {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .stgo-film_play-m .stgo-film_play-m-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #ffe600;
    transition: transform 0.25s ease, background-color 0.25s ease;
  }

  .stgo-film_play-m .stgo-film_play-m-icon img {
    width: 1.1rem;
    margin-left: 0.18rem;
    filter: invert(1);
  }

  .stgo-film_play-m .stgo-film_play-m-meta {
    font-family: "Roboto Mono VF", "Roboto Mono", monospace;
    font-size: 0.66rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }

  .stgo-film_play-m:hover .stgo-film_play-m-icon {
    transform: scale(1.06);
  }

  .stgo-film_play-m:active .stgo-film_play-m-icon {
    transform: scale(0.94);
  }

  .stgo-film_play-m:focus-visible {
    outline: 1px solid #ffe600;
    outline-offset: 0.4rem;
  }
}

/* tablet: Anima's console takes the bottom-left of the stage, so Play goes to its top-left */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .stgo-home .stgo-home_hero .stgo-film_play-m {
    top: 1.5rem;
    bottom: auto;
  }
}

/* tablet: the two objects sit tight (the inherited grid spread them apart) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .stgo-home .stgo-home_hero .home-header_contact {
    grid-template-columns: 9.5rem 21rem;
    column-gap: 0.6rem;
    max-width: none;
    justify-content: start;
  }

}

/* phones: ONE console on the black page, the portrait inside it. The copy's
   wrappers dissolve (display: contents) so its pieces sit on the console's
   grid -- markup and controller untouched. */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-home_hero .home-header_contact {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0;
    align-items: start;
    margin-top: 2.75rem;
    padding: 0.9rem 0.95rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    background: #0a0a0a;
  }

  .stgo-home .stgo-home_hero .stgo-mascot-copy,
  .stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-texts {
    display: contents;
  }

  .stgo-home .stgo-home_hero .stgo-anima_cab {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .stgo-home .stgo-home_hero .home-header_contact-infos.stgo-mascot-source {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 5.5rem;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-cta {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-text {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.76rem;
  }

  .stgo-home .stgo-home_hero .stgo-hero_acciones,
  .stgo-home .stgo-home_hero .stgo-hero_nota-navegador {
    grid-column: 1 / -1;
  }

  .stgo-home .stgo-home_hero .stgo-mascot-copy .home-header_contact-cta {
    font-size: 1.35rem;
  }

  .stgo-home .stgo-home_hero .stgo-hero_accion {
    padding: 0.8rem 0.75rem;
    font-size: 0.64rem;
  }
}

/* the corner dock shares the geometry: straight frame */
.stgo-mascot_avatar {
  border-radius: 3px !important;
}

/* STANDARD · EXPERIENCIA · la sala (experiencia/js/sala.js): la visita guiada con sonido.
   Cartela del capítulo abajo a la izquierda, la voz escrita abajo en el centro, las frases grandes
   de la película a toda pantalla, rótulos de atención junto a los planos y la barra de la visita. */
.stgo-xs_dim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.stgo-xs_dim.on { opacity: .62; }
.stgo-xs_big { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-58%); text-align: center; pointer-events: none;
  font-family: "Times New Roman", Times, serif; font-style: italic; font-size: clamp(3.2rem, 11vw, 12rem); line-height: 1; letter-spacing: -.01em;
  color: #f0da16; text-shadow: 0 0 2.5rem rgba(0,0,0,.6); opacity: 0; }
.stgo-xs_big.on { opacity: 1; }
.stgo-xs_voice { position: absolute; left: 50%; bottom: 4.9rem; z-index: 3; width: min(620px, 48vw); transform: translateX(-50%); text-align: center;
  pointer-events: none; opacity: 0; transition: opacity .35s; }
.stgo-xs_voice.on { opacity: 1; }
.stgo-xs_voice .en { margin: 0; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: 1.15rem; line-height: 1.4; color: rgba(236,236,236,.26); }
.stgo-xs_voice .en span { transition: color .15s, background-color .15s; }
.stgo-xs_voice .en span.on { color: var(--w); }
.stgo-xs_voice .en span.now { color: #000; background-color: var(--yel); }
.stgo-xs_voice .en span.att { text-decoration: underline; text-decoration-color: var(--yel); text-underline-offset: 4px; }
.stgo-xs_voice .es { margin: .45rem 0 0; min-height: 1em; font: .62rem var(--mono); letter-spacing: .08em; color: var(--yel); }
.stgo-xs_lab { position: absolute; left: 1.25rem; bottom: 4.6rem; z-index: 3; width: min(300px, 24vw); padding: .2rem 0 .2rem .8rem;
  border-left: 2px solid var(--yel); font: .62rem/1.55 var(--mono); color: var(--dim); opacity: 0; transform: translateY(8px);
  transition: opacity .5s, transform .6s; pointer-events: none; }
.stgo-xs_lab.on { opacity: 1; transform: none; }
.stgo-xs_lab .h { display: flex; gap: .55rem; align-items: baseline; color: var(--w); letter-spacing: .08em; }
.stgo-xs_lab .h b { color: var(--yel); font-weight: 400; }
.stgo-xs_lab .h em { margin-left: auto; font-style: normal; color: var(--dim); white-space: nowrap; }
.stgo-xs_lab p { margin: .35rem 0 .3rem; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .86rem; line-height: 1.4; color: var(--w); }
.stgo-xs_lab .s { color: rgba(236,236,236,.45); }
.stgo-xs_att { position: absolute; left: 0; top: 0; z-index: 3; margin: 10px 0 0 10px; padding: .2rem .35rem; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.72); font: .56rem/1.35 var(--mono); color: var(--dim); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; }
.stgo-xs_att.on { opacity: 1; }
.stgo-xs_att b { color: #fff; font-weight: 400; }
.stgo-xs_att span { color: var(--yel); }
@keyframes stgo-xs-rec { 50% { opacity: .25; } }
.stgo-xs_end { position: absolute; left: 50%; top: 50%; z-index: 6; width: min(520px, 88vw); padding: 1.1rem 1.2rem; transform: translate(-50%, -46%);
  border: 1px solid var(--hair); border-left: 2px solid var(--yel); background: rgba(4,4,4,.9); font: .64rem var(--mono); color: var(--dim);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s; }
.stgo-xs_end.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.stgo-xs_end .k { color: var(--yel); letter-spacing: .12em; }
.stgo-xs_end p { margin: .6rem 0 1rem; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: 1rem; line-height: 1.4; color: var(--w); }
.stgo-xs_end .b { display: flex; flex-wrap: wrap; gap: .5rem; }
.stgo-xs_end button { padding: .45rem .8rem; border: 1px solid var(--hair); background: none; color: var(--w); font: inherit; cursor: pointer; }
.stgo-xs_end button:first-child { border-color: var(--yel); color: var(--yel); }
.stgo-xs_end button:hover { background: var(--yel); color: #000; }
.stgo-xu.is-sala .stgo-xu_now, .stgo-xu.is-sala .stgo-xu_hint, .stgo-xu.is-sala .stgo-xu_legend,
.stgo-xu.is-focus .stgo-xs_voice, .stgo-xu.is-focus .stgo-xs_lab { opacity: 0; pointer-events: none; }
.stgo-xu_tags { transition: opacity .6s; }
.stgo-xu.is-cine .stgo-xu_tags { opacity: 0; }        /* en la pantalla de salida, sin rótulos del universo encima */
@media (max-width: 760px), (max-height: 520px) {
  .stgo-xs_voice { bottom: calc(7.3rem + env(safe-area-inset-bottom)); width: 92vw; }
  .stgo-xs_voice .en { font-size: .92rem; }
  .stgo-xs_lab { left: .6rem; right: .6rem; width: auto; bottom: auto; top: calc(8rem + env(safe-area-inset-top)); }
  .stgo-xs_lab p, .stgo-xs_lab .s { display: none; }
  .stgo-xs_att { display: none; }
}

/* STANDARD · EXPERIENCIA · cabecera del universo: el logo completo como en la navegación, el rótulo
   debajo; salir es un círculo claro arriba a la derecha y el conmutador de calidad a su izquierda.
   Textos abajo: la cartela solo en la visita; «en pantalla» se aparta mientras suena la voz. */
.stgo-xu_logo { display: block; width: 16rem; max-width: 42vw; height: auto; margin-bottom: .7rem; }
.stgo-xu_top > div:last-child { padding-top: 4.6rem; }
.stgo-xu_exit { position: absolute; right: 0; top: 0; z-index: 8; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background-color: #efeeec; color: #000; cursor: pointer; pointer-events: auto;
  box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.35); transition: background-color .25s, transform .25s; }
.stgo-xu_exit svg { width: 1.15rem; height: 1.15rem; }
.stgo-xu_exit:hover, .stgo-xu_exit:focus-visible { background-color: var(--yel); color: #000; transform: scale(1.06); }
.stgo-xu_exit:focus-visible { outline: 1px solid var(--yel); outline-offset: 4px; }
/* sonido y calidad: círculos de la misma familia que salir, en fila a su izquierda */
.stgo-xu_mute, .stgo-xp.is-uni .stgo-xp_q { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(239,238,236,.55); background-color: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #efeeec; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.stgo-xu_mute { position: absolute; right: calc(3.6rem + .6rem); top: 0; z-index: 8; margin: 0; pointer-events: auto; }
.stgo-xu_mute svg { width: 1.35rem; height: 1.35rem; }
.stgo-xu_mute .x { display: none; }
.stgo-xu_mute.is-off .w1, .stgo-xu_mute.is-off .w2 { display: none; }
.stgo-xu_mute.is-off .x { display: inline; }
.stgo-xu_mute.is-off { color: var(--yel); border-color: var(--yel); }
.stgo-xp.is-uni .stgo-xp_q { right: calc(1.25rem + 2 * (3.6rem + .6rem)); top: 1.1rem; font: 600 .66rem var(--mono); letter-spacing: .1em; }
.stgo-xp.is-uni .stgo-xp_q.is-low { color: var(--yel); border-color: var(--yel); }
.stgo-xu_mute:hover, .stgo-xp.is-uni .stgo-xp_q:hover, .stgo-xu_mute:focus-visible, .stgo-xp.is-uni .stgo-xp_q:focus-visible {
  background-color: var(--yel); border-color: var(--yel); color: #000; transform: scale(1.06); }
.stgo-xp.is-uni .stgo-xp_toast { top: 5.4rem; }
.stgo-xu:not(.is-sala) .stgo-xs_lab { opacity: 0; }
.stgo-xu.is-voz .stgo-xu_now { opacity: 0; pointer-events: none; }
.stgo-xs_voice { width: min(600px, 46vw); }
@media (max-width: 760px), (max-height: 520px) {
  .stgo-xu_logo { width: 8.4rem; margin-bottom: .45rem; }
  .stgo-xu_top > div:last-child { padding-top: 0; }
  .stgo-xu_exit { width: 2.9rem; height: 2.9rem; }
  .stgo-xu_mute, .stgo-xp.is-uni .stgo-xp_q { width: 2.9rem; height: 2.9rem; }
  .stgo-xu_mute { right: calc(2.9rem + .5rem); }
  .stgo-xp.is-uni .stgo-xp_q { right: calc(1rem + 2 * (2.9rem + .5rem)); top: calc(1rem + env(safe-area-inset-top)); font-size: .58rem; }
  .stgo-xs_lab { top: calc(8.4rem + env(safe-area-inset-top)); }
  .stgo-xs_voice { width: 92vw; }
}

/* STANDARD · EXPERIENCIA · tu película (experiencia/js/tupelicula.js): el compositor a la izquierda con el
   universo visible detrás; la barra para elegir planos; la inferencia; el reproductor a pantalla completa. */
.stgo-tp { position: absolute; left: 1.25rem; top: 5.6rem; bottom: 4.4rem; z-index: 7; width: min(900px, calc(100% - 2.5rem)); display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-left: 2px solid var(--yel); background: rgba(4,4,4,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: .62rem var(--mono); color: var(--dim); opacity: 0; transform: translateX(-12px); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.1,1); }
.stgo-tp.on { opacity: 1; transform: none; pointer-events: auto; }
.stgo-tp_hd { position: relative; padding: .9rem 4rem .7rem 1rem; border-bottom: 1px solid var(--hair); }
.stgo-tp_hd b { color: var(--yel); font-weight: 400; letter-spacing: .12em; font-size: .72rem; }
.stgo-tp_hd span { margin-left: .7rem; padding: .1rem .35rem; border: 1px solid var(--hair); color: var(--w); letter-spacing: .1em; }
.stgo-tp_hd p { margin: .5rem 0 0; max-width: 46rem; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .9rem; line-height: 1.4; color: var(--w); }
.stgo-tp_x { position: absolute; right: .9rem; top: .8rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%;
  background: #efeeec; color: #000; cursor: pointer; transition: background-color .25s, transform .25s; }
.stgo-tp_x svg { width: .95rem; height: .95rem; }
.stgo-tp_x:hover, .stgo-tp_x:focus-visible { background: var(--yel); transform: scale(1.06); }
.stgo-tp_cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; }
.stgo-tp_col { min-height: 0; overflow-y: auto; padding: .8rem 1rem 1rem; scrollbar-width: thin; }
.stgo-tp_col + .stgo-tp_col { border-left: 1px solid var(--hair); display: flex; flex-direction: column; }
.stgo-tp_col h4 { margin: 0 0 .55rem; font: inherit; font-size: .62rem; letter-spacing: .12em; color: var(--w); display: flex; gap: .6rem; justify-content: space-between; }
.stgo-tp_col h4 span { color: var(--dim); letter-spacing: .02em; text-align: right; }
.stgo-tp_ph { display: flex; flex-direction: column; gap: 3px; }
.stgo-tp_ph button { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .45rem 2.2rem .45rem .6rem; border: 1px solid var(--hair);
  background: none; color: var(--w); font: inherit; text-align: left; cursor: pointer; }
.stgo-tp_ph button:hover { border-color: rgba(236,236,236,.5); }
.stgo-tp_ph button.on { border-color: var(--yel); background: rgba(255,230,0,.08); }
.stgo-tp_ph .en { font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .84rem; line-height: 1.3; }
.stgo-tp_ph .es { grid-column: 1; color: var(--dim); font-size: .58rem; }
.stgo-tp_ph em { grid-row: 1; grid-column: 2; font-style: normal; color: var(--dim); }
.stgo-tp_ph i { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 50%; font-style: normal; font-size: .5rem; color: var(--w); }
.stgo-tp_ph i:hover { background: var(--yel); color: #000; border-color: var(--yel); }
.stgo-tp_pre { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.stgo-tp_pre button, .stgo-tp_seg button, .stgo-tp_own button, .stgo-tp_pick button { padding: .32rem .6rem; border: 1px solid var(--hair); background: none; color: var(--w); font: inherit; cursor: pointer; }
.stgo-tp_pre button:hover, .stgo-tp_seg button:hover, .stgo-tp_own button:hover, .stgo-tp_pick button:hover { border-color: var(--yel); color: var(--yel); }
.stgo-tp_sc { margin: 0 0 .7rem; padding: 0; list-style: none; counter-reset: sc; }
.stgo-tp_sc li { counter-increment: sc; position: relative; display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .4rem 0 .4rem 1.6rem; border-top: 1px solid var(--hair); }
.stgo-tp_sc li::before { content: counter(sc, decimal-leading-zero); position: absolute; left: 0; top: .5rem; color: var(--yel); }
.stgo-tp_sc li span { color: var(--w); font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .8rem; line-height: 1.3; }
.stgo-tp_sc li em { grid-column: 1; font-style: normal; font-size: .56rem; }
.stgo-tp_sc li div { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 2px; align-items: flex-start; }
.stgo-tp_sc li div button { width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--hair); background: none; color: var(--w); font: inherit; cursor: pointer; }
.stgo-tp_sc li div button:hover { border-color: var(--yel); color: var(--yel); }
.stgo-tp_sc li.empty { padding-left: 0; color: rgba(236,236,236,.4); }
.stgo-tp_sc li.empty::before { content: none; }
.stgo-tp_w { display: block; margin-bottom: .9rem; color: var(--w); letter-spacing: .12em; }
.stgo-tp_w span { color: var(--dim); letter-spacing: .02em; margin-left: .4rem; }
.stgo-tp_w input { display: block; width: 100%; margin-top: .4rem; padding: .5rem .6rem; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--yel);
  font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.35rem; outline: none; }
.stgo-tp_w input:focus { border-color: var(--yel); }
.stgo-tp_seg { display: flex; gap: 0; margin-bottom: .45rem; }
.stgo-tp_seg button + button { border-left: 0; }
.stgo-tp_seg button.on { background: var(--yel); color: #000; border-color: var(--yel); }
.stgo-tp_note { margin: 0 0 .6rem; line-height: 1.5; }
.stgo-tp_own { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .6rem; }
.stgo-tp_own .th, .stgo-tp_pick .th { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.stgo-tp_own .th i, .stgo-tp_pick .th i { width: 3.4rem; aspect-ratio: 16/9; background: #111 center/cover; border: 1px solid var(--yel); }
.stgo-tp_go { position: sticky; bottom: -1rem; margin: auto -1rem -1rem; padding: .9rem 1rem; border: 0; background: var(--yel); color: #000; font: 600 .78rem var(--mono); letter-spacing: .16em; cursor: pointer; }
.stgo-tp_go span { margin-left: .5rem; }
.stgo-tp_go:disabled { background: rgba(236,236,236,.12); color: var(--dim); cursor: default; }
.stgo-tp_ft { display: none; }
.stgo-tp_go:not(:disabled):hover { background: #fff; }
.stgo-tp_pick { position: absolute; left: 50%; bottom: 4.6rem; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; width: min(640px, 90vw);
  padding: .7rem .9rem; transform: translateX(-50%); border: 1px solid var(--yel); background: rgba(4,4,4,.9); font: .62rem var(--mono); color: var(--w);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.stgo-tp_pick.on { opacity: 1; pointer-events: auto; }
.stgo-tp_pick b { color: var(--yel); font-weight: 400; font-size: .9rem; }
.stgo-tp_pick button { margin-left: auto; border-color: var(--yel); color: var(--yel); }
.stgo-tp_inf { position: absolute; left: 50%; top: 50%; z-index: 7; width: min(520px, 88vw); padding: 1rem 1.1rem; transform: translate(-50%, -50%);
  border: 1px solid var(--hair); border-left: 2px solid var(--yel); background: rgba(4,4,4,.82); font: .64rem var(--mono); color: var(--dim);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.stgo-tp_inf.on { opacity: 1; }
.stgo-tp_inf .k { color: var(--yel); letter-spacing: .16em; }
.stgo-tp_inf .m { margin: .5rem 0 .7rem; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: .95rem; line-height: 1.4; color: var(--w); }
.stgo-tp_inf .m b { color: var(--yel); font-weight: 400; }
.stgo-tp_inf .bar { height: 1px; background: var(--hair); margin-bottom: .5rem; }
.stgo-tp_inf .bar i { display: block; height: 1px; width: 0; background: var(--yel); transition: width .25s; }
.stgo-tp_pl { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s; }
.stgo-tp_pl.on { opacity: 1; pointer-events: auto; }
.stgo-tp_frame { position: relative; overflow: hidden; background: #000; }
.stgo-tp_frame.flash::after { content: ""; position: absolute; inset: 0; background: #fff; }
.stgo-tp_frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stgo-tp_frame .cap { position: absolute; left: 50%; bottom: 7%; max-width: 80%; transform: translateX(-50%); padding: .3em .55em; border-radius: 3px; background: rgba(0,0,0,.9);
  color: #fff; font: 700 calc(var(--fw, 1280px) * .0135) "Helvetica Neue", Arial, sans-serif; letter-spacing: .03em; text-transform: uppercase; text-align: center; opacity: 0; }
.stgo-tp_frame .cap.on { opacity: 1; }
.stgo-tp_frame .big { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center; font-family: "Times New Roman", Times, serif; font-style: italic;
  font-size: calc(var(--fw, 1280px) * .12); line-height: 1; color: #f0da16; text-shadow: 0 0 2rem rgba(0,0,0,.5); opacity: 0; }
.stgo-tp_frame .big.on { opacity: 1; }
.stgo-tp_frame .firma { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; background: #000; opacity: 0; transition: opacity 1s; }
.stgo-tp_frame .firma.on { opacity: 1; }
.stgo-tp_frame .firma img { width: calc(var(--fw, 1280px) * .32); height: auto; }
.stgo-tp_frame .firma p { margin: 0; font: calc(var(--fw, 1280px) * .012) var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.stgo-tp_hud { position: absolute; left: 1.25rem; top: 1.3rem; font: .62rem var(--mono); color: var(--dim); letter-spacing: .06em; }
.stgo-tp_hud b { color: var(--yel); font-weight: 400; letter-spacing: .12em; }
.stgo-tp_ro { position: absolute; left: 1.25rem; bottom: 1.6rem; font: .58rem var(--mono); color: rgba(236,236,236,.45); }
.stgo-tp_pl > .stgo-tp_x { right: 1.25rem; top: 1.1rem; width: 3.6rem; height: 3.6rem; }
.stgo-tp_pl > .stgo-tp_x svg { width: 1.15rem; height: 1.15rem; }
.stgo-tp_prog { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; height: 1px; background: var(--hair); }
.stgo-tp_prog i { display: block; height: 1px; width: 0; background: var(--yel); }
.stgo-tp_end { position: absolute; left: 50%; top: 50%; width: min(560px, 88vw); padding: 1.1rem 1.2rem; transform: translate(-50%, -46%); border: 1px solid var(--hair);
  border-left: 2px solid var(--yel); background: rgba(4,4,4,.92); font: .64rem var(--mono); color: var(--dim); opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s; }
.stgo-tp_end.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.stgo-tp_end .k { color: var(--yel); letter-spacing: .12em; }
.stgo-tp_end p { margin: .6rem 0 1rem; font-family: "BDO Grotesk VF", Arial, sans-serif; font-size: 1rem; line-height: 1.4; color: var(--w); }
.stgo-tp_end .b { display: flex; flex-wrap: wrap; gap: .5rem; }
.stgo-tp_end button { padding: .45rem .8rem; border: 1px solid var(--hair); background: none; color: var(--w); font: inherit; cursor: pointer; }
.stgo-tp_end button:first-child { border-color: var(--yel); color: var(--yel); }
.stgo-tp_end button:hover { background: var(--yel); color: #000; }
.stgo-xp.is-tpplay .stgo-xp_q { display: none; }
.stgo-xp.is-tpplay .stgo-xu_mute { z-index: 10; }      /* el sonido sigue a mano durante tu película, junto a su X */
.stgo-xu.is-tp .stgo-xs_voice, .stgo-xu.is-tp .stgo-xs_lab, .stgo-xu.is-tp .stgo-xs_big, .stgo-xu.is-tp .stgo-xu_now, .stgo-xu.is-tp .stgo-xu_legend { opacity: 0; pointer-events: none; }
@media (max-width: 760px), (max-height: 520px) {
  .stgo-tp { left: .5rem; right: .5rem; width: auto; top: calc(4.2rem + env(safe-area-inset-top)); bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  .stgo-tp_cols { display: block; flex: 1; min-height: 0; overflow-y: auto; }
  .stgo-tp_col .stgo-tp_go { display: none; }
  .stgo-tp_ft { display: flex; align-items: center; gap: .8rem; padding: .5rem .6rem; border-top: 1px solid var(--hair); }
  .stgo-tp_ft span { flex: 1; }
  .stgo-tp_ft .stgo-tp_go { position: static; margin: 0; padding: .75rem 1rem; }
  .stgo-tp_col { overflow: visible; }
  .stgo-tp_col + .stgo-tp_col { border-left: 0; border-top: 1px solid var(--hair); }
  .stgo-tp_hd p { font-size: .8rem; }
  .stgo-tp_pick { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .stgo-tp_pl > .stgo-tp_x { width: 2.9rem; height: 2.9rem; }
  .stgo-tp_ro { display: none; }
}

/* STANDARD · EXPERIENCIA · modos y carga (2026-09-28). Los tres modos son un selector grande arriba a la
   derecha, junto a salir: VER LA PELÍCULA (la visita) · EXPLORAR · CREA TU PELÍCULA (protagonista, en
   amarillo; carga aparte). Pausa y vúmetro pasan a la línea de tiempo; «película en la matriz» va con las
   organizaciones, que bajan a una segunda fila a la derecha. La carga «entrena» el modelo con bytes reales. */
.stgo-xs_modes { position: absolute; right: 1.25rem; bottom: 4.6rem; z-index: 8; display: flex; flex-direction: column; gap: .4rem; width: 13.6rem;
  opacity: 0; pointer-events: none; transition: opacity .4s; }
.stgo-xs_modes.on { opacity: 1; pointer-events: auto; }
/* una sola maqueta para los tres: círculo con icono · número · nombre · estado */
.stgo-xs_modes button { display: flex; align-items: center; gap: .7rem; height: 3.5rem; margin: 0; padding: 0 1.1rem 0 .45rem;
  border: 1px solid rgba(239,238,236,.3); border-radius: 999px; background-color: rgba(0,0,0,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #efeeec; text-align: left; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.stgo-xs_modes .i { flex: none; display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border: 1px solid rgba(239,238,236,.45); border-radius: 50%;
  transition: background-color .25s, border-color .25s, color .25s; }
.stgo-xs_modes .i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.stgo-xs_modes .i .f { fill: currentColor; stroke: none; }
.stgo-xs_modes .t { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.stgo-xs_modes .k { display: flex; align-items: center; gap: .35rem; font: .5rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(236,236,236,.45); }
.stgo-xs_modes .k i { display: none; width: 5px; height: 5px; border-radius: 50%; background: #ff2d2d; animation: stgo-xs-rec 1.4s infinite; }
.stgo-xs_modes b { font: 600 .86rem/1.1 "BDO Grotesk VF", Arial, sans-serif; letter-spacing: -.005em; white-space: nowrap; }
.stgo-xs_modes .s { overflow: hidden; font: .5rem var(--mono); letter-spacing: .04em; color: rgba(236,236,236,.5); white-space: nowrap; text-overflow: ellipsis; }
.stgo-xs_modes button:hover { border-color: rgba(239,238,236,.75); }
.stgo-xs_modes button:hover .i { border-color: #efeeec; }
.stgo-xs_modes button:focus-visible { outline: 1px solid var(--yel); outline-offset: 3px; }
/* activo: el mismo gesto en los tres */
.stgo-xs_modes button.on { border-color: #efeeec; background-color: #efeeec; color: #000; cursor: default; }
.stgo-xs_modes button.on .i { border-color: #000; background-color: #000; color: #efeeec; }
.stgo-xs_modes button.on .k, .stgo-xs_modes button.on .s { color: rgba(0,0,0,.55); }
.stgo-xs_modes button.on .k i { display: inline-block; }
/* crea tu película: el mismo botón, con el acento amarillo en su círculo y su etiqueta */
.stgo-xs_modes .cta { border-color: rgba(255,230,0,.55); }
.stgo-xs_modes .cta .i { border-color: var(--yel); background-color: var(--yel); color: #000; }
.stgo-xs_modes .cta .k { color: var(--yel); }
.stgo-xs_modes .cta:hover { border-color: var(--yel); }
.stgo-xs_modes .cta.on .i { border-color: #000; background-color: #000; color: var(--yel); }
.stgo-xs_modes .cta.on .k { color: rgba(0,0,0,.55); }
.stgo-xs_modes .cta.is-loading .s { animation: stgo-xs-rec 1s infinite; }
.stgo-xp.is-tpplay .stgo-xs_modes, .stgo-xu:has(.stgo-xu_card.on) .stgo-xs_modes { opacity: 0; pointer-events: none; }
/* transporte junto a la línea de tiempo */
.stgo-xs_tr { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 3; display: flex; align-items: center; gap: .7rem; height: 2.6rem;
  opacity: 0; pointer-events: none; transition: opacity .4s; }
.stgo-xs_tr.on { opacity: 1; pointer-events: auto; }
.stgo-xs_tr button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border: 1px solid rgba(239,238,236,.55); border-radius: 50%;
  background: rgba(0,0,0,.55); color: #efeeec; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.stgo-xs_tr button svg { width: .95rem; height: .95rem; }
.stgo-xs_tr .pl, .stgo-xs_tr .is-paused .pa { display: none; }
.stgo-xs_tr .is-paused .pl { display: inline; }
.stgo-xs_tr button:hover, .stgo-xs_tr button:focus-visible { background-color: var(--yel); border-color: var(--yel); color: #000; }
.stgo-xs_tr .vu { display: flex; gap: 2px; align-items: flex-end; height: 1.1rem; }
.stgo-xs_tr .vu i { width: 3px; height: 100%; background: var(--yel); transform-origin: bottom; transform: scaleY(.08); }
.stgo-xu[data-modo] .stgo-xu_tl { left: 7.6rem; }
/* organizaciones + «película en la matriz»: un control segmentado redondeado, arriba en el centro, con iconos */
.stgo-xu_lay { left: 50%; right: auto; top: 1.1rem; transform: translateX(-50%); gap: 2px; padding: 4px; border: 1px solid rgba(239,238,236,.3);
  border-radius: 999px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stgo-xu_lay button, .stgo-xu_lay .scr { display: flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 .85rem; border: 0; border-radius: 999px;
  color: rgba(236,236,236,.62); font: 500 .58rem var(--mono); letter-spacing: .12em; white-space: nowrap; transition: background-color .2s, color .2s; }
.stgo-xu_lay button svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.stgo-xu_lay button[data-l="latente"] svg { fill: currentColor; stroke: none; }
.stgo-xu_lay button .n { display: inline; margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }
.stgo-xu_lay button:hover { color: #fff; background-color: rgba(239,238,236,.1); }
.stgo-xu_lay button.on, .stgo-xu_lay button.on:hover { color: #000; background-color: var(--yel); }
.stgo-xu_lay button.is-loading .n::after, .stgo-xu_lay button.is-loading span::after { content: " …"; }
.stgo-xu_lay .scr { position: relative; margin-left: .35rem; }
.stgo-xu_lay .scr::before { content: ""; position: absolute; left: -.2rem; top: .45rem; bottom: .45rem; border-left: 1px solid rgba(239,238,236,.25); }
.stgo-xu_lay .scr .f { fill: currentColor; stroke: none; }
/* the same button as the organisations beside it (upper-case mono, icon, pill); switched on it takes a
   yellow outline — the yellow fill belongs to the chosen organisation, and this one combines with any */
.stgo-xu_lay .scr .n { text-transform: uppercase; }
.stgo-xu_lay .scr.is-on, .stgo-xu_lay .scr.is-on:hover { color: var(--yel); background: none; box-shadow: inset 0 0 0 1px var(--yel); }
.stgo-xu[data-modo="tp"] .stgo-xu_lay { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) {
  .stgo-xu_lay button:not(.on):not(.scr) .n { display: none; }
  .stgo-xu_lay button, .stgo-xu_lay .scr { padding: 0 .7rem; }
  .stgo-tp { width: calc(100% - 2.5rem - 17rem); }
}

/* la carga: el modelo entrena mientras baja */
.stgo-xp_load { background: rgba(0,0,0,.9); }
.stgo-xp_load-box { width: min(820px, 90vw); }
.stgo-xp_load-t { margin-bottom: .5rem; }
.stgo-xp_load-t em { font-style: normal; }
.stgo-xp_load-big { display: flex; align-items: baseline; gap: .6rem; color: #fff; }
.stgo-xp_load-big span { font: 300 clamp(2.4rem, 5vw, 3.6rem)/1 var(--mono); letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.stgo-xp_load-big small { font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.stgo-xp_load-big em { margin-left: auto; font-style: normal; color: var(--yel); font-size: .7rem; font-variant-numeric: tabular-nums; }
.stgo-xp_load-bar { height: 2px; margin: .8rem 0 1.2rem; }
.stgo-xp_load-bar i { height: 2px; transition: width .12s linear; }
.stgo-xp_load-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem; align-items: stretch; }
.stgo-xp_load-main > div { display: flex; flex-direction: column; min-width: 0; }
.stgo-xp_load-k { margin-bottom: .5rem; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,236,236,.45); }
.stgo-xp_load-k i { display: inline-block; width: 14px; margin: 0 .25rem 0 .15rem; border-top: 1.5px solid var(--yel); vertical-align: middle; }
.stgo-xp_load-k i.v { border-top: 1px dashed rgba(236,236,236,.5); }
.stgo-xp_load-grid { grid-template-columns: repeat(23, 1fr); margin: 0; }
.stgo-xp_load-grid i { transition: none; }
.stgo-xp_load-loss { flex: 1; width: 100%; min-height: 7rem; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stgo-xp_load-st { margin: 1rem 0 .4rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.stgo-xp_load-st b { color: var(--w); font-weight: 400; }
.stgo-xp_load-row span:last-child { font-variant-numeric: tabular-nums; }
.stgo-xp_load-log { display: flex; flex-direction: column; justify-content: flex-end; height: 8.6em; margin-top: .7rem; overflow: hidden; font-size: .6rem; line-height: 1.7;
  color: rgba(236,236,236,.35); white-space: nowrap; }
.stgo-xp_load-log > div:last-child { color: var(--w); }
.stgo-xp_load-log .ok { color: var(--yel) !important; }
.stgo-xp_load-log .err { color: #ff5a4a !important; }
.stgo-xp_load-f { margin-top: .6rem; font-size: .54rem; color: rgba(236,236,236,.3); }

@media (max-width: 760px), (max-height: 520px) {
  .stgo-xs_modes { left: .6rem; right: .6rem; top: calc(4.3rem + env(safe-area-inset-top)); bottom: auto; width: auto; flex-direction: row; gap: .35rem; }
  .stgo-xs_modes button { flex: 1 1 0; min-width: 0; height: 2.9rem; gap: .4rem; padding: 0 .55rem 0 .3rem; }
  .stgo-xs_modes .i { width: 2.1rem; height: 2.1rem; }
  .stgo-xs_modes .k, .stgo-xs_modes .s { display: none; }
  .stgo-xs_modes b { font-size: .7rem; white-space: normal; }
  .stgo-xu_lay button .n { display: none; }
  .stgo-xu_lay button.on .n { display: inline; }
  .stgo-xu_lay { transform: none; justify-content: space-between; overflow: visible; }
  .stgo-xu_lay button, .stgo-xu_lay .scr { flex: 1 1 auto; justify-content: center; height: 2.2rem; padding: 0 .5rem; }
  .stgo-xs_lab { top: calc(8rem + env(safe-area-inset-top)); }
  .stgo-tp { top: calc(7.8rem + env(safe-area-inset-top)); width: auto; }
  .stgo-xs_tr { left: .6rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); height: 2.4rem; }
  .stgo-xs_tr button { width: 2.4rem; height: 2.4rem; }
  .stgo-xs_tr .vu { display: none; }
  .stgo-xu[data-modo] .stgo-xu_tl { left: 3.6rem; }
  .stgo-xu_lay { left: .6rem; right: .6rem; top: auto; bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
  .stgo-xp_load-t em { display: none; }
  .stgo-xp_load-main { grid-template-columns: 1fr; gap: 1rem; }
  .stgo-xp_load-loss { min-height: 5rem; height: 5rem; flex: none; }
  .stgo-xp_load-log { display: none; }
  .stgo-xp_load-big span { font-size: 2.2rem; }
}

/* bloque final: el muro (js/stgo-cta-stop.js) sustituye a las imágenes que seguían al ratón */

/* ANIMA · selector de idioma al final de la barra de acciones: se despliega hacia arriba */
.stgo-home .stgo-home_hero .stgo-hero_acciones { grid-template-columns: 1fr 1fr auto; }
.stgo-hero_lang { position: relative; display: flex; }
.stgo-home .stgo-home_hero .stgo-hero_lang-btn { display: flex; align-items: center; gap: .45rem; height: 100%; min-height: 2.3rem; padding: 0 .75rem; border: 0; border-radius: 0;
  background: #0c0c0c; color: #ececec; font: 500 .62rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .12em; cursor: pointer; }
.stgo-home .stgo-home_hero .stgo-hero_lang-btn::after { content: ""; width: 5px; height: 5px; border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  transform: translateY(1px) rotate(45deg); transition: transform .2s; }
.stgo-home .stgo-home_hero .stgo-hero_lang.is-abierta .stgo-hero_lang-btn::after { transform: translateY(-2px) rotate(225deg); }
.stgo-home .stgo-home_hero .stgo-hero_lang-btn:hover, .stgo-home .stgo-home_hero .stgo-hero_lang-btn:focus-visible,
.stgo-home .stgo-home_hero .stgo-hero_lang.is-abierta .stgo-hero_lang-btn { color: #ffe600; background: #141414; }
.stgo-mascot-copy:has(.stgo-hero_nota-navegador:not([hidden])) .stgo-hero_lang-btn { border: 1px solid rgba(255,255,255,.14); }
.stgo-hero_lang-list { position: fixed; left: 0; top: 0; z-index: 1000; width: 11.5rem; max-height: 16.5rem; margin: 0; padding: 4px; overflow-y: auto;
  list-style: none; border: 1px solid rgba(255,255,255,.18); background: rgba(8,8,8,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; overscroll-behavior: contain; }
.stgo-hero_lang-list[hidden] { display: none; }
.stgo-hero_lang-list li { display: flex; align-items: baseline; gap: .7rem; padding: .42rem .55rem; color: rgba(236,236,236,.8); font: .74rem "Inter", Arial, sans-serif; cursor: pointer; outline: 0; }
.stgo-hero_lang-list li b { width: 1.5rem; flex: none; font: 500 .6rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .12em; color: rgba(236,236,236,.45); }
.stgo-hero_lang-list li:hover, .stgo-hero_lang-list li:focus { background: #1a1a1a; color: #fff; }
.stgo-hero_lang-list li[aria-selected="true"] { color: #ffe600; }
.stgo-hero_lang-list li[aria-selected="true"] b { color: #ffe600; }
.stgo-home .stgo-home_hero .stgo-hero_acciones .stgo-hero_accion { white-space: nowrap; letter-spacing: .08em; padding-left: .6rem; padding-right: .6rem; }
.stgo-hero_lang-btn i, .stgo-hero_lang-list li i { font-style: normal; font-size: .95rem; line-height: 1; letter-spacing: 0; }
.stgo-hero_lang-list li { align-items: center; gap: .55rem; }

/* ANIMA · consentimiento de descarga y aviso legal (js/anima/motor.js): mismo lenguaje táctico que la tarjeta */
.stgo-anima-legal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; overscroll-behavior: contain; }
.stgo-anima-legal.is-on { opacity: 1; }
.stgo-anima-legal_caja { position: relative; width: min(560px, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; padding: 1.2rem 1.3rem 1.1rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px; background: #0a0a0a; color: #ececec;
  background-image:
    linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600),
    linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600), linear-gradient(#ffe600, #ffe600);
  background-repeat: no-repeat;
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right; }
.stgo-anima-legal_cab { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px dotted rgba(255,255,255,.2);
  font: 500 .6rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .14em; color: #ffe600; }
.stgo-anima-legal_cab span:last-child { color: rgba(236,236,236,.5); }
.stgo-anima-legal h2 { margin: .9rem 0 .8rem; font: 600 1.35rem/1.15 Montserrat, "BDO Grotesk VF", Arial, sans-serif; color: #fff; }
.stgo-anima-legal dl { display: grid; grid-template-columns: 6.2rem 1fr; gap: .45rem .9rem; margin: 0 0 .9rem; padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.stgo-anima-legal dt { font: 500 .56rem/1.9 "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,236,236,.45); }
.stgo-anima-legal dd { margin: 0; font-size: .78rem; line-height: 1.5; color: rgba(236,236,236,.85); }
.stgo-anima-legal dd b { color: #ffe600; font-weight: 600; }
.stgo-anima-legal_texto p { margin: 0 0 .6rem; font-size: .74rem; line-height: 1.55; color: rgba(236,236,236,.62); }
.stgo-anima-legal_texto b { color: #ececec; font-weight: 600; }
.stgo-anima-legal_botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1px; margin-top: 1rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.stgo-anima-legal_botones button { flex: 1 1 auto; padding: .8rem 1rem; border: 0; border-radius: 0; background: #0c0c0c; color: #ececec; cursor: pointer;
  font: 500 .62rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.stgo-anima-legal_botones button:hover, .stgo-anima-legal_botones button:focus-visible { color: #ffe600; background: #141414; }
.stgo-anima-legal_botones .is-primario { background: #ffe600; color: #000; }
.stgo-anima-legal_botones .is-primario::before { content: "\25B6\00A0\00A0"; font-size: .8em; }
.stgo-anima-legal_botones .is-primario:hover, .stgo-anima-legal_botones .is-primario:focus-visible { background: #fff; color: #000; }
.stgo-anima-legal_botones button[disabled] { color: rgba(236,236,236,.4); cursor: default; }
@media (max-width: 479px) {
  .stgo-anima-legal dl { grid-template-columns: 1fr; gap: .1rem; }
  .stgo-anima-legal dd { margin-bottom: .4rem; }
  .stgo-anima-legal_botones { flex-direction: column-reverse; }
}
.stgo2026_legal { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; opacity: .8; }
.stgo2026_legal:hover { color: #ffe600; opacity: 1; }

/* ANIMA · acciones en sus respuestas (js/anima/herramientas.js) y la sección señalada al llegar */
.stgo2026_acciones { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.stgo2026_accion { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border: 1px solid #ffe600; border-radius: 2px; background: rgba(255,230,0,.08);
  color: #ffe600; font: 500 .6rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s; }
.stgo2026_accion::before { content: "\25B6"; font-size: .75em; }
.stgo2026_accion:hover, .stgo2026_accion:focus-visible { background: #ffe600; color: #000; }
.stgo2026_accion.is-hecha { border-color: rgba(255,255,255,.2); background: none; color: rgba(236,236,236,.55); }
.stgo2026_accion.is-hecha::before { content: "\2713"; }
.stgo-anima-foco { position: relative; }
.stgo-anima-foco::after { content: ""; position: absolute; inset: 6px; z-index: 50; pointer-events: none; animation: stgo-anima-foco 2.6s ease-out forwards;
  background:
    linear-gradient(#ffe600, #ffe600) top left / 28px 3px no-repeat, linear-gradient(#ffe600, #ffe600) top left / 3px 28px no-repeat,
    linear-gradient(#ffe600, #ffe600) top right / 28px 3px no-repeat, linear-gradient(#ffe600, #ffe600) top right / 3px 28px no-repeat,
    linear-gradient(#ffe600, #ffe600) bottom left / 28px 3px no-repeat, linear-gradient(#ffe600, #ffe600) bottom left / 3px 28px no-repeat,
    linear-gradient(#ffe600, #ffe600) bottom right / 28px 3px no-repeat, linear-gradient(#ffe600, #ffe600) bottom right / 3px 28px no-repeat; }
@keyframes stgo-anima-foco { 0% { opacity: 0; transform: scale(1.02); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ANIMA · visión (js/anima/camara.js): la cámara a pantalla completa con detecciones al estilo de la película */
.stgo-anima-cam { position: fixed; inset: 0; z-index: 10060; background: #000; opacity: 0; transition: opacity .28s; overscroll-behavior: contain; touch-action: none; }
.stgo-anima-cam.is-on { opacity: 1; }
.stgo-anima-cam video, .stgo-anima-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stgo-anima-cam video { object-fit: cover; filter: saturate(.85) contrast(1.05); }
.stgo-anima-cam video.is-espejo { transform: scaleX(-1); }
.stgo-anima-cam_cab { position: absolute; left: 1rem; right: 5rem; top: calc(1rem + env(safe-area-inset-top)); display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  font: 500 .62rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .14em; color: #ffe600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.stgo-anima-cam_cab span:last-child { color: rgba(236,236,236,.8); }
.stgo-anima-cam_x { position: absolute; right: 1rem; top: calc(.8rem + env(safe-area-inset-top)); display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  padding: 0; border: 0; border-radius: 50%; background: #efeeec; color: #000; cursor: pointer; }
.stgo-anima-cam_x svg { width: 1rem; height: 1rem; }
.stgo-anima-cam_x:hover { background: #ffe600; }
.stgo-anima-cam_pie { position: absolute; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: 640px; padding: .8rem .9rem;
  border: 1px solid rgba(255,255,255,.16); border-left: 2px solid #ffe600; background: rgba(6,6,6,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stgo-anima-cam_ve { margin: 0; font: .64rem/1.6 "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .06em; color: rgba(236,236,236,.8); }
.stgo-anima-cam_dice { margin: .5rem 0 0; font-size: .92rem; line-height: 1.45; color: #fff; }
.stgo-anima-cam_botones { display: flex; gap: 1px; margin-top: .7rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.stgo-anima-cam_botones button { flex: 1; padding: .7rem .8rem; border: 0; background: #0c0c0c; color: #ececec; cursor: pointer;
  font: 500 .6rem "Roboto Mono VF", "Roboto Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.stgo-anima-cam_botones .is-primario { background: #ffe600; color: #000; }
.stgo-anima-cam_botones button[disabled] { opacity: .5; }
.stgo-anima-cam_botones button[hidden] { display: none; }

/* Areas rail, card 06: the research centre's full name («Centro Mixto de
   Investigación Navantia UDC», 2026-09-29) runs to three lines where the
   other titles take one or two. A step smaller on desktop, and open leading
   so the accents never touch the line above. */
.stgo-home .stgo-home_chapters .heading-style-display.heading-style-reducido.is-nombre-largo {
  line-height: 1.08;
}

@media screen and (min-width: 992px) {
  .stgo-home .stgo-home_chapters .heading-style-display.heading-style-reducido.is-nombre-largo {
    font-size: var(--fixed--2rem);
  }
}

/* AI disclosure (EU AI Act, art. 50.4; in force since 2 August 2026). The minimum
   mark, present on every generated image and on every montage that includes
   generated footage, never competing with it: «Generado con IA» where the image
   is entirely generated, «Incluye IA generativa» where AI shots mix with archive
   (hero, portal, areas rail, CTA, experience, film). Archive-only images carry
   none. The wider explanation lives in the aviso legal, «Anexo». */
.stgo-ia {
  position: absolute;
  z-index: 4;
  right: 0.75rem;
  bottom: 0.65rem;
  font-family: "Roboto Mono VF", "Roboto Mono", monospace;
  font-size: 0.5625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);         /* owner, 2026-09-29: every mark at 35 % */
  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.stgo-ia.is-arriba {
  top: 0.65rem;
  bottom: auto;
}

.stgo-ia.is-izq {
  left: 0.75rem;
  right: auto;
}

/* the hero: top-right (owner's choice), just under the readout the landscape cut
   carries in that corner («frame · fps · vision on-device»); the vertical cut
   (phones) fills its top edge with the readout and its bottom-left with Play, so
   there it goes bottom-right */
.stgo-ia.is-hero {
  top: 3rem;
  right: 3.25rem;                          /* well inside the rounded corner */
  left: auto;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .stgo-ia.is-hero {
    top: auto;
    bottom: 0.7rem;
    left: auto;
    right: 0.9rem;
  }
}

/* the CTA card's still, under the moving thumbnails: the Webflow stock rule
   (stgo-2026.webflow.css, not edited) still names the file after the tool that
   generated it; the image ships as stgo-cta-fondo.jpg and this rule wins */
.cta_component {
  background-image: url("../images/stgo-cta-fondo.jpg");
}

/* The STGO Standard: its copy sits over the film while it plays; where the film
   is busy (vegetation, a bright coast) the lower third of the block darkens gently,
   above the film's layers (z -1, painted after them) and below the copy. Gone
   once the experience opens: the universe keeps its own light */
.stgo-home .stgo-home_standard .stgo-xp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 24%, rgba(0, 0, 0, 0) 46%);
}

.stgo-home .stgo-home_standard .stgo-xp.is-open::after {
  display: none;
}

/* on a phone the paragraph fills the lower half of the card, where the film
   sets its own captions: the darkening climbs with it */
@media screen and (max-width: 767px) {
  .stgo-home .stgo-home_standard .stgo-xp::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.58) 42%, rgba(0, 0, 0, 0) 64%);
  }
}

/* its headline wraps by itself into balanced lines (no forced break: on a
   phone a fixed break left «e IA» alone on a line) */
.stgo-home .stgo-home_standard .heading-style-h4 {
  text-wrap: balance;
}

/* Heading outline (2026-09-29): some elements changed tag for the document
   outline (one H1, H2 per block, no skipped levels; numbers, hashtags and
   captions are not headings). Their look must not move: these rules restore
   what the old tag gave them by default. */
/* rail labels, card numbers and hashtags: were h2 (line-height .95); area numbers: were h3 (1) */
.stgo-home .stgo-home_chapters p.text-style-label {
  line-height: 0.95;
}
.stgo-home .stgo-index_entry-meta p.text-style-label {
  line-height: 1;
}
/* client names: were h4 (semibold, tight tracking) */
.stgo-home p.brands_item-name-2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* «SISTEMA DE GESTIÓN CERTIFICADO»: was an inline span, now the block's h2 */
.stgo-home .stgo-cert_head h2.text-style-label {
  display: inline;
  line-height: inherit;
}

/* text for screen readers and search engines only (e.g. the H1 completes
   with the words the hero animates visually) */
.stgo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   TOUCH — finger-sized hit areas (2026-09-29)
   On a touch screen the smallest links (16–22px tall) get an invisible
   hit area around them; nothing that shows changes.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  .stgo-home .stgo-cemi_card-link,
  .stgo-home .stgo-arg_link,
  .stgo-home .stgo-wheel_mas,
  .stgo-home .stgo-foot_enlace {
    position: relative;
  }

  .stgo-nav_contacto::before,
  .stgo-home .stgo-cemi_card-link::before,
  .stgo-home .stgo-arg_link::before,
  .stgo-home .stgo-wheel_mas::before {
    content: "";
    position: absolute;
    inset: -0.65rem -0.5rem;
  }

  /* the footer lists sit 8px apart: their areas grow only into that gap */
  .stgo-home .stgo-foot_enlace::before {
    content: "";
    position: absolute;
    inset: -0.25rem -0.25rem;
  }
}

/* registry numbers (CIF, certificates) never split at their hyphen; the
   Webflow utility .text-style-nowrap lets go on phones, this one holds */
.stgo-nowrap {
  white-space: nowrap;
}

/* Safari 26 on iPhone paints the status-bar strip from whatever fixed element
   touches the top edge. The bar is transparent, so the page scrolled up into
   that strip in plain sight above the logo; one line in the page colour (the
   theme-color) is enough for Safari to fill the strip with it. */
.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #0f0f0f;
  pointer-events: none;
}

/* =====================================================================
   RENDER COST (2026-09-30) — work the eye cannot see
   ===================================================================== */
/* the bottom progressive blur stacks ten backdrop layers; the last four
   blur by 0.25–0.03 px, below what a pixel can show, and each still cost a
   full-width pass on every scroll and video frame */
.progressive-blur_panel.is-7,
.progressive-blur_panel.is-8,
.progressive-blur_panel.is-9,
.progressive-blur_panel.is-10 {
  display: none;
}

/* =====================================================================
   PHONE — lighter rendering (2026-09-30, owner's choice)
   ===================================================================== */
@media screen and (max-width: 767px) {
  /* the sector atmospheres hold still on a phone: each field is twice the
     screen, blended, and used to drift for as long as its block was active */
  .stgo-area_gradient.is-active::before,
  .stgo-area_gradient.is-active::after {
    animation-play-state: paused;
    will-change: auto;
  }

  /* the bottom blur in four layers instead of six (the wrapper is turned
     180°: 0% is the screen's bottom edge). Same ramp, 16 px at the edge to
     nothing at 85%, with two passes fewer on every scroll frame */
  .progressive-blur_panel.is-3,
  .progressive-blur_panel.is-5 {
    display: none;
  }

  .progressive-blur_panel.is-2 {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask: linear-gradient(#0000 0%, #000 12% 25%, #0000 45%);
    mask: linear-gradient(#0000 0%, #000 12% 25%, #0000 45%);
  }

  .progressive-blur_panel.is-4 {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask: linear-gradient(#0000 20%, #000 35% 50%, #0000 65%);
    mask: linear-gradient(#0000 20%, #000 35% 50%, #0000 65%);
  }

  .progressive-blur_panel.is-6 {
    -webkit-backdrop-filter: blur(0.6px);
    backdrop-filter: blur(0.6px);
    -webkit-mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 85%);
    mask: linear-gradient(#0000 40%, #000 60% 70%, #0000 85%);
  }
}

/* the four area entries play their portal loop on phones and tablets too (2026-09-30, owner's
   choice): a light 720×1000 cut over the poster, armed and played only while on screen
   (js/stgo-lazy-video.js). The slot is hidden on desktop, where the portal plays them. */
.stgo-home .stgo-port_entry-media {
  position: relative;
}

.stgo-home .stgo-port_entry-loop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* =====================================================================
   ANIMA — THE LOAD, LEGIBLE (2026-09-30)
   Three named steps, a bar that only shows a percentage where there are
   bytes, a notice when a step runs long or the download stalls, and the
   visitor's choices (Cancelar · Reintentar · Seguir esperando). The same
   words reach the guided tour through Stgo2026.status().
   ===================================================================== */
.stgo2026_download-pasos {
  display: flex;
  gap: 0.2rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  font-family: "Roboto Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stgo2026_download-pasos:empty { display: none; }

.stgo2026_download-pasos li {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 0.32rem;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  color: rgba(244, 243, 239, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stgo2026_download-pasos li.is-hecho { border-top-color: rgba(255, 230, 0, 0.55); color: rgba(244, 243, 239, 0.62); }
.stgo2026_download-pasos li.is-hecho::before { content: "✓ "; }
.stgo2026_download-pasos li.is-actual { border-top-color: #ffe600; color: #ffe600; }

.stgo2026_download-track.is-error i { background: #f3350c; }

.stgo2026_download-meta { white-space: normal; }

.stgo2026_download-aviso {
  margin: 0.5rem 0 0;
  color: #ffe600;
  font-size: 0.72rem;
  line-height: 1.4;
}

.stgo2026_download-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.stgo2026_download-acciones .stgo2026_chip.is-primario {
  border-color: rgba(255, 230, 0, 0.6);
  color: #ffe600;
}

/* the dock keeps showing the load when the panel is closed */
.stgo-mascot_carga {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid rgba(255, 230, 0, 0.5);
  color: #ffe600;
  font-family: "Roboto Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.stgo-mascot_carga::before {
  content: "";
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: #ffe600;
  vertical-align: 0.05rem;
  animation: stgo-anima-latido 1.4s ease-in-out infinite;
}

.stgo-mascot.is-open .stgo-mascot_carga { display: none; }

/* the consent dialog, on a modest device: said before anything is downloaded */
.stgo-anima-legal_equipo {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 230, 0, 0.45);
  border-radius: 0.5rem;
  color: rgba(244, 243, 239, 0.86);
  font-size: 0.82rem;
  line-height: 1.45;
}

.stgo-anima-legal_equipo b { color: #ffe600; font-weight: 600; }

/* =====================================================================
   STABILITY (2026-09-30) — what a phone has to hold in memory
   ===================================================================== */
/* Anima lives on the desktop only (owner, 2026-09-30). index.html marks
   every other device with html.stgo-sin-anima and never loads her scripts
   or her portrait; here her card, her dock and the line that cites her as
   proof give way. */
html.stgo-sin-anima .stgo-mascot,
html.stgo-sin-anima .stgo-home_hero .home-header_contact,
html.stgo-sin-anima .stgo-con-anima {
  display: none !important;
}

.stgo-sin-anima_nota {
  display: none;
}

html.stgo-sin-anima .stgo-sin-anima_nota {
  display: inline;
}

/* The sector atmospheres are a fixed, full-screen stack under the page.
   Far from their chapter they do not exist (js/stgo-home-bloques.js →
   .is-cerca): present, a fixed blended layer under everything made the
   browser lift most of what scrolls over it into layers of its own, the
   whole page long. Near it, an unlit atmosphere is not painted at all
   (it used to sit at opacity 0: invisible, still a layer, still blended). */
.stgo-port_grid:not(.is-cerca) .stgo-area_atmospheres {
  display: none;
}

.stgo-area_gradient {
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.45, 0.05, 0.3, 0.95), visibility 0s linear 0.8s;
}

.stgo-area_gradient.is-active {
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.45, 0.05, 0.3, 0.95), visibility 0s;
}

@media screen and (max-width: 767px) {
  /* still on a phone (owner's choice): no animation at all rather than a
     paused one, which kept each field a GPU layer twice the screen. The two
     fields rest where they sat, as flat 2D transforms. */
  .stgo-area_gradient::before,
  .stgo-area_gradient::after,
  .stgo-area_gradient.is-active::before,
  .stgo-area_gradient.is-active::after {
    animation: none;
    will-change: auto;
  }

  .stgo-area_gradient::before {
    transform: translate(-6%, -8%) scale(1.3, 1.3) rotate(-3deg);
  }

  .stgo-area_gradient::after {
    transform: translate(8%, 9%) scale(1.3, 1.2) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stgo-area_gradient,
  .stgo-area_gradient.is-active {
    transition: none;
  }
}