/* ============================================================
   LAYOUT — Container · Grid · Sections · Hero · Footer
   ============================================================ */

/* ---- Container ---- */

.container {
  width: 100%;
  max-width: var(--container-base);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Variantes — usar en lugar de max-width inline ad-hoc */
.container--narrow { max-width: var(--container-narrow); }   /* 720px — texto largo, artículos */
.container--wide   { max-width: var(--container-wide); }     /* 1440px — grids amplias, hero */

/* ---- Section shells ---- */

.section {
  padding-top: var(--s10);
  padding-bottom: var(--s10);
}

.section-sm {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

/* Journey section: contain decorative shapes that overflow */
.journey-section {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(80px, 8vw, 140px);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s8);
}

.section-header .t-body-lg {
  color: var(--c-text-muted);
  margin-top: var(--s3);
}

/* ---- Responsive grid ---- */

.grid {
  display: grid;
  gap: var(--s4);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

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

.hero {
  background: var(--c-bg-soft);
  padding-top: var(--s10);
  padding-bottom: var(--s10);
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ---- Hero video background ---- */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Directional overlay — heavier on text side, lighter on visual side */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Mobile: overlay uniforme oscuro porque el texto ocupa todo el ancho
     y el poster tiene tonos claros que reducen el contraste. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* Desktop: gradient horizontal con calculator a la derecha (visible),
     texto a la izquierda (oscurecido). */
  .hero-overlay {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 55%,
      rgba(0, 0, 0, 0.25) 100%
    );
  }
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-layout {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    row-gap: 0;
  }

  .hero-content {
    grid-column: 1 / 7;
  }

  .hero-visual {
    grid-column: 8 / 12;
    justify-content: flex-start;
    margin-top: 0;
  }
}

.hero-content {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-content > * + * {
  margin-top: var(--s4);
}

.hero-title { margin-top: var(--s3); }

/* Hero text — white on dark video */
.hero-content .section-eyebrow   { color: rgba(255, 255, 255, 0.72); }
.hero-content .t-display          { color: var(--c-white); }
.hero-content .t-body-lg          { color: rgba(255, 255, 255, 0.88); }

/* Mixed-weight headline: "Tu crédito" normal, "sin aval ni buró" bold */
.hero-title-thin  { font-weight: 400; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* Calculator panel — right side on desktop, stacked below on mobile */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Hero-content, hero-layout, hero-visual: ningún hijo puede romper el viewport */
.hero-layout,
.hero-content,
.hero-visual {
  min-width: 0;
  max-width: 100%;
}

/* En mobile, todo el contenido del hero queda centrado y se respeta el viewport */
@media (max-width: 1023px) {
  .hero-layout {
    justify-items: center;
  }
  .hero-content,
  .hero-visual {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.hero-card-stack {
  position: relative;
  padding: var(--s5);
}

.hero-main-card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--s5);
  box-shadow: var(--shadow-xl);
}

.hero-stat-card {
  position: absolute;
  background: var(--c-purple);
  color: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s2) var(--s3);
  box-shadow: var(--shadow-lg);
  font-weight: 700;
}

.hero-stat-card.is-top {
  top: 0;
  right: 0;
  font-size: 0.875rem;
}

.hero-stat-card.is-bottom {
  bottom: 0;
  left: 0;
  background: var(--c-lime);
  color: #1a1a1a;
  font-size: 0.875rem;
}

/* Slider shell */
.slider {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.55s ease;
}

.slider-slide {
  min-width: 100%;
  flex-shrink: 0;
}

/* ---- Community section ---- */

.community-section {
  background: var(--c-white);
  padding: calc(72px + 56px) 0 88px;
  position: relative;
  z-index: 1;
  margin-top: -56px;
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
  box-shadow: 0 -18px 40px rgba(143, 58, 142, 0.18);
}

/* Inner content wrapper — constrains and pads the content independently
   of the full-bleed section background */
.community-section .container {
  max-width: 1180px;
  padding-left:  clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 901px) {
  .community-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

/* ---- Left column ---- */

.community-left {
  display: flex;
  flex-direction: column;
}

.community-headline {
  font-family: inherit;
  font-size: clamp(2rem, 4.8vw, 4rem);
  font-weight: 400;
  color: #8F3A8E;
  line-height: 1.12;
  max-width: 620px;
  margin-bottom: 0;
}

.community-bold { font-weight: 700; }

.community-photo {
  width: min(100%, 620px);
  height: auto;
  display: block;
  margin-top: 56px;
  border-radius: var(--r-xl);
  transition: transform 350ms ease, filter 350ms ease;
}

.community-photo:hover {
  transform: scale(1.035);
  filter: drop-shadow(0 14px 22px rgba(143, 58, 142, 0.16));
}

/* ---- Right column — stats ---- */

.community-stats {
  display: flex;
  flex-direction: column;
  gap: 34px;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  justify-self: start;
}

/* Each stat: locked icon column + contained text column */
.community-stat {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  width: 100%;
}

.community-stat-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.community-stat-icon:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(143, 58, 142, 0.18);
}

.community-stat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* allows text to stay inside grid column */
}

.community-stat-number {
  font-family: inherit;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  color: #8F3A8E;
  line-height: 1;
  white-space: nowrap;
}

.community-stat-desc {
  font-family: inherit;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 600;
  color: #95C700;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- Scroll reveal ---- */

.community-reveal {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition:
    opacity   850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.community-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Photo has a subtler upward travel — parallax feel */
.community-photo.community-reveal {
  transform: translateY(18px) scale(0.985);
}

/* ---- Narrow / mobile (≤ 900px) ---- */

@media (max-width: 900px) {
  .community-section {
    margin-top: -32px;
    padding: calc(56px + 32px) 0 64px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -10px 24px rgba(143, 58, 142, 0.10);
  }

  .community-left {
    align-items: center;
    text-align: center;
  }

  .community-headline {
    max-width: 100%;
  }

  .community-photo {
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 56px is kept from base */
  }

  .community-stats {
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
    justify-self: auto;
  }
}

/* ---- Scrolling Text Revealer ---- */

.text-revealer {
  background: var(--c-white);
  position: relative;
  z-index: 0;
}

/* Compact animated container — background-color transitioned by JS */
.text-revealer-track {
  width: min(calc(100% - 32px), 1180px);
  height: clamp(180px, 24vw, 260px);
  background: #8a3a8e;
  border-radius: 24px;
  margin: 72px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: background-color 500ms ease;
}

/* Speed-line layer — sits behind text, movement driven by GSAP */
.text-revealer-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.text-revealer-particle {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  filter: blur(0.3px);
  animation: tr-meteor var(--m-dur, 3s) linear var(--m-delay, 0s) infinite;
  will-change: transform, opacity;
}

/* Each phrase layers absolutely inside the track — above particles */
.text-revealer-phrase {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.12;
  color: #ffffff;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  will-change: opacity, transform, filter;
  pointer-events: none;
}

/* No-JS fallback: first phrase always visible */
.text-revealer-phrase:first-child {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Inner span constrains text width and horizontal padding */
.text-revealer-phrase > span {
  display: block;
  max-width: 900px;
  width: 100%;
  padding: 0 32px;
  box-sizing: border-box;
}

/* JS-enhanced mode — hide all, transition the active one in */
.text-revealer.tr-enhanced .text-revealer-phrase {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  transition: opacity 350ms ease, filter 350ms ease, transform 350ms ease;
}

.text-revealer.tr-enhanced .text-revealer-phrase.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 767px) {
  .text-revealer-track {
    height: clamp(180px, 38vw, 220px);
    margin: 48px auto;
  }

  .text-revealer-phrase {
    font-size: clamp(26px, 8vw, 42px);
  }
}

@keyframes tr-meteor {
  0%   { transform: translateY(350px); opacity: 0; }
  15%  { opacity: var(--m-opacity, 0.75); }
  85%  { opacity: var(--m-opacity, 0.75); }
  100% { transform: translateY(-550px); opacity: 0; }
}

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

.stats-band {
  background: var(--c-purple);
  padding: var(--s8) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats-grid .stat-item {
  position: relative; /* anchor for .stat-divider */
}

/* ---- Animated vertical divider ---- */

.stat-divider {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0;           /* animates to 60% on activation */
  background: rgba(255, 255, 255, 0.15);
  transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.stat-divider.is-active { height: 60%; }

/* Stagger dividers to sync with their neighbouring card's fade-in */
.stats-grid .stat-item:nth-child(1) .stat-divider { transition-delay: 0.12s; }
.stats-grid .stat-item:nth-child(2) .stat-divider { transition-delay: 0.22s; }
.stats-grid .stat-item:nth-child(3) .stat-divider { transition-delay: 0.32s; }

/* Mobile (2-col): hide dividers on right-column items */
.stats-grid .stat-item:nth-child(2) .stat-divider,
.stats-grid .stat-item:last-child   .stat-divider {
  display: none;
}

@media (min-width: 768px) {
  /* Desktop (4-col): show all but the last item */
  .stats-grid .stat-item:nth-child(2) .stat-divider { display: block; }
  .stats-grid .stat-item:last-child   .stat-divider { display: none;  }
}

/* ---- Post count-up glow ---- */

@keyframes stat-glow {
  0%   { text-shadow: 0 0 0   rgba(138, 58, 142, 0);    }
  35%  { text-shadow: 0 0 22px rgba(138, 58, 142, 0.45); }
  100% { text-shadow: 0 0 0   rgba(138, 58, 142, 0);    }
}

.stat-number--glow {
  animation: stat-glow 1.3s ease-out forwards;
}

/* Reduced motion: suppress all stat animations */
@media (prefers-reduced-motion: reduce) {
  .stat-divider {
    transition: none;
    height: 60%; /* show immediately */
  }
  .stat-number--glow { animation: none; }
}

/* ---- Process section ---- */

.process-section {
  background: var(--c-white);
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  position: relative;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* horizontal connector line */
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(12.5% + 4px);
    right: calc(12.5% + 4px);
    height: 2px;
    background: linear-gradient(to right, var(--c-purple), var(--c-lime));
    z-index: 0;
  }
}

/* ---- Benefits section ---- */

.benefits-section {
  background: var(--c-bg-soft);
}

/* ---- Testimonials section ---- */

.testimonials-section {
  background: var(--c-white);
}

/* ---- FAQ section ---- */

.faq-section {
  background: var(--c-bg-soft);
}

.faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* ---- CTA section ---- */

.cta-section {
  background: linear-gradient(
    125deg,
    #4a1d5c 0%,
    #8a3a8e 28%,
    #6b2a72 55%,
    #7d358c 78%,
    #4a1d5c 100%
  );
  background-size: 280% 280%;
  animation: cta-gradient 18s ease infinite;
  padding: var(--s12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@keyframes cta-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Grain overlay — SVG feTurbulence at very low opacity */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* prettier-ignore */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 192px 192px;
  opacity: 0.038;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Soft lime accent orb bottom-right */
.cta-section::after {
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 199, 0, 0.20) 0%, transparent 68%);
  bottom: -200px;
  right: -120px;
  pointer-events: none;
  z-index: 0;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-headline {
  font-family: inherit;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--c-white);
  margin: 0;
}

.cta-sub {
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.84);
  max-width: 520px;
  margin: var(--s3) auto 0;
  line-height: 1.65;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

@media (prefers-reduced-motion: reduce) {
  .cta-section {
    animation: none;
    background-position: 30% 50%;
  }
}

/* ============================================================
   Clientas — section layouts
   (#referidos · #educacion-financiera · #app-podemos)
   ============================================================ */

/* ---- #referidos ---- */

.referidos-section {
  background: #fff;
}

.ref-reward-section {
  margin-top: var(--s10);
}

.ref-reward-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 640px) {
  .ref-reward-grid { grid-template-columns: 1fr 1.4fr; }
}

.ref-steps-section {
  margin-top: var(--s10);
}

.ref-cta-close {
  margin-top: var(--s10);
  text-align: center;
}

/* 4-step grid modifier — overrides the 3-col layout */
@media (min-width: 768px) {
  .credito-steps--four {
    grid-template-columns: repeat(4, 1fr);
  }
  .credito-steps--four::before {
    left: calc(12.5% + 12px);
    width: calc(75% - 24px);
  }
}

/* ---- #educacion-financiera ---- */

.edufi-section {
  background: #f5f0fb;
}

.edufi-tips-block {
  margin-top: var(--s10);
}

.edufi-tips-grid {
  gap: var(--s3);
}

.edufi-reflection-frame {
  background: var(--c-lime);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(20px, 3vw, 40px);
  margin-top: var(--s10);
  box-shadow: 0 18px 50px -28px rgba(149, 197, 0, 0.55);
}

.edufi-reflection {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

@media (min-width: 768px) {
  .edufi-reflection { grid-template-columns: 1.05fr 0.95fr; }
}

.edufi-reflection-copy {
  background: var(--c-white);
  border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.18);
}

.edufi-reflection-eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-purple);
  color: var(--c-white);
  padding: 10px 22px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--s2);
}

.edufi-reflection-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
}

.edufi-reflection-lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.edufi-reflection-list {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.edufi-reflection-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.5;
}

.edufi-reflection-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-lime);
  flex-shrink: 0;
  margin-top: 7px;
  box-shadow: 0 0 0 4px rgba(149, 197, 0, 0.22);
}

.edufi-reflection-media {
  margin: 0;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.28);
  min-height: 320px;
}

.edufi-reflection-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.edufi-articles-block {
  margin-top: var(--s10);
}

.edufi-articles-grid {
  gap: var(--s4);
}

/* ---- #app-podemos ---- */

.app-hero-block {
  background: #f5f0fb;
  padding: clamp(64px, 8vw, 110px) 0;
}

.app-hero-frame {
  background: var(--c-lime);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(20px, 3vw, 40px);
  box-shadow: 0 18px 50px -28px rgba(149, 197, 0, 0.55);
}

.app-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

@media (min-width: 768px) {
  .app-split { grid-template-columns: 1.05fr 0.95fr; }
}

.app-hero-copy {
  background: var(--c-white);
  border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.18);
}

.app-hero-eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-purple);
  color: var(--c-white);
  padding: 10px 22px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--s2);
}

.app-hero-title {
  margin: 0;
  line-height: 1.15;
}

.app-hero-lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.app-hero-media {
  margin: 0;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.28);
  min-height: 380px;
}

.app-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-steps-block {
  background: #fff;
}

.app-purpose-block {
  background: #f5f0fb;
}

.app-purpose-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  background: #fff;
  border-radius: var(--r-xl);
  border: 1px solid rgba(138, 58, 142, 0.10);
  box-shadow: var(--shadow-md);
  padding: clamp(32px, 4vw, 56px);
}

@media (min-width: 768px) {
  .app-purpose-card { grid-template-columns: 1.2fr 0.8fr; }
}

.app-purpose-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* ============================================================
   Crédito grupal — section layouts
   (#requisitos · #obten-tu-credito · #cambia-tu-grupo)
   ============================================================ */

/* ---- #requisitos ---- */

.req-section {
  background: #f5f0fb;
}

.req-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 768px) {
  .req-split { grid-template-columns: 0.9fr 1.1fr; }
}

.req-left {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.req-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
}

.req-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

@media (max-width: 479px) {
  .req-cards { grid-template-columns: 1fr; }
}

/* ---- #obten-tu-credito ---- */

.credito-hero-block {
  background: linear-gradient(135deg, #4a1d5c 0%, #8a3a8e 55%, #6b2a72 100%);
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: hidden;
}

.credito-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 768px) {
  .credito-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.credito-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Clientas Hero Override */
.credito-hero-block--clientas {
  padding-bottom: 0;
  position: relative;
}

.credito-hero-block--clientas .credito-hero-inner {
  align-items: center;
  text-align: center;
}

.credito-hero-block--clientas .credito-hero-copy {
  align-items: center;
  padding-bottom: 0;
}

.credito-hero-image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 100%;
}

.hero-women-img {
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  margin: 0 auto;
  transform: scale(1.15);
  transform-origin: bottom center;
}

@media (min-width: 768px) {
  .credito-hero-block--clientas .credito-hero-inner {
    align-items: flex-end;
    text-align: left;
  }
  .credito-hero-block--clientas .credito-hero-copy {
    align-items: flex-start;
    padding-bottom: clamp(64px, 8vw, 110px);
  }
}

.credito-steps-block {
  background: #fff;
}

.credito-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
  position: relative;
}

@media (min-width: 768px) {
  .credito-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .credito-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(16.66% + 12px);
    width: calc(66.66% - 24px);
    height: 2px;
    background: linear-gradient(to right, var(--c-lime), var(--c-purple));
    z-index: 0;
    pointer-events: none;
  }
}

.credito-docs-block {
  background: #f8f6fc;
}

.credito-docs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 768px) {
  .credito-docs-grid { grid-template-columns: 1.1fr 0.9fr; }
}

.credito-docs-left,
.credito-docs-right {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.credito-page-cta {
  background: #fff;
  border-top: 1px solid rgba(138, 58, 142, 0.10);
  padding: clamp(56px, 7vw, 96px) 0;
}

.credito-page-cta-inner {
  text-align: center;
}

/* Utility: centered cta-actions row */
.cta-actions--center {
  justify-content: center;
}

/* ---- #cambia-tu-grupo ---- */

.cambio-hero-block {
  background: var(--c-lime);
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: hidden;
}

.cambio-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 768px) {
  .cambio-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.cambio-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.cambio-ben-block {
  background: #fff;
}

.cambio-ben-grid {
  margin-top: var(--s6);
}

.cambio-proceso-block {
  background: #f5fbee;
}

.cambio-faq-block {
  background: #fff;
}

.cambio-cta-block {
  background: var(--c-lime);
  padding: clamp(72px, 8vw, 110px) 0;
}

.cambio-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

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

.site-footer {
  background: #1a1a2e;
  color: rgba(255,255,255,.70);
  padding: var(--s10) 0 var(--s4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  padding-bottom: var(--s8);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-brand .nav-logo {
  color: var(--c-white);
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: var(--s3);
}

.footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--s3);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.footer-col ul a {
  font-size: 0.9375rem;
  transition: color var(--t-base);
}

.footer-col ul a:hover { color: var(--c-lime); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s4);
  font-size: 0.8125rem;
}

/* ============================================================
   Crédito Grupal — page-level layout
   (.cg-* classes used only in credito-grupal.html)
   ============================================================ */

.cg-cta-section {
  background: #f5f0fb;
}

.cg-action-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .cg-action-cards { grid-template-columns: 1fr 1fr; }
}

.cg-faq-preview {
  background: #fff;
  border-top: 1px solid rgba(138, 58, 142, 0.08);
}

.cg-faq-list {
  max-width: 760px;
  margin-inline: auto;
}

.cg-final-cta {
  background: linear-gradient(135deg, #4a1d5c 0%, #8a3a8e 55%, #6b2a72 100%);
  padding: clamp(72px, 8vw, 110px) 0;
}

.cg-final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.footer-bottom a:hover { color: var(--c-lime); }

/* ============================================================
   Beneficios — page-level layout
   (.benef-main-*, .semana16-*, .talleres-*, .tutoriales-*,
    .app-*, .convenios-* used only in beneficios.html)
   ============================================================ */

.benef-main-section { background: #fff; }

.benef-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .benef-main-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .benef-main-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Semana 16 */
.semana16-section {
  background: linear-gradient(135deg, #4a1d5c 0%, #8a3a8e 55%, #6b2a72 100%);
  padding: clamp(64px, 8vw, 108px) 0;
}

.semana16-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 768px) {
  .semana16-inner { grid-template-columns: 1.2fr 0.8fr; }
}

/* Talleres */
.talleres-section { background: #f5fbee; }

.talleres-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 768px) {
  .talleres-split { grid-template-columns: 1fr 1fr; }
}

.talleres-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}

/* Tutoriales */
.tutoriales-section { background: #fff; }

.tutoriales-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .tutoriales-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  /* Flex con wrap + justify-center → el último row (con 2 cards)
     se centra automáticamente. Cada card ocupa 1/3 del ancho. */
  .tutoriales-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--s4);
    justify-content: center;
    grid-template-columns: none;
  }
  .tutoriales-grid > .tutorial-card {
    flex: 0 1 calc((100% - var(--s4) * 2) / 3);
    min-width: 280px;
    max-width: calc((100% - var(--s4) * 2) / 3);
  }
}

/* App Podemos */
.app-section { background: #f5f0fb; }

.app-section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 768px) {
  .app-section-inner { grid-template-columns: 0.8fr 1.2fr; }
}

.app-features-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}

/* Convenios */
.convenios-section { background: #fff; }

.convenios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 768px) {
  .convenios-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================
   Clientas page
   ============================================= */

/* Testimonios */
.cl-testi-section { background: #fff; }

.cl-testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .cl-testi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cl-testi-grid { grid-template-columns: repeat(3, 1fr); }
}

.cl-testi-close {
  margin-top: var(--s10);
  text-align: center;
}

/* Referidos intro split */
.ref-intro-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: var(--s8);
}

@media (min-width: 768px) {
  .ref-intro-split { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   Conócenos page
   ============================================= */

.hist-narrative-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 768px) {
  .hist-narrative-grid { grid-template-columns: repeat(3, 1fr); }
}

.cult-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 768px) {
  .cult-split { grid-template-columns: 1fr 1fr; }
}

.cult-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (min-width: 480px) {
  .cult-values-grid { grid-template-columns: repeat(2, 1fr); }
}

.dir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dir-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================
   Atención a Clientes page
   ============================================= */

.ac-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 640px) {
  .ac-contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Sucursales — page-level layout
   (.suc-* used only in sucursales.html)
   ============================================================ */

.suc-branch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s4);
}

@media (min-width: 540px) {
  .suc-branch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .suc-branch-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Blog — page-level layout
   (.blog-* used only in blog.html)
   ============================================================ */

.blog-prose {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.blog-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

@media (min-width: 640px) {
  .blog-index-grid { grid-template-columns: repeat(2, 1fr); }
}