/* =============================================================================
   3R PRODUCCIONES · base.css
   Reset, tipografía, nav flotante, footer, y las piezas compartidas:
   botón CTA, rótulos de sección, panel que sube, marcador de PENDIENTE.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html{
  scroll-behavior: auto;          /* lo maneja Lenis */
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-weight: 800;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* El navegador le mete "margin: 1em 40px" a figure y blockquote. En el
   mosaico eso dejaba un marco negro alrededor de cada foto. */
figure, blockquote, figcaption { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lima); color: #000; }

:focus-visible{
  outline: 2px solid var(--lima);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Utilidad de accesibilidad */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link{
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--lima); color: #000;
  padding: 10px 16px; border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: var(--t--1);
}
.skip-link:focus { transform: none; }


/* =============================================================================
   LAYOUT
   ============================================================================= */

.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 980px; }

.section{
  position: relative;
  padding-block: var(--pad-sec);
}

/* El panel que sube con esquinas redondeadas (WMF).
   Cada sección entra por encima de la anterior en vez de seguirla. */
.panel{
  position: relative;
  isolation: isolate;
  z-index: 1;
  background: var(--ground);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  margin-top: calc(var(--r-panel) * -1);
  box-shadow: 0 -1px 0 var(--line), 0 -30px 60px -30px rgba(0,0,0,.9);
}
.panel--alt { background: var(--ground-2); }


/* =============================================================================
   FONDO CON MOVIMIENTO
   Tres capas muy tenues detrás del contenido de cada sección. Todas son
   CSS puro (background-position y transform), así que no cuestan nada.

   · rejilla   — la retícula del plano de rigging, deriva en diagonal
   · pixeles   — puntos tipo matriz de LED, van al revés y más lento
   · halo      — dos manchas azules grandes que respiran

   El azul es el color de sistema del manual, así que puede usarse a gusto.
   El lima queda reservado para la acción: acá aparece solo en los píxeles,
   al 25% de opacidad.
   ============================================================================= */

.fx{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fx i{ position: absolute; inset: -12%; display: block; }

.fx__rejilla{
  background-image:
    linear-gradient(rgba(52,93,168,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,93,168,.10) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 8%, #000 0%, transparent 74%);
  mask-image: radial-gradient(115% 85% at 50% 8%, #000 0%, transparent 74%);
  animation: fxRejilla 34s linear infinite;
}
@keyframes fxRejilla{ to{ background-position: 84px 84px; } }

.fx__pixeles{
  background-image: radial-gradient(rgba(181,205,2,.55) 1px, transparent 1.7px);
  background-size: 28px 28px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(65% 55% at 78% 82%, #000 0%, transparent 72%);
  mask-image: radial-gradient(65% 55% at 78% 82%, #000 0%, transparent 72%);
  animation: fxPixeles 46s linear infinite;
}
@keyframes fxPixeles{ to{ background-position: -56px 84px; } }

.fx__halo{
  background:
    radial-gradient(42% 38% at 22% 18%, rgba(52,93,168,.30), transparent 70%),
    radial-gradient(34% 30% at 82% 78%, rgba(52,93,168,.20), transparent 70%);
  animation: fxHalo 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fxHalo{
  from{ transform: translate3d(-3%, -2%, 0) scale(1); }
  to  { transform: translate3d(5%, 3%, 0) scale(1.18); }
}

/* Variante cálida para la sección del formulario: el azul se corre al lima
   apenas, para que el final de la página se sienta más cerca del CTA. */
.fx--cierre .fx__halo{
  background:
    radial-gradient(46% 40% at 78% 22%, rgba(52,93,168,.30), transparent 70%),
    radial-gradient(30% 26% at 18% 82%, rgba(181,205,2,.10), transparent 70%);
}

/* El contenido siempre por encima del fondo. */
.wrap{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .fx i{ animation: none !important; }
}


/* =============================================================================
   TIPO COMPARTIDO
   ============================================================================= */

.kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lima);
  margin: 0 0 18px;
}
.kicker::before{
  content: ""; width: 26px; height: 1px; background: var(--lima); flex: none;
}

.h-sec{ font-size: var(--t-4); }
.h-big{ font-size: var(--t-5); }

.lede{
  font-size: var(--t-1);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: var(--maxw-txt);
}

.mono{
  font-family: var(--f-mono);
  font-size: var(--t--1);
  letter-spacing: .04em;
}
.tag{
  font-family: var(--f-mono);
  font-size: var(--t--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

em { font-style: normal; color: var(--lima); }


/* =============================================================================
   BOTÓN CTA — uno solo en toda la página, siempre con el mismo texto
   ============================================================================= */

.cta{
  --cta-bg: var(--lima);
  --cta-fg: #0A0B0D;
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 0; border-radius: 100px;
  font-family: var(--f-mono);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out);
  will-change: transform;
}
.cta::after{
  content: "";
  width: 7px; height: 7px; flex: none;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-fast) var(--e-out);
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -10px var(--lima-glow), 0 0 0 1px var(--lima);
}
.cta:hover::after { transform: rotate(45deg) translate(3px, -3px); }
.cta:active { transform: translateY(0); }

.cta--ghost{
  --cta-bg: transparent;
  --cta-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-lit);
}
.cta--ghost:hover{
  --cta-fg: var(--lima);
  box-shadow: inset 0 0 0 1px var(--lima);
}
.cta--dark{
  --cta-bg: #0A0B0D;
  --cta-fg: #fff;
}
.cta--dark:hover{ --cta-fg: var(--lima); box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); }

.cta[disabled], .cta[aria-disabled="true"]{
  opacity: .45; cursor: not-allowed; pointer-events: none;
}


/* =============================================================================
   MARCADOR DE PENDIENTE
   Todo lo que falta se dibuja así. Nada se inventa: si el dato no está,
   la página lo dice. Buscá "PENDIENTE" en assets/js/content.js.
   ============================================================================= */

.ph{
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px;
  min-height: 90px;
  padding: 16px 18px;
  border: 1px dashed var(--lima-dim);
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(45deg,
      rgba(181,205,2,.035) 0 8px,
      transparent 8px 16px);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: var(--t--1);
  line-height: 1.45;
  text-align: left;
}
.ph::before{
  content: "PENDIENTE";
  font-size: var(--t--2);
  letter-spacing: .2em;
  color: var(--lima);
  font-weight: 600;
}
.ph--inline{
  display: inline-flex; min-height: 0;
  padding: 4px 10px; gap: 8px;
  flex-direction: row; align-items: center;
}
.ph--inline::before { content: "PENDIENTE ·"; }
.ph--media{
  min-height: 100%;
  align-items: center; justify-content: center;
  text-align: center;
}


/* =============================================================================
   NAV FLOTANTE — la píldora de Relats con el CTA único de Solotech
   ============================================================================= */

.nav{
  position: fixed;
  z-index: 60;
  top: 14px; left: 50%;
  width: min(calc(100% - var(--gut) * 1.4), 1180px);
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  height: var(--nav-h);
  padding: 0 8px 0 18px;
  background: rgba(12, 14, 18, .72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(237,239,242,.10);
  border-radius: 100px;
  opacity: 0;
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-mid) ease;
  will-change: transform;
}
.nav.is-on{ transform: translate(-50%, 0); opacity: 1; }

.nav__logo{
  display: flex; align-items: center; gap: 10px;
  flex: none;
  min-width: 0;
}
.nav__logo img{
  height: 20px; width: auto; flex: none;
  transition: opacity var(--d-fast) ease;
}
.nav__logo:hover img{ opacity: .75; }
.nav__logo span{
  font-family: var(--f-mono); font-weight: 400;
  font-size: var(--t--2); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.nav__links{
  display: flex; gap: 4px; margin-left: auto;
}
.nav__links a{
  padding: 8px 14px; border-radius: 100px;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--d-fast) ease, background var(--d-fast) ease;
}
.nav__links a:hover{ color: var(--ink); background: rgba(255,255,255,.06); }

.nav .cta{
  padding: 11px 20px; font-size: var(--t--2); flex: none;
}

/* Barra de progreso del scroll: el único otro uso del lima */
.nav__bar{
  position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--lima), var(--azul-lit));
  transform: scaleX(0); transform-origin: 0 50%;
  border-radius: 2px;
}

@media (max-width: 720px){
  .nav{ padding: 0 6px 0 14px; gap: 8px; }
  .nav__links{ display: none; }
}
@media (max-width: 560px){
  /* en celular el logo se reduce al isotipo: el CTA no puede quedar cortado */
  .nav__logo span{ display: none; }
  .nav .cta{ padding: 13px 16px; letter-spacing: .06em; min-height: 44px; }
  .nav .cta::after{ display: none; }
}

/* Área táctil mínima de 44px en cualquier cosa que se toque con el dedo.
   El área crece con padding: lo que se ve no cambia. */
@media (pointer: coarse), (max-width: 560px){
  /* el área crece con padding negativo compensado: lo que se ve no se mueve */
  .nav__logo{ padding: 12px 8px; margin: -12px -8px; }
  .footer__col a{
    display: inline-block;
    min-width: 44px;
    padding-block: 12px;
  }
  .footer__col li{ margin-bottom: 0; }
  .checks label{ min-height: 44px; }
  .qa__q{ min-height: 52px; }
}


/* =============================================================================
   FOOTER TIPOGRÁFICO (Plugged Live Shows)
   ============================================================================= */

.footer{
  position: relative;
  /* Por encima de la franja lima: con z-index 1 la franja le comía los
     primeros 40px y cortaba el primer atajo. */
  z-index: 4;
  background: var(--ground);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  margin-top: calc(var(--r-panel) * -1);
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: 28px;
  overflow: hidden;
}

/* --- cabecera del pie: marca + CTA --- */
.footer__top{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px 32px;
  padding-bottom: clamp(32px, 5vh, 56px);
}
.footer__logo{
  width: clamp(110px, 13vw, 170px);
  height: auto;
  opacity: .92;
  margin-bottom: 16px;
}
.footer__desc{
  margin: 0;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: var(--t--1);
}

/* --- los atajos en display grande --- */
.footer__nav{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.footer__nav a{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: clamp(10px, 1.6vh, 18px) 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-5);
  letter-spacing: -.045em;
  line-height: .95;
  /* Antes era var(--panel-3): 1,27:1 de contraste, o sea invisible. Se
     iluminaban al pasar el mouse, pero en celular no hay mouse y quedaban
     así para siempre. Con --muted da 3,8:1, que es el mínimo para texto
     grande, y el hover sigue llevándolos a blanco. */
  color: var(--muted);
  transition: color var(--d-mid) var(--e-out), padding-left var(--d-mid) var(--e-out);
}
.footer__nav a span{
  font-family: var(--f-mono); font-weight: 400;
  font-size: var(--t--2); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.footer__nav a:hover{ color: var(--ink); padding-left: 18px; }
.footer__nav a:hover span{ opacity: 1; transform: none; color: var(--lima); }

/* --- columnas de datos --- */
.footer__cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.footer__col h4{
  font-family: var(--f-mono); font-weight: 500;
  font-size: var(--t--2); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer__col ul{ list-style: none; margin: 0; padding: 0; }
.footer__col li{
  color: var(--ink-2);
  font-size: var(--t--1);
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer__col a{ transition: color var(--d-fast) ease; }
.footer__col a:hover{ color: var(--lima); }

/* --- barra legal --- */
.footer__legal{
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 28px;
  align-items: start;
}
.footer__copy{
  grid-column: 1;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--f-mono); font-size: var(--t--2); letter-spacing: .08em;
}
.footer__copy strong{ color: var(--ink); font-weight: 500; }
.footer__marcas{
  grid-column: 1;
  margin: 0;
  max-width: 76ch;
  color: var(--muted-2);
  font-size: var(--t--2);
  line-height: 1.6;
}
.footer__top-link{
  grid-column: 2; grid-row: 1 / span 2;
  align-self: start;
  background: none; border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--d-fast) ease, color var(--d-fast) ease;
  white-space: nowrap;
}
.footer__top-link:hover{ border-color: var(--lima); color: var(--lima); }

@media (max-width: 620px){
  .footer__legal{ grid-template-columns: 1fr; }
  .footer__top-link{ grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .footer__top{ align-items: flex-start; }
}


/* =============================================================================
   REVEAL — entradas simples. Todo lo que no es el montaje entra así.
   ============================================================================= */

[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.no-motion [data-reveal],
[data-reveal].is-in{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}


/* =============================================================================
   REDUCED MOTION — quien lo tenga activado ve todo ya armado
   ============================================================================= */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .nav{ transform: translate(-50%, 0) !important; opacity: 1 !important; }
}