/* ==========================================================================
   Korvian Digital — Página de marca (/logo)
   Hoja pequeña, cargada SOLO desde logo.html, después de styles.css.
   El único trabajo real que hace es montar el escenario donde se enseña el
   avatar cromado: fondo de estudio, reflejo en el suelo y una banda de luz que
   cruza muy de vez en cuando.

   Cuidado con dos cosas al tocarla:
   - La banda de luz (.logo-escena::after) NO puede pasar por encima de texto.
     Dentro del escenario solo hay imagen, por eso ahí se permite; si algún día
     se mete un titular dentro, la banda hay que subirla por encima de él.
   - Las piezas de descarga se ven sobre fondo oscuro a propósito: el cromado
     necesita un fondo oscuro del que reflejar. Sobre blanco no se lee.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Escenario del avatar
   -------------------------------------------------------------------------- */
.logo-escena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(30px, 5vw, 60px) clamp(18px, 4vw, 48px) clamp(18px, 3vw, 34px);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.07), transparent 62%),
    radial-gradient(90% 70% at 50% 108%, rgba(129, 140, 248, 0.09), transparent 70%),
    linear-gradient(180deg, #101216, #08090b 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 26px 60px -30px rgba(0, 0, 0, 0.9);
  display: grid;
  justify-items: center;
}

/* Banda de luz que recorre el escenario. Igual que en la portada, va en
   animación y no en :hover — en móvil el :hover no existe y el efecto no se
   dispararía nunca. */
.logo-escena::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 42%,
    rgba(255, 255, 255, 0.055) 48%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.055) 52%,
    transparent 58%
  );
  transform: translateX(-60%);
  animation: logo-barrido 9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes logo-barrido {
  0%,
  62% { transform: translateX(-62%); }
  92%,
  100% { transform: translateX(62%); }
}

.logo-pieza {
  position: relative;
  z-index: 1;
  width: min(340px, 74vw);
  display: block;
}

.logo-pieza img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.75));
}

/* Reflejo en el suelo. Copia volteada y desvanecida: es lo que hace que la
   pieza parezca apoyada sobre algo y no pegada sobre un rectángulo. */
.logo-reflejo {
  position: relative;
  z-index: 1;
  width: min(340px, 74vw);
  /* Sólo se ve el primer tercio: un reflejo entero es una segunda pieza que
     compite con la de verdad y duplica la altura del escenario. */
  height: min(104px, 23vw);
  overflow: hidden;
  margin-top: 4px;
  opacity: 0.26;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 88%);
  pointer-events: none;
}

/* Volteada sobre su propio centro: así la primera fila de la caja es la última
   fila del original, que es justo lo que reflejaría el suelo. */
.logo-reflejo img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  filter: blur(0.6px);
}

/* --------------------------------------------------------------------------
   2. Tamaños reales
   -------------------------------------------------------------------------- */
.logo-tamanos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(18px, 4vw, 34px);
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
}

.logo-tamanos figure { margin: 0; text-align: center; }
.logo-tamanos img { display: block; border-radius: 50%; margin: 0 auto 8px; }
.logo-tamanos figcaption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.logo-tamanos p {
  flex: 1 1 200px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   3. Fichas de descarga
   -------------------------------------------------------------------------- */
.logo-fichas { margin-top: 26px; }

.logo-ficha {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.logo-ficha:hover { border-color: var(--border-strong); }

/* La ventanita de vista previa. Fondo propio, más oscuro que la ficha, porque
   estas piezas van con transparencia y sobre el gris de la tarjeta el cromado
   se apaga. */
.logo-ficha-vista {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 22px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 65%),
    #0a0b0d;
  border-bottom: 1px solid var(--border);
}

.logo-ficha-vista img { max-width: 100%; height: auto; }
.logo-ficha-vista img.es-marca { width: 96px; }
.logo-ficha-vista img.es-horizontal { width: 210px; }

.logo-ficha-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.logo-ficha-cuerpo h3 { font-size: 1.02rem; margin-bottom: 6px; }
.logo-ficha-cuerpo p { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 16px; }
.logo-ficha-cuerpo .btn-row { margin-top: auto; }

/* --------------------------------------------------------------------------
   4. Detalles
   -------------------------------------------------------------------------- */
.logo-todo {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-todo p { margin: 0; font-size: 0.9rem; color: var(--text-soft); max-width: 46ch; }
.logo-todo strong { color: var(--text); font-weight: 600; }

.logo-nota {
  margin-top: 26px;
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  .logo-escena::after { animation: none; opacity: 0.5; }
}

@media (max-width: 560px) {
  .logo-tamanos { justify-content: center; }
}