/* ============================================================================
   DÍAZ ARIAS & ASOCIADOS — v2 "El montaje"
   Capa que se carga DESPUÉS de diaz.css. Sólo contiene lo que cambia:
   una portada cinematográfica de tres tomas y el movimiento ambiental.
   ========================================================================== */

:root {
  --shot-dur: 6200ms;   /* duración de cada toma; el JS lee este valor */
}

/* --- 1. Escenario ------------------------------------------------------- */

.hero2 {
  position: relative;
  min-height: clamp(660px, 96svh, 1000px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero2__stage {
  position: absolute;
  inset: 0;
  z-index: -4;
  will-change: transform;
}

/* Cada toma vive en su propia capa y se funde con la siguiente */
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease);
}
.shot.is-live { opacity: 1; }

.shot video,
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El archivo ya viene en gris y con contraste; aquí sólo se expone.
     Más luz que en la v1: el movimiento tiene que verse. */
  filter: brightness(0.66) contrast(1.06);
  transform: scale(1.02);
}

/* Ken Burns permanente: aunque la toma fuera estática, el encuadre respira */
.shot.is-live video,
.shot.is-live img {
  animation: kenburns var(--shot-dur) linear forwards;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -0.8%, 0); }
}
.shot:nth-child(2).is-live video { animation-name: kenburns-b; }
@keyframes kenburns-b {
  from { transform: scale(1.13) translate3d(1%, 0.6%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* Duotono: el oro de la marca sólo sobre la luminancia */
.hero2__tint {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--gold);
  mix-blend-mode: color;
  opacity: 0.58;
  pointer-events: none;
}

/* Grano de película. Es lo que hace que la portada nunca se vea congelada. */
.hero2__grain {
  position: absolute;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Velo direccional: oscurece sólo donde va el texto y deja respirar la derecha */
.hero2__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.72) 34%, rgba(11,11,13,.14) 66%, rgba(11,11,13,.30) 100%),
    linear-gradient(180deg, rgba(11,11,13,.80) 0%, transparent 22%, transparent 58%, rgba(11,11,13,.88) 92%, var(--ink) 100%);
}

/* En pantallas angostas el texto ocupa todo el ancho, así que el velo lateral
   apagaría la toma entera. Ahí se cambia por uno vertical y más ligero. */
@media (max-width: 860px) {
  .hero2__scrim {
    background:
      linear-gradient(180deg, rgba(11,11,13,.78) 0%, rgba(11,11,13,.30) 26%, rgba(11,11,13,.52) 56%, rgba(11,11,13,.90) 88%, var(--ink) 100%);
  }
  .shot video,
  .shot img { filter: brightness(0.78) contrast(1.04); }
}

/* --- 2. Contenido de portada -------------------------------------------- */

.hero2__body {
  padding-top: clamp(7.5rem, 15vh, 11rem);
  padding-bottom: clamp(1.75rem, 3.5vh, 3rem);
  will-change: transform;
}

/* Antetítulo que cambia con cada toma */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font: 500 var(--t-label)/1 var(--ui);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 1em;
}
.kicker::before {
  content: "";
  width: clamp(1.75rem, 4vw, 3.25rem);
  height: 1px;
  background: var(--gold);
  flex: none;
}
.kicker__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.kicker__word > span {
  display: inline-block;
  transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out);
}
.kicker__word.is-out > span { transform: translateY(-105%); opacity: 0; }
.kicker__word.is-in > span  { transform: translateY(105%);  opacity: 0; transition: none; }

/* Titular con revelado línea por línea */
.hero2 h1 {
  font-size: clamp(2.6rem, 6.1vw, 5.75rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.85rem);
}
.hero2 h1 em { font-style: italic; font-weight: 300; color: var(--gold); }

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.line > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1000ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.hero2.is-ready .line > span { transform: translateY(0); }

.hero2__rule {
  width: clamp(96px, 13vw, 168px);
  height: 30px;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  background-image: repeating-linear-gradient(-45deg, var(--gold) 0 3px, transparent 3px 11px);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) 620ms;
}
.hero2.is-ready .hero2__rule { transform: scaleX(1); }

.hero2__lede,
.hero2__actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.hero2.is-ready .hero2__lede,
.hero2.is-ready .hero2__actions { opacity: 1; transform: none; }

.hero2__lede {
  font-size: var(--t-body-l);
  color: var(--bone);
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  text-shadow: 0 1px 24px rgba(11, 11, 13, 0.85);
}

.hero2__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- 3. Selector de tomas ----------------------------------------------- */

.reel {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
.reel__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: center;
}

.reel__shot {
  appearance: none;
  background: none;
  border: 0;
  padding: 1.1rem 0 1.35rem;
  text-align: left;
  cursor: pointer;
  color: var(--bone-3);
  font: 500 var(--t-label)/1.4 var(--ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: grid;
  gap: 0.85rem;
  align-self: stretch;
  transition: color var(--dur) var(--ease);
}
.reel__shot:hover,
.reel__shot[aria-current="true"] { color: var(--bone); }

/* Control explícito: cualquiera puede detener el montaje */
.reel__toggle {
  appearance: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--bone-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.reel__toggle:hover { color: var(--gold); border-color: var(--gold); }
.reel__toggle .i-play { display: none; }
.reel__toggle[aria-pressed="true"] .i-pause { display: none; }
.reel__toggle[aria-pressed="true"] .i-play { display: block; }
.reel__toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* Con el montaje detenido, la barra se congela donde iba (el .reel vive dentro del hero) */
.hero2.is-paused .track::after { animation-play-state: paused; }

.reel .track {
  position: relative;
  height: 2px;
  background: var(--line-2);
  overflow: hidden;
}
.reel .track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
/* La barra se llena durante la toma activa: movimiento constante y honesto */
.reel__shot[aria-current="true"] .track::after {
  animation: fill var(--shot-dur) linear forwards;
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reel .n {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  margin-right: 0.6rem;
}

@media (max-width: 640px) {
  .reel__inner { gap: 0.55rem; }
  .reel__shot { font-size: 0.5625rem; letter-spacing: 0.1em; padding-bottom: 1rem; }
  .reel .label-txt { display: none; }
  .reel__toggle { width: 36px; height: 36px; }
}

/* --- 4. Marquesina de presencia ----------------------------------------- */

.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink-1);
  padding-block: 1.15rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__row {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}
.ticker:hover .ticker__row { animation-play-state: paused; }
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ticker__group { display: flex; align-items: center; }
.ticker__group span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font: 500 0.8125rem/1 var(--ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-2);
  white-space: nowrap;
}
.ticker__group span::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* --- 5. Cifras de portada ----------------------------------------------- */

.facts2 { border-top: 1px solid var(--line); }
.facts2 ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts2 li {
  padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(0.5rem, 1.5vw, 1.25rem);
  border-left: 1px solid var(--line);
}
.facts2 li:first-child { border-left: 0; padding-left: 0; }
.facts2 .n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.facts2 .k {
  display: block;
  margin-top: 0.5rem;
  font: 400 var(--t-label)/1.4 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}
@media (max-width: 700px) {
  .facts2 ul { grid-template-columns: repeat(2, 1fr); }
  .facts2 li:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts2 li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* --- 6. Cabecera sobre la portada --------------------------------------- */

/* En v2 la portada llega hasta arriba, así que los enlaces del menú se aclaran
   para leerse sobre la toma. El botón queda fuera: su texto va en tinta sobre
   el oro, y aclararlo lo dejaba en 1.8:1 de contraste. */
.site-header:not(.is-stuck) .nav a:not(.btn) { color: var(--bone); }

/* --- 7. Movimiento reducido --------------------------------------------- */

/* Se apaga el movimiento que desplaza cosas en pantalla —zoom, parallax, grano,
   marquesina, revelados—. El montaje sigue: fundir dos capas por opacidad no
   mueve nada, y siempre queda el botón de pausa. */
@media (prefers-reduced-motion: reduce) {
  .shot.is-live video,
  .shot.is-live img { animation: none; transform: scale(1.02); }
  .hero2__grain { animation: none; opacity: 0.05; }
  /* La marquesina se queda quieta: una sola línea de plazas que se desvanece
     en el borde, en vez de un bucle en movimiento. */
  .ticker__row { animation: none; }
  .line > span { transform: none !important; }
  .hero2__rule { transform: scaleX(1) !important; }
  .hero2__lede,
  .hero2__actions { opacity: 1 !important; transform: none !important; }
  .kicker__word > span { transition: none !important; transform: none !important; opacity: 1 !important; }
  /* La barra de progreso sí se conserva: mide 2 px y es el indicador del montaje. */
  .reel__shot[aria-current="true"] .track::after {
    animation: fill var(--shot-dur) linear forwards !important;
  }
}