/* Home page only. Shared layout/components live in tokens.css, base.css and
   components.css (see docs/COMPONENTES_FRONTEND_BUENTAJO.md §3.1). */

/* Hero ---------------------------------------------------------------------
   Two columns: the commercial pitch on the left, the search card on the right.
   The band runs edge to edge (.bleed) while its content stays aligned with
   .container, so the tinted background reads as a real section, not a box. */
.hero {
  /* Three layers: a warm ember glow bottom-left, a green glow top-right and
     the cream base. Keeps the band alive without a photograph and without a
     second background image request. */
  background: radial-gradient(120% 90% at 88% 4%, var(--color-accent-soft) 0%, transparent 58%),
    radial-gradient(80% 70% at 2% 96%, var(--color-ember-softer) 0%, transparent 60%),
    linear-gradient(168deg, var(--color-accent-softer) 0%, var(--color-cream) 72%);
  border-bottom: 1px solid var(--color-line);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--space-8);
  align-items: center;
}

/* A grid item's automatic minimum size is its content's min-content width,
   and the horizontally scrolling chip row inside the search card has a very
   wide one. Without this the single-column layout below 960px stretches the
   whole hero to the width of the chip row. */
.hero__copy,
.hero__panel {
  min-width: 0;
}

.hero h1 {
  margin: 0;
  max-width: 17ch;
  font-size: var(--font-display);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.hero-copy {
  max-width: 52ch;
  color: var(--color-muted);
  font-size: var(--font-body-lg);
  margin: var(--space-4) 0 var(--space-5);
}

/* Quiet secondary routes out of the hero: the search card above them is the
   primary action, so these are links, not a second row of big buttons. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0;
}

/* Composición ilustrada -----------------------------------------------------*/
.hero-figure {
  position: relative;
  display: grid;
  justify-items: center;
}

.hero-figure__svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

.hero-figure__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(var(--space-5) * -1) 0 0;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  max-width: 390px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
  color: var(--color-muted);
  font-size: var(--font-body-sm);
}

.hero-figure__note strong {
  color: var(--color-ink);
}

/* Tira de confianza del hero ------------------------------------------------*/
.hero__trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: var(--space-8) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-line);
}

.hero__trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.hero__trust span:last-child {
  display: block;
  color: var(--color-muted);
  font-size: var(--font-body-sm);
  line-height: 1.45;
}

.hero__trust strong {
  display: block;
  color: var(--color-ink);
  font-size: 0.95rem;
}

/* Search card --------------------------------------------------------------*/
.search-card-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
}

.search-card-shell__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-heading-sm);
  letter-spacing: -0.03em;
}

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

.search-card .field {
  margin: 0;
}

.search-card-shell__chips {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.search-card-shell__chips-label {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-body-sm);
  font-weight: 700;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 100%;
  /* Category names are admin-editable content, not fixed copy — a single
     unusually long one must scroll within this row instead of breaking the
     page's own width at narrow viewports (see e2e/tests/responsive.spec.js). */
  overflow-x: auto;
}

.chip-row .category-chip {
  padding: 8px 14px;
  min-height: 40px;
  font-size: 0.86rem;
}

.form-message {
  min-height: 1.25em;
  margin: 10px 4px 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Cómo funciona ------------------------------------------------------------*/
.steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}

.steps li {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.steps li:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Connector between steps: a dashed rule running from one card to the next,
   drawn on the card itself so no extra markup is needed. Hidden on the last
   step and on any layout narrower than three columns. */
.steps li::after {
  content: "";
  position: absolute;
  top: 54px;
  left: 100%;
  width: var(--space-6);
  border-top: 2px dashed var(--color-line-strong);
}

.steps li:last-child::after {
  display: none;
}

/* The step number rides on the top edge of the card, like a milestone. */
.steps__num {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.steps h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-heading-md);
  letter-spacing: -0.02em;
}

.steps li p {
  margin: 0;
  color: var(--color-muted);
}

/* Categorías ---------------------------------------------------------------*/
/* Alternating band: the category grid sits on white so the tinted tiles have
   a neutral ground, between two cream sections. */
.featured-categories {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.featured-categories__more {
  margin: var(--space-6) 0 0;
}

/* Confianza ----------------------------------------------------------------*/
.trust {
  background: var(--color-neutral-softer);
  border-bottom: 1px solid var(--color-line);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust__item {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.trust__item:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.trust__item h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-heading-md);
  letter-spacing: -0.02em;
}

.trust__item p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-body-sm);
  line-height: 1.6;
}

/* Captación de profesionales ----------------------------------------------*/
.pro-cta {
  background: radial-gradient(90% 120% at 88% 0%, var(--color-ink-glow) 0%, transparent 62%),
    linear-gradient(140deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
  color: #fff;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.pro-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-8);
  align-items: center;
}

.pro-cta .eyebrow {
  color: var(--color-accent-bright);
}

.pro-cta h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-heading-lg);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.pro-cta p {
  margin: 0 0 var(--space-6);
  color: var(--color-ink-on-dark);
  max-width: 56ch;
}

.pro-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pro-cta .pro-cta__foot {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent-bright);
  font-size: var(--font-body-sm);
}

/* The eight tools a subscription actually opens, as light cards over the dark
   band — the visual argument that BuenTajo is a workspace, not a lead list. */
.pro-cta__tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pro-cta__tools li {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  transition: background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.pro-cta__tools li:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.pro-cta__tools strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.pro-cta__tools span:last-child {
  color: var(--color-ink-on-dark);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* On the dark band the tinted tiles would go muddy, so every tool icon uses
   the same translucent chip with the bright accent. */
.pro-cta__tools .icon-tile {
  margin-bottom: var(--space-2);
  background: rgba(132, 216, 174, 0.16);
  color: var(--color-accent-bright);
}

/* Estados dentro de la portada --------------------------------------------*/
.featured-categories .state-block,
.top-rated .state-block {
  grid-column: 1 / -1;
}

@media (max-width: 1080px) {
  .hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 960px) {
  .hero__grid,
  .pro-cta__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero h1 {
    max-width: 20ch;
  }

  /* The illustration is decoration, not content: stacked, it falls under the
     search card (its source order) and shrinks, so it never pushes the
     conversion path down the page. */
  .hero-figure__svg {
    max-width: 380px;
  }

  .steps ol,
  .trust__list {
    grid-template-columns: 1fr 1fr;
  }

  /* Two columns means the connector would point at the wrong card. */
  .steps li::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
  }

  .search-card-shell {
    padding: var(--space-5);
  }

  /* On a phone eight wrapped chips push the whole page down; one swipeable
     row keeps the shortcut without burying the trust strip below it. */
  .chip-row {
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }

  .hero-figure__svg {
    max-width: 320px;
  }

  .hero__trust {
    margin-top: var(--space-6);
  }

  .steps ol,
  .trust__list {
    grid-template-columns: 1fr;
  }

  .pro-cta__tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero__trust {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .hero-figure__note {
    margin-top: calc(var(--space-3) * -1);
    padding-right: var(--space-4);
  }
}