/*
 * Módulos de la columna lateral de portada.
 * Referencia: design-reference/propuesta4/index.html — «Scroll de contenidos 70-30».
 *
 * Son componentes, no una sección: la misma caja de newsletter o de suscripción
 * sirve en la portada y en el lateral del artículo.
 */

/* Newsletter --------------------------------------------------------- */

.exxi-side-newsletter {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-5) 22px 22px;
}

.exxi-side-newsletter__label {
  font-size: var(--size-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: var(--border-width-strong) solid var(--color-ink);
  padding-bottom: var(--space-2);
  margin: 0;
}

.exxi-side-newsletter__titular {
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin: var(--space-3) 0 0;
}

.exxi-side-newsletter__texto {
  font-size: 0.78125rem;
  color: var(--color-text-soft);
  line-height: var(--leading-base);
  margin: 7px 0 0;
}

.exxi-side-newsletter__form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--color-ink);
  margin-top: var(--space-3);
}

.exxi-side-newsletter__form input[type="email"] {
  flex: 1;
  border: 0;
  outline: none;
  padding: 9px var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  background: transparent;
  min-width: 0;
}

.exxi-side-newsletter__form button {
  background: var(--color-ink);
  color: #fff;
  border: 0;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-base);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.exxi-side-newsletter__form button:hover { background: var(--color-accent); }

/* Suscripción -------------------------------------------------------- */

.exxi-side-suscripcion {
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  padding: var(--space-6) var(--space-6) 26px;
}

.exxi-side-suscripcion__label {
  font-size: var(--size-2xs);
  font-weight: var(--weight-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin: 0;
}

.exxi-side-suscripcion__titular {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 10px 0 0;
}

.exxi-side-suscripcion__texto {
  font-size: 0.78125rem;
  color: #9b958a;
  line-height: 1.55;
  margin: var(--space-2) 0 0;
}

.exxi-side-suscripcion__cta {
  display: block;
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-base);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  margin-top: 14px;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.exxi-side-suscripcion__cta:hover { background: var(--color-accent-dark); color: #fff; }

.exxi-side-suscripcion__prueba {
  display: block;
  text-align: center;
  font-size: var(--size-xs);
  color: var(--color-border-strong);
  margin-top: 9px;
  text-decoration: none;
}

.exxi-side-suscripcion__prueba:hover { color: #fff; }

/* Las más leídas ----------------------------------------------------- */

.exxi-side-leidas__label {
  font-size: var(--size-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: var(--border-width-strong) solid var(--color-ink);
  padding-bottom: var(--space-2);
  margin: 0;
}

.exxi-side-leidas__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid #e6e2d9;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

.exxi-side-leidas__item:last-child { border-bottom: 0; }

.exxi-side-leidas__pos {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  flex-shrink: 0;
  width: 22px;
}

.exxi-side-leidas__titular {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--size-md);
  line-height: 1.28;
  font-weight: var(--weight-bold);
  text-wrap: pretty;
}

.exxi-side-leidas__item:hover .exxi-side-leidas__titular { color: var(--color-accent); }