/* Secciones de la landing: requisitos, premio, inscripción, pasa por tu historia, preguntas y CTA fijo. */

/* ---------- Requisitos ---------- */

.reqs {
  padding-block: var(--space-section);
}

.reqs__grid {
  display: grid;
}

.req-list {
  display: grid;
  margin: 0;
}

.req {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.req:last-child {
  border-bottom: 1px solid var(--color-border);
}

.req__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-border);
}

.req__title {
  margin-bottom: var(--space-1);
  font-size: 1.25rem;
}

.req__body p {
  color: var(--color-muted);
}

@media (min-width: 1024px) {
  .reqs__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .reqs__head {
    position: sticky;
    top: var(--space-6);
    margin-bottom: 0;
  }
}

/* ---------- Premio ---------- */

.prize {
  padding-block: var(--space-section);
  background: var(--color-paper);
  overflow: clip;
}

.prize__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.prize__wall {
  position: relative;
  width: 100%;
  max-width: 30rem;
  min-height: 27rem;
  margin-inline: auto;
}

.prize__print {
  position: absolute;
  width: 58%;
  margin: 0;
}

.prize__print .print__img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.prize__print--a { --tilt: -4deg; top: 6%; left: 4%; }
.prize__print--b { --tilt: 3deg; --tape-tilt: 6deg; right: 4%; bottom: 8%; width: 52%; }

.prize__ref {
  position: absolute;
  left: 4%;
  bottom: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
}

.prize__copy {
  display: grid;
  gap: var(--space-4);
}

.prize__copy h2 {
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.facts {
  margin: var(--space-3) 0 0;
}

.fact {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1.5px dashed var(--color-wood-light);
}

.fact dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--color-heading);
}

.fact dt .icon {
  color: var(--color-primary);
}

.fact dd {
  margin: 0;
}

@media (min-width: 1024px) {
  .prize__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .prize__wall {
    max-width: none;
    min-height: 34rem;
  }
}

/* ---------- Inscripción (contenedor) ---------- */

.signup {
  padding-block: var(--space-section);
}

.signup__wrap {
  display: grid;
  justify-items: center;
}

/* ---------- Pasa por tu historia ---------- */

.visit {
  padding-block: var(--space-section);
  background: var(--color-heading);
  color: var(--color-on-dark-muted);
  overflow: clip;
}

.visit__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.visit__copy {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
}

.visit__copy h2 {
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-on-dark);
}

.kicker--on-dark {
  color: var(--color-wood-light);
}

.visit__fine {
  font-size: var(--text-sm);
}

.visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.visit :focus-visible {
  outline-color: var(--color-on-dark);
}

.btn--on-dark {
  border-color: var(--color-on-dark-muted);
  background: transparent;
  color: var(--color-on-dark);
}

.btn--on-dark:hover {
  background: var(--color-on-dark);
  color: var(--color-heading);
}

.visit__phone {
  display: grid;
  place-items: center;
  order: 2;
}

.story-frame {
  position: relative;
  width: min(62vw, 16.5rem);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 28px;
  background: var(--color-text);
  box-shadow: 0 0 0 8px var(--color-text), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  transform: rotate(-4deg);
}

.story-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-frame__bars {
  position: absolute;
  inset: 12px 12px auto;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.story-frame__bars span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 253, 249, 0.45);
}

.story-frame__bars span:first-child {
  background: var(--color-on-dark);
}

.story-frame__head {
  position: absolute;
  top: 26px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-on-dark);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.story-frame__head img {
  border-radius: 50%;
  background: var(--color-surface);
}

.story-frame__tag {
  position: absolute;
  left: 50%;
  bottom: 16%;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-weight: 800;
  color: var(--color-heading);
  white-space: nowrap;
  transform: translateX(-50%) rotate(-4deg);
}

@media (min-width: 1024px) {
  .visit__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .visit__phone {
    order: 0;
  }
}

/* ---------- Preguntas ---------- */

.faq {
  padding-block: var(--space-section);
}

.faq__grid {
  display: grid;
}

.faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding-block: var(--space-4);
  font-weight: 800;
  color: var(--color-heading);
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover {
  color: var(--color-primary-strong);
}

.faq-item__q .icon {
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item[open] .faq-item__q .icon {
  transform: rotate(180deg);
}

.faq-item__a {
  max-width: var(--width-prose);
  padding-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: var(--space-6);
  }
}

/* ---------- CTA fijo en móvil ---------- */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-gutter) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--color-bg);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  box-shadow: 0 -12px 24px -18px rgba(90, 26, 43, 0.45);
  transform: translateY(110%);
  transition: transform var(--duration-base) var(--ease-out);
}

.sticky-cta[data-visible="true"] {
  transform: translateY(0);
}

@media (max-width: 1023px) {
  .site-footer {
    padding-bottom: calc(var(--space-6) + 5rem);
  }
}

@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}