/* AID Business Intelligence — estilos del sitio (fondo blanco, letra Poppins, azul #1F6BFF) */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-semibold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-bold.woff2") format("woff2"); }

:root {
  --papel: #ffffff;
  --papel-2: #f4f7fc;        /* secciones alternas: blanco con una gota de azul */
  --tinta: #0c1733;          /* texto: azul casi negro, nunca negro puro */
  --tinta-2: #45506b;
  --tinta-3: #5f6b85;
  --linea: #dfe5f0;
  --linea-2: #c6d0e3;
  --azul: #1f6bff;           /* azul de la marca */
  --azul-texto: #1557e0;     /* el mismo azul, un punto más oscuro, para letra pequeña */
  --azul-oscuro: #0f47c2;
  --azul-suave: #e8f0ff;
  --azul-tenue: #f3f7ff;
  --azul-borde: #d5e2fb;
  --verde: #12a150;
  --sombra-1: 0 1px 2px rgba(12, 23, 51, 0.05), 0 10px 24px -14px rgba(12, 23, 51, 0.22);
  --sombra-2: 0 2px 6px rgba(12, 23, 51, 0.06), 0 28px 56px -24px rgba(12, 23, 51, 0.35);
  --suave: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ancho: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 0.5em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 0.95rem + 4.8vw, 3.4rem); line-height: 1.06; letter-spacing: -0.035em; overflow-wrap: break-word; }
@media (min-width: 980px) { h1 { font-size: clamp(3rem, 0.6rem + 4vw, 3.9rem); } }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .envoltura { padding: 0 32px; } }

.formas { position: absolute; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--azul); color: #fff; padding: 8px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.azul { color: var(--azul); }
.rotulo { margin: 0 0 12px; color: var(--azul-texto); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

/* ---------- Íconos ---------- */
.icono { width: 20px; height: 20px; flex: none; }
.icono--chico { width: 16px; height: 16px; }
.icono-duo { width: 26px; height: 26px; flex: none; color: var(--azul); }
.icono-duo--grande { width: 40px; height: 40px; }

/* Sello: el ícono de cada servicio, en blanco sobre una forma azul con brillo y sombra */
.sello { width: 64px; height: 64px; flex: none; overflow: visible; filter: drop-shadow(0 7px 9px rgba(31, 107, 255, 0.28)); transition: transform 0.25s var(--suave); }
.sello__forma { fill: url(#brillo); }
.sello__icono { color: #fff; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 22px; border-radius: 14px; border: 1.5px solid var(--azul);
  background: var(--azul); color: #fff; font-weight: 600; font-size: 0.98rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 20px -12px rgba(31, 107, 255, 0.9);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s var(--suave);
}
.boton:hover { background: var(--azul-texto); border-color: var(--azul-texto); }
.boton:active { transform: scale(0.98); }
.boton--chico { min-height: 40px; padding: 8px 16px; font-size: 0.9rem; border-radius: 12px; }
.boton--grande { min-height: 56px; padding: 14px 26px; font-size: 1.03rem; border-radius: 16px; }
.boton--borde { background: #fff; border-color: var(--linea-2); color: var(--tinta); box-shadow: none; }
.boton--borde:hover { background: var(--azul-tenue); border-color: var(--azul); color: var(--azul-oscuro); }
.boton--blanco { background: #fff; border-color: #fff; color: var(--azul-oscuro); box-shadow: 0 12px 24px -14px rgba(5, 25, 80, 0.7); }
.boton--blanco:hover { background: var(--azul-suave); border-color: var(--azul-suave); }
.boton--linea { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; box-shadow: none; }
.boton--linea:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.enlace { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-texto); font-weight: 600; text-decoration: none; }
.enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.enlace--flecha .icono { transition: transform 0.2s var(--suave); }
.enlace--flecha:hover .icono { transform: translateX(3px); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.cabecera.con-sombra { border-bottom-color: var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 24px; height: 72px; }
.cabecera__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cabecera__logo img { width: auto; height: 30px; }
.cabecera__nombre { padding-left: 12px; border-left: 1px solid var(--linea-2); font-size: 0.66rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { padding: 6px 0; text-decoration: none; color: var(--tinta-2); font-weight: 500; font-size: 0.95rem; }
.menu a:hover { color: var(--azul-texto); }
.menu-boton { display: none; }
@media (max-width: 860px) {
  .cabecera__fila { height: 64px; gap: 12px; }
  .cabecera__cta { margin-left: auto; }
  .menu-boton {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--linea-2); border-radius: 12px; background: #fff; cursor: pointer;
  }
  .menu-boton span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 4px 20px 16px; background: #fff; border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-1);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 4px; font-size: 1.05rem; color: var(--tinta); border-bottom: 1px solid var(--linea); }
  .menu a:last-child { border-bottom: 0; }
  .cabecera__logo img { height: 26px; }
}
@media (max-width: 400px) { .cabecera__nombre { display: none; } }

/* ---------- Portada ---------- */
.portada { padding: 40px 0 56px; }
.portada__grilla { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) {
  .portada { padding: 72px 0 88px; }
  .portada__grilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}
.portada__bajada { max-width: 34em; margin-bottom: 0; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); color: var(--tinta-2); }
.portada__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 28px 0 36px; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.92rem; }
.portada__datos li { display: flex; align-items: center; gap: 10px; }
.portada__datos strong { color: var(--tinta); font-weight: 600; }

/* Aidi en la portada: la carita, su globo y las opciones para empezar */
.guia { padding: 20px; border-radius: 28px; background: var(--azul-tenue); border: 1px solid var(--azul-borde); }
@media (min-width: 640px) { .guia { padding: 24px; } }
.guia__saludo { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.guia__cara { width: 124px; height: 124px; flex: none; margin: -22px -14px -22px -24px; filter: drop-shadow(0 8px 10px rgba(31, 107, 255, 0.3)); }
.guia__cara svg { width: 100%; height: 100%; overflow: visible; }
.guia__globo { position: relative; padding: 12px 16px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--azul-borde); font-size: 0.94rem; line-height: 1.5; color: var(--tinta-2); }
.guia__globo p { margin: 0; }
.guia__nombre { color: var(--tinta); font-weight: 600; font-size: 1rem; }
.guia__opciones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guia__opciones a {
  display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 16px 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--azul-borde);
  color: var(--tinta); font-weight: 500; font-size: 0.96rem; line-height: 1.3; text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s var(--suave);
}
.guia__opciones a:hover { border-color: var(--azul); box-shadow: var(--sombra-1); transform: translateX(2px); }
.guia__flecha { color: var(--linea-2); transition: color 0.15s ease, transform 0.2s var(--suave); }
.guia__opciones a:hover .guia__flecha { color: var(--azul); transform: translateX(2px); }
.guia__nota { margin: 14px 2px 0; color: var(--tinta-3); font-size: 0.82rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
@media (min-width: 900px) { .seccion { padding: 104px 0; } }
.seccion--papel { background: var(--papel-2); }
.seccion__cabeza { max-width: 44rem; }
.seccion__cabeza h2 { margin-bottom: 0.4em; }
.seccion__bajada { margin: 0; color: var(--tinta-2); font-size: 1.06rem; }
.nota { margin: 20px 0 0; color: var(--tinta-3); font-size: 0.85rem; }
.dos-columnas { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
  .seccion__cabeza--fija { position: sticky; top: 112px; }
}

/* ---------- Servicios: una lista de precios, no tarjetas ---------- */
.servicios { margin: 40px 0 0; padding: 0; list-style: none; }
.servicio:first-child { border-top: 1px solid var(--linea); }
.servicio {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px 18px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 96px;
  transition: background-color 0.2s ease;
}
.servicio__que h3 { margin: 0 0 4px; text-wrap: wrap; }
.servicio__que p { margin: 0; color: var(--tinta-2); font-size: 0.95rem; }
.servicio__que .servicio__tiendas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.servicio__tiendas span { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta); font-size: 0.88rem; font-weight: 500; }
.servicio__tiendas .logo { width: 18px; height: 18px; }
.servicio__incluye, .servicio__precio { grid-column: 1 / -1; }
.servicio__incluye { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--tinta-2); font-size: 0.9rem; }
.servicio__incluye li, .lista-check li, .ficha__incluye li { position: relative; padding-left: 24px; }
.servicio__incluye li::before, .lista-check li::before, .ficha__incluye li::before {
  content: ""; position: absolute; left: 2px; top: 0.48em; width: 11px; height: 6px;
  border-left: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(-45deg);
}
.servicio__precio { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.precio { margin: 0; color: var(--tinta-3); font-size: 0.875rem; white-space: nowrap; }
.precio strong { margin: 0 2px; color: var(--tinta); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.marca { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 7px; background: var(--azul-suave); color: var(--azul-oscuro); font-size: 0.72rem; font-weight: 600; letter-spacing: 0; vertical-align: 2px; white-space: nowrap; }
.servicio--destacado { background: linear-gradient(90deg, var(--azul-tenue), rgba(243, 247, 255, 0) 85%); }
.servicio.resaltado { background: var(--azul-suave); }
@media (max-width: 899px) {
  .servicio { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 900px) {
  .servicio { grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 1fr) 176px; gap: 28px; padding: 30px 20px; margin: 0 -20px; border-radius: 0; }
  .servicio__incluye, .servicio__precio { grid-column: auto; }
  .servicio__precio { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right; }
  .servicio:hover { background: var(--azul-tenue); }
  .servicio:hover .sello { transform: translateY(-2px) rotate(-5deg); }
}

/* ---------- Portafolio ---------- */
.caso { display: grid; gap: 28px; margin-top: 40px; padding: 20px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
@media (min-width: 900px) { .caso { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; padding: 32px 48px 32px 32px; } }
.caso__imagen { position: relative; display: grid; place-items: center; padding: 36px 0 60px; border-radius: 20px; background: linear-gradient(180deg, #fff6cf, #ffe680); }
.telefono {
  position: relative; width: min(58vw, 236px); aspect-ratio: 585 / 1266; padding: 9px;
  border-radius: 40px; background: #101624; box-shadow: 0 30px 50px -22px rgba(60, 45, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.telefono img { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; }
.telefono::before { content: ""; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; transform: translateX(-50%); border-radius: 999px; background: #05070b; z-index: 1; }
.caso__estado { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 0.82rem; font-weight: 500; white-space: nowrap; box-shadow: var(--sombra-1); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(18, 161, 80, 0.18); }
.caso__cliente { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.caso__cliente img { width: 56px; height: 56px; border-radius: 14px; }
.caso__cliente h3 { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; }
.caso__lugar { margin: 2px 0 0; color: var(--tinta-3); font-size: 0.88rem; }
.caso__resumen { color: var(--tinta-2); }
.lista-check { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.chips li { padding: 4px 11px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel-2); font-size: 0.8rem; color: var(--tinta-2); }
.caso__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- Marcas: logos reales, cada uno con su color oficial ---------- */
.logo { width: 28px; height: 28px; flex: none; }
.logo--whatsapp { color: #25d366; }
.logo--telegram { color: #26a5e4; }
.logo--instagram { color: #ff0069; }
.logo--messenger { color: #0866ff; }
.logo--gmail { color: #ea4335; }
.logo--googlesheets { color: #34a853; }
.logo--googlecalendar, .logo--googlemaps { color: #4285f4; }
.logo--googleplay { color: #414141; }
.logo--appstore { color: #0d96f6; }

/* ---------- Integraciones ---------- */
.flujo-caja { margin-top: 40px; padding: 26px 22px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.flujo__titulo { margin: 0 0 24px; color: var(--tinta-3); font-size: 0.9rem; font-weight: 500; }
.flujo { display: grid; margin: 0; padding: 0; list-style: none; }
.flujo li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; }
.flujo li:last-child { padding-bottom: 0; }
.flujo__nodo { position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.flujo__nodo .icono-duo { width: 28px; height: 28px; }
.flujo strong { align-self: end; font-weight: 600; line-height: 1.3; }
.flujo li > span:last-child { color: var(--tinta-2); font-size: 0.9rem; line-height: 1.4; }
/* La línea punteada que une los pasos avanza despacio, para que se entienda hacia dónde va el pedido. */
.flujo li:not(:last-child)::after {
  content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--azul) 0 6px, transparent 6px 12px); animation: fluye-abajo 0.9s linear infinite;
}
@keyframes fluye-abajo { to { background-position: 0 12px; } }
@keyframes fluye-derecha { to { background-position: 12px 0; } }
@media (min-width: 900px) {
  .flujo-caja { padding: 32px 36px 40px; }
  .flujo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flujo li { display: flex; flex-direction: column; align-items: center; padding: 0 10px; text-align: center; }
  .flujo__nodo { width: 64px; height: 64px; margin-bottom: 14px; }
  .flujo__nodo .logo, .flujo__nodo .icono-duo { width: 32px; height: 32px; }
  .flujo li:not(:last-child)::after {
    left: calc(50% + 42px); right: calc(-50% + 42px); top: 31px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--azul) 0 6px, transparent 6px 12px); animation-name: fluye-derecha;
  }
}
.integra { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 900px) { .integra { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: start; } }
.capacidades { display: grid; gap: 28px 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .capacidades { grid-template-columns: 1fr 1fr; } }
.capacidades li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.capacidades .icono-duo { width: 32px; height: 32px; }
.capacidades h3 { margin: 3px 0 4px; font-size: 1.02rem; }
.capacidades p { margin: 0; color: var(--tinta-2); font-size: 0.94rem; }
.conecta h3 { margin-bottom: 14px; font-size: 1.02rem; }
.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.logos li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); font-size: 0.9rem; font-weight: 500; line-height: 1.25; }
.logos .logo { width: 24px; height: 24px; }

/* ---------- Ejemplos: "mini webs" dibujadas con HTML y CSS (maquetas con datos de muestra) ---------- */
.demos { display: grid; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) {
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo--ancho { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .demos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .demo { grid-column: span 2; }
  .demo--ancho { grid-column: span 4; }
}
.demo { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--linea); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.demo:hover { border-color: var(--azul-borde); box-shadow: var(--sombra-1); }
.demo__vista { display: grid; justify-items: center; align-items: start; height: 250px; padding: 22px 22px 0; overflow: hidden; background: var(--fondo-demo, var(--azul-suave)); }
.demo--bot { --fondo-demo: #e3f5ea; }
.demo--mapa { --fondo-demo: #fff1c9; }
.demo--tienda { --fondo-demo: #fde8ee; }
.demo--carta { --fondo-demo: #ffecdb; }
.demo__texto { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.demo__tipo { margin: 0 0 8px; color: var(--tinta-3); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.demo h3 { margin: 0 0 6px; }
.demo__texto > p:not([class]) { color: var(--tinta-2); font-size: 0.95rem; }
.demo__pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 0.86rem; }

/* El marco de cada maqueta: ventana de navegador o celular. La parte de abajo queda cortada a propósito. */
.mini { width: 100%; font-size: 11px; line-height: 1.35; color: var(--tinta); background: #fff; }
.mini p, .mini ul { margin: 0; padding: 0; list-style: none; }
.mini--web { max-width: 540px; min-height: 240px; border-radius: 12px 12px 0 0; box-shadow: 0 18px 30px -18px rgba(12, 23, 51, 0.4), 0 0 0 1px rgba(12, 23, 51, 0.06); }
.mini__barra { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.mini__barra i { width: 7px; height: 7px; border-radius: 50%; background: var(--linea-2); }
.mini__barra span { margin-left: 8px; padding: 2px 10px; border-radius: 6px; background: var(--papel-2); color: var(--tinta-3); font-size: 10px; }
.mini--cel { width: 176px; padding: 7px 7px 0; border-radius: 28px 28px 0 0; background: #101624; box-shadow: 0 18px 30px -16px rgba(12, 23, 51, 0.55); }
.mini--cel > div { min-height: 250px; overflow: hidden; border-radius: 21px 21px 0 0; }

/* Tablero de ventas */
.tab { display: grid; gap: 8px; padding: 10px 12px; }
.tab__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tab__kpis p { display: grid; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--linea); }
.tab__kpis span { color: var(--tinta-3); font-size: 10px; }
.tab__kpis strong { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tab__kpis em { color: var(--tinta-3); font-size: 9.5px; font-style: normal; }
.tab__kpis em::before { content: "▲ "; color: var(--verde); font-size: 8px; }
.tab__fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.tab__panel { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea); }
.tab__panel > p { margin-bottom: 8px; color: var(--tinta-2); font-size: 10px; font-weight: 500; }
.barras { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 64px; margin-bottom: 15px; border-bottom: 1px solid var(--linea-2); }
.barras span { position: relative; flex: 1; max-width: 26px; height: var(--h); border-radius: 4px 4px 0 0; background: var(--azul); }
.barras b { position: absolute; left: 0; right: 0; bottom: -15px; color: var(--tinta-3); font-size: 9px; font-weight: 400; text-align: center; }
.tab__panel--top li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 8px; color: var(--tinta-2); font-size: 10px; }
.tab__panel--top i { width: var(--w); height: 8px; border-radius: 0 4px 4px 0; background: var(--azul); }

/* Conversación con el bot (como la ve el cliente en su celular) */
.chat { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 10px; background: #efeae2; }
.chat p { max-width: 88%; padding: 6px 8px; border-radius: 9px; font-size: 10.5px; }
.chat .chat__cabeza { display: flex; align-items: center; gap: 7px; max-width: none; margin: 0 -8px 4px; padding: 9px 10px; border-radius: 0; background: #075e54; color: #fff; }
.chat__cabeza i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #cfe9e2; }
.chat__cabeza b { display: block; font-size: 11px; font-weight: 600; }
.chat__cabeza small { display: block; font-size: 9px; opacity: 0.85; }
.chat__el { align-self: flex-end; border-top-right-radius: 2px; background: #d9fdd3; }
.chat__bot { align-self: flex-start; border-top-left-radius: 2px; background: #fff; }

/* Seguimiento en el mapa */
.mapa { position: relative; background: #e6ecf5; }
.mapa svg { width: 100%; height: 250px; }
.mapa__unidad { offset-path: path("M52 150V132H110V58H130"); offset-distance: 55%; offset-rotate: 0deg; animation: recorre 7s ease-in-out infinite alternate; }
@keyframes recorre { from { offset-distance: 4%; } to { offset-distance: 92%; } }
.mapa .mapa__ficha { position: absolute; left: 8px; right: 8px; top: 12px; display: grid; padding: 7px 10px; border-radius: 10px; background: #fff; box-shadow: 0 6px 14px -8px rgba(12, 23, 51, 0.5); }
.mapa__ficha b { font-size: 11px; font-weight: 600; }
.mapa__ficha span { color: var(--tinta-3); font-size: 10px; }

/* Tienda */
.tienda { display: grid; gap: 10px; padding: 10px 12px 12px; }
.tienda__arriba { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.tienda__arriba b { font-weight: 600; }
.tienda__arriba span { padding: 3px 9px; border-radius: 999px; background: #101624; color: #fff; font-size: 9.5px; }
.tienda__productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tienda__productos p { display: grid; gap: 1px; font-size: 10px; }
.tienda__productos i { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 5px; border-radius: 8px; }
.tienda__productos svg { width: 58%; height: 58%; }
.tienda__productos b { font-weight: 500; }
.tienda__productos span { font-weight: 600; }
.tono-1 { background: #fde2e8; color: #d6336c; }
.tono-2 { background: #e3ecff; color: #1f6bff; }
.tono-3 { background: #e1f5e8; color: #12a150; }

/* Menú de restaurante */
.carta .carta__cabeza { display: grid; padding: 12px; background: #c2410c; color: #fff; }
.carta__cabeza b { font-size: 13px; font-weight: 600; }
.carta__cabeza small { font-size: 9.5px; opacity: 0.92; }
.carta ul { padding: 4px 12px 0; }
.carta li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--linea-2); font-size: 11px; }
.carta li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.carta .carta__boton { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 12px 0; padding: 7px; border-radius: 8px; background: #25d366; color: #06301a; font-size: 10.5px; font-weight: 600; }
.carta__boton svg { width: 12px; height: 12px; }

/* ---------- Opiniones de clientes (aparece cuando hay opiniones reales en js/sitio.js) ---------- */
.seccion--linea { border-top: 1px solid var(--linea); }
.opiniones { display: grid; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.opinion { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; border: 1px solid var(--linea); background: #fff; }
.opinion blockquote { margin: 0; font-size: 1.02rem; color: var(--tinta); }
.opinion blockquote p { margin: 0; }
.opinion__quien { margin: auto 0 0; color: var(--tinta-3); font-size: 0.88rem; }
.opinion__quien strong { display: block; color: var(--tinta); font-weight: 600; font-size: 0.95rem; }

/* ---------- Pasos ---------- */
.pasos { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-2); }
.pasos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linea-2); }
@media (min-width: 640px) { .pasos li { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 26px 0; } }
.pasos__n { color: var(--azul); font-size: 2.4rem; font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pasos h3 { margin: 0 0 4px; }
.pasos p { margin: 0; color: var(--tinta-2); font-size: 0.96rem; }

/* ---------- Contacto ---------- */
.contacto { padding-top: 0; }
.contacto__caja {
  display: grid; gap: 32px; padding: 40px 24px; border-radius: 32px; color: #fff;
  background: var(--azul) linear-gradient(140deg, #3a7dff 0%, #1f6bff 42%, #1557e0 100%);
  box-shadow: 0 40px 60px -40px rgba(21, 87, 224, 0.75);
}
@media (min-width: 900px) { .contacto__caja { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 56px; align-items: center; padding: 64px; } }
.contacto__caja h2 { max-width: 14em; }
.contacto__texto > p { margin: 0; font-size: 1.08rem; color: rgba(255, 255, 255, 0.92); }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.contacto__dato { margin: 18px 0 0 !important; font-size: 0.92rem !important; }
.contacto__dato:empty { display: none; }
.contacto__guia { display: grid; justify-items: start; gap: 4px; padding: 8px 22px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); }
.contacto__guia p { margin: 0 0 14px; font-size: 0.96rem; line-height: 1.5; }
.contacto__cara { width: 112px; height: 112px; margin: -6px 0 -14px -20px; }
.contacto__cara svg { width: 100%; height: 100%; overflow: visible; }
.contacto :focus-visible { outline-color: #fff; }

/* ---------- Pie ---------- */
.pie { padding: 48px 0 32px; color: var(--tinta-2); font-size: 0.92rem; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px 48px; }
.pie__marca { max-width: 22rem; }
.pie__marca img { width: 84px; height: auto; margin-bottom: 14px; }
.pie__marca p { margin: 0; color: var(--tinta-3); }
.pie__menu { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pie__menu a { padding: 4px 0; text-decoration: none; font-weight: 500; }
.pie__menu a:hover { color: var(--azul-texto); }
.pie__legal { margin-top: 32px; }
.pie__legal p { margin: 0; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 0.85rem; }
.pie__legal p + p { padding-top: 8px; border-top: 0; font-size: 0.78rem; }

/* ====================================================================
   Aidi: el botón flotante con la carita, su aviso y el panel de conversación
   ==================================================================== */
.aidi__boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; filter: drop-shadow(0 10px 12px rgba(15, 71, 194, 0.38));
  transition: transform 0.25s var(--suave), opacity 0.2s ease, visibility 0s;
}
.aidi__boton:hover { transform: translateY(-3px) scale(1.04); }
.aidi__boton.se-esconde { opacity: 0; transform: scale(0.6); pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, 0.2s; }
.aidi__cara { position: absolute; inset: -19px; display: block; pointer-events: none; }
.aidi__cara svg { width: 100%; height: 100%; overflow: visible; }

.aidi__aviso {
  position: fixed; right: 94px; bottom: 30px; z-index: 60; display: flex; align-items: flex-start; gap: 2px;
  max-width: min(280px, calc(100vw - 116px)); margin: 0; padding: 4px 4px 4px 6px; border-radius: 16px 16px 4px 16px;
  background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-2); animation: aidi-entra 0.3s var(--suave);
}
.aidi__aviso-texto { padding: 8px 8px; border: 0; background: none; text-align: left; font-size: 0.9rem; font-weight: 500; line-height: 1.4; color: var(--tinta); cursor: pointer; }
.aidi__aviso-texto:hover { color: var(--azul-texto); }
.aidi__aviso-cerrar, .aidi__icono-boton {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--tinta-3); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.aidi__aviso-cerrar:hover, .aidi__icono-boton:hover { background: var(--azul-suave); color: var(--azul-oscuro); }

.aidi__panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(404px, calc(100vw - 24px)); height: min(650px, calc(100dvh - 40px)); overflow: hidden;
  border-radius: 24px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  transform-origin: bottom right; animation: aidi-abre 0.22s var(--suave);
}
@media (max-width: 560px) {
  .aidi__panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(84dvh, 650px); }
  .aidi__boton { right: 14px; bottom: 14px; }
  .aidi__aviso { right: 84px; bottom: 24px; }
}
.aidi__cabeza { display: flex; align-items: center; gap: 2px; padding: 8px 10px 8px 6px; background: var(--azul-tenue); border-bottom: 1px solid var(--azul-borde); }
.aidi__cabeza-cara { position: relative; width: 56px; height: 56px; flex: none; filter: drop-shadow(0 4px 6px rgba(31, 107, 255, 0.3)); }
.aidi__cabeza-cara .aidi__cara { inset: -16px; }
.aidi__quien { flex: 1; min-width: 0; padding-left: 6px; }
.aidi__quien h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.2; }
.aidi__quien p { margin: 0; color: var(--tinta-3); font-size: 0.8rem; line-height: 1.3; }

.aidi__charla { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.aidi__charla:focus-visible { outline-offset: -4px; }
.burbuja { max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 0.94rem; line-height: 1.5; overflow-wrap: anywhere; animation: aidi-entra 0.25s var(--suave); }
.burbuja--aidi { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--papel-2); color: var(--tinta); }
.burbuja--yo { align-self: flex-end; margin-top: 6px; border-bottom-right-radius: 5px; background: var(--azul); color: #fff; }
.burbuja ul { margin: 0; padding-left: 18px; }
.burbuja--cita { max-width: 94%; border: 1px dashed var(--linea-2); background: #fff; color: var(--tinta-2); font-size: 0.88rem; white-space: pre-line; }
.burbuja li + li { margin-top: 2px; }
.burbuja--pensando { display: flex; gap: 5px; padding: 15px 16px; }
.burbuja--pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); animation: aidi-punto 1s ease-in-out infinite; }
.burbuja--pensando span:nth-child(2) { animation-delay: 0.15s; }
.burbuja--pensando span:nth-child(3) { animation-delay: 0.3s; }

.ficha { align-self: stretch; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; align-items: center; margin: 4px 0; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--azul-borde); box-shadow: var(--sombra-1); animation: aidi-entra 0.25s var(--suave); }
.ficha .sello { width: 52px; height: 52px; grid-row: span 2; }
.ficha__nombre { margin: 0; font-weight: 600; line-height: 1.3; }
.ficha .precio strong { font-size: 1.35rem; }
.ficha__incluye { grid-column: 1 / -1; display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.88rem; }

.aidi__opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; animation: aidi-entra 0.25s var(--suave); }
.opcion {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-radius: 13px; border: 1.5px solid #c3d4f8;
  background: #fff; color: var(--azul-oscuro); font-size: 0.9rem; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--suave);
}
.opcion:hover { background: var(--azul-suave); border-color: var(--azul); }
.opcion:active { transform: scale(0.97); }
.opcion--principal { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.opcion--principal:hover { background: var(--azul-texto); border-color: var(--azul-texto); }
.opcion--suave { border-color: var(--linea); color: var(--tinta-2); }

.aidi__escribir { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--linea); background: #fff; }
.aidi__escribir input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 13px; border: 1.5px solid var(--linea-2); background: #fff; color: var(--tinta); font: inherit; font-size: 1rem; }
.aidi__escribir input::placeholder { color: var(--tinta-3); }
.aidi__escribir input:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.aidi__enviar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 13px; background: var(--azul); color: #fff; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s var(--suave); }
.aidi__enviar:hover { background: var(--azul-texto); }
.aidi__enviar:active { transform: scale(0.95); }

@keyframes aidi-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aidi-abre { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes aidi-punto { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .aidi__charla { scroll-behavior: auto; }
}