/* Rebeca Iervese landing — layout only; color/type/space via design tokens */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--brand-blue-content-default-para);
  background: var(--info-50);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

.visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip_link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--success-btn-solid-bg);
  color: var(--success-btn-solid-text);
  border-radius: var(--radius-full);
}

.skip_link:focus {
  top: var(--space-md);
}

/* ---------- Header ---------- */

.site_header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--space-sm) var(--space-md);
}

.site_header_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-md);
  background: var(--brand-blue-content-default-bg);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-brand-blue-default-1);
}

.nav_links {
  display: none;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  font-weight: 500;
  z-index: 1;
}

.nav_links a:hover {
  color: var(--color-500);
}

.brand_mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.brand_mark_text {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: var(--text-14);
  letter-spacing: 0.18em;
  color: var(--color-500);
}

.nav_actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  z-index: 1;
}

.lang_switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
}

.lang_btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 1.75rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: var(--text-10);
  line-height: var(--text-10-lh);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--neutral-600);
}

.lang_btn.is_active {
  background: var(--color-white);
  color: var(--color-500);
  box-shadow: var(--shadow-brand-blue-default-1);
}

.nav_menu_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-500);
  cursor: pointer;
}

.nav_menu_btn .material-symbols-outlined {
  font-size: var(--text-18);
}

.nav_drawer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin: 0 var(--space-md) var(--space-md);
  background: var(--brand-blue-content-default-bg);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxl);
}

.nav_drawer[hidden] {
  display: none !important;
}

.nav_drawer a {
  font-size: var(--text-14);
  font-weight: 500;
}

/* ---------- CTAs ---------- */

.cta_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  min-height: 2.5rem;
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--success-btn-solid-border);
  background: var(--success-btn-solid-bg);
  color: var(--success-btn-solid-text);
  font-family: var(--font-family-body);
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background var(--motion-dur-sm) var(--motion-easing),
    transform var(--motion-dur-sm) var(--motion-easing);
}

.cta_pill:hover {
  background: var(--success-btn-solid-hover-bg);
  transform: translateY(-1px);
}

.cta_pill .material-symbols-outlined {
  font-size: var(--text-16);
}

.cta_pill_sm {
  min-height: 2rem;
  padding: 0 var(--space-sm);
  font-size: var(--text-10);
}

.cta_pill_lg {
  min-height: 3rem;
  padding: 0 var(--space-lg);
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
}

.text_link {
  font-size: var(--text-14);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--color-100);
}

.text_link:hover {
  color: var(--color-white);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--brand-blue-content-primary-bg);
  color: var(--brand-blue-content-primary-para);
  padding: var(--space-xxl) var(--space-md);
  overflow: hidden;
}

.hero_stage {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-xl) 0 var(--space-xxl);
}

.hero_eyebrow {
  font-family: var(--font-family-heading);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-18);
  line-height: var(--text-18-lh);
  color: var(--success-300);
}

.hero_eyebrow_sep {
  opacity: 0.55;
}

.hero_title_brand {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-title-56);
  line-height: var(--text-title-56-lh);
  color: var(--brand-blue-content-primary-title);
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
}

.hero_lead {
  max-width: 36rem;
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--color-100);
}

.hero_cta_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.float_card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  color: var(--color-500);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brand-blue-default-3);
  animation: float_y 5.5s var(--motion-easing) infinite;
}

.float_card_label {
  font-size: var(--text-10);
  line-height: var(--text-10-lh);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
}

.float_card_metric {
  font-family: var(--font-family-heading);
  font-size: var(--text-14);
  font-weight: 600;
}

.float_card_a {
  top: 8%;
  left: 0;
  transform: rotate(-8deg);
  animation-delay: 0s;
}

.float_card_b {
  top: 12%;
  right: 0;
  transform: rotate(7deg);
  animation-delay: 0.8s;
  background: var(--info-100);
}

.float_card_c {
  bottom: 4%;
  left: 8%;
  transform: rotate(5deg);
  animation-delay: 1.4s;
  background: var(--success-100);
}

@keyframes float_y {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@media (max-width: 720px) {
  .float_card {
    display: none;
  }
}

/* ---------- Stats ---------- */

.stats {
  padding: 0 var(--space-md);
  margin-top: calc(var(--space-xl) * -1);
  position: relative;
  z-index: 2;
}

.stats_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 960px;
  margin: 0 auto;
}

.stat_card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-lg);
  background: var(--brand-blue-content-default-bg);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxl);
}

.stat_num {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-40);
  line-height: var(--text-title-40-lh);
  font-weight: 700;
  color: var(--color-500);
}

.stat_label {
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--neutral-600);
}

/* ---------- Mission ---------- */

.mission {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-xxl) var(--space-md);
  background: var(--info-50);
}

.mission_title {
  max-width: 40rem;
  font-family: var(--font-family-heading);
  font-size: var(--text-title-40);
  line-height: var(--text-title-40-lh);
  font-weight: var(--font-weight-heading);
  color: var(--color-500);
}

.mission_para {
  max-width: 34rem;
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--neutral-700);
}

/* ---------- Section chrome ---------- */

.section_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.section_head_center {
  align-items: center;
  text-align: center;
}

.section_eyebrow {
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--info-600);
}

.section_title {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-40);
  line-height: var(--text-title-40-lh);
  font-weight: var(--font-weight-heading);
  color: var(--color-500);
}

.section_lead {
  max-width: 36rem;
  margin-top: var(--space-xs);
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--neutral-600);
}

.section_head_center .section_lead {
  margin-inline: auto;
}

.section_cta_row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* ---------- Diff ---------- */

.diff {
  padding: var(--space-xxl) var(--space-md);
  background: var(--color-white);
}

.diff_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 920px;
  margin: 0 auto;
}

.diff_card {
  padding: var(--space-lg);
  border-radius: var(--radius-xxl);
  border: 1px solid var(--neutral-200);
}

.diff_card_muted {
  background: var(--neutral-50);
  color: var(--neutral-700);
}

.diff_card_accent {
  background: var(--color-500);
  border-color: var(--color-500);
  color: var(--color-50);
}

.diff_card_title {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-26);
  line-height: var(--text-title-26-lh);
  margin-bottom: var(--space-md);
}

.diff_card_muted .diff_card_title {
  color: var(--neutral-700);
}

.diff_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
}

.diff_list li {
  padding-left: var(--space-md);
  position: relative;
}

.diff_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--neutral-400);
}

.diff_card_accent .diff_list li::before {
  background: var(--success-300);
}

/* ---------- Services / framework ---------- */

.services {
  padding: var(--space-xxl) var(--space-md);
  background: var(--info-50);
}

.framework_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

.framework_card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxl);
}

.framework_step {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-32);
  line-height: var(--text-title-32-lh);
  color: var(--success-600);
}

.service_name {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-26);
  line-height: var(--text-title-26-lh);
  color: var(--color-500);
}

.service_desc {
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--neutral-600);
}

/* ---------- Offers ---------- */

.offers {
  padding: var(--space-xxl) var(--space-md);
  background: var(--color-white);
  overflow: hidden;
}

/* ---------- Offer tilt cards ---------- */

.tilt_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 1000px;
  margin: 0 auto;
}

.tilt_card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-xxl);
  color: var(--color-white);
  transition: transform var(--motion-dur-md) var(--motion-easing);
}

.tilt_intro {
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  opacity: 0.92;
}

.cta_pill_on_dark {
  margin-top: auto;
  align-self: flex-start;
}

.tilt_card:hover {
  transform: rotate(0deg) scale(1.02);
}

.tilt_card_green {
  background: var(--success-700);
  transform: rotate(-2deg);
}

.tilt_card_lavender {
  background: var(--info-600);
  transform: rotate(1.5deg);
}

.tilt_card_blue {
  background: var(--info-800);
  transform: rotate(-1deg);
}

.tilt_title {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-28);
  line-height: var(--text-title-28-lh);
}

.tilt_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
}

.tilt_list li {
  padding-left: var(--space-md);
  position: relative;
}

.tilt_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--success-300);
}

/* ---------- About ---------- */

.about {
  padding: var(--space-xxl) var(--space-md);
  background: var(--info-50);
}

.about_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.about_frame {
  aspect-ratio: 3 / 4;
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--radius-xxl);
  background:
    linear-gradient(160deg, var(--color-400), var(--color-700));
  display: flex;
  align-items: center;
  justify-content: center;
}

.about_frame_initials {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-82);
  line-height: 1;
  color: var(--color-50);
  opacity: 0.85;
}

.about_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.about_para {
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--neutral-700);
  max-width: 36rem;
}

.about_cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
}

.about_col_title {
  font-family: var(--font-family-heading);
  font-size: var(--text-18);
  line-height: var(--text-18-lh);
  margin-bottom: var(--space-xs);
  color: var(--color-500);
}

.check_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.check_list li {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: var(--text-14);
  color: var(--neutral-700);
}

.check_list .material-symbols-outlined {
  font-size: var(--text-16);
  color: var(--success-600);
}

/* ---------- Final CTA ---------- */

.final_cta {
  padding: var(--space-xxl) var(--space-md);
  background: var(--brand-blue-content-primary-bg);
  color: var(--brand-blue-content-primary-para);
}

.final_cta_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.final_cta_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.final_cta_title {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-40);
  line-height: var(--text-title-40-lh);
  color: var(--brand-blue-content-primary-title);
  max-width: 20ch;
}

.final_cta_para {
  max-width: 34rem;
  color: var(--color-100);
}

.final_cta_panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xxl);
  background: var(--color-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
}

.final_cta_icon {
  font-size: var(--text-title-48);
  color: var(--success-300);
}

.final_cta_panel_text {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-22);
  line-height: var(--text-title-22-lh);
  color: var(--color-50);
}

/* ---------- Footer ---------- */

.site_footer {
  position: relative;
  padding: var(--space-xxl) var(--space-md) var(--space-md);
  background: var(--info-50);
  overflow: hidden;
}

.footer_watermark {
  position: absolute;
  left: 50%;
  bottom: -0.15em;
  transform: translateX(-50%);
  font-family: var(--font-family-heading);
  font-size: clamp(4rem, 18vw, 12rem);
  line-height: 0.8;
  font-weight: 700;
  color: var(--info-100);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.footer_inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto var(--space-xl);
}

.footer_brand {
  font-family: var(--font-family-heading);
  font-size: var(--text-title-28);
  line-height: var(--text-title-28-lh);
  color: var(--color-500);
  margin-bottom: var(--space-xxs);
}

.footer_tag {
  font-size: var(--text-14);
  color: var(--neutral-600);
  margin-bottom: var(--space-md);
}

.footer_cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.footer_cols a,
.footer_note {
  display: block;
  font-size: var(--text-14);
  color: var(--neutral-700);
  margin-top: var(--space-xs);
}

.footer_col_title {
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-500);
}

.footer_bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: 1000px;
  margin: 0 auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--info-200);
  font-size: var(--text-12);
  color: var(--neutral-600);
}

.lang_switch_footer {
  background: var(--color-white);
}

/* ---------- FAB ---------- */

.fab_whatsapp {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 40;
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--success-btn-solid-bg);
  color: var(--success-btn-solid-text);
  border: 1px solid var(--success-btn-solid-border);
  box-shadow: var(--shadow-brand-blue-default-3);
  transition: transform var(--motion-dur-sm) var(--motion-easing);
}

.fab_whatsapp:hover {
  transform: scale(1.06);
}

.fab_whatsapp .material-symbols-outlined {
  font-size: var(--text-title-26);
}

/* ---------- Reveal motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--motion-dur-xl) var(--motion-easing),
    transform var(--motion-dur-xl) var(--motion-easing);
}

.reveal.is_visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
  .nav_links {
    display: flex;
  }

  .nav_actions {
    justify-content: flex-end;
  }

  .nav_menu_btn {
    display: none;
  }

  .nav_drawer {
    display: none !important;
  }

  .stats_grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .diff_grid {
    grid-template-columns: 1fr 1fr;
  }

  .framework_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tilt_grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    padding: var(--space-md) 0;
  }

  .about_grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .about_cols {
    grid-template-columns: 1fr 1fr;
  }

  .final_cta_grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .footer_inner {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (min-width: 1024px) {
  .hero_stage {
    padding: var(--space-xxl) 0;
  }

  .site_header {
    padding: var(--space-md) var(--space-xl);
  }
}