/* ============================================================
   VIDEO CON IA REALISTA
   Galeria de piezas propias con comparador de proceso.
   Depende de studio.css (variables, nav, footer).
   ============================================================ */

.vir-body {
  --vir-line: rgba(245, 240, 235, .12);
  --vir-dim: rgba(245, 240, 235, .62);
  --vir-panel: #0b0b0b;
}

/* Ninguna pieza se muestra por encima de su resolucion nativa: el ancho
   maximo lo fija --vir-max, que el generador escribe pieza a pieza. */
.vir-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, var(--fs-3xl));
  font-weight: 500;
  letter-spacing: .02em;
  margin: 0 0 var(--space-md);
}

.vir-lead {
  max-width: 62ch;
  color: var(--vir-dim);
  font-size: var(--fs-md);
  line-height: 1.65;
  margin: 0 0 var(--space-2xl);
}

.vir-sec { padding: clamp(3.5rem, 9vw, var(--space-4xl)) 0; }
.vir-sec--sym { background: var(--bg-elevated); }
.vir-sec--proc { background: linear-gradient(180deg, #000 0%, #070707 100%); }
.vir-sec--faq { background: var(--bg-elevated); }

.vir-btn {
  display: inline-block;
  font-family: var(--font-cta);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border: 1px solid var(--vir-line);
  border-radius: var(--radius-full);
  color: var(--text);
  text-decoration: none;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.vir-btn:hover { background: rgba(245, 240, 235, .08); border-color: rgba(245, 240, 235, .35); }
.vir-btn--solid { background: var(--accent); border-color: var(--accent); color: #100804; font-weight: 600; }
.vir-btn--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.vir-btn--big { padding: 1.1rem 2.4rem; font-size: var(--fs-base); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.vir-hero {
  position: relative;
  min-height: min(92svh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.vir-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vir-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.92) 100%);
}
.vir-hero__inner {
  position: relative;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
  padding-top: 8rem;
}
.vir-hero__kicker {
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-md);
}
.vir-hero__h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-lg);
  max-width: 26ch;
  text-wrap: balance;
}
.vir-hero__h1 span { display: block; }
.vir-hero__h1 span:last-child { color: var(--gold); }
.vir-hero__sub {
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: rgba(245, 240, 235, .82);
  margin: 0 0 var(--space-xl);
}
.vir-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ------------------------------------------------------------
   REVELACION
   ------------------------------------------------------------ */
.vir-reveal {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.vir-reveal__h {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.5vw, var(--fs-3xl));
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}
.vir-reveal__p { color: var(--vir-dim); margin: 0 auto var(--space-2xl); max-width: 62ch; }

.vir-stats {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 6vw, 4rem);
}
.vir-stats b {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}
.vir-stats span {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vir-authorship {
  max-width: 68ch;
  margin: 0 auto;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

/* ------------------------------------------------------------
   SINTOMAS
   ------------------------------------------------------------ */
.vir-sym-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: sym;
}
.vir-sym {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  counter-increment: sym;
}
.vir-sym::before {
  content: "0" counter(sym);
  display: block;
  font-family: var(--font-heading);
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: .15em;
  margin-bottom: var(--space-sm);
}
.vir-sym__h { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-lg); margin: 0 0 var(--space-sm); }
.vir-sym__p { color: var(--vir-dim); font-size: var(--fs-sm); line-height: 1.7; margin: 0 0 var(--space-md); }
.vir-sym__link {
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.vir-sym__link:hover { border-bottom-color: var(--gold); }

/* ------------------------------------------------------------
   FILTROS Y REJILLA
   ------------------------------------------------------------ */
.vir-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.vir-filter {
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--vir-line);
  background: transparent;
  color: var(--vir-dim);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.vir-filter:hover { color: var(--text); border-color: rgba(245,240,235,.4); }
.vir-filter.is-on { background: var(--text); border-color: var(--text); color: #000; }

.vir-live {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-height: 1.2em;
  margin: 0 0 var(--space-lg);
}

.vir-grid {
  columns: 20rem 3;
  column-gap: var(--space-lg);
}
.vir-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-xl);
}
.vir-card[hidden] { display: none; }
.vir-card__btn {
  display: block;
  width: 100%;
  max-width: var(--vir-max, 640px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.vir-card__media {
  display: block;
  position: relative;
  aspect-ratio: var(--vir-ratio, 16 / 9);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #080808;
  border: 1px solid var(--border);
}
.vir-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.vir-card__btn:hover .vir-card__video { transform: scale(1.03); }
.vir-card__body { display: block; padding: var(--space-md) 0 0; }
.vir-card__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lg);
  margin-bottom: .35rem;
}
.vir-card__read {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--vir-dim);
}

/* ------------------------------------------------------------
   PROCESO
   ------------------------------------------------------------ */
.vir-method { margin-bottom: clamp(3rem, 7vw, 5rem); }
.vir-method__h {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  margin: 0 0 var(--space-xs);
  color: var(--gold);
}
.vir-method__p { color: var(--vir-dim); max-width: 60ch; margin: 0 0 var(--space-xl); }

.vir-comp {
  margin: 0 auto var(--space-2xl);
  max-width: var(--vir-max, 1152px);
}
.vir-comp__stage {
  position: relative;
  aspect-ratio: var(--vir-ratio, 16 / 9);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #080808;
  border: 1px solid var(--border);
  touch-action: pan-y;
  cursor: ew-resize;
}
.vir-comp__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El lado del resultado se recorta segun la posicion del tirador. */
.vir-comp__v--out { clip-path: inset(0 0 0 var(--vir-split, 50%)); }

.vir-comp__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--vir-split, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(245, 240, 235, .9);
  box-shadow: 0 0 12px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.vir-comp__bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(245, 240, 235, .9);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}
.vir-comp__tag {
  position: absolute;
  top: var(--space-md);
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, .6);
  color: var(--text);
  pointer-events: none;
}
.vir-comp__tag--in { left: var(--space-md); }
.vir-comp__tag--out { right: var(--space-md); }

/* El tirador real es un range: el raton lo mueve, el teclado tambien. */
.vir-comp__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.vir-comp__range:focus-visible { opacity: .001; outline: none; }
.vir-comp__stage:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }

.vir-comp__play {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 240, 235, .4);
  background: rgba(0, 0, 0, .6);
  color: var(--text);
  cursor: pointer;
  display: none;
}
.vir-comp.is-manual .vir-comp__play { display: block; }

.vir-comp__cap { padding-top: var(--space-md); }
.vir-comp__title, .vir-proc__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  margin: 0 0 var(--space-sm);
}
.vir-comp__title { font-size: var(--fs-lg); margin-bottom: .35rem; }
.vir-comp__read, .vir-proc__read {
  color: var(--vir-dim);
  font-size: var(--fs-base);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0 0 var(--space-md);
}
.vir-comp__read { font-size: var(--fs-sm); line-height: 1.65; }
.vir-comp__sides, .vir-proc__sides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}
.vir-comp__sides b, .vir-proc__sides b { color: var(--gold); font-weight: 600; }
.vir-proc__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  margin: var(--space-sm) 0 0;
}

/* Pieza de proceso: media a un lado, texto al otro, ambos arrancando a la
   misma altura para que la fila se lea alineada. */
.vir-proc {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
  margin: 0 0 var(--space-4xl);
}
@media (min-width: 60rem) {
  .vir-proc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.vir-proc__media { display: flex; justify-content: center; align-items: center; }
.vir-proc__stack {
  position: relative;
  width: 100%;
  max-width: var(--vir-max, 640px);
  aspect-ratio: var(--vir-ratio, 16 / 9);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #080808;
}
.vir-proc__v { width: 100%; height: 100%; object-fit: contain; display: block; background: #080808; }
.vir-proc__text { padding-top: 0; }

/* ------------------------------------------------------------
   ANALISIS LARGO
   ------------------------------------------------------------ */
.vir-long {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 62rem) {
  .vir-long { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .vir-long__media { position: sticky; top: 6rem; }
}
.vir-long__v {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: block;
  background: #080808;
}
.vir-long__h {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-md);
}
.vir-long__text p {
  color: var(--vir-dim);
  line-height: 1.75;
  margin: 0 0 var(--space-md);
  max-width: 68ch;
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.vir-faq {
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
}
.vir-faq summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}
.vir-faq summary::-webkit-details-marker { display: none; }
.vir-faq summary::after { content: "+"; color: var(--accent); font-size: var(--fs-xl); line-height: 1; }
.vir-faq[open] summary::after { content: "\2212"; }
.vir-faq__a p {
  color: var(--vir-dim);
  line-height: 1.75;
  max-width: 68ch;
  margin: var(--space-md) 0 0;
}

/* ------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------ */
.vir-sec--close { text-align: center; border-top: 1px solid var(--border); }
.vir-sec--close .vir-lead,
.vir-sec--close .vir-h2 { margin-left: auto; margin-right: auto; }
.vir-sec--close .vir-form__legal { text-align: center; }
.vir-close__h {
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-4xl) 0 var(--space-lg);
}
.vir-close__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}
.vir-close__links a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--vir-line); font-size: var(--fs-sm); }
.vir-close__links a:hover { border-bottom-color: var(--gold); color: var(--gold); }

/* ------------------------------------------------------------
   FICHA AMPLIADA
   ------------------------------------------------------------ */
.vir-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .93);
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}
.vir-lb[hidden] { display: none; }
.vir-lb__panel {
  position: relative;
  width: min(100%, 62rem);
  max-height: 92svh;
  overflow: auto;
  background: var(--vir-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.vir-lb__stage {
  display: grid;
  place-items: center;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vir-lb__stage video {
  display: block;
  max-width: min(100%, var(--vir-nat, 100%));
  height: auto;
}
.vir-lb__close, .vir-lb__nav {
  position: absolute;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--vir-line);
  background: rgba(0, 0, 0, .7);
  color: var(--text);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.vir-lb__close { top: var(--space-md); right: var(--space-md); }
.vir-lb__nav { top: 50%; transform: translateY(-50%); }
.vir-lb__nav--prev { left: calc(var(--space-md) * -0.25); }
.vir-lb__nav--next { right: calc(var(--space-md) * -0.25); }
.vir-lb__meta { padding-top: var(--space-lg); }
.vir-lb__title { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-xl); margin: 0 0 var(--space-sm); }
.vir-lb__read { color: var(--vir-dim); line-height: 1.7; margin: 0 0 var(--space-md); max-width: 66ch; }
.vir-lb__foot { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.vir-lb__sound {
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--vir-line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.vir-lb__sound:hover { border-color: var(--gold); color: var(--gold); }
.vir-lb__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vir-card__video, .vir-comp__v, .vir-proc__v, .vir-long__v { transition: none; }
  .vir-card__btn:hover .vir-card__video { transform: none; }
  .vir-hero__video { display: none; }
  .vir-hero { background: #000 center / cover no-repeat; }
}

/* ------------------------------------------------------------
   FORMULARIO DE CIERRE
   ------------------------------------------------------------ */
.vir-form {
  max-width: 46rem;
  margin: 0 auto var(--space-lg);
  text-align: left;
}
.vir-form__row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .vir-form__row { grid-template-columns: 1fr 1fr; }
}
.vir-form .form-group { margin-bottom: var(--space-md); }
.vir-form label {
  display: block;
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
}
.vir-form .form-input,
.vir-form .form-select {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--vir-line);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.vir-form .form-input:focus,
.vir-form .form-select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.vir-form textarea.form-input { resize: vertical; min-height: 6rem; }
.vir-form .form-error {
  display: none;
  color: var(--accent);
  font-size: var(--fs-xs);
  margin: .35rem 0 0;
}
.vir-form .form-group.has-error .form-error { display: block; }
.vir-form .form-group.has-error .form-input { border-color: var(--accent); }
.vir-form button[type="submit"] { margin-top: var(--space-sm); border: 0; cursor: pointer; }
.vir-form__legal {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: var(--space-md) 0 0;
}
/* trampa para robots: fuera de pantalla, nunca oculta con display none */
.vir-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.vir-sec--close .form-success {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-lg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  color: var(--text);
}

/* ------------------------------------------------------------
   FICHA A PANTALLA COMPLETA
   ------------------------------------------------------------ */
.vir-lb__panel:fullscreen {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000;
  padding: var(--space-xl) var(--space-2xl);
}
.vir-lb__panel:fullscreen .vir-lb__stage { flex: 1; min-height: 0; }
.vir-lb__panel:fullscreen .vir-lb__stage video {
  max-height: 100%;
  max-width: 100%;
  /* en pantalla completa manda el alto de la pantalla, no el nativo */
  width: auto;
  height: auto;
  object-fit: contain;
}
.vir-lb__panel:fullscreen .vir-lb__meta { flex: 0 0 auto; max-width: 70rem; margin: 0 auto; }

/* El analisis reproduce la pieza entera: hace falta control del usuario */
.vir-long__dur {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: var(--space-sm) 0 0;
}
.vir-long__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-cta);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.vir-long__link:hover { border-bottom-color: var(--gold); }