/* MyScrape-specific refinements layered on top of the exported application. */

.mys-offer-section {
  background:
    radial-gradient(circle at 12% 18%, hsl(var(--primary) / .10), transparent 30%),
    radial-gradient(circle at 90% 82%, hsl(var(--accent) / .08), transparent 34%);
}

.mys-offer-original { display: none !important; }

.mys-offer-container {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
}

.mys-offer-heading {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.mys-offer-heading h2 {
  margin-bottom: 1rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
}

.mys-offer-heading h2 span,
.mys-offer-index,
.mys-offer-kicker { color: hsl(var(--primary)); }

.mys-offer-heading p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; }

.mys-offer-shell {
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 1.5rem;
  background: hsl(var(--card) / .84);
  box-shadow: 0 28px 80px -42px hsl(var(--primary) / .7);
  backdrop-filter: blur(18px);
}

.mys-offer-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: .75rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / .55);
}

.mys-offer-tab {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: hsl(var(--muted-foreground));
  text-align: left;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.mys-offer-tab:hover { color: hsl(var(--foreground)); transform: translateY(-2px); }
.mys-offer-tab[aria-selected="true"] {
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary) / .35);
  background: hsl(var(--background));
  box-shadow: 0 10px 30px -20px hsl(var(--primary));
}

.mys-offer-index {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .7rem;
  background: hsl(var(--primary) / .1);
  font: 700 .75rem/1 "Space Grotesk", sans-serif;
}

.mys-offer-tab strong { font: 600 .88rem/1.25 "Space Grotesk", sans-serif; }

.mys-offer-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-height: 330px;
  padding: clamp(2rem, 5vw, 4rem);
  animation: mys-panel-in .35s ease both;
}

.mys-offer-kicker {
  margin-bottom: .75rem;
  font: 700 .72rem/1 "Inter", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mys-offer-panel h3 {
  margin-bottom: 1rem;
  font: 700 clamp(1.8rem, 4vw, 2.75rem)/1.08 "Space Grotesk", sans-serif;
}

.mys-offer-panel p { color: hsl(var(--muted-foreground)); font-size: 1.05rem; line-height: 1.7; }
.mys-offer-list { display: grid; gap: .8rem; }
.mys-offer-list li {
  position: relative;
  padding: 1rem 1rem 1rem 3.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  background: hsl(var(--background) / .74);
  font-weight: 600;
}
.mys-offer-list li::before {
  position: absolute;
  top: 50%;
  left: 1rem;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--gradient-primary);
  content: "✓";
  font-size: .7rem;
  transform: translateY(-50%);
}

.mys-infra-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  padding: .9rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / .5);
}
.mys-infra-strip span {
  padding: .8rem;
  border-radius: .8rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background) / .8);
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
}

.mys-chores-section .mys-chore-grid {
  grid-template-columns: 1fr !important;
  gap: .8rem !important;
}
.mys-chore-hidden { display: none !important; }
.mys-chore-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.65rem !important;
  background: linear-gradient(115deg, hsl(var(--card)), hsl(var(--primary) / .035)) !important;
}
.mys-chore-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  content: "";
  background: var(--gradient-primary);
  opacity: .55;
}
.mys-chore-card h3 { font-size: 1rem !important; text-decoration: none !important; }
.mys-chore-card svg { color: hsl(var(--primary)) !important; }
.mys-chore-card > div > div:first-child { background: hsl(var(--primary) / .1) !important; }

.mys-steps-hint {
  margin-top: .65rem;
  color: hsl(var(--primary));
  font-size: .8rem;
  font-weight: 600;
}
.mys-steps-list { position: relative; }
.mys-old-timeline-marker { display: none !important; }
.mys-steps-path {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 50%;
  z-index: 1;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to bottom, hsl(var(--primary) / .12), hsl(var(--primary) / .48), hsl(var(--primary) / .12));
  transform: translateX(-50%);
}
.mys-steps-runner {
  position: absolute;
  top: 30px;
  left: 50%;
  z-index: 6;
  width: 18px;
  height: 18px;
  border: 4px solid hsl(var(--background));
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 5px hsl(var(--primary) / .13), 0 0 32px hsl(var(--primary) / .75);
  transform: translate(-50%, -50%);
  transition: top .95s cubic-bezier(.65, 0, .35, 1);
}
.mys-steps-runner.is-jumping { transition: none; }
.mys-step {
  position: relative;
  z-index: 2;
  cursor: pointer;
  outline: none;
  transition: transform .28s ease, filter .28s ease;
}
.mys-step:hover { transform: translateY(-3px); }
.mys-step:focus-visible { border-radius: 1rem; box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
.mys-step > div[class*="flex"] > div[class*="max-w-md"] {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid transparent;
  border-radius: 1.15rem;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.mys-step p { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin .3s ease; }
.mys-step.is-active > div[class*="flex"] > div[class*="max-w-md"] {
  border-color: hsl(var(--primary) / .35);
  background: hsl(var(--card) / .92);
  box-shadow: 0 22px 55px -35px hsl(var(--primary));
}
.mys-step.is-active p { max-height: 160px; margin-top: .2rem; opacity: 1; }
.mys-step.is-active svg { transform: scale(1.08) rotate(-3deg); }

.mys-team-raphael img { object-position: 50% 28% !important; }
.mys-team-abril img {
  object-position: 50% 24% !important;
  transform: scale(1.24);
  transform-origin: 50% 24%;
}
.mys-team-raphael > div:first-child,
.mys-team-abril > div:first-child { background: #e5e6ec; }
.mys-team-raphael img,
.mys-team-abril img { filter: saturate(.94) contrast(.98); }

.mys-quotes-section {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background:
    radial-gradient(circle at 15% 60%, hsl(var(--primary) / .1), transparent 33%),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary) / .25));
}
.mys-quotes-original { display: none !important; }
.mys-quotes-container { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.mys-quotes-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.mys-quotes-kicker {
  margin-bottom: .65rem;
  color: hsl(var(--primary));
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mys-quotes-heading h2 { font: 700 clamp(2.1rem, 5vw, 3.5rem)/1.02 "Space Grotesk", sans-serif; }
.mys-quotes-heading h2 span { color: hsl(var(--primary)); }
.mys-quotes-heading > p { max-width: 420px; color: hsl(var(--muted-foreground)); font-size: 1.05rem; line-height: 1.65; }
.mys-quotes-stage { position: relative; }
.mys-quotes-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem .35rem 2rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mys-quotes-track::-webkit-scrollbar { display: none; }
.mys-quote-card {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border: 1px solid hsl(var(--border));
  border-radius: 1.5rem;
  background: hsl(var(--card) / .9);
  box-shadow: 0 14px 42px -34px hsl(var(--primary));
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.mys-quote-card:not(.is-active) { opacity: .72; transform: scale(.97); }
.mys-quote-card.is-active {
  border-color: hsl(var(--primary) / .55);
  box-shadow: 0 24px 60px -28px hsl(var(--primary) / .75);
  transform: translateY(-8px);
}
.mys-quote-mark {
  position: absolute;
  top: .6rem;
  right: 1.3rem;
  color: hsl(var(--primary) / .16);
  font: 700 5rem/1 Georgia, serif;
}
.mys-quote-card blockquote {
  position: relative;
  z-index: 1;
  color: hsl(var(--foreground));
  font: 500 1.05rem/1.7 "Inter", sans-serif;
}
.mys-quote-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.mys-quote-meta strong,
.mys-quote-meta span { display: block; }
.mys-quote-meta strong { font: 700 .9rem/1.3 "Space Grotesk", sans-serif; }
.mys-quote-meta span { margin-top: .2rem; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.mys-quote-meta em {
  padding: .42rem .75rem;
  border-radius: 999px;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .08);
  font-size: .74rem;
  font-style: normal;
  font-weight: 600;
}
.mys-quotes-controls { display: flex; align-items: center; justify-content: center; gap: .85rem; }
.mys-quote-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 50%;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-size: 1.25rem;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.mys-quote-arrow:hover { color: white; background: var(--gradient-primary); transform: scale(1.06); }
.mys-quote-count { min-width: 62px; color: hsl(var(--muted-foreground)); text-align: center; font-size: .8rem; }
.mys-quote-count strong { color: hsl(var(--primary)); font-size: 1rem; }

@keyframes mys-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
  .mys-chores-section .max-w-6xl { grid-template-columns: .9fr 1.1fr !important; }
}

@media (max-width: 767px) {
  .mys-offer-container { width: min(100% - 2rem, 1120px); }
  .mys-offer-tabs { grid-template-columns: 1fr 1fr; }
  .mys-offer-tab { min-height: 64px; padding: .7rem; }
  .mys-offer-panel { grid-template-columns: 1fr; min-height: 0; padding: 2rem 1.25rem; }
  .mys-infra-strip { grid-template-columns: 1fr 1fr; }
  .mys-steps-path { left: 28px; }
  .mys-steps-runner { left: 28px; }
  .mys-step { padding-left: 3.25rem; }
  .mys-step > div[class*="flex"] > div[class*="max-w-md"] { padding: 1rem; }
  .mys-quotes-container { width: min(100% - 2rem, 1180px); }
  .mys-quotes-heading { display: block; }
  .mys-quotes-heading > p { margin-top: 1rem; }
  .mys-quotes-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; }
  .mys-quote-card:not(.is-active) { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .mys-offer-panel { animation: none; }
  .mys-step, .mys-step p, .mys-offer-tab, .mys-steps-runner, .mys-quote-card { transition: none; }
}