/*
 * Home — "Prueba social" section. Tokens from Figma node 1:377.
 * Desktop: 3 testimonial cards in a row with a TrustPilot star peeking out
 * the top edge. Mobile: cards stack vertically.
 */
:root {
  --weilo-ps-bg:        #FAF6EE;
  --weilo-ps-text:      #14120F;
  --weilo-ps-text-grey: #736E66;
  --weilo-ps-border:    #14120F;
  --weilo-ps-card-w:    436px;
  --weilo-ps-card-h:    570px;
  --weilo-ps-card-gap:  38px;
  --weilo-ps-radius:    24px;
  --weilo-ps-tp-green:  #00B67A;
}

.weilo-prueba {
  background: var(--weilo-ps-bg);
  color: var(--weilo-ps-text);
  padding: 64px 0 80px;
  /* Full-bleed inside Astra/UAGB containers. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* `100vw` includes the scrollbar — clip locally so promo headline /
     any inline text doesn't leak past the page body. */
  overflow-x: hidden;
}
.weilo-prueba, .weilo-prueba * { box-sizing: border-box; }

.weilo-prueba__inner {
  max-width: calc(3 * var(--weilo-ps-card-w) + 2 * var(--weilo-ps-card-gap) + 100px);
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

/* ---------- Cards ---------- */
.weilo-prueba__cards {
  list-style: none;
  margin: 64px 0 0;       /* leaves room for the TP star peeking above the cards */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, var(--weilo-ps-card-w));
  gap: var(--weilo-ps-card-gap);
  justify-content: center;
}
.weilo-prueba__card {
  position: relative;
  margin: 0;
  padding: 80px 32px 48px;          /* extra top room for the TP logo */
  background: var(--weilo-ps-bg);
  border: 1px solid var(--weilo-ps-border);
  border-radius: var(--weilo-ps-radius);
  min-height: var(--weilo-ps-card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
}

/* ---------- TrustPilot logo (peeks above the top edge) ---------- */
.weilo-prueba__tp-logo {
  position: absolute;
  top: -28px;                       /* half of its 56px size, sits across the border */
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  display: block;
}

/* ---------- Star rating ---------- */
.weilo-prueba__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 24px;
  line-height: 0;
}
.weilo-prueba__star {
  width: 22px;
  height: 22px;
  fill: var(--weilo-ps-text);
}
.weilo-prueba__star--empty {
  fill: rgba(20, 18, 15, 0.18);
}
.weilo-prueba__star--half .weilo-prueba__star-bg {
  fill: rgba(20, 18, 15, 0.18);
}

/* ---------- Review text ---------- */
.weilo-prueba__text {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -0.01em;
  color: var(--weilo-ps-text);
  flex: 1 1 auto;             /* push author to the bottom of the card */
  display: flex;
  align-items: center;
}
.weilo-prueba__author {
  margin: 24px 0 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--weilo-ps-text-grey);
}

/* ---------- CTA + promo (under the row of cards) ---------- */
.weilo-prueba__cta {
  margin: 56px auto 0;
  width: 428px;
  max-width: 100%;
  display: inline-flex;
}

.weilo-prueba__promo {
  margin: 24px 0 0;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: var(--weilo-ps-text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}
/* Headline grabs a full row so the "| Código: EATWEILO |" trio wraps below. */
.weilo-prueba__promo > span:first-child { flex-basis: 100%; font-weight: 600; }
.weilo-prueba__promo-sep { opacity: 1 }
.weilo-prueba__promo strong { font-weight: 600; }


/* ---------- Tablet — shrink cards to fit ---------- */
@media (max-width: 1499px) and (min-width: 769px) {
  .weilo-prueba__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .weilo-prueba__card { padding: 72px 24px 40px; min-height: 520px; }
  .weilo-prueba__text { font-size: 17px; line-height: 28px; }
}

/* ---------- Mobile — stack cards vertically ---------- */
@media (max-width: 768px) {
  .weilo-prueba { padding: 48px 0 56px; }
  .weilo-prueba__inner { padding: 0 20px; }
  .weilo-prueba__cards {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .weilo-prueba__card {
    padding: 64px 24px 32px;
    min-height: 0;
  }
  .weilo-prueba__text { font-size: 16px; line-height: 26px; }
  .weilo-prueba__cta  { margin-top: 40px; width: 100%; max-width: 360px; }
  .weilo-prueba__promo { font-size: 13px; line-height: 22px; }
}