/* Paleta idéntica a AppTheme (frontend/lib/core/theme/app_theme.dart), panel.css y
   templates/legal/base.html — mismos tokens, ningún color nuevo inventado para el sitio público.
   Sin Google Fonts: se mantiene el mismo precedente que panel/legal de usar la pila de fuentes
   del sistema, para no añadir una petición de red externa más de la estrictamente necesaria. */
:root {
  color-scheme: light;
  --background: #F8F6F2;
  --surface: #FFFFFF;
  --text-primary: #181D27;
  --text-secondary: #585E69;
  --text-tertiary: #6C727E;
  --accent: #606CDD;
  --accent-tint-bg: #E6EAFC;
  --accent-tint-text: #2F3390;
  --border: #DFDAD4;
  --border-subtle: #EBE7E2;
  --success: #0A924B;
  --success-tint-bg: #DBF2E0;
  --success-tint-text: #00541A;

  /* Héroe oscuro (042). **Ni un color inventado**: el suelo es `--text-primary` —el mismo #181D27
     con el que la app escribe— y el acento es el índigo de siempre, aclarado solo lo justo para
     contrastar sobre él. Así el sitio y la app siguen siendo lo mismo, que es la condición que
     puso el usuario al elegir esta dirección. */
  --dark: #181D27;
  --dark-border: #3A4152;
  --on-dark: #FFFFFF;
  --on-dark-muted: #C9CDD6;
  --accent-on-dark: #A3ACFF;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: var(--background);
}

/* Bootstrap's default .container gutter (0.75rem = 12px) deja las tarjetas casi pegadas al borde
   en móvil — se sube a 20px, el mismo margen que ya tenía el diseño a medida anterior. */
.container {
  padding-left: 20px;
  padding-right: 20px;
}

a {
  color: var(--accent);
}

/* Nav */
.marketing-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.marketing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--text-primary);
}
.marketing-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  display: inline-block;
}
.navbar-nav .nav-link {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Botones: mismo radio/peso que el resto del proyecto (panel.css), no el estilo por defecto
   de Bootstrap. */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  border-radius: 12px;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--accent-tint-text);
  border-color: var(--accent-tint-text);
}
.btn-outline-secondary {
  color: var(--text-primary);
  border-color: var(--border);
  font-weight: 700;
  border-radius: 12px;
}
.btn-outline-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Cards planas: 1px borde, sin sombra, radio 16px — igual que panel.css, no el sombreado por
   defecto de Bootstrap. */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: none;
}

/* Hero */
.marketing-home .marketing-navbar {
  background: var(--dark);
  border-bottom: 0;
}
.marketing-home .marketing-brand { color: var(--on-dark); }
.marketing-home .marketing-brand-mark { background: var(--accent-on-dark); }
.marketing-home .navbar-nav .nav-link { color: var(--on-dark-muted); }
.marketing-home .navbar-nav .nav-link:hover { color: var(--on-dark); }
.marketing-home .navbar-toggler { filter: invert(1); }

.marketing-home .marketing-hero {
  background: var(--dark);
  color: var(--on-dark);
  padding-top: 40px;
  padding-bottom: 0;
}
.marketing-home .marketing-hero h1 {
  color: var(--on-dark);
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.marketing-home .marketing-hero h1 em { font-style: normal; color: var(--accent-on-dark); }
.marketing-home .marketing-hero .marketing-lead { color: var(--on-dark-muted); }

/* El texto y la captura alineados por abajo: la pantalla se apoya en el borde inferior del héroe y
   lo cruza, que es lo que hace que parezca un producto y no una ilustración pegada encima. */
.marketing-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: end;
}
.marketing-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 64px;
}
.marketing-btn-light,
.marketing-btn-ghost {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 11px;
}
.marketing-btn-light { background: var(--accent-on-dark); color: var(--dark); }
.marketing-btn-light:hover { background: var(--on-dark); color: var(--dark); }
.marketing-btn-ghost { border: 1px solid var(--dark-border); color: var(--on-dark); }
.marketing-btn-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }
.marketing-shot { align-self: end; }
.marketing-shot img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 60px rgba(0, 0, 0, 0.35);
}

.marketing-hero {
  padding: 72px 0 56px;
}
.marketing-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.marketing-hero h1 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 12px 0 16px;
  max-width: 640px;
}
.marketing-lead {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 28px;
}

/* Feature grid */
/* `padding-top`/`padding-bottom` y **no el atajo** `padding: 40px 0 64px`: el atajo ponía los
   lados a 0 y, como esta regla va después de `.container` con la misma especificidad, se comía sus
   20px horizontales. Los márgenes negativos de `.row` (−8px con `g-3`) se quedaban entonces sin
   padding dentro del que encajar y la rejilla **desbordaba 8px** a 390px de ancho — medido con
   Playwright el 2026-10-20. Venía de `010` y la pasada de responsive del 2026-08-01 no lo vio
   porque miró la barra de navegación. */
.marketing-features {
  padding-top: 40px;
  padding-bottom: 64px;
}
.marketing-feature-card .card-body {
  padding: 22px;
}
.marketing-badge-static {
  background: var(--accent-tint-bg);
  color: var(--accent-tint-text);
}
.marketing-badge-dynamic {
  background: #C5F6F8;
  color: #00545D;
}

/* Pricing */
.marketing-pricing-header {
  padding: 56px 0 8px;
}
.marketing-pricing-header h1 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
}
.marketing-plans {
  padding: 40px 0 72px;
}
.marketing-plan-card .card-body {
  padding: 28px 24px;
}
.marketing-plan-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint-bg);
}
.marketing-plan-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.marketing-plan-price {
  font-size: 34px;
  font-weight: 800;
  margin: 10px 0 4px;
}
.marketing-plan-price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.marketing-plan-features {
  margin: 20px 0;
}
.marketing-plan-features li {
  font-size: 13.5px;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.marketing-plan-features li:first-child {
  border-top: none;
}
.marketing-plan-dynamic-yes {
  color: var(--success-tint-text);
  font-weight: 700;
}
.marketing-plan-dynamic-no {
  color: var(--text-tertiary);
}

/* Footer */
.marketing-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 28px 0;
  margin-top: 40px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.marketing-footer a {
  color: var(--text-secondary);
  margin-left: 16px;
}
.marketing-footer a:first-child {
  margin-left: 0;
}

@media (max-width: 480px) {
  .marketing-hero h1 {
    font-size: 30px;
  }
  .marketing-pricing-header h1 {
    font-size: 26px;
  }
}


/* --- 041: el sitio cuenta lo que la app hace hoy -------------------------------------------- */

.marketing-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* La respuesta a cada problema, separada del problema por una línea: el bloque dice primero qué
   duele y luego qué hacemos, y sin la separación se leen como un solo párrafo. */
.marketing-answer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  /* Pegada abajo: los tres problemas tienen texto de distinta longitud, así que sin esto la línea
     separadora de cada tarjeta queda a una altura distinta y las tres respuestas se leen
     desalineadas. Solo se ve mirando la página — en el HTML las tarjetas son idénticas. */
  margin-top: auto;
}

/* `h-100` iguala la altura de las tarjetas, pero no la del contenido de dentro: hace falta que el
   cuerpo sea flex para que `margin-top: auto` tenga contra qué empujar. */
.marketing-feature-card .card-body {
  display: flex;
  flex-direction: column;
}

/* Aquí vivía otra `.marketing-steps` —números en círculo, en columna— que se quedó sin marcado al
   rehacer la portada en `041`. Era código muerto y además colisionaba por nombre con la lista de
   pasos de abajo, ganándole el `::before` por especificidad (`.marketing-steps > li::before` pesa
   más que `.marketing-step::before`): la portada salía con los números del bloque viejo. */

.marketing-figure {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.marketing-figure strong {
  display: block;
  font-size: 1.6rem;
  color: var(--accent);
}

.marketing-figure span {
  color: var(--text-secondary);
  font-size: 0.9rem;
}


/* --- 042: la propuesta A, aplicada --------------------------------------------------------- */

/* Una banda de color entero en vez de otra fila de tarjetas: rompe el ritmo de la página, que es
   lo que la hace leerse como diseñada en vez de apilada. */
.marketing-band {
  background: var(--accent-tint-bg);
  padding-top: 72px;
  padding-bottom: 72px;
}
/* La lista numerada de los pasos. `list-style: none` + `padding-left: 0` porque el número lo pinta
   el contador de abajo y el de la propia `<ol>` lo duplicaría; y el relleno por defecto de una
   lista descuadraría los márgenes negativos de `.row` de Bootstrap. */
.marketing-steps {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  counter-reset: paso;
}
/* Sin monoespaciada (Taste): aquí no alineaba nada, solo ponía voz "técnica". Cifras tabulares
   para que 01-04 ocupen lo mismo. */
.marketing-step {
  counter-increment: paso;
}
.marketing-step::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-tint-text);
  margin-bottom: 10px;
}
.marketing-step p { font-size: 15.5px; line-height: 1.55; margin-bottom: 0; }

/* "Lo que no hacemos" vuelve al oscuro del héroe: la página cierra con el mismo tono con el que
   abre, y aísla el único bloque que habla de límites en vez de de funciones. */
.marketing-quiet {
  background: var(--dark);
  color: var(--on-dark);
  padding-top: 64px;
  padding-bottom: 64px;
}
.marketing-quiet .marketing-section-title { color: var(--on-dark); }
.marketing-quiet p {
  color: var(--on-dark-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 44em;
}

/* Las cifras, en la fuente del texto con cifras tabulares. La monoespaciada de la app resuelve un
   problema que aquí no existe: en la app las cifras se apilan en columna y hay que compararlas
   verticalmente; estas cuatro van en fila y no se comparan entre sí. */
.marketing-figure strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 820px) {
  .marketing-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .marketing-hero-cta { padding-bottom: 40px; }
  .marketing-shot img { max-width: 260px; }
}