/* PlanSí Core · heroes.css — encabezados ilustrados por sección, estados vacíos y pantallas de logro
   (app-heroes.js). Mismo lenguaje que la portada aprobada del cuestionario (hero 3): crema, manchas rosa
   y oro, sombras suaves, Fraunces + Inter. Imágenes en assets/secciones/ (PENDIENTES DE APROBACIÓN). */
.shero, .slogro {
  --sh-crema: var(--bg-crema, #F7F2E9);
  --sh-blanco: var(--blanco, #FFFDF8);
  --sh-tinta: var(--tinta, #222A1E);
  --sh-tinta-2: var(--tinta-suave, #4A5244);
  --sh-berry: #7A0B44;
  --sh-cta: #A9105A;
  --sh-magenta: #E11D74;
  --sh-oro: #F5B301;
  --sh-rosa: #FADCEB;
  --sh-serif: "Fraunces", Georgia, serif;
  --sh-sans: "Inter", system-ui, "Segoe UI", sans-serif;
}

/* ---------- encabezado compacto ---------- */
.shero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  gap: 4px;
  max-height: 180px;
  min-height: 150px;
  margin: 0 0 14px;
  padding: 14px 0 14px 16px;
  overflow: hidden;
  border-radius: 24px;
  color: var(--sh-tinta);
  font-family: var(--sh-sans);
  background:
    radial-gradient(120px 110px at 8% 0%, rgba(250, 220, 235, .95), transparent 70%),
    radial-gradient(90px 80px at 100% 100%, rgba(244, 233, 201, .95), transparent 70%),
    var(--sh-crema);
  box-shadow: 0 2px 10px rgba(34, 42, 30, .07), 0 18px 44px -24px rgba(34, 42, 30, .25);
  animation: sheroEntra .45s ease both;
}
.shero__txt { position: relative; z-index: 1; min-width: 0; }
.pg-card > .shero { margin: 4px -4px 14px; }
.pg-card > .shero .shero__t { font-size: 1rem; }
.shero__ceja {
  margin: 0 0 2px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sh-berry);
}
.shero__t {
  margin: 0;
  font-family: var(--sh-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.18;
  color: var(--sh-tinta);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shero__l {
  margin: 4px 0 10px;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--sh-tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shero__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font: 600 .86rem/1.1 var(--sh-sans);
  color: #fff;
  background: var(--sh-cta);
  box-shadow: 0 8px 18px -8px rgba(169, 16, 90, .6);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background-color .2s ease;
}
.shero__btn svg { width: 16px; height: 16px; flex: none; }
.shero__btn:hover { background: var(--sh-berry); }
.shero__btn:active { transform: scale(.97); }
.shero__btn:focus-visible { outline: 3px solid var(--sh-magenta); outline-offset: 3px; }
.shero__btn .onb-onda { background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .2) 45%, transparent 70%); }
.shero__img {
  align-self: stretch;
  width: 150px;
  height: 100%;
  max-height: 180px;
  margin: -14px 0 -14px -10px;
  object-fit: cover;
  object-position: 30% 20%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  animation: sheroFlota 6s ease-in-out infinite alternate;
}
@media (min-width: 720px) {
  .shero { grid-template-columns: minmax(0, 1fr) 210px; max-height: 200px; padding-left: 24px; }
  .shero__t { font-size: 1.3rem; }
  .shero__img { width: 230px; max-height: 200px; }
}
@keyframes sheroEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheroFlota { from { transform: translateY(0); } to { transform: translateY(-5px); } }

/* ---------- estados vacíos ---------- */
.shero-vacio__img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 20px;
  animation: sheroEntra .45s ease both;
}

/* ---------- pantalla de logro ---------- */
.slogro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(34, 42, 30, .45);
  animation: slogroFondo .25s ease both;
}
.slogro__caja {
  position: relative;
  width: min(380px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0 20px 20px;
  border-radius: 28px;
  text-align: center;
  font-family: var(--sh-sans);
  color: var(--sh-tinta);
  background: var(--sh-crema);
  box-shadow: 0 30px 60px -20px rgba(34, 42, 30, .45);
  animation: slogroPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.slogro__img { display: block; width: calc(100% + 40px); height: auto; margin: 0 -20px 6px; }
.slogro__t { margin: 2px 0 6px; font: 600 1.45rem/1.15 var(--sh-serif); color: var(--sh-berry); }
.slogro__l { margin: 0 0 16px; font-size: .95rem; line-height: 1.4; color: var(--sh-tinta-2); }
.slogro__btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
.slogro__cerrar {
  display: block;
  margin: 10px auto 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: 600 .9rem var(--sh-sans);
  color: var(--sh-berry);
  text-decoration: underline;
  cursor: pointer;
}
.slogro__cerrar:focus-visible { outline: 3px solid var(--sh-magenta); outline-offset: 2px; border-radius: 8px; }
.slogro__chispas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.slogro__ch {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sh-oro);
  opacity: 0;
  animation: slogroChispa 1.4s ease-out .2s both;
}
.slogro__ch:nth-child(3n) { background: var(--sh-magenta); border-radius: 50%; }
.slogro__ch:nth-child(4n) { background: var(--sh-rosa); }
.slogro__ch--0 { --dx: -150px; --dy: -160px; }
.slogro__ch--1 { --dx: 140px; --dy: -150px; }
.slogro__ch--2 { --dx: -120px; --dy: -60px; }
.slogro__ch--3 { --dx: 160px; --dy: -40px; }
.slogro__ch--4 { --dx: -60px; --dy: -190px; }
.slogro__ch--5 { --dx: 70px; --dy: -200px; }
.slogro__ch--6 { --dx: -170px; --dy: 20px; }
.slogro__ch--7 { --dx: 175px; --dy: 40px; }
.slogro__ch--8 { --dx: -20px; --dy: -230px; }
.slogro__ch--9 { --dx: 30px; --dy: -120px; }
@keyframes slogroFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes slogroPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes slogroChispa {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(220deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shero, .shero__img, .shero-vacio__img, .slogro, .slogro__caja { animation: none; }
  .slogro__chispas { display: none; }
  .shero__btn { transition: none; }
  .shero__btn:active { transform: none; }
  .shero__btn .onb-onda { display: none; }
}