/* =============================================================================
   PORTAFOLIO KAIZEN 2026 — integración en el sitio (escrito a mano)
   El portafolio en sí (diapositivas, tema claro/oscuro, catálogo…) está en
   css/portafolio.css, GENERADO desde Portafolio_Kaizen/ con integrar_portafolio.py.
   Aquí solo va lo necesario para que conviva con el menú fijo, el pie de página,
   Kaizen AI, Bootstrap y style.css sin cambiar su diseño.
   ============================================================================= */

:root { --kzp-nav: 72px; }                    /* alto del menú; js/portafolio.js lo mide */
html { scroll-padding-top: var(--kzp-nav); }  /* anclas (#productos…) bajo el menú fijo */

/* ── Lo que Bootstrap y style.css cuelan dentro del portafolio ───────────────── */
.kzp { position: relative; isolation: isolate; padding-top: var(--kzp-nav); }  /* empieza bajo el menú fijo */
.kzp h1, .kzp h2, .kzp h3, .kzp h4 { color: inherit; }          /* style.css da color a los títulos */
.kzp blockquote { margin: 1em 40px; }                            /* margen del navegador, como el original */
.kzp a:hover { color: inherit; }
.kzp .kzp-btn:hover { color: var(--on-brand); }
.kzp .kzp-btn.ghost:hover { color: var(--brand); }

/* ── El original se desplazaba dentro de su contenedor: aquí se desplaza la página ── */
.kzp #scroller { height: auto; overflow: visible; scroll-snap-type: none; }
.kzp .slide {
  min-height: calc(100vh - var(--kzp-nav));
  min-height: calc(100dvh - var(--kzp-nav));
}
/* Sin el "imán" entre diapositivas (scroll-snap) del original: dentro de su propio
   contenedor iba bien, pero aplicado a toda la página (con menú y pie) recolocaba el scroll
   solo en las diapositivas más altas que la pantalla (p. ej. el catálogo). Se navega igual
   con los puntos del riel, las flechas del teclado y la rueda del ratón. */
.kzp .slide { scroll-snap-align: none; }

/* ── Riel lateral y barra de progreso: debajo del menú fijo ──────────────────── */
.kzp #rail { top: var(--kzp-nav); z-index: 1020; transition: opacity .25s ease; }
.kzp #prog { top: var(--kzp-nav); z-index: 1021; transition: width .18s linear, opacity .25s ease; }
/* Al llegar al pie de página se retiran (js/portafolio.js pone .kzp-fuera) */
.kzp.kzp-fuera #rail,
.kzp.kzp-fuera #prog { opacity: 0; pointer-events: none; }
.kzp #modal { z-index: 1065; }                /* por encima del menú (1030) y de Kaizen AI */

/* Etapas de CRISP-DM: el original fija 3 columnas en línea (style="…repeat(3,1fr)") también en
   el teléfono, y a 414 px la tercera se salía 14 px (en el original quedaba recortada sin verse). */
@media (max-width: 640px) {
  .kzp #flow { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 760px) {
  .kzp #rail { top: auto; }                   /* en móvil el riel es una barra inferior */
  /* el botón de Kaizen AI sube para no tapar la barra de diapositivas */
  body.kzp-pagina .kzai-launcher { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Imprimir / PDF (botón del riel): sin el menú, el pie ni el asistente ────── */
@media print {
  #mainNavbar, footer, .kzai, #kai-hub-overlay, .kzp #rail, .kzp #prog { display: none !important; }
  .kzp .slide { min-height: auto; break-inside: avoid-page; }
  .kzp .reveal { opacity: 1 !important; transform: none !important; }
}