/* ============================================================
   Growketing — Content blocks (all 15 MVP)
   Mirrors the Astro index layout. One file for simplicity of
   the pilot; per-block splitting can be done post-MVP.
   ============================================================ */

/* ---------- 1. thin-banner ---------- */
.gk-thin-banner {
  background: var(--gk-vf);
  padding: 1rem 1.5rem;
}
.gk-thin-banner__inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  max-width: 1200px; margin: 0 auto;
}
.gk-thin-banner img { height: 20px; }
.gk-thin-banner p { margin: 0; color: var(--gk-gm); font-size: 16px; font-weight: 600; text-align: center; }

/* ---------- 2. pills-marquee ---------- */
.gk-pills-marquee { padding: 1.5rem 0; overflow: hidden; }
.gk-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.5rem; border-radius: 15px; margin: 0 .75rem;
  font-size: 16px; font-weight: 400;
  background: var(--gk-vf); color: var(--gk-vo);
  white-space: nowrap;
}
.gk-pill.is-accent { background: var(--gk-vi); color: #fff; }

/* ---------- 3. logo-marquee (clients + partners) ---------- */
.gk-logo-marquee { padding: 2.5rem 0; overflow: hidden; }
.gk-logo-marquee--bordered { border-top: 1px solid var(--gk-bd); border-bottom: 1px solid var(--gk-bd); }
.gk-logo-marquee--bordered-bottom { border-bottom: 1px solid var(--gk-bd); }
.gk-logo-marquee img {
  height: 40px; margin: 0 2rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .3s, opacity .3s;
}
@media (min-width: 1024px) {
  .gk-logo-marquee img { height: 56px; margin: 0 3rem; }
}
.gk-logo-marquee img:hover { filter: grayscale(0); opacity: 1; }
.gk-logo-marquee--partners img { filter: none; opacity: 1; height: 48px; }
@media (min-width: 1024px) { .gk-logo-marquee--partners img { height: 64px; } }

/* ---------- 4. sub-hero-message ---------- */
.gk-sub-hero {
  background: var(--gk-dg);
  padding: 6rem 1.5rem;
  text-align: center;
}
@media (min-width: 1024px) { .gk-sub-hero { padding: 10rem 5rem; } }
.gk-sub-hero p {
  color: #fff;
  font-size: clamp(22px, 3vw, 35px);
  font-weight: 300;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
}
.gk-sub-hero__mark {
  position: relative; display: inline-block;
}
.gk-sub-hero__mark img {
  position: absolute; top: -14px; left: -14px; right: -14px; bottom: -14px;
  width: 115%; height: auto; pointer-events: none;
}
.gk-sub-hero__icon { display: inline-block; vertical-align: middle; width: 32px; height: 32px; }
@media (min-width: 1024px) { .gk-sub-hero__icon { width: 48px; height: 48px; } }
.gk-sub-hero__arrow { margin: 2rem auto 0; width: 64px; height: auto; }
@media (min-width: 1024px) { .gk-sub-hero__arrow { width: 96px; } }

/* ---------- 5. section-big-image (Somos Growketing) ---------- */
.gk-section-big { padding: 5rem 2rem; text-align: center; }
@media (min-width: 1024px) { .gk-section-big { padding: 8rem 5rem; } }
.gk-section-big h2 {
  font-size: clamp(50px, 7vw, 85px);
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0;
}
.gk-section-big h2 em, .gk-section-big h2 .gk-accent { color: var(--gk-vc); font-style: normal; }
.gk-section-big__image { width: 100%; max-width: 700px; margin: 3rem auto 0; }
@media (min-width: 1024px) { .gk-section-big__image { margin-top: 5rem; } }

/* ---------- 6. hero-video (home) ---------- */
.gk-hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background: var(--gk-hero-gradient);
}
.gk-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 0;
}
.gk-hero__content {
  position: relative; z-index: 1;
  padding: 8rem 2rem 5rem;
}
@media (min-width: 1024px) { .gk-hero__content { padding: 12rem 5rem 5rem; } }
.gk-hero__eyebrow {
  color: #e9ebea; text-transform: uppercase; font-size: 16px;
  margin: 0 0 1.5rem;
  letter-spacing: 0;
}
.gk-hero__title {
  color: #fff;
  font-size: clamp(60px, 10vw, 130px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.gk-hero__title p { margin: 0; }
.gk-hero__subtitle {
  color: #fff;
  font-size: clamp(20px, 3vw, 35px);
  font-weight: 300;
  line-height: 1.5;
  margin-top: 1.5rem;
}
.gk-hero__subtitle p { margin: 0; }
.gk-hero__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: .75rem 2rem;
  border: 1px solid #fff; border-radius: 5px;
  color: #fff; font-size: 19px;
  transition: background-color .2s, color .2s;
}
.gk-hero__cta:hover { background: #fff; color: var(--gk-vo); }
.gk-hero__spinner {
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%);
  width: 128px;
  opacity: .6;
  z-index: 1;
}
@media (min-width: 1024px) { .gk-hero__spinner { right: 5rem; width: 256px; } }
.gk-hero__spinner-inner { position: absolute; inset: 0; margin: auto; width: 50%; }
.gk-hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.6); z-index: 1;
}
.gk-hero__scroll span { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.gk-hero__scroll img { height: 48px; }

/* ---------- 7. services-accordion ---------- */
.gk-services { padding: 5rem 2rem; }
@media (min-width: 1024px) { .gk-services { padding: 8rem 5rem; } }
.gk-services__grid { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1024px) { .gk-services__grid { flex-direction: row; gap: 5rem; } }
.gk-services__sticky { display: none; }
@media (min-width: 1024px) {
  .gk-services__sticky { display: block; width: 40%; position: sticky; top: 8rem; align-self: flex-start; }
  .gk-services__sticky img { width: 100%; }
}
.gk-services__items { flex: 1; }
@media (min-width: 1024px) { .gk-services__items { width: 60%; } }
.gk-services h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.gk-services__lead {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 3rem;
}
.gk-svc { padding: 1.5rem 0; border-top: 1px solid var(--gk-bd); cursor: pointer; }
.gk-svc:last-child { border-bottom: 1px solid var(--gk-bd); }
.gk-svc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gk-svc__title { display: flex; align-items: center; gap: 1rem; margin: 0; }
.gk-svc__icon { width: 32px; height: 32px; }
.gk-svc__title h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 400; text-transform: uppercase; margin: 0; }
.gk-svc__chevron {
  width: 40px; height: 40px; border-radius: 50%; background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gk-svc__chevron svg { width: 16px; height: 16px; color: var(--gk-gy); transition: transform .3s; }
.gk-svc.is-open .gk-svc__chevron svg { transform: rotate(180deg); }
.gk-svc__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s, opacity .5s, margin-top .5s;
}
.gk-svc.is-open .gk-svc__body { max-height: 400px; opacity: 1; margin-top: 1rem; }
.gk-svc__body p {
  color: var(--gk-gm); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.625;
  margin: 0 0 1rem;
}

/* ---------- 8. methodology-steps ---------- */
.gk-methodology {
  padding: 5rem 2rem; text-align: center;
  border-top: 1px solid var(--gk-bd);
}
@media (min-width: 1024px) { .gk-methodology { padding: 8rem 5rem; } }
.gk-methodology h2 {
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 400; line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.gk-methodology__lead {
  color: var(--gk-gm); font-size: 18px;
  max-width: 700px; margin: 0 auto 4rem;
}
.gk-methodology__steps {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding-bottom: 2rem;
}
@media (min-width: 1024px) { .gk-methodology__steps { flex-direction: row; justify-content: center; gap: 0; } }
.gk-methodology__step { display: flex; align-items: center; flex-shrink: 0; }
.gk-methodology__step-inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 144px; }
@media (min-width: 1024px) { .gk-methodology__step-inner { width: 176px; } }
.gk-methodology__step img.gk-step-icon { width: 56px; height: 56px; margin-bottom: .75rem; }
.gk-methodology__step-num { color: var(--gk-vf); font-size: 26px; font-weight: 400; margin: 0 0 .25rem; }
.gk-methodology__step-label { font-size: 19px; margin: 0; line-height: 1.2; }
.gk-methodology__sep { height: 24px; width: 40px; margin: 0 .5rem; display: none; }
@media (min-width: 1024px) { .gk-methodology__sep { display: block; } }

/* ---------- 9. promo-banner (Growketeam) ---------- */
.gk-promo {
  position: relative; overflow: hidden;
  background: var(--gk-vi); color: #fff;
  padding: 5rem 2rem; text-align: center;
}
@media (min-width: 1024px) { .gk-promo { padding: 8rem 5rem; } }
.gk-promo__image { width: 96px; margin: 0 auto 2rem; border-radius: 1rem; }
@media (min-width: 1024px) { .gk-promo__image { width: 128px; } }
.gk-promo__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1.5rem; opacity: .8; }
.gk-promo h2 {
  font-size: clamp(28px, 3.5vw, 45px);
  font-weight: 400;
  line-height: 1.2;
  max-width: 900px; margin: 0 auto;
}
.gk-promo h2 .gk-accent { color: var(--gk-vf); }
.gk-promo .gk-btn { margin-top: 2.5rem; }
.gk-promo .gk-btn--outline-white:hover { color: var(--gk-vi); }

/* ---------- 10. case-cards (carousel + grid variants) ---------- */
.gk-cases { padding: 5rem 2rem; }
@media (min-width: 1024px) { .gk-cases { padding: 8rem 5rem; } }
.gk-cases h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600; line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 3rem;
}
.gk-case {
  position: relative;
  width: 320px; height: 480px;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
  background-size: cover; background-position: center;
}
@media (min-width: 1024px) { .gk-case { width: 450px; height: 550px; } }
.gk-case::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2), transparent);
}
.gk-case__cat {
  position: absolute; top: 20px; left: 20px;
  background: var(--gk-vf); color: var(--gk-vo);
  padding: .375rem 1rem; border-radius: 20px;
  font-size: 16px; text-transform: uppercase;
}
.gk-case__body {
  position: absolute; bottom: 24px; left: 24px; right: 24px; color: #fff;
}
.gk-case__name { font-size: clamp(28px, 3vw, 42px); font-weight: 400; line-height: 1.4; margin: 0 0 .25rem; }
.gk-case__metric { font-size: clamp(40px, 5vw, 56px); font-weight: 600; line-height: 1; text-transform: uppercase; margin: 0; }
.gk-case__desc { font-size: 14px; opacity: .8; margin: .5rem 0 0; }
.gk-case__link {
  display: inline-block; margin-top: .75rem;
  padding: .375rem 1rem; border: 1px solid #fff; border-radius: 10px;
  color: #fff; font-size: 16px;
}
.gk-case__link:hover { background: #fff; color: var(--gk-vo); }
.gk-cases__footer { margin-top: 2rem; text-align: center; }

/* ---------- 11. testimonials-grid ---------- */
.gk-testimonials { padding: 5rem 2rem; }
@media (min-width: 1024px) { .gk-testimonials { padding: 8rem 5rem; } }
.gk-testimonials__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; }
.gk-testimonials__head h2 {
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 400; line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}
.gk-testimonials__nav { display: flex; gap: .75rem; }
.gk-testimonials__nav button {
  width: 40px; height: 40px;
  border: 1px solid var(--gk-bd); border-radius: 50%;
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, opacity .2s;
}
.gk-testimonials__nav button:hover { border-color: var(--gk-vc); }
.gk-testimonials__nav button[disabled] { opacity: .35; cursor: default; }
.gk-testimonials__nav img { width: 16px; height: 16px; }

.gk-testimonials__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1rem;
  /* bleed a bit past the section padding so cards can reach the edge */
  margin-inline: -2rem;
  padding-inline: 2rem;
}
.gk-testimonials__track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .gk-testimonials__track { margin-inline: -5rem; padding-inline: 5rem; }
}

.gk-testimonial {
  background: #fff; border: 1px solid var(--gk-bd);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  flex: 0 0 85%;
}
@media (min-width: 768px) { .gk-testimonial { flex-basis: 46%; } }
@media (min-width: 1024px) { .gk-testimonial { flex-basis: calc((100% - 1.5rem * 3) / 4); } }
.gk-testimonial__head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.gk-testimonial__photo-wrap { position: relative; flex-shrink: 0; }
.gk-testimonial__photo-bg { width: 64px; height: 64px; }
.gk-testimonial__photo {
  position: absolute; inset: 4px;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover; object-position: top;
}
.gk-testimonial__company-logo { height: 32px; object-fit: contain; margin-top: .25rem; }
.gk-testimonial blockquote {
  color: var(--gk-gm); font-size: 14px; line-height: 1.625;
  flex: 1; margin: 0 0 1.5rem;
}
.gk-testimonial__author { display: flex; flex-direction: column; }
.gk-testimonial__author strong { font-size: 14px; font-weight: 700; }
.gk-testimonial__author span { color: var(--gk-gy); font-size: 12px; }

/* ---------- 12. newsletter (Expande tus horizontes) ---------- */
.gk-newsletter {
  padding: 5rem 2rem;
  border-top: 1px solid var(--gk-bd);
  position: relative;
}
@media (min-width: 1024px) { .gk-newsletter { padding: 6rem 5rem; } }
.gk-newsletter__inner {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}
.gk-newsletter__text {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.gk-newsletter__text h2 {
  font-size: clamp(50px, 7vw, 80px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
}
.gk-newsletter__text h2 img { display: inline-block; vertical-align: middle; width: 40px; height: 40px; }
@media (min-width: 1024px) { .gk-newsletter__text h2 img { width: 56px; height: 56px; } }
.gk-newsletter__lead {
  color: var(--gk-gm); font-size: 18px;
  margin: 1.5rem auto; max-width: 560px;
}
.gk-newsletter__lead .gk-accent { color: var(--gk-vc); }
.gk-newsletter__arrow {
  width: 120px; height: auto;
  transform: scaleX(-1) rotate(-10deg);
  align-self: flex-start;
  margin: 0 0 -1rem 15%;
}
@media (max-width: 767px) { .gk-newsletter__arrow { display: none; } }
.gk-newsletter__form {
  display: flex; gap: .75rem;
  width: 100%;
  max-width: 450px;
  margin-inline: auto;
}
.gk-newsletter__form input {
  flex: 1;
  border: 1px solid var(--gk-bd); border-radius: 8px;
  padding: .75rem 1.5rem;
  font-size: 14px;
}
.gk-newsletter__form input:focus { outline-color: var(--gk-vc); }
.gk-newsletter__form button {
  background: var(--gk-vc); color: #fff;
  padding: .75rem 1.5rem;
  border: 0; border-radius: 8px;
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  transition: background-color .2s;
}
.gk-newsletter__form button:hover { background: var(--gk-dg); }
.gk-newsletter__spinner {
  width: 180px; height: 180px; position: relative;
  display: none;
}
@media (min-width: 1024px) {
  .gk-newsletter__spinner {
    display: block;
    position: absolute;
    top: 0; right: 0;
  }
}
.gk-newsletter__spinner img:first-child { width: 100%; animation: gk-spin-slow 20s linear infinite; }
.gk-newsletter__spinner img:last-child { position: absolute; inset: 0; margin: auto; width: 80px; }

/* ---------- 13. social-connect (CONECTEMOS) ---------- */
.gk-social {
  background: #f9fafb;
  padding: 3rem 2rem;
}
@media (min-width: 1024px) { .gk-social { padding: 4rem 5rem; } }
.gk-social__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 2rem;
  max-width: 1400px; margin-inline: auto;
}
@media (min-width: 1024px) {
  .gk-social__inner { flex-direction: row; align-items: center; }
}
.gk-social h2 {
  flex: 1;
  font-size: clamp(44px, 9vw, 140px);
  font-weight: 400; line-height: 1;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}
@media (min-width: 1024px) { .gk-social h2 { text-align: left; } }
.gk-social__right {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding-inline: 2rem;
}
@media (min-width: 1024px) {
  .gk-social__right {
    align-items: flex-start;
    border-left: 1px solid var(--gk-bd);
    padding-left: 2.5rem;
  }
}
.gk-social__icons { display: flex; gap: .75rem; }
.gk-social__icons a { display: inline-flex; transition: opacity .2s; }
.gk-social__icons a:hover { opacity: .75; }
.gk-social__icons img { width: 40px; height: 40px; }
.gk-social__email { color: var(--gk-vc); font-weight: 500; }
.gk-social__email:hover { text-decoration: underline; }

/* ---------- 14. contact-form (¿Listo para crecer?) ---------- */
.gk-contact {
  padding: 5rem 2rem;
  border-top: 1px solid var(--gk-bd);
}
@media (min-width: 1024px) { .gk-contact { padding: 8rem 5rem; } }
.gk-contact__inner { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1024px) { .gk-contact__inner { flex-direction: row; align-items: flex-start; } }
.gk-contact__intro { flex: 1; }
.gk-contact__intro h2 {
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 400; line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}
.gk-contact__intro p { color: var(--gk-gm); font-size: 18px; margin-top: 1.5rem; }
.gk-contact__image { width: 192px; margin-top: 2rem; display: none; }
@media (min-width: 1024px) { .gk-contact__image { display: block; } }
.gk-contact__form { flex: 1; }
.gk-contact__form-box { border: 1px solid var(--gk-bd); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.gk-contact__form-box input,
.gk-contact__form-box select,
.gk-contact__form-box textarea {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--gk-bd);
  padding: .75rem 0;
  font-size: 14px;
  background: transparent;
}
.gk-contact__form-box select,
.gk-contact__form-box textarea {
  border: 1px solid var(--gk-bd); border-radius: 6px;
  padding: .75rem;
}
.gk-contact__form-box textarea { min-height: 120px; resize: vertical; }
.gk-contact__form-box input:focus,
.gk-contact__form-box select:focus,
.gk-contact__form-box textarea:focus { outline: none; border-bottom-color: var(--gk-vc); }
.gk-contact__form-box label.gk-chk { display: flex; align-items: center; gap: .5rem; font-size: 14px; }
.gk-contact__form-box button[type="submit"] {
  align-self: center;
  border: 1px solid var(--gk-vc);
  color: var(--gk-vc);
  background: transparent;
  padding: .5rem 2rem;
  border-radius: 8px;
  font-size: 16px; font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.gk-contact__form-box button[type="submit"]:hover { background: var(--gk-vc); color: #fff; }

/* ---------- 15. hero-simple ---------- */
.gk-hero-simple {
  padding: 8rem 2rem 4rem;
  text-align: center;
}
@media (min-width: 1024px) { .gk-hero-simple { padding: 12rem 5rem 5rem; } }
.gk-hero-simple__eyebrow { color: var(--gk-vc); text-transform: uppercase; font-size: 14px; font-weight: 600; margin: 0 0 1rem; }
.gk-hero-simple h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400; line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}
.gk-hero-simple__lead {
  color: var(--gk-gm); font-size: 18px;
  max-width: 700px; margin: 1.5rem auto 0;
}