/* ═══ TECH WEEK 2026 · seccion temporal debajo del hero ═══
   Colores de Mexico Tech Week tomados de los flyers oficiales del foro. */
.tw{
  --tw-lila:#9161F1; --tw-lima:#BED700; --tw-naranja:#FF5B29; --tw-cielo:#83C8E6;
  --tw-tinta:#0A0A0A; --tw-gris:rgba(255,255,255,.56); --tw-linea:rgba(255,255,255,.14);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  background:var(--tw-tinta);color:#fff;font-family:var(--font-sans);
  padding-bottom:clamp(56px,8vw,112px);
}
.tw[hidden]{display:none}
.tw *,.tw *::before,.tw *::after{box-sizing:border-box}
.tw img{display:block;max-width:100%}
.tw-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.tw h2,.tw h3,.tw h4,.tw h5{color:#fff;font-family:var(--font-sans)}
.tw .tw-gh{color:var(--tw-gris)}

/* ── cinta ── */
.tw-cinta{position:relative;z-index:3;border-bottom:1px solid var(--tw-linea);overflow:hidden;
  padding:14px 0;font-size:14px;letter-spacing:.01em;color:rgba(255,255,255,.82);white-space:nowrap}
.tw-cinta__pista{display:inline-flex;align-items:center;gap:28px;padding-right:28px;
  animation:twCinta 38s linear infinite;will-change:transform}
.tw-cinta__pista i{width:9px;height:9px;flex:none;background:var(--tw-lila);
  clip-path:polygon(0 100%,50% 0,100% 100%)}
.tw-cinta__pista i:nth-of-type(4n+2){background:var(--tw-lima)}
.tw-cinta__pista i:nth-of-type(4n+3){background:var(--tw-naranja)}
.tw-cinta__pista i:nth-of-type(4n){background:var(--tw-cielo)}
@keyframes twCinta{to{transform:translateX(-50%)}}

/* ── formas flotantes ── */
.tw-formas{position:absolute;inset:0;z-index:1;pointer-events:none}
.tw-f{position:absolute;display:block;opacity:.9}
.tw-f polygon{fill:currentColor}
.tw-f--1{color:var(--tw-lila);width:clamp(120px,16vw,240px);top:120px;right:-40px}
.tw-f--2{color:var(--tw-lima);width:clamp(90px,10vw,160px);top:42%;left:-50px;opacity:.85}
.tw-f--3{color:var(--tw-naranja);width:clamp(80px,9vw,140px);top:64%;right:4%;opacity:.8}
.tw-f--4{color:var(--tw-cielo);width:clamp(70px,7vw,110px);bottom:6%;left:8%;opacity:.75}
.tw-f--5{color:var(--tw-lila);width:clamp(60px,6vw,90px);top:30%;right:38%;opacity:.35}
.tw-f>polygon{transform-origin:50% 50%}
.tw-f{animation:twFlota 14s ease-in-out infinite alternate}
.tw-f--2{animation-duration:17s;animation-delay:-4s}
.tw-f--3{animation-duration:12s;animation-delay:-7s}
.tw-f--4{animation-duration:19s;animation-delay:-2s}
.tw-f--5{animation-duration:15s;animation-delay:-9s}
@keyframes twFlota{
  0%{translate:0 0}
  50%{translate:10px -18px}
  100%{translate:-8px 12px}
}

/* ── portada ── */
.tw-portada{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center;
  padding:clamp(56px,8vw,112px) 0 clamp(48px,7vw,96px)}
.tw-marcas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.tw-marcas__mxtw{height:15px;width:auto}
.tw-marcas__sep{width:1px;height:16px;background:rgba(255,255,255,.3)}
.tw-marcas__txt{font-size:14px;color:rgba(255,255,255,.72)}

.tw-titulo{margin:0 0 24px;font-weight:var(--fw-light,300);font-size:clamp(40px,6vw,82px);
  line-height:1.02;letter-spacing:-.035em}
.tw-linea{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.tw-linea>span{display:inline-block;transform:translateY(105%);
  transition:transform 1s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.tw-linea:nth-child(2)>span{transition-delay:.1s}
.tw-linea:nth-child(3)>span{transition-delay:.2s}
.tw-titulo.is-in .tw-linea>span{transform:none}
.tw-titulo em{font-style:normal;color:var(--tw-lila)}

.tw-lead{max-width:56ch;margin:0 0 32px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:rgba(255,255,255,.78)}

.tw-datos{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin:0 0 36px;
  padding:20px 0;border-top:1px solid var(--tw-linea);border-bottom:1px solid var(--tw-linea)}
.tw-datos dt{font-size:13px;color:var(--tw-gris);margin-bottom:6px}
.tw-datos dd{margin:0;font-size:15px;line-height:1.4}

.tw-accion{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tw-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--tw-tinta);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .25s var(--ease-out,ease),background .25s,box-shadow .25s}
.tw-btn::after{content:'';width:14px;height:10px;flex:none;background:currentColor;
  clip-path:polygon(0 42%,72% 42%,72% 10%,100% 50%,72% 90%,72% 58%,0 58%);
  transition:transform .25s var(--ease-out,ease)}
.tw-btn:hover{background:var(--tw-lima);transform:translateY(-2px);box-shadow:0 14px 34px rgba(190,215,0,.25)}
.tw-btn:hover::after{transform:translateX(4px)}
.tw-btn:focus-visible,.tw-link:focus-visible,.tw-qr:focus-visible{outline:2px solid var(--tw-lima);outline-offset:3px}

.tw-cuenta{display:flex;gap:18px}
.tw-cuenta>div{display:flex;flex-direction:column;align-items:flex-start;min-width:44px}
.tw-cuenta b{font-weight:var(--fw-light,300);font-size:30px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tw-cuenta span{font-size:12px;color:var(--tw-gris);margin-top:6px}
.tw-cuenta--hoy b,.tw-cuenta--hoy span{display:none}
.tw-cuenta__hoy{font-size:15px;color:var(--tw-lima)}

.tw-angel{position:relative;margin:0;aspect-ratio:712/496;
  clip-path:polygon(3% 6%,22% 0,58% 4%,100% 0,96% 38%,100% 76%,92% 100%,40% 95%,0 100%,4% 58%)}
.tw-angel img{width:100%;height:112%;object-fit:cover;object-position:50% 30%;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform}
.tw-angel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.35))}

/* ── bloques ── */
.tw-bloque{padding:clamp(48px,7vw,96px) 0 0}
.tw-kicker{margin:0 0 12px;font-size:14px;color:var(--tw-gris)}
.tw-sub{margin:0 0 clamp(28px,4vw,48px);font-weight:var(--fw-light,300);font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.03em}

/* paneles */
.tw-paneles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tw-panel{position:relative;display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:20px;
  background:rgba(255,255,255,.035);border:1px solid var(--tw-linea);overflow:hidden;
  transition:border-color .35s,background .35s,transform .35s var(--ease-out,ease)}
.tw-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out,ease) .3s}
.tw-panel.is-in::before{transform:scaleX(1)}
.tw-panel::after{content:'';position:absolute;width:120px;height:120px;right:-34px;top:-34px;background:var(--c);
  opacity:.16;clip-path:polygon(0 0,100% 30%,30% 100%);transition:opacity .35s,transform .6s var(--ease-out,ease)}
.tw-panel:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:rgba(255,255,255,.05)}
.tw-panel:hover::after{opacity:.4;transform:scale(1.15)}
.tw-panel__meta{display:flex;justify-content:space-between;gap:12px;margin:0 0 16px;font-size:13px;color:var(--c)}
.tw-panel__meta span{color:var(--tw-gris)}
.tw-panel h4{margin:0 0 10px;font-weight:var(--fw-light,300);font-size:clamp(22px,2vw,27px);line-height:1.12;letter-spacing:-.02em}
.tw-panel__preg{margin:0 0 24px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.66)}

.tw-ponentes{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:16px}
.tw-pon{display:flex;align-items:center;gap:14px}
.tw-pon img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;background:#1a1a1a;
  box-shadow:0 0 0 2px var(--tw-tinta),0 0 0 3px rgba(255,255,255,.18);
  transition:box-shadow .3s,transform .3s var(--ease-out,ease)}
.tw-pon:hover img{transform:scale(1.06);box-shadow:0 0 0 2px var(--tw-tinta),0 0 0 4px var(--c)}
.tw-pon b{display:block;font-weight:500;font-size:15px;line-height:1.25}
.tw-pon span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.6)}

.tw-modera{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding-top:16px;border-top:1px dashed var(--tw-linea);
  font-size:13px;line-height:1.4;color:rgba(255,255,255,.6)}
.tw-modera img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover}
.tw-modera b{font-weight:500;color:#fff}

/* programa + logistica */
.tw-dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.tw-prog{position:relative;list-style:none;margin:0;padding:0 0 0 28px}
.tw-prog::before,.tw-prog::after{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px}
.tw-prog::before{background:var(--tw-linea)}
.tw-prog::after{background:linear-gradient(var(--tw-lila),var(--tw-lima),var(--tw-naranja));
  transform:scaleY(var(--avance,0));transform-origin:top}
.tw-prog li{position:relative;display:grid;grid-template-columns:84px 1fr;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:16px;line-height:1.4}
.tw-prog li::before{content:'';position:absolute;left:-28px;top:20px;width:11px;height:11px;border-radius:50%;
  background:var(--tw-tinta);border:1px solid rgba(255,255,255,.35);transition:background .4s,border-color .4s}
.tw-prog li.is-on::before{background:var(--tw-lima);border-color:var(--tw-lima)}
.tw-prog time{color:var(--tw-gris);font-variant-numeric:tabular-nums}

.tw-info{display:flex;flex-direction:column;gap:22px}
.tw-info>div{padding:0 0 22px;border-bottom:1px solid var(--tw-linea)}
.tw-info h5{margin:0 0 8px;font-weight:500;font-size:16px}
.tw-info p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.7)}
.tw-link{display:inline-block;margin-top:10px;font-size:14px;color:#fff;text-decoration:none;
  border-bottom:1px solid var(--tw-cielo);padding-bottom:2px;transition:color .2s}
.tw-link:hover{color:var(--tw-cielo)}

/* cierre */
.tw-cierre{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:clamp(56px,8vw,112px);
  padding:clamp(28px,4vw,48px);border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(145,97,241,.22),rgba(145,97,241,.06) 55%,rgba(131,200,230,.12));
  border:1px solid rgba(145,97,241,.35)}
.tw-cierre h3{margin:0 0 12px;font-weight:var(--fw-light,300);font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em}
.tw-cierre p{margin:0 0 26px;max-width:46ch;font-size:16px;line-height:1.5;color:rgba(255,255,255,.75)}
.tw-qr{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;text-decoration:none;color:rgba(255,255,255,.75);font-size:13px}
.tw-qr img{width:140px;height:140px;background:#fff;padding:10px;border-radius:16px;transition:transform .3s var(--ease-out,ease)}
.tw-qr:hover img{transform:scale(1.04)}

.tw-pie{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px;margin-top:40px;
  font-size:13px;color:var(--tw-gris)}
.tw-pie__iudex{height:20px;width:auto}
.tw-pie__anade{height:30px;width:auto}
.tw-pie__mxtw{height:13px;width:auto}
.tw-pie__sep{width:1px;height:22px;background:rgba(255,255,255,.25)}

/* boton flotante en celular */
.tw-flota{position:fixed;left:50%;bottom:16px;z-index:60;translate:-50% 140%;opacity:0;
  background:#fff;color:var(--tw-tinta);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 24px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap;
  transition:translate .45s var(--ease-out,ease),opacity .3s;pointer-events:none;display:none}
.tw-flota.is-on{translate:-50% 0;opacity:1;pointer-events:auto}

/* ── entradas al hacer scroll (de frente, sin giros) ── */
.tw-rev{opacity:.001;transform:translate3d(0,24px,0);transition:opacity .6s var(--ease-out,ease),transform .7s var(--ease-out,ease)}
.tw-rev.is-in{opacity:1;transform:none}
.tw-ponentes .tw-pon{opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s var(--ease-out,ease),transform .7s var(--ease-out,ease)}
.tw-panel.is-in .tw-pon{opacity:1;transform:none}
.tw-panel.is-in .tw-pon:nth-child(1){transition-delay:.25s}
.tw-panel.is-in .tw-pon:nth-child(2){transition-delay:.38s}
.tw-panel.is-in .tw-pon:nth-child(3){transition-delay:.51s}
.tw-paneles .tw-panel:nth-child(2){transition-delay:.1s}
.tw-paneles .tw-panel:nth-child(3){transition-delay:.2s}

/* sin JS: todo visible */
.tw:not(.tw--js) .tw-rev,.tw:not(.tw--js) .tw-pon{opacity:1;transform:none}
.tw:not(.tw--js) .tw-linea>span{transform:none}

/* ── responsive ── */
@media (max-width:1024px){
  .tw-paneles{grid-template-columns:1fr 1fr}
  .tw-paneles .tw-panel:nth-child(3){grid-column:1/-1}
}
@media (max-width:860px){
  .tw-portada{grid-template-columns:1fr}
  .tw-angel{order:-1;max-width:560px}
  .tw-dos{grid-template-columns:1fr}
  .tw-cierre{flex-direction:column;align-items:flex-start}
  .tw-qr{display:none}
}
@media (max-width:640px){
  .tw-paneles{grid-template-columns:1fr}
  .tw-paneles .tw-panel:nth-child(3){grid-column:auto}
  .tw-datos{grid-template-columns:1fr 1fr;gap:16px 24px}
  .tw-datos>div:last-child{grid-column:1/-1}
  .tw-accion{gap:22px}
  .tw-btn{width:100%;justify-content:center}
  .tw-cuenta{gap:14px}
  .tw-cuenta b{font-size:26px}
  .tw-prog li{grid-template-columns:70px 1fr;font-size:15px}
  .tw-panel{padding:24px 20px 20px}
  .tw-pie__sep{display:none}
  .tw-flota{display:block}
  .tw-f--1{right:-70px}
  .tw-f--4,.tw-f--5{display:none} /* la celeste se transparentaba sobre la tarjeta de cierre */
}

@media (prefers-reduced-motion:reduce){
  .tw-cinta__pista,.tw-f{animation:none}
  .tw-rev,.tw-pon,.tw-linea>span{opacity:1!important;transform:none!important;transition:none!important}
  .tw-panel::before{transform:none;transition:none}
  .tw-angel img{transform:scale(1.06)}
}

/* ── BANNER del home (18 oct 2026): portada corta; la sección completa vive en techweek.html ── */
.tw--banner{padding:clamp(40px,5vw,64px) 0 clamp(44px,5.5vw,72px)}
.tw--banner .tw-f--1{top:-30px;right:-60px;width:clamp(110px,13vw,200px);opacity:.75}
.tw--banner .tw-f--4{bottom:-26px;left:1%;width:clamp(60px,6vw,90px);opacity:.3}
.tw-banner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.tw-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tw-tag::before{content:"";width:8px;height:8px;flex:none;background:var(--tw-naranja);clip-path:polygon(0 100%,50% 0,100% 100%)}
.tw-caras{display:flex;align-items:center;flex-wrap:wrap;margin:16px 0 0;gap:0}
.tw-caras img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--tw-tinta);margin-left:-10px}
.tw-caras img:first-child{margin-left:0}
.tw-caras span{margin-left:12px;font-size:13.5px;color:rgba(255,255,255,.75)}
.tw-banner__t{margin:0 0 14px;font-weight:var(--fw-light,300);font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.03em}
.tw-banner__t em{font-style:normal;color:var(--tw-lila)}
.tw-banner__d{margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.5;color:rgba(255,255,255,.78);max-width:52ch}
.tw-banner__acc{display:flex;flex-direction:column;align-items:flex-start;gap:22px;justify-self:end}
.tw-banner__btns{display:flex;gap:12px;flex-wrap:wrap}
.tw-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.tw-btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:none;border-color:#fff}
/* la cinta del banner no existe: la barra oscura la hace el propio fondo */
@media (max-width:860px){
  .tw-banner{grid-template-columns:1fr;gap:26px}
  .tw-banner__acc{justify-self:start;width:100%}
  .tw-caras span{flex-basis:100%;margin:8px 0 0}
  .tw-banner__btns{width:100%}
  .tw-banner__btns .tw-btn{flex:1 1 auto;justify-content:center}
  .tw--banner .tw-f--4{display:none}
}
/* página dedicada: fondo oscuro y la sección se mete bajo la barra (que va en modo claro, como sobre el hero) */
.tw-body{background:#0A0A0A}
.tw--pagina{margin-top:-66px;padding-top:66px}
/* tira delgada en la home (20 oct 2026): título, caras y botones en una fila */
.tw--tira{padding:clamp(26px,3.2vw,40px) 0}
.tw-tira{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,56px)}
.tw-tira .tw-tag{margin-bottom:8px}
.tw-tira__t{margin:0;font-weight:var(--fw-light,300);font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.03em}
.tw-tira__t em{font-style:normal;color:var(--tw-lila)}
.tw-tira .tw-caras{margin-top:12px}
.tw-tira .tw-caras img{width:30px;height:30px}
.tw-tira .tw-caras span{font-size:12.5px}
.tw-tira .tw-banner__btns{flex:none}
@media (max-width:860px){
  .tw-tira{flex-direction:column;align-items:flex-start;gap:18px}
  .tw-tira .tw-banner__btns{width:100%}
  .tw-tira .tw-banner__btns .tw-btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:640px){
  .tw-tira .tw-caras span{flex-basis:100%;margin:8px 0 0}
}
@media (max-width:640px){
  /* en celular la tira se queda con un solo botón; el programa es un enlace de texto */
  .tw-tira .tw-banner__btns{flex-direction:column;align-items:center;gap:14px}
  .tw-tira .tw-btn--ghost{border:0;padding:0;height:auto;min-height:0;background:none;font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:4px;flex:none}
}