/* ==========================================================================
   Ordenar.me — global stylesheet
   Design tokens first, then base elements, then shared components,
   then page sections. Keep additions in the matching block.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --primary-blue: #0042c6;
  --violet: #8951e0;
  --gradient-purple: #a77bec;
  --dark-gray: #404040;
  --lighter-gray: #727272;
  --mid-gray: #999;
  --gainsboro: #e5e2e7;
  --light-bg: #fafafa;
  --white: #fff;

  --gradient: linear-gradient(150deg, var(--gradient-purple) 17%, var(--primary-blue));

  --container: 1170px;
  --nav-height: 90px;
  --radius-pill: 40px;
  --ease: .2s ease;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
  background-color: var(--white);
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  border: 0;
}

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

p { margin: 0 0 10px; }

/* ---------- Layout ---------- */
/* Pages whose sections sit on a gray page background */
body.is-gray { background-color: var(--gainsboro); }

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
}

/* ---------- Typography helpers ---------- */
.h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.h3--section {
  margin-bottom: 0;
  font-size: 24px;
  color: var(--violet);
}

.h3--small {
  margin-bottom: 0;
  font-size: 20px;
  color: var(--dark-gray);
}

.paragraph {
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  color: var(--lighter-gray);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--primary-blue);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}

.btn:hover { background-color: var(--violet); }

.btn--inverted {
  background-color: var(--white);
  color: var(--primary-blue);
}

.btn--inverted:hover {
  background-color: var(--white);
  color: var(--violet);
}

.btn--large { font-size: 16px; }

.btn-text {
  display: inline-block;
  margin-top: 20px;
  padding: 0 20px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--gainsboro);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--ease);
}

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

/* ---------- Navigation ---------- */
.nav {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 30px;
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  height: var(--nav-height);
}

.nav__logo img { width: 184px; }

.nav__menu {
  display: flex;
  align-items: center;
}

.nav__link {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark-gray);
  transition: color var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--primary-blue); }

.nav__bullet {
  width: 4px;
  height: 4px;
  margin: 0 15px;
  border-radius: 50%;
  background-color: var(--dark-gray);
}

.nav__menu .btn { margin-left: 15px; }

.nav__toggle {
  display: none;
  padding: 18px;
  border: 0;
  background: none;
  color: var(--dark-gray);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Inverted nav: sits on top of a gradient header (see .header-inner) */
.nav--inverted { z-index: 10; }
.nav--inverted .nav__logo { font-size: 22px; font-weight: 700; color: var(--white); }
.nav--inverted .nav__link { color: var(--gainsboro); }
.nav--inverted .nav__link:hover,
.nav--inverted .nav__link.is-active { color: var(--white); }
.nav--inverted .nav__bullet { background-color: var(--white); }
.nav--inverted .nav__toggle { color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 130px 30px 100px;
  background-image: var(--gradient);
  overflow: hidden;
}

.hero__content {
  position: relative;
  max-width: 650px;
  text-align: center;
}

.hero__slogan {
  width: 300px;
  margin-bottom: 30px;
}

.hero__p {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 300;
  line-height: 36px;
  color: var(--white);
}

/* Decorative illustrations bleeding out of the hero */
.illustration { pointer-events: none; }

.illustration--top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.illustration--top-right img {
  position: relative;
  width: 300px;
  transform: translate(300px, -140px);
}

.illustration--bottom-left {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: -200px;
}

.illustration--bottom-left img {
  width: 230px;
  transform: translate(-450px, -120px);
}

/* ---------- Features ---------- */
.features {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 30px;
}

.features__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  margin: 0 -10px;
}

.feature {
  width: 33.3333%;
  padding: 0 10px;
  text-align: center;
}

.feature__icon {
  width: 100px;
  height: 100px;
}

.feature__title {
  padding: 30px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-gray);
}

.feature__text {
  font-size: 18px;
  line-height: 26px;
  color: var(--lighter-gray);
}

.features__cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* ---------- Partners ---------- */
.partners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 80px 30px 60px;
  background-color: var(--light-bg);
}

.partners__list {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.partners__logo {
  width: 150px;
  opacity: .6;
  filter: grayscale(100%);
}

/* ---------- Info block ---------- */
.info-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 120px 30px;
}

.info-block__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.info-block__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
}

.info-block__heading {
  display: flex;
  flex: 1;
  align-items: center;
  margin-bottom: 15px;
}

.info-block__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.info-block__illustration {
  position: absolute;
  width: 400px;
  transform: translateY(50px);
}

/* Mobile-only stand-ins for the large combined illustration */
.info-block__monedero,
.info-block__cerdito { display: none; }

/* ---------- Inner page header (gradient) ---------- */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--nav-height) * -1);
  padding: 180px 30px 0;
  background-image: linear-gradient(135deg, var(--gradient-purple), var(--primary-blue));
}

.header-inner__category {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.header-inner__category .h3 { color: var(--white); }

.header-inner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.header-inner__title {
  max-width: 940px;
  margin: 0 auto;
  font-size: 44px;
  font-weight: 400;
  line-height: 140%;
  text-align: center;
  color: #fffc;
}

.header-inner__title strong { color: var(--white); font-weight: 700; }

/* ---------- Pricing ---------- */
.pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px 0 60px;
  padding: 0 30px;
}

.pricing__title { color: var(--white); }

.pricing__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  margin: 0 -10px;
}

.pricing__col {
  display: flex;
  flex: 50%;
  margin: 10px 0;
}

.pricing__col--pad { padding: 10px 0; }

.pricing-card {
  height: 100%;
  padding: 50px 40px 40px;
  border-radius: 8px;
  background-color: var(--white);
  color: var(--primary-blue);
}

/* Translucent left card, flush against the white one */
.pricing-card--ghost {
  background-color: #fff3;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pricing-card--offset { margin-right: 10px; }

.pricing-card__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 300;
  color: var(--dark-gray);
}

.pricing-card__desc {
  margin: 20px 0;
  font-size: 16px;
  line-height: 140%;
  color: var(--dark-gray);
}

.pricing-card__note {
  margin-top: 20px;
  font-weight: 600;
  opacity: .8;
  color: var(--dark-gray);
}

/* Boxed sub-plan inside the subscription card */
.pricing-plan {
  margin: 20px -12px 0;
  padding: 16px 12px;
  border: 1px solid #00000029;
  border-radius: 12px;
}

.pricing-plan .h3 { font-weight: 600; }

.pricing__cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Feature rows (check + text), reused by every pricing card */
.feature-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.feature-row__icon { flex: none; width: 30px; }

.feature-row__title {
  margin: 5px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 140%;
  color: var(--dark-gray);
}

.feature-row__text {
  font-size: 16px;
  line-height: 140%;
  color: var(--dark-gray);
}

/* On the translucent card everything turns white */
.pricing-card--ghost .pricing-card__title,
.pricing-card--ghost .pricing-card__desc,
.pricing-card--ghost .pricing-card__note,
.pricing-card--ghost .feature-row__title,
.pricing-card--ghost .feature-row__text { color: var(--white); }

/* ---------- Teams CTA ---------- */
.teams-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 30px;
}

.teams-cta__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.teams-cta__text { width: 50%; }

.teams-cta__lead {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 36px;
  color: #b3b3b3;
}

.teams-cta__action {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

/* ---------- Light inner-page header ---------- */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px 30px 60px;
  border-top: 1px solid var(--gainsboro);
  background-color: var(--white);
}

.page-header__title {
  max-width: 680px;
  margin: 20px 0 10px;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  color: var(--dark-gray);
}

.page-header__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--dark-gray);
}

/* ---------- Legal prose ---------- */
.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 60px;
  color: var(--lighter-gray);
}

.legal__h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark-gray);
}

.legal__h3 {
  margin: 36px 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark-gray);
}

.legal__p,
.legal__list {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -.25px;
}

.legal__list { padding-left: 20px; }

.legal__list li { margin-bottom: 8px; }

.legal strong { color: var(--dark-gray); font-weight: 600; }

/* ---------- FAQ accordion ---------- */
.section-gray { background-color: var(--gainsboro); }

.faq {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0;
}

.faq__item { margin: 10px 0; }

.faq__question {
  display: flex;
  width: 100%;
  padding: 40px 15px 40px 0;
  border: 0;
  border-bottom: 1px solid #0000000a;
  background: none;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__question-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-blue);
}

/* One icon for both states: the plus rotates into a cross when open */
.faq__icon {
  flex: none;
  width: 20px;
  opacity: .5;
  transition: transform var(--ease);
}

.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

/* Collapse via grid rows so the panel animates to its natural height */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}

.faq__answer > div { min-height: 0; }

.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }

.faq__text {
  margin: 0;
  padding: 20px 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.25px;
  color: var(--lighter-gray);
}

.faq__text a {
  color: inherit;
  border-bottom: 1px dashed #787878;
}

/* ---------- Tab switcher (three sibling landing pages) ---------- */
.switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}

.switcher__tabs {
  display: flex;
  gap: 4px;
  height: 48px;
  padding: 4px;
  border-radius: 24px;
  background-color: #ffffff1a;
}

.switcher__tab {
  height: 40px;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #ffffff40;
  color: var(--white);
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

/* Inactive tabs are transparent until hovered */
.switcher__tab--off {
  background-color: #fff0;
  color: #ffffffbf;
  transition: background-color var(--ease), color var(--ease);
}

.switcher__tab--off:hover { background-color: #ffffff1a; color: var(--white); }

.switcher__tab--current { pointer-events: none; }

/* ---------- Left-aligned gradient hero (landing pages) ---------- */
.landing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--nav-height) * -1);
  padding: 180px 30px 90px;
  background-image: linear-gradient(135deg, var(--violet), var(--primary-blue));
}

/* Pages whose next section pulls up into the gradient need the header to
   end in empty space, so the overlap never covers the content above it. */
.landing-header--deep { padding-bottom: 210px; }

.landing-header__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.landing-header__eyebrow .h3 { color: var(--white); }

/* Short rule trailing the eyebrow label */
.landing-header__rule {
  width: 30px;
  height: 2px;
  margin-left: 20px;
  background-color: var(--white);
}

.landing-header__title {
  margin: 0 0 30px;
  font-size: 72px;
  font-weight: 800;
  line-height: 78px;
  letter-spacing: -1px;
  color: var(--white);
}

.landing-header__lead {
  max-width: 560px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--white);
}

.landing-header .btn { margin-top: 20px; }

/* ---------- Alternating text / phone-video rows ---------- */
.double-card {
  max-width: 940px;
  margin: -60px auto 0;
  padding: 0 30px;
}

.double-card__row {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 40px;
  margin-bottom: 80px;
  color: var(--primary-blue);
}

.double-card__row--reverse { flex-direction: row-reverse; }

.double-card__text {
  display: flex;
  flex-direction: column;
  width: 60%;
  max-width: 400px;
}

.double-card__title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-blue);
}

.double-card__text p {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--primary-blue);
}

/* Phone-shaped frame around the looping app video */
.phone-video {
  flex: none;
  width: 220px;
  height: 400px;
  border: 4px solid #ffffff80;
  border-radius: 30px;
  overflow: hidden;
}

.phone-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-card__cta {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

/* ---------- Personality grid (Test de Personalidad Financiera) ---------- */
.personalities {
  display: flex;
  justify-content: center;
  margin-top: -120px;
  padding: 0 30px 40px;
}

.personalities__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

/* Each card is a translucent gradient tile over the page background */
.personality-card {
  height: 100%;
  border-radius: 8px;
  background-image: linear-gradient(#a77beccc, #0042c6cc);
}

.personality-card__link {
  display: block;
  height: 100%;
  padding: 20px 20px 0;
}

.personality-card__media { margin-bottom: 60px; }

.personality-card__media img { width: 100%; }

.personality-card__title {
  margin: 16px 0 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
}

.personality-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gainsboro);
}

/* Serif disclaimer box, reused on the detail pages */
.disclaimer {
  margin-bottom: 35px;
  padding: 35px 40px 25px;
  background-color: #ffffff4d;
}

.disclaimer p {
  margin: 0;
  font-family: "Droid Serif", Georgia, serif;
  font-size: 13px;
  line-height: 160%;
  color: var(--dark-gray);
}

/* ---------- Personality detail page ---------- */
.personality-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--nav-height) * -1);
  padding: 90px 30px 120px;
  border-top: 1px solid var(--gainsboro);
  background-color: var(--white);
}

.personality-hero__container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: var(--container);
}

.personality-hero__back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gradient-purple);
}

.personality-hero__title {
  margin: 0 0 30px;
  font-size: 72px;
  font-weight: 800;
  line-height: 78px;
  letter-spacing: -1px;
  color: var(--violet);
}

.personality-hero__lead {
  max-width: 460px;
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--gradient-purple);
}

.personality-hero__media {
  flex: none;
  margin-top: 60px;
  padding-left: 10px;
}

/* Gradient body holding the description, strengths and quote */
.personality-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px 30px 60px;
  background-image: linear-gradient(to bottom, var(--gradient-purple), var(--primary-blue));
}

.personality-body__inner {
  max-width: 760px;
  font-size: 16px;
  line-height: 145%;
  color: var(--white);
}

.personality-body__inner ul { margin-bottom: 100px; padding-left: 20px; }

.personality-body__inner li { margin-bottom: 10px; }

/* Shared section label: centred, uppercase, wide-tracked */
.personality-label {
  padding: 30px 0 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

.personality-label--dark { color: var(--primary-blue); }

.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
  text-align: center;
}

.quote__text {
  max-width: 500px;
  font-family: "Droid Serif", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 130%;
}

.quote__author { font-size: 14px; }

.personality-message {
  margin: 60px auto;
  padding: 0 30px;
  font-size: 16px;
  line-height: 145%;
  color: var(--lighter-gray);
}

.personality-message__inner { max-width: 760px; margin: 0 auto; }

/* ---------- Explore other personalities ---------- */
.explore {
  padding: 30px 30px 60px;
  background-color: var(--gainsboro);
}

.explore__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.explore__header {
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--lighter-gray);
}

.explore__header--spaced { margin-top: 40px; }

.explore__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0 20px;
}

.explore__link {
  font-weight: 600;
  color: var(--lighter-gray);
  transition: color var(--ease);
}

.explore__link:hover { color: var(--violet); }

.explore__link.is-current { color: var(--violet); }

/* ---------- Blog index ---------- */
.post-grid-section {
  display: flex;
  justify-content: center;
  padding: 60px 30px 90px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.post-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.post-card__media {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.post-card__media img { display: block; width: 100%; }

.post-card__date {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

.post-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dark-gray);
  transition: color var(--ease);
}

.post-card:hover .post-card__title { color: var(--primary-blue); }

.post-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lighter-gray);
}

/* ---------- Single post ---------- */
.post__hero img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
}

.post__body {
  max-width: 770px;
  margin: 0 auto;
  padding: 60px 30px 40px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lighter-gray);
}

.post__date {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

.post__title {
  margin: 0 0 40px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: #000;
}

.post__body p { margin: 0 0 20px; }

.post__body a { color: var(--primary-blue); text-decoration: underline; }

.post__body a:hover { color: var(--violet); }

.post__h2,
.post__h3 {
  margin: 40px 0 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark-gray);
}

.post__h2 { font-size: 26px; }
.post__h3 { font-size: 20px; }

.post__list { margin: 0 0 20px; padding-left: 22px; }

.post__list li { margin-bottom: 10px; }

.post__body blockquote {
  margin: 30px 0;
  padding-left: 20px;
  border-left: 3px solid var(--gradient-purple);
  font-style: italic;
  color: var(--dark-gray);
}

/* Figures hold either a still image or a converted (ex-GIF) video */
.post__figure {
  margin: 30px 0;
  text-align: center;
}

.post__figure img,
.post__figure video {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
}

.post__figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: var(--mid-gray);
}

.latest-posts {
  display: flex;
  justify-content: center;
  padding: 60px 30px 90px;
  border-top: 1px solid var(--gainsboro);
}

.latest-posts__header { margin-bottom: 40px; font-size: 20px; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 30px 150px;
  background-image: var(--gradient);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
  padding-bottom: 110px;
  border-bottom: 1px solid #fff9;
  text-align: center;
}

.footer__cta-header {
  max-width: 650px;
  margin: 0 0 40px;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: var(--white);
}

.footer__body { display: flex; flex-direction: column; }

.footer__partners { margin-bottom: 20px; }

.footer__partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* The -white.png assets are already white; no filter needed. */
.footer__partners-logos img {
  width: 140px;
  padding: 0 5px;
}

.footer__columns {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
}

.footer__logo {
  margin: 20px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.footer__social { display: flex; }

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 15px;
}

.footer__credits {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: #fff9;
}

.footer__links {
  display: flex;
  width: 70%;
}

.footer__links-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-right: 50px;
}

.footer__links-header {
  margin: 20px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}

.footer__link {
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--white);
  transition: color var(--ease);
}

.footer__link:hover { color: #ffffffb3; }

/* ---------- Modal (Personalidad Financiera test) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #00000080;
}

.modal.is-open { display: flex; }

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 90vh;
  border-radius: 12px;
  background-color: var(--white);
  overflow: hidden;
}

.modal__dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 16px;
  border: 0;
  background: none;
  color: var(--dark-gray);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  .nav__toggle { display: block; }

  .nav__menu {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 30px;
    background-color: var(--gainsboro);
    box-shadow: 0 5px 20px #0003;
    display: none;
  }

  .nav__menu.is-open { display: flex; }

  .nav__link { padding: 10px 12px; }

  .nav__bullet { display: none; }

  .nav__menu .btn { margin: 20px 0 0; }

  .hero { padding-left: 60px; padding-right: 60px; }

  .illustration--top-right img { z-index: -1; opacity: .5; transform: translate(143px, -140px); }
  .illustration--bottom-left img { transform: translate(-252px, -120px); }

  .features__list { align-items: stretch; margin: 0 -5px; }
  .feature { padding: 0 5px; }

  .partners__list { gap: 16px; }

  .info-block__left { width: 55%; }
  .info-block__right { width: 45%; margin-right: 20px; }
  .info-block__illustration { position: relative; transform: none; }

  .footer__links-group { padding-right: 20px; }

  .nav--inverted .nav__menu { background-color: var(--primary-blue); }

  .header-inner__title { font-size: 36px; }

  .pricing-card { padding-left: 20px; padding-right: 20px; }
  .feature-row__title { font-size: 15px; }
  .feature-row__text { font-size: 14px; }
  .pricing-card__title { font-size: 20px; }
  .pricing-plan { margin-left: -6px; margin-right: -6px; }
}

@media screen and (max-width: 767px) {
  .hero { min-height: 600px; padding-left: 30px; padding-right: 30px; }

  .features { padding-top: 60px; }

  .features__list { flex-direction: column; margin: -10px 0; }
  .feature { width: 100%; margin: 10px 0; padding: 0; }

  .partners { padding-top: 55px; padding-bottom: 55px; }

  .info-block { padding: 90px 140px 20px; }
  .info-block__left,
  .info-block__right { width: 100%; margin: 15px 0; justify-content: flex-start; }
  .info-block__illustration { display: none; }

  .info-block__monedero {
    display: block;
    width: 160px;
    margin: -100px -143px -70px;
  }

  .info-block__cerdito { display: block; transform: translateX(90px); }

  .footer { padding-top: 60px; padding-bottom: 60px; }
  .footer__columns { flex-wrap: wrap-reverse; }
  .footer__brand { width: 100%; margin: 15px 0; }
  .footer__links { width: 100%; margin-top: 40px; }
  .footer__partners-logos img { width: 33%; max-width: 150px; }

  .header-inner { padding-top: 150px; }

  .page-header { padding-left: 30px; padding-right: 30px; }
  .faq { padding-left: 30px; padding-right: 30px; }
  .legal { padding-left: 30px; padding-right: 30px; }

  .landing-header__title { font-size: 48px; line-height: 54px; }

  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post__title { font-size: 34px; }

  .personality-hero__container { flex-direction: column; }
  .personality-hero__title { font-size: 48px; line-height: 54px; }
  .personality-hero__media { padding-left: 0; }
  .personality-hero__media img { width: 100%; }

  .double-card { margin-top: 0; padding-top: 40px; }

  .personalities__grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; gap: 30px; }
  .explore__list { flex-direction: column; }
  .double-card__row { flex-direction: column; gap: 40px; text-align: center; }
  .double-card__row--reverse { flex-direction: column-reverse; }
  .double-card__text { width: 90%; max-width: none; align-items: center; }

  .pricing__grid { flex-direction: column; }
  .pricing__col { width: 100%; }
  .pricing__col--pad { margin: 0; }
  .pricing-card { flex: 1; }
  .pricing-card--ghost { border-radius: 8px; }
  .pricing-card--offset { margin-right: 0; }

  .teams-cta { padding: 90px 30px; }
  .teams-cta__text { width: 100%; margin: 15px 0; }
  .teams-cta__action { justify-content: center; width: 100%; padding-left: 0; }
}

@media screen and (max-width: 479px) {
  .hero { padding-top: 120px; padding-bottom: 60px; }
  .hero__p { font-size: 16px; line-height: 22px; }

  .illustration--top-right img { width: 200px; opacity: .6; transform: translate(90px, -195px); }
  .illustration--bottom-left img { width: 160px; opacity: .6; transform: translate(-120px, -170px); }

  .features { padding-top: 80px; padding-bottom: 60px; }

  .partners__list { flex-direction: column; }

  .info-block { padding: 60px 40px 20px; }
  .info-block__monedero { display: none; }
  .info-block__cerdito { max-width: 200px; transform: none; }

  .footer__cta { margin-bottom: 40px; padding-bottom: 60px; }
  .footer__cta-header { font-size: 24px; }
  .footer__links { flex-direction: column; }
  .footer__links-group { margin-bottom: 20px; padding-right: 0; }

  :root { --nav-height: 60px; }
  .header-inner { margin-top: calc(var(--nav-height) * -1); padding-top: 120px; }
  .header-inner__title { font-size: 28px; }

  .switcher__tabs { height: auto; flex-wrap: wrap; justify-content: center; }

  .personalities { margin-top: -90px; }
  .landing-header--deep { padding-bottom: 160px; }
  .personality-hero__title { font-size: 30px; line-height: 42px; letter-spacing: 0; }
  .personality-body { padding-top: 60px; padding-bottom: 60px; }
  .post__title { font-size: 28px; letter-spacing: 0; }
  .post__body { padding-top: 40px; font-size: 16px; }
  .landing-header__title { font-size: 30px; line-height: 42px; letter-spacing: 0; }

  .page-header { padding-top: 80px; }
  .page-header__title { font-size: 30px; line-height: 38px; }
  .faq__question-title { flex: 1; }

  .pricing { margin-top: 40px; margin-bottom: 90px; padding-left: 0; padding-right: 0; }

  .teams-cta__lead { font-size: 20px; line-height: 30px; }
}