:root {
  --primary: #3657f5;
  --primary-dark: #263bc5;
  --ink: #17213b;
  --muted: #66708b;
  --line: #e8ebf3;
  --bg: #f7f8fc;
  --orange: #ff8b45;
  --purple: #7258f5;
  --green: #1bbf83;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(31, 46, 93, 0.13);
}* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}html {
  scroll-behavior: smooth;
}body {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}a {
  text-decoration: none;
  color: inherit;
}button {
  font: inherit;
}.container {
  width: min(1160px, calc(100% - 40px));
  margin: auto;
}.section {
  padding: 110px 0;
}.site-header {
  height: 78px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 235, 243, 0.8);
  transition: 0.3s;
}.site-header.scrolled {
  box-shadow: 0 8px 35px rgba(20, 31, 67, 0.08);
}.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 42px;
}.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, sans-serif;
  font-size: 22px;
  font-weight: 800;
}.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}.main-nav a,
.link-button {
  font-size: 14px;
  font-weight: 600;
  color: #3f4963;
}.main-nav a:hover,
.link-button:hover {
  color: var(--primary);
}.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 25px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 12px 25px rgba(54, 87, 245, 0.22);
  transition: 0.25s;
}.button:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
  box-shadow: 0 16px 32px rgba(54, 87, 245, 0.29);
}.button-small {
  min-height: 42px;
  padding: 0 19px;
  border-radius: 11px;
  font-size: 14px;
}.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  width: 36px;
}.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 6px 0;
}.hero {
  padding: 156px 0 82px;
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
}.section-glow:before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 98, 246, 0.12), transparent 68%);
  right: -100px;
  top: 60px;
}.hero-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 55px;
}.social-proof {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
  font-size: 14px;
}.hero h1 {
  font-family: Manrope, sans-serif;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.07;
  letter-spacing: -3.2px;
  margin-bottom: 24px;
}.hero h1 span {
  color: var(--primary);
}.hero-text {
  font-size: 19px;
  color: var(--muted);
  max-width: 570px;
  margin-bottom: 32px;
}.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #34405e;
}.play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #edf0ff;
  color: var(--primary);
  font-size: 11px;
  padding-left: 2px;
}.rating-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-size: 13px;
  color: var(--muted);
}.hero-visual {
  position: relative;
  min-width: 0;
}.dash-sidebar span.active {
  height: 18px;
  background: #5873ff;
}.float-card {
  position: absolute;
  background: #fff;
  border: 1px solid #edf0f6;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(28, 42, 83, 0.15);
  padding: 13px 16px;
}.order-pop .check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dcf8ec;
  color: var(--green);
}.floating {
  animation: float 5.5s ease-in-out infinite;
}@keyframes float {
  50% {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateY(-9px);
  }
}.logo-strip {
  padding: 34px 0 42px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}.logo-strip p {
  text-align: center;
  font-weight: 700;
  color: #69728b;
  margin-bottom: 23px;
  font-size: 13px;
}.marquee {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}.marquee-track {
  display: flex;
  width: max-content;
  gap: 52px;
  animation: marquee 26s linear infinite;
  color: #8790a6;
  font-weight: 700;
}.marquee-track span{
    width:140px;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
}.marquee-track span img{
    width:100%;
    height:100%;
    object-fit:contain;
}@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}.section-heading {
  max-width: 610px;
}.section-heading.centered {
  text-align: center;
  margin: 0 auto 70px;
}.eyebrow {
  display: block;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 13px;
}.section-heading h2,
.cta-copy h2 {
  font-family: Manrope, sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.14;
  letter-spacing: -2px;
  margin-bottom: 18px;
}.section-heading p,
.feature-copy > p {
  color: var(--muted);
  font-size: 17px;
}.solutions {
  background: var(--bg);
}.tabs {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}.tab {
  border: 0;
  background: transparent;
  color: #737c94;
  padding: 12px 17px;
  border-radius: 11px;
  font-weight: 700;
  cursor: pointer;
}.tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 8px 23px rgba(38, 53, 96, 0.09);
}.tab-panel {
  background: #fff;
  border-radius: 30px;
  padding: 55px 65px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: 50px;
  box-shadow: 0 20px 60px rgba(25, 38, 80, 0.08);
}.tab-copy h3 {
  font-family: Manrope, sans-serif;
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 14px;
}.tab-copy > p {
  color: var(--muted);
  font-size: 16px;
}.tab-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 28px 0 32px;
}.tab-items span {
  padding-left: 25px;
  position: relative;
  color: #59637b;
  font-weight: 600;
  font-size: 14px;
}.tab-items span:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}/*.phone-mockup {
  width: 230px;
  height: 460px;
  border: 8px solid #1b2340;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 25px 65px rgba(29, 42, 83, 0.24);
  position: relative;
}*/.phone-screen > small {
  color: #959cad;
  font-size: 8px;
}.phone-screen h4 {
  font-size: 18px;
}.phone-screen > button {
  position: absolute;
  right: 17px;
  bottom: 17px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  width: 42px;
  height: 42px;
  font-size: 20px;
}.ratings {
  background: #fff;
}.testimonial-wrap {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 20px;
  align-items: center;
  max-width: 950px;
  margin: auto;
}.testimonial-slider {
  position: relative;
  min-height: 285px;
}.testimonial {
  display: none;
  text-align: center;
  border-radius: 24px;
  background: var(--bg);
  padding: 48px 70px;
}.testimonial.active {
  display: block;
  animation: fade 0.4s ease;
}@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */.phone-visual {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}.phone-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(13, 191, 181, 0.21) 0%,
    rgba(13, 191, 181, 0.08) 43%,
    transparent 72%
  );
}/* =====================================================
   MENSAJES FLOTANTES
===================================================== */.phone-floating-message {
  position: absolute;
  z-index: 10;
  width: 245px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(7, 46, 84, 0.09);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 45px rgba(4, 33, 60, 0.16);
  animation: phoneMessageFloat 4s ease-in-out infinite;
}.phone-floating-message--top {
  top: 100px;
  left: -80px;
}.phone-floating-message--bottom {
  right: -70px;
  bottom: 125px;
  animation-delay: -2s;
}.phone-floating-message strong,
.phone-floating-message small {
  display: block;
}.phone-floating-message strong {
  margin-bottom: 3px;
  color: #082f57;
  font-size: 13px;
  line-height: 1.25;
}.phone-floating-message small {
  color: #768391;
  font-size: 10px;
  line-height: 1.4;
}.phone-floating-icon,
.phone-floating-check {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}.phone-floating-icon {
  background: linear-gradient(135deg, #12c7bb, #078aaa);
}.phone-floating-check {
  background: linear-gradient(135deg, #082f57, #0b6285);
}/* =====================================================
   TELÉFONO
===================================================== */.phone-mockup {
  position: relative;
  z-index: 2;
  width: 350px;
  transform: rotate(2deg);
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}.phone-mockup:hover {
  transform: rotate(0deg) translateY(-8px);
  filter: drop-shadow(0 30px 30px rgba(4, 32, 58, 0.18));
}.phone-frame {
  position: relative;
  padding: 10px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 48px;
  background: linear-gradient(
    145deg,
    #071c30,
    #123b5d 48%,
    #03121f
  );
  box-shadow:
    0 35px 70px rgba(2, 26, 49, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}.phone-notch {
  position: absolute;
  z-index: 20;
  top: 18px;
  left: 50%;
  width: 98px;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: #071725;
  transform: translateX(-50%);
}.phone-notch::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 34px;
  height: 4px;
  border-radius: 10px;
  background: #405365;
  transform: translateX(-50%);
}.phone-screen {
  position: relative;
  height: 680px;
  overflow: hidden;
  border-radius: 38px;
  background: #f8f8f6;
}/* =====================================================
   ENCABEZADO
===================================================== *//* =====================================================
   CLIENTE
===================================================== */.orders-client {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px 12px;
}.orders-client-avatar {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #14c8bb, #078dad);
  box-shadow: 0 9px 19px rgba(12, 172, 168, 0.2);
}.orders-client-avatar span {
  font-size: 14px;
  font-weight: 800;
}.orders-client small {
  display: block;
  margin-bottom: 2px;
  color: #84909a;
  font-size: 9px;
}.orders-client h3 {
  margin: 0;
  color: #142f47;
  font-size: 18px;
  line-height: 1.1;
}/* =====================================================
   CARGAR PEDIDO
===================================================== */.orders-last-order {
  width: calc(100% - 36px);
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 18px 13px;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #145cec, #086bd4);
  box-shadow: 0 8px 18px rgba(16, 91, 214, 0.24);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}.orders-reload-icon {
  font-size: 18px;
  line-height: 1;
}/* =====================================================
   BUSCADOR
===================================================== */.orders-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin: 0 18px 12px;
  padding: 0 12px;
  border: 1px solid #cfd5da;
  border-radius: 10px;
  background: #ffffff;
}.orders-search > span {
  color: #178f9c;
  font-size: 19px;
}.orders-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #17324a;
  background: transparent;
  font: inherit;
  font-size: 11px;
}.orders-search input::placeholder {
  color: #7e858b;
}/* =====================================================
   FAMILIAS
===================================================== */.orders-family {
  position: relative;
  margin: 0 18px 13px;
}.orders-family label {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 12px;
  padding: 0 5px;
  color: #20384d;
  background: #f8f8f6;
  font-size: 9px;
}.orders-family button {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border: 1px solid #cfd5da;
  border-radius: 10px;
  color: #263d50;
  background: #ffffff;
  font-size: 11px;
  cursor: pointer;
}.orders-chevron {
  color: #8f999f;
  font-size: 18px;
}/* =====================================================
   COLUMNAS
===================================================== */.orders-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) 0.85fr 0.75fr;
  gap: 7px;
  padding: 0 18px 8px;
  color: #142b40;
  font-size: 9px;
  font-weight: 800;
}.orders-columns span:nth-child(2),
.orders-columns span:nth-child(3) {
  text-align: center;
}/* =====================================================
   PRODUCTOS
===================================================== */.orders-products {
  height: 370px;
  overflow-y: hidden;
  padding: 0 18px 155px;
}.orders-product {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) 0.85fr 0.75fr;
  gap: 7px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid #e5e7e8;
}.orders-product:first-child {
  border-top: 0;
}.orders-product-description {
  min-width: 0;
  display: grid;
  grid-template-columns: 51px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}.orders-product-image {
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #ffffff;
}.orders-product-image img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}.orders-product h4 {
  margin: 0 0 3px;
  overflow: hidden;
  color: #303a42;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
}.orders-product-description strong {
  color: #0c1f31;
  font-size: 11px;
}.orders-product-quantity {
  display: grid;
  grid-template-columns: 21px 1fr 21px;
  align-items: center;
  gap: 2px;
  text-align: center;
}.orders-product-quantity button {
  width: 21px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  background: #11b7ac;
  font-size: 13px;
  cursor: pointer;
}.orders-product-quantity > span {
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #aab1b6;
  border-radius: 4px;
  color: #101c26;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
}.orders-product-quantity small {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: #59656e;
  font-size: 8px;
  line-height: 1.1;
}.orders-product-subtotal {
  display: block;
  padding-top: 6px;
  color: #101d28;
  font-size: 11px;
  text-align: center;
}/* =====================================================
   RESUMEN
===================================================== *//* =====================================================
   NAVEGACIÓN INFERIOR
===================================================== */.orders-bottom-nav {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  height: 73px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 7px 9px 11px;
  background: #1d1d1d;
}.orders-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #a9aaab;
  font-size: 8px;
  text-decoration: none;
}.orders-bottom-nav a.active {
  color: #1670ed;
}.orders-nav-icon {
  font-size: 19px;
  line-height: 1;
}/* =====================================================
   ANIMACIÓN
===================================================== */@keyframes phoneMessageFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}/* =====================================================
   RESPONSIVE
===================================================== */@media (max-width: 1100px) {.phone-floating-message--top {
    left: -15px;
  }.phone-floating-message--bottom {
    right: -15px;
  }}@media (max-width: 768px) {.phone-visual {
    min-height: 810px;
    padding-top: 80px;
    padding-bottom: 75px;
  }.phone-mockup {
    width: 315px;
    transform: none;
  }.phone-screen {
    height: 640px;
  }.phone-floating-message {
    width: 225px;
    padding: 12px;
  }.phone-floating-message--top {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: none;
  }.phone-floating-message--bottom {
    right: 50%;
    bottom: 5px;
    transform: translateX(50%);
    animation: none;
  }.orders-products {
    height: 293px;
  }}@media (max-width: 390px) {.phone-mockup {
    width: 290px;
  }.orders-product-description {
    grid-template-columns: 44px minmax(0, 1fr);
  }.orders-product-image {
    width: 44px;
    height: 44px;
  }.orders-product-image img {
    width: 39px;
    height: 39px;
  }}.quote-mark {
  font-family: Georgia, serif;
  color: #cdd5ff;
  font-size: 70px;
  line-height: 0.6;
}.testimonial p {
  font-family: Manrope, sans-serif;
  font-size: 23px;
  line-height: 1.5;
  margin: 18px 0 28px;
}.testimonial-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}.testimonial-person > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dfe5ff;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
}.testimonial-person strong,
.testimonial-person small {
  display: block;
  text-align: left;
}.testimonial-person small {
  color: #8b93a7;
  font-size: 11px;
}.slider-arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #536078;
  font-size: 19px;
  cursor: pointer;
}.slider-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
}.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}.slider-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 10px;
  background: #ccd2df;
  cursor: pointer;
}.slider-dots button.active {
  width: 24px;
  background: var(--primary);
}.eyebrow.light {
  color: #cad4ff;
}.faq-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 95px;
  align-items: start;
}.faq .section-heading {
  position: sticky;
  top: 125px;
}.faq .section-heading h2 {
  text-align: left;
}.faq .section-heading p {
  margin-bottom: 22px;
}.accordion {
  border-top: 1px solid var(--line);
}.faq-item {
  border-bottom: 1px solid var(--line);
}.faq-item button {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 23px 0;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}.faq-item button b {
  font-size: 20px;
  color: var(--primary);
}.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
}.faq-answer p {
  overflow: hidden;
  color: var(--muted);
  padding-right: 40px;
}.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}.faq-item.active .faq-answer p {
  padding-bottom: 23px;
}.site-footer {
  background: #151d36;
  color: #fff;
  padding: 75px 0 25px;
}.footer-grid > div > a:not(.brand) {
  display: block;
  color: #aeb6ca;
  font-size: 13px;
  margin: 10px 0;
}.footer-bottom {
  border-top: 1px solid #2a334e;
  margin-top: 55px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  color: #7f89a4;
  font-size: 12px;
}.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.reveal.visible {
  opacity: 1;
  transform: none;
}.delay-1 {
  transition-delay: 0.15s;
}@media (max-width: 1000px) {.main-nav {
    display: none;
  }.nav-actions .link-button {
    display: none;
  }.hero-grid,
  .feature-row,
  .feature-row.reverse,
  .tab-panel,
  .cta-card,
  .faq-grid {
    grid-template-columns: 1fr;
  }.hero-copy {
    text-align: center;
  }.hero-text,
  .section-heading {
    margin-left: auto;
    margin-right: auto;
  }.social-proof,
  .hero-actions,
  .rating-row {
    justify-content: center;
  }.hero-visual {
    max-width: 760px;
    margin: auto;
    width: 100%;
  }.tab-copy {
    text-align: center;
  }.tab-items {
    text-align: left;
  }.faq-grid {
    gap: 50px;
  }.faq .section-heading {
    position: static;
    text-align: center;
  }.faq .section-heading h2 {
    text-align: center;
  }.menu-toggle {
    display: block;
  }.main-nav.open {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 25px 20px;
    flex-direction: column;
    box-shadow: 0 18px 35px rgba(20, 31, 67, 0.1);
  }}@media (max-width: 720px) {.container {
    width: min(100% - 28px, 1160px);
  }.section {
    padding: 80px 0;
  }.site-header {
    height: 70px;
  }.nav-wrap {
    gap: 15px;
  }.nav-actions {
    display: none;
  }.main-nav.open {
    top: 70px;
  }.hero {
    padding: 120px 0 60px;
  }.hero h1 {
    font-size: 43px;
    letter-spacing: -2.4px;
  }.hero-text {
    font-size: 17px;
  }.hero-actions {
    flex-direction: column;
    gap: 16px;
  }.floating {
    animation: none;
  }.float-card {
    display: none;
  }.feature-copy h3,
  .tab-copy h3 {
    font-size: 32px;
  }.tab-panel {
    padding: 35px 20px;
  }.tab-items {
    grid-template-columns: 1fr;
  }.testimonial-wrap {
    grid-template-columns: 1fr;
  }.slider-arrow {
    display: none;
  }.testimonial {
    padding: 38px 22px;
  }.testimonial p {
    font-size: 19px;
  }.faq-grid {
    gap: 30px;
  }.footer-bottom {
    flex-direction: column;
    gap: 8px;
  }}@media (max-width: 420px) {.hero h1 {
    font-size: 38px;
  }.rating-row {
    flex-wrap: wrap;
  }}/* Hero visual OSAC: recreación del módulo de surtimiento */.osac-system {
  position: relative;
  width: 112%;
  margin-left: -2%;
  border: 1px solid #dce3eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 85px rgba(14, 47, 82, 0.22);
  overflow: hidden;
  transform: perspective(1300px) rotateY(-5deg) rotateX(2deg);
  transform-origin: center;
  transition: transform 0.45s ease;
}.osac-system:hover {
  transform: perspective(1300px) rotateY(-2deg) rotateX(0);
}.osac-symbol {
  position: absolute;
  left: 17px;
  top: 5px;
  width: 27px;
  height: 27px;
  border: 3px solid #e4b84e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e4b84e;
  font: bold 11px Manrope;
}.osac-topline {
  flex: 1;
}.osac-user {
  margin-left: 8px;
  color: #62676d;
}.osac-workspace {
  display: flex;
  height: 390px;
}.osac-sidebar {
  width: 42px;
  background: #073566;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  font-size: 8px;
}.osac-sidebar b {
  font-size: 7px;
  color: #e5bd58;
  margin-bottom: 5px;
}.osac-sidebar i {
  font-style: normal;
  opacity: 0.95;
}.osac-screen {
  flex: 1;
  padding: 17px 18px 12px;
  background: #fff;
  min-width: 0;
}.osac-screen-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}.osac-screen-head small {
  font-size: 6px;
  letter-spacing: 1.3px;
  color: #8992a0;
}.osac-screen-head h3 {
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
}.osac-screen-head button {
  border: 0;
  background: #073566;
  color: #fff;
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 7px;
}.osac-route-tabs {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 10px 0 11px;
  border-bottom: 1px solid #d8dce1;
  text-transform: uppercase;
  font-size: 6px;
  font-weight: 700;
  color: #60656c;
}.osac-route-tabs span {
  display: flex;
  align-items: center;
  gap: 4px;
}.osac-route-tabs i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #ccd1d6;
}.osac-route-tabs .active i {
  border: 4px solid #13c8ba;
}.osac-filters {
  display: grid;
  grid-template-columns: 0.8fr 1.65fr 0.8fr;
  gap: 12px;
  margin: 12px 0;
}.osac-filters label {
  display: flex;
  flex-direction: column;
  border: 1px solid #d9dde2;
  border-radius: 2px;
  padding: 6px 8px;
}.osac-filters small {
  font-size: 5px;
  color: #5f646c;
  font-weight: 700;
}.osac-filters strong {
  font-size: 7px;
  font-weight: 500;
}.osac-filters button {
  border: 0;
  border-radius: 2px;
  background: #13c8ba;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
}.osac-orders {
  height: 245px;
  display: grid;
  grid-template-columns: 30px 0.9fr 1.08fr 0.9fr 30px;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}.osac-arrow {
  height: 92px;
  border: 1px solid #1285ff;
  border-radius: 7px;
  background: #fff;
  color: #1285ff;
  font-size: 28px;
  cursor: pointer;
  z-index: 4;
  transition: 0.2s;
}.osac-arrow:hover {
  background: #eef7ff;
}.osac-card {
  height: 218px;
  border: 1px solid #d9dce0;
  background: #fff;
  border-radius: 9px;
  padding: 10px 9px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(31, 55, 82, 0.06);
  transition: 0.45s ease;
  overflow: hidden;
}.osac-card.active {
  height: 242px;
  border: 2px solid #666;
  border-radius: 10px;
  transform: scale(1.03);
  z-index: 3;
  box-shadow: 0 14px 28px rgba(18, 42, 68, 0.14);
}.osac-card.side {
  transform: perspective(700px) rotateY(8deg) scale(0.94);
  opacity: 0.84;
}.osac-card.side:nth-of-type(4) {
  transform: perspective(700px) rotateY(-8deg) scale(0.94);
}.osac-client-logo {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #eee7fa;
  display: grid;
  place-items: center;
  margin: 0 auto 3px;
  font-size: 23px;
}.osac-client-logo.gold {
  background: #fff7df;
  color: #d29c24;
}.osac-client-logo.blue {
  background: #41e620;
  color: #fff;
  font-size: 23px;
}.osac-card h4 {
  font-size: 9px;
  font-weight: 500;
  margin-bottom: 9px;
}.osac-card > small,
.osac-card p {
  display: block;
  color: #72777e;
  font-size: 6.5px;
}.osac-card p {
  margin-top: 3px;
}.osac-tags {
  display: flex;
  justify-content: space-between;
  margin: 7px -9px 8px;
}.osac-tags b,
.osac-tags em {
  font-style: normal;
  font-size: 6px;
  padding: 4px 13px;
}.osac-tags b {
  background: #042d52;
  color: #fff;
}.osac-tags em {
  background: #e8ff00;
  color: #111;
  font-weight: 800;
}.osac-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 4px;
}.osac-products span {
  font-size: 17px;
}.osac-products small {
  display: block;
  font-size: 5.5px;
  line-height: 1.15;
  color: #676c72;
}.osac-scale-pop {
  left: -35px;
  bottom: 15px;
}.osac-print-pop {
  right: -25px;
  top: 55px;
  display: flex !important;
  align-items: center;
  gap: 8px;
}.hero-visual:hover .osac-scale-pop {
  transform: translateY(-5px);
}/* =====================================================
   SECCIÓN DE CONTACTO
===================================================== */.contact-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(15, 196, 185, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(10, 130, 170, 0.22),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #061d35 0%,
      #073052 48%,
      #064962 100%
    );
  isolation: isolate;
}.contact-section .container {
  position: relative;
  z-index: 2;
}/* =====================================================
   DECORACIONES
===================================================== */.contact-decoration {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}.contact-decoration-one {
  top: -160px;
  right: -130px;
  width: 420px;
  height: 420px;
  border: 75px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
}.contact-decoration-two {
  bottom: -210px;
  left: -150px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: rgba(14, 193, 182, 0.055);
}/* =====================================================
   ENCABEZADO
===================================================== */.contact-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}.contact-heading .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 8px 13px;
  border: 1px solid rgba(24, 215, 201, 0.25);
  border-radius: 999px;
  color: #4ce1d6;
  background: rgba(17, 197, 185, 0.09);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}.contact-heading h2 {
  max-width: 680px;
  margin: 0 auto 17px;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}.contact-heading p {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(225, 237, 246, 0.72);
  font-size: 17px;
  line-height: 1.75;
}/* =====================================================
   DISTRIBUCIÓN
===================================================== */.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 32px;
  align-items: stretch;
}/* =====================================================
   PANEL DE INFORMACIÓN
===================================================== */.contact-information {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow: 0 32px 70px rgba(0, 17, 34, 0.22);
  backdrop-filter: blur(15px);
}.contact-information::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(15, 199, 187, 0.09);
  pointer-events: none;
}.contact-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 42px;
}.contact-logo-wrapper {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 19, 38, 0.18);
}.contact-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}.contact-brand strong,
.contact-brand span {
  display: block;
}.contact-brand strong {
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 22px;
}.contact-brand span {
  max-width: 270px;
  color: rgba(224, 237, 246, 0.65);
  font-size: 11px;
  line-height: 1.45;
}.contact-information-content {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}.contact-information-content h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 27px;
  line-height: 1.2;
}.contact-information-content p {
  margin: 0;
  color: rgba(226, 238, 246, 0.7);
  font-size: 14px;
  line-height: 1.75;
}/* =====================================================
   BENEFICIOS
===================================================== */.contact-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 15px;
  margin-bottom: 34px;
}.contact-benefit {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}.contact-benefit:hover {
  transform: translateX(5px);
  border-color: rgba(28, 215, 202, 0.2);
  background: rgba(255, 255, 255, 0.075);
}.contact-benefit-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #18cbbd, #078eaa);
  box-shadow: 0 10px 20px rgba(8, 167, 166, 0.19);
}.contact-benefit-icon span {
  font-size: 19px;
  font-weight: 800;
}.contact-benefit strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 14px;
}.contact-benefit p {
  margin: 0;
  color: rgba(225, 237, 246, 0.62);
  font-size: 11px;
  line-height: 1.5;
}/* =====================================================
   CONTACTO DIRECTO
===================================================== */.contact-direct {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
}.contact-direct-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 14px;
  color: inherit;
  background: rgba(3, 24, 44, 0.29);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}.contact-direct-item:hover {
  transform: translateY(-2px);
  background: rgba(3, 24, 44, 0.48);
}.contact-direct-icon {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #ffffff;
  background: rgba(18, 199, 187, 0.15);
  font-size: 15px;
  font-weight: 800;
}.contact-direct-item small,
.contact-direct-item strong {
  display: block;
}.contact-direct-item small {
  margin-bottom: 2px;
  color: rgba(224, 237, 246, 0.54);
  font-size: 9px;
}.contact-direct-item strong {
  color: #ffffff;
  font-size: 13px;
}/* =====================================================
   TARJETA DEL FORMULARIO
===================================================== */.contact-form-card {
  padding: 39px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 28px;
  color: #18354e;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 35px 80px rgba(0, 20, 39, 0.28);
}.contact-form-header {
  margin-bottom: 29px;
}.contact-form-badge {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #079d98;
  background: rgba(11, 186, 176, 0.1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}.contact-form-header h3 {
  margin: 0 0 8px;
  color: #082e52;
  font-size: 29px;
  line-height: 1.2;
}.contact-form-header p {
  margin: 0;
  color: #71808e;
  font-size: 13px;
  line-height: 1.65;
}/* =====================================================
   FORMULARIO
===================================================== */.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}.contact-field {
  min-width: 0;
}.contact-field-full {
  margin-top: 20px;
}.contact-field > label {
  display: block;
  margin: 0 0 8px;
  color: #264058;
  font-size: 11px;
  font-weight: 750;
}.contact-field > label span {
  color: #0db2a8;
}.contact-input-wrapper,
.contact-textarea-wrapper {
  position: relative;
}.contact-input-wrapper {
  display: flex;
  align-items: center;
}.contact-input-wrapper input,
.contact-input-wrapper select,
.contact-textarea-wrapper textarea {
  width: 100%;
  outline: none;
  border: 1px solid #dfe6eb;
  color: #193850;
  background: #f9fbfc;
  font-family: inherit;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}.contact-input-wrapper input,
.contact-input-wrapper select {
  height: 51px;
  padding: 0 42px 0 43px;
  border-radius: 13px;
  font-size: 12px;
}.contact-input-wrapper select {
  appearance: none;
  cursor: pointer;
}.contact-textarea-wrapper textarea {
  min-height: 132px;
  padding: 15px 43px 15px 16px;
  border-radius: 15px;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}.contact-input-wrapper input:focus,
.contact-input-wrapper select:focus,
.contact-textarea-wrapper textarea:focus {
  border-color: #12bfb4;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(18, 191, 180, 0.105);
}.contact-input-wrapper input::placeholder,
.contact-textarea-wrapper textarea::placeholder {
  color: #9ca7b0;
}.contact-input-icon {
  position: absolute;
  z-index: 2;
  left: 14px;
  width: 20px;
  color: #0aa9a3;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}.contact-select-arrow {
  position: absolute;
  right: 15px;
  color: #82909b;
  font-size: 17px;
  pointer-events: none;
}.contact-message-icon {
  position: absolute;
  top: 14px;
  right: 15px;
  color: #0ca9a2;
  font-size: 16px;
}/* =====================================================
   OPCIONES
===================================================== */.contact-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}.contact-option {
  position: relative;
  cursor: pointer;
}.contact-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}.contact-option span {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  padding: 8px 12px;
  border: 1px solid #dfe6eb;
  border-radius: 999px;
  color: #647482;
  background: #f9fbfc;
  font-size: 10px;
  font-weight: 700;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}.contact-option:hover span {
  transform: translateY(-2px);
  border-color: #9edbd7;
  color: #078f8a;
}.contact-option input:checked + span {
  border-color: #11b9af;
  color: #ffffff;
  background: linear-gradient(135deg, #16c7ba, #078daa);
  box-shadow: 0 7px 15px rgba(7, 156, 158, 0.17);
}/* =====================================================
   PRIVACIDAD
===================================================== */.contact-privacy {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin-top: 20px;
  color: #75828d;
  font-size: 10px;
  line-height: 1.55;
  cursor: pointer;
}.contact-privacy input {
  position: absolute;
  opacity: 0;
}.contact-custom-checkbox {
  position: relative;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid #ccd5db;
  border-radius: 6px;
  background: #ffffff;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}.contact-privacy input:checked + .contact-custom-checkbox {
  border-color: #10b7ae;
  background: #10b7ae;
}.contact-privacy input:checked + .contact-custom-checkbox::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}/* =====================================================
   BOTÓN
===================================================== */.contact-submit {
  width: 100%;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 23px;
  padding: 13px 20px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #12c6b9, #078dab);
  box-shadow: 0 14px 28px rgba(7, 158, 164, 0.23);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}.contact-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 19px 33px rgba(7, 158, 164, 0.3);
}.contact-submit:active {
  transform: translateY(0);
}.contact-submit-arrow {
  font-size: 20px;
  transition: transform 0.25s ease;
}.contact-submit:hover .contact-submit-arrow {
  transform: translateX(5px);
}.contact-form-note {
  margin: 11px 0 0;
  color: #9ba5ad;
  font-size: 9px;
  text-align: center;
}/* =====================================================
   RESPONSIVE
===================================================== */@media (max-width: 1024px) {.contact-layout {
    grid-template-columns: 1fr;
  }.contact-information {
    max-width: 760px;
    margin: 0 auto;
  }.contact-form-card {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
  }}@media (max-width: 700px) {.contact-section {
    padding: 80px 0;
  }.contact-heading {
    margin-bottom: 38px;
  }.contact-heading h2 {
    font-size: 36px;
  }.contact-heading p {
    font-size: 15px;
  }.contact-information,
  .contact-form-card {
    padding: 27px 21px;
    border-radius: 22px;
  }.contact-form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }.contact-brand {
    align-items: flex-start;
  }.contact-logo-wrapper {
    flex-basis: 53px;
    width: 53px;
    height: 53px;
  }}@media (max-width: 420px) {.contact-heading h2 {
    font-size: 31px;
  }.contact-options {
    gap: 7px;
  }.contact-option span {
    padding: 7px 10px;
    font-size: 9px;
  }}/* =====================================================
   SECCIÓN DE IMPLEMENTACIÓN
===================================================== */.implementation-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(15, 194, 183, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(7, 78, 111, 0.08),
      transparent 30%
    ),
    #f7fafc;
  isolation: isolate;
}.implementation-section .container {
  position: relative;
  z-index: 2;
}/* =====================================================
   DECORACIONES
===================================================== */.implementation-decoration {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}.implementation-decoration-one {
  top: -160px;
  right: -150px;
  width: 420px;
  height: 420px;
  border: 70px solid rgba(7, 46, 82, 0.025);
}.implementation-decoration-two {
  bottom: -190px;
  left: -160px;
  width: 440px;
  height: 440px;
  background: rgba(16, 190, 179, 0.035);
}/* =====================================================
   ENCABEZADO
===================================================== */.implementation-heading {
  max-width: 790px;
  margin: 0 auto 70px;
  text-align: center;
}.implementation-heading .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 8px 13px;
  border: 1px solid rgba(14, 183, 174, 0.19);
  border-radius: 999px;
  color: #099d98;
  background: rgba(13, 186, 177, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}.implementation-heading h2 {
  max-width: 740px;
  margin: 0 auto 18px;
  color: #082e52;
  font-size: clamp(34px, 4vw, 53px);
  line-height: 1.08;
  letter-spacing: -0.038em;
}.implementation-heading p {
  max-width: 700px;
  margin: 0 auto;
  color: #71808d;
  font-size: 16px;
  line-height: 1.75;
}/* =====================================================
   LÍNEA DEL PROCESO
===================================================== */.implementation-timeline {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}.implementation-timeline::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 42px;
  width: 2px;
  background:
    linear-gradient(
      180deg,
      rgba(16, 193, 182, 0.15),
      #11bcb2 18%,
      #0c7fa0 82%,
      rgba(7, 69, 101, 0.12)
    );
}/* =====================================================
   PASO
===================================================== */.implementation-step {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 25px;
  margin-bottom: 27px;
}.implementation-step:last-child {
  margin-bottom: 0;
}.implementation-step-number {
  position: relative;
  z-index: 3;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 8px solid #f7fafc;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #13c8bb,
      #078ca9
    );
  box-shadow: 0 16px 30px rgba(7, 142, 158, 0.2);
}.implementation-step-number span {
  color: #ffffff;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0.04em;
}.implementation-step-content {
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr);
  gap: 21px;
  align-items: start;
  padding: 31px;
  border: 1px solid #e3e9ee;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 45px rgba(12, 47, 75, 0.075);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}.implementation-step:hover .implementation-step-content {
  transform: translateY(-5px);
  border-color: rgba(13, 186, 176, 0.26);
  box-shadow:
    0 25px 55px rgba(12, 47, 75, 0.115);
}.implementation-step-icon {
  width: 67px;
  height: 67px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #082e55,
      #08647b
    );
  box-shadow: 0 13px 25px rgba(5, 52, 83, 0.16);
}.implementation-step-icon span {
  font-size: 25px;
  font-weight: 800;
}.implementation-step-label {
  display: block;
  margin-bottom: 7px;
  color: #08a39d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}.implementation-step-text h3 {
  margin: 0 0 11px;
  color: #0b304f;
  font-size: 25px;
  line-height: 1.2;
}.implementation-step-text p {
  margin: 0;
  color: #6f7d89;
  font-size: 14px;
  line-height: 1.75;
}/* =====================================================
   ETIQUETAS
===================================================== */.implementation-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 19px;
}.implementation-highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #dfe8ec;
  border-radius: 999px;
  color: #506575;
  background: #f7fafb;
  font-size: 9px;
  font-weight: 750;
}.implementation-highlights span::before {
  content: "✓";
  margin-right: 6px;
  color: #0db0a7;
  font-weight: 900;
}/* =====================================================
   RESUMEN FINAL
===================================================== */.implementation-summary {
  max-width: 1060px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 19px;
  align-items: center;
  margin: 42px auto 0;
  padding: 24px 25px;
  border: 1px solid rgba(14, 191, 180, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(8, 46, 84, 0.98),
      rgba(6, 79, 101, 0.98)
    );
  box-shadow: 0 24px 50px rgba(5, 40, 67, 0.17);
}.implementation-summary-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #ffffff;
}.implementation-summary-icon span {
  color: #083457;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}.implementation-summary-text strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 16px;
}.implementation-summary-text p {
  margin: 0;
  color: rgba(231, 241, 247, 0.68);
  font-size: 12px;
  line-height: 1.6;
}.implementation-summary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 17px;
  border-radius: 12px;
  color: #073552;
  background: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}.implementation-summary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 17, 33, 0.18);
}.implementation-summary-button span {
  font-size: 18px;
  transition: transform 0.25s ease;
}.implementation-summary-button:hover span {
  transform: translateX(4px);
}/* =====================================================
   RESPONSIVE
===================================================== */@media (max-width: 900px) {.implementation-timeline::before {
    left: 35px;
  }.implementation-step {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 17px;
  }.implementation-step-number {
    width: 70px;
    height: 70px;
    border-width: 7px;
  }.implementation-step-content {
    grid-template-columns: 57px minmax(0, 1fr);
    gap: 17px;
    padding: 26px;
  }.implementation-step-icon {
    width: 57px;
    height: 57px;
    border-radius: 16px;
  }.implementation-summary {
    grid-template-columns: 56px minmax(0, 1fr);
  }.implementation-summary-icon {
    width: 56px;
    height: 56px;
  }.implementation-summary-button {
    grid-column: 1 / -1;
    width: 100%;
  }}@media (max-width: 650px) {.implementation-section {
    padding: 80px 0;
  }.implementation-heading {
    margin-bottom: 47px;
  }.implementation-heading h2 {
    font-size: 35px;
  }.implementation-heading p {
    font-size: 14px;
  }.implementation-timeline::before {
    left: 23px;
  }.implementation-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 20px;
  }.implementation-step-number {
    width: 48px;
    height: 48px;
    border-width: 5px;
  }.implementation-step-number span {
    font-size: 12px;
  }.implementation-step-content {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 22px 18px;
    border-radius: 19px;
  }.implementation-step-icon {
    width: 52px;
    height: 52px;
  }.implementation-step-text h3 {
    font-size: 21px;
  }.implementation-step-text p {
    font-size: 13px;
  }.implementation-summary {
    grid-template-columns: 1fr;
    padding: 22px;
    text-align: center;
  }.implementation-summary-icon {
    margin: 0 auto;
  }}@media (max-width: 420px) {.implementation-heading h2 {
    font-size: 30px;
  }.implementation-step-text h3 {
    font-size: 19px;
  }.implementation-highlights {
    display: grid;
  }.implementation-highlights span {
    width: 100%;
  }}/* =====================================================
   PROBLEMAS QUE RESUELVE OSAC
===================================================== */.business-problems {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 7% 12%,
      rgba(16, 193, 182, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 93% 88%,
      rgba(7, 69, 104, 0.07),
      transparent 30%
    ),
    #f7fafc;
  isolation: isolate;
}.business-problems .container {
  position: relative;
  z-index: 2;
}/* =====================================================
   DECORACIONES
===================================================== */.business-problems-decoration {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}.problems-decoration-one {
  top: -175px;
  right: -145px;
  width: 430px;
  height: 430px;
  border: 72px solid rgba(7, 46, 82, 0.025);
}.problems-decoration-two {
  bottom: -210px;
  left: -170px;
  width: 480px;
  height: 480px;
  background: rgba(15, 192, 181, 0.035);
}/* =====================================================
   ENCABEZADO
===================================================== */.business-problems-heading {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}.business-problems-heading .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 8px 14px;
  border: 1px solid rgba(12, 179, 170, 0.2);
  border-radius: 999px;
  color: #079f99;
  background: rgba(12, 186, 176, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}.business-problems-heading h2 {
  max-width: 770px;
  margin: 0 auto 18px;
  color: #082e52;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.038em;
}.business-problems-heading p {
  max-width: 710px;
  margin: 0 auto;
  color: #71808d;
  font-size: 16px;
  line-height: 1.75;
}/* =====================================================
   CUADRÍCULA
===================================================== */.business-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
}/* =====================================================
   TARJETA
===================================================== */.business-problem-card {
  position: relative;
  overflow: hidden;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  padding: 27px;
  border: 1px solid #e1e8ed;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 17px 42px rgba(10, 46, 75, 0.065);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}.business-problem-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #13c7ba,
    #078ea9
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}.business-problem-card::after {
  content: "";
  position: absolute;
  top: -75px;
  right: -75px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(13, 184, 175, 0.045);
  transition: transform 0.4s ease;
}.business-problem-card:hover {
  transform: translateY(-7px);
  border-color: rgba(12, 180, 172, 0.28);
  box-shadow: 0 26px 56px rgba(10, 46, 75, 0.11);
}.business-problem-card:hover::before {
  transform: scaleX(1);
}.business-problem-card:hover::after {
  transform: scale(1.18);
}/* =====================================================
   CABECERA DE TARJETA
===================================================== */.business-problem-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 23px;
}.business-problem-icon {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #082f56,
    #07647b
  );
  box-shadow: 0 12px 23px rgba(6, 50, 81, 0.16);
}.business-problem-icon span {
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
}.business-problem-number {
  color: #dce5ea;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}/* =====================================================
   CONTENIDO DE TARJETA
===================================================== */.business-problem-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  color: #0a304f;
  font-size: 20px;
  line-height: 1.3;
}.business-problem-card > p {
  position: relative;
  z-index: 2;
  margin: 0 0 22px;
  color: #71808c;
  font-size: 13px;
  line-height: 1.7;
}/* =====================================================
   CONSECUENCIA
===================================================== */.business-problem-consequence {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(230, 152, 50, 0.15);
  border-radius: 12px;
  color: #805f32;
  background: rgba(246, 175, 75, 0.075);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}.business-problem-consequence > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: #eaa449;
  font-size: 13px;
  font-weight: 900;
}/* =====================================================
   SOLUCIÓN FINAL
===================================================== */.business-problems-solution {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 21px;
  align-items: center;
  margin-top: 37px;
  padding: 27px;
  border: 1px solid rgba(22, 213, 200, 0.17);
  border-radius: 23px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(26, 214, 201, 0.15),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #062b4d,
      #07526b
    );
  box-shadow: 0 25px 55px rgba(5, 43, 72, 0.17);
}.business-solution-logo {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 19px;
  background: #ffffff;
  box-shadow: 0 12px 25px rgba(0, 20, 38, 0.18);
}.business-solution-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}.business-solution-content > span {
  display: block;
  margin-bottom: 6px;
  color: #3edbd0;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.13em;
}.business-solution-content h3 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.25;
}.business-solution-content p {
  max-width: 700px;
  margin: 0;
  color: rgba(228, 240, 247, 0.68);
  font-size: 12px;
  line-height: 1.65;
}/* =====================================================
   BOTÓN
===================================================== */.business-solution-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 47px;
  padding: 12px 18px;
  border-radius: 12px;
  color: #073452;
  background: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}.business-solution-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 26px rgba(0, 19, 36, 0.2);
}.business-solution-button > span {
  font-size: 18px;
  transition: transform 0.25s ease;
}.business-solution-button:hover > span {
  transform: translateX(4px);
}/* =====================================================
   RESPONSIVE
===================================================== */@media (max-width: 1050px) {.business-problems-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.business-problems-solution {
    grid-template-columns: 65px minmax(0, 1fr);
  }.business-solution-button {
    grid-column: 1 / -1;
    width: 100%;
  }}@media (max-width: 680px) {.business-problems {
    padding: 80px 0;
  }.business-problems-heading {
    margin-bottom: 42px;
  }.business-problems-heading h2 {
    font-size: 34px;
  }.business-problems-heading p {
    font-size: 14px;
  }.business-problems-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }.business-problem-card {
    min-height: auto;
    padding: 23px 20px;
  }.business-problems-solution {
    grid-template-columns: 1fr;
    padding: 23px 20px;
    text-align: center;
  }.business-solution-logo {
    margin: 0 auto;
  }}@media (max-width: 420px) {.business-problems-heading h2 {
    font-size: 29px;
  }.business-problem-card h3 {
    font-size: 18px;
  }.business-problem-consequence {
    font-size: 9px;
  }}/* =====================================================
   CONTENEDOR DINÁMICO DE MOCKUPS
===================================================== */.tab-visual-container {
  position: relative;
  min-width: 0;
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}.tab-visual-container.changing {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
}.tab-visual-container.entered {
  animation: tabMockupEnter 0.45s ease both;
}.tab-mockup {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  isolation: isolate;
}.tab-mockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(16, 192, 181, 0.16),
    rgba(16, 192, 181, 0.05) 46%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
}@keyframes tabMockupEnter {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}/* =====================================================
   VENTANA GENERAL OSAC
===================================================== *//* =====================================================
   INFORMACIÓN FLOTANTE
===================================================== */@keyframes moduleFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}/* =====================================================
   TABLAS GENERALES
===================================================== *//* =====================================================
   MOCKUPS BASADOS EN PANTALLAS REALES DE OSAC
===================================================== */.real-osac-window {
  position: relative;
  width: min(100%, 710px);
  overflow: hidden;
  border: 1px solid rgba(7, 46, 82, 0.12);
  border-radius: 23px;
  background: #fff;
  box-shadow:
    0 30px 70px rgba(6, 42, 69, 0.16),
    0 0 0 7px rgba(255, 255, 255, 0.45);
}.real-window-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 17px;
  color: #fff;
  background: linear-gradient(135deg, #073258, #075873);
}.real-window-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}.real-window-brand img {
  width: 39px;
  height: 39px;
  padding: 4px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}.real-window-brand strong,
.real-window-brand small {
  display: block;
}.real-window-brand strong {
  font-size: 12px;
}.real-window-brand small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 7px;
}.real-window-user {
  color: rgba(255, 255, 255, 0.78);
  font-size: 8px;
}.real-window-body {
  position: relative;
  padding: 17px;
  background: #fafafa;
}.mockup-breadcrumb {
  margin: -17px -17px 17px;
  padding: 10px 17px;
  color: #7e8991;
  background: #f0f1f2;
  font-size: 7px;
  text-transform: uppercase;
}.mockup-breadcrumb span {
  margin: 0 7px;
}.mockup-breadcrumb strong {
  color: #078fb1;
}/* Mensajes flotantes */.real-floating-message {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 230px;
  padding: 11px 13px;
  border: 1px solid rgba(6, 43, 72, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 35px rgba(5, 37, 65, 0.17);
  animation: realMockupFloat 4s ease-in-out infinite;
}.real-floating-message > span {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #14c7ba, #078da8);
  font-size: 15px;
  font-weight: 900;
}.real-floating-message strong,
.real-floating-message small {
  display: block;
}.real-floating-message strong {
  color: #082f52;
  font-size: 9px;
}.real-floating-message small {
  margin-top: 2px;
  color: #7b8790;
  font-size: 7px;
  line-height: 1.4;
}@keyframes realMockupFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}/* =====================================================
   PEDIDOS
===================================================== */.orders-desktop-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}.orders-desktop-heading > div:first-child span {
  color: #0aa49d;
  font-size: 7px;
  font-weight: 800;
}.orders-desktop-heading h4 {
  margin: 3px 0 0;
  color: #263b4c;
  font-size: 20px;
  font-weight: 500;
}.orders-desktop-actions {
  display: flex;
  gap: 7px;
}.orders-desktop-actions button {
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 7px;
}.orders-desktop-actions .navy {
  background: #06335e;
}.orders-desktop-actions .danger {
  background: #f0524e;
}.orders-form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  max-width: 58%;
  margin-bottom: 15px;
}.orders-form-fields label {
  position: relative;
  display: block;
  padding: 9px 11px;
  border: 1px solid #d9dde0;
  border-radius: 3px;
  background: #fff;
}.orders-form-fields small,
.orders-form-fields strong {
  display: block;
}.orders-form-fields small {
  margin-bottom: 3px;
  color: #747e86;
  font-size: 6px;
  font-weight: 800;
}.orders-form-fields strong,
.field-placeholder {
  color: #4d575f;
  font-size: 8px;
  font-weight: 500;
}.orders-form-fields label > span:last-child {
  position: absolute;
  right: 10px;
  bottom: 9px;
}.desktop-orders-table {
  overflow: hidden;
  border-top: 1px solid #e4e7e9;
}.desktop-orders-head,
.desktop-orders-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.65fr 0.65fr 35px;
  gap: 9px;
  align-items: center;
}.desktop-orders-head {
  padding: 10px;
  color: #656e75;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}.desktop-orders-row {
  min-height: 82px;
  padding: 11px 10px;
  border-top: 1px solid #ebedef;
  color: #68747c;
  font-size: 8px;
}.desktop-order-product {
  display: flex;
  align-items: center;
  gap: 9px;
}.desktop-order-product img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}.desktop-order-product strong,
.desktop-order-product small {
  display: block;
}.desktop-order-product strong {
  color: #4b565e;
  font-size: 8px;
}.desktop-order-product small {
  margin-top: 2px;
  color: #90999f;
  font-size: 6px;
}.desktop-quantity {
  text-align: center;
}.desktop-quantity strong {
  display: block;
  padding: 6px;
  border: 1px solid #9ca3a7;
  color: #444d53;
  background: #fff;
  font-size: 18px;
  font-weight: 400;
}.desktop-quantity small {
  display: block;
  margin-top: 4px;
  font-size: 7px;
}.desktop-orders-row > button {
  width: 27px;
  height: 27px;
  border: 1px solid #eceeef;
  border-radius: 4px;
  color: #666;
  background: #fff;
}.orders-flow-message {
  right: 10px;
  bottom: 13px;
}/* =====================================================
   INVENTARIO
===================================================== */.inventory-capture-heading {
  margin-bottom: 13px;
}.inventory-capture-heading > span {
  color: #0aa39c;
  font-size: 7px;
  font-weight: 800;
}.inventory-capture-heading h4 {
  margin: 3px 0 5px;
  color: #3e474d;
  font-size: 20px;
  font-weight: 500;
}.inventory-capture-heading small {
  color: #737e86;
  font-size: 7px;
}.inventory-capture-fields {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.55fr auto;
  gap: 7px;
  align-items: end;
}.inventory-capture-fields label {
  position: relative;
  padding: 9px 10px;
  border: 1px solid #d7dcdf;
  background: #fff;
}.inventory-capture-fields small,
.inventory-capture-fields strong {
  display: block;
}.inventory-capture-fields small {
  color: #757f86;
  font-size: 6px;
  font-weight: 800;
}.inventory-capture-fields strong {
  margin-top: 3px;
  color: #515b62;
  font-size: 8px;
}.inventory-capture-fields label > span {
  position: absolute;
  right: 8px;
  bottom: 9px;
}.inventory-capture-fields button {
  height: 35px;
  padding: 0 13px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #3aa6e8;
  font-size: 8px;
}.inventory-product-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid #d7dcdf;
  border-radius: 5px;
  background: #fff;
}.inventory-product-photo {
  text-align: center;
}.inventory-product-photo img {
  width: 94px;
  height: 80px;
  object-fit: contain;
}.inventory-product-photo strong {
  display: block;
  color: #626b71;
  font-size: 8px;
  text-transform: uppercase;
}.inventory-current-data p,
.inventory-current-data span {
  display: block;
  margin: 0 0 7px;
  color: #66717a;
  font-size: 8px;
}.inventory-weight-area {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px;
  align-items: center;
  padding: 17px 25px;
}.inventory-big-weight {
  text-align: center;
}.inventory-big-weight small {
  color: #78828a;
  font-size: 8px;
}.inventory-big-weight > strong {
  display: block;
  margin: 6px 0;
  color: #525b61;
  font-size: 39px;
  font-weight: 400;
}.inventory-big-weight strong span {
  font-size: 9px;
}.inventory-big-weight p {
  color: #7b858c;
  font-size: 7px;
}.inventory-packaging {
  display: grid;
  gap: 6px;
}.inventory-packaging label {
  padding: 7px;
  border: 1px solid #d8dde0;
  text-align: center;
  background: #fff;
}.inventory-packaging small,
.inventory-packaging strong {
  display: block;
  color: #606a71;
  font-size: 7px;
}.inventory-box-weights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid #3fa5e8;
}.inventory-box-weights span,
.inventory-box-weights strong {
  padding: 7px;
  color: #fff;
  background: #3fa5e8;
  font-size: 7px;
  text-align: center;
}.inventory-box-weights strong {
  color: #444;
  background: #fff;
}.inventory-save-button {
  display: block;
  margin: 0 auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #06345e;
  font-size: 8px;
}.inventory-live-message {
  right: 12px;
  bottom: 12px;
}/* =====================================================
   FACTURACIÓN
===================================================== */.billing-description {
  margin-bottom: 12px;
  color: #68747c;
  font-size: 8px;
}.billing-filters {
  display: grid;
  grid-template-columns: 0.55fr 0.85fr 0.85fr 1.15fr;
  gap: 9px;
  margin-bottom: 14px;
}.billing-filters label {
  position: relative;
  padding: 9px 10px;
  border: 1px solid #d9dee1;
  background: #fff;
}.billing-filters small,
.billing-filters strong {
  display: block;
}.billing-filters small {
  margin-bottom: 3px;
  color: #747e86;
  font-size: 6px;
  font-weight: 800;
}.billing-filters strong,
.billing-filters > label > span {
  color: #59646c;
  font-size: 8px;
}.billing-filters label > span:last-child:not(:first-child) {
  position: absolute;
  right: 9px;
  bottom: 9px;
}.billing-search {
  padding-right: 37px !important;
}.billing-search button {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 37px;
  border: 0;
  color: #fff;
  background: #06345e;
}.billing-table-head,
.billing-table-row {
  display: grid;
  grid-template-columns: 0.55fr 0.95fr 0.7fr 1.15fr 0.7fr 0.75fr;
  gap: 9px;
  align-items: center;
}.billing-table-head {
  padding: 10px;
  color: #68737b;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}.billing-table-row {
  min-height: 49px;
  padding: 10px;
  border-top: 1px solid #e8ebed;
  color: #68737b;
  background: #fff;
  font-size: 8px;
}.billing-table-row em {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 6px;
  font-style: normal;
}.billing-paid {
  color: #078e87;
  background: rgba(13, 183, 173, 0.1);
}.billing-route {
  color: #2675a0;
  background: rgba(54, 145, 198, 0.1);
}.billing-delivered {
  color: #93732c;
  background: rgba(221, 171, 68, 0.12);
}.billing-table-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
}.billing-message {
  right: 8px;
  bottom: 10px;
}/* =====================================================
   PUNTO DE VENTA
===================================================== */.real-pos-background {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  min-height: 420px;
  background: #f7f7f7;
}.real-pos-catalog {
  padding: 13px;
}.real-pos-selectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}.real-pos-selectors label {
  padding: 8px;
  border: 1px solid #d7dcdf;
  background: #fff;
}.real-pos-selectors small,
.real-pos-selectors strong {
  display: block;
}.real-pos-selectors small {
  color: #737d85;
  font-size: 6px;
}.real-pos-selectors strong {
  margin-top: 3px;
  color: #505a61;
  font-size: 7px;
}.real-pos-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 7px;
  border-top: 1px solid #777;
  border-left: 1px solid #777;
}.real-pos-products article {
  min-height: 95px;
  display: grid;
  place-content: center;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  text-align: center;
}.real-pos-products article > span {
  font-size: 31px;
}.real-pos-products strong,
.real-pos-products small {
  display: block;
}.real-pos-products strong {
  color: #606970;
  font-size: 7px;
  text-transform: uppercase;
}.real-pos-products small {
  margin-top: 3px;
  color: #8a9399;
  font-size: 6px;
}.real-pos-cart {
  padding: 13px;
  background: #fff;
}.real-pos-cart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}.real-pos-cart-actions button,
.real-pos-cart-actions span {
  padding: 7px 9px;
  border-radius: 3px;
  color: #fff;
  font-size: 7px;
}.real-pos-cart-actions button {
  border: 0;
  background: #bc4640;
}.real-pos-cart-actions span {
  background: #06345e;
}.real-pos-cart h4 {
  margin: 17px 0;
  color: #4b555c;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}.real-pos-cart-row {
  display: grid;
  grid-template-columns: 1fr 35px 55px;
  gap: 7px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #e5e8ea;
  color: #555f66;
  font-size: 7px;
}.real-pos-cart-row strong {
  padding: 5px;
  border: 1px solid #777;
  text-align: center;
}.real-pos-cart-total {
  margin-top: 17px;
  color: #3e474d;
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}.real-pos-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.43);
}.real-pos-modal {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 58%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.27);
  transform: translate(-50%, -50%);
}.real-pos-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px;
  border-bottom: 1px solid #e5e8ea;
}.real-pos-modal-product {
  display: flex;
  align-items: center;
  gap: 9px;
}.real-pos-modal-product > span {
  font-size: 30px;
}.real-pos-modal-product strong,
.real-pos-modal-product small {
  display: block;
}.real-pos-modal-product strong {
  color: #333d44;
  font-size: 11px;
  text-transform: uppercase;
}.real-pos-modal-product small {
  color: #7b858c;
  font-size: 7px;
}.real-pos-modal-header > button {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #ee4848;
  font-size: 15px;
}.real-pos-modal-body {
  display: grid;
  grid-template-columns: 1fr 125px;
  gap: 15px;
  padding: 14px;
}.real-pos-amount {
  text-align: center;
}.real-pos-amount small,
.real-pos-amount span {
  display: block;
  color: #68727a;
  font-size: 7px;
  font-weight: 800;
}.real-pos-amount strong {
  display: block;
  margin: 7px 0;
  padding: 15px;
  border: 3px solid #07375e;
  border-radius: 10px;
  color: #555;
  font-size: 26px;
  font-weight: 400;
}.real-pos-add {
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #2c65ed;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}.real-pos-add span {
  display: block;
  font-size: 23px;
}.pos-real-message {
  left: 11px;
  bottom: 11px;
}/* =====================================================
   EMPLEADOS
===================================================== */.employee-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 13px;
}.employee-fields label {
  padding: 9px;
  border: 1px solid #d8dde0;
  background: #fff;
}.employee-fields small,
.employee-fields strong {
  display: block;
}.employee-fields small {
  color: #7a848b;
  font-size: 6px;
}.employee-fields strong {
  margin-top: 4px;
  color: #656f76;
  font-size: 8px;
  font-weight: 500;
}.employee-special-permissions h4,
.employee-modules-heading {
  margin: 10px 0 7px;
  color: #4c565d;
  font-size: 11px;
  font-weight: 500;
}.employee-special-permissions label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #69747c;
  font-size: 7px;
}.permission-check,
.employee-permissions-grid h5 span,
.employee-permissions-grid p i {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  color: #fff;
  background: #10c6b8;
  font-size: 8px;
  font-style: normal;
}.employee-permissions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}.employee-permissions-grid article {
  min-width: 0;
}.employee-permissions-grid h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  color: #4f5a61;
  font-size: 8px;
}.employee-permissions-grid h5 span {
  background: #44505a;
}.employee-permissions-grid p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  color: #69747b;
  font-size: 7px;
}.employees-real-message {
  right: 10px;
  bottom: 10px;
}/* =====================================================
   RESPONSIVE
===================================================== */@media (max-width: 760px) {.real-osac-window {
    width: 100%;
  }.desktop-orders-head,
  .desktop-orders-row {
    grid-template-columns: 1.4fr 0.8fr 0.6fr;
  }.desktop-orders-head span:nth-child(4),
  .desktop-orders-head span:nth-child(5),
  .desktop-orders-row > strong,
  .desktop-orders-row > button {
    display: none;
  }.orders-form-fields {
    max-width: 100%;
  }.inventory-capture-fields,
  .billing-filters,
  .employee-fields {
    grid-template-columns: 1fr 1fr;
  }.inventory-weight-area {
    grid-template-columns: 1fr;
  }.billing-table-head,
  .billing-table-row {
    grid-template-columns: 0.5fr 1fr 0.7fr 0.7fr;
  }.billing-table-head span:nth-child(4),
  .billing-table-row > span:nth-child(4),
  .billing-table-head span:nth-child(6),
  .billing-table-row label {
    display: none;
  }.real-pos-background {
    grid-template-columns: 1fr;
  }.real-pos-cart {
    display: none;
  }.real-pos-modal {
    width: 82%;
  }.employee-permissions-grid {
    grid-template-columns: repeat(2, 1fr);
  }.real-floating-message {
    display: none;
  }}@media (max-width: 1100px) {.osac-system {
    width: 100%;
    margin-left: 0;
  }.osac-workspace {
    height: 370px;
  }.osac-orders {
    grid-template-columns: 27px 0.85fr 1.05fr 0.85fr 27px;
  }.osac-card h4 {
    font-size: 8px;
  }}@media (max-width: 720px) {.osac-system {
    transform: none;
  }.osac-workspace {
    height: 330px;
  }.osac-sidebar {
    width: 30px;
    gap: 12px;
  }.osac-screen {
    padding: 12px 9px;
  }.osac-screen-head h3 {
    font-size: 13px;
  }.osac-route-tabs {
    gap: 9px;
  }.osac-filters {
    grid-template-columns: 1fr 1fr;
  }.osac-filters button {
    grid-column: 1/-1;
    padding: 6px;
  }.osac-orders {
    height: 190px;
    grid-template-columns: 22px 1fr 22px;
  }.osac-card {
    display: none;
  }.osac-card.active {
    display: block;
    height: 184px;
    transform: none;
  }.osac-arrow {
    height: 70px;
    font-size: 22px;
  }.osac-products {
    grid-template-columns: repeat(4, 1fr);
  }.osac-products span {
    font-size: 13px;
  }.osac-client-logo {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }.osac-card h4 {
    margin-bottom: 4px;
  }.osac-tags {
    margin-top: 4px;
  }.osac-scale-pop,
  .osac-print-pop {
    display: none !important;
  }}/* OSAC branding and handmade product screens */.brand-logo img {
  width: 150px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}.site-header .brand-logo img {
  width: 128px;
}.osac-symbol-logo {
  border: 0 !important;
  width: 60px !important;
  height: 31px !important;
  left: 9px !important;
  top: 3px !important;
}.osac-symbol-logo img {
  width: 56px;
  height: 28px;
  object-fit: contain;
}.osac-topbar {
  padding-left: 72px !important;
}.sidebar-logo {
  width: 31px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 3px;
}.osac-benefit-row {
  gap: 22px;
  flex-wrap: wrap;
}.osac-benefit-row strong,
.osac-benefit-row span {
  font-size: 13px;
  color: #526073;
}.live-weight,
.scale-number {
  animation: weightPulse 2s ease-in-out infinite;
}@keyframes weightPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}@media (max-width: 720px) {.brand-logo img {
    width: 112px;
  }}/* =====================================================
   MOCKUP DE COMPRAS
===================================================== */.purchase-real-mockup {
  width: min(100%, 735px);
}/* Encabezado interior */.purchase-real-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}.purchase-real-heading > div:first-child > span {
  display: block;
  color: #0aa49d;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.1em;
}.purchase-real-heading h4 {
  margin: 3px 0 4px;
  color: #34434e;
  font-size: 20px;
  font-weight: 500;
}.purchase-real-heading > div:first-child small {
  color: #7b868e;
  font-size: 7px;
}/* Báscula */.purchase-scale-status {
  min-width: 177px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #073258,
      #076177
    );
  box-shadow: 0 11px 22px rgba(6, 55, 86, 0.14);
}.purchase-scale-status > span {
  font-size: 24px;
}.purchase-scale-status small,
.purchase-scale-status strong {
  display: block;
}.purchase-scale-status small {
  color: rgba(255, 255, 255, 0.63);
  font-size: 6px;
  font-weight: 800;
}.purchase-scale-status strong {
  margin-top: 2px;
  font-size: 18px;
}.purchase-scale-status strong em {
  font-style: normal;
}.purchase-scale-status strong span {
  font-size: 8px;
}/* Campos */.purchase-real-fields {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 9px;
  margin-bottom: 9px;
}.purchase-real-fields label {
  position: relative;
  min-height: 47px;
  display: block;
  padding: 9px 35px 9px 11px;
  border: 1px solid #d7dde1;
  border-radius: 4px;
  background: #ffffff;
}.purchase-real-fields small,
.purchase-real-fields strong {
  display: block;
}.purchase-real-fields small {
  margin-bottom: 4px;
  color: #737f87;
  font-size: 6px;
  font-weight: 850;
}.purchase-real-fields strong {
  overflow: hidden;
  color: #4c5962;
  font-size: 8px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}.purchase-real-fields label > span {
  position: absolute;
  right: 11px;
  bottom: 13px;
  color: #707b82;
  font-size: 10px;
}/* Aviso */.purchase-tax-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 172, 65, 0.18);
  border-radius: 7px;
  background: rgba(248, 218, 132, 0.24);
}.purchase-tax-notice > span {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: #d5a335;
  font-size: 12px;
  font-weight: 900;
}.purchase-tax-notice strong,
.purchase-tax-notice small {
  display: block;
}.purchase-tax-notice strong {
  margin-bottom: 2px;
  color: #8b6b21;
  font-size: 8px;
  text-transform: uppercase;
}.purchase-tax-notice small {
  color: #9a7a32;
  font-size: 7px;
  line-height: 1.45;
}/* Acciones */.purchase-real-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}.purchase-real-actions button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 7px;
  font-weight: 750;
  cursor: pointer;
}.purchase-add-product {
  border: 0;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #13c3b7,
      #08a7a4
    );
}.purchase-clear {
  border: 1px solid #dfe4e7;
  color: #68747c;
  background: #ffffff;
}.purchase-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #e04747;
  font-size: 7px;
  font-weight: 700;
}.purchase-live-indicator > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e84a4a;
  box-shadow: 0 0 0 4px rgba(232, 74, 74, 0.11);
  animation: purchasePulse 1.4s ease-in-out infinite;
}.purchase-live-indicator strong {
  font-size: 8px;
}@keyframes purchasePulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}/* Campo de factura */.purchase-invoice-field {
  display: block;
  margin-bottom: 12px;
  padding: 8px 11px;
  border: 1px solid #d8dde0;
  border-radius: 4px;
  background: #ffffff;
}.purchase-invoice-field small,
.purchase-invoice-field span {
  display: block;
}.purchase-invoice-field small {
  margin-bottom: 3px;
  color: #737f87;
  font-size: 6px;
  font-weight: 850;
}.purchase-invoice-field span {
  color: #a0a8ae;
  font-size: 7px;
}/* Tabla */.purchase-real-table {
  overflow: hidden;
  border: 1px solid #e0e5e8;
  border-radius: 8px;
  background: #ffffff;
}.purchase-real-table-head,
.purchase-real-row {
  display: grid;
  grid-template-columns:
    36px
    minmax(125px, 1.45fr)
    0.6fr
    0.85fr
    0.55fr
    0.65fr
    0.8fr
    0.65fr;
  gap: 7px;
  align-items: center;
}.purchase-real-table-head {
  min-height: 39px;
  padding: 8px 9px;
  color: #6f7a82;
  background: #f1f3f5;
  font-size: 6px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}.purchase-real-row {
  position: relative;
  min-height: 67px;
  padding: 9px;
  border-top: 1px solid #e9ecee;
  color: #67737b;
  font-size: 7px;
}.purchase-real-row.active {
  border-top-color: #f05b5b;
  border-bottom: 1px solid #f05b5b;
  background: rgba(240, 91, 91, 0.025);
}.purchase-id {
  color: #e64646;
  font-size: 11px;
  text-align: center;
}.purchase-real-product {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}.purchase-real-product > span {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #f5f7f8;
  font-size: 20px;
}.purchase-real-product strong,
.purchase-real-product small {
  display: block;
}.purchase-real-product strong {
  overflow: hidden;
  color: #4d5961;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}.purchase-real-product small {
  margin-top: 3px;
  color: #929ba1;
  font-size: 6px;
}.purchase-real-row > em {
  justify-self: center;
  padding: 5px 7px;
  border: 1px solid #d6dde0;
  border-radius: 4px;
  color: #6b767d;
  background: #f9fafb;
  font-size: 6px;
  font-style: normal;
}.purchase-real-input {
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid #d4dadd;
  border-radius: 3px;
  background: #fafafa;
  text-align: center;
}.purchase-real-input span {
  color: #5d686f;
  font-size: 8px;
  font-weight: 700;
}.purchase-real-input small {
  display: block;
  margin-top: 2px;
  color: #9aa2a8;
  font-size: 5px;
}.purchase-real-input.weight {
  border-color: #52a7df;
  background: rgba(66, 163, 222, 0.07);
}.purchase-real-input.weight span {
  color: #2386c3;
  font-size: 10px;
}.purchase-real-price {
  min-height: 31px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #d5dadd;
  border-radius: 3px;
  background: #fffbed;
}.purchase-real-price small {
  height: 100%;
  display: grid;
  place-items: center;
  border-right: 1px solid #e0d9be;
  color: #9e8c57;
  font-size: 7px;
}.purchase-real-price span {
  padding: 0 5px;
  color: #6a6250;
  font-size: 7px;
  text-align: right;
}.purchase-real-price.selected {
  border-color: #333333;
  box-shadow: inset 0 0 0 1px #333333;
}.purchase-row-total {
  color: #173c56;
  font-size: 8px;
  text-align: right;
}/* Totales */.purchase-real-summary {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 11px;
}.purchase-real-summary > div {
  min-width: 80px;
  padding: 9px 10px;
  border: 1px solid #e0e5e8;
  border-radius: 8px;
  background: #ffffff;
  text-align: right;
}.purchase-real-summary small,
.purchase-real-summary strong {
  display: block;
}.purchase-real-summary small {
  color: #8a959d;
  font-size: 6px;
  font-weight: 800;
}.purchase-real-summary strong {
  margin-top: 4px;
  color: #173b55;
  font-size: 10px;
}.purchase-real-summary .purchase-grand-total {
  color: #ffffff;
  border-color: transparent;
  background:
    linear-gradient(
      135deg,
      #073258,
      #076076
    );
}.purchase-real-summary .purchase-grand-total small {
  color: rgba(255, 255, 255, 0.65);
}.purchase-real-summary .purchase-grand-total strong {
  color: #ffffff;
  font-size: 13px;
}/* Mensaje flotante */.purchase-real-message {
  right: 12px;
  bottom: 12px;
}/* Responsive */@media (max-width: 760px) {.purchase-real-heading {
    align-items: flex-start;
    flex-direction: column;
  }.purchase-scale-status {
    width: 100%;
  }.purchase-real-fields {
    grid-template-columns: 1fr;
  }.purchase-live-indicator {
    display: none;
  }.purchase-real-table-head,
  .purchase-real-row {
    grid-template-columns:
      30px
      minmax(120px, 1.4fr)
      0.65fr
      0.75fr
      0.7fr;
  }.purchase-real-table-head span:nth-child(5),
  .purchase-real-table-head span:nth-child(6),
  .purchase-real-table-head span:nth-child(7),
  .purchase-real-row > :nth-child(5),
  .purchase-real-row > :nth-child(6),
  .purchase-real-row > :nth-child(7) {
    display: none;
  }.purchase-real-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }.purchase-real-summary > div {
    min-width: 0;
  }}

/* =========================================================
   ESTABILIDAD RESPONSIVE Y PREVENCIÓN DE SCROLL HORIZONTAL
   ========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

main,
section,
header,
footer,
.container,
.hero-grid,
.hero-visual,
.tab-panel,
.tab-copy,
.tab-visual-container,
.tab-mockup,
.real-osac-window,
.phone-visual,
.phone-mockup,
.phone-frame,
.phone-screen {
  min-width: 0;
  max-width: 100%;
}

.section-glow,
.business-problems,
.implementation-section,
.contact-section,
.solutions,
.hero,
.hero-visual,
.tab-visual-container,
.phone-visual {
  overflow-x: clip;
}

.tab-visual-container {
  width: 100%;
}

.real-osac-window,
.purchase-real-mockup {
  margin-inline: auto;
}

.phone-floating-message,
.real-floating-message,
.float-card {
  max-width: min(245px, calc(100vw - 32px));
}

@supports not (overflow: clip) {
  html,
  body,
  .section-glow,
  .business-problems,
  .implementation-section,
  .contact-section,
  .solutions,
  .hero,
  .hero-visual,
  .tab-visual-container,
  .phone-visual {
    overflow-x: hidden;
  }
}

@media (max-width: 900px) {
  .container {
    width: min(100% - 28px, 1160px);
  }

  .section {
    padding-block: 82px;
  }

  .hero {
    padding-top: 126px;
  }

  .hero-grid,
  .tab-panel,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .tab-copy {
    max-width: 720px;
    margin-inline: auto;
  }

  .hero-visual,
  .tab-visual-container {
    width: 100%;
  }

  .tab-panel {
    padding: 34px 24px;
    gap: 32px;
  }

  .real-osac-window {
    width: 100%;
  }

  .phone-visual {
    width: 100%;
    min-height: 680px;
    padding-inline: 0;
  }

  .phone-floating-message--top {
    left: 8px;
  }

  .phone-floating-message--bottom {
    right: 8px;
  }
}

@media (max-width: 700px) {
  .container {
    width: min(100% - 24px, 1160px);
  }

  .section {
    padding-block: 68px;
  }

  .site-header {
    height: 70px;
  }

  .nav-wrap {
    gap: 14px;
  }

  .nav-actions {
    display: none;
  }

  .brand-logo img {
    max-width: 126px;
  }

  .hero {
    padding-top: 110px;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 54px);
    letter-spacing: -2px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .button,
  .hero-actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .tabs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .tab-panel {
    padding: 26px 16px;
    border-radius: 22px;
  }

  .tab-copy h3 {
    font-size: clamp(28px, 9vw, 36px);
  }

  .tab-items {
    grid-template-columns: 1fr;
  }

  .tab-visual-container {
    padding-inline: 0;
  }

  .phone-visual,
  .tab-visual-container .phone-visual-app {
    min-height: 665px;
  }

  .phone-mockup,
  .tab-visual-container .phone-visual-app .phone-mockup {
    width: min(300px, calc(100vw - 48px));
    max-width: 100%;
    transform: none;
  }

  .phone-frame {
    padding: 8px;
    border-radius: 40px;
  }

  .phone-screen,
  .tab-visual-container .phone-visual-app .phone-screen {
    height: 580px;
    border-radius: 32px;
  }

  .phone-floating-message {
    width: min(220px, calc(100vw - 40px));
    padding: 11px;
  }

  .phone-floating-message--top {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    animation: none;
  }

  .phone-floating-message--bottom {
    right: 50%;
    bottom: 4px;
    transform: translateX(50%);
    animation: none;
  }

  .real-floating-message,
  .float-card {
    display: none;
  }

  .purchase-real-table,
  .billing-table,
  .desktop-orders-table,
  .inventory-list {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .purchase-real-table-head,
  .purchase-real-row {
    min-width: 650px;
  }

  .billing-table-head,
  .billing-table-row {
    min-width: 600px;
  }

  .desktop-orders-head,
  .desktop-orders-row {
    min-width: 560px;
  }
}

@media (max-width: 420px) {
  .container {
    width: min(100% - 18px, 1160px);
  }

  .phone-mockup,
  .tab-visual-container .phone-visual-app .phone-mockup {
    width: min(286px, calc(100vw - 34px));
  }

  .phone-screen,
  .tab-visual-container .phone-visual-app .phone-screen {
    height: 560px;
  }

  .orders-client {
    padding-inline: 14px;
  }

  .orders-last-order,
  .orders-search,
  .orders-family {
    margin-inline: 14px;
  }

  .orders-columns,
  .orders-products {
    padding-inline: 14px;
  }

  .orders-product {
    grid-template-columns: minmax(0, 1.4fr) 0.9fr 0.65fr;
  }

  .orders-product-description {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .orders-product-image {
    width: 43px;
    height: 43px;
  }

  .orders-product-image img {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   CORRECCIÓN VISUALES HERO + APP (V2)
   Mantiene la página sin scroll horizontal, pero no recorta
   los mockups ni sus tarjetas flotantes.
   ========================================================= */

/* El control del desbordamiento debe quedarse en la página,
   no en cada componente visual. */
html,
body {
  overflow-x: hidden;
}

.hero,
.hero-visual,
.solutions,
.tab-panel,
.tab-visual-container,
.tab-mockup,
.phone-visual {
  overflow: visible;
}

/* =========================================================
   HERO: vuelve a mostrar completo el módulo de surtimiento
   ========================================================= */
.hero-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.hero-visual {
  width: 100%;
  max-width: none;
  padding: 36px 34px 42px 18px;
  isolation: isolate;
}

.hero-visual .osac-system {
  width: 100%;
  max-width: none;
  margin: 0;
  transform: perspective(1300px) rotateY(-4deg) rotateX(1.5deg);
  transform-origin: center center;
}

.hero-visual .osac-system:hover {
  transform: perspective(1300px) rotateY(-1.5deg) rotateX(0);
}

/* Las tarjetas siguen flotando, pero dentro de la columna del hero. */
.hero-visual .osac-scale-pop {
  left: 0;
  bottom: 16px;
}

.hero-visual .osac-print-pop {
  right: 0;
  top: 72px;
}

.hero-visual .float-card {
  max-width: 225px;
}

/* =========================================================
   APP EN TABS: tamaño controlado y teléfono completo
   ========================================================= */
.tab-panel {
  overflow: visible;
}

.tab-visual-container {
  min-height: 700px;
  overflow: visible;
  padding: 20px 12px 30px;
}

.tab-visual-container .phone-visual-app {
  position: relative;
  width: min(100%, 620px);
  min-height: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 1;
  visibility: visible;
}

.tab-visual-container .phone-visual-app::before {
  width: 470px;
  height: 470px;
}

.tab-visual-container .phone-visual-app .phone-mockup {
  width: 300px;
  max-width: 300px;
  margin: 0 auto;
  transform: rotate(1deg);
  transform-origin: center center;
}

.tab-visual-container .phone-visual-app .phone-mockup:hover {
  transform: rotate(0deg) translateY(-5px);
}

.tab-visual-container .phone-visual-app .phone-frame {
  padding: 9px;
  border-radius: 44px;
}

.tab-visual-container .phone-visual-app .phone-screen {
  height: 610px;
  border-radius: 35px;
}

.tab-visual-container .phone-visual-app .orders-products {
  height: 345px;
  padding-bottom: 95px;
}

/* Mensajes completamente visibles y sin salir del panel. */
.tab-visual-container .phone-visual-app .phone-floating-message--top {
  top: 72px;
  left: 0;
  right: auto;
}

.tab-visual-container .phone-visual-app .phone-floating-message--bottom {
  right: 0;
  bottom: 105px;
  left: auto;
}

.tab-visual-container .phone-visual-app .phone-floating-message {
  width: 220px;
  max-width: 220px;
  padding: 13px;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1050px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
    text-align: center;
  }

  .hero-text {
    margin-inline: auto;
  }

  .hero-actions,
  .rating-row {
    justify-content: center;
  }

  .hero-visual {
    max-width: 820px;
    margin-inline: auto;
    padding: 34px 30px 45px;
  }

  .tab-visual-container {
    min-height: 690px;
  }
}

/* =========================================================
   MÓVIL: sin scroll horizontal y sin cortar mockups
   ========================================================= */
@media (max-width: 700px) {
  .hero,
  .hero-visual,
  .solutions,
  .tab-panel,
  .tab-visual-container,
  .phone-visual {
    overflow: hidden;
  }

  .hero-visual {
    width: calc(100% + 8px);
    margin-left: -4px;
    padding: 16px 4px 28px;
  }

  .hero-visual .osac-system {
    width: 100%;
    transform: none;
    border-radius: 14px;
  }

  .hero-visual .osac-system:hover {
    transform: none;
  }

  .hero-visual .osac-workspace {
    height: 335px;
  }

  .hero-visual .osac-sidebar {
    width: 34px;
  }

  .hero-visual .osac-screen {
    padding: 12px 10px 8px;
  }

  .hero-visual .osac-orders {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    height: 215px;
    gap: 6px;
  }

  .hero-visual .osac-card.side {
    display: none;
  }

  .hero-visual .osac-card.active {
    grid-column: 2;
    width: 100%;
    height: 205px;
    transform: none;
  }

  .hero-visual .osac-prev {
    grid-column: 1;
  }

  .hero-visual .osac-next {
    grid-column: 3;
  }

  .hero-visual .osac-scale-pop,
  .hero-visual .osac-print-pop {
    display: none !important;
  }

  .tab-visual-container {
    min-height: 650px;
    padding: 10px 0 20px;
  }

  .tab-visual-container .phone-visual-app {
    width: 100%;
    min-height: 630px;
    padding-top: 58px;
    padding-bottom: 58px;
    overflow: hidden;
  }

  .tab-visual-container .phone-visual-app .phone-mockup {
    width: min(286px, calc(100vw - 64px));
    max-width: min(286px, calc(100vw - 64px));
    transform: none;
  }

  .tab-visual-container .phone-visual-app .phone-screen {
    height: 555px;
  }

  .tab-visual-container .phone-visual-app .orders-products {
    height: 305px;
    padding-bottom: 82px;
  }

  .tab-visual-container .phone-visual-app .phone-floating-message {
    width: min(210px, calc(100% - 24px));
    max-width: min(210px, calc(100% - 24px));
    animation: none;
  }

  .tab-visual-container .phone-visual-app .phone-floating-message--top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .tab-visual-container .phone-visual-app .phone-floating-message--bottom {
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 420px) {
  .hero-visual .osac-route-tabs {
    gap: 10px;
    font-size: 5px;
  }

  .hero-visual .osac-filters {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .hero-visual .osac-filters button {
    grid-column: 1 / -1;
    min-height: 34px;
  }

  .tab-visual-container .phone-visual-app .phone-mockup {
    width: min(274px, calc(100vw - 42px));
    max-width: min(274px, calc(100vw - 42px));
  }
}