/* ==========================================================================
   Asistentico — Hoja de estilos
   Automatización Inteligente para negocios. Paleta inspirada en Costa Rica
   (azul navy / rojo / blanco), tipografía Poppins (display) + Manrope (UI).
   Todo valor de marca vive en las variables :root.
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f4f6fb;
  --color-ink: #10131a;
  --color-muted: #5b6472;
  --color-navy: #0b1f4b;
  --color-navy-dark: #071336;
  --color-red: #d21f3c;
  --color-red-dark: #a9152d;
  --color-border: #e3e7f0;

  --font-display: "Poppins", "Georgia", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container-width: 1160px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 75, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(11, 31, 75, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(11, 31, 75, 0.32);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Gradiente de marca compartido: nace en el botón principal del hero y se
     reutiliza como fondo del Hero y de la burbuja del CTA final para que
     ambos hablen el mismo idioma visual. */
  --gradient-brand: linear-gradient(120deg, var(--color-red), var(--color-navy), var(--color-red));
  --gradient-brand-size: 220% 220%;

  /* Grano/ruido sutil para bloques de color sólido (footer, burbuja del CTA
     final), generado en SVG puro (sin imágenes externas). */
  --noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* {
  box-sizing: border-box;
  user-select: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-navy);
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--color-navy);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}



.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 var(--space-1);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 0 rgba(210, 31, 60, 0.5);
  animation: eyebrow-pulse 2s infinite;
}

@keyframes eyebrow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(210, 31, 60, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(210, 31, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(210, 31, 60, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before {
    animation: none;
  }
}

/* El eyebrow del Hero no se toca en esta iteración. */
.hero__eyebrow::before {
  content: none;
}



/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Header / navegación ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
  max-width: var(--container-width);
  margin: 0 auto;
  transition: padding 0.35s var(--ease);
}

.site-header.is-scrolled .nav {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-navy);
  text-decoration: none !important;
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: 1.1rem;
}

.nav__links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav__links a {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--color-red);
  transition: right 0.25s var(--ease);
}

.nav__links a:hover::after {
  right: 0;
}

@media (max-width: 780px) {
  .nav__toggle {
    display: block;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .nav__links.is-open {
    display: flex;
  }
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.btn--primary {
  background: #fff;
  color: var(--color-navy) !important;
  /* Halo blanco + sombra profunda + brillo suave: sobre el fondo animado del
     Hero, un shadow genérico se perdía. Esto lo hace flotar y destacar de
     inmediato sin tocar sus colores base ni el efecto de hover. */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 24px 48px -16px rgba(7, 19, 54, 0.65),
    0 0 36px rgba(255, 255, 255, 0.35);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 2px solid var(--color-navy);
  border-right: 2px solid var(--color-navy);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.35s var(--ease);
}

.btn--primary:hover {
  color: #fff !important;
  background: var(--gradient-brand);
  background-size: var(--gradient-brand-size);
  animation: btn-gradient-shift 3s ease infinite;
  border-top-color: var(--color-navy);
  border-left-color: var(--color-navy);
  border-bottom-color: var(--color-red);
  border-right-color: var(--color-red);
  /* Anillo blanco definido: el gradiente del botón es el mismo del fondo del
     Hero, así que sin un borde propio el botón se camufla quando ambos
     coinciden en la misma zona de color. El anillo lo separa siempre. */
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255, 255, 255, 0.35),
    rgba(210, 31, 60, 0.35) 6px 6px, rgba(11, 31, 75, 0.28) 12px 12px,
    rgba(210, 31, 60, 0.18) 18px 18px;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover {
    animation: none;
  }
}

/* En móvil no hay hover real: el efecto queda siempre activo para que se
   vea el mismo acabado premium sin depender de un puntero. */
@media (max-width: 780px) {
  .btn--primary {
    color: #fff !important;
    background: var(--gradient-brand);
    background-size: var(--gradient-brand-size);
    animation: btn-gradient-shift 3s ease infinite;
    border-top-color: var(--color-navy);
    border-left-color: var(--color-navy);
    border-bottom-color: var(--color-red);
    border-right-color: var(--color-red);
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255, 255, 255, 0.35),
      rgba(210, 31, 60, 0.35) 6px 6px, rgba(11, 31, 75, 0.28) 12px 12px,
      rgba(210, 31, 60, 0.18) 18px 18px;
  }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .btn--primary {
    animation: none;
  }
}

.btn--ghost {
  background: transparent;
  color: var(--color-navy) !important;
  font-weight: 600;
  padding: 0.9rem 0.25rem;
}

.btn--ghost:hover {
  text-decoration: underline;
}

.btn--on-dark {
  background: #fff;
  color: var(--color-red) !important;
}

.btn--on-dark:hover {
  background: #fff;
  color: var(--color-red-dark) !important;
  transform: translateY(-2px);
}

/* ---------- Secciones genéricas ----------
   Patrón de puntos muy sutil para que las secciones dejen de sentirse
   "vacías" sobre blanco/gris plano, sin competir con el contenido. */

.section {
  padding: var(--space-5) 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 31, 75, 0.14) 1px, transparent 0);
  background-size: 26px 26px;
}

.section--alt {
  background-color: var(--color-bg-soft);
}

.section__head {
  max-width: 640px;
  margin: 0 0 var(--space-4);
}

.section__title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  margin: 0 0 var(--space-2);
}

.section__subtitle {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin: 0;
}

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Hero ----------
   Mismo gradiente animado del botón principal, ahora como fondo de toda la
   sección: comparte lenguaje visual con el CTA final. */

.hero {
  position: relative;
  padding: var(--space-5) 0 var(--space-4);
  background-image: var(--gradient-brand);
  background-size: var(--gradient-brand-size);
  animation: btn-gradient-shift 10s ease infinite;
}

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

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: var(--space-5);
  align-items: center;
}

.hero__eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  margin: 0 0 var(--space-3);
}

.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 0 var(--space-4);
}

.hero .btn--ghost {
  color: #fff !important;
}

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

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero__mockup {
    order: -1;
  }
}

/* ---------- Mascota + chat mockup del hero ---------- */

.hero__visual {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding-left: 140px;
}

.hero__mascot {
  position: absolute;
  left: -34px;
  bottom: -14px;
  width: 150px;
  z-index: 2;
  filter: drop-shadow(0 18px 22px rgba(11, 31, 75, 0.28));
  animation: mascot-float 4.5s ease-in-out infinite;
}

@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mascot {
    animation: none;
  }
}

@media (max-width: 560px) {
  .hero__visual {
    padding-left: 92px;
  }

  .hero__mascot {
    left: -20px;
    width: 90px;
    bottom: -6px;
  }
}

.chat-mockup {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 380px;
  margin: 0 0 0 auto;
}

.chat-mockup__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-navy);
  color: #fff;
}

.chat-mockup__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.chat-mockup__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-mockup__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.chat-mockup__status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #cdd6ee;
}

.chat-mockup__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
}

.chat-mockup__body {
  height: 360px;
  padding: var(--space-3);
  overflow-y: auto;
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: none;
}

.chat-mockup__body::-webkit-scrollbar {
  display: none;
}

.chat-bubble {
  max-width: 80%;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  animation: bubble-in 0.35s var(--ease) both;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-bubble--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--color-ink);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.chat-bubble--client {
  align-self: flex-end;
  background: var(--color-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble--typing {
  align-self: flex-start;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 4px;
  padding: 0.75rem 1rem;
}

.chat-bubble--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-muted);
  animation: typing-dot 1s infinite ease-in-out;
}

.chat-bubble--typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-bubble--typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-menu {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 90%;
  animation: bubble-in 0.35s var(--ease) both;
}

.chat-menu span {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .chat-menu {
    animation: none;
  }
}

/* ---------- Grillas de tarjetas ----------
   Columnas explícitas por breakpoint (mobile-first). Se evita auto-fit con
   minmax: cuando la última fila queda incompleta, auto-fit estira esas
   tarjetas para llenar el ancho y las deja desalineadas respecto a las
   filas de arriba. Con columnas fijas, la fila incompleta simplemente deja
   espacio vacío a la derecha, que es el comportamiento esperado. */

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

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

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

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

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

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

/* ---------- Tarjeta base: estructura + microinteracción común ----------
   La barra de acento lateral NO vive aquí: cada sección la implementa por su
   cuenta (El problema y Soluciones la necesitan con comportamientos
   distintos; Industrias y Planes no la llevan). Así cada sección puede
   evolucionar su propia interacción sin arrastrar cambios a las demás. */

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 8px);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.15rem;
  transition: color 0.3s var(--ease);
}

.card p {
  margin: 0;
  color: var(--color-muted);
}

/* ---------- Soluciones ---------- */

.solution-card {
  border-left: 4px solid var(--color-navy);
  padding-left: calc(var(--space-3) + 4px);
}

.solution-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.solution-card:hover::after,
.solution-card:focus-within::after {
  transform: scaleX(1);
}

.solution-card h3,
.solution-card p {
  position: relative;
  z-index: 1;
  transition: color 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-card:hover h3,
.solution-card:hover p,
.solution-card:focus-within h3,
.solution-card:focus-within p {
  color: #fff;
}

/* ---------- El problema (sin cambios respecto a la iteración anterior) ---------- */

.problem-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--color-red);
  opacity: 0.5;
  transition: height 0.45s var(--ease), opacity 0.3s var(--ease), box-shadow 0.45s var(--ease);
}

.problem-card:hover::before,
.problem-card:focus-within::before {
  height: 100%;
  opacity: 1;
  box-shadow: 0 0 16px 2px rgba(210, 31, 60, 0.45);
}

.problem-card p {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.02rem;
}

.problem-bridge {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-navy);
  max-width: 640px;
}

/* ---------- Cómo funciona (timeline) ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  counter-reset: step;
}

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

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

.timeline li {
  counter-increment: step;
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3) var(--space-3);
  cursor: pointer;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.timeline li:hover,
.timeline li:focus-within {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.timeline li::before {
  content: counter(step);
  position: absolute;
  top: -18px;
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  z-index: 2;
}

/* Relleno circular que nace exactamente en el círculo del número y se
   expande con clip-path (no con transform/overflow) para no recortar el
   número, que sobresale por encima del borde superior de la tarjeta. */
.timeline li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-navy);
  clip-path: circle(0% at 38px 0px);
  transition: clip-path 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.timeline li:hover::after,
.timeline li:focus-within::after {
  clip-path: circle(150% at 38px 0px);
}

.timeline strong {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-bottom: 0.35rem;
  transition: color 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--color-muted);
  transition: color 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline li:hover strong,
.timeline li:hover p,
.timeline li:focus-within strong,
.timeline li:focus-within p {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .timeline li::after {
    transition: none;
  }
}

/* ---------- Industrias ----------
   Sin barra de acento: en su lugar, una inclinación 3D sutil que sigue el
   cursor (controlada por JS vía transform inline, ver main.js). El hover
   genérico de .card (translateY + sombra) se anula aquí para no competir
   con esa inclinación. */

.industry-card {
  text-align: left;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.5s var(--ease);
}

.industry-card.is-tilting {
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.1s linear;
}

.industry-card:hover,
.industry-card:focus-within {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.industry-card__icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.industry-card__icon svg {
  width: 100%;
  height: 100%;
}

.industry-card--wildcard {
  background: var(--color-bg-soft);
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  .industry-card {
    transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  }
}

/* ---------- Planes ---------- */

.plans-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

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

.plan-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

.plan-card--featured {
  background: var(--color-navy);
  border-color: var(--color-navy);
  box-shadow: var(--shadow-lg);
  margin-top: -14px;
  margin-bottom: -14px;
  padding-top: calc(var(--space-3) + 14px);
  padding-bottom: calc(var(--space-3) + 14px);
  z-index: 2;
}

.plan-card--featured h3 {
  color: #fff;
}

.plan-card--featured .plan-card__price {
  color: #fff;
}

.plan-card--featured .plan-card__price span {
  color: rgba(255, 255, 255, 0.75);
}

.plan-card--featured .plan-card__features {
  color: #fff;
}

.plan-card--featured .plan-card__features li::before {
  color: #fff;
}

.plan-card__badge {
  position: absolute;
  top: -13px;
  right: var(--space-3);
  background: var(--color-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  z-index: 3;
}

.plan-card__price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-navy);
  margin: var(--space-2) 0;
}

.plan-card__price span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-muted);
}

.plan-card__setup {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: -0.5rem 0 var(--space-2);
}

.plan-card--featured .plan-card__setup {
  color: rgba(255, 255, 255, 0.6);
}

.plan-card__features {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--color-ink);
  flex: 1;
}

.plan-card__features li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.95rem;
}

.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 700;
}

/* ---------- CTA final ----------
   Misma retícula que el resto del sitio: vive dentro de .container, con el
   mismo max-width y el mismo padding lateral que las demás secciones (nada
   de un ancho personalizado solo para esta tarjeta). Usa el mismo gradiente
   animado del Hero para reforzar la identidad visual compartida. */

.cta-final {
  background-color: var(--color-bg);
}

.cta-final__bubble {
  position: relative;
  background-image: var(--gradient-brand);
  background-size: var(--gradient-brand-size);
  animation: btn-gradient-shift 10s ease infinite;
  color: #fff;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  padding: var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

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

.cta-final__bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-texture);
  opacity: 0.16;
  pointer-events: none;
}

.cta-final__title {
  color: #fff;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  margin: 0 0 var(--space-2);
}

.cta-final__subtitle {
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
}

.cta-final__mascot {
  width: 160px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25));
}

@media (max-width: 780px) {
  .cta-final__bubble {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-4) var(--space-3);
  }

  .cta-final__mascot {
    order: -1;
    width: 120px;
    margin: 0 auto;
  }

  .cta-final__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

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

.site-footer {
  position: relative;
  background: var(--color-navy);
  color: #cdd6ee;
  padding: var(--space-4) 0 var(--space-3);
  font-size: 0.9rem;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-texture);
  opacity: 0.12;
  pointer-events: none;
}

.footer__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--space-4);
}

.footer__grid h4 {
  color: #fff;
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.footer__grid p {
  margin: 0;
  color: #b6c1e0;
}

.footer__grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.footer__grid a {
  color: #cdd6ee;
}

.footer__grid a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: #9fabce;
}

/* ---------- Páginas legales ---------- */

.legal {
  padding: var(--space-5) 0;
  max-width: 820px;
  margin: 0 auto;
}

.legal h1 {
  margin-bottom: var(--space-1);
}

.legal .legal__updated {
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.legal h2 {
  margin-top: var(--space-4);
}

.legal ul {
  padding-left: 1.25rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
}

.legal table th,
.legal table td {
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  vertical-align: top;
}

.callout {
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-navy);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}