/* ─── VIVIO · Contenido UGC con IA ──────────────────────────
   Solo variables de site.css (--bg-*, --fg-*, --line*, --y*) y las familias del
   sitio. El amarillo marca cifras, acciones y el aviso de transparencia; el
   texto corrido va en grises. */

.ugc-page {
  color: var(--fg-2);
  line-height: 1.6;
}
.ugc-page a:not(.btn) {
  color: var(--y);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ugc-page a:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Puntuación solo para lectores de pantalla y para el markdown (ver Sep en
   UgcConIaPage.jsx). Va en línea a propósito: un elemento en bloque o con
   position:absolute metería un salto de línea en innerText. */
.ugc-sep {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Cabecera ── */
.ugc-hero {
  padding: clamp(120px, 14vw, 180px) 0 clamp(56px, 8vw, 96px);
}
.ugc-h1 {
  margin: 18px 0 22px;
  font-size: clamp(48px, 8.5vw, 116px);
  line-height: 0.95;
  color: var(--fg-1);
  max-width: 16ch;
  text-wrap: balance;
}
.ugc-h1-a, .ugc-h1-b { display: block; }
.ugc-h1-b { color: var(--y); }
.ugc-lead {
  max-width: 68ch;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--fg-2);
}

.ugc-aviso {
  max-width: 820px;
  margin: clamp(24px, 4vw, 40px) 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--y);
  border-radius: 14px;
}
.ugc-aviso h2 {
  font-family: var(--ui-font);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.ugc-aviso p { margin: 0; font-size: 15.5px; }
.ugc-aviso p + p { margin-top: 10px; }

.ugc-datos {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(24px, 4vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px;
}
.ugc-datos li {
  border-top: 1px solid var(--line-bright);
  padding-top: 10px;
  font-size: 14px;
  color: var(--fg-2);
}
.ugc-datos strong {
  display: block;
  font: 500 clamp(20px, 2.4vw, 28px) var(--mono-font);
  color: var(--y);
  line-height: 1.25;
  margin-bottom: 4px;
}

.ugc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ugc-acciones .btn {
  text-decoration: none;
  white-space: normal;
  text-align: center;
  height: auto;
  min-height: 52px;
}
.ugc-meta {
  margin-top: 18px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* ── Bloques ── */
.ugc-bloque {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
}
.ugc-h2 {
  font-size: clamp(36px, 5vw, 64px);
  color: var(--fg-1);
  margin: 0 0 14px;
  max-width: 20ch;
  text-wrap: balance;
}
.ugc-h3 {
  font-family: var(--ui-font);
  font-size: 18px;
  color: var(--fg-1);
  margin: 32px 0 12px;
}
.ugc-intro {
  max-width: 68ch;
  font-size: clamp(15px, 1.4vw, 18px);
  margin: 0 0 clamp(24px, 4vw, 40px);
}
.ugc-nota {
  max-width: 80ch;
  margin-top: 18px;
  font-size: 14px;
  color: var(--fg-3);
}
.ugc-reales { margin-top: 18px; max-width: 80ch; }

/* Listas numeradas: el número va en mono y amarillo. */
.ugc-lista, .ugc-fases {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ugc;
  display: grid;
  gap: 14px;
}
.ugc-lista { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ugc-lista li, .ugc-fases li {
  counter-increment: ugc;
  position: relative;
  padding: 16px 18px 16px 58px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ugc-lista li::before, .ugc-fases li::before {
  content: counter(ugc, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 17px;
  font: 500 13px var(--mono-font);
  color: var(--y);
}
.ugc-lista strong { display: block; color: var(--fg-1); font-family: var(--ui-font); font-weight: 600; }
.ugc-fases { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ugc-fases h3, .ugc-formatos h3 {
  font-family: var(--ui-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0 0 6px;
  line-height: 1.3;
}
.ugc-fases p, .ugc-formatos p { margin: 0; font-size: 15px; }

.ugc-formatos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.ugc-formatos li {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.ugc-equipo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px 24px;
}
.ugc-equipo li { border-top: 1px solid var(--line); padding-top: 10px; font-size: 15px; }
.ugc-equipo strong { display: block; color: var(--fg-1); font-family: var(--ui-font); font-weight: 600; }

/* ── Tabla comparativa ── */
.ugc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.ugc-tabla th, .ugc-tabla td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.ugc-tabla tbody tr:last-child th, .ugc-tabla tbody tr:last-child td { border-bottom: 0; }
/* Sin text-transform: innerText lo aplica y la cabecera llegaría en
   mayúsculas a la versión en markdown. */
.ugc-tabla thead th {
  font: 500 13px var(--mono-font);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  background: var(--bg-3);
}
.ugc-tabla thead th:last-child { color: var(--y); }
.ugc-tabla tbody th { color: var(--fg-1); font-family: var(--ui-font); font-weight: 600; width: 22%; }
.ugc-tabla td:last-child { color: var(--fg-1); }

/* En móvil cada fila pasa a ser una tarjeta: el criterio arriba y las dos
   columnas debajo con su rótulo. Sin desplazamiento lateral. */
@media (max-width: 680px) {
  .ugc-tabla, .ugc-tabla tbody, .ugc-tabla tr, .ugc-tabla th, .ugc-tabla td { display: block; width: 100%; }
  .ugc-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ugc-tabla tr { border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .ugc-tabla tbody tr:last-child { border-bottom: 0; }
  .ugc-tabla th, .ugc-tabla td { border-bottom: 0; padding: 4px 0; }
  .ugc-tabla tbody th { width: 100%; padding-bottom: 6px; }
  .ugc-tabla td::before {
    content: attr(data-label);
    display: block;
    font: 500 11px var(--mono-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .ugc-tabla td:last-child::before { color: var(--y); }
}

/* ── Precio ── */
.ugc-precio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  align-items: start;
}
.ugc-tarjeta {
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.ugc-tarjeta-pack { border-color: var(--line-bright); border-top: 3px solid var(--y); }
.ugc-tarjeta h3 {
  font: 500 13px var(--mono-font);
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin: 0 0 10px;
}
.ugc-cifra {
  font: 500 clamp(28px, 3.4vw, 40px) var(--mono-font);
  color: var(--y);
  line-height: 1.15;
  margin: 0;
}
.ugc-cifra-detalle { margin: 4px 0 14px; color: var(--fg-1); }
.ugc-tarjeta ul { list-style: none; padding: 0; margin: 0; }
.ugc-tarjeta li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.ugc-tarjeta li strong { color: var(--fg-1); font-weight: 600; }
.ugc-tarjeta p { margin: 0; }

.ugc-final .ugc-h2 { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ugc-page .btn-beam::before, .ugc-page .btn-beam::after { animation: none; }
}