/* ==========================================================================
   horoscopo.com.ar — página de signo, nota y listados
   ========================================================================== */

/* Portada del signo ------------------------------------------------------ */

.signo-portada { padding-block: clamp(2.5rem, 6vw, 4rem); }

.signo-portada__fila {
  display: grid;
  grid-template-columns: clamp(120px, 18vw, 190px) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.signo-portada .zi { --zi-fill: var(--crema); --zi-acc: var(--limon); width: 100%; }
.signo-portada h1 { margin-block: 0.35rem 0.75rem; }
.signo-portada__fechas { font-size: 0.9375rem; color: rgba(36, 28, 51, 0.72); margin: 0; }

.atributos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.atributos li {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border: var(--trazo) solid var(--tinta);
  background: var(--crema);
}
.atributos li.es-hoy { background: var(--limon); font-weight: 600; }

/* Marcador de energía: un número grande, no un anillo con degradado. */
.energia {
  border: var(--trazo) solid var(--tinta);
  background: var(--crema);
  padding: 1rem 1.5rem;
  text-align: center;
  min-width: 128px;
}
.energia__valor {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
  font-weight: 900;
  font-size: 3.25rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  display: block;
}
.energia__rotulo { font-size: 0.75rem; color: var(--tenue); display: block; margin-top: 0.35rem; }

@media (max-width: 860px) {
  .signo-portada__fila { grid-template-columns: 96px minmax(0, 1fr); }
  .energia { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 0.75rem; }
  .energia__valor { font-size: 2.25rem; }
  .energia__rotulo { margin-top: 0; }
}

/* Cuerpo ----------------------------------------------------------------- */

.signo-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 940px) { .signo-cuerpo { grid-template-columns: 1fr; } }

.prosa { max-width: var(--medida); }
.prosa h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-block: 2rem 0.75rem; }
.prosa h3 { font-size: 1.1875rem; margin-block: 1.75rem 0.5rem; }
.prosa p { margin-bottom: 1.15em; }
.prosa ul, .prosa ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
.prosa li { margin-bottom: 0.4rem; }
.prosa strong { font-weight: 700; }
.prosa a { color: var(--uva); }

.frase {
  border-left: 5px solid var(--uva);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.3;
}

.vacio {
  border: var(--trazo) solid var(--tinta);
  background: var(--crema);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.vacio h2 { margin-bottom: 0.6rem; }
.vacio p { color: var(--tenue); max-width: 44ch; margin-inline: auto; }

/* Barra lateral ---------------------------------------------------------- */

.lateral { display: grid; gap: 2rem; }

.modulo { border: var(--trazo) solid var(--tinta); background: var(--crema); }
.modulo__titulo {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
  border-bottom: var(--trazo) solid var(--tinta);
  background: var(--lila);
  margin: 0;
}
.modulo__cuerpo { padding: 1.1rem 1rem; }

.puntaje { margin-bottom: 1rem; }
.puntaje:last-child { margin-bottom: 0; }
.puntaje__fila {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.875rem; margin-bottom: 0.35rem;
}
.puntaje__valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.puntaje__riel { height: 10px; background: var(--arena); border: 1px solid var(--tinta); }
.puntaje__barra { height: 100%; }

.suerte { display: grid; gap: 0; }
.suerte div {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.suerte div:last-child { border-bottom: 0; padding-bottom: 0; }
.suerte dt { color: var(--tenue); margin: 0; }
.suerte dd { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.suerte__numero { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; }
.suerte__muestra { width: 18px; height: 18px; border: var(--trazo) solid var(--tinta); flex: none; }

/* Los otros once ---------------------------------------------------------- */

.otros { padding-block: clamp(2rem, 4vw, 3rem); border-top: var(--trazo) solid var(--tinta); }
.otros h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }

.otros__tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  gap: var(--trazo);
  background: var(--tinta);
  border: var(--trazo) solid var(--tinta);
  overflow-x: auto;
  scrollbar-width: thin;
}
.otros__tira .signo-celda { padding: 0.9rem 0.4rem; }
.otros__tira .signo-celda .zi { width: 40px; }
.otros__tira .signo-celda__nombre { font-size: 0.8125rem; }
.otros__tira .signo-celda[aria-current="page"] { background: var(--lila); }
.otros__tira .signo-celda[aria-current="page"] .zi { --zi-fill: var(--crema); --zi-acc: var(--limon); }

/* Cierre ------------------------------------------------------------------ */

.cierre__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.cierre p { max-width: 46ch; margin: 0.5rem 0 0; }

/* Migas y notas ----------------------------------------------------------- */

.migas { font-size: 0.8125rem; color: var(--tenue); padding-block: 1rem 0; }
.migas a { color: var(--tenue); }
.migas span { margin-inline: 0.4rem; }

.paginacion { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; }
.paginacion a, .paginacion span {
  min-width: 44px; padding: 0.6rem 0.75rem; text-align: center;
  border: var(--trazo) solid var(--tinta);
  text-decoration: none; color: var(--tinta); font-size: 0.9375rem;
}
.paginacion a:hover { background: var(--crema); }
.paginacion [aria-current="page"] { background: var(--tinta); color: var(--crema); font-weight: 600; }
.paginacion .inactivo { opacity: 0.35; pointer-events: none; }

/* Nota ------------------------------------------------------------------- */

.nota-cabecera { padding-block: 1.5rem 2rem; }
.nota-cabecera h1 { margin-block: 0.75rem 1rem; }

.nota-tipo {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  background: var(--lila);
  border: var(--trazo) solid var(--tinta);
}

.nota-datos {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  font-size: 0.875rem; color: var(--tenue);
  margin: 0;
}

.compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--hairline);
  margin-bottom: 2rem;
}
.compartir__rotulo { font-size: 0.875rem; color: var(--tenue); margin-right: 0.25rem; }
.compartir a, .compartir button {
  font: inherit; font-size: 0.875rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border: var(--trazo) solid var(--tinta);
  background: var(--crema); color: var(--tinta);
  text-decoration: none; cursor: pointer;
}
.compartir a:hover, .compartir button:hover { background: var(--lila); }
.compartir svg { width: 15px; height: 15px; flex: none; }

.nota-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 940px) { .nota-cuerpo { grid-template-columns: 1fr; } }

.prosa .lead { font-size: 1.1875rem; line-height: 1.55; }
.prosa .sign-solo-link {
  font-family: var(--texto);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-left: 0.75rem;
  white-space: nowrap;
}

.indice { position: sticky; top: 5.5rem; }
.indice__titulo { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.75rem; }
.indice nav { display: grid; gap: 0.1rem; border-left: var(--trazo) solid var(--hairline); }
.indice a {
  font-size: 0.875rem; line-height: 1.35;
  padding: 0.4rem 0 0.4rem 0.75rem;
  color: var(--tenue); text-decoration: none;
  margin-left: -2px; border-left: var(--trazo) solid transparent;
}
.indice a:hover { color: var(--tinta); }
.indice a.activo { color: var(--tinta); font-weight: 600; border-left-color: var(--uva); }

.indice--movil { display: none; margin-bottom: 2rem; border: var(--trazo) solid var(--tinta); background: var(--crema); }
.indice--movil summary { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.indice--movil nav { padding: 0 1rem 1rem; border-left: 0; }

@media (max-width: 940px) {
  .indice { display: none; }
  .indice--movil { display: block; }
}