/* Acto 2: qué es · vídeo equipo full-bleed + scrub tipográfico */
.hold{
  --hold-in:0;
  --hold-body:0;
  position:relative;
  z-index:3;
  height:215vh;
  background:#06080A;
  color:#fff;
  margin-top:-75vh;
  padding-top:1px;
}
.hold__pin{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;
  padding:clamp(72px, 10vh, 112px) clamp(24px, 5.5vw, 88px) clamp(56px, 9vh, 88px);
  overflow:hidden;
  isolation:isolate;
  background:#06080A;
}

/* —— Media: equipo de fondo —— */
.hold__media{
  position:absolute;inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hold__poster,
.hold__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 32%;
  display:block;
  filter:grayscale(.42) contrast(1.08) brightness(.78) saturate(.7);
  transform:scale(1.04);
}
.hold__video{
  z-index:1;
}
.hold__veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(6,8,10,.62) 0%, rgba(6,8,10,.2) 26%, rgba(6,8,10,.12) 46%, rgba(6,8,10,.55) 76%, rgba(6,8,10,.88) 100%),
    linear-gradient(90deg, rgba(6,8,10,.82) 0%, rgba(6,8,10,.45) 34%, rgba(6,8,10,.12) 62%, rgba(6,8,10,.28) 100%);
}

/* Halo naranja suave sobre el velo */
.hold__glow{
  position:absolute;left:18%;bottom:18%;
  width:min(640px, 70vw);height:min(360px, 42vh);
  background:
    radial-gradient(ellipse 55% 50% at 40% 60%, rgba(255,102,0,.18), transparent 68%);
  opacity:calc(max(0, var(--hold-in) - .1) * 1.1);
  pointer-events:none;z-index:1;
  filter:blur(8px);
}

.hold__ring{
  position:absolute;right:8%;top:18%;
  width:min(280px, 36vw);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,102,0,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:calc(max(0, var(--hold-in) - .15) * .7);
  transform:scale(calc(.88 + var(--hold-in) * .14));
  pointer-events:none;z-index:1;
}
.hold__ring::before{
  content:"";
  position:absolute;inset:14%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
}

.hold__sweep{
  position:absolute;inset:-10% -20%;pointer-events:none;z-index:3;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
  transform:translateX(-120%) skewX(-12deg);
  opacity:0;
}
.hold__pin.is-lit .hold__sweep{
  animation:holdSweep .95s cubic-bezier(.16,1,.3,1) .08s forwards;
}
@keyframes holdSweep{
  0%{transform:translateX(-120%) skewX(-12deg);opacity:0}
  20%{opacity:.45}
  100%{transform:translateX(120%) skewX(-12deg);opacity:0}
}

/* Watermark tipográfico retirado: el vídeo ya no lleva SSG encima */
.hold__wm{display:none!important}

.hold__frame{
  position:absolute;
  inset:clamp(16px, 3vh, 32px) clamp(14px, 3vw, 36px);
  pointer-events:none;z-index:2;
  opacity:calc(.4 + var(--hold-in) * .5);
}
.hold__frame-tick{
  position:absolute;
  width:clamp(16px, 2.2vw, 28px);
  height:clamp(16px, 2.2vw, 28px);
  border-color:rgba(255,102,0,.7);
  border-style:solid;
  border-width:0;
}
.hold__frame-tick--tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.hold__frame-tick--tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.hold__frame-tick--bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.hold__frame-tick--br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}

.hold__stage{
  position:relative;z-index:4;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:min(760px, 60vw);
  min-height:0;
  gap:clamp(24px, 4.2vh, 48px);
  transform:translate3d(0, calc((1 - var(--hold-in)) * 18px), 0);
}
.hold__mark{
  z-index:3;
  left:clamp(8px, 3vw, 40px);
  top:clamp(64px, 12vh, 110px);
  color:rgba(255,255,255,.05);
}
.hold__eyebrow,
.hold__def,
.hold__hint{position:relative;z-index:4}

/* —— Shutter compartido (NO tocar tipografía global aquí; overrides solo bajo .hold) —— */
.hold__eyebrow{
  margin:0 0 clamp(14px, 2.4vh, 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px, 1.8vh, 18px);
  max-width:100%;
  text-align:center;
  color:var(--charcoal,#f2f3f4);
  transform:scale(calc(1.1 - var(--hold-in) * .12));
  transform-origin:center top;
}
.hold__eyebrow::before{
  content:"";display:block;height:2px;background:var(--orange,#FF6600);
  width:0;margin-bottom:clamp(4px, .8vh, 8px);
  box-shadow:0 0 18px rgba(255,102,0,.55);
}
.hold__eyebrow.is-shutter::before{
  animation:holdMarkDraw .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes holdMarkDraw{
  from{width:0;opacity:0}
  to{width:64px;opacity:1}
}
.hold__shutter-line{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  margin:0;padding:0;
  max-width:100%;
}
.hold__shutter-word{
  display:inline-flex;flex-wrap:nowrap;align-items:center;
}
.hold__shutter-line--lead{
  font:650 clamp(12px, 1.4vw, 15px)/1 "Geist Sans",Geist,system-ui,sans-serif;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--orange,#FF6600);
}
.hold__shutter-line--main{
  font:650 clamp(36px, 6.6vw, 76px)/.9 "Geist Sans",Geist,system-ui,sans-serif;
  letter-spacing:-.055em;
  color:var(--charcoal,#f2f3f4);
}
.hold__shutter-char{
  position:relative;display:inline-block;
  padding:.08em .012em .28em;overflow:hidden;line-height:1;
  vertical-align:bottom;
}
.hold__shutter-line--lead .hold__shutter-char{padding:.04em .045em .12em}
.hold__shutter-base{
  display:block;font:inherit;letter-spacing:inherit;line-height:1;color:inherit;
  position:relative;z-index:1
}
:not(.is-shutter) > .hold__shutter-line .hold__shutter-base{
  opacity:0;
  filter:blur(10px);
  transform:translateY(16px);
}
@media (prefers-reduced-motion: reduce){
  :not(.is-shutter) > .hold__shutter-line .hold__shutter-base{
    opacity:1;
    filter:none;
    transform:none;
  }
}
.hold__shutter-slice{
  position:absolute;left:0;top:0;width:100%;height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  padding:.08em 0 0;
  box-sizing:border-box;
  font:inherit;letter-spacing:inherit;line-height:1;
  pointer-events:none;z-index:2;
  color:var(--orange,#FF6600);opacity:0;
  user-select:none
}
.hold__shutter-line--lead .hold__shutter-slice{padding-top:.04em}
.hold__shutter-slice::before{
  content:attr(data-g);
  font:inherit;letter-spacing:inherit;line-height:1;color:inherit
}
.hold__shutter-line--main .hold__shutter-slice--mid{color:rgba(242,243,244,.4)}
.hold__shutter-slice--top{clip-path:polygon(0 0,100% 0,100% 34%,0 34%)}
.hold__shutter-slice--mid{clip-path:polygon(0 34%,100% 34%,100% 66%,0 66%)}
.hold__shutter-slice--bot{clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%)}

.hold__eyebrow.is-shutter .hold__shutter-base{
  opacity:0;filter:blur(10px);transform:translateY(16px);
  animation:holdShutterBase .55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms + 40ms)
}
.hold__eyebrow.is-shutter .hold__shutter-slice--top{
  animation:holdShutterSweepR .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms)
}
.hold__eyebrow.is-shutter .hold__shutter-slice--mid{
  animation:holdShutterSweepL .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms + 40ms)
}
.hold__eyebrow.is-shutter .hold__shutter-slice--bot{
  animation:holdShutterSweepR .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms + 80ms)
}
@keyframes holdShutterBase{
  to{opacity:1;filter:blur(0);transform:none}
}
@keyframes holdShutterSweepR{
  0%{transform:translateX(-120%);opacity:0}
  35%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}
@keyframes holdShutterSweepL{
  0%{transform:translateX(120%);opacity:0}
  35%{opacity:1}
  100%{transform:translateX(-120%);opacity:0}
}

/* Overrides tipográficos SOLO en #que-es (no contaminar ops/firms/team/sedes) */
.hold .hold__eyebrow{
  align-items:flex-start;justify-content:flex-start;
  gap:clamp(8px, 1.2vh, 14px);
  margin:0;
  text-align:left;
  color:#fff;
  text-shadow:0 2px 32px rgba(0,0,0,.6);
  transform:scale(calc(1.04 - var(--hold-in) * .06));
  transform-origin:left top;
}
.hold .hold__eyebrow::before{
  margin-bottom:clamp(4px, .8vh, 10px);
  box-shadow:0 0 18px rgba(255,102,0,.55);
}
.hold .hold__eyebrow.is-shutter::before{
  animation-name:holdMarkDrawHold;
}
@keyframes holdMarkDrawHold{
  from{width:0;opacity:0}
  to{width:48px;opacity:1}
}
.hold .hold__shutter-line{
  justify-content:flex-start;
  column-gap:.14em;
}
.hold .hold__shutter-line--lead{
  font-size:clamp(11px, 1.2vw, 13px);
  letter-spacing:.36em;
  margin-bottom:clamp(2px, .5vh, 6px);
}
.hold .hold__shutter-line--main{
  font-size:clamp(34px, 5.6vw, 68px);
  letter-spacing:-.048em;
  color:#fff;
  line-height:.9;
}

/* Definición: manifiesto tipográfico con revelación cinética por palabra */
.hold__def{
  position:relative;
  z-index:1;
  margin:0;
  max-width:44ch;
  padding:0 0 clamp(14px, 2vh, 22px);
  text-align:left;
  font:450 clamp(18px, 1.55vw, 23px)/1.44 "Geist Sans",Geist,system-ui,sans-serif;
  letter-spacing:-.018em;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 24px rgba(0,0,0,.65), 0 0 44px rgba(0,0,0,.4);
  text-wrap:pretty;
}
.hold__def::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(180px, 42%);
  height:1px;
  background:rgba(255,255,255,.14);
  background-image:linear-gradient(90deg, var(--orange,#FF6600) 0%, #ff9a4d 100%);
  background-size:calc(var(--hold-body, 0) * 100%) 100%;
  background-repeat:no-repeat;
  box-shadow:0 0 14px rgba(255,102,0,calc(var(--hold-body, 0) * .45));
}
.hold__word{
  display:inline-block;
  opacity:calc(.18 + var(--w, 0) * .82);
  transform:translate3d(0, calc((1 - var(--w, 0)) * 7px), 0);
  filter:blur(calc((1 - var(--w, 0)) * 1.4px));
  color:color-mix(in srgb, #ffffff calc(100% - var(--edge, 0) * 42%), var(--orange, #FF6600) calc(var(--edge, 0) * 42%));
  text-shadow:
    0 2px 20px rgba(0,0,0,.65),
    0 0 calc(var(--edge, 0) * 22px) rgba(255,102,0,calc(var(--edge, 0) * .55));
  will-change:opacity,transform,filter;
}
.hold__word--lead{
  font-weight:600;
  color:color-mix(in srgb, #ffffff calc(100% - var(--edge, 0) * 55%), var(--orange, #FF6600) calc(var(--edge, 0) * 55%));
}

.hold__hint{
  position:absolute;bottom:clamp(18px, 3.5vh, 32px);left:50%;
  transform:translateX(-50%);
  margin:0;z-index:4;
  font:600 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);
  opacity:calc(1 - var(--hold-in) * 1.35);
  pointer-events:none;
}

/* —— Light: vídeo sigue film; placa más clara —— */
[data-theme="light"] .hold,
[data-theme="light"] .hold__pin{background:#0a0c0f}
[data-theme="light"] .hold__poster,
[data-theme="light"] .hold__video{
  filter:grayscale(.35) contrast(1.06) brightness(.82) saturate(.75);
}
[data-theme="light"] .hold__veil{
  background:
    linear-gradient(180deg, rgba(10,12,15,.68) 0%, rgba(10,12,15,.22) 30%, rgba(10,12,15,.2) 52%, rgba(10,12,15,.7) 80%, rgba(10,12,15,.9) 100%),
    linear-gradient(105deg, rgba(10,12,15,.72) 0%, rgba(10,12,15,.28) 48%, rgba(10,12,15,.2) 100%);
}
[data-theme="light"] .hold__shutter-line--main .hold__shutter-slice--mid{color:rgba(26,27,29,.45)}
[data-theme="light"] .hold .hold__shutter-line--main .hold__shutter-slice--mid{color:rgba(255,255,255,.42)}
[data-theme="light"] .hold__wm{color:rgba(255,255,255,.08)}
[data-theme="light"] .hold__def{
  color:rgba(255,255,255,.92);
  background:transparent;
  border:0;
}

/* —— Escalado según resolución y dispositivo —— */

/* Ultrawide / 2K / 4K (>= 1600px) */
@media (min-width:1600px){
  .hold__pin{
    padding:clamp(88px, 11vh, 140px) clamp(64px, 7vw, 140px) clamp(72px, 10vh, 120px);
  }
  .hold .hold__stage{
    width:min(920px, 56vw);
    gap:clamp(32px, 4.8vh, 56px);
  }
  .hold .hold__shutter-line--lead{
    font-size:clamp(13px, 1vw, 16px);
  }
  .hold .hold__shutter-line--main{
    font-size:clamp(54px, 4.8vw, 84px);
  }
  .hold .hold__def{
    max-width:46ch;
    font-size:clamp(21px, 1.42vw, 27px);
    line-height:1.4;
    letter-spacing:-.02em;
  }
}

/* Laptop compacto / Tablet horizontal (901px – 1199px) */
@media (max-width:1199px) and (min-width:901px){
  .hold .hold__stage{
    width:min(680px, 68vw);
    gap:clamp(22px, 3.8vh, 38px);
  }
  .hold .hold__shutter-line--main{
    font-size:clamp(38px, 5.2vw, 56px);
  }
  .hold .hold__def{
    max-width:42ch;
    font-size:clamp(17.5px, 1.65vw, 20.5px);
    line-height:1.44;
  }
}

/* Tablet vertical (768px – 900px) */
@media (max-width:900px) and (min-width:768px){
  .hold .hold__stage{
    width:min(640px, 86vw);
    min-height:0;
    gap:clamp(22px, 3.6vh, 36px);
  }
  .hold .hold__shutter-line--main{
    font-size:clamp(36px, 6vw, 50px);
  }
  .hold .hold__def{
    max-width:40ch;
    font-size:clamp(17px, 2.15vw, 20px);
    line-height:1.46;
  }
}

/* Pantallas bajas en horizontal (portátiles 13"/14" con poca altura) */
@media (min-width:768px) and (max-height:760px){
  .hold__pin{
    padding-top:clamp(56px, 9vh, 76px);
    padding-bottom:clamp(40px, 7vh, 56px);
  }
  .hold .hold__stage{
    gap:clamp(16px, 2.8vh, 26px);
  }
  .hold .hold__shutter-line--main{
    font-size:clamp(32px, 4.6vw, 50px);
  }
  .hold .hold__def{
    max-width:48ch;
    font-size:clamp(16px, 1.35vw, 19px);
    line-height:1.4;
    padding-bottom:12px;
  }
}

/* Móvil (<= 767px) */
@media (max-width:767px){
  .hold{height:165vh}
  .hold__pin{
    padding:
      max(84px, env(safe-area-inset-top, 0px) + 64px)
      20px
      max(88px, env(safe-area-inset-bottom, 0px) + 72px);
    justify-content:center;
  }
  .hold .hold__stage{
    width:min(540px, calc(100vw - 40px));
    min-height:0;
    max-height:none;
    gap:clamp(18px, 3vh, 28px);
    justify-content:center;
    transform:none;
  }
  .hold .hold__eyebrow{
    transform:none;
    width:100%;
    max-width:20ch;
  }
  .hold .hold__ring,
  .hold .hold__glow{display:none}
  .hold .hold__frame{inset:10px 8px;opacity:.35}
  /* Móvil del shutter GLOBAL (compartido): no forzar tipografía de #que-es aquí */
  .hold__shutter-line--main{
    flex-wrap:wrap;
    row-gap:.08em;
    column-gap:0;
    justify-content:center;
    font-size:clamp(24px, 7vw, 36px);
    letter-spacing:-.04em;
    line-height:.95;
  }
  .hold__shutter-line--main .hold__shutter-char{padding:.08em .006em .22em}
  .hold .hold__shutter-line--main{
    justify-content:flex-start;
    font-size:clamp(28px, 7.6vw, 38px);
    line-height:.94;
  }
  .hold .hold__def{
    max-width:36ch;
    font-size:clamp(16px, 4.2vw, 18.5px);
    line-height:1.45;
    letter-spacing:-.015em;
    padding-bottom:14px;
    transform:none;
    color:#fff;
    text-shadow:0 1px 18px rgba(0,0,0,.78), 0 0 28px rgba(0,0,0,.48);
  }
  .hold .hold__word{
    opacity:calc(.22 + var(--w, 0) * .78);
    transform:translate3d(0, calc((1 - var(--w, 0)) * 4px), 0);
    filter:blur(calc((1 - var(--w, 0)) * .8px));
  }
  .hold .hold__wm{display:none!important}
  .hold .hold__poster,
  .hold .hold__video{object-position:center 28%}
  .hold .hold__veil{
    background:
      linear-gradient(180deg, rgba(6,8,10,.72) 0%, rgba(6,8,10,.32) 28%, rgba(6,8,10,.28) 48%, rgba(6,8,10,.76) 78%, rgba(6,8,10,.96) 100%),
      linear-gradient(90deg, rgba(6,8,10,.88) 0%, rgba(6,8,10,.54) 45%, rgba(6,8,10,.24) 100%);
  }
}

/* Móviles pequeños o pantallas bajas (<= 380px o alto <= 680px) */
@media (max-width:380px), (max-width:767px) and (max-height:680px){
  .hold__pin{
    padding:
      max(72px, env(safe-area-inset-top, 0px) + 56px)
      18px
      max(68px, env(safe-area-inset-bottom, 0px) + 56px);
  }
  .hold .hold__stage{
    gap:14px;
  }
  .hold .hold__shutter-line--main{
    font-size:clamp(24px, 6.8vw, 32px);
  }
  .hold .hold__def{
    font-size:clamp(14.5px, 3.8vw, 16.5px);
    line-height:1.42;
  }
}

@media (prefers-reduced-motion:reduce){
  .hold{height:auto}
  .hold__pin{position:relative;height:auto;min-height:100vh;padding:88px 20px 72px}
  .hold__word,.hold__hint,.hold__stage,.hold__eyebrow,.hold__def,.hold__wm,.hold__glow,.hold__ring,.hold__frame{
    opacity:1!important;filter:none!important;transform:none!important
  }
  .hold__eyebrow.is-shutter .hold__shutter-base,
  .hold__eyebrow.is-shutter .hold__shutter-slice{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .hold__eyebrow.is-shutter .hold__shutter-slice{opacity:0!important}
  .hold__eyebrow::before{width:56px}
  .hold__sweep{display:none}
  .hold__video{display:none}
}