/* Experiencia Tech 2026 — home.css
   Estilos de la Home (hero, video, cifras). Reutiliza los tokens de color
   definidos en skin.css (:root), que ya está enlazado antes que este archivo. */

.et-home-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) { .et-home-section { padding: 0 32px; } }

/* Nota: ya no hace falta min-height manual acá — el manejo de panes
   vacíos (ocultos para visitantes, visibles solo en modo edición) ahora
   vive centralizado en skin.css vía la clase DNNEmptyPane de DNN. */

/* ---------- Hero ---------- */
.et-hero {
  padding: 64px 16px 24px;
  text-align: center;
}
@media (min-width: 640px) { .et-hero { padding: 16px 32px 24px; } }

.et-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;
}

.et-hero__h1 { margin: 0; font-weight: inherit; font-size: inherit; }

.et-hero__image-stage {
  position: relative;
}

.et-hero__cta-overlay {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
@media (min-width: 640px) {
  .et-hero__cta-overlay {
    position: absolute;
    left: 10%;
    top: 88%;
    margin-top: 0;
    justify-content: flex-start;
  }
}

.et-hero__intro {
  max-width: 52rem;
  margin: 48px auto 0;
}
.et-hero__intro-text {
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
  color: oklch(0.98 0.01 275 / 0.92);
}
@media (min-width: 640px) { .et-hero__intro-text { font-size: 24px; } }

.et-hero__tilt-wrap {
  display: inline-block;
  will-change: transform;
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

.et-hero__tilt-wrap img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  height: auto;
  object-fit: contain;
  transform: scale(1.1);
  animation: et-hero-float 8s ease-in-out infinite;
}

@keyframes et-hero-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.10); }
  25%      { transform: translate3d(-6px, -10px, 0) scale(1.11); }
  50%      { transform: translate3d(0, -16px, 0) scale(1.12); }
  75%      { transform: translate3d(6px, -10px, 0) scale(1.11); }
}

.et-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 9999px;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.et-btn:hover { transform: scale(1.03); }

.et-btn--primary {
  background: linear-gradient(135deg, var(--et-primary), var(--et-primary-glow));
  box-shadow: 0 0 60px -10px oklch(0.66 0.22 295 / 0.55);
}

.et-btn--outline {
  border: 1px solid oklch(0.66 0.22 295 / 0.5);
  color: var(--et-primary-glow);
  padding: 14px 28px;
  font-size: 13px;
}
.et-btn--outline:hover { background: oklch(0.66 0.22 295 / 0.1); }

.et-hero__sponsors {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.et-hero__sponsors img {
  width: 100%;
  max-width: 72rem;
  height: auto;
  object-fit: contain;
}

/* ---------- Video showcase ---------- */
.et-video {
  padding-top: 24px;
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.et-video--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.et-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 1280px;
  margin: 0 auto;
  background: #000;
}

.et-video__corner {
  position: absolute;
  z-index: 20;
  height: 24px;
  width: 24px;
  border-color: oklch(0.66 0.22 295 / 0.8);
  pointer-events: none;
}
.et-video__corner--tl { top: 12px; left: 12px; border-left: 2px solid; border-top: 2px solid; }
.et-video__corner--tr { top: 12px; right: 12px; border-right: 2px solid; border-top: 2px solid; }
.et-video__corner--bl { bottom: 12px; left: 12px; border-left: 2px solid; border-bottom: 2px solid; }
.et-video__corner--br { bottom: 12px; right: 12px; border-right: 2px solid; border-bottom: 2px solid; }

.et-video__pane {
  position: relative;
  z-index: 0;
  height: 100%;
  width: 100%;
}
.et-video__pane video,
.et-video__pane iframe {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  border: 0;
}

/* ---------- Stats ---------- */
.et-stats {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid var(--et-border-soft);
}

.et-stats__intro {
  max-width: 48rem;
  margin: 0 auto 40px;
  text-align: center;
}
.et-stats__intro-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: oklch(0.98 0.01 275 / 0.8);
}
@media (min-width: 640px) { .et-stats__intro-text { font-size: 18px; } }

.et-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px 40px;
}
@media (min-width: 640px) { .et-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .et-stats__grid { grid-template-columns: repeat(3, 1fr); } }

.et-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.et-stat .et-stat__num {
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 7vw, 6rem);
  background-image: linear-gradient(90deg, #4a36b4 0%, #a46bfe 50%, #c9a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.et-stat .et-stat__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--et-fg);
}
@media (min-width: 640px) { .et-stat .et-stat__title { font-size: 24px; } }

.et-stat .et-stat__sub {
  font-size: 14px;
  color: var(--et-muted);
}

/* .et-link-arrow y .et-arrow: usados por las 3 tarjetas finales (EventCards) */
.et-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--et-primary-glow);
  text-decoration: none;
}
a.et-link-arrow:hover { text-decoration: underline; }
.et-link-arrow .et-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.et-event-card:hover .et-link-arrow .et-arrow {
  transform: translateX(4px);
}

/* ---------- 3 event cards ---------- */
.et-events {
  margin-top: 96px;
  margin-bottom: 96px;
}

.et-events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .et-events__grid { grid-template-columns: repeat(3, 1fr); } }

.et-event-card-pane {
  min-height: 1px;
  height: 100%;
}
.et-event-card-pane > * {
  height: 100%;
}

.et-event-card,
.et-event-card * {
  text-decoration: none;
}
.et-event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--et-border);
  background: oklch(0.20 0.09 283 / 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.et-event-card:hover {
  transform: translateY(-4px);
  border-color: var(--et-primary);
  box-shadow: 0 0 60px -10px oklch(0.66 0.22 295 / 0.55);
}

.et-event-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, oklch(0.30 0.14 290), oklch(0.20 0.09 283));
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-event-card__image img {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 12px;
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(200deg) saturate(1.4) brightness(1.15) drop-shadow(0 0 18px rgba(164, 107, 254, 0.55));
  transition: transform 0.5s ease;
}
.et-event-card:hover .et-event-card__image img {
  transform: scale(1.04);
}

.et-event-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.et-badge-date {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  background: oklch(0.1 0.03 275);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--et-muted);
}
.et-badge-date svg {
  height: 14px;
  width: 14px;
  color: var(--et-primary-glow);
  flex-shrink: 0;
}

.et-pill-outline svg {
  height: 14px;
  width: 14px;
  color: var(--et-primary-glow);
  flex-shrink: 0;
}

.et-event-card__body h3 {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--et-fg);
}

.et-event-card__body p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--et-muted);
  flex: 1;
}

.et-event-card__venue {
  margin-top: 12px;
  font-size: 12px;
  color: var(--et-muted);
}