/* ============================================================
   Portada de iacontainer.com — la sala de espera.
   Hoja propia, aparte de style.css: esa hoja es de las landings,
   pesa 161 KB y arrastra un bloque duplicado. Aqui no entra.
   ============================================================ */

:root{
  --bg:#050506;
  --ink:#F2F3F4;
  --dim:rgba(242,243,244,.72);
  --dimmer:rgba(242,243,244,.42);
  --line:rgba(242,243,244,.13);

  --accent:#1A7FE8;
  --accent-br:#2DB2FF;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --gut:clamp(20px,5vw,64px);
}

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

html{
  background:var(--bg);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- capas de fondo ---------- */

#fondo{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  background:var(--bg);
}

/* Grano: el mismo feTurbulence del shader de referencia, como data-URI
   para no pedir un archivo mas. */
.grano{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.19;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}

/* Viñeta: dos capas. La radial central apaga el shader justo detras del
   contenido — es lo que deja el texto legible sin matar el fondo. */
.vineta{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(56% 42% at 50% 40%, rgba(5,5,6,.74) 0%, rgba(5,5,6,.38) 48%, rgba(5,5,6,0) 80%),
    radial-gradient(124% 104% at 50% 50%, rgba(5,5,6,0) 40%, rgba(5,5,6,.66) 100%);
}

/* ---------- escena ---------- */

.escena{
  position:relative;
  z-index:2;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2.6vh,34px);
  padding:clamp(18px,3vh,32px) var(--gut) clamp(16px,2.6vh,28px);
  text-align:center;
}

/* ---------- marca ---------- */

.marca{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:auto;
}

.marca img{
  display:block;
  width:30px;
  height:30px;
  opacity:.95;
}

.marca span{
  font-size:17px;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--dim);
}

/* ---------- titular ---------- */

.intro{
  max-width:min(100%,900px);
}

.titulo{
  margin:0;
  font-size:clamp(2.9rem,6.6vw,5.1rem);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.045em;
}

.sub{
  margin:clamp(14px,2vh,24px) auto 0;
  max-width:52ch;
  font-size:clamp(1.02rem,1.75vw,1.3rem);
  line-height:1.5;
  letter-spacing:-.008em;
  color:var(--dim);
  text-wrap:pretty;
}

/* ---------- "Elige tu entrada" ---------- */

.elige{
  margin:0;
  display:flex;
  align-items:center;
  gap:16px;
  width:min(100%,480px);
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dimmer);
}

.elige::before,
.elige::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* ---------- tickets ---------- */

.tickets{
  --tw:clamp(330px,42vw,560px);
  --th:calc(var(--tw) / 1.7435);
  --perf:calc(var(--tw) * .758);
  --pad:calc(var(--tw) * .077);

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(22px,3.4vw,48px);
}

.ticket{
  --ang-x:0deg;
  --ang-y:0deg;
  --lift:1;

  display:block;
  width:var(--tw);
  height:var(--th);
  text-decoration:none;
  color:var(--ink-tk);
  transform:perspective(1200px) rotateX(var(--ang-x)) rotateY(var(--ang-y)) scale(var(--lift));
  transform-style:preserve-3d;
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.55));
  border-radius:calc(var(--tw) * .034); /* solo para el halo de foco */
}

/* Mientras el puntero esta encima, JS manda cuadro a cuadro: sin
   transicion, o el tilt va siempre un paso por detras del raton. */
.ticket.is-live{transition:none}

.ticket:focus-visible{
  outline:2px solid var(--accent-br);
  outline-offset:7px;
}

.ticket[data-tk="1"]{
  --bg-tk:#071B30;
  --ink-tk:#DDEBF7;
  --dim-tk:rgba(221,235,247,.62);
  --wm-tk:rgba(221,235,247,.34);
  --velo-a:rgba(4,16,30,.82);
  --velo-b:rgba(4,16,30,.46);
}

.ticket[data-tk="2"]{
  --bg-tk:#08243E;
  --ink-tk:#E6F3FF;
  --dim-tk:rgba(230,243,255,.66);
  --wm-tk:rgba(230,243,255,.38);
  --velo-a:rgba(4,20,36,.82);
  --velo-b:rgba(4,20,36,.46);
}

/* El recorte con muescas lo pone home.js (clip-path:path), porque el
   trazado depende del ancho real en pixeles y hay que rehacerlo al
   cambiar de tamaño. El radio de aqui es el respaldo si path() falla. */
.tk{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:calc(var(--tw) * .034);
  background:var(--bg-tk);
  isolation:isolate;
}

.tk-tex{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* Respaldo cuando no hay WebGL2: un degradado con la misma paleta. */
.tk::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(72% 96% at 62% 26%, rgba(45,178,255,.20) 0%, rgba(26,127,232,.09) 42%, transparent 76%);
}

/* Velo de tinta. La textura tiene zonas claras que se comen el texto
   blanco; esto las apaga donde hay letras y las deja intactas al fondo
   derecho, que es donde se quiere ver el dithering. */
.tk::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(95deg, var(--velo-a) 0%, var(--velo-b) 44%, transparent 84%),
    radial-gradient(40% 60% at 87% 50%, var(--velo-b) 0%, transparent 74%);
}

.tk-perf{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--perf);
  z-index:2;
  width:max(1px, calc(var(--tw) * .0026));
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(221,235,247,.34) 0 calc(var(--tw) * .012),
    transparent calc(var(--tw) * .012) calc(var(--tw) * .024)
  );
}

/* --- cuerpo del ticket --- */

.tk-body{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  text-align:left;
}

/* Los tamanos van por proporcion, pero con un minimo en px: entre 800 y
   1050px de pantalla el ticket acostado se estrecha y por puro ratio el
   texto chico caia a 8px, ilegible. El max() solo entra en ese tramo; de
   1050 para arriba manda la proporcion, como antes. */

.tk-label{
  position:absolute;
  left:var(--pad);
  top:calc(var(--tw) * .0783);
  font-family:var(--mono);
  font-size:max(10px, calc(var(--tw) * .0247));
  line-height:max(15px, calc(var(--tw) * .0378));
  letter-spacing:.016em;
  color:var(--dim-tk);
  white-space:pre-line;
}

.tk-name{
  position:absolute;
  left:var(--pad);
  top:calc(var(--tw) * .235);
  font-size:max(30px, calc(var(--tw) * .0874));
  font-weight:600;
  line-height:max(30px, calc(var(--tw) * .0877));
  letter-spacing:-.018em;
  color:var(--ink-tk);
}

.tk-foot{
  position:absolute;
  left:var(--pad);
  top:calc(var(--tw) * .44);
  font-family:var(--mono);
  font-size:max(10px, calc(var(--tw) * .0238));
  line-height:max(14px, calc(var(--tw) * .0345));
  letter-spacing:.016em;
  color:var(--dim-tk);
}

/* --- talon --- */

.tk-stub{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--perf);
  right:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tk-wm{
  position:absolute;
  top:calc(var(--tw) * .072);
  left:0;
  right:0;
  text-align:center;
  font-family:var(--mono);
  font-size:max(11px, calc(var(--tw) * .034));
  font-weight:500;
  letter-spacing:.06em;
  color:var(--wm-tk);
}

.tk-entrar{
  writing-mode:vertical-rl;
  font-size:max(25px, calc(var(--tw) * .071));
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-tk);
  opacity:.9;
  transition:opacity 300ms ease;
}

.ticket:hover .tk-entrar,
.ticket:focus-visible .tk-entrar{opacity:1}

/* --- brillo que sigue al raton --- */

.tk-glare{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:transparent;
  transition:background 420ms ease-out;
}

.ticket.is-live .tk-glare{transition:none}

/* ---------- pie ---------- */

.pie{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(16px,2.4vw,28px);
}

.pie a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dimmer);
  text-decoration:none;
  transition:color 220ms ease;
}

.pie a:hover,
.pie a:focus-visible{color:var(--dim)}

/* ---------- pantallas estrechas: el ticket se pone de pie ----------

   Por debajo de 800px ya no caben dos tickets acostados sin que la letra
   chica se vuelva un borron (medido a 390px: quedaban de 166x96 y el pie
   en 6px). Girados caben los dos, lado a lado y legibles. El recorte con
   las muescas lo rehace home.js solo, mirando la proporcion del elemento. */

@media (max-width:800px){
  .tickets{
    /* --tw tiene que ser una medida ABSOLUTA. Un % aqui se resolveria en
       cada sitio donde se usa la variable, y --tw alimenta tambien la
       altura y los tamanos de letra: contra la altura indefinida del
       contenedor, el ticket colapsaba a cero y desaparecia.
       El tope de 264px evita que en una tablet estrecha las tarjetas
       crezcan tanto de alto que se salgan de la pantalla. */
    --tw:min(calc((100vw - 2 * var(--gut) - 14px) / 2),264px);
    --th:calc(var(--tw) * 1.58);
    --pad:calc(var(--tw) * .095);
    flex-wrap:nowrap;
    gap:14px;
    width:100%;
  }

  /* La perforacion cruza a lo ancho, justo encima del talon. */
  .tk-perf{
    left:0;
    right:0;
    top:calc(var(--th) * .755);
    bottom:auto;
    width:auto;
    height:max(1px, calc(var(--tw) * .006));
    background-image:repeating-linear-gradient(
      to right,
      rgba(221,235,247,.34) 0 calc(var(--tw) * .03),
      transparent calc(var(--tw) * .03) calc(var(--tw) * .06)
    );
  }

  /* Los tamanos llevan un minimo en px: por puro ratio, en un telefono de
     320px el texto chico caia por debajo de lo legible. */
  .tk-label{
    top:calc(var(--tw) * .10);
    font-size:max(9.5px, calc(var(--tw) * .064));
    line-height:max(14px, calc(var(--tw) * .097));
  }

  .tk-name{
    top:calc(var(--tw) * .315);
    font-size:max(17px, calc(var(--tw) * .128));
    line-height:max(17px, calc(var(--tw) * .126));
  }

  .tk-foot{
    top:calc(var(--th) * .575);
    font-size:max(9.5px, calc(var(--tw) * .064));
    line-height:max(13px, calc(var(--tw) * .092));
  }

  /* El talon pasa a ser la banda de abajo, con el texto derecho. */
  .tk-stub{
    left:0;
    right:0;
    top:calc(var(--th) * .755);
    height:calc(var(--th) * .245);
  }

  .tk-entrar{
    writing-mode:horizontal-tb;
    font-size:max(13px, calc(var(--tw) * .088));
    letter-spacing:.06em;
  }

  .tk-wm{
    top:auto;
    bottom:calc(var(--th) * .03);
    font-size:max(9px, calc(var(--tw) * .055));
  }

  .tk::after{
    background:
      linear-gradient(180deg, var(--velo-a) 0%, var(--velo-b) 52%, transparent 90%),
      radial-gradient(70% 22% at 50% 86%, var(--velo-b) 0%, transparent 76%);
  }

  /* Media tarjeta no da para el copy entero. */
  .solo-pc{display:none}

  .escena{justify-content:flex-start;gap:clamp(20px,3vh,32px)}
  .marca{margin-bottom:clamp(18px,4vh,34px)}
  .pie{margin-top:clamp(26px,5vh,46px)}
  .vineta{
    background:
      radial-gradient(86% 40% at 50% 34%, rgba(5,5,6,.9) 0%, rgba(5,5,6,.6) 48%, rgba(5,5,6,0) 82%),
      radial-gradient(130% 100% at 50% 50%, rgba(5,5,6,0) 38%, rgba(5,5,6,.78) 100%);
  }
}

@media (max-width:420px){
  .elige{width:100%}
}

/* ---------- quien pidió que nada se mueva ---------- */

@media (prefers-reduced-motion:reduce){
  .ticket,
  .tk-glare,
  .tk-entrar,
  .pie a{transition:none}
  .grano{opacity:.12}
}