/* ===================================================================
   TOKENS
=================================================================== */
:root {
  --ink-900: #10151a;
  --ink-800: #1a2129;
  --ink-700: #2b3540;
  --ink-500: #566270;
  --ink-400: #66707c;
  --ink-300: #aab3bc;
  --ink-100: #e7eaed;
  --ink-050: #f3f4f5;
  --paper: #fbfaf7;
  --paper-alt: #f2f0ea;
  --white: #ffffff;

  /* superficie de tarjetas (se oscurece en modo oscuro; --white se queda
     blanco porque tambien se usa como texto sobre fondos oscuros) */
  --surface: #ffffff;
  /* superficie siempre oscura: footer, secciones de contraste, marcos */
  --ink-deep: #10151a;
  /* boton primario: invierte con el tema */
  --btn-bg: #10151a;
  --btn-fg: #ffffff;
  --header-bg: rgba(251, 250, 247, 0.85);
  --error-bg: #fbeae7;
  /* texto suave sobre --ink-deep: claro en los dos temas */
  --on-deep-soft: #e7eaed;
  /* divisores y chips sobre --ink-deep */
  --on-deep-line: #2b3540;
  /* hover del boton claro que va sobre secciones oscuras */
  --btn-ondark-hover: #f4e9d6;
  /* azul solido que sostiene texto blanco en los dos temas.
     --accent-500 no sirve: en oscuro se aclara y cae a 3.68:1 */
  --accent-solid: #1c5c8f;
  --accent-solid-hover: #123b5e;

  --accent-600: #123b5e;
  --accent-500: #1c5c8f;
  --accent-400: #3f83b8;
  --accent-100: #dbe8f2;
  --accent-050: #eef5fa;

  --gold-500: #b8863b;
  --gold-100: #f4e9d6;

  --success: #1c5c8f;
  --error: #a63b2c;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 21, 26, 0.06), 0 1px 1px rgba(16, 21, 26, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(16, 21, 26, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(16, 21, 26, 0.28);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --container: 1180px;
  --section-pad: clamp(64px, 9vw, 120px);

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

/* ===================================================================
   RESET
=================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* El atributo hidden (usado por main.js para ocultar redes/enlaces sin
   configurar) debe ganarle a cualquier "display" que le pongan otras reglas. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-800);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Los titulos grandes aguantan mas peso y un tracking aun mas cerrado;
   los chicos necesitan lo contrario para no empastarse. */
h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
}

h3,
h4 {
  letter-spacing: -0.015em;
}

:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   LAYOUT HELPERS
=================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: var(--section-pad);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 80px);
}

.section-head {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 16px;
}

.section-head p {
  color: var(--ink-500);
  font-size: 1.05rem;
}

.text-center {
  text-align: center;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--ink-deep);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

/* ===================================================================
   REVEAL ANIMATION
=================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

/* Los hijos necesitan su propia transicion: sin esto el transition-delay
   no tenia nada que retrasar y la grilla entera aparecia de golpe. */
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   BUTTONS
=================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-300);
}

.btn-secondary:hover {
  border-color: var(--ink-900);
  background: var(--ink-050);
}

.btn-whatsapp {
  background: var(--accent-solid);
  color: var(--white);
}

.btn-whatsapp:hover {
  background: var(--accent-solid-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-on-dark {
  background: var(--white);
  color: var(--ink-deep);
}

.btn-on-dark:hover {
  background: var(--btn-ondark-hover);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 16px 34px;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.88rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.microcopy {
  color: var(--ink-400);
  font-size: 0.85rem;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.microcopy .dot {
  opacity: 0.5;
}

/* ===================================================================
   HEADER / NAV
=================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* El difuminado va en un pseudo-elemento aparte: si backdrop-filter se
   pone directamente en .site-header, este se vuelve el "containing block"
   de sus descendientes position:fixed (como .nav-menu en móvil), y el
   menú deja de cubrir toda la pantalla para quedar atado a la altura
   del header. Con el blur en ::before, .nav-menu vuelve a fijarse
   contra el viewport completo. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header.is-scrolled {
  border-color: var(--ink-100);
  box-shadow: 0 1px 0 rgba(16, 21, 26, 0.02);
}

.site-header.is-scrolled {
  border-color: var(--ink-100);
  box-shadow: 0 1px 0 rgba(16, 21, 26, 0.02);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  gap: 24px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.brand--logo {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: 54px;
  width: auto;
}

@media (max-width: 480px) {
  .brand-logo {
    height: 44px;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-700);
  transition: color 0.2s var(--ease);
  position: relative;
}

.nav-links a:hover {
  color: var(--accent-500);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--ink-050);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -7px;
}

.nav-toggle-icon::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: fixed;
    inset: 0 0 0 30%;
    top: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 100px 28px 32px;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    box-shadow: -20px 0 50px rgba(16, 21, 26, 0.12);
  }

  .nav-menu.is-open {
    transform: translateX(0);
  }

  .nav-links {
    flex-direction: column;
    gap: 22px;
  }

  .nav-links a {
    font-size: 1.15rem;
  }

  .nav-menu .btn {
    width: 100%;
  }
}

/* ===================================================================
   HERO
=================================================================== */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 100px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--accent-100) 0%, transparent 70%);
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  margin-bottom: 6px;
}

.hero-line-2 {
  display: block;
  color: var(--accent-500);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-copy p.lead {
  font-size: 1.1rem;
  color: var(--ink-500);
  max-width: 52ch;
  margin-bottom: 8px;
}

.hero-copy .lead-strong {
  color: var(--ink-800);
  font-weight: 600;
}

.hero-copy .cta-row {
  margin-top: 30px;
}

/* ---- device mockup ---- */
.hero-visual {
  position: relative;
}

.device-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.laptop {
  position: relative;
  border-radius: 14px;
  animation: floaty 7s ease-in-out infinite;
}

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

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

.laptop-frame {
  background: var(--ink-deep);
  border-radius: 14px;
  padding: 12px 12px 26px;
  box-shadow: var(--shadow-lg);
}

.laptop-screen {
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.laptop-base {
  height: 10px;
  background: var(--ink-700);
  border-radius: 0 0 10px 10px;
  margin-inline: -6px;
}

.phone {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 34%;
  animation: floaty 7s ease-in-out infinite 0.4s;
}

.phone-frame {
  background: var(--ink-deep);
  border-radius: 26px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
}

.phone-screen {
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9/18.5;
}

.floating-tag {
  position: absolute;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: floaty 6s ease-in-out infinite;
}

.floating-tag svg {
  width: 14px;
  height: 14px;
  color: var(--accent-500);
}

.tag-1 {
  top: 6%;
  left: -8%;
  animation-delay: 0.2s;
}

.tag-2 {
  top: 42%;
  left: -14%;
  animation-delay: 1.1s;
}

.tag-3 {
  bottom: 4%;
  left: 6%;
  animation-delay: 0.6s;
}

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

  .hero-visual {
    order: -1;
    padding-top: 12px;
  }

  .device-stack {
    max-width: 380px;
  }

  .floating-tag {
    display: none;
  }
}

/* ===================================================================
   TRUST BAR
=================================================================== */
.trust-bar {
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  background: var(--paper-alt);
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-block: 22px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
  text-align: center;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent-500);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .trust-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-item {
    justify-content: flex-start;
    text-align: left;
  }
}

/* ===================================================================
   PROBLEM SECTION
=================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.problem-copy h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 20px;
}

.problem-copy p {
  color: var(--ink-500);
  margin-bottom: 16px;
  font-size: 1.02rem;
}

.callout {
  margin-top: 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent-500);
  background: var(--accent-050);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.problem-visual {
  display: grid;
  gap: 16px;
}

.compare-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}

.compare-card svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.compare-card.is-good svg {
  color: var(--accent-500);
}

.compare-card.is-muted svg {
  color: var(--ink-400);
}

.compare-card h4 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.compare-card p {
  color: var(--ink-500);
  font-size: 0.9rem;
}

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

@media (max-width: 980px) {
}

@media (max-width: 620px) {
}

/* ===================================================================
   WHAT'S INCLUDED (numbered list layout)
=================================================================== */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.include-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.include-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.include-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.include-card p {
  color: var(--ink-500);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.include-card ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.include-card ul li {
  font-size: 0.88rem;
  color: var(--ink-500);
  padding-left: 18px;
  position: relative;
}

.include-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-400);
}

.include-note {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-400);
  font-style: italic;
}

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

@media (max-width: 640px) {
  .includes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
}

@media (max-width: 560px) {
}

.differentiator .eyebrow {
  color: var(--gold-500);
}

.differentiator .cta-row {
  justify-content: center;
  margin-top: 32px;
}

.differentiator .microcopy {
  justify-content: center;
  color: var(--ink-300);
}

@media (max-width: 980px) {
}

@media (max-width: 560px) {
}

/* ===================================================================
   INDUSTRIES
=================================================================== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.industry-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.industry-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--gold-100);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.industry-icon svg {
  width: 20px;
  height: 20px;
}

.industry-card h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.industry-tags span {
  font-size: 0.78rem;
  background: var(--ink-050);
  color: var(--ink-500);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.industry-card p.benefit {
  font-size: 0.9rem;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
  padding-top: 12px;
}

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

@media (max-width: 560px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
}

.value-flow .arrow {
  color: var(--ink-300);
  border: none;
  background: none;
  padding: 0;
}

.guarantee .eyebrow {
  margin-bottom: 6px;
}

@media (max-width: 700px) {
}

/* ===================================================================
   PRICING / PLANES
=================================================================== */
/* Sección con más peso visual: aparece temprano en la página, así que
   necesita destacar del resto sin sentirse tan pesada como una sección
   oscura justo después del Hero. */
.planes-spotlight {
  background: linear-gradient(180deg, var(--accent-050) 0%, var(--paper) 100%);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}

.planes-spotlight .section-head h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
}

.planes-spotlight .section-head p {
  font-size: 1.1rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card.is-featured {
  border-color: var(--accent-400);
  background: var(--accent-050);
  box-shadow: var(--shadow-md);
  padding-top: 44px;
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.pricing-name {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.pricing-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--ink-900);
  line-height: 1.1;
}

.pricing-price .currency {
  font-size: 1.05rem;
  font-weight: 700;
  vertical-align: top;
  margin-right: 2px;
}

.pricing-price-crc {
  font-size: 0.82rem;
  color: var(--ink-400);
  margin: 6px 0 22px;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.pricing-features li svg {
  width: 16px;
  height: 16px;
  color: var(--accent-500);
  flex-shrink: 0;
  margin-top: 3px;
}

.pricing-features li.is-note {
  color: var(--ink-400);
  font-style: italic;
  font-size: 0.84rem;
}

.pricing-features li.is-note svg {
  visibility: hidden;
}

.pricing-card .btn {
  margin-top: auto;
}

.pricing-note {
  text-align: center;
  margin-top: 36px;
  color: var(--ink-500);
  font-size: 0.92rem;
  max-width: 620px;
  margin-inline: auto;
}

.pricing-note + .pricing-note {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-400);
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }

  .pricing-card.is-featured {
    order: -1;
  }
}

.final-cta .cta-row {
  justify-content: center;
}

.final-cta .microcopy {
  justify-content: center;
  color: var(--ink-300);
}

/* ===================================================================
   FORM
=================================================================== */
.form-section {
  background: var(--paper-alt);
}

.form-panel {
  max-width: 560px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-sm);
}

.form-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  text-align: center;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
}

.form-field input,
.form-field select {
  font: inherit;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-100);
  background: var(--paper);
  color: var(--ink-900);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-100);
  outline: none;
}

.form-panel .btn {
  margin-top: 6px;
}

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.form-status--success {
  background: var(--accent-050);
  color: var(--accent-600);
}

.form-status--error {
  background: var(--error-bg);
  color: var(--error);
}

.form-status--info {
  background: var(--ink-050);
  color: var(--ink-700);
}

/* ===================================================================
   FAQ
=================================================================== */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
}

.faq-question .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
}

.faq-question .icon::before,
.faq-question .icon::after {
  content: "";
  position: absolute;
  background: var(--accent-500);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transition: transform 0.3s var(--ease);
}

.faq-question .icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-question .icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-question .icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.faq-answer p {
  padding: 0 24px 22px;
  color: var(--ink-500);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
}

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer {
  background: var(--ink-deep);
  color: var(--ink-300);
  padding-block: 56px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--on-deep-line);
}

.footer-brand .brand {
  color: var(--white);
}

.footer-brand p {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 0.92rem;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.92rem;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: var(--white);
}

.social-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--on-deep-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}

.social-row a:hover {
  background: var(--accent-500);
}

.social-row a svg {
  width: 17px;
  height: 17px;
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
}

.footer-bottom a {
  color: var(--ink-300);
}

.footer-bottom a:hover {
  color: var(--white);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ===================================================================
   WHATSAPP FLOAT
=================================================================== */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-500);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.02);
  background: var(--accent-600);
}

.wa-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .wa-float span {
    display: none;
  }
  .wa-float {
    padding: 14px;
  }
}

/* ============================================================ */
/* Editor de codigo dentro de la laptop del hero                  */
/* El tema (oscuro / claro) se controla con data-mock-theme        */
/* en .hero-visual; el boton de abajo lo cambia.                   */
/* ============================================================ */
.hero-visual {
  --mock-bg: #0d1117;
  --mock-bar: #161b22;
  --mock-line: rgba(255, 255, 255, 0.08);
  --mock-file: #8b949e;
  --mock-tx: #e6edf3;
  --mock-pn: #6e7681;
  --mock-tg: #7ee787;
  --mock-at: #79c0ff;
  --mock-st: #a5d6ff;
}

.hero-visual[data-mock-theme="light"] {
  --mock-bg: #ffffff;
  --mock-bar: #f6f8fa;
  --mock-line: rgba(0, 0, 0, 0.09);
  --mock-file: #656d76;
  --mock-tx: #1f2328;
  --mock-pn: #8c959f;
  --mock-tg: #116329;
  --mock-at: #0550ae;
  --mock-st: #0a3069;
}

.laptop-screen {
  container-type: inline-size;
}

.mock-code {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mock-bg);
  font-family: var(--font-mono);
  transition: background 0.3s var(--ease);
}

.mock-code-bar {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.2cqw 3.5cqw;
  background: var(--mock-bar);
  border-bottom: 1px solid var(--mock-line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.mock-code-dots {
  display: flex;
  gap: 1.2cqw;
  flex: none;
}

.mock-code-dots i {
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: var(--mock-pn);
  opacity: 0.55;
}

.mock-code-file {
  font-size: 2.1cqw;
  color: var(--mock-file);
  letter-spacing: 0.01em;
}

.mock-code-body {
  flex: 1;
  margin: 0;
  padding: 3.2cqw 4cqw;
  overflow: hidden;
  font-size: 2.6cqw;
  line-height: 1.5;
  color: var(--mock-tx);
  white-space: pre;
  tab-size: 2;
}

.mock-code-body .pn { color: var(--mock-pn); }
.mock-code-body .tg { color: var(--mock-tg); }
.mock-code-body .at { color: var(--mock-at); }
.mock-code-body .st { color: var(--mock-st); }
.mock-code-body .tx { color: var(--mock-tx); }

.mock-code-caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--mock-at);
  animation: mockCaret 1.1s steps(1) infinite;
}

@keyframes mockCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

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

/* ---- boton para cambiar el fondo del editor ---- */
.mock-theme-switch {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

.mock-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.mock-theme-toggle:hover {
  color: var(--ink-800);
  border-color: var(--accent-400);
  box-shadow: var(--shadow-sm);
}

.mock-theme-toggle:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.mock-theme-toggle svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.hero-visual[data-mock-theme="light"] .mock-icon-sun,
.hero-visual:not([data-mock-theme="light"]) .mock-icon-moon {
  display: none;
}

/* ---- terminal dentro del celular del hero ---- */
.phone-screen {
  container-type: inline-size;
}

.mock-term {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mock-bg);
  font-family: var(--font-mono);
  transition: background 0.3s var(--ease);
}

.mock-term-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4cqw 5cqw;
  background: var(--mock-bar);
  border-bottom: 1px solid var(--mock-line);
  font-size: 5cqw;
  color: var(--mock-file);
  letter-spacing: 0.02em;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.mock-term-body {
  flex: 1;
  margin: 0;
  padding: 5cqw;
  overflow: hidden;
  font-size: 6.4cqw;
  line-height: 1.7;
  color: var(--mock-tx);
  white-space: pre;
}

.mock-term-body .pr { color: var(--mock-at); }
.mock-term-body .ok { color: var(--mock-tg); }
.mock-term-body .dim { color: var(--mock-pn); }
.mock-term-body .ur { color: var(--mock-st); }

/* las etiquetas flotantes iban por debajo de la laptop y quedaban cortadas */
.floating-tag {
  z-index: 2;
}

/* ===================================================================
   MODO OSCURO
   Se activa con data-theme="dark" en <html>. Solo se redefinen los
   tokens: el resto de las reglas del sitio no cambia.
=================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --ink-900: #f1f5f9;
  --ink-800: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-500: #9aa7b5;
  --ink-400: #8593a1;
  --ink-300: #7c8a99;
  --ink-100: #2c3540;
  --ink-050: #1b222a;
  --paper: #0f1418;
  --paper-alt: #151b21;
  --white: #ffffff;

  --surface: #181f26;
  --ink-deep: #080b0e;
  --btn-bg: #e8eef4;
  --btn-fg: #10151a;
  --header-bg: rgba(15, 20, 24, 0.85);
  --error-bg: #3a201c;
  --on-deep-line: #232c35;
  --accent-solid: #2a6ea0;
  --accent-solid-hover: #2f76a8;

  --accent-600: #a8cce8;
  --accent-500: #3f8bc4;
  --accent-400: #6fb0e0;
  --accent-100: #1d3348;
  --accent-050: #16273a;

  --gold-500: #d4a45f;
  --gold-100: #3a2f1c;

  --success: #6fb0e0;
  --error: #e08b7d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}

/* El logo no tiene transparencia: trae un fondo claro solido. Invertirlo
   oscurece ese fondo (se funde con la pagina) y aclara el texto; el
   hue-rotate devuelve el azul a su tono original. */
[data-theme="dark"] .brand-logo {
  filter: invert(1) hue-rotate(180deg);
}

/* ---- boton de modo claro / oscuro en el header ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: 14px;
  color: var(--ink-500);
  background: transparent;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.theme-toggle:hover {
  color: var(--ink-900);
  border-color: var(--accent-400);
  background: var(--ink-050);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

[data-theme="dark"] .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-icon-sun {
  display: none;
}

/* el azul solido del badge pierde contraste con texto blanco en oscuro:
   se invierte a fondo claro con texto oscuro */
[data-theme="dark"] .pricing-badge {
  background: var(--accent-400);
  color: var(--ink-deep);
}

/* ===================================================================
   COMO FUNCIONA — la conversacion es la firma de la pagina
   El proceso se cuenta en el medio donde este negocio ocurre de verdad.
   El orden del hilo ya encierra la secuencia, por eso no lleva numeros
   encima: seria decorar algo que la forma ya dice.
=================================================================== */
.handoff {
  background: var(--paper-alt);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}

.handoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}

.handoff-copy h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 20px;
}

.handoff-copy p {
  color: var(--ink-500);
  margin-bottom: 14px;
  max-width: 46ch;
}

.handoff-copy .cta-row {
  margin-top: 28px;
}

.chat {
  margin: 0;
}

.chat-window {
  max-width: 440px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--ink-deep);
  color: var(--white);
}

.chat-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
}

.chat-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.chat-who strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.chat-status {
  font-size: 0.74rem;
  color: var(--ink-300);
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 24px;
  background: var(--paper);
}

.chat-stage {
  align-self: center;
  margin: 16px 0 8px;
}

.chat-log > .chat-stage:first-child {
  margin-top: 0;
}

.chat-stage span {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-500);
}

.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.msg--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  color: var(--ink-800);
  border-bottom-left-radius: 5px;
}

.msg--out {
  align-self: flex-end;
  background: var(--accent-solid);
  color: var(--white);
  border-bottom-right-radius: 5px;
}

/* La tarjeta del enlace es el momento del que depende todo el negocio:
   es cuando el cliente ve su pagina por primera vez. */
.msg--has-link {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chat-link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-left: 3px solid var(--white);
}

.chat-link-host {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.9;
}

.chat-link-title {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}

.chat-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-500);
}

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

  .handoff-copy p {
    max-width: none;
  }
}

/* Segunda via de contacto junto al formulario: mucha gente prefiere
   escribir por WhatsApp antes que llenar campos. */
.form-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-100);
  font-size: 0.9rem;
  color: var(--ink-500);
}