/* Humanity — hoja de estilos (2/3): componentes reutilizables. */

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;

  &:hover {
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0) scale(0.98);
  }

  & svg {
    transition: transform 0.2s var(--ease);
  }

  &:hover svg {
    transform: translateX(3px);
  }

  &.btn--lg {
    min-height: 3.25rem;
    padding-inline: 1.75rem;
    font-size: 1rem;
  }
}

.btn--primary {
  background: var(--blue-dark);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgb(14 118 188 / 0.6);

  &:hover {
    background: var(--ink);
    box-shadow: 0 10px 22px -8px rgb(11 37 64 / 0.5);
  }

  .section--navy & {
    background: #fff;
    color: var(--ink);
    box-shadow: none;

    &:hover {
      background: var(--green-light);
    }
  }
}

.btn--ghost {
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
  background: transparent;
  color: var(--ink);

  &:hover {
    border-color: var(--blue);
    background: #fff;
    color: var(--blue-dark);
  }
}

.btn--whatsapp {
  background: var(--green-text);
  color: #fff;

  &:hover {
    background: #15611f;
  }

  &:hover svg {
    transform: none;
  }
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;

  /* Firma de la marca: borde superior en degradado que aparece en hover/foco */
  &::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
    z-index: 2;
  }

  &:hover,
  &:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--blue) 30%, var(--line));

    &::before {
      transform: scaleX(1);
    }
  }

  & h3,
  & h4 {
    font-size: var(--step-1);
    margin-bottom: 0.5rem;
  }

  & p {
    margin: 0;
    font-size: 0.9688rem;
  }
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 0.9rem;
  background: var(--bg-mint);
  color: var(--blue-dark);
  flex: none;

  & svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  &.icon-badge--lg {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, var(--bg-mint), #e3f0f8);
  }

  &.icon-badge--dark {
    margin-bottom: 0;
    background: rgb(255 255 255 / 0.1);
    color: var(--green-light);
  }
}

/* ── Chips y listas ─────────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--green-text) 25%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  transition: transform 0.2s var(--ease), background-color 0.2s;

  &:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--green) 12%, white);
  }
}

.check-list {
  display: grid;
  gap: 0.6rem;

  & li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.9688rem;
    line-height: 1.5;
  }

  & svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    padding: 0.15rem;
    border-radius: 50%;
    background: var(--green-text);
    color: #fff;
    stroke-width: 3;
  }
}

/* ── Formularios ────────────────────────────────────────────────────────── */
.field {
  display: grid;
  gap: 0.4rem;

  & label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
  }

  & input,
  & select,
  & textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid #76889a;
    border-radius: 0.85rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;

    &:hover {
      border-color: var(--blue);
    }

    &:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgb(14 118 188 / 0.18);
    }

    &:user-invalid {
      border-color: #b3261e;
      box-shadow: 0 0 0 4px rgb(179 38 30 / 0.12);
    }
  }

  & textarea {
    resize: vertical;
    min-height: 7rem;
  }
}

/* ── Animaciones compartidas ────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
  }

  @keyframes slide-up {
    from {
      transform: translateY(22px);
    }
  }

  @keyframes float {
    50% {
      transform: translateY(-8px);
    }
  }

  /* Estado inicial solo si reveal_controller se conectó (sin JS todo se ve) */
  .reveal {
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);

    &:not(.is-visible) {
      opacity: 0;
      transform: translateY(22px);
    }
  }
}

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}