/* 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;
}
/* Desde que el email es un <a href="mailto:"> y no un <span>, tiene que
   parecerlo. En el cuerpo de las páginas ya lo resuelve `.legal-page a` (verde
   y subrayado); esto cubre el pie, donde esa regla no llega.
   El hover va acotado a `.footer` a propósito: sin acotar empata en
   especificidad con `.legal-page a` y dejaría el email en blanco sobre blanco
   al pasar el ratón por una página legal. */
a.footer-email { text-decoration: underline; text-underline-offset: 2px; }
.footer a.footer-email:hover { color: #fff; }

/* WhatsApp en el pie. Hereda el color del pie en vez de llevar el verde de
   marca de WhatsApp: en una columna de enlaces, un color ajeno grita más que
   informa, y el glifo ya identifica el canal.

   Va calificado con `.footer-col` porque `.footer-col a` (0,2,0) declara
   `display: block` y le gana a un `.footer-whatsapp` suelto (0,1,0): sin esto
   el enlace no era flex y el icono no se alineaba con el texto. */
.footer-col a.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-300);
  font-weight: 500;
}
.footer-col a.footer-whatsapp:hover { color: #fff; }
.footer-col a.footer-whatsapp svg { flex-shrink: 0; }

/* Los tres canales de /contact/, arriba del texto. Quien entra ahí ya ha
   decidido escribir: la dirección no puede estar enterrada en el cuarto
   párrafo. */
.legal-page .contacto-canales {
  list-style: none;
  padding: 0;
  margin: 28px 0 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
}
.legal-page .contacto-canales li { margin: 0; }
.legal-page .contacto-canales a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: .92rem;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.legal-page .contacto-canales a:hover {
  border-color: var(--green-200);
  box-shadow: var(--shadow-md);
}
.legal-page .contacto-canales svg { flex-shrink: 0; color: var(--green-700); }
.legal-page .contacto-canales strong { color: var(--gray-900); font-size: 1rem; }

.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%; }
}

/* ===== CASOS DE ÉXITO =====
   Sección propia y no `.legal-page`: una ficha de cliente es una página
   comercial con rejillas, franjas a sangre y una barra lateral, no un
   documento de texto corrido como las legales o el blog.

   Todo el color sale de las variables de :root. El diseño se dibujó sobre
   ellas —#047857 es --green-700, #ecfdf5 es --green-50—, así que un cambio de
   paleta arrastra esta sección sin tocarla. */

/* El nav del sitio es position:fixed y mide 73px, así que cada página deja su
   propio hueco arriba: la home con `padding: 140px 0 80px` en .hero, las
   legales con 120px. El hueco NO va en .casos —eso dejaría una franja blanca
   entre el nav y el degradado del encabezado—, sino dentro del primer bloque
   de cada vista, para que su fondo llegue hasta arriba del todo. */
.casos { display: block; }

/* Rótulo pequeño en verde que encabeza cada sección. Es lo que permite que los
   h2 hablen del caso («Un cierre de mes que ya no ocupa la agenda») en vez de
   nombrar la sección: el rótulo dice de qué va, el titular dice qué pasó. */
.casos-eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
}

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

/* --- encabezado del índice ------------------------------------------------ */
.casos-hero {
  background: linear-gradient(180deg, var(--green-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--gray-200);
  padding: 145px 0 56px;   /* 73 del nav fijo + 72 de aire */
}
.casos-hero h1 {
  margin: 14px 0 0;
  max-width: 15ch;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.1rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gray-900);
  text-wrap: pretty;
}
.casos-hero__entrada {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--gray-600);
  text-wrap: pretty;
}
/* Cifras del encabezado. Salen calculadas de los casos publicados (ver
   estadisticasDe en lib/casos.ts): aquí no se escribe ningún número a mano. */
.casos-hero__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 32px 0 0;
}
.casos-hero__cifras dt {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.casos-hero__cifras dd { margin: 0; font-size: .9rem; color: var(--gray-500); }

/* --- filtros -------------------------------------------------------------- */
.casos-filtros {
  position: sticky;
  /* Exactamente el alto del nav fijo, medido: con menos, la barra se le mete
     por debajo al hacer scroll y los chips se cortan; con más, asoma una
     rendija por la que pasa el contenido. */
  top: 73px;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}
.casos-filtros__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.casos-filtros__tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.casos-chip {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--gray-200);
  background: #fff;
  color: var(--gray-600);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.casos-chip:hover { border-color: var(--green-600); color: var(--green-700); }
.casos-chip.is-activa {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.casos-buscador input {
  min-width: 280px;
  padding: 11px 18px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--gray-50);
  font-family: inherit;
  font-size: .9rem;
  color: var(--gray-800);
  outline: none;
}
.casos-buscador input:focus { border-color: var(--green-600); background: #fff; }

.casos-vacio {
  margin: 48px 0;
  padding: 64px 24px;
  text-align: center;
  font-size: 1.05rem;
  color: var(--gray-500);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
}

/* --- caso destacado ------------------------------------------------------- */
/* Dos columnas: el relato a la izquierda y las cifras a la derecha. En un caso
   de cliente el número ES la portada, así que ocupa el sitio donde otro diseño
   pondría una captura de pantalla que ya se ha visto en toda la web. */
.caso-destacado {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  margin: 48px 0 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transition: box-shadow .2s;
}
.caso-destacado:hover { box-shadow: var(--shadow-xl); }
.caso-destacado__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 44px;
}
.caso-destacado h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
  text-wrap: pretty;
}
/* Enlace extendido: el titular cubre la tarjeta entera, así que se puede pulsar
   en cualquier punto. Por eso «Leer el caso completo» NO es otro enlace — sería
   un segundo destino idéntico para quien navega con lector de pantalla. */
.caso-destacado h2 a { color: inherit; }
.caso-destacado h2 a::after { content: ''; position: absolute; inset: 0; }
.caso-destacado__resumen {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gray-600);
  text-wrap: pretty;
}
.caso-destacado:focus-within {
  outline: 2px solid var(--green-700);
  outline-offset: 4px;
}
.caso-destacado h2 a:focus-visible { outline: none; }
/* Las separaciones son el fondo asomando por un gap de 1px: una rejilla con
   borde interior real necesitaría reglas distintas para la primera fila y la
   primera columna. */
.caso-destacado__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  background: var(--gray-200);
  border-left: 1px solid var(--gray-200);
}
.caso-destacado__cifras > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
  background: var(--gray-50);
}
/* Con tres cifras, la última ocupa las dos columnas. Si no, la rejilla deja
   una celda vacía abajo a la derecha y ahí asoma el gris del separador: un
   agujero justo al lado de los números, que es donde mira todo el mundo.
   Con dos o con cuatro cuadra sola y esta regla no se activa. */
.caso-destacado__cifras > div:nth-child(3):last-child { grid-column: 1 / -1; }
.caso-destacado__cifras dt {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.caso-destacado__cifras dd { margin: 6px 0 0; font-size: .95rem; color: var(--gray-600); }

.caso-etiqueta {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--green-50);
  color: var(--green-700);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.caso-etiqueta--destacada { font-size: .75rem; letter-spacing: .1em; padding: 6px 16px; }

.caso-enlace { margin: 0; font-size: 1rem; font-weight: 700; color: var(--green-700); }

/* --- identidad de la escuela (logo + nombre) ------------------------------ */
.caso-identidad { display: flex; align-items: center; gap: 14px; }
.caso-logo {
  width: 48px; height: 48px;
  border-radius: 11px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  object-fit: contain;
}
.caso-logo--grande { width: 56px; height: 56px; border-radius: var(--radius-md); }
/* Sin logo del cliente, sus iniciales. Un hueco gris con la palabra «logo»
   dentro es un marcador de prototipo; unas iniciales son una identidad. */
.caso-logo--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--green-700);
  background: var(--green-50);
  border-color: var(--green-100);
}

/* --- rejilla y tarjetas --------------------------------------------------- */
.casos-lista__titulo {
  margin: 44px 0 22px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
}
.casos-lista__contador { color: var(--gray-400); font-weight: 600; }

.casos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.caso-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.caso-tarjeta:hover {
  border-color: var(--green-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.caso-tarjeta:focus-within { outline: 2px solid var(--green-700); outline-offset: 4px; }
.caso-tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.caso-tarjeta__escuela { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.caso-tarjeta__meta { margin: 0; font-size: .85rem; color: var(--gray-500); }
.caso-tarjeta__titulo {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--gray-900);
  text-wrap: pretty;
}
.caso-tarjeta__titulo a { color: inherit; }
.caso-tarjeta__titulo a::after { content: ''; position: absolute; inset: 0; }
.caso-tarjeta__titulo a:focus-visible { outline: none; }
.caso-tarjeta__resumen {
  margin: 0;
  flex: 1;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--gray-600);
}
.caso-tarjeta__kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
.caso-tarjeta__kpi strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.caso-tarjeta__kpi span { font-size: .85rem; color: var(--gray-500); }

/* --- llamada a la acción -------------------------------------------------- */
.casos-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 64px 0 80px;
  padding: 52px 48px;
  border-radius: var(--radius-xl);
  background: var(--green-700);
}
.casos-cta h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: pretty;
}
.casos-cta p {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--green-100);
}
.casos-cta p a { color: #fff; text-decoration: underline; }
.casos-cta .btn-white { white-space: nowrap; }

/* --- ficha ---------------------------------------------------------------- */
.caso-volver {
  display: inline-block;
  /* Margen y no relleno: con padding-top el texto bajaba, pero los primeros
     73px del área clicable seguían debajo del nav fijo, que se come el clic. */
  margin-top: 97px;   /* 73 del nav fijo + 24 de aire */
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-700);
}
.caso-ficha__hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 40px;
}
.caso-ficha__hero h1 {
  margin: 20px 0 0;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 2.9rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gray-900);
  text-wrap: pretty;
}
.caso-ficha__entrada {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--gray-600);
  text-wrap: pretty;
}
.caso-ficha__fecha { margin: 14px 0 0; font-size: .9rem; color: var(--gray-400); }
.caso-ficha__hero figure { margin: 0; }
/* `figure img` y no `img` a secas: en esta portada hay DOS imágenes —la captura
   y el logotipo de la escuela— y un selector suelto (0,1,1) le gana a
   `.caso-logo` (0,1,0), que estiraba el logo al ancho de la columna. */
.caso-ficha__hero figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
}

/* Franja de cifras a sangre.

   Flex y no grid con auto-fit: auto-fit reservaba tracks para las columnas que
   cabían, no para las que hay, así que con cuatro métricas creaba una quinta
   columna vacía y la franja acababa 24px antes que el resto de la página.
   Con `flex: 1 1 180px` hay exactamente tantas celdas como cifras, repartidas a
   partes iguales, y siguen bajando de fila solas cuando no caben. */
.caso-franja {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.caso-franja dl {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  /* `auto` y no `0`: este <dl> ES el .container, y `.caso-franja dl` (0,1,1) le
     gana a `.container` (0,1,0). Con `margin: 0` se le quitaba el centrado y la
     banda entera quedaba 33px a la izquierda del resto de la página — las
     cifras salían descuadradas respecto al titular de arriba. */
  margin: 0 auto;
  padding-top: 34px;
  padding-bottom: 34px;
}
/* Centradas: son cuatro datos sueltos en una banda, no una tabla con una
   primera columna que marque el margen de lectura. */
.caso-franja dl > div { flex: 1 1 180px; text-align: center; }
.caso-franja dt {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.caso-franja dd { margin: 4px 0 0; font-size: .95rem; color: var(--gray-600); }

.caso-ficha__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
  padding-top: 56px;
}
.caso-relato { display: flex; flex-direction: column; gap: 48px; max-width: 720px; }
.caso-bloque { display: flex; flex-direction: column; gap: 14px; }
.caso-bloque h2 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
  text-wrap: pretty;
}
.caso-bloque > p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--gray-700);
  text-wrap: pretty;
}

.caso-cita {
  margin: 0;
  padding: 34px 38px;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--green-700);
  background: var(--green-50);
}
.caso-cita p {
  margin: 0 0 16px;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--green-900);
  text-wrap: pretty;
}
.caso-cita footer { font-size: .95rem; font-weight: 600; color: var(--green-700); }
.caso-cita footer a { color: var(--green-700); text-decoration: underline; }


/* Pasos numerados. El número sale de un contador CSS y no del marcado: así el
   orden lo pone la lista —que es quien lo sabe— y no hay forma de publicar un
   «3» antes de un «2». */
.caso-pasos {
  counter-reset: paso;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 6px 0 0;
  padding: 0;
}
.caso-pasos li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}
.caso-pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--green-700);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}
.caso-pasos h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--gray-900); }
.caso-pasos p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--gray-600); }

.caso-comparativa {
  width: 100%;
  margin-top: 6px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
}
.caso-comparativa th {
  padding: 12px 24px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.caso-comparativa th:last-child { color: var(--green-700); }
.caso-comparativa td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 1rem;
  line-height: 1.55;
  vertical-align: top;
}
.caso-comparativa td:first-child { background: var(--gray-50); color: var(--gray-600); width: 50%; }
.caso-comparativa td:last-child { color: var(--gray-900); font-weight: 600; }
.caso-comparativa tr:last-child td { border-bottom: none; }

.caso-funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 6px;
}
.caso-funcion {
  padding: 22px 24px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
}
.caso-funcion h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--green-700); }
.caso-funcion p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--gray-600); }

/* Cuerpo libre del .md, para lo que no encaje en ninguna sección. */
.caso-prosa h2 { font-size: 1.85rem; }
.caso-prosa h3 { margin-top: 8px; font-size: 1.2rem; color: var(--gray-900); }
.caso-prosa p { margin: 0; font-size: 1.08rem; line-height: 1.75; color: var(--gray-700); }
.caso-prosa a { color: var(--green-700); text-decoration: underline; }
.caso-prosa ul { list-style: disc; padding-left: 22px; color: var(--gray-700); }
.caso-prosa li { margin-bottom: 8px; line-height: 1.7; }

/* --- barra lateral -------------------------------------------------------- */
/* 96px = alto del nav sticky + aire. Sin este offset el panel se mete debajo
   de la navegación al bajar. */
.caso-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.caso-panel {
  padding: 26px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}
.caso-panel__titulo {
  margin: 0 0 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.caso-datos { display: flex; flex-direction: column; gap: 11px; margin: 0; font-size: .95rem; }
.caso-datos > div { display: flex; justify-content: space-between; gap: 12px; }
.caso-datos dt { color: var(--gray-500); }
.caso-datos dd { margin: 0; text-align: right; font-weight: 600; color: var(--gray-900); }
.caso-panel__web { margin: 16px 0 0; font-size: .9rem; }
.caso-panel__web a { color: var(--green-700); font-weight: 600; }
.caso-panel--cta { background: var(--green-700); border-color: var(--green-700); }
.caso-panel--cta p { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; color: var(--green-100); }
.caso-panel__gancho { font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #fff; }
.caso-panel--cta .btn-white { width: 100%; }

/* --- casos relacionados --------------------------------------------------- */
.caso-relacionados {
  margin-top: 56px;
  padding: 56px 0 72px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.caso-relacionados__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.caso-relacionados__cabecera h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
}
.caso-relacionados__cabecera > a { font-size: .95rem; font-weight: 700; color: var(--green-700); }

/* --- adaptación a pantallas estrechas ------------------------------------- */
@media (max-width: 980px) {
  .caso-destacado { grid-template-columns: 1fr; }
  .caso-destacado__cifras { border-left: none; border-top: 1px solid var(--gray-200); }
  .caso-ficha__hero { grid-template-columns: 1fr; gap: 32px; }
  .caso-ficha__cuerpo { grid-template-columns: 1fr; gap: 40px; }
  /* El panel deja de ser sticky: en una columna se quedaría clavado tapando el
     relato mientras se lee. */
  .caso-aside { position: static; }
}

@media (max-width: 700px) {
  .casos-hero { padding: 121px 0 40px; }
  .casos-hero__cifras { gap: 24px; }
  .caso-destacado__texto { padding: 28px; }
  .caso-destacado__cifras > div { padding: 24px 20px; }
  .casos-cta { padding: 36px 28px; margin: 48px 0 64px; }
  .casos-filtros__inner { justify-content: flex-start; }
  .casos-buscador, .casos-buscador input { width: 100%; min-width: 0; }
  .caso-relato { gap: 36px; }
  .caso-bloque h2 { font-size: 1.5rem; }
  .caso-cita { padding: 24px 26px; }
  .caso-cita p { font-size: 1.15rem; }
  .caso-pasos li { grid-template-columns: 40px 1fr; gap: 14px; }
  .caso-pasos li::before { width: 40px; height: 40px; font-size: .95rem; }
  /* La comparativa nunca colapsa a una columna: una fila «Antes» separada de su
     «Ahora» pierde justo lo que la hace legible. Se estrecha y ya. */
  .caso-comparativa th, .caso-comparativa td { padding: 14px 16px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card-img img { transition: none; }
  .post-card:hover .post-card-img img { transform: none; }
  .caso-tarjeta { transition: none; }
  .caso-tarjeta:hover { 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;
}