/* servicios.css */

.page-hero {
  padding-top: calc(var(--nav-h) + var(--space-7));
  padding-bottom: var(--space-7);
  position: relative;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 18ch;
  margin-top: var(--space-3);
}

.page-hero__lead {
  margin-top: var(--space-5);
  max-width: 60ch;
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

/* ---- Service block ---- */
.service-block {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
}

@media (min-width: 920px) {
  .service-block { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); }
}

.service-block__intro { display: flex; flex-direction: column; gap: var(--space-3); }

.service-block__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--citrus);
  letter-spacing: 0.1em;
}

.service-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
  font-weight: 400;
}

.service-block__desc {
  color: var(--ink-soft);
  max-width: 38ch;
  font-size: var(--fs-md);
}

.service-block__price {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink);
}

.service-block__price-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.service-block__list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .service-block__list { grid-template-columns: repeat(2, 1fr); }
}

.service-block__item {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.service-block__item:hover { border-color: var(--ink); }

.service-block__item-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
}

.service-block__item-desc { font-size: var(--fs-sm); color: var(--ink-soft); }

.service-block__item-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}

/* ---- Previewer ---- */
.previewer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

@media (min-width: 920px) {
  .previewer { grid-template-columns: 0.9fr 1.1fr; padding: var(--space-6); }
}

.previewer__drop {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  min-height: 220px;
  justify-content: center;
}

.previewer__drop:hover, .previewer__drop.is-drag {
  border-color: var(--citrus);
  background: var(--citrus-light);
}

.previewer__drop.has-logo { border-style: solid; border-color: var(--leaf); }

.previewer__drop-icon {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
}

.previewer__drop-text { font-size: var(--fs-sm); color: var(--ink-soft); }

.previewer__stage {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.previewer__tabs {
  display: flex;
  gap: 0.4rem;
}

.previewer__tab {
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.previewer__tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.previewer__mockup {
  display: none;
  flex: 1;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.previewer__mockup.is-active { display: flex; }
.previewer__mockup svg { width: 100%; height: auto; max-height: 320px; }

.previewer__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}