/* ============================================================================
   fx-ultra.css — Nivel ULTRA
   - Medallas de oro metálico realista (SVG + CSS)
   - Corona metálica con gemas
   - Carrusel más grande, más redondo, más suave, más interactivo
   - Canvas IA network container
   - Cambio de color de acento por sección (al scrollear)
   - Morph blobs de fondo
   - Kinetic typography
   ============================================================================ */

/* ==========================================================================
   MEDALLA DE ORO METÁLICA — aplicada a los winner cards
   ========================================================================== */
.medal-wrap {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 120px;
  z-index: 4;
  pointer-events: none;
  filter:
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 24px rgba(232, 200, 106, 0.6))
    drop-shadow(0 0 4px rgba(255, 248, 214, 0.8));
}
html[data-mode="full"] .medal-wrap {
  animation: medal-sway 6s ease-in-out infinite, medal-glow 3s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes medal-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%      { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(0deg); }
  75%      { transform: translateX(-50%) rotate(3deg); }
}
@keyframes medal-glow {
  0%, 100% {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 24px rgba(232, 200, 106, 0.5))
      drop-shadow(0 0 4px rgba(255, 248, 214, 0.8));
  }
  50% {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 40px rgba(232, 200, 106, 0.9))
      drop-shadow(0 0 12px rgba(255, 248, 214, 1));
  }
}
.medal-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Shine rotating sweep */
.medal-shine-layer {
  mix-blend-mode: overlay;
  transform-origin: center;
}
html[data-mode="full"] .medal-shine-layer {
  animation: shine-rotate 4s linear infinite;
}
@keyframes shine-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Corona (variante para los 1eros puestos) */
.crown-wrap {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 48px;
  z-index: 5;
  pointer-events: none;
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 16px rgba(232, 200, 106, 0.7));
}
html[data-mode="full"] .crown-wrap {
  animation: crown-float 4s ease-in-out infinite;
}
@keyframes crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Cuando hay corona + medalla juntas, ajustar posición */
.winner-card.has-crown .medal-wrap {
  top: -42px;
}
.winner-card.has-crown {
  padding-top: 68px;
}
.winner-card:not(.has-crown) {
  padding-top: 54px;
}

/* ==========================================================================
   CARRUSEL ULTRA — más grande, más redondo, más suave
   ========================================================================== */
.carousel-cards {
  padding: var(--s-7) 0 var(--s-5);
  margin: 0 calc(var(--s-4) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
html[data-mode="full"] .carousel-cards__track {
  animation: carousel-infinite 80s linear infinite;
}

/* Winner card más grande, más redondeada, más fluida */
.winner-card {
  width: 260px !important;
  border-radius: 36px !important;
  padding: 54px var(--s-4) var(--s-5) !important;
  border: 2px solid rgba(232, 200, 106, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(22, 50, 90, 0.95) 0%, rgba(11, 30, 63, 0.7) 100%) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.5s ease;
  overflow: visible;
}
.winner-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 38px;
  background: linear-gradient(135deg,
    rgba(232, 200, 106, 0) 0%,
    rgba(232, 200, 106, 0.4) 45%,
    rgba(255, 248, 214, 0.6) 50%,
    rgba(232, 200, 106, 0.4) 55%,
    rgba(232, 200, 106, 0) 100%);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}
html[data-mode="full"] .winner-card::before {
  animation: card-shimmer 6s linear infinite;
}
@keyframes card-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 300%; }
}
.winner-card:hover {
  transform: translateY(-14px) scale(1.06);
  border-color: rgba(232, 200, 106, 0.8) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(232, 200, 106, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.winner-card:hover::before {
  opacity: 1;
}

.winner-card__photo {
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  margin: var(--s-4) auto !important;
  background: linear-gradient(135deg, #1a3a6f 0%, #0f2750 100%) !important;
  border: 4px solid transparent !important;
  background-image:
    linear-gradient(135deg, #1a3a6f 0%, #0f2750 100%),
    linear-gradient(135deg, #fff8d6 0%, #f4d882 30%, #E8C86A 60%, #b88f2f 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: 42px !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 6px rgba(232, 200, 106, 0.08),
    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  position: relative;
}
.winner-card__photo::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 15%;
  width: 30%;
  height: 25%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.winner-card__name {
  font-size: var(--fs-md) !important;
  font-weight: 800 !important;
  color: var(--c-white) !important;
  margin-top: var(--s-2);
  line-height: 1.2;
  min-height: 44px;
}
.winner-card__rank {
  margin-top: var(--s-3) !important;
  padding: var(--s-2) var(--s-4) !important;
  border-radius: var(--r-full) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff8d6 0%, #f4d882 30%, #E8C86A 60%, #b88f2f 100%) !important;
  color: #5a3d00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}
.winner-card__year {
  margin-top: var(--s-2) !important;
  font-size: 11px !important;
  color: var(--c-gold) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* Remueve los viejos .winner-card__crown (emoji) — ya no se usan */
.winner-card__crown {
  display: none !important;
}

/* ==========================================================================
   CANVAS AI NETWORK — contenedor
   ========================================================================== */
.ai-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.ai-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.ai-canvas-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-title);
  font-weight: 900;
  font-size: clamp(18px, 3vw, 28px);
  color: #0B1E3F;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, #fff8d6 0%, #f4d882 50%, #E8C86A 100%);
  padding: 12px 24px;
  border-radius: var(--r-full);
  border: 2px solid #b88f2f;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
}
html[data-mode="full"] .ai-canvas-center {
  animation: ai-center-pulse 2.5s ease-in-out infinite;
}
@keyframes ai-center-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.5), 0 0 30px rgba(232,200,106,0.5); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.5), 0 0 60px rgba(232,200,106,0.9); }
}
html[data-mode="lite"] .ai-canvas {
  display: none;
}
html[data-mode="lite"] .ai-canvas-wrap::before {
  content: "⚡ IA ⚡";
  display: grid;
  place-items: center;
  height: 200px;
  font-family: var(--f-title);
  font-size: 48px;
  color: var(--c-gold);
}

/* ==========================================================================
   SECTION COLOR ACCENT — cambio dinámico al scrollear
   ========================================================================== */
html {
  --accent-current: #E8C86A;
  --accent-current-2: #f4d882;
}
html[data-mode="full"] {
  transition: --accent-current 1s ease;
}

/* Acento se aplica a estos elementos */
html[data-mode="full"] .section__eyebrow,
html[data-mode="full"] .section__title strong,
html[data-mode="full"] .highlight {
  transition: color 1s ease;
}

/* Colores por sección */
section[data-section-color="red"] {
  --sec-accent: #E63946;
  --sec-glow: rgba(230, 57, 70, 0.3);
}
section[data-section-color="orange"] {
  --sec-accent: #FF9800;
  --sec-glow: rgba(255, 152, 0, 0.3);
}
section[data-section-color="gold"] {
  --sec-accent: #E8C86A;
  --sec-glow: rgba(232, 200, 106, 0.3);
}
section[data-section-color="green"] {
  --sec-accent: #4CAF50;
  --sec-glow: rgba(76, 175, 80, 0.3);
}
section[data-section-color="blue"] {
  --sec-accent: #4C9BE6;
  --sec-glow: rgba(76, 155, 230, 0.3);
}
section[data-section-color="purple"] {
  --sec-accent: #B39DDB;
  --sec-glow: rgba(179, 157, 219, 0.3);
}

section[data-section-color] .section__eyebrow {
  color: var(--sec-accent, var(--c-gold));
  border-color: var(--sec-accent, var(--c-gold));
  background: color-mix(in srgb, var(--sec-accent, var(--c-gold)) 15%, transparent);
}
section[data-section-color] .section__title strong,
section[data-section-color] .section__title .highlight {
  color: var(--sec-accent, var(--c-gold));
}

/* Glow de fondo de sección coloreada */
html[data-mode="full"] section[data-section-color]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--sec-glow) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
  z-index: -1;
}
html[data-mode="full"] section[data-section-color].section-active::before {
  opacity: 1;
}

/* ==========================================================================
   MORPH BLOBS — blobs orgánicos animados en fondos de sección
   ========================================================================== */
.morph-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.18;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.morph-blob--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #E8C86A, transparent 70%);
  top: 10%;
  left: -10%;
}
.morph-blob--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #4C9BE6, transparent 70%);
  bottom: 10%;
  right: -10%;
}
.morph-blob--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #E63946, transparent 70%);
  top: 50%;
  right: 30%;
}
html[data-mode="full"] .morph-blob--1 { animation: blob-float-1 18s ease-in-out infinite; }
html[data-mode="full"] .morph-blob--2 { animation: blob-float-2 22s ease-in-out infinite; }
html[data-mode="full"] .morph-blob--3 { animation: blob-float-3 26s ease-in-out infinite; }
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(100px, -60px) scale(1.15); }
  66% { transform: translate(-50px, 80px) scale(0.9); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-80px, 70px) scale(1.1); }
  66% { transform: translate(60px, -90px) scale(0.95); }
}
@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(1.2); }
}
html[data-mode="lite"] .morph-blob { display: none; }

/* ==========================================================================
   KINETIC TYPOGRAPHY
   ========================================================================== */
.kinetic-text {
  display: inline-block;
  position: relative;
}
html[data-mode="full"] .kinetic-text .kinetic-letter {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.5s ease;
}
html[data-mode="full"] .kinetic-text:hover .kinetic-letter:nth-child(odd) {
  transform: translateY(-6px);
  color: var(--c-gold);
}
html[data-mode="full"] .kinetic-text:hover .kinetic-letter:nth-child(even) {
  transform: translateY(6px);
  color: #4C9BE6;
}

/* ==========================================================================
   BORDE REDONDEADO MÁXIMO en otros elementos
   ========================================================================== */
.hero__cta-row .btn {
  border-radius: var(--r-full);
}
.faq-item {
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
.topbar__inner {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ==========================================================================
   SHOW pretty winner-card__photo con foto real cuando llegue
   ========================================================================== */
.winner-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ==========================================================================
   RUPTURA de contraste en áreas — cada área un color diferente
   ========================================================================== */
.area:nth-child(1) { border-top: 3px solid #E63946; }
.area:nth-child(2) { border-top: 3px solid #FF9800; }
.area:nth-child(3) { border-top: 3px solid #E8C86A; }
.area:nth-child(4) { border-top: 3px solid #4CAF50; }
.area:nth-child(5) { border-top: 3px solid #4C9BE6; }

.area:nth-child(1):hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(230, 57, 70, 0.35); }
.area:nth-child(2):hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 152, 0, 0.35); }
.area:nth-child(3):hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(232, 200, 106, 0.35); }
.area:nth-child(4):hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(76, 175, 80, 0.35); }
.area:nth-child(5):hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(76, 155, 230, 0.35); }

/* ==========================================================================
   PAS ICONOS — contenedores y animaciones
   ========================================================================== */
.pas__block {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
}
.pas__icon-wrap {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: rgba(11, 30, 63, 0.5);
  border: 1px solid rgba(232, 200, 106, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: visible;
  margin-left: var(--s-5);
  flex-shrink: 0;
}
.pas__icon-wrap--problem {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(11, 30, 63, 0.5));
  border-color: rgba(230, 57, 70, 0.4);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pas__icon-wrap--agita {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(11, 30, 63, 0.5));
  border-color: rgba(255, 152, 0, 0.4);
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pas__icon-wrap--solution {
  background: linear-gradient(135deg, rgba(232, 200, 106, 0.2), rgba(11, 30, 63, 0.5));
  border-color: rgba(232, 200, 106, 0.6);
  box-shadow: 0 8px 32px rgba(232, 200, 106, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pas-icon {
  width: 68px;
  height: 68px;
  display: block;
}
html[data-mode="full"] .pas__icon-wrap--problem .pas-icon {
  animation: pas-shake 4s ease-in-out infinite;
}
html[data-mode="full"] .pas__icon-wrap--agita .pas-icon {
  animation: pas-pulse 2.5s ease-in-out infinite;
}
html[data-mode="full"] .pas__icon-wrap--solution .pas-icon {
  animation: pas-shine 3s ease-in-out infinite;
}
@keyframes pas-shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}
@keyframes pas-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
}
@keyframes pas-shine {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(232, 200, 106, 0.5)); }
  50% { transform: scale(1.06) rotate(3deg); filter: drop-shadow(0 0 20px rgba(232, 200, 106, 0.9)); }
}

/* Ajuste del block PAS en mobile */
@media (max-width: 640px) {
  .pas__block {
    gap: var(--s-4);
  }
  .pas__icon-wrap {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    margin-left: var(--s-3);
  }
  .pas-icon {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   AI SECTION con color y glow pulsante
   ========================================================================== */
.ai-section {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(76, 155, 230, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(232, 200, 106, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(179, 157, 219, 0.08) 0%, transparent 70%);
  position: relative;
}
.ai-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(11, 30, 63, 0.3) 70%);
  pointer-events: none;
  z-index: 0;
}
.ai-text h2 {
  background: linear-gradient(135deg, #4C9BE6 0%, #f4d882 40%, #E8C86A 60%, #B39DDB 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html[data-mode="full"] .ai-text h2 {
  animation: ai-title-shift 5s ease-in-out infinite;
}
@keyframes ai-title-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.ai-feature {
  position: relative;
  overflow: hidden;
  transition: all var(--t-mid);
}
.ai-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(76, 155, 230, 0.2), transparent);
  transition: left 0.7s ease;
}
.ai-feature:hover {
  border-left-color: #4C9BE6;
  background: rgba(76, 155, 230, 0.08);
  transform: translateX(6px);
}
.ai-feature:hover::before {
  left: 100%;
}
.ai-feature:nth-child(1) strong { color: #4C9BE6; }
.ai-feature:nth-child(2) strong { color: #f4d882; }
.ai-feature:nth-child(3) strong { color: #B39DDB; }
.ai-feature:nth-child(4) strong { color: #25D366; }
.ai-feature:nth-child(5) strong { color: #E63946; }

/* Feature icons más grandes y con glow */
.ai-feature__icon {
  font-size: 28px !important;
  filter: drop-shadow(0 0 8px rgba(232, 200, 106, 0.5));
}
html[data-mode="full"] .ai-feature__icon {
  animation: icon-float 3s ease-in-out infinite;
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ai-feature:nth-child(2) .ai-feature__icon { animation-delay: 0.5s; }
.ai-feature:nth-child(3) .ai-feature__icon { animation-delay: 1s; }
.ai-feature:nth-child(4) .ai-feature__icon { animation-delay: 1.5s; }
.ai-feature:nth-child(5) .ai-feature__icon { animation-delay: 2s; }

/* ==========================================================================
   MOLÉCULA HERO mejorada (más tech, más nodos)
   ========================================================================== */
.hero-molecule {
  opacity: 0.45 !important;
}
html[data-mode="full"] .hero-molecule {
  animation: mol-rotate 80s linear infinite;
}

/* ==========================================================================
   Reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .medal-wrap,
  .crown-wrap,
  .medal-shine-layer,
  .winner-card::before,
  .ai-canvas-center,
  .morph-blob,
  .pas-icon,
  .ai-text h2,
  .ai-feature__icon {
    animation: none !important;
  }
}