/*
 * Trazos: the decorative stroke language, derived from the isotipo (rounded caps, brand greens and
 * yellow). Always aria-hidden. At most ONE composition per viewport. They never touch the logo.
 *
 * 1. Static compositions: SVG files in landing/assets/img/trazos/, placed with .c-trazos.
 *      <div class="c-trazos c-trazos--hero" aria-hidden="true"></div>      (inside a position: relative section)
 *    Variants: --hero (large, cropped by the section edge), --corner (top-right), --connector, --empty.
 *
 * 2. Drawn lines: .c-trazo-line is a rounded bar that can draw itself in (motion.css, .m-draw).
 *      <span class="c-trazo-line m-draw" aria-hidden="true"><span class="c-trazo-line__bar"></span></span>
 *    Modifiers: --vertical, --primary, --accent, --lime, --action, --thick.
 *    .c-trazo-divider: three lines of different length and color, used as a section divider.
 */
.c-trazos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: no-repeat;
}

.c-trazos--hero {
  /* Phone: the art sits at the bottom edge, below the copy (the page reserves ~18rem of bottom padding).
     Text never lies over the strokes. */
  background-image: url('../../img/trazos/hero.svg');
  background-position: right var(--md-gutter) bottom -4%;
  background-size: min(80%, 20rem) auto;
}

@media (min-width: 64em) {
  .c-trazos--hero {
    /* Desktop: enormous, cropped by the right edge; the copy owns the left half. */
    background-position: right -2% bottom 4%;
    background-size: auto 94%;
  }
}

.c-trazos--corner {
  background-image: url('../../img/trazos/corner.svg');
  background-position: right top;
  background-size: min(60%, 14rem) auto;
}

.c-trazos--connector {
  background-image: url('../../img/trazos/step-connector.svg');
  background-position: center;
  background-size: 100% auto;
}

.c-trazos--empty {
  background-image: url('../../img/trazos/empty-state.svg');
  background-position: center;
  background-size: contain;
}

/* The content of a section that carries trazos sits above them. */
.c-has-trazos {
  position: relative;
  isolation: isolate;
}

/* A line drawn as a rounded bar. The track clips; the bar slides out of it. */
.c-trazo-line {
  --_color: var(--md-color-accent);
  --_thickness: 0.5rem;
  display: block;
  inline-size: 100%;
  block-size: var(--_thickness);
  overflow: hidden;
  border-radius: var(--md-radius-full);
}

.c-trazo-line__bar {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--md-radius-full);
  background: var(--_color);
}

.c-trazo-line--thick {
  --_thickness: 1rem;
}

.c-trazo-line--primary {
  --_color: var(--md-color-primary);
}
.c-trazo-line--accent {
  --_color: var(--md-color-accent);
}
.c-trazo-line--lime {
  --_color: var(--md-color-lime);
}
.c-trazo-line--action {
  --_color: var(--md-color-action);
}

.c-trazo-line--vertical {
  inline-size: var(--_thickness);
  block-size: 100%;
  min-block-size: var(--md-space-7);
}

/* A divider: three strokes of different length and color, left aligned. */
.c-trazo-divider {
  display: flex;
  align-items: center;
  gap: var(--md-space-2);
  inline-size: 100%;
  max-inline-size: 24rem;
}

.c-trazo-divider .c-trazo-line:nth-child(1) {
  flex: 6;
}
.c-trazo-divider .c-trazo-line:nth-child(2) {
  flex: 3;
}
.c-trazo-divider .c-trazo-line:nth-child(3) {
  flex: 0 0 var(--_thickness);
}

/* Steps with a connector: a real <ol>; order is carried by position and by the words, not by numerals.
 *   <ol class="c-steps">
 *     <li class="c-steps__item c-steps__item--current">
 *       <span class="c-steps__marker" aria-hidden="true"></span>
 *       <div><h3 class="c-steps__title">Cuéntanos de tu negocio</h3><p class="c-steps__text">...</p></div>
 *     </li> ...
 *   </ol>
 */
.c-steps {
  display: grid;
  gap: var(--md-space-6);
}

.c-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--md-space-4);
}

.c-steps__marker {
  position: relative;
  display: flex;
  justify-content: center;
}

/* The dot of the step: yellow for the current one, deep green for the rest. */
.c-steps__marker::before {
  content: '';
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--md-radius-full);
  background: var(--md-color-primary);
}

.c-steps__item--current .c-steps__marker::before {
  background: var(--md-color-action);
}

/* The connector to the next step: a vertical stroke under the dot. */
.c-steps__item:not(:last-child) .c-steps__marker::after {
  content: '';
  position: absolute;
  inset-block-start: calc(1.5rem + var(--md-space-2));
  inset-block-end: calc(-1 * var(--md-space-6) + var(--md-space-2));
  inline-size: 0.375rem;
  border-radius: var(--md-radius-full);
  background: var(--md-color-accent);
}

.c-steps__title {
  font-size: var(--md-font-size-lg);
  font-weight: var(--md-weight-bold);
  line-height: var(--md-leading-snug);
}

.c-steps__text {
  color: var(--md-color-ink-soft);
}