/* Empresas del grupo · cabecera tema-aware; el deck 3D sigue en film near-black. */
.firms{
  position:relative;z-index:3;
  color:var(--charcoal,#f2f3f4);
  background:
    radial-gradient(65% 45% at 20% -10%, var(--section-glow,rgba(255,255,255,.04)), transparent 58%),
    linear-gradient(180deg, var(--mist,#0c0e11) 0%, var(--mist,#0c0e11) 100%);
  overflow:hidden;
}
.firms__in{
  position:relative;
  width:min(1180px, 100% - 64px);
  margin:0 auto;
  padding:clamp(56px, 8vh, 96px) 0 clamp(48px, 6vh, 80px);
}

/* Cabecera: misma gramática que operación y reseñas */
.firms__head{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) auto;
  gap:clamp(20px, 4vw, 48px);
  align-items:end;
  margin-bottom:clamp(18px, 2.6vh, 28px);
  padding-bottom:clamp(18px, 2.6vh, 26px);
  border-bottom:1px solid var(--line,rgba(255,255,255,.1));
}
.firms__title{
  margin:0;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px, 1.4vh, 14px);
  max-width:min(100%, 20em);
  font:650 clamp(28px, 4vw, 48px)/1.1em "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.035em;
}
.firms__title::before{
  content:"";display:block;height:2px;background:var(--orange,#FF6600);width:0;
}
.firms__title.is-shutter::before{
  animation:holdMarkDraw .55s cubic-bezier(.16,1,.3,1) forwards;
}
.firms__title .hold__shutter-line{justify-content:flex-start;max-width:100%}
.firms__title .hold__shutter-word{display:inline-flex;flex-wrap:nowrap;align-items:center}
.firms__title .hold__shutter-line--lead{
  font:650 12px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2,rgba(255,255,255,.48));
}
.firms__title .hold__shutter-line--lead .hold__shutter-char{padding:.04em .045em .12em}
.firms__title .hold__shutter-line--main{
  font:650 clamp(26px, 3.6vw, 44px)/1.1em "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.035em;color:var(--charcoal,#f2f3f4);
  flex-wrap:nowrap;max-width:100%;overflow:visible;row-gap:0;
}
.firms__title .hold__shutter-line--main .hold__shutter-char{padding:.06em .012em .12em;line-height:1.1em}
.firms__title.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)
}
.firms__title.is-shutter .hold__shutter-slice--top{
  animation:holdShutterSweepR .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms)
}
.firms__title.is-shutter .hold__shutter-slice--mid{
  animation:holdShutterSweepL .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms + 40ms)
}
.firms__title.is-shutter .hold__shutter-slice--bot{
  animation:holdShutterSweepR .55s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 14ms + 80ms)
}
.firms__lead{
  margin:0;max-width:38ch;
  font:400 15px/1.5 "Geist Sans",system-ui,sans-serif;
  color:var(--muted,rgba(255,255,255,.58));
}
.firms__count{
  margin:0;
  font:650 11px/1.35 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2,rgba(255,255,255,.42));
}

/* Escenario: las tarjetas viven en coordenadas 1280x800 y se escalan */
.firms__deck{position:relative}
.firms__viewport{
  position:relative;
  width:100%;
  height:calc(760px * var(--fs, 1));
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:contain;
}
.firms__stage{
  position:absolute;left:0;top:0;
  width:1280px;height:800px;
  transform-origin:0 0;
  transform:scale(var(--fs, 1));
  pointer-events:none;
}
.firms__rings{
  position:absolute;left:0;top:0;
  overflow:visible;pointer-events:none;
}
.firms__cards{position:absolute;left:0;top:0;width:1280px;height:800px}
.firms__hit{
  position:absolute;inset:0;z-index:30;
  /* Safari iOS: pan nativo + setPointerCapture pelean y recargan la pestaña. */
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

/* Tarjetas con deformación proyectiva */
.firms__card,
.firms__slab{
  position:absolute;left:0;top:0;width:0;height:0;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.firms__slab i{
  display:block;width:1000px;height:600px;
  background:#000103;
}
.firms__shape{
  position:absolute;left:0;top:-48px;
  width:1000px;height:696px;
  background:#020304;
  overflow:hidden;
}
.firms__img{
  position:absolute;left:0;top:48px;
  width:1586px;height:992px;
  transform-origin:0 0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  overflow:hidden;
  filter:grayscale(1) contrast(1.08) brightness(1.12);
}
.firms__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
}
.firms__card-tint{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 68% 72% at 24% 72%, rgba(6,8,10,.78) 0%, rgba(6,8,10,.42) 48%, rgba(6,8,10,0) 82%),
    linear-gradient(192deg, rgba(6,8,10,.0) 0%, rgba(6,8,10,.18) 56%, rgba(6,8,10,.52) 100%);
}
.firms__card-no{
  position:absolute;top:78px;left:44px;
  margin:0;
  font:650 13px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.3em;
  color:rgba(255,255,255,.62);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}

/* Shade global del viewport: apagado. */
.firms__shade{display:none}

/* Bloque editorial sobre el deck: compacto, 100% contenido dentro de la tarjeta activa y sin bloquear .firms__hit */
.firms__panel{
  position:absolute;
  left:clamp(24px, 2.8vw, 38px);
  bottom:clamp(18px, 2.4vh, 28px);
  width:min(460px, 44%);
  z-index:40;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.firms__panel::before{display:none}
.firms__row{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;
}
.firms__dot{
  flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--orange,#FF6600);
}
.firms__mask{position:relative;overflow:hidden;display:block}
.firms__mask > span{
  position:absolute;left:0;top:0;width:100%;
  display:block;white-space:nowrap;
  transform-origin:0 0;
  transition:transform .7s cubic-bezier(.19,1,.22,1), opacity .5s ease;
}
.firms__mask > span.is-leaving{pointer-events:none}
.firms__mask--kicker{
  width:92px;height:14px;
  font:650 11px/14px "Geist Sans",system-ui,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.firms__pill{
  position:relative;display:block;
  height:22px;border-radius:2px;
  background:rgba(255,102,0,.18);
  border:1px solid rgba(255,102,0,.5);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transition:width .6s cubic-bezier(.19,1,.22,1);
}
.firms__pill > span,
.firms__mask--kicker > span{width:max-content;max-width:none}
.firms__pill > span{padding:0 10px}
.firms__pill{
  font:600 10.5px/20px "Geist Sans",system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#ffb888;
}
/* 1. Protagonista absoluto: la marca */
.firms__mask--name{
  height:1.18em;margin:0 0 8px;
  font:700 clamp(36px, 3.8vw, 52px)/1.05em "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.045em;color:#fff;
  text-shadow:
    0 2px 14px rgba(0,0,0,.92),
    0 8px 28px rgba(0,0,0,.68);
}
.firms__mask--name > span{padding-bottom:.1em}
/* 2. Descripción */
.firms__mask--desc{
  height:4.35em;margin:0 0 12px;
  font:450 14px/1.45 "Geist Sans",system-ui,sans-serif;
  color:rgba(248,249,251,.94);
  text-shadow:
    0 1px 4px rgba(0,0,0,.95),
    0 4px 18px rgba(0,0,0,.78);
}
.firms__mask--desc > span{white-space:normal;text-wrap:pretty}
/* 3. Servicios: línea editorial compacta (máximo 6 visibles en desktop para no invadir el escenario; el resto vive en la ficha) */
.firms__services{
  display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;
  gap:4px 0;
  margin:0;
  padding:8px 0 0;
  border-top:1px solid rgba(255,255,255,.18);
  list-style:none;
  min-height:3.4rem;
  box-sizing:border-box;
}
.firms__services li{
  display:inline-flex;align-items:center;
  padding:0;
  background:none;
  border:0;
  font:500 12px/1.4 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.01em;
  color:rgba(240,243,248,.88);
  text-shadow:0 1px 6px rgba(0,0,0,.92);
}
.firms__services li:nth-child(n+7){
  display:none;
}
.firms__services li:not(:last-child):not(:nth-child(6))::after{
  content:"·";
  margin:0 8px;
  font-weight:700;
  color:var(--orange,#FF6600);
}
.firms__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  flex:0 0 auto;
  margin-top:1.15rem;
  padding-top:.2rem;
  min-height:1.35rem;
  pointer-events:auto;
}
/* .firms__go hereda el sistema unificado de /css/holding-cta.css */

/* Flechas */
.firms__nav{
  position:absolute;right:0;top:38%;
  display:flex;flex-direction:column;gap:12px;
  z-index:45;
}
.firms__arrow{
  width:52px;height:52px;border-radius:50%;padding:0;
  display:grid;place-items:center;
  background:rgba(10,13,17,.7);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, background .25s ease;
}
.firms__arrow:hover{transform:scale(1.06);border-color:rgba(255,255,255,.5);background:rgba(16,20,26,.84)}
.firms__arrow:active{transform:scale(.94)}
.firms__arrow svg{width:18px;height:18px;display:block}

/* Miniaturas */
.firms__thumbs{
  position:absolute;right:0;bottom:0;
  display:flex;align-items:flex-end;gap:8px;
  z-index:45;
}
.firms__thumb{
  position:relative;
  width:50px;height:50px;padding:0;
  border:1px solid rgba(255,255,255,.28);
  background-size:cover;background-position:center;
  overflow:hidden;
  filter:grayscale(1) brightness(.7);
  cursor:pointer;
  transition:border-color .3s ease, filter .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.firms__thumb-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
}
.firms__thumb:hover{filter:grayscale(.15) brightness(1);transform:translateY(-3px)}
.firms__thumb.is-active{border-color:var(--orange,#FF6600);filter:grayscale(0) brightness(1)}

/* Cursor custom retirado: molesto y sin valor. Drag sigue con cursor nativo. */
.firms__cursor{display:none!important}
.firms__hit{cursor:grab}
.firms__hit:active{cursor:grabbing}

.firms__hint{
  display:flex;justify-content:space-between;gap:16px;
  margin:clamp(16px, 2.4vh, 24px) 0 0;
  padding-top:clamp(14px, 2vh, 20px);
  border-top:1px solid var(--line-2,rgba(255,255,255,.08));
  font:650 10px/1.4 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2,rgba(255,255,255,.32));
}

.firms.is-pending .firms__viewport,
.firms.is-pending .firms__lead,
.firms.is-pending .firms__count,
.firms.is-pending .firms__hint{opacity:0}
.firms.is-pending .firms__title:not(.is-shutter) .hold__shutter-base{opacity:0}

/* Todo lo que no sea desktop fino: sin deck 3D (Chrome/Brave/Safari móvil).
   El media lean vive en el viewport; .firms__stage se oculta (antes el still
   quedaba dentro y el viewport salía negro). */
.firms--lean .firms__stage,
.firms--lean .firms__rings,
.firms--lean .firms__shade,
.firms--lean .firms__thumbs{display:none!important}
.firms--lean .firms__viewport{
  height:auto;
  min-height:220px;
  aspect-ratio:16 / 10;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  background:#080a0c;
  contain:layout paint;
}
.firms--lean .firms__hit{z-index:4;touch-action:pan-y}
.firms__lean{
  position:absolute;inset:0;
  z-index:2;
  display:block;
  pointer-events:none;
}
.firms__lean-shot{
  position:absolute;inset:0;
  z-index:0;
  background:#0a0c0f center/cover no-repeat;
}
.firms__lean-video{
  position:absolute;inset:0;
  z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  background:#0a0c0f;
}
.firms__lean-video.is-on{opacity:1}
.firms__lean-no{
  position:absolute;top:14px;left:14px;z-index:2;
  margin:0;
  font:650 12px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.28em;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}
.firms--lean .firms__card,
.firms--lean .firms__slab{will-change:auto}

@media (max-width:1100px){
  .firms__panel{width:min(430px, 52%)}
}
@media (max-width:900px){
  .firms{overflow-x:clip}
  .firms__in{width:min(1180px, 100% - 40px)}
  .firms__head{grid-template-columns:1fr}
  .firms__viewport{overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:14px}
  .firms__panel{
    position:static;width:100%;
    margin-top:clamp(18px, 3vh, 26px);
    padding:18px 16px 16px;
    border:1px solid rgba(255,255,255,.1);
    background:#080a0c;
    border-radius:14px;
    text-shadow:none;
    pointer-events:auto;
  }
  .firms__panel::before{display:none}
  .firms__shade{display:none}
  .firms__nav{
    position:static;flex-direction:row;justify-content:flex-end;
    margin-top:14px;
    gap:10px;
  }
  .firms__arrow{width:48px;height:48px}
  .firms__thumbs{position:static;margin-top:14px;flex-wrap:wrap;gap:8px}
  /*
   * Móvil: el panel ya no flota sobre el deck. Las máscaras de altura fija
   * (pensadas para el swap absolute en desktop) cortaban desc y chips a medias.
   * Span en flujo normal → altura natural, texto y etiquetas enteros.
   */
  .firms__mask--name,
  .firms__mask--desc{
    height:auto;
    overflow:visible;
  }
  .firms__mask--name{
    font-size:clamp(28px, 8vw, 40px);
    letter-spacing:-.04em;
  }
  .firms__mask--name > span,
  .firms__mask--desc > span{
    position:static;
    white-space:normal;
    line-height:1.15;
  }
  .firms__mask--desc > span{line-height:1.5}
  .firms__services{
    max-height:none;
    overflow:visible;
    mask-image:none;
    -webkit-mask-image:none;
    min-height:var(--firms-services-h, 10.5rem);
  }
  .firms__actions{
    margin-top:1.85rem;
    padding-top:.45rem;
  }
  .firms__go,.firms__ext{min-height:44px;align-items:center}
  .firms__title{
    max-width:100%;
  }
  .firms__title .hold__shutter-line--main{
    flex-wrap:wrap;
    row-gap:.1em;
    font-size:clamp(22px, 6.2vw, 34px);
    letter-spacing:-.03em;
  }
  .firms__lead{font-size:15px;max-width:38ch}
}

@media (prefers-reduced-motion:reduce){
  .firms__title.is-shutter .hold__shutter-base,
  .firms__title.is-shutter .hold__shutter-slice{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .firms__title::before{width:48px}
  .firms.is-pending .firms__viewport,
  .firms.is-pending .firms__lead,
  .firms.is-pending .firms__count,
  .firms.is-pending .firms__hint{opacity:1}
  .firms__mask > span{transition:none}
  .firms__cursor{display:none}
}