*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--cuerpo); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 {
  font-family: var(--titulos); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.04em; line-height: .95; margin: 0;
}
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

.seccion { padding-block: var(--espacio-seccion); padding-inline: var(--margen); scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); }

/* Piezas comunes (revisión total): la etiqueta sobre el título y la fila de redes se ven igual en todas las secciones. */
.etiqueta-seccion {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.redes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.redes > li, .redes > span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 600;
}
.seccion > * { max-width: var(--ancho-max); margin-inline: auto; }
.seccion[data-montado="cargando"] { min-height: 240px; }
.seccion[data-montado="error"]::before {
  content: "Sección en construcción"; display: block; color: var(--texto-suave);
  border: 1px dashed var(--borde); border-radius: var(--radio-tarjeta); padding: 24px; text-align: center;
}

/* Medio de video compartido (lo crea ctx.util.video) */
.medio {
  position: relative; overflow: hidden; border-radius: var(--radio-tarjeta);
  background: linear-gradient(135deg, #22252a, #15171a 60%, #2a3110);
  aspect-ratio: 16 / 9;
}
.medio[data-formato="9:16"] { aspect-ratio: 9 / 16; }
.medio[data-formato="1:1"] { aspect-ratio: 1 / 1; }
.medio > video { width: 100%; height: 100%; object-fit: cover; }
/* También se difiere el fondo desenfocado que algunas tarjetas hacen con su póster. */
.medio[data-carga-pendiente]::before { background-image: none !important; }
.medio--vacio > video { display: none; }
.medio--vacio::after {
  content: attr(data-titulo); position: absolute; inset: auto 12px 12px 12px;
  color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}

/* Píldoras y botones compartidos */
.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  background: rgba(0, 0, 0, .55); color: var(--texto); border: 1px solid var(--borde);
  backdrop-filter: blur(6px);
}
.pildora--acento { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 22px; border-radius: var(--radio-boton); border: 1px solid var(--borde);
  background: var(--superficie-2); color: var(--texto); font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; transition: transform var(--t-rapida), background var(--t-rapida);
}
.boton:hover { transform: translateY(-1px); }
.boton--acento { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}