/* =============================================================
   parejas.club - DISEÑO HOME 2026
   Concepto: el amor. Degradados, tipografía grande y colorida,
   tarjetas con vida y ranking con carácter.
   Se apoya en los colores que ya usaba el sitio (#990099, #ce2169,
   #f0d7f0) y los evoluciona hacia tonos magenta/violeta/rosa.
   ============================================================= */

/* --------------------------------------------------------------
   LAYOUT DE LA PORTADA
   La cadena de flex de Clarity deja el área de contenido con
   overflow visible dentro de un contenedor de 100vh: el contenido
   crece, se sale y la página no se puede desplazar. Aquí la home
   se gestiona sola: el contenedor crece (scroll del documento) y el
   contenido se centra igual que la cabecera (80% con margen auto).
   -------------------------------------------------------------- */
.main-home {
  height: auto;
  min-height: 100vh;
}

.main-home .content-container {
  display: block;
  min-height: 0;
}

.main-home .content-area {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 3rem;
}

@media screen and (max-width: 40em) {
  .main-home .content-area {
    max-width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* Los tokens de color (--pc-*) viven ahora en css/tokens.css, compartidos
   por toda la web. Esta hoja sólo define los bloques de la portada. */

.content-home {
  padding-bottom: 2rem;
}

/* --------------------------------------------------------------
   TIPOGRAFÍA GENERAL DE LA HOME
   -------------------------------------------------------------- */
.content-home h1,
.content-home h2,
.content-home h3 {
  font-family: 'Metropolis', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------
   HERO
   -------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: 3.2rem 1.5rem 3rem;
  border-radius: 2.2rem;
  background: var(--pc-grad-hero);
  box-shadow: 0 26px 60px -30px rgba(123, 47, 247, .85);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .55;
}

.hero-orb-1 {
  width: 26rem;
  height: 26rem;
  top: -11rem;
  right: -7rem;
  background: radial-gradient(circle, #ff9ec4 0%, rgba(255, 158, 196, 0) 70%);
  animation: pc-float 11s ease-in-out infinite;
}

.hero-orb-2 {
  width: 22rem;
  height: 22rem;
  bottom: -10rem;
  left: -6rem;
  background: radial-gradient(circle, #ff4d9d 0%, rgba(255, 77, 157, 0) 70%);
  animation: pc-float 14s ease-in-out infinite reverse;
}

.hero-orb-3 {
  width: 18rem;
  height: 18rem;
  top: 40%;
  left: 46%;
  background: radial-gradient(circle, #ffd86b 0%, rgba(255, 216, 107, 0) 70%);
  opacity: .35;
  animation: pc-float 17s ease-in-out infinite;
}

@keyframes pc-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.6rem, -1.2rem, 0) scale(1.08); }
}

.hero-hearts i {
  position: absolute;
  color: rgba(255, 255, 255, .16);
  font-style: normal;
  animation: pc-rise 12s linear infinite;
}

.hero-hearts i:nth-child(1) { left: 8%;  font-size: 2.2rem; animation-delay: 0s; }
.hero-hearts i:nth-child(2) { left: 26%; font-size: 1.4rem; animation-delay: 2.4s; }
.hero-hearts i:nth-child(3) { left: 58%; font-size: 3rem;   animation-delay: 4.1s; }
.hero-hearts i:nth-child(4) { left: 78%; font-size: 1.8rem; animation-delay: 6.2s; }
.hero-hearts i:nth-child(5) { left: 44%; font-size: 1.1rem; animation-delay: 8.5s; }

@keyframes pc-rise {
  0% { transform: translateY(120%) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-140%) rotate(24deg); opacity: 0; }
}

.hero-inner {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .45rem 1.1rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.hero-title {
  margin: 0 0 1rem;
  font-family: 'Metropolis', sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-shadow: 0 .5rem 1.6rem rgba(59, 15, 111, .35);
}

.hero-title span {
  display: inline-block;
  background: linear-gradient(100deg, #ffd86b 0%, #ff9ec4 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 44rem;
  margin: 0 auto 1.9rem;
  font-size: 1.06rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

.hero-lead b {
  color: #fff;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}

.pc-btn {
  display: inline-block;
  padding: .78rem 1.6rem;
  border-radius: 3rem;
  font-family: 'Metropolis', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.35;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.pc-btn:hover {
  transform: translateY(-2px);
}

.pc-btn-primary {
  background: #fff;
  color: var(--pc-pink);
  box-shadow: 0 .9rem 2rem -1rem rgba(59, 15, 111, .8);
}

.pc-btn-primary:hover {
  background: var(--pc-grad-pink);
  color: #fff;
}

.pc-btn-ghost {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}

.pc-btn-ghost:hover {
  background: rgba(255, 255, 255, .26);
}

/* El CSS base del sitio fuerza "a:link { color:#fff }" (más especificidad que
   una clase), así que los enlaces de la portada hay que fijarlos aquí. */
.content-home a {
  color: var(--pc-ink);
}

/* Botones del hero: el primario va en blanco (texto rosa) y el fantasma
   transparente (texto blanco). */
.hero a.pc-btn-primary {
  color: var(--pc-pink);
}

.hero a.pc-btn-primary:hover {
  color: #fff;
}

.hero a.pc-btn-ghost,
.hero a.pc-btn-ghost:hover {
  color: #fff;
}

/* Botones de los bloques inferiores: el primario es rosa (texto blanco) y el
   fantasma blanco (texto rosa). */
.block-cta a.pc-btn-primary {
  color: #fff;
}

.block-cta a.pc-btn-ghost,
.block-cta a.pc-btn-ghost:hover {
  color: var(--pc-pink);
}

.content-home a.block-more,
.content-home a.block-more:hover {
  color: var(--pc-pink);
}

.content-home .faq-item a {
  color: var(--pc-pink);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-stats li {
  min-width: 9rem;
  padding: .85rem 1.1rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
}

.hero-stats b {
  display: block;
  font-family: 'Metropolis', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  background: linear-gradient(100deg, #ffd86b, #ff9ec4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-stats span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .88;
}

/* --------------------------------------------------------------
   TICKER (bucle con las bodas más recientes)
   -------------------------------------------------------------- */
/* OJO: aquí los colores van en hexadecimal. Un degradado NO puede usarse como
   color dentro de otro degradado (declaración inválida y el fondo desaparece). */
.ticker {
  position: relative;
  overflow: hidden;
  height: 2.9rem;
  display: flex;
  align-items: center;
  margin: 0 0 2.6rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, #3b0f6f 0%, #7b2ff7 32%, #ce2169 66%, #ff4d9d 100%);
  box-shadow: 0 1rem 2.4rem -1.4rem rgba(123, 47, 247, .7);
}

/* El carril va en position:absolute para que su ancho (es un nowrap largo)
   NO imponga el ancho mínimo de la página y provoque scroll horizontal. */
.ticker-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: pc-marquee 42s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes pc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item {
  padding: 0 1.6rem;
  color: #fff;
  font-size: .9rem;
  letter-spacing: .01em;
}

.ticker-item em {
  font-style: normal;
  opacity: .7;
}

.ticker-item i {
  margin-left: .5rem;
  font-style: normal;
  font-weight: 700;
  color: var(--pc-gold-soft);
}

/* --------------------------------------------------------------
   BLOQUES
   -------------------------------------------------------------- */
.block {
  margin: 0 0 3.4rem;
}

.block-head {
  max-width: 46rem;
  margin: 0 auto 1.8rem;
  text-align: center;
}

.block-head-center {
  margin-bottom: 2.2rem;
}

.block-title {
  margin: 0 0 .5rem;
  font-family: 'Metropolis', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-transform: uppercase;
  background: var(--pc-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.block-title-alt {
  display: block;
  font-size: .52em;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  -webkit-text-fill-color: var(--pc-rose);
  color: var(--pc-rose);
}

.block-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--pc-ink-soft);
}

/* --------------------------------------------------------------
   HERO: TARJETA DE PAREJA
   -------------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.1rem;
}

.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.3rem 1rem 1.1rem;
  border-radius: 1.6rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  box-shadow: 0 1.1rem 2.6rem -1.5rem rgba(123, 47, 247, .55);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.ccard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.6rem;
  background: var(--pc-grad-hero);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 0;
  mix-blend-mode: multiply;
}

.ccard:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.8rem 3.4rem -1.6rem rgba(123, 47, 247, .75);
}

.ccard:hover::after {
  opacity: .07;
}

.ccard > * {
  position: relative;
  z-index: 1;
}

.ccard-photos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: 100%;
}

.ccard-photo {
  width: 44%;
  max-width: 10.5rem;
  aspect-ratio: 1 / 1.18;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--pc-cream);
  box-shadow: 0 .6rem 1.2rem -.6rem rgba(51, 17, 47, .55);
}

.ccard-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 -.55rem;
  border-radius: 50%;
  background: var(--pc-grad-pink);
  color: #fff;
  font-size: .95rem;
  box-shadow: 0 .5rem 1.1rem -.4rem rgba(206, 33, 105, .9);
  animation: pc-beat 2.4s ease-in-out infinite;
}

@keyframes pc-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.16); }
  28% { transform: scale(1); }
  42% { transform: scale(1.11); }
  56% { transform: scale(1); }
}

.ccard-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
  font-family: 'Metropolis', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--pc-ink);
}

.ccard-names em {
  font-style: normal;
  font-weight: 400;
  font-size: .8em;
  color: var(--pc-rose);
}

.ccard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
}

.chip {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 2rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-year { background: var(--pc-grad-violet); color: #fff; }
.chip-dur { background: rgba(123, 47, 247, .12); color: var(--pc-violet-deep); }
.chip-live { background: rgba(52, 168, 83, .16); color: #1d7a3a; }
.chip-views { background: rgba(206, 33, 105, .12); color: var(--pc-pink); }
.chip-new { background: var(--pc-grad-gold); color: #4a2c00; }

/* --------------------------------------------------------------
   BLOQUE DE PERSONAS (hombres / mujeres)
   -------------------------------------------------------------- */
.block-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.4rem;
}

.block-half {
  padding: 1.6rem 1.2rem 1.9rem;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}

.block-half-men {
  background: linear-gradient(160deg, #f3edff 0%, #ffffff 55%);
  border: 1px solid rgba(123, 47, 247, .16);
}

.block-half-women {
  background: linear-gradient(160deg, #ffeef6 0%, #ffffff 55%);
  border: 1px solid rgba(255, 77, 157, .18);
}

.block-half .block-head {
  text-align: left;
  margin-bottom: 1.2rem;
}

.block-half-men .block-title { -webkit-text-fill-color: var(--pc-violet); color: var(--pc-violet); }
.block-half-women .block-title { -webkit-text-fill-color: var(--pc-rose); color: var(--pc-rose); }

.pcard-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7.6rem, 100%), 1fr));
  gap: .8rem;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .9rem .5rem .8rem;
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 .8rem 1.8rem -1.1rem rgba(51, 17, 47, .5);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}

.pcard:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 1.3rem 2.4rem -1.2rem rgba(123, 47, 247, .65);
}

.pcard-badge {
  position: absolute;
  top: .5rem;
  right: -.35rem;
  padding: .12rem .5rem;
  border-radius: 2rem;
  background: var(--pc-grad-gold);
  color: #4a2c00;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 .3rem .6rem -.3rem rgba(0, 0, 0, .4);
}

.pcard-photo {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pc-cream);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255, 77, 157, .35);
}

.block-half-men .pcard-photo {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(123, 47, 247, .38);
}

.pcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcard-name {
  font-family: 'Metropolis', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--pc-ink);
}

.pcard-meta {
  font-size: .68rem;
  color: var(--pc-ink-soft);
}

.pcard-meta b {
  color: var(--pc-pink);
}

.pcard-cta {
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(107, 74, 104, .7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .2s ease, opacity .2s ease;
}

.pcard:hover .pcard-cta {
  max-height: 2rem;
  opacity: 1;
}

/* --------------------------------------------------------------
   RANKINGS (top maridos / top mujeres)
   -------------------------------------------------------------- */
.ranks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.4rem;
}

.ranks-col {
  padding: 1.5rem 1.2rem 1.6rem;
  border-radius: 2rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  box-shadow: 0 1.4rem 3rem -1.8rem rgba(123, 47, 247, .5);
}

.ranks-col-men { background: linear-gradient(170deg, #f4efff 0%, #fff 60%); }
.ranks-col-women { background: linear-gradient(170deg, #fff0f7 0%, #fff 60%); }

.ranks-title {
  margin: 0 0 1.1rem;
  font-family: 'Metropolis', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--pc-ink);
}

.ranks-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .4rem;
  border-radius: 50%;
  color: #fff;
  font-size: .95rem;
}

.ranks-col-men .ranks-ico { background: var(--pc-grad-violet); }
.ranks-col-women .ranks-ico { background: var(--pc-grad-pink); }

.rank {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 3.4rem 1fr;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  margin-bottom: .45rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .8);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.rank-info {
  display: block;
  min-width: 0;
}

.rank:hover {
  transform: translateX(4px);
  background: #fff;
  box-shadow: 0 .8rem 1.6rem -1rem rgba(51, 17, 47, .6);
}

.rank-num {
  font-family: 'Metropolis', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.05em;
  text-align: center;
  background: var(--pc-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.rank:nth-child(1) .rank-num,
.rank:nth-child(2) .rank-num,
.rank:nth-child(3) .rank-num {
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.rank-photo {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pc-cream);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 77, 157, .3);
}

.rank-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-name {
  display: block;
  font-family: 'Metropolis', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--pc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-meta {
  display: block;
  font-size: .72rem;
  color: var(--pc-ink-soft);
}

.rank-meta b {
  color: var(--pc-pink);
  font-size: .95rem;
}

.block-more {
  display: inline-block;
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pc-pink);
}

.block-more:hover {
  color: var(--pc-violet);
}

/* --------------------------------------------------------------
   MÁS VISITADOS
   -------------------------------------------------------------- */
.visited-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: 1rem;
}

.ccard-visited {
  padding: 1.1rem .9rem 1rem;
}

.ccard-rank {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .4rem;
  border-radius: 2rem;
  background: var(--pc-grad-violet);
  color: #fff;
  font-family: 'Metropolis', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  box-shadow: 0 .4rem .8rem -.4rem rgba(59, 15, 111, .9);
}

.ccard-visited:nth-child(1) .ccard-rank,
.ccard-visited:nth-child(2) .ccard-rank,
.ccard-visited:nth-child(3) .ccard-rank {
  background: var(--pc-grad-gold);
  color: #4a2c00;
}

.ccard-visited .ccard-photo {
  border-radius: .85rem;
}

.block-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-top: 1.8rem;
}

.block-cta .pc-btn-primary {
  background: var(--pc-grad-pink);
  color: #fff;
}

.block-cta .pc-btn-ghost {
  background: #fff;
  color: var(--pc-pink);
  border: 1px solid rgba(206, 33, 105, .3);
}

.block-cta .pc-btn-ghost:hover {
  background: var(--pc-grad-violet);
  color: #fff;
}

/* --------------------------------------------------------------
   FAQ
   -------------------------------------------------------------- */
.block-faq {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.faq-list {
  display: grid;
  gap: .6rem;
}

.faq-item {
  padding: .9rem 1.1rem;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  box-shadow: 0 .7rem 1.6rem -1.3rem rgba(51, 17, 47, .5);
}

.faq-item summary {
  cursor: pointer;
  font-family: 'Metropolis', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--pc-ink);
}

.faq-item p {
  margin: .6rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--pc-ink-soft);
}

.faq-item a {
  color: var(--pc-pink);
  font-weight: 600;
}

#description p {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
  font-size: .82rem;
  color: var(--pc-ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------
   HISTÓRICO: décadas y línea de tiempo por años
   -------------------------------------------------------------- */
.hero-hist {
  margin-bottom: 2.4rem;
}

.decade-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.decade-item {
  display: grid;
  grid-template-columns: 4.2rem 1fr 3.5rem;
  align-items: center;
  gap: .7rem;
}

.decade-label {
  font-family: 'Metropolis', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: -.02em;
  color: var(--pc-ink);
}

.decade-bar {
  display: block;
  height: .7rem;
  border-radius: 2rem;
  background: rgba(123, 47, 247, .1);
  overflow: hidden;
}

.decade-bar i {
  display: block;
  height: 100%;
  border-radius: 2rem;
  background: var(--pc-grad-hero);
}

.decade-count {
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
  color: var(--pc-pink);
}

.hist-year {
  margin-bottom: 2.2rem;
  padding-top: .6rem;
}

.hist-year-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(153, 0, 153, .1);
}

.hist-year-num {
  font-family: 'Metropolis', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -.05em;
  background: var(--pc-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hist-year-count {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc-ink-soft);
}

.hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: .8rem;
}

.ccard-timeline {
  padding: .9rem .75rem .85rem;
  border-radius: 1.2rem;
}

.ccard-timeline .ccard-photo {
  border-radius: .7rem;
}

.ccard-timeline .ccard-names {
  font-size: .85rem;
}

.ccard-timeline .ccard-heart {
  width: 1.6rem;
  height: 1.6rem;
  font-size: .75rem;
  margin: 0 -.35rem;
}

.hist-empty {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background: rgba(123, 47, 247, .06);
  font-size: .85rem;
  color: var(--pc-ink-soft);
}

/* --------------------------------------------------------------
   AJUSTES DE PANTALLA
   -------------------------------------------------------------- */
@media screen and (max-width: 40em) {
  .hero {
    margin: 0 0 1.6rem;
    padding: 2.2rem 1rem 2rem;
    border-radius: 1.6rem;
  }

  .hero-title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .hero-lead {
    font-size: .98rem;
    margin-bottom: 1.4rem;
  }

  .hero-actions {
    gap: .6rem;
    margin-bottom: 1.6rem;
  }

  .hero-actions .pc-btn {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .hero-stats li {
    min-width: 7.4rem;
    flex: 1 1 7.4rem;
  }

  .block-people,
  .ranks-grid {
    grid-template-columns: 1fr;
  }

  .ccard-photo {
    max-width: 8.5rem;
  }
}