/* Tipografía autoalojada (DT-94, fase 5).
 *
 * Antes venía de fonts.googleapis.com con una petición que BLOQUEABA EL RENDER
 * y obligaba a dos preconnect a dominios de terceros. Ahora sale del mismo
 * origen: un salto menos en la ruta crítica y una IP menos filtrada a Google en
 * cada visita.
 *
 * Outfit es variable (400..900 en un solo fichero), así que los seis pesos que
 * usa la web caben en 32 KB. Licencia OFL: autoalojarla está permitido.
 *
 * El unicode-range es el mismo que servía Google: el navegador solo descarga
 * latin-ext si la página usa alguno de sus caracteres, cosa que no pasa hoy.
 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-800);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* SVG inline: refuerzo de tamaño (tambien hay width/height en HTML) */
svg[aria-hidden="true"] {
  max-width: 100%;
  flex-shrink: 0;
}
.fintech-icon svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-700);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all .2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--green-700);
  font-weight: 600;
  border: 2px solid var(--green-600);
  border-radius: var(--radius-full);
  transition: all .2s;
  cursor: pointer;
}
.btn-outline:hover { background: var(--green-50); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--gray-600);
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all .2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-ghost:hover { color: var(--green-700); }

.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--green-700);
  font-weight: 700;
  border-radius: var(--radius-full);
  transition: all .2s;
  cursor: pointer;
  border: none;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }

.btn-sm { padding: 8px 20px; font-size: .875rem; }
.btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; padding: 14px 24px; font-size: 1rem; }

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--green-700);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  overflow: visible;
}

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all .3s;
}
.nav.scrolled {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  min-height: 72px;
}
.nav-logo { display: flex; align-items: center; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.logo-dans { color: var(--gray-900); }
.logo-tree { color: var(--green-700); }

.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: .9rem; font-weight: 500; color: var(--gray-600);
  transition: color .2s;
}
.nav-links a:hover { color: var(--green-700); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: min(100%, 320px);
}
.lang-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  cursor: default;
}
.lang-icon {
  flex-shrink: 0;
  color: var(--green-700);
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 10rem;
  padding: 8px 36px 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background-color: var(--gray-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.lang-select:hover {
  border-color: var(--green-300);
}
.lang-select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
/* Tablet grande (901-1024px): el selector se compacta (solo el globo) para caber
   en la misma fila de la barra. Antes usaba width:100%, que lo mandaba a una
   segunda línea y duplicaba la altura del nav. */
@media (max-width: 1024px) {
  .lang-switch {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    gap: 6px;
  }
  .lang-switch-text { display: none; }
  .lang-select {
    min-width: auto;
    font-size: 0.8125rem;
    padding: 6px 28px 6px 10px;
    background-position: right 8px center;
  }
}
/* Móvil y tablet pequeña: la barra es logo + hamburguesa, así que el selector se
   oculta aquí y reaparece dentro del menú desplegable (bloque RESPONSIVE al final). */
@media (max-width: 900px) {
  .lang-switch { display: none; }
}

.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 24px; height: 20px; position: relative; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--gray-700);
  position: absolute; left: 0; transition: all .3s;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(16,185,129,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(5,150,105,.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  position: relative;
}
.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: .85rem; font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--green-200);
  margin-bottom: 24px;
}
.hero h1 {
  font-size: 3.5rem; font-weight: 900; line-height: 1.1;
  letter-spacing: -.03em; color: var(--gray-900);
  margin-bottom: 20px;
}
.gradient-text {
  /* El degradado NO es un fondo: con background-clip:text ES el color del
     texto del h1. Iba de --green-600 a --green-400, y ese extremo claro da
     1,92:1 sobre blanco cuando el texto grande necesita 3:1. Se desplaza un
     peldaño hasta --green-800/--green-600: 7,68 y 3,77, ambos por encima del mínimo, y sigue siendo un
     degradado. */
  background: linear-gradient(135deg, var(--green-800), var(--green-600));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: 1.15rem; color: var(--gray-500); line-height: 1.7;
  max-width: 520px; margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--gray-500); }

/* Hero Screenshots */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-screenshots {
  position: relative;
  width: 420px; height: 560px;
}
.phone-frame {
  position: absolute;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gray-900);
  padding: 6px;
  box-shadow: 0 25px 50px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.phone-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}
.phone-front {
  width: 260px;
  z-index: 2;
  left: 0; top: 40px;
}
.phone-back {
  width: 230px;
  z-index: 1;
  right: 0; top: 0;
  transform: rotate(5deg);
  opacity: .85;
}

/* Dashboard Showcase */
.dashboard-showcase {
  padding: 0 0 80px;
  margin-top: -20px;
}
.dashboard-frame {
  background: var(--gray-900);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(0,0,0,.08);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--gray-800);
}
.browser-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gray-600);
}
.browser-dot:first-child { background: #ef4444; }
.browser-dot:nth-child(2) { background: #fbbf24; }
.browser-dot:nth-child(3) { background: #22c55e; }
.browser-url {
  flex: 1; text-align: center;
  font-size: .75rem; color: var(--gray-300);
  background: var(--gray-700);
  padding: 4px 16px;
  border-radius: 6px;
  margin: 0 40px;
}
.dashboard-frame img {
  width: 100%;
  /* SIN aspect-ratio a propósito. Estaba fijado a 3/2 (1,50) sobre una captura
     que es 1000x601 (1,66) y, con el object-fit: fill que hay por defecto, la
     imagen se servía ESTIRADA. No era solo el aviso de Lighthouse: se veía mal.

     No hace falta sustituirlo por aspect-ratio: 1000/601. El <img> declara sus
     width y height, y con eso el navegador ya calcula la proporción y reserva
     el hueco antes de cargar —que es para lo que se puso—. Además así no puede
     volver a desincronizarse del fichero: si algún día se cambia la captura,
     basta con actualizar los atributos. */
  height: auto;
  display: block;
  background: var(--gray-100);
}
.dashboard-caption {
  text-align: center;
  margin-top: 16px;
  font-size: .88rem;
  color: var(--gray-500);
  font-style: italic;
}

/* ===== SOCIAL PROOF ===== */
.social-proof {
  padding: 48px 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.proof-number { font-size: 2rem; font-weight: 800; color: var(--green-700); }
.proof-label { font-size: .9rem; color: var(--gray-500); margin-top: 4px; }

/* ===== SECTION HEADER ===== */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-tag {
  display: inline-block;
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: 2.4rem; font-weight: 800; color: var(--gray-900);
  letter-spacing: -.02em; margin-bottom: 12px;
}
.section-header p {
  font-size: 1.1rem; color: var(--gray-500);
}

/* ===== FEATURES ===== */
.features { padding: 100px 0; }

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-bottom: 28px;
}
.feature-row-3 {
  grid-template-columns: repeat(3, 1fr);
}
.feature-detail {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  transition: all .3s;
}
.feature-detail:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.feature-detail.highlight-card {
  border-color: var(--green-400);
  background: linear-gradient(145deg, var(--green-50) 0%, #fff 60%);
}
.feature-icon-lg {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-icon-lg svg { width: 48px; height: 48px; }

.before-after {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px;
}
.ba-before, .ba-after {
  font-size: .78rem; font-weight: 500;
  padding: 4px 0;
}
.ba-before {
  color: var(--gray-500);
  text-decoration: line-through;
}
.ba-after {
  color: var(--green-700);
  font-weight: 600;
}
.feature-detail h3 {
  font-size: 1.2rem; font-weight: 800; color: var(--gray-900);
  margin-bottom: 10px;
}
.feature-detail p {
  font-size: .92rem; color: var(--gray-500); line-height: 1.7;
}
.feature-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green-700);
  background: var(--green-100);
  padding: 5px 14px;
  border-radius: var(--radius-full);
}

.feature-mini {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  transition: all .3s;
}
.feature-mini:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.feature-icon-sm {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.feature-icon-sm svg { width: 32px; height: 32px; }
.feature-mini h3 {
  font-size: 1rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 6px;
}
.feature-mini p {
  font-size: .85rem; color: var(--gray-500); line-height: 1.6;
}

*:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== HOW IT WORKS ===== */
.how {
  padding: 100px 0;
  background: var(--gray-50);
}
.steps { max-width: 680px; margin: 0 auto; }
.step {
  display: flex; gap: 24px; align-items: flex-start;
}
.step-number {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--green-700);
  color: #fff;
  font-size: 1.2rem; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.step-content h3 {
  font-size: 1.2rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 6px;
}
.step-content p {
  font-size: .95rem; color: var(--gray-500); line-height: 1.6;
}
.step-connector {
  width: 2px; height: 40px;
  background: var(--green-200);
  margin: 0 0 0 23px;
}

/* ===== PRICING ===== */
.pricing { padding: 100px 0; }
.pricing-toggle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 48px;
}
.toggle-label { font-size: .9rem; font-weight: 500; color: var(--gray-500); transition: color .2s; }
.toggle-label.active { color: var(--gray-900); font-weight: 600; }
.save-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 700;
  background: var(--green-100); color: var(--green-700);
  padding: 2px 8px; border-radius: var(--radius-full);
}
.toggle-switch {
  width: 48px; height: 26px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  border: none; cursor: pointer;
  position: relative;
  transition: background .2s;
}
.toggle-switch.active { background: var(--green-500); }
.toggle-knob {
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute; top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: var(--shadow-sm);
}
.toggle-switch.active .toggle-knob { transform: translateX(22px); }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: start;
}
.price-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 36px 28px 32px;
  position: relative;
  transition: all .3s;
}
.price-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.price-card.popular {
  border: 2px solid var(--green-500);
  box-shadow: var(--shadow-lg);
  transform: scale(1.04);
}
.price-card.popular:hover { transform: scale(1.04) translateY(-4px); }
.popular-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green-700); color: #fff;
  font-size: .78rem; font-weight: 700;
  padding: 6px 20px;
  border-radius: var(--radius-full);
}
.price-header { margin-bottom: 20px; }
/* h2 en /precios/, donde las tarjetas cuelgan del h1 de la pagina, y h3 en la
   home, donde van bajo el h2 de la seccion de precios. Mismo aspecto, nivel
   distinto segun lo que tengan encima: saltarse un nivel es un fallo de
   accesibilidad. */
.price-header h2, .price-header h3 { font-size: 1.3rem; font-weight: 800; color: var(--gray-900); }
.price-header p { font-size: .88rem; color: var(--gray-500); margin-top: 4px; }
.price-amount {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 8px;
}
.price-currency { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); }
.price-value { font-size: 3.2rem; font-weight: 900; color: var(--gray-900); line-height: 1; }
.price-period { font-size: .9rem; color: var(--gray-500); margin-left: 4px; }
.price-founding {
  font-size: .82rem; color: var(--green-700);
  background: var(--green-50);
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}
.price-ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.price-trial-link {
  font-size: .82rem; color: var(--gray-500); text-decoration: none;
  transition: color .2s;
}
.price-trial-link:hover { color: var(--green-700); text-decoration: underline; }
.price-features { margin-bottom: 28px; }
.price-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: .9rem; color: var(--gray-600);
}
.price-features li svg { width: 18px; height: 18px; flex-shrink: 0; }
.pricing-note {
  text-align: center;
  margin-top: 32px;
  font-size: .85rem; color: var(--gray-500);
}

/* ===== FAQ ===== */
.faq { padding: 100px 0; background: var(--gray-50); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-item summary {
  padding: 20px 0;
  font-size: 1.05rem; font-weight: 600; color: var(--gray-800);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: color .2s;
}
.faq-item summary:hover { color: var(--green-700); }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem; font-weight: 400; color: var(--gray-500);
  transition: transform .2s;
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--green-700);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p {
  padding: 0 0 20px;
  font-size: .95rem; color: var(--gray-500); line-height: 1.7;
}

/* ===== PAIN POINTS (FINTECH ULTRA-PULIDO) ===== */
.pain-fintech { 
  padding: 120px 0; 
  background: #f8fafc; 
  color: var(--gray-900);
}
.pain-fintech .section-header h2 { color: var(--gray-900); font-weight: 800; letter-spacing: -0.02em; }
.pain-fintech .section-header p { color: var(--gray-500); }
.fintech-tag {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green-700);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.fintech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 60px;
}
.fintech-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.fintech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-color: #cbd5e1;
}
.fintech-icon {
  width: 48px; height: 48px;
  background: #f1f5f9;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  color: var(--green-700);
  transition: all .3s ease;
}
.fintech-card:hover .fintech-icon {
  background: var(--green-700);
  color: #fff;
  transform: scale(1.05);
}
.fintech-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.fintech-card p {
  font-size: 0.95rem; color: var(--gray-500); line-height: 1.6;
}

@media (max-width: 768px) {
  .fintech-grid { grid-template-columns: 1fr; gap: 24px; }
  .fintech-card { padding: 32px 24px; }
}

/* ===== TRANSITION ===== */
.transition-section {
  padding: 72px 0;
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
}
.transition-content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.transition-content h2 {
  font-size: 2rem; font-weight: 800; color: #fff;
  margin-bottom: 12px;
}
.transition-content p {
  font-size: 1.1rem; color: rgba(255,255,255,.95); line-height: 1.7;
}

/* ===== WHO IS IT FOR ===== */
.who-section { padding: 100px 0; background: var(--gray-50); }
.who-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.who-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: all .3s;
}
.who-item:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.who-icon { font-size: 2.2rem; margin-bottom: 12px; }
.who-icon-svg {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
}
.who-icon-svg svg { width: 64px; height: 64px; }
.who-item h3 {
  font-size: 1rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 6px;
}
.who-item p {
  font-size: .85rem; color: var(--gray-500); line-height: 1.5;
}

/* ===== MID-PAGE CTA ===== */
.mid-cta {
  text-align: center;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mid-cta-note {
  font-size: .82rem;
  color: var(--gray-500);
}

/* ===== SOCIAL PROOF STORY ===== */
.social-proof-story {
  padding: 80px 0;
  background: #fff;
}
.story-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.story-quote { position: relative; }
.quote-icon {
  width: 48px; height: 48px;
  margin-bottom: 12px;
}
.story-quote blockquote p {
  font-size: 1.15rem;
  color: var(--gray-700);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 20px;
}
.story-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.author-info {
  display: flex;
  flex-direction: column;
}
.author-info strong {
  font-size: .95rem;
  color: var(--gray-900);
}
.author-info span {
  font-size: .82rem;
  color: var(--gray-500);
}
.story-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.stat-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--green-700);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: .88rem;
  color: var(--gray-500);
}

/* ===== GUARANTEE ===== */
.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 640px;
  margin: 48px auto 0;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.guarantee-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
}
.guarantee-icon svg { width: 48px; height: 48px; }
.guarantee-text strong {
  font-size: 1rem;
  color: var(--gray-900);
  display: block;
  margin-bottom: 6px;
}
.guarantee-text p {
  font-size: .9rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin: 0;
}

/* ===== APP STORE BADGES ===== */
.app-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--gray-300) !important;
  background: var(--gray-800);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: all .2s;
  width: fit-content;
}
.store-badge:hover {
  background: var(--gray-700);
  color: #fff !important;
}
.store-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.store-badge--disabled {
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}
.store-badge--disabled:hover {
  background: var(--gray-800);
  color: var(--gray-300) !important;
}
/* Aparece en el cuerpo de las legales (sobre blanco) y dentro del pie
   (sobre oscuro). Un solo color no vale para los dos: el claro se queda en
   1,47 sobre blanco y el medio en 3,67 sobre el pie. Se separan. */
.footer-email {
  color: var(--gray-500);
  font-weight: 500;
}
.footer .footer-email {
  color: var(--gray-300);
}
.footer-col .footer-contact-link,
.footer-col > a[href="/contact/"],
.footer-col > a[href="/about/"] {
  display: block;
  margin-bottom: 0.35rem;
}
.footer-col .footer-email {
  display: block;
}

.legal-footer-spaced {
  margin-top: 3rem;
}

/* ===== IMÁGENES DEL BLOG (DT-94, fase 8) =====
   La cabecera conserva su proporción real: width/height salen del fichero y el
   alto se calcula solo. Nada de aspect-ratio aquí — forzar una proporción con
   object-fit: fill fue justo lo que estiraba la captura del panel y sacaba la
   auditoría en rojo. */
.post-hero {
  margin: 24px 0 32px;
}
.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}

/* En las miniaturas del índice SÍ hace falta una caja fija: si cada artículo
   impone su proporción, la lista queda en escalera. Aquí object-fit es `cover`,
   que recorta, nunca `fill`, que deforma. */
.post-card {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-200);
}
/* Enlace extendido: el <a> del titular cubre la tarjeta entera, así que hacer
   clic en la miniatura navega sin necesidad de un segundo enlace. */
.post-card-texto h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* El «Leer la guía» queda por encima del área extendida. Sin esto lo taparía el
   ::after y, aunque el destino es el mismo, el foco y el hover del enlace
   dejarían de funcionar. */
.post-card-texto p:last-of-type { position: relative; z-index: 1; }
/* El foco se dibuja sobre la tarjeta completa, que es lo que de verdad activas
   al pulsar Intro. Si se pintara solo alrededor del texto del titular, el
   recuadro no diría dónde estás. */
.post-card:focus-within { outline: 2px solid var(--green-700); outline-offset: 6px; border-radius: 12px; }
.post-card-texto h2 a:focus-visible { outline: none; }
.post-card:last-of-type { border-bottom: none; }
/* La proporción se fija en el CONTENEDOR, no en la <img>. Puesta en la imagen
   no servía de nada: el atributo height del HTML se traduce en una altura
   explícita que gana a aspect-ratio, y la miniatura salía de 240x632 en vez de
   240x126 — estirada a lo alto. Medido en el navegador, no supuesto. */
.post-card-img {
  flex: 0 0 240px;
  display: block;
  aspect-ratio: 1200 / 630;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.post-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.post-card:hover .post-card-img img { transform: scale(1.03); }
.post-card-texto { flex: 1; min-width: 0; }
.post-card-texto h2 { margin-top: 0; }

@media (max-width: 700px) {
  .post-card { flex-direction: column; gap: 14px; }
  .post-card-img { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card-img img { transition: none; }
  .post-card:hover .post-card-img img { transform: none; }
}

/* ===== CONSENTIMIENTO DE COOKIES (DT-94, fase 7) =====
   position: fixed y no sticky: el banner no puede empujar el contenido. Un
   elemento en flujo que aparece tras cargar el JS es un salto de maquetación, y
   la CLS de esta web está en cero.
   z-index 95: por encima de la barra pegajosa (90) y por debajo de la nav (100),
   que sigue siendo utilizable con el banner abierto. */
.consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 95;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
  padding: 16px 0;
}
.consent[hidden] { display: none; }
.consent-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.consent-texto strong {
  display: block;
  font-size: .95rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 4px;
}
.consent-texto p {
  font-size: .85rem; color: var(--gray-600); line-height: 1.6;
  margin: 0;
}
.consent-texto a { color: var(--green-700); text-decoration: underline; }
/* Los dos botones ocupan lo mismo y van juntos: si «rechazar» pesa menos que
   «aceptar», el consentimiento no es libre y no vale. */
.consent-botones {
  display: flex; gap: 12px; flex-shrink: 0;
}
.consent-botones button { white-space: nowrap; }

@media (max-width: 700px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-botones button { flex: 1; }
}

/* Con el banner abierto la barra pegajosa se retira: las dos viven abajo y
   quedarían una encima de otra. */
body.con-consent .sticky-cta { display: none; }

/* ===== STICKY MOBILE CTA ===== */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.sticky-cta.visible { transform: translateY(0); }

/* ===== LEGAL PAGE ===== */
.legal-page {
  padding: 120px 0 80px;
}
.legal-page .legal-content {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page h1 {
  font-size: 2.2rem; font-weight: 800; color: var(--gray-900);
  margin-bottom: 8px;
}
.legal-page .legal-date {
  font-size: .9rem; color: var(--gray-500);
  margin-bottom: 40px;
}
.legal-page h2 {
  font-size: 1.3rem; font-weight: 700; color: var(--gray-900);
  margin-top: 40px; margin-bottom: 12px;
}
.legal-page h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--gray-800);
  margin-top: 24px; margin-bottom: 8px;
}
.legal-page p {
  font-size: .95rem; color: var(--gray-600); line-height: 1.75;
  margin-bottom: 14px;
}
.legal-page ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 14px;
}
.legal-page ul li {
  font-size: .95rem; color: var(--gray-600); line-height: 1.75;
  margin-bottom: 6px;
}
/* Tablas del cuerpo (DT-94). El Markdown de los artículos genera <table> pelada:
   sin esto sale con 0 de padding y sin bordes, es decir, ilegible.

   El overflow-x vive en la propia tabla porque Markdown no la envuelve en ningún
   contenedor y no vamos a pedirle al que escribe que meta un <div> a mano. Con
   min-width, en móvil la tabla scrollea dentro de su caja en vez de reventar el
   ancho de la página: el <body> nunca scrollea en horizontal. */
.legal-page table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 24px;
  font-size: .9rem;
}
.legal-page table th,
.legal-page table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-200);
  line-height: 1.6;
  min-width: 130px;
}
.legal-page table th {
  font-weight: 700;
  color: var(--gray-900);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.legal-page table td { color: var(--gray-600); }
.legal-page table tr:last-child td { border-bottom: none; }

.legal-page a {
  color: var(--green-700);
  text-decoration: underline;
}
.legal-page a:hover { color: var(--green-700); }
/* Los botones dentro de páginas de contenido conservan su estilo propio:
   sin esto, `.legal-page a` gana por especificidad y deja el texto del
   botón primario en verde sobre fondo verde (invisible). */
.legal-page a.btn-primary,
.legal-page a.btn-primary:hover { color: #fff; text-decoration: none; }
.legal-page a.btn-white { color: var(--green-700); text-decoration: none; }
.legal-page a.btn-outline,
.legal-page a.btn-ghost { text-decoration: none; }
.legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 500; color: var(--green-700);
  margin-bottom: 32px;
  text-decoration: none;
}
.legal-back:hover { color: var(--green-700); }

/* ===== FINAL CTA ===== */
.final-cta { padding: 100px 0; }
.cta-card {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  border-radius: var(--radius-xl);
  padding: 72px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.15), transparent 60%);
  pointer-events: none;
}
.cta-card h2 {
  font-size: 2.4rem; font-weight: 800; color: #fff;
  margin-bottom: 12px; position: relative;
}
.cta-card p {
  font-size: 1.1rem; color: rgba(255,255,255,.92);
  margin-bottom: 32px; position: relative;
}
.cta-micro {
  margin-top: 16px;
  font-size: .82rem;
  color: rgba(255,255,255,.95);
  position: relative;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--gray-900);
  padding: 64px 0 0;
  color: var(--gray-300);
}
.footer-inner {
  display: flex; justify-content: space-between; gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--gray-800);
}
.footer-brand { max-width: 280px; }
.footer-brand .logo-dans { color: #fff; }
.footer-brand .logo-tree { color: var(--green-400); }
.footer-brand p { margin-top: 12px; font-size: .9rem; line-height: 1.6; }
.footer-links { display: flex; gap: 64px; }
.footer-col h4,
.footer-col .footer-col-title {
  font-size: .85rem; font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: .9rem; color: var(--gray-300);
  margin-bottom: 10px; transition: color .2s;
}
.footer-col a:hover { color: var(--green-400); }
.footer-bottom {
  padding: 24px 0;
  text-align: center;
  font-size: .82rem;
}
/* Sobre el fondo oscuro del pie, el gris medio se queda en 3,67. */
.footer-bottom a { color: var(--gray-300); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .feature-row-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.8rem; }
}

/* El nav pasa a hamburguesa en 900px, no en 768: los cuatro bloques de la barra
   (logo 117 + enlaces 243 + botones 236 + idioma 111 = 707px) no caben con holgura
   por debajo de ~850px de viewport y se partían en dos filas en tablets pequeñas. */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; }
  /* La barra cerrada es una sola fila de 72px: el logo la sostiene para que al
     abrir el menú (y pasar el nav a varias filas) no encoja. */
  .nav-logo { min-height: 72px; }
  .nav-inner { row-gap: 0; }

  /* Menú abierto: cada bloque ocupa una fila completa del propio nav-inner,
     que ya es flex-wrap. Nada de posicionar a mano ni de fijar la altura del
     desplegable: si cambia el número de enlaces, encaja solo. */
  .nav-links.open,
  .nav-links.open ~ .nav-actions,
  .nav-links.open ~ .lang-switch {
    display: flex;
    /* A sangre: .container mete 24px a cada lado y el nav es translúcido con
       blur, así que sin esto quedarían dos franjas transparentes en los bordes
       del desplegable. */
    width: calc(100% + 48px);
    margin: 0 -24px;
    padding: 18px 24px;
    background: #fff;
    border-top: 1px solid var(--gray-200);
  }
  .nav-links.open { flex-direction: column; gap: 16px; }
  .nav-links.open ~ .nav-actions { justify-content: center; gap: 12px; }
  /* El idioma cierra el desplegable; en móvil no cabe en la barra, pero dejarlo
     fuera del menú lo hacía invisible. */
  .nav-links.open ~ .lang-switch {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-bottom: 24px;
  }
  .nav-links.open ~ .lang-switch .lang-switch-text { display: inline; }
  .nav-links.open ~ .lang-switch .lang-select {
    min-width: 10rem;
    font-size: 0.9375rem;
    padding: 10px 36px 10px 14px;
    background-position: right 12px center;
  }
  /* Cierra el panel. El último bloque cambia según la página (el idioma en la
     home, los botones en el resto), de ahí :last-of-type sobre los div del nav
     en vez de nombrar uno concreto. */
  .nav-links.open ~ div:last-of-type {
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
  }
}

@media (max-width: 768px) {
  .hero { padding: 120px 0 60px; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero h1 { font-size: 2.4rem; }
  .hero-subtitle { margin: 0 auto 28px; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; }

  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .pain-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .feature-row { grid-template-columns: 1fr; }
  .feature-row-3 { grid-template-columns: 1fr; }

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

  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .price-card.popular { transform: none; }
  .price-card.popular:hover { transform: translateY(-4px); }

  .section-header h2 { font-size: 1.8rem; }

  .story-content { grid-template-columns: 1fr; gap: 32px; }
  .story-stats { flex-direction: row; }
  .stat-item { flex: 1; text-align: center; align-items: center; padding: 16px 12px; }
  .stat-number { font-size: 1.5rem; }

  .guarantee { flex-direction: column; text-align: center; align-items: center; }

  .footer-inner { flex-direction: column; }
  .footer-links { flex-wrap: wrap; gap: 32px; }

  .cta-card { padding: 48px 24px; }
  .cta-card h2 { font-size: 1.8rem; }

  .sticky-cta { display: block; }
  body { padding-bottom: 72px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .hero-screenshots { width: 260px; height: 440px; }
  .phone-front { width: 200px; top: 30px; }
  .phone-back { width: 170px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .story-stats { flex-direction: column; }
  .stat-item { text-align: left; align-items: flex-start; }
}

/* ===== MICRO-ANIMATIONS (FAST-PERFORMANCE) ===== */
@keyframes floatPhone {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floatPhoneDelay {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes elevateDashboard {
  0% { transform: translateY(0); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
  50% { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
  100% { transform: translateY(0); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
}

html {
  scroll-behavior: smooth;
}

.animate-float {
  animation: floatPhone 6s ease-in-out infinite;
  will-change: transform;
}

.animate-float-delay {
  animation: floatPhoneDelay 6s ease-in-out infinite 3s;
  will-change: transform;
}

.animate-elevate {
  animation: elevateDashboard 8s ease-in-out infinite;
  will-change: transform, box-shadow;
}