/* ============================================================
   ERPCauce — Landing "Verde mercado"
   Paleta: crema #F7F4EC · verde #123B2E · ámbar #E8930C
   Tipografía: Poppins en títulos y botones · pila del sistema en el cuerpo
   ============================================================ */

/* ------------------------------------------------------------
   Poppins autoalojada. Antes venía de fonts.googleapis.com, que
   son dos conexiones a terceros en la ruta crítica (el CSS de
   Google y luego el .woff2 de fonts.gstatic.com) antes de poder
   pintar un solo título. Con los cuatro archivos servidos desde
   el mismo dominio se elimina esa cadena; `swap` mantiene el
   texto visible mientras cargan.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fuentes/poppins-700-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fuentes/poppins-700-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;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fuentes/poppins-800-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: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fuentes/poppins-800-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;
}

:root {
  --bg: #f7f4ec;
  --bg-alt: #f1ede0;
  --surface: #fffdf6;
  --ink: #1a1d1a;
  --muted: #59614f;
  --line: #e2dcca;
  --green: #123b2e;
  --green-deep: #0c2b21;
  --green-soft: #e7ede4;
  --amber: #e8930c;
  --amber-deep: #96590a;
  --amber-soft: #fdf3e2;
  --cream: #f9f6ee;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(26, 29, 26, 0.05);
  --shadow-md: 0 2px 4px rgba(26, 29, 26, 0.05), 0 16px 40px -18px rgba(26, 29, 26, 0.25);
  --shadow-lg: 0 4px 10px rgba(26, 29, 26, 0.06), 0 32px 64px -28px rgba(26, 29, 26, 0.35);
  /* Poppins es geométrica: círculos casi perfectos y x-height baja para su
     ancho. Manda en los títulos, donde esa personalidad es la voz de la
     marca. En párrafo largo es otra cosa — el blog tiene artículos de 600 a
     900 palabras — así que el cuerpo va con la pila del sistema, humanista y
     de x-height alta: se lee mejor y no cuesta una sola petición. */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 76px;
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* El atributo hidden lo pone el navegador como display:none, y cualquier
   regla de clase con su propio display lo gana: una tarjeta .module-card
   marcada como hidden seguía viéndose. Esta regla lo hace fiable en todo
   el sitio, incluidos los paneles del FAQ y los avisos del formulario. */
[hidden] { display: none !important; }

/* Quita el retardo de 300 ms del doble toque y fija el destello tactil en
   lugar de dejar el gris por defecto de Android. */
a, button, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(18, 59, 46, 0.12);
}

html {
  scroll-behavior: smooth;
  /* Las ondas decorativas de fondo se salen unos píxeles en ciertos anchos
     y aparece una barra horizontal. Se recorta con `clip` y no con
     `hidden`: hidden crea un contenedor de scroll y rompería el
     position:sticky del panel de preguntas. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* El clip va en los dos: en html solo, el elemento que se sale sigue
     ampliando el área desplazable del body. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

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

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

::selection { background: var(--amber); color: var(--ink); }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

section { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------- Eyebrows y encabezados de sección ---------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 18px;
}

.eyebrow-rule {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
  flex: none;
}

.eyebrow-light { color: #f2c377; }
.eyebrow-light .eyebrow-rule { background: var(--amber); }

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
}

.section-head .lede {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.06rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Los botones son marca, no texto corrido: van con la tipografía de los
     títulos aunque el cuerpo de la página use la del sistema. */
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 15px 24px;
  min-height: 48px;
  border-radius: 12px;
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn svg { width: 19px; height: 19px; flex: none; }

.btn-primary {
  background: var(--green);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--green-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(18, 59, 46, 0.55);
}

.btn-amber {
  background: var(--amber);
  color: #2a1c04;
}
.btn-amber:hover {
  background: #f5a01e;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(232, 147, 12, 0.65);
}

.btn-outline {
  background: transparent;
  border-color: rgba(26, 29, 26, 0.24);
  color: var(--ink);
}
.btn-outline:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.btn-whatsapp {
  background: #e7f6ec;
  border-color: #bfe3cb;
  color: #0d5431;
}
.btn-whatsapp:hover {
  background: #d8efe1;
  transform: translateY(-1px);
}

.btn-sm { padding: 10px 15px; font-size: 15px; }
.btn-lg { padding: 17px 28px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------------- Header ---------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(26, 29, 26, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-mark { width: 34px; height: 34px; border-radius: 9px; }

.main-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.main-nav a,
.main-nav .nav-dropdown,
.main-nav .nav-giros {
  flex-shrink: 0;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.82;
  padding: 8px 2px;
  white-space: nowrap;
}
.main-nav a:hover { opacity: 1; color: var(--green); }

/* Desplegable "Recursos" del menú principal: agrupa Blog + comparativas,
   igual que la columna "Recursos" del pie. Solo CSS (hover + focus-within),
   sin JS, para que funcione con teclado y sin depender del toggle móvil. */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.82;
  padding: 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown-trigger svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.15s ease; }

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  min-width: 220px;
  padding: 8px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
.nav-dropdown-panel a {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.82;
  white-space: nowrap;
}
.nav-dropdown-panel a:hover { opacity: 1; color: var(--green); background: var(--bg-alt); }

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
  opacity: 1;
  color: var(--green);
}
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }

/* Menú "Giros": tres niveles que se abren con clic (Giros → grupo → giro).
   Es <details> anidado, así que funciona sin JS; main.js solo cierra con Esc
   o al hacer clic afuera. El panel de giros sale a la derecha del de grupos. */
.nav-giros { position: relative; }
.nav-giros > summary { list-style: none; }
.nav-giros > summary::-webkit-details-marker,
.nav-giros-grupo > summary::-webkit-details-marker,
.mobile-giros summary::-webkit-details-marker { display: none; }
.nav-giros[open] > summary { opacity: 1; color: var(--green); }
.nav-giros[open] > summary svg { transform: rotate(180deg); }

.nav-giros-panel {
  position: absolute;
  top: 100%;
  left: -12px;
  margin-top: 6px;
  width: 264px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.nav-giros-grupo > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.nav-giros-grupo > summary > span:first-child { flex: 1; }
.nav-giros-grupo > summary svg { width: 13px; height: 13px; opacity: 0.6; }
.nav-giros-grupo > summary:hover { color: var(--green); background: var(--bg-alt); }
.nav-giros-grupo[open] > summary { color: var(--green); background: var(--green-soft); }
.nav-giros-cuenta {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 1px 8px;
}
.nav-giros-grupo[open] .nav-giros-cuenta { background: var(--surface); }

.nav-giros-lista {
  position: absolute;
  top: -1px;
  left: calc(100% + 6px);
  width: 300px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-giros-lista a {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.82;
  white-space: nowrap;
}
.nav-giros-lista a:hover { opacity: 1; color: var(--green); background: var(--bg-alt); }

/* En el menú de teléfono los niveles se abren hacia abajo, como acordeón. */
.mobile-giros > summary,
.mobile-giros-grupo > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-giros > summary { padding: 13px 4px; font-size: 17px; }
.mobile-giros-grupo > summary { padding: 12px 4px 12px 16px; font-size: 16px; }
.mobile-giros > summary::after,
.mobile-giros-grupo > summary::after { content: "+"; font-size: 20px; color: var(--muted); }
.mobile-giros[open] > summary::after,
.mobile-giros-grupo[open] > summary::after { content: "−"; }
.mobile-nav .mobile-giros-grupo a:not(.btn) { display: block; padding-left: 32px; font-size: 16px; font-weight: 500; }

/* Encabezado de agrupación dentro del menú móvil (sin dropdown ahí: la
   lista ya es vertical y con espacio de sobra). */
.mobile-nav-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.75;
  margin-top: 10px;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
}
.menu-toggle svg { width: 26px; height: 26px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 24px;
  border-top: 1px solid var(--line);
}

.mobile-nav a:not(.btn) {
  padding: 13px 4px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.mobile-nav.open { display: flex; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + 64px) 0 96px;
  overflow: hidden;
}

.hero-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hl {
  position: relative;
  white-space: nowrap;
}

.hl-stroke {
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 0.16em;
}

.lede {
  margin-top: 22px;
  font-size: 1.13rem;
  color: var(--muted);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green);
}

.hero-trust svg { width: 16px; height: 16px; color: var(--amber-deep); }

/* --- Mockup del producto --- */

.hero-visual { position: relative; }

.app-mock {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock-dot:first-child { background: #e8a09a; }
.mock-dot:nth-child(2) { background: #ecd9a0; }
.mock-dot:nth-child(3) { background: #b7d2b0; }

.mock-url {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
}

.mock-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 380px;
}

.mock-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  background: #f4f1e6;
  border-right: 1px solid var(--line);
}

.mock-logo svg { width: 28px; height: 28px; border-radius: 8px; margin: 2px 0 10px 6px; }

.mock-nav {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 8px;
}

.mock-nav.is-active {
  background: var(--green);
  color: var(--cream);
}

.mock-main { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.mock-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mock-greeting {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.mock-date {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.mock-bell {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  flex: none;
}
.mock-bell svg { width: 17px; height: 17px; }
.mock-bell-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  border: 1.5px solid var(--surface);
}

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mock-kpi {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kpi-delta { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.kpi-delta.up { color: #1d7a4d; }
.kpi-delta.warn { color: var(--amber-deep); }

.mock-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 10px;
  flex: 1;
}

.mock-chart {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  flex: 1;
  min-height: 90px;
}

.mini-bars span {
  flex: 1;
  background: #cfdccb;
  border-radius: 5px 5px 2px 2px;
  min-height: 8px;
}

.mini-bars span.is-today { background: var(--amber); }

.mock-agent {
  position: relative;
  background: var(--green);
  color: var(--cream);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f2c377;
}

.agent-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(232, 147, 12, 0.18);
  color: var(--amber);
  flex: none;
}
.agent-avatar svg { width: 13px; height: 13px; }

.mock-agent p { font-size: 12.8px; line-height: 1.45; color: #e9e6d8; }

.agent-actions { display: flex; gap: 8px; margin-top: auto; }

.agent-btn-ok {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--amber);
  color: #2a1c04;
  padding: 6px 12px;
  border-radius: 8px;
}

.agent-btn-no {
  font-size: 11.5px;
  font-weight: 600;
  color: #cfd6c8;
  border: 1px solid rgba(249, 246, 238, 0.25);
  padding: 6px 12px;
  border-radius: 8px;
}

.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}

.float-chip svg { width: 16px; height: 16px; color: var(--amber-deep); }

.chip-a { top: -18px; right: 22px; animation: float-y 5.5s ease-in-out infinite; }
.chip-b { bottom: 34px; left: -26px; animation: float-y 6.5s ease-in-out 1.2s infinite; }

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

.hero-caption {
  margin-top: 14px;
  text-align: right;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------------- Barra de hechos ---------------- */

.facts-band {
  background: var(--green);
  color: var(--cream);
  padding: 30px 0;
}

.facts-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.facts-list svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--amber);
  margin-top: 2px;
}

.facts-list span {
  font-size: 14.5px;
  line-height: 1.45;
  color: #dfe3d4;
}

.facts-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--cream);
  letter-spacing: -0.01em;
}

/* ---------------- Problema ---------------- */

.problem {
  padding: 104px 0;
  background: var(--bg);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.pain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 28px 30px;
  box-shadow: var(--shadow-sm);
}

.pain-card:nth-child(1) { transform: rotate(-0.7deg); }
.pain-card:nth-child(2) { transform: rotate(0.5deg); }
.pain-card:nth-child(3) { transform: rotate(-0.4deg); }

.pain-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 86px;
  height: 24px;
  background: rgba(232, 147, 12, 0.28);
  border-radius: 3px;
}

.pain-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--amber-deep);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.pain-card h3 {
  font-size: 1.32rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.pain-card p { color: var(--muted); font-size: 15.5px; }

.problem-bridge {
  margin-top: 48px;
  text-align: center;
  font-size: 1.22rem;
  font-family: var(--font-display);
  /* 700 y 800 son los dos únicos pesos de Poppins que se descargan: este
     cierre de sección se apoya en ellos en vez de pedir un archivo más. */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.problem-bridge strong { color: var(--green); font-weight: 800; }

/* ---------------- Módulos ---------------- */

.modules {
  padding: 104px 0;
  background: var(--bg-alt);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Tres columnas para las rejillas de seis tarjetas —el extracto de módulos del
   home—: con cuatro columnas quedaban 4 + 2 y dos huecos en la segunda fila.
   Los breakpoints de abajo la bajan a 2 y a 1 junto con la rejilla normal. */
.module-grid-tercios { grid-template-columns: repeat(3, 1fr); }

.module-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #d4cdB4;
}

.module-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 12px;
  margin-bottom: 16px;
}

.module-icon svg { width: 23px; height: 23px; }

.module-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 7px;
}

.module-card p { font-size: 14.5px; color: var(--muted); }

/* El título de la tarjeta puede llevar el enlace a la página del módulo. Hereda
   el color del encabezado para no pintar de verde media rejilla; el hover y el
   foco son los que dicen que se puede hacer clic. */
.module-card h3 a { color: inherit; }
.module-card h3 a:hover { color: var(--green); }

/* ---------------- Tu giro, tus módulos ---------------- */

.tu-giro { scroll-margin-top: calc(var(--header-h) + 16px); }

.tu-giro-pasos {
  list-style: none;
  padding: 0;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.tu-giro-pasos li {
  counter-increment: paso;
  position: relative;
  padding: 24px 22px 22px 70px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tu-giro-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
}
.tu-giro-pasos h3 { font-size: 1.08rem; margin-bottom: 7px; }
.tu-giro-pasos p { font-size: 14.5px; color: var(--muted); }

.tu-giro-catalogo {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 18px;
  padding: 28px;
  background: var(--green-soft);
  border-radius: var(--radius-lg);
}
.tu-giro-col h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 12px;
}
.tu-giro-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tu-giro-col-ancha ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
/* Cada función lleva su interruptor dibujado: dice "esto se prende o se
   apaga", sin fingir un estado que no es el de nadie. */
.tu-giro-col li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
}
.tu-giro-col li::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  border: 1.5px solid var(--green);
  background: radial-gradient(circle at 7px 50%, var(--green) 0 4px, transparent 4.5px);
  opacity: 0.7;
}

.tu-giro-procesos {
  margin-top: 18px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.tu-giro-procesos h3 { font-size: 1.08rem; margin-bottom: 7px; }
.tu-giro-procesos p { color: var(--muted); font-size: 15px; }

@media (max-width: 1020px) {
  .tu-giro-pasos { grid-template-columns: 1fr; }
  .tu-giro-catalogo { grid-template-columns: 1fr 1fr; }
  .tu-giro-col-ancha { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tu-giro-catalogo { grid-template-columns: 1fr; padding: 22px 18px; }
  .tu-giro-col-ancha ul { grid-template-columns: 1fr; }
}

.module-featured {
  grid-column: span 2;
  background: var(--surface);
}

.module-cta {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}

.module-cta:hover { border-color: var(--green); }

.module-cta h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: 6px; }
.module-cta p { color: #c9d2c4; }
.module-cta .btn { flex: none; }

.module-featured .module-icon { background: var(--amber-soft); color: var(--amber-deep); }

.module-mini {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.mini-kpi {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.mini-kpi i {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
}

/* ---------------- Agentes de IA ---------------- */

.agents {
  padding: 104px 0;
  background: var(--green);
  color: var(--cream);
}

.agents .section-head .lede { color: #c9d2c4; }

/* .btn-outline nace para fondo claro: su texto es var(--ink) y sobre el verde
   de esta sección quedaba oscuro sobre oscuro, ilegible. Aquí se invierte, y
   con eso se arreglan también los "Ver en acción" de las tarjetas de agente. */
.agents .btn-outline {
  border-color: rgba(249, 246, 238, 0.34);
  color: var(--cream);
}
.agents .btn-outline:hover {
  border-color: var(--cream);
  background: rgba(249, 246, 238, 0.08);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.agent-card {
  background: rgba(249, 246, 238, 0.06);
  border: 1px solid rgba(249, 246, 238, 0.14);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.agent-card p:not(.agent-proof) {
  margin-bottom: 6px;
}

.agent-card:hover {
  background: rgba(249, 246, 238, 0.1);
  border-color: rgba(232, 147, 12, 0.5);
  transform: translateY(-4px);
}

.agents .agent-avatar {
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
}
.agents .agent-avatar svg { width: 21px; height: 21px; }

.agent-card h3 { font-size: 1.16rem; font-weight: 700; color: var(--cream); }
.agent-card p:not(.agent-proof) { font-size: 14.8px; color: #d6dbcd; flex: 1; }

.agent-proof {
  align-self: flex-start;
  margin-top: auto;
  /* La altura se fija aquí en vez de dejarla al texto: las píldoras con
     acento o eñe caían en una fuente de reserva de métricas más altas y
     medían 61 px contra 38 px de las demás, así que en una misma fila unas
     quedaban más arriba que otras. Con inline-flex y un alto propio, el
     tamaño ya no depende de qué letras lleve la frase. */
  display: inline-flex;
  align-items: center;
  /* Alto fijo y sin encoger: es un ítem flex, así que sin flex:none la
     tarjeta lo comprimía y el alto declarado no se respetaba. */
  flex: none;
  height: 34px;
  line-height: 1;
  /* La frase es corta y cabe: sin esto se parte en dos renglones dentro de
     la píldora y la fila deja de estar pareja. */
  white-space: nowrap;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  color: #f2c377;
  background: rgba(232, 147, 12, 0.14);
  border: 1px solid rgba(232, 147, 12, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
}

.agent-vow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 44px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: 1.05rem;
  color: #e4e8da;
  background: rgba(12, 43, 33, 0.55);
  border: 1px solid rgba(232, 147, 12, 0.35);
  border-radius: 999px;
  padding: 16px 28px;
}

.agent-vow svg { width: 22px; height: 22px; color: var(--amber); flex: none; }
.agent-vow strong { color: var(--cream); }

/* ---------------- Cómo funciona ---------------- */

.howto { padding: 104px 0; background: var(--bg); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: paso;
}

.step {
  position: relative;
  /* Sin esto cada celda de la rejilla se niega a bajar del ancho mínimo de
     su texto, las columnas dejan de medir 1fr y la última se sale de la
     pantalla en anchos intermedios. */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  color: #2a1c04;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
}

.step h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--muted); }

/* ---------------- Precios ---------------- */

.pricing { padding: 104px 0; background: var(--bg-alt); }

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

.plan {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.plan h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.amount {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.amount abbr { text-decoration: none; font-size: 1.2rem; font-weight: 700; }

.period { font-size: 14.5px; font-weight: 600; color: var(--muted); }

.plan-desc {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted);
}

.plan ul {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.plan li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
}

.plan li svg { width: 17px; height: 17px; color: var(--amber-deep); flex: none; }

.plan-note {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.plan.is-featured {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
}

.plan.is-featured h3 { color: var(--cream); }
.plan.is-featured .period,
.plan.is-featured .plan-desc,
.plan.is-featured .plan-note { color: #c3cec0; }
.plan.is-featured li svg { color: var(--amber); }

.plan-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: var(--amber);
  color: #2a1c04;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------- FAQ ---------------- */

.faq { padding: 104px 0; background: var(--bg); }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.faq-intro { position: sticky; top: calc(var(--header-h) + 24px); }

.faq-intro .lede { margin-bottom: 26px; }

/* El intro del FAQ no es un .section-head, asi que necesita su propio
   ritmo entre titulo, texto y boton. */
.faq-intro h2 { margin-bottom: 14px; }
.faq-intro > p { color: var(--muted); margin-bottom: 24px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.faq-item h3 { margin: 0; font-size: inherit; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  background: none;
  border: none;
  padding: 19px 22px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-q:hover { color: var(--green); }

.faq-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--amber-deep);
  transition: transform 0.22s ease;
}

.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

.faq-a {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 15.5px;
}

/* ---------------- CTA final ---------------- */

.cta-final { padding: 24px 0 110px; background: var(--bg); }

.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  background: var(--green);
  border-radius: 28px;
  padding: 64px 60px;
  color: var(--cream);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.cta-panel::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 147, 12, 0.22), transparent 65%);
  pointer-events: none;
}

.cta-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--cream);
}

.cta-copy .lede { color: #ccd4c6; font-size: 1.05rem; }

.cta-whatsapp { margin-top: 18px; }

.cta-whatsapp p {
  font-size: 14px;
  font-weight: 600;
  color: #c3cec0;
  margin-bottom: 12px;
}

/* Sin acotar el svg, el icono de WhatsApp crecia al ancho de la columna y
   dejaba un hueco de 500px en el cierre. */
.cta-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cream);
}

.cta-whatsapp a:hover { color: var(--amber); }

.cta-whatsapp a svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* El reset pone margin 0 en todo <p>: el cierre necesita su propio ritmo. */
.cta-copy h2 { margin-bottom: 16px; }
.cta-copy > p { color: #ccd4c6; font-size: 1.05rem; }
.cta-copy > .btn { margin-top: 26px; }

.cta-form {
  position: relative;
  z-index: 1;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
}

/* El ritmo tiene que caer sobre el elemento que contiene los campos, y ese
   no es el mismo en las dos páginas: en el index la tarjeta envuelve al
   <form> (y si el gap se queda en la tarjeta, su único hijo se lo come),
   mientras que en /contacto el <form> es la tarjeta. Se cubren ambos. */
.cta-form > .form,
form.cta-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* El botón cierra el formulario: necesita más aire que la distancia entre
   dos campos para que se lea como el final del recorrido, no como uno más. */
.cta-form button[type="submit"] {
  margin-top: 6px;
}

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

.field label {
  font-size: 14px;
  font-weight: 700;
}

.field input,
.field select {
  color-scheme: light;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field input::placeholder { color: #9aa08d; }

.field input:focus,
.field select:focus {
  border-color: var(--green);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(18, 59, 46, 0.14);
}

/* El anillo propio sustituye al outline solo con el foco de puntero; con
   teclado se conserva el outline global para no perder el rastro. */
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) {
  outline: none;
}

.field.has-error input { border-color: #c93a2b; }

.field-error {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #b32f20;
}

.form-note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.form-success {
  margin: 0;
  background: #e7f2e9;
  border: 1px solid #b9d9c2;
  color: #14532d;
  border-radius: 11px;
  padding: 14px 16px;
  font-size: 14.5px;
}

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

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 48px;
  padding-bottom: 40px;
}

.footer-brand .brand { margin-bottom: 16px; }

.footer-brand p {
  color: var(--muted);
  font-size: 15px;
  max-width: 30em;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 28px 24px;
}

.footer-col h2,
.footer-col h3,
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* Los enlaces sueltos del índice necesitan el mismo apilado que la lista. */
.footer-col > a {
  display: block;
  margin-bottom: 10px;
}
.footer-col > a:last-child { margin-bottom: 0; }

.footer-col a {
  font-size: 15px;
  color: var(--muted);
}
.footer-col a:hover { color: var(--green); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom a { color: var(--muted); font-weight: 600; }
.footer-bottom a:hover { color: var(--green); }

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

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

.legal-page main {
  padding: calc(var(--header-h) + 48px) 0 96px;
}

.legal-page main .wrap { max-width: 780px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 30px;
}
.back:hover { color: var(--green-deep); }

.legal-page h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 10px;
}

.updated {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 28px;
}

.legal-page h2 {
  font-size: 1.22rem;
  font-weight: 700;
  margin: 36px 0 10px;
}

.legal-page main p { color: #3d4438; font-size: 16px; }

.legal-page main ul {
  margin: 10px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #3d4438;
  font-size: 16px;
}

.legal-page main li::marker { color: var(--amber-deep); }

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

/* El ocultado depende de la clase .js que pone el script del <head>: si el
   JavaScript falla o tarda, el contenido se ve completo en lugar de en
   blanco. Una landing nunca debe depender de JS para mostrar su copy. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.noscript-warning {
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber);
  color: var(--amber-deep);
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------------- Responsive ---------------- */

/* ============================================================
   Secciones de conversión
   ============================================================ */

/* ---------------- Botón fantasma (header) ---------------- */

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--green);
}
.btn-ghost:hover {
  background: var(--green-soft);
}

/* ---------------- Respaldo institucional ---------------- */

.respaldo {
  padding: 40px 0 48px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.respaldo-intro {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 15.5px;
  color: var(--muted);
}

.respaldo-intro strong { color: var(--ink); }

.respaldo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
}

.respaldo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

/* Los logos de terceros van en escala de grises hasta el hover: así no
   compiten con el ámbar del CTA, que debe seguir siendo lo más visible. */
.respaldo-item img {
  height: auto;
  max-height: 46px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Los sellos cuadrados (AWS, Hecho en México) necesitan menos alto para
   pesar lo mismo que un logotipo horizontal. */
.respaldo-item.is-cuadrado img {
  max-height: 74px;
  max-width: 74px;
}

.respaldo-item img:hover { opacity: 1; }

/* ---------------- Captura del sistema ---------------- */

.por-dentro {
  padding: 104px 0;
  background: var(--bg);
}

.shot { margin: 0; }

.shot-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.shot-frame img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.shot figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

.shot-cta {
  margin-top: 40px;
  text-align: center;
}

.shot-note {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------- CTA suelto de sección ---------------- */

.agent-cta,
.howto-cta {
  margin-top: 48px;
  text-align: center;
}

/* ---------------- Planes: lista con palomita ---------------- */

.plan-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background-color: var(--amber-deep);
  /* Palomita dibujada con mask: hereda el color y no pide un SVG por fila. */
  -webkit-mask: var(--check-mask) center / 12px 12px no-repeat;
  mask: var(--check-mask) center / 12px 12px no-repeat;
  box-shadow: none;
}

.plan.is-featured .plan-list li::before {
  background-color: var(--amber);
}

.plan-badge-start {
  background: var(--green);
  color: var(--cream);
}

.plan-badge-muted {
  background: var(--line);
  color: var(--muted);
}

/* El plan gratis es el destino principal: se marca con borde ámbar
   sin robarle el peso visual al Profesional. */
.plan.is-starter {
  border-color: var(--amber);
  box-shadow: var(--shadow-md);
}

/* ---------------- Precio de fundador ---------------- */

.fundador {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 34px 36px;
  border-radius: var(--radius-lg);
  background: var(--green);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
}

.fundador-tag {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}

.fundador h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--cream);
}

.fundador p {
  margin-top: 12px;
  font-size: 15.5px;
  color: #c3cec0;
  max-width: 62ch;
}

/* Contador de lugares. Lo escribe main.js sólo cuando el API responde; el
   HTML nace con `hidden`, así que sin API no hay hueco ni cifra inventada. */
.fundador p.fundador-cupo {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber);
}

.fundador .btn { flex: none; }

/* ---------------- Anclaje de precio ---------------- */

.compare {
  margin-top: 40px;
  max-width: 720px;
  padding: 26px 30px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: var(--surface);
}

.compare h3 { font-size: 1.15rem; }

.compare p {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--muted);
}

.compare strong { color: var(--ink); }

/* ---------------- Riesgo cero ---------------- */

.riesgo { padding: 96px 0; background: var(--bg); }

.riesgo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.riesgo-grid li {
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15.5px;
  color: var(--muted);
}

.riesgo-grid strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.25;
  text-wrap: balance;
}

.riesgo-grid span { display: block; }

/* En una columna estrecha las tres celdas del paso se estrujaban: por
   debajo de 700px el numero manda arriba y el texto ocupa el ancho. */
@media (max-width: 860px) {
  .step {
    flex-direction: column;
    gap: 12px;
  }
  .step h3 { text-wrap: balance; }
}

/* ---------------- Cierre ---------------- */

.cta-or {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 244, 236, 0.18);
  font-size: 15px;
  color: #c3cec0;
}

/* ---------------- Formulario ---------------- */

/* Trampa antispam: fuera de la vista pero alcanzable por bots. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #fdecea;
  border: 1px solid #f0b9b2;
  color: #8c2318;
  font-size: 14.5px;
}

/* ---------------- CTA fijo en móvil ---------------- */

/* Sólo en pantallas chicas: en escritorio el CTA del header ya viaja
   con el usuario. */
.sticky-cta { display: none; }

@media (max-width: 860px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 246, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(26, 29, 26, 0.4);
    transform: translateY(110%);
    transition: transform 0.24s ease;
  }

  .sticky-cta.show { transform: translateY(0); }

  .sticky-cta p {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
  }

  .sticky-cta .btn { padding: 14px 20px; min-height: 50px; }

  /* Deja aire para que la barra no tape el final de la página. */
  .site-footer { padding-bottom: 96px; }
}

/* ---------------- Responsive de las secciones nuevas ----------------

   DE MAYOR A MENOR ANCHO, y ese orden no es estética: son media queries de
   `max-width`, así que en una pantalla angosta se cumplen varios a la vez y
   el último gana. Un bloque ancho colocado después de uno estrecho anula al
   estrecho para todo lo que ambos declaren.

   Es lo que pasaba aquí hasta el 06-sep-2026: el de 1220 estaba después del
   de 1020 y los dos declaraban `.module-grid` y `.agent-grid`, así que las
   reglas del de 1020 no se aplicaban nunca. Los módulos pasaban de cuatro
   columnas a dos sin escalón intermedio y los agentes de tres a una, con el
   escalón escrito en el archivo y en ninguna pantalla. El reparto además
   estaba cruzado —el bloque de 1020 traía los valores del de 1220 y al
   revés—, así que no bastó reordenar.

   La degradación ahora es monótona: módulos 4 → 3 → 2 → 1 y agentes
   3 → 2 → 1.

   Al agregar un bloque, ponlo en su lugar por ancho y no al final. Las tres
   consultas que viven fuera de este grupo —dos de 860 px y una de 720 px—
   están junto a las reglas del componente que corrigen y ahí se quedan:
   ninguna declara selectores de este grupo, así que no lo pisan.

   `python scripts/verificar-media-queries.py` revisa justo eso y sale con
   código 1 si alguna consulta ancha vuelve a pisar a una más estrecha.
   ------------------------------------------------------------------- */

@media (max-width: 1220px) {
  .main-nav, .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }

  .pain-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .pain-card:nth-child(n) { transform: none; }

  .module-grid { grid-template-columns: repeat(3, 1fr); }
  .module-featured { grid-column: span 3; }
  .module-cta { grid-column: span 3; }

  .agent-grid { grid-template-columns: repeat(2, 1fr); }

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

  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plan.is-starter { order: -1; }
}

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

  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { max-width: 640px; }
  .facts-list { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }

  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .module-featured { grid-column: span 2; }
  .module-cta { grid-column: span 2; flex-direction: column; align-items: flex-start; }
  .module-cta .btn { width: 100%; }

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

  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { position: static; }
  .cta-panel { grid-template-columns: 1fr; gap: 40px; padding: 48px 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .por-dentro, .riesgo { padding: 72px 0; }

  .fundador {
    grid-template-columns: 1fr;
    padding: 28px 26px;
  }
  .fundador .btn { width: 100%; }

  .respaldo-list { gap: 20px 30px; }
  .respaldo-item img { max-height: 32px; max-width: 130px; }
  .respaldo-item.is-cuadrado img { max-height: 46px; max-width: 46px; }
}

@media (max-width: 600px) {
  .riesgo-grid { grid-template-columns: 1fr; }
  .shot-frame { padding: 6px; }
  .compare { padding: 22px 20px; }

  body { font-size: 16px; }
  .wrap { padding: 0 18px; }

  .hero { padding-top: calc(var(--header-h) + 44px); padding-bottom: 72px; }
  .hero-actions .btn { width: 100%; }

  .chip-a { top: -14px; right: 8px; }
  .chip-b { bottom: -14px; left: 8px; animation-delay: 0.8s; }

  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }

  .facts-list { grid-template-columns: 1fr; }

  .problem, .modules, .agents, .howto, .pricing, .faq { padding: 76px 0; }
  .cta-final { padding: 8px 0 84px; }

  .cta-panel { padding: 40px 22px; border-radius: 22px; }
  .cta-form { padding: 24px 18px; }

  .section-head { margin-bottom: 40px; }

  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .mock-kpis .mock-kpi:last-child { grid-column: span 2; }
  .mock-panels { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .agent-proof {
    white-space: normal;
    height: auto;
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

@media (max-width: 360px) {
  /* Por debajo de 360 px dos columnas de módulos ya no caben dentro del
     ancho útil del contenedor. */
  .module-grid { grid-template-columns: 1fr; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------------- Medida de lectura ---------------- */

/* Los artículos, las comparativas y las páginas de módulo son texto corrido de
   600 a 900 palabras. Con el cuerpo en la tipografía del sistema —más estrecha
   que Poppins— caben unos 80 caracteres por línea, por encima de los 75 que se
   leen sin esfuerzo. Subir el cuerpo dos puntos devuelve la medida al rango y,
   de paso, hace más cómoda la lectura larga. */
article {
  font-size: 19px;
}

article h1, article h2, article h3, article h4 {
  font-size: revert;
}

/* ------------------------------------------------------------
   Comparativas: los bloques "lo que hace bien / dónde no
   conviene" llevan `grid-template-columns: 1fr 1fr` en el
   atributo style. En un teléfono de 375 px eso deja dos columnas
   de 196 px con listas de texto dentro — ilegibles. Una sola
   columna es lo correcto por debajo de 720 px; se ataca por
   selector de atributo para que valga también en las páginas de
   comparativa que se agreguen después.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}