.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-150) var(--easing-entry),
    color var(--duration-150) var(--easing-entry),
    border-color var(--duration-150) var(--easing-entry);
}

.btn:active {
  transform: scale(0.95);
}

.btn-lg {
  height: 56px;
  padding: 0 var(--space-24);
}

.btn-sm {
  height: 36px;
  padding: 0 var(--space-12);
  font-size: var(--fs-body-s);
}

.btn-primary {
  background-color: var(--chartreuse);
  color: var(--ink);
  border: 0;
}

.btn-primary:hover {
  background-color: var(--ink);
  color: var(--chartreuse);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background-color: var(--neutral-200);
  color: var(--neutral-400);
  cursor: not-allowed;
}

.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover {
  background-color: var(--neutral-200);
  color: var(--neutral-400);
}

.btn-primary--bone {
  background-color: var(--bone);
  color: var(--ink);
  border: 0;
}

.btn-primary--bone:hover {
  background-color: var(--ink);
  color: var(--chartreuse);
}

.btn-primary--ink {
  background-color: var(--ink);
  color: var(--bone);
  border: 0;
}

.btn-primary--ink:hover {
  color: var(--chartreuse);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.btn-secondary:hover {
  background-color: var(--ink);
  color: var(--bone);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--ink);
  border: 0;
  padding: 0 var(--space-4);
  height: auto;
}

.btn-tertiary:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--chartreuse);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.btn--full {
  width: 100%;
  justify-content: center;
  border-radius: 0;
}

.asterisk {
  display: inline-block;
  color: var(--chartreuse);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* ============================================================
   Editorial / serif primitives
   For Profile detail (name headline, pulled quote),
   Sobre nosotros (full editorial treatment), and Explore
   empty states. Homepage does not consume these.
   ============================================================ */

.serif-headline {
  font-family: var(--font-editorial);
  font-size: var(--fs-editorial);
  line-height: var(--lh-editorial);
  letter-spacing: var(--tracking-editorial);
  font-weight: var(--fw-regular);
  color: var(--ink);
  max-width: var(--max-editorial);
}

.serif-quote {
  position: relative;
  font-family: var(--font-editorial);
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-editorial);
  color: var(--ink);
  padding-left: var(--space-24);
  max-width: 48ch;
}

.serif-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--chartreuse);
  font-family: var(--font-editorial);
  font-size: var(--fs-h2);
  line-height: 1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-64) var(--space-24);
  text-align: center;
}

.empty-state__title {
  font-family: var(--font-editorial);
  font-size: var(--fs-h3);
  line-height: var(--lh-editorial);
  letter-spacing: var(--tracking-editorial);
  font-weight: var(--fw-regular);
  color: var(--ink);
  max-width: 32ch;
}

.empty-state__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--neutral-500);
  max-width: 48ch;
}

.asterisk-divider {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-32);
  color: var(--neutral-300);
  font-size: var(--fs-h3);
  line-height: 1;
}

.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sand);
  border-radius: var(--radius-image);
  color: var(--chartreuse);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  overflow: hidden;
}

.img-placeholder::after {
  content: "✱";
  opacity: 0.6;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  background-color: var(--sand);
  color: var(--neutral-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-image);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  transition:
    border-color var(--duration-150) var(--easing-entry),
    transform var(--duration-150) var(--easing-entry),
    box-shadow var(--duration-150) var(--easing-entry);
}

.profile-card:hover,
.profile-card:focus-visible {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.profile-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.profile-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--sand);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-l);
  flex: 0 0 auto;
}

.profile-card__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.profile-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-h3);
  color: var(--ink);
}

.profile-card__meta {
  font-size: var(--fs-caption);
  color: var(--neutral-500);
}

.profile-card__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--fs-body-s);
  color: var(--ink);
}

.profile-card__status li {
  display: flex;
  gap: var(--space-8);
  align-items: baseline;
}

.profile-card__status li::before {
  content: "✱";
  color: var(--chartreuse);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  flex: 0 0 auto;
}

.profile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.profile-card__looking {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--neutral-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-card__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-16);
  border-top: 1px solid var(--neutral-200);
}

.profile-card--grid {
  height: 100%;
}

.profile-card--skeleton {
  pointer-events: none;
}

.profile-card--skeleton .profile-card__avatar,
.profile-card--skeleton .profile-card__name,
.profile-card--skeleton .profile-card__meta,
.profile-card--skeleton .profile-card__status li,
.profile-card--skeleton .profile-card__tags span,
.profile-card--skeleton .profile-card__looking,
.profile-card--skeleton .profile-card__foot span {
  background-color: var(--neutral-100);
  color: transparent;
  border-color: transparent;
  animation: profile-card-pulse 1400ms ease-in-out infinite;
}

.profile-card--skeleton .profile-card__avatar {
  background-color: var(--neutral-100);
  border-color: transparent;
}

.profile-card--skeleton .profile-card__name {
  width: 60%;
  min-height: 30px;
  border-radius: var(--radius-image);
}

.profile-card--skeleton .profile-card__meta {
  width: 40%;
  min-height: 18px;
  border-radius: var(--radius-image);
}

.profile-card--skeleton .profile-card__status li {
  min-height: 22px;
  border-radius: var(--radius-image);
}

.profile-card--skeleton .profile-card__status li::before {
  content: "";
}

.profile-card--skeleton .profile-card__tags {
  min-height: calc(var(--space-24) * 2 + var(--space-8));
}

.profile-card--skeleton .profile-card__tags span {
  display: inline-block;
  width: 72px;
  height: 24px;
  border-radius: var(--radius-image);
}

.profile-card--skeleton .profile-card__looking {
  min-height: calc(var(--fs-body-s) * var(--lh-body-s) * 2);
  border-radius: var(--radius-image);
}

.profile-card--skeleton .profile-card__foot span {
  display: inline-block;
  width: 96px;
  height: 20px;
  border-radius: var(--radius-image);
}

@keyframes profile-card-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card--skeleton .profile-card__avatar,
  .profile-card--skeleton .profile-card__name,
  .profile-card--skeleton .profile-card__meta,
  .profile-card--skeleton .profile-card__status li,
  .profile-card--skeleton .profile-card__tags span,
  .profile-card--skeleton .profile-card__looking,
  .profile-card--skeleton .profile-card__foot span {
    animation: none;
    opacity: 0.75;
  }
}

.how-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
}

.how-card__number {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--neutral-400);
}

.how-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.how-card__body {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--neutral-700);
}

/* ============================================================
   Form primitives
   Cross-page reusable text input, textarea, select, label,
   asterisk, helper text, and character counter. Page-specific
   layout and zone spacing live in the consuming page's CSS.
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.form-field__asterisk {
  display: inline-block;
  margin-left: var(--space-4);
  color: var(--chartreuse);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.form-field__helper {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--neutral-500);
  margin: 0;
  max-width: 64ch;
}

.form-input {
  height: 48px;
  padding: 0 var(--space-16);
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-button);
  width: 100%;
  transition:
    border-color var(--duration-150) var(--easing-entry),
    outline-color var(--duration-150) var(--easing-entry);
}

.form-input::placeholder {
  color: var(--neutral-400);
}

.form-input:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 2px;
  border-color: var(--ink);
}

.form-input.is-error,
.form-input[aria-invalid="true"] {
  border-color: var(--error);
}

.form-input:disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-400);
  cursor: not-allowed;
}

.form-textarea {
  height: auto;
  padding: var(--space-16);
  min-height: var(--space-128);
  max-height: 320px;
  field-sizing: content;
  resize: none;
  line-height: var(--lh-body);
}

.form-select {
  height: 48px;
  padding: 0 var(--space-48) 0 var(--space-16);
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-button);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='%235C5A50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  cursor: pointer;
  transition:
    border-color var(--duration-150) var(--easing-entry),
    outline-color var(--duration-150) var(--easing-entry);
}

.form-select:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 2px;
  border-color: var(--ink);
}

.form-counter {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--neutral-400);
  text-align: right;
  margin: var(--space-8) 0 0 0;
}

.form-counter.is-exceeded {
  color: var(--error);
}