/* ═══════════════════════════════════════════════════════
   SECTIONS — hero, problema, para-quien, beneficios,
   incluye, comparativa, paquetes, proceso, portfolio,
   mantenimiento, faq, contacto, footer
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.hero {
  padding-top: var(--section-gap-lg);
  padding-bottom: var(--section-gap);
  background-color: var(--c-bg);
  overflow: hidden;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 75% at 85% 5%, rgba(139,92,246,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 5% 95%, rgba(244,114,182,0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-12);
  align-items: center;
}

.hero__content {
  max-width: 560px;
}

.hero__eyebrow {
  font: 500 var(--text-sm) var(--font-body);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-4);
}

.hero__title {
  font: 300 var(--text-5xl) var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}

.hero__title br + br {
  display: none;
}

.hero__subtitle {
  font: 400 var(--text-lg) var(--font-body);
  color: var(--c-text-mid);
  line-height: var(--leading-normal);
  max-width: 480px;
  margin-top: var(--space-6);
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* ── HERO VISUAL / MOCKUP ────────────────────────────── */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
}

/* Browser frame */
.mockup-browser {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;
}

.mockup-browser__bar {
  background: var(--c-bg-alt);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid var(--c-border);
}

.mockup-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-browser__dot:nth-child(1) { background: #FC5F57; }
.mockup-browser__dot:nth-child(2) { background: #FDBD2E; }
.mockup-browser__dot:nth-child(3) { background: #27C840; }

.mockup-browser__url {
  flex: 1;
  height: 16px;
  background: white;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  border: 1px solid var(--c-border);
}

/* Mini landing preview inside browser */
.mockup-preview {
  background: var(--c-bg);
}

.mockup-preview__nav {
  background: var(--c-bg-dark);
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  justify-content: space-between;
}

.mockup-preview__logo-bar {
  width: 64px;
  height: 12px;
  background: var(--c-accent-grad);
  border-radius: 2px;
}

.mockup-preview__nav-cta {
  width: 48px;
  height: 16px;
  background: var(--c-accent);
  border-radius: var(--radius-full);
}

.mockup-preview__hero {
  padding: 18px 14px 14px;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
}

.mockup-preview__headline {
  height: 16px;
  background: var(--c-text);
  border-radius: 3px;
  margin-bottom: 7px;
  width: 85%;
  opacity: 0.85;
}

.mockup-preview__headline--sm {
  height: 10px;
  background: var(--c-text-mid);
  border-radius: 3px;
  margin-bottom: 14px;
  width: 65%;
  opacity: 0.5;
}

.mockup-preview__cta-bar {
  width: 100px;
  height: 24px;
  background: var(--c-accent-grad);
  border-radius: var(--radius-full);
}

.mockup-preview__cards {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mockup-preview__card {
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  height: 44px;
}

.mockup-preview__card--accent {
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.04);
}

.mockup-preview__footer-bar {
  background: var(--c-bg-dark);
  height: 24px;
}

/* Phone overlay */
.mockup-phone {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 110px;
  background: var(--c-bg-dark);
  border-radius: 18px;
  padding: 7px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.08);
}

.mockup-phone__notch {
  width: 30px;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  margin: 0 auto 6px;
}

.mockup-phone__screen {
  background: var(--c-bg);
  border-radius: 12px;
  overflow: hidden;
}

.mockup-phone__pnav {
  background: var(--c-bg-dark);
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.mockup-phone__plogo {
  width: 36px;
  height: 8px;
  background: var(--c-accent-grad);
  border-radius: 2px;
}

.mockup-phone__phero {
  padding: 10px 8px;
}

.mockup-phone__pline {
  height: 7px;
  background: var(--c-text);
  border-radius: 2px;
  margin-bottom: 5px;
  opacity: 0.8;
}

.mockup-phone__pline:nth-child(2) { width: 80%; opacity: 0.5; }

.mockup-phone__pcta {
  width: 70px;
  height: 18px;
  background: var(--c-accent-grad);
  border-radius: var(--radius-full);
  margin-top: 10px;
}

.mockup-phone__pcards {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mockup-phone__pcard {
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  height: 24px;
}

/* ══════════════════════════════════════════════════════
   PROBLEMA
   ══════════════════════════════════════════════════════ */
.pain-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.pain-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-5);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}

.pain-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pain-icon {
  color: var(--c-accent-2);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pain-text {
  font: 400 var(--text-base) var(--font-body);
  color: var(--c-text);
  line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════════
   PARA QUIÉN
   ══════════════════════════════════════════════════════ */
.rubros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.rubro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: white;
  transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base);
  cursor: default;
}

.rubro-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.rubro-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  display: block;
}

.rubro-card__name {
  font: 500 var(--text-base) var(--font-body);
  color: var(--c-text);
  line-height: var(--leading-snug);
}

/* ══════════════════════════════════════════════════════
   BENEFICIOS
   ══════════════════════════════════════════════════════ */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.benefit-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  transition: box-shadow var(--duration-base), transform var(--duration-base), border-color var(--duration-base);
}

.benefit-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(139,92,246,0.2);
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(139,92,246,0.08);
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 18px;
  height: 18px;
  color: var(--c-accent);
  stroke: var(--c-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-text {
  font: 400 var(--text-base) var(--font-body);
  color: var(--c-text);
  line-height: var(--leading-normal);
  margin: 0;
  padding-top: 2px;
}

/* ══════════════════════════════════════════════════════
   QUÉ INCLUYE
   ══════════════════════════════════════════════════════ */
.incluye-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-4);
}

.incluye-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.incluye-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: 400 var(--text-md) var(--font-body);
  color: var(--c-text);
}

.incluye-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--c-accent);
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}

.incluye-ads {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  padding: var(--space-6);
}

.incluye-ads__title {
  font: 600 var(--text-base) var(--font-body);
  color: var(--c-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
  margin-bottom: var(--space-4);
}

/* ══════════════════════════════════════════════════════
   COMPARATIVA
   ══════════════════════════════════════════════════════ */
.comparativa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
  align-items: start;
}

.comp-card {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border);
  padding: var(--space-6);
  position: relative;
}

.comp-card--featured {
  border: 2px solid var(--c-accent);
  box-shadow: var(--shadow-accent);
}

.comp-card__badge-wrap {
  text-align: center;
  margin-bottom: var(--space-4);
}

.comp-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: var(--c-accent-grad);
  font: 600 var(--text-xs) var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: white;
}

.comp-card__name {
  font: 600 var(--text-lg) var(--font-body);
  color: var(--c-text);
  margin-bottom: var(--space-2);
}

.comp-card__desc {
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--c-border);
  min-height: 70px;
}

.comp-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comp-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text);
}

.comp-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
}

.comp-icon--no {
  background: rgba(156,163,175,0.15);
  color: var(--c-text-light);
}

.comp-icon--mid {
  background: rgba(251,191,36,0.15);
  color: #D97706;
}

.comp-icon--yes {
  background: rgba(139,92,246,0.12);
  color: var(--c-accent);
}

/* ══════════════════════════════════════════════════════
   PAQUETES
   ══════════════════════════════════════════════════════ */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-10);
}

.plan-card {
  background: white;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: box-shadow var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              border-color var(--duration-base);
}

.plan-card:not(.plan-card--featured):hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(139,92,246,0.22);
}

.plan-card--featured {
  background: linear-gradient(white, white) padding-box,
              var(--c-accent-grad) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-accent), 0 24px 64px rgba(139,92,246,0.10);
  transform: translateY(-8px);
}

.plan-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--c-accent-grad);
  font: 600 var(--text-xs) var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-1);
}

.plan-card__name {
  font: 300 var(--text-2xl) var(--font-display);
  color: var(--c-text);
  letter-spacing: var(--tracking-tight);
}

.plan-card__tagline {
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
  line-height: var(--leading-snug);
}

.plan-card__rubros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text);
  line-height: var(--leading-snug);
}

.plan-feature svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-card__footer {
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan-card__delivery {
  font: 500 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
}

.plan-card__footer .btn {
  width: 100%;
  text-align: center;
}

.plan-feature--addon {
  color: var(--c-text-mid);
  font-style: italic;
  margin-top: var(--space-1);
}

.plan-feature--addon svg {
  stroke: var(--c-accent-2);
}

.planes-nota {
  text-align: center;
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
  margin-top: var(--space-8);
}

.planes-ecommerce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(244,114,182,0.04) 100%);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: var(--radius-xl);
  text-align: center;
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
}

/* ══════════════════════════════════════════════════════
   PROCESO
   ══════════════════════════════════════════════════════ */
.proceso-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-12);
  position: relative;
}

.step-connector {
  flex: 1;
  height: 1px;
  background: var(--c-border);
  margin-top: 28px;
  min-width: var(--space-4);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 160px;
  flex-shrink: 0;
}

.step__number {
  font: 300 var(--text-3xl) var(--font-display);
  color: rgba(139,92,246,0.15);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.step__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(139,92,246,0.08);
  border: 2px solid rgba(139,92,246,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.step__icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: var(--c-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__title {
  font: 600 var(--text-sm) var(--font-body);
  color: var(--c-text);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.step__desc {
  font: 400 var(--text-xs) var(--font-body);
  color: var(--c-text-mid);
  line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════════════════════ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.placeholder-card {
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.placeholder-img {
  height: 220px;
  background: linear-gradient(135deg, var(--c-bg-alt) 0%, #E9E7E5 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  position: relative;
}

.placeholder-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(244,114,182,0.04) 100%);
}

.placeholder-img-icon {
  width: 48px;
  height: 48px;
  opacity: 0.25;
}

.placeholder-img-text {
  font: 500 var(--text-sm) var(--font-body);
  color: var(--c-text-light);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  position: relative;
}

.placeholder-info {
  padding: var(--space-5);
}

.placeholder-label {
  font: 500 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
  margin-bottom: var(--space-1);
}

.placeholder-sub {
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-light);
}

/* ══════════════════════════════════════════════════════
   MANTENIMIENTO
   ══════════════════════════════════════════════════════ */
.mant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-4);
}

.mant-content .section__lead {
  margin-bottom: var(--space-8);
}

.mant-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.mant-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: 400 var(--text-base) var(--font-body);
  color: var(--c-text);
}

.mant-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--c-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mant-visual {
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}

.mant-visual__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  display: block;
}

.mant-visual__title {
  font: 300 var(--text-xl) var(--font-display);
  color: var(--c-text);
  margin-bottom: var(--space-2);
}

.mant-visual__sub {
  font: 400 var(--text-sm) var(--font-body);
  color: var(--c-text-mid);
}

/* ══════════════════════════════════════════════════════
   CTA FINAL
   ══════════════════════════════════════════════════════ */
.cta-final {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.cta-final__title {
  font: 300 var(--text-4xl) var(--font-display);
  color: var(--c-text-inv);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.cta-final__sub {
  font: 400 var(--text-lg) var(--font-body);
  color: rgba(248,247,246,0.7);
  margin-top: var(--space-4);
  line-height: var(--leading-normal);
}

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}

.cta-final__channels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.cta-final__channel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 500 var(--text-sm) var(--font-body);
  color: rgba(248,247,246,0.65);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.cta-final__channel-link:hover {
  color: var(--c-text-inv);
}

.cta-final__channel-sep {
  color: rgba(248,247,246,0.25);
  font-size: var(--text-lg);
  line-height: 1;
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.footer {
  background: var(--c-bg-dark);
  border-top: 1px solid var(--c-border-dark);
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}

.footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.footer__brand {
  max-width: 260px;
}

.footer__logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.footer__logo-icon {
  height: 28px;
  width: auto;
  /* isotipo transparente — invertir a blanco sobre fondo oscuro */
  filter: brightness(0) invert(1);
}

.footer__logo-text {
  font: 600 0.95rem var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248,247,246,0.85);
  line-height: 1;
}

.footer__tagline {
  font: 400 var(--text-sm) var(--font-body);
  color: rgba(248,247,246,0.5);
  line-height: var(--leading-normal);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font: 400 var(--text-sm) var(--font-body);
  color: rgba(248,247,246,0.6);
  transition: color var(--duration-fast);
}

.footer__link:hover {
  color: var(--c-text-inv);
}

.footer__lang {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__lang .lang-btn {
  color: rgba(248,247,246,0.5);
}

.footer__lang .lang-btn:hover {
  color: var(--c-text-inv);
}

.footer__lang .lang-btn--active {
  color: var(--c-accent);
}

.footer__lang-sep {
  color: var(--c-border-dark);
}

.footer__bottom {
  border-top: 1px solid var(--c-border-dark);
  padding-top: var(--space-6);
}

.footer__copy {
  font: 400 var(--text-xs) var(--font-body);
  color: rgba(248,247,246,0.3);
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .planes-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .plan-card--featured {
    transform: none;
    order: -1;
  }

  .comparativa-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  .comp-card--featured {
    order: -1;
  }

  .proceso-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .step-connector {
    display: none;
  }

  .step {
    flex-direction: row;
    text-align: left;
    max-width: 100%;
    gap: var(--space-4);
  }

  .step__number {
    font-size: var(--text-2xl);
    margin-bottom: 0;
    min-width: 48px;
  }

  .step__icon-wrap {
    margin-bottom: 0;
    flex-shrink: 0;
  }

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

@media (max-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero__visual {
    order: 2;
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .mockup-phone {
    right: 8px;
    bottom: -8px;
  }

  .pain-list {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .cta-final__title {
    font-size: var(--text-3xl);
  }

  .cta-final__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-final__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  .footer__main {
    flex-direction: column;
    gap: var(--space-6);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }
}

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

  .comp-card__desc {
    min-height: auto;
  }
}