/* ═══════════════════════════════════════════════════════════
   VWT · CORPORATIVO · el reloj
   La página es un reloj. Abre con la hora real de Mendoza a
   tamaño de pantalla, y después una agenda de dos días que corre
   en horizontal mientras bajás. Blanco dominante: la contracara
   del negro de Eventos. Sin imágenes.
   Se respetan: navbar, footer, Poppins y los colores del sitio.
   ═══════════════════════════════════════════════════════════ */

.cx{
  --cx-pad: clamp(1.4rem, 5vw, 6rem);
  --cx-max: calc(1400px * var(--k, 1));
  --cx-sec: clamp(5rem, calc(12 * var(--1vh)), 9rem);
  --cx-t: .9s;
  --cx-e: cubic-bezier(.22,1,.36,1);
  --cx-acc: #AC3749;
  --cx-vino: #6B1D2A;
  --cx-negro: #0B0708;
  --cx-blanco: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  background: var(--cx-blanco); color: var(--cx-negro);
}
.cx-in{ max-width: var(--cx-max); margin-inline: auto; padding-inline: var(--cx-pad) }
.cx-rv{ opacity: 0; transform: translateY(26px); transition: opacity var(--cx-t) var(--cx-e), transform var(--cx-t) var(--cx-e) }
.cx-rv[data-d="1"]{ transition-delay: .08s } .cx-rv[data-d="2"]{ transition-delay: .16s } .cx-rv[data-d="3"]{ transition-delay: .24s }
.cx-rv.on{ opacity: 1; transform: none }

/* ═══════════════════════════════════════════════════════════
   BLOQUES
   ═══════════════════════════════════════════════════════════ */
.cx-sec{ position: relative; padding: var(--cx-sec) 0 }
.cx-blanco{ background: var(--cx-blanco); color: var(--cx-negro) }
.cx-negro{ background: var(--cx-negro); color: #fff }
.cx-bordo{ background: var(--cx-vino); color: #fff }
.cx-h{ margin: 0; font-size: calc(134.4px * var(--k, 1)); font-weight: 700; letter-spacing: -.065em; line-height: .9; max-width: 14ch }
.cx-p{ margin: clamp(1.4rem,3vw,2.2rem) 0 0; max-width: 46ch; font-size: calc(24.0px * var(--k, 1)); line-height: 1.5; font-weight: 300; letter-spacing: -.015em }
.cx-blanco .cx-p{ color: #3A3436 }
.cx-negro .cx-p, .cx-bordo .cx-p{ color: rgba(255,255,255,.82) }
.cx-k{ margin: 0 0 clamp(1rem,2vw,1.4rem); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-acc) }
.cx-negro .cx-k{ color: rgba(255,255,255,.7) }

/* ── programas: lista tipográfica ── */
.cx-progs{ list-style: none; margin: clamp(3rem,6vw,5rem) 0 0; padding: 0; border-top: 2px solid var(--cx-negro) }
.cx-prog{
  display: grid; grid-template-columns: clamp(3rem,5vw,5rem) minmax(0,1fr) minmax(0,.9fr) auto;
  column-gap: calc(32.0px * var(--k, 1)); align-items: baseline;
  padding: clamp(1.2rem,2.6vw,2rem) 0; border-bottom: 2px solid var(--cx-negro);
}
.cx-prog-n{ font-size: .9rem; font-weight: 700; color: var(--cx-acc) }
.cx-prog-t{ font-size: calc(54.4px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .95 }
.cx-prog-f{ font-size: calc(19.2px * var(--k, 1)); font-weight: 300; color: #3A3436 }
.cx-prog-d{ font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-acc); white-space: nowrap }

/* ── declaración ── */
.cx-decl{ margin: 0; font-size: calc(121.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.065em; line-height: .92; color: #fff }
.cx-decl + .cx-decl{ margin-top: calc(48.0px * var(--k, 1))}
.cx-decl b{ display: block; font-size: 1.6em; line-height: .8; color: var(--cx-negro); font-variant-numeric: tabular-nums }

/* ── lo que resolvemos ── */
.cx-res{ list-style: none; margin: clamp(3rem,6vw,5rem) 0 0; padding: 0; border-top: 2px solid var(--cx-negro) }
.cx-res li{
  display: grid; grid-template-columns: clamp(3rem,5vw,5rem) minmax(0,.5fr) minmax(0,.5fr); column-gap: calc(32.0px * var(--k, 1)); align-items: baseline;
  padding: clamp(1.2rem,2.4vw,1.8rem) 0; border-bottom: 2px solid var(--cx-negro);
}
.cx-res-n{ font-size: .9rem; font-weight: 700; color: var(--cx-acc) }
.cx-res b{ font-size: calc(44.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: 1 }
.cx-res i{ font-style: normal; font-size: calc(18.4px * var(--k, 1)); line-height: 1.5; font-weight: 300; color: #3A3436 }
.cx-faq{ margin-top: calc(80.0px * var(--k, 1))}
.cx-q{ border-bottom: 1px solid rgba(11,7,8,.2) }
.cx-q summary{ display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none; padding: clamp(1.1rem,2vw,1.5rem) 0; font-size: calc(24.0px * var(--k, 1)); font-weight: 600; letter-spacing: -.03em }
.cx-q summary::-webkit-details-marker{ display: none }
.cx-q summary span{ flex: 1 1 auto }
.cx-q summary i{ position: relative; flex: 0 0 auto; width: 22px; height: 22px }
.cx-q summary i::before, .cx-q summary i::after{ content: ""; position: absolute; top: 50%; left: 50%; background: var(--cx-negro); transform: translate(-50%,-50%); transition: opacity var(--cx-t) var(--cx-e) }
.cx-q summary i::before{ width: 22px; height: 2px }
.cx-q summary i::after{ width: 2px; height: 22px }
.cx-q[open] summary i::after{ opacity: 0 }
.cx-q[open] summary{ color: var(--cx-acc) }
.cx-q-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cx-t) var(--cx-e) }
.cx-q[open] .cx-q-r{ grid-template-rows: 1fr }
.cx-q-r > div{ overflow: hidden }
.cx-q-r p{ margin: 0; padding: 0 3rem 1.4rem 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; font-weight: 300; color: #3A3436 }

/* ── cierre: dos palabras enormes, como Eventos ── */
.cx-fin{ padding-bottom: calc(var(--cx-sec) * 1.2) }
.cx-cta{
  display: flex; align-items: baseline; gap: .3em; text-decoration: none;
  color: #fff !important; -webkit-text-fill-color: #fff;
  font-size: calc(200.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.07em; line-height: .9;
}
.cx-cta i{ font-style: normal; font-size: .55em; transition: transform .8s var(--cx-e) }
.cx-cta:hover{ color: var(--cx-acc) !important; -webkit-text-fill-color: var(--cx-acc) }
.cx-cta:hover i{ transform: translateX(.3em) }

/* títulos por líneas enmascaradas */
.cx-ln{ display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.26em }
.cx-ln-in{ display: block; transform: translateY(110%); transition: transform 1.1s var(--cx-e) }
.on > .cx-ln > .cx-ln-in{ transform: none }
.cx-h, .cx-decl{ opacity: 1 !important; transform: none !important }

.cx-progs > li.cx-rv.on, .cx-res > li.cx-rv.on{ transform: none }

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: calc(1024px * var(--k, 1))){
  .cx-prog{ grid-template-columns: clamp(2.6rem,6vw,3.6rem) 1fr auto; row-gap: .4rem }
  .cx-prog-f{ grid-column: 2 / -1 }
  .cx-res li{ grid-template-columns: clamp(2.6rem,6vw,3.6rem) 1fr; row-gap: .4rem }
  .cx-res i{ grid-column: 2 }
}
@media (max-width: 700px){
  .cx-q-r{ transition: none }
}
@media (prefers-reduced-motion: reduce){
  .cx-rv{ opacity: 1; transform: none; transition: none }
  .cx-ln-in{ transform: none; transition: none }
  .cx-hero-mas i{ animation: none }
  .cx-fl{ transition: none }
}


/* ═══════════════════════════════════════════════════════════
   1 · LA IDEA · la frase, y la hora de Mendoza como firma
   La frase entra línea por línea desde una máscara. Debajo, el
   panel: cuatro cajas negras donde cada dígito es un rollo que
   sube y baja como un cuentakilómetros. Al abrir, los rollos
   giran varias vueltas y frenan en la hora real de Mendoza.
   ═══════════════════════════════════════════════════════════ */
.cx-hero{
  min-height: calc(100 * var(--1vh)); display: flex; align-items: center;
  padding: calc(var(--nav-h, 62px) + 2rem) 0 clamp(3rem,calc(6 * var(--1vh)),5rem); background: var(--cx-blanco);
}
.cx-idea{
  margin: 0; font-size: calc(192.0px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.075em; line-height: .86; max-width: 9ch;
}
.cx-idea em{ font-style: normal; color: var(--cx-acc) }
.cx-idea .cx-ln-in{ transform: translateY(110%); transition: transform 1.1s var(--cx-e) }
.cx-idea.on .cx-ln-in{ transform: none }
.cx-hero-p{ margin: clamp(1.6rem,3vw,2.4rem) 0 0; max-width: 46ch; font-size: calc(22.4px * var(--k, 1)); line-height: 1.5; font-weight: 300; letter-spacing: -.015em; color: #3A3436 }

.cx-panel{ margin-top: calc(64.0px * var(--k, 1)); display: inline-block }
.cx-panel-k{ margin: 0 0 .8rem; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cx-acc) }
.cx-panel-n{ margin: .8rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7F6E73 }
.cx-reloj{
  margin: 0; display: flex; align-items: center; gap: calc(9.6px * var(--k, 1));
  font-size: calc(134.4px * var(--k, 1)); font-weight: 700; line-height: 1;
}
.cx-fl{
  display: block; width: .78em; height: 1.02em; overflow: hidden; position: relative;
  background: var(--cx-negro); color: #fff; border-radius: .06em;
}
.cx-fl::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.14); pointer-events: none }
.cx-fl-rollo{
  display: block; will-change: transform;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.cx-fl-rollo b{ display: grid; place-items: center; height: 1.02em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums }
.cx-reloj i{ font-style: normal; color: var(--cx-acc); line-height: 1; margin: 0 .02em; transform: translateY(-.06em); animation: cxLate 1s steps(1) infinite }
@keyframes cxLate{ 50%{ opacity: .15 } }

/* ═══════════════════════════════════════════════════════════
   2 · OFICINA / MENDOZA · los pares que se enfrentan
   Negro. Cada par entra desde los dos lados: la oficina desde la
   izquierda, gris y tachada; Mendoza desde la derecha, blanca y
   grande. En el medio, una línea bordó que se abre.
   ═══════════════════════════════════════════════════════════ */
.cx-vs{ background: var(--cx-negro); color: #fff; padding: var(--cx-sec) 0 }
.cx-vs-hd{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: calc(54.4px * var(--k, 1)); padding-bottom: calc(25.6px * var(--k, 1)); border-bottom: 2px solid rgba(255,255,255,.35) }
.cx-vs-l, .cx-vs-r{ margin: 0; font-size: calc(70.4px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .95 }
.cx-vs-l{ color: rgba(255,255,255,.45) }
.cx-vs-r{ color: var(--cx-acc); text-align: right }
.cx-vs-l-lista{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14) }
.cx-vs-i{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(48.0px * var(--k, 1));
  padding: clamp(1.4rem,3.2vw,2.8rem) 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.cx-vs-a, .cx-vs-b{
  font-weight: 700; letter-spacing: -.05em; line-height: .95;
  opacity: 0; transition: opacity 1s var(--cx-e), transform 1s var(--cx-e), color 1s var(--cx-e);
}
.cx-vs-a{
  font-size: calc(38.4px * var(--k, 1)); color: rgba(255,255,255,.4); text-decoration: line-through;
  text-decoration-color: var(--cx-acc); text-decoration-thickness: .06em; transform: translateX(-40px);
}
.cx-vs-b{ font-size: calc(70.4px * var(--k, 1)); color: #fff; text-align: right; transform: translateX(40px) }
.cx-vs-x{ width: 1px; height: 0; background: var(--cx-acc); transition: height 1s var(--cx-e) .2s; align-self: stretch; justify-self: center; max-height: 100% }
.cx-vs-i.on .cx-vs-a, .cx-vs-i.on .cx-vs-b{ opacity: 1; transform: none }
.cx-vs-i.on .cx-vs-x{ height: 100% }
@media (max-width: 700px){
  .cx-vs-i{ grid-template-columns: 1fr; gap: .4rem }
  .cx-vs-x{ display: none }
  .cx-vs-b{ text-align: left; transform: translateX(-40px) }
  .cx-vs-hd{ grid-template-columns: 1fr }
  .cx-vs-r{ text-align: left }
}
@media (prefers-reduced-motion: reduce){
  .cx-vs-a, .cx-vs-b{ opacity: 1; transform: none; transition: none }
  .cx-vs-x{ height: 100%; transition: none }
  .cx-fl-rollo{ transition: none }
  .cx-reloj i{ animation: none }
  .cx-idea .cx-ln-in{ transform: none; transition: none }
}

/* ═══════════════════════════════════════════════════════════
   ANIMACIONES PREMIUM
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · la frase se escribe sola, letra por letra ── */
.cx-idea .cx-ln{ overflow: visible; padding-bottom: 0; margin-bottom: 0 }
.cx-idea .cx-ln-l{ display: inline-block; opacity: 0; transform: translateY(.12em); transition: opacity .18s ease-out, transform .32s var(--cx-e) }
.cx-idea .cx-ln-l.on{ opacity: 1; transform: none }
.cx-cursor{ display: inline-block; width: .06em; height: .8em; background: var(--cx-acc); margin-left: .06em; vertical-align: -.02em; animation: cxLate 1s steps(1) infinite }
.cx-cursor.fin{ display: none }

/* ── 2 · parallax: los títulos se mueven a otra velocidad que el fondo ──
   Cada bloque tiene capas a distinta profundidad: el título grande
   avanza más lento que el scroll y el texto de apoyo apenas, así
   la página gana profundidad al bajar. */
.cx-vs, .cx-sec{ position: relative; overflow: hidden }
.cx-px{ will-change: transform }
/* ── 3 · el cierre: magnético, relleno de bordó y flecha que empuja ── */
.cx-mag{ will-change: transform; transition: transform .6s var(--cx-e) }
.cx-cta{ line-height: 1.1; padding-bottom: .1em }
.cx-cta-t{
  position: relative; display: inline-block; line-height: inherit;
  color: #fff; -webkit-text-fill-color: #fff;
}
/* la capa de relleno mide lo mismo que el texto y deja aire abajo,
   así la p de WhatsApp y la l de Mail se pintan enteras */
.cx-cta-t::after{
  content: attr(data-t); position: absolute; left: 0; top: 0; right: 0; bottom: 0; white-space: nowrap;
  line-height: inherit; padding-bottom: .2em;
  color: var(--cx-acc); -webkit-text-fill-color: var(--cx-acc);
  clip-path: inset(-.1em 100% -.3em 0); transition: clip-path .9s var(--cx-e);
}
.cx-cta:hover .cx-cta-t::after{ clip-path: inset(-.1em -.1em -.3em 0) }
.cx-cta:hover{ color: #fff !important; -webkit-text-fill-color: #fff }
.cx-cta i{ transition: transform .8s var(--cx-e), color .6s var(--cx-e) }
.cx-cta:hover i{ transform: translateX(.35em) scale(1.25); color: var(--cx-acc) }

/* ── 4 · Oficina / Mendoza: en cascada, la línea se dibuja, el tachado se tacha en vivo ── */
.cx-vs-a{ text-decoration: none; position: relative }
.cx-vs-a::after{
  content: ""; position: absolute; left: 0; top: 52%; height: .06em; width: 0;
  background: var(--cx-acc); transition: width .7s var(--cx-e) .55s;
}
.cx-vs-i.on .cx-vs-a::after{ width: 100% }

/* ── 5 · programas y lo que resolvemos: se encienden al pasar el cursor ── */
.cx-prog, .cx-res li{ transition: transform .7s var(--cx-e), opacity .7s var(--cx-e), padding-left .7s var(--cx-e) }
.cx-progs:hover > .cx-prog:not(:hover), .cx-res:hover > li:not(:hover){ opacity: .35 }
.cx-prog:hover, .cx-res li:hover{ padding-left: .6rem }
.cx-prog:hover .cx-prog-t, .cx-res li:hover b{ color: var(--cx-acc) }
.cx-prog-t, .cx-res b{ transition: color .5s var(--cx-e) }
.cx-prog-n, .cx-res-n{ transition: transform .6s var(--cx-e) }
.cx-prog:hover .cx-prog-n, .cx-res li:hover .cx-res-n{ transform: scale(1.6); transform-origin: left center }

@media (prefers-reduced-motion: reduce){
  .cx-idea .cx-ln-l{ opacity: 1; transform: none; transition: none }
  .cx-cursor{ display: none }
  .cx-px{ transform: none !important }
  .cx-mag{ transition: none }
  .cx-cta-t::after{ transition: none }
  .cx-vs-a::after{ width: 100%; transition: none }
}

/* ── el acordeón, con el diseño del inicio ──
   Círculo fino con un más que, al abrir, gira y se rellena de
   bordó con el trazo en blanco. Mismo diseño, cada página con su
   tamaño. */
.cx-q summary i{ width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(11,7,8,.35); transition: background-color .9s cubic-bezier(.22,1,.36,1), border-color .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1) }
.cx-q summary i::before, .cx-q summary i::after{ background: var(--cx-negro); transition: opacity .9s cubic-bezier(.22,1,.36,1), background-color .9s cubic-bezier(.22,1,.36,1) }
.cx-q summary i::before{ width: 9px; height: 1.5px }
.cx-q summary i::after{ width: 1.5px; height: 9px }
.cx-q[open] summary i{ background: var(--cx-acc); border-color: var(--cx-acc); transform: rotate(90deg) }
.cx-q[open] summary i::before{ background: #fff }
.cx-q[open] summary i::after{ opacity: 0 }
.cx-q summary:hover{ color: var(--cx-acc) }

/* ═══════════════════════════════════════════════════════════
   MODO OSCURO · mismos valores que el sistema del sitio
   Los bloques blancos pasan a negro y su tinta a clara; los
   bloques negros pasan a humo para que sigan diferenciándose;
   el bordó se mantiene. Los bloques bordó no cambian.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .cx, body.dark .cx{ --cx-blanco: #000000; --cx-negro: #F7F5F5; background: #000; color: #F7F5F5 }
html[data-theme="dark"] .cx-hero, body.dark .cx-hero{ background: #000 }
html[data-theme="dark"] .cx-blanco, body.dark .cx-blanco{ background: #000; color: #F7F5F5 }
html[data-theme="dark"] .cx-blanco .cx-p, html[data-theme="dark"] .cx-hero-p, html[data-theme="dark"] .cx-prog-f, html[data-theme="dark"] .cx-res i, html[data-theme="dark"] .cx-q-r p,
body.dark .cx-blanco .cx-p, body.dark .cx-hero-p, body.dark .cx-prog-f, body.dark .cx-res i, body.dark .cx-q-r p{ color: #DCD7D7 }
html[data-theme="dark"] .cx-negro, body.dark .cx-negro{ background: #0C0A0A; color: #F7F5F5 }
html[data-theme="dark"] .cx-vs, body.dark .cx-vs{ background: #0C0A0A }
html[data-theme="dark"] .cx-fl, body.dark .cx-fl{ background: #F7F5F5; color: #000 }
html[data-theme="dark"] .cx-fl::after, body.dark .cx-fl::after{ background: rgba(0,0,0,.14) }
html[data-theme="dark"] .cx-progs, html[data-theme="dark"] .cx-prog, html[data-theme="dark"] .cx-res, html[data-theme="dark"] .cx-res li,
body.dark .cx-progs, body.dark .cx-prog, body.dark .cx-res, body.dark .cx-res li{ border-color: rgba(255,255,255,.22) }
html[data-theme="dark"] .cx-q, body.dark .cx-q{ border-color: rgba(255,255,255,.2) }
html[data-theme="dark"] .cx-q summary i, body.dark .cx-q summary i{ border-color: rgba(255,255,255,.22) }
html[data-theme="dark"] .cx-q summary i::before, html[data-theme="dark"] .cx-q summary i::after, body.dark .cx-q summary i::before, body.dark .cx-q summary i::after{ background: #F7F5F5 }
html[data-theme="dark"] .cx-decl b, body.dark .cx-decl b{ color: #F7F5F5 }
html[data-theme="dark"] .cx-hero-mas, body.dark .cx-hero-mas{ color: #ADA5A5 }
html[data-theme="dark"] .cx-hero-mas i, body.dark .cx-hero-mas i{ background: #ADA5A5 }
html[data-theme="dark"] .cx-out-n, body.dark .cx-out-n{ color: #ADA5A5 }