/* Identidad visual de Orquestador - capa de theming sobre Bootstrap 5.3,
   no un rediseño desde cero. La mayoría de páginas públicas y del panel ya
   están escritas en clases de Bootstrap (btn-primary, bg-dark, text-muted,
   form-control...) - en vez de reescribir esas páginas, este fichero
   redefine las custom properties que Bootstrap 5.3 expone para theming
   (raíz + por-componente) para que todo lo existente adopte el nuevo look
   con un solo <link>, sin tocar el marcado. Añadir este fichero DESPUÉS del
   <link> de bootstrap.min.css en cualquier página lo reskin por completo.

   Los componentes nuevos que no cubre Bootstrap (tarjeta de producto,
   mosaicos de canal, pasos numerados, tabla comparativa...) están al
   final, con nombres genéricos pensados para reutilizarse en cualquier
   página, no solo en la portada - así evitamos reescribir estilos sueltos
   página a página.

   Tipografía: DM Sans (texto) + DM Serif Display (titulares), autoalojadas
   en frontend/fonts/ en vez de vía Google Fonts por CDN - cargar fuentes
   desde fonts.googleapis.com envía la IP del visitante a Google antes de
   que pueda aceptar o rechazar cookies, lo que choca con el propio banner
   de consentimiento que ya tiene este sitio (ver js/layout.js). Los iconos
   (Tabler) sí van por CDN de jsdelivr, mismo proveedor ya usado para
   Bootstrap - no añade un tercero nuevo.
*/

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-italic.woff2") format("woff2");
}

:root {
  /* ---- Paleta ---- */
  --accent: #e8364e;
  --accent-ink: #c42d41;
  --accent-soft: #fde8e4;
  --accent-soft-border: #fadcd6;

  --violet: #7b5ea7;
  --violet-ink: #5b3e90;
  --violet-soft: #f3f0fa;
  --violet-soft-border: #ddd6ee;

  --good: #1b7a4a;
  --good-ink: #1b7a4a;
  --good-soft: #e6f9f0;
  --good-soft-border: #c2e8d5;

  --warn-ink: #d4880c;

  --ink: #1a1a1a;
  --ink-muted: #666666;
  --ink-faint: #999999;
  --page-bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f8f8f7;
  --border-soft: #e8e7e5;

  --bs-primary: #e8364e;
  --bs-primary-rgb: 232, 54, 78;
  --bs-primary-text-emphasis: #c42d41;
  --bs-primary-bg-subtle: #fde8e4;
  --bs-primary-border-subtle: #fadcd6;

  --bs-dark: #1a1a1a;
  --bs-dark-rgb: 26, 26, 26;

  --bs-body-bg: #fafafa;
  --bs-body-bg-rgb: 250, 250, 250;
  --bs-body-color: #1a1a1a;
  --bs-body-color-rgb: 26, 26, 26;
  --bs-secondary-color: rgba(26, 26, 26, 0.6);
  --bs-border-color: #e8e7e5;
  --bs-border-color-translucent: rgba(26, 26, 26, 0.1);

  --bs-link-color: #e8364e;
  --bs-link-color-rgb: 232, 54, 78;
  --bs-link-hover-color: #c42d41;
  --bs-link-hover-color-rgb: 196, 45, 65;

  --bs-body-font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, ui-serif, serif;
}

body {
  background: var(--page-bg);
}

/* ---- Titulares: serif con moderación, cuerpo de texto sigue en DM Sans ---- */
h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .hd {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.accent-italic {
  color: var(--accent);
  font-style: italic;
}

/* ---- Botones: los componentes de Bootstrap fijan sus custom properties
   en hex estático (no heredan de --bs-primary), así que se sobrescriben
   aquí explícitamente - es el mecanismo de theming soportado por Bootstrap
   5.3 para esto, no un hack. ---- */
.btn {
  border-radius: 0.7rem;
  font-weight: 500;
}
.btn-primary {
  --bs-btn-bg: #e8364e;
  --bs-btn-border-color: #e8364e;
  --bs-btn-hover-bg: #c42d41;
  --bs-btn-hover-border-color: #c42d41;
  --bs-btn-active-bg: #a82536;
  --bs-btn-active-border-color: #a82536;
  --bs-btn-focus-shadow-rgb: 232, 54, 78;
  --bs-btn-disabled-bg: #e8364e;
  --bs-btn-disabled-border-color: #e8364e;
}
.btn-outline-primary {
  --bs-btn-color: #e8364e;
  --bs-btn-border-color: #e8364e;
  --bs-btn-hover-bg: #e8364e;
  --bs-btn-hover-border-color: #e8364e;
  --bs-btn-active-bg: #e8364e;
  --bs-btn-active-border-color: #e8364e;
  --bs-btn-focus-shadow-rgb: 232, 54, 78;
  --bs-btn-disabled-color: #e8364e;
  --bs-btn-disabled-border-color: #e8364e;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--border-soft);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--ink-faint);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--ink-faint);
  --bs-btn-active-color: var(--ink);
  --bs-btn-disabled-color: var(--ink-muted);
  --bs-btn-disabled-border-color: var(--border-soft);
  background: var(--surface);
}
.form-control:focus,
.form-select:focus {
  border-color: #f0a3ac;
  box-shadow: 0 0 0 0.25rem rgba(232, 54, 78, 0.2);
}

/* ==================== Marca ==================== */

/* "•lixai" - punto y "ai" siempre en rojo de acento; "lix" en blanco por
   defecto porque header y footer son fondo oscuro (bg-dark/site-footer-dark).
   Si algún día hace falta sobre fondo claro, usar .brand-mark--on-light
   en vez de tocar esto (rompería header/footer). */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.brand-mark .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  flex-shrink: 0;
  animation: brand-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes brand-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark .dot { animation: none; }
}
.brand-mark .ai {
  color: var(--accent);
}
.brand-mark--on-light {
  color: var(--ink);
}

/* ==================== Pie de página oscuro ==================== */

.site-footer-dark {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.55);
}
.site-footer-dark a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.site-footer-dark a:hover {
  color: #fff;
}

/* ==================== Componentes reutilizables ==================== */

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.eyebrow-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.tag-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}

/* ---- Numeración de secciones: recorrido paso a paso de la portada, para
   que se note el salto de sección al hacer scroll (el tag-label solo, en
   mayúsculas pequeñas, se perdía). ---- */
.pillar-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.pillar-eyebrow .pillar-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-soft-border);
  -webkit-text-stroke: 1.5px var(--accent);
}
@supports not (-webkit-text-stroke: 1px red) {
  .pillar-eyebrow .pillar-num { color: var(--accent); }
}

/* ---- Hero ---- */
.site-hero {
  padding: 3.75rem 1rem 0;
  text-align: center;
  background: linear-gradient(180deg, var(--page-bg) 0%, #fff5f3 100%);
}
.site-hero .hero-title {
  font-size: 3.2rem;
  line-height: 1.08;
  color: var(--ink);
  max-width: 680px;
  margin: 1.25rem auto 0;
}
.site-hero .hero-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 1.1rem auto 0;
}
/* ---- Icono cuadrado de color, reusado en tiles/tarjetas/pasos ---- */
.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.icon-tile.sm { width: 36px; height: 36px; border-radius: 0.6rem; }
.icon-tile--accent { background: var(--accent); }
.icon-tile--violet { background: var(--violet); }
.icon-tile--good { background: var(--good); }
.icon-tile--dark { background: var(--ink); }

/* ---- Franja de cifras ---- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  overflow: hidden;
}
.stat-strip > div {
  padding: 1.4rem;
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
.stat-strip > div:last-child { border-right: none; }
.stat-strip .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--accent);
}
.stat-strip > div:not(:first-child) .num { color: var(--ink); }
.stat-strip .label {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---- Cómo funciona: pasos numerados (secuencia real, sí ameritan número) ---- */
.step-card {
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  height: 100%;
}
.step-card.accent { background: #fff5f3; border-color: var(--accent-soft-border); }
.step-card.violet { background: var(--violet-soft); border-color: var(--violet-soft-border); }
.step-card.good { background: var(--good-soft); border-color: var(--good-soft-border); }
.step-number {
  width: 36px;
  height: 36px;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
}
.step-number.accent { background: var(--accent); }
.step-number.violet { background: var(--violet); }
.step-number.good { background: var(--good); }
.step-card h3 { font-size: 0.95rem; margin-top: 0.85rem; }
.step-card p { font-size: 0.78rem; line-height: 1.6; margin-top: 0.35rem; }
.step-card.accent p { color: #7a6b6b; }
.step-card.violet p { color: #6b6580; }
.step-card.good p { color: #4a7a5e; }

.step-chip-row {
  display: flex;
  gap: 6px;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.step-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid #eae3e1;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.65rem;
  color: var(--ink-muted);
}
.step-mini-panel {
  background: var(--surface);
  border-radius: 0.6rem;
  padding: 0.55rem 0.65rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
}
.step-mini-panel.violet { border: 1px solid var(--violet-soft-border); color: var(--violet-ink); }
.step-mini-panel.good { border: 1px solid var(--good-soft-border); }

/* ---- Sección oscura de funcionalidades ---- */
.dark-feature-section {
  background: var(--ink);
  padding: 3rem 1rem;
}
.dark-feature-section h2 {
  color: #fff;
  font-size: 1.85rem;
  line-height: 1.15;
}
.dark-feature-section .lead-muted {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}
.feature-tile-dark {
  background: #2a2a2a;
  border-radius: 0.9rem;
  padding: 1.1rem;
  height: 100%;
}
.feature-tile-dark p.title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  margin-top: 0.65rem;
}
.feature-tile-dark p.desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
  margin-top: 0.25rem;
}

/* ---- Comparativa ---- */
.compare-section {
  background: #fff5f3;
  padding: 3rem 1rem;
}
.compare-table-wrap {
  background: var(--surface);
  border-radius: 1rem;
  border: 1px solid var(--accent-soft-border);
  overflow: auto;
}
.compare-table {
  width: 100%;
  min-width: 480px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.compare-table th {
  padding: 0.9rem 1rem;
  text-align: center;
  font-weight: 400;
}
.compare-table thead tr { background: #fff5f3; }
.compare-table th:first-child { width: 38%; text-align: left; font-size: 0.7rem; color: var(--ink-faint); }
.compare-table th .brand-pill {
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
}
.compare-table th.other { font-size: 0.7rem; color: var(--ink-faint); }
.compare-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f5edea;
  color: #444;
}
.compare-table td.center { text-align: center; }
.compare-table td.yes { color: var(--good-ink); text-align: center; }
.compare-table td.no { color: #cccccc; text-align: center; }
.compare-table td.muted { text-align: center; font-size: 0.7rem; color: var(--ink-faint); }
.compare-table td.highlight { text-align: center; font-weight: 500; color: var(--accent); }

/* ---- CTA final ---- */
.final-cta-section {
  background: var(--accent);
  padding: 3rem 1rem;
  text-align: center;
}
.final-cta-section h2 { color: #fff; font-size: 2rem; line-height: 1.1; }
.final-cta-section p.sub { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; margin-top: 0.5rem; }
.final-cta-section .btn-light {
  color: var(--accent-ink);
  font-weight: 500;
}

/* ---- Decoración del hero: ondas de "visibilidad" detrás del titular ---- */
.site-hero {
  position: relative;
  overflow: hidden;
}
.site-hero .container {
  position: relative;
  z-index: 1;
}
.hero-signal-deco {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.hero-signal-deco circle {
  fill: none;
  stroke: var(--accent-soft-border);
  stroke-width: 1;
  transform-origin: center;
  animation: hero-ring-pulse 4.5s ease-in-out infinite;
}
.hero-signal-deco .ring-2 { stroke: var(--violet-soft-border); animation-delay: 0.4s; }
.hero-signal-deco .ring-3 { stroke: var(--border-soft); animation-delay: 0.8s; }
@keyframes hero-ring-pulse {
  0%, 100% { opacity: 0.9; transform: scale(0.94); }
  50% { opacity: 0.3; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-signal-deco circle { animation: none; }
}

/* ==================== Auth (login, autorizar) ====================
   Vistas de un solo formulario centrado: login de comercio, desarrollador,
   admin, y el consentimiento OAuth de autorizar.html. Mismo gradiente que
   .site-hero para que se sientan parte del mismo sitio, no una página aparte. */
.auth-hero {
  padding: 3.5rem 1rem;
  min-height: calc(100vh - 280px);
  background: linear-gradient(180deg, var(--page-bg) 0%, #fff5f3 100%);
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 20px 40px -28px rgba(26, 26, 26, 0.18);
}
.auth-card .nav-tabs {
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1.25rem;
}
.auth-card .nav-tabs .nav-link {
  border: none;
  color: var(--ink-muted);
  font-weight: 500;
  padding-bottom: 0.6rem;
}
.auth-card .nav-tabs .nav-link.active {
  color: var(--accent);
  background: none;
  border-bottom: 2px solid var(--accent);
}

/* ==================== Páginas legales (prosa) ====================
   aviso.html, privacidad.html, terminos.html, cookies.html comparten este
   mismo esqueleto — antes cada una repetía su propio <style>, ahora vive
   una sola vez aquí. */
.legal-wrap { max-width: 760px; }
.legal-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.legal-section p, .legal-section li { color: var(--ink-muted); line-height: 1.7; }
.legal-table { font-size: 0.88rem; }
.legal-table th, .legal-table td { padding: 0.5rem; border: 1px solid var(--border-soft); vertical-align: top; }
.legal-table th { background: var(--surface-2); font-weight: 600; }
/* Variante sin rejilla, solo fila clave/valor (aviso.html, datos del titular) */
.legal-table--kv td { padding: 0.5rem 0; border: none; border-bottom: 1px solid var(--border-soft); }
.legal-table--kv td:first-child { width: 220px; color: var(--ink-faint); font-weight: 500; padding-right: 1rem; }
.legal-callout {
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  padding: 1rem;
  background: var(--surface-2);
}

/* ==================== Páginas de error ====================
   401/403/404/429/500/502/503/504 comparten este esqueleto — solo cambian
   el código, el icono, el título, el mensaje y los botones. */
.error-shell {
  min-height: calc(100vh - 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, var(--page-bg) 0%, #fff5f3 100%);
}
.error-shell .icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  font-size: 1.5rem;
  margin: 0 auto 1.25rem;
}
.error-code {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  font-style: italic;
}

/* ==================== Escaparate público (tienda.html) ====================
   Cabecera de la tienda y tarjetas de producto, generadas por js/tienda.js. */
.storefront-hero {
  background: linear-gradient(180deg, var(--page-bg) 0%, #fff5f3 100%);
  padding: 2.5rem 1rem 2rem;
}
.storefront-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  height: 100%;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.product-card:hover {
  box-shadow: 0 12px 28px -20px rgba(26, 26, 26, 0.25);
}
.product-card .card-img-top {
  height: 160px;
  object-fit: cover;
}
.product-card .price {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.15rem;
}

/* ==================== Responsive ====================
   Bootstrap ya resuelve el grid (row/col-md-*, col-sm-*, col-lg-*) mobile-
   first de fábrica - las reglas de aquí abajo cubren los componentes
   propios de este fichero, que no pasan por el grid de Bootstrap. */

/* Cabecera: sin navbar-toggler (solo marca + 2 botones), así que en vez de
   depender de un colapso que no existe, se deja que el grupo de botones
   baje a una segunda línea si no cabe, en vez de desbordar o encogerse
   hasta ser ilegible. */
#site-header .navbar > .container {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

@media (max-width: 767px) {
  .site-hero { padding: 2.5rem 1rem 0; }
  .site-hero .hero-title { font-size: 2.1rem; max-width: 100%; }
  .site-hero .hero-lead { font-size: 0.95rem; max-width: 100%; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .stat-strip > div:last-child { border-bottom: none; }
  .dark-feature-section h2 { font-size: 1.5rem; }
  .compare-section, .dark-feature-section, .final-cta-section { padding: 2.25rem 1rem; }
}

@media (max-width: 479px) {
  .eyebrow-pill { font-size: 0.66rem; padding: 4px 10px; }
  .site-hero .hero-title { font-size: 1.75rem; }
  #site-header .navbar > .container .d-flex.gap-2 { width: 100%; justify-content: flex-end; }
}

/* ==================== PWA: banner de instalación ==================== */
.pwa-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 12px 34px -12px rgba(26, 26, 26, 0.35);
}
.pwa-banner-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.pwa-banner-text { display: flex; flex-direction: column; line-height: 1.2; flex-grow: 1; }
.pwa-banner-text strong { font-size: 0.95rem; }
.pwa-banner-text span { font-size: 0.8rem; color: var(--ink-muted); }
.pwa-banner-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
@media (max-width: 400px) {
  .pwa-banner { flex-wrap: wrap; }
  .pwa-banner-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ==================== Portada: los dos lados del mostrador ====================
   Bloques del eje de la portada (catálogo automático, tienda, proveedor,
   directorio, la red). Mismo lenguaje visual que el resto: tarjeta blanca,
   borde suave, icono cuadrado de color. Nombres genéricos a propósito para
   poder reusarlos en otras páginas públicas sin duplicar CSS. */
.pillar-section {
  padding: 3.25rem 1rem;
}
.pillar-section--soft { background: var(--surface-2); }
.pillar-section--tint { background: linear-gradient(180deg, #fff5f3 0%, var(--page-bg) 100%); }

.pillar-head {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.pillar-head h2 {
  font-size: 1.85rem;
  line-height: 1.15;
  margin-top: 0.6rem;
}
.pillar-head p.sub {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin-top: 0.85rem;
}

/* Tarjeta de argumento: la unidad de los bloques de tienda/proveedor. */
.value-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  padding: 1.15rem;
  height: 100%;
}
.value-card h3 {
  font-size: 0.95rem;
  margin: 0.8rem 0 0;
}
.value-card p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0.35rem 0 0;
}

/* Letra pequeña bajo un botón: qué es exactamente lo que se abre. Existe
   aparte de .hero-note porque aquella está atada a .site-hero. */
.pillar-note {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* Frase de remate al pie de un bloque: la que se queda en la cabeza. */
.pillar-kicker {
  max-width: 640px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
}
.pillar-kicker.on-dark { color: #fff; }

/* ---- Capturas de producto: marco de escritorio + móvil ----
   Los <figure> nacen ocultos y solo se muestran cuando la imagen carga de
   verdad (ver el script de index.html), para que un hueco sin captura
   todavía no deje un icono de imagen rota en la portada. */
.shot {
  display: none;
  margin: 2.25rem auto 0;
  max-width: 940px;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
}
.shot.is-ready { display: flex; }
.shot-frame { display: none; }
.shot-frame.is-ready { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-desktop {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 700px;
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 22px 44px -26px rgba(26, 26, 26, 0.35);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.shot-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dcd9d6;
}
.shot-mobile {
  flex: 0 0 180px;
  width: 180px;
  border: 7px solid var(--ink);
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 22px 44px -26px rgba(26, 26, 26, 0.45);
}
.shot-caption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---- Diagramas "lixai conecta con..." en <canvas> (js/flow-diagrams.js).
   El canvas se redibuja solo según el ancho de .flow-diagram: en móvil
   apila las tarjetas, en escritorio las pone en fila. ---- */
.flow-diagram {
  margin: 1.75rem auto 0;
  max-width: 900px;
}
.flow-canvas {
  display: block;
  width: 100%;
}

/* Rejilla título + texto breve + diagrama, usada en "todo incluido" para
   organizar sus puntos en tarjetas en vez de un bloque largo. Una columna
   en móvil, dos en escritorio. */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.flow-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}
.flow-card h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.flow-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}
.flow-card .flow-diagram {
  margin-top: 1.1rem;
  max-width: 100%;
}

/* Enlaces "soy tienda / soy proveedor" bajo los botones del hero. */
.side-picker {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.side-picker a {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 2px;
}
.side-picker a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 767px) {
  .pillar-section { padding: 2.25rem 1rem; }
  .pillar-head h2 { font-size: 1.5rem; }
  .pillar-head p.sub { font-size: 0.88rem; }
  .pillar-kicker { font-size: 1rem; }
  .shot.is-ready { flex-direction: column; align-items: center; }
  .shot-mobile { flex-basis: 210px; width: 210px; }
}