/* ============================================================
   Carlos Sanchez Portal · SOUT PDF Home v1.1.33
   Composición basada en la referencia aprobada:
   - Producto + capacidades a la izquierda
   - Licencias a la derecha
   - Sin cambios de lógica ni JavaScript
   ============================================================ */

.solution-home-strip {
  --sout-navy: #0e3d63;
  --sout-blue: #2563eb;
  --sout-text: #536b84;
  --sout-line: #d8e1ea;
  --sout-soft: #f7fafc;
  --sout-gold: #dfa327;
  --sout-gold-soft: #fff9ed;

  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 !important;
  border: 1px solid #cdd8e3 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 68.5%,
      #f9fbfd 68.5%,
      #f9fbfd 100%) !important;
  box-shadow: 0 8px 26px rgba(14, 61, 99, .045);
}

/* El HTML existente se conserva; el grid reorganiza sus hijos. */
.solution-home-strip .solution-home-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .78fr);
  grid-template-areas:
    "badge licenses"
    "title licenses"
    "description licenses"
    "origin licenses"
    "features licenses"
    "cta licenses";
  column-gap: 0;
  align-items: start;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -------------------------
   ZONA IZQUIERDA / PRODUCTO
   ------------------------- */
.solution-home-strip .solution-label {
  grid-area: badge;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 34px 42px 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #dda63a !important;
  color: var(--sout-navy) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  letter-spacing: .11em !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

.solution-home-strip .solution-home-copy > h3 {
  grid-area: title;
  margin: 22px 42px 0 !important;
  color: var(--sout-navy) !important;
  font-size: clamp(2.35rem, 4vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
}

.solution-home-strip .solution-home-copy > p:not(.solution-origin) {
  grid-area: description;
  max-width: 770px;
  margin: 22px 42px 0 !important;
  color: var(--sout-text) !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

.solution-home-strip .solution-origin {
  grid-area: origin;
  max-width: 770px;
  margin: 4px 42px 0 !important;
  color: var(--sout-text) !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

/* Capacidades: visual técnico, NO comercial. */
.solution-home-strip .solution-home-tags {
  grid-area: features;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 12px !important;
  width: auto !important;
  margin: 30px 42px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.solution-home-strip .solution-home-tags::before {
  display: none !important;
  content: none !important;
}

.solution-home-strip .solution-home-tags span {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-width: 0 !important;
  min-height: 94px !important;
  width: 100% !important;
  padding: 14px 8px 12px !important;
  border: 1px solid #d4dee8 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #263e59 !important;
  font-size: .86rem !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: 0 4px 13px rgba(14, 61, 99, .035) !important;
}

.solution-home-strip .solution-home-tags span::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 31px !important;
  height: 31px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--sout-navy) !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Unir */
.solution-home-strip .solution-home-tags span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='11' height='14' rx='1.5'/%3E%3Cpath d='M10 5V3.8A1.8 1.8 0 0 1 11.8 2H19a2 2 0 0 1 2 2v11.2A1.8 1.8 0 0 1 19.2 17H18'/%3E%3Cpath d='M7 8H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M10 10h5M10 13h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='5' width='11' height='14' rx='1.5'/%3E%3Cpath d='M10 5V3.8A1.8 1.8 0 0 1 11.8 2H19a2 2 0 0 1 2 2v11.2A1.8 1.8 0 0 1 19.2 17H18'/%3E%3Cpath d='M7 8H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M10 10h5M10 13h5'/%3E%3C/svg%3E");
}

/* Dividir */
.solution-home-strip .solution-home-tags span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

/* Comprimir */
.solution-home-strip .solution-home-tags span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7.5 10.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19h14M8 22h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7.5 10.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19h14M8 22h8'/%3E%3C/svg%3E");
}

/* Editar */
.solution-home-strip .solution-home-tags span:nth-child(4)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l11-11-4-4L4 16v4Z'/%3E%3Cpath d='m13.5 6.5 4 4M4 20h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l11-11-4-4L4 16v4Z'/%3E%3Cpath d='m13.5 6.5 4 4M4 20h16'/%3E%3C/svg%3E");
}

.solution-home-strip .solution-home-copy > .text-link {
  grid-area: cta;
  justify-self: start;
  display: inline-flex !important;
  align-items: center;
  margin: 28px 42px 36px !important;
  color: var(--sout-blue) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* -------------------------
   ZONA DERECHA / LICENCIAS
   ------------------------- */
.solution-home-strip .solution-home-licenses {
  grid-area: licenses;
  align-self: stretch;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  align-content: center;
  gap: 12px !important;
  min-width: 0;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  padding: 44px 34px !important;
  border-left: 1px solid var(--sout-line) !important;
  background:
    linear-gradient(145deg, rgba(250, 252, 254, .96), rgba(244, 248, 252, .98)) !important;
}

.solution-home-strip .solution-home-license-caption {
  grid-column: 1 / -1;
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 42px;
  margin: 0 0 18px !important;
  padding: 0 0 18px 48px !important;
  border-bottom: 1px solid var(--sout-line);
  color: var(--sout-navy) !important;
  font-size: 1.12rem !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.solution-home-strip .solution-home-license-caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  background-color: var(--sout-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 19 6v5c0 4.8-3.2 8.4-7 10.2C8.2 19.4 5 15.8 5 11V6l7-3.2Z'/%3E%3Cpath d='m12 7.6 1.2 2.45 2.7.4-1.95 1.9.46 2.68L12 13.76l-2.41 1.27.46-2.68-1.95-1.9 2.7-.4L12 7.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 19 6v5c0 4.8-3.2 8.4-7 10.2C8.2 19.4 5 15.8 5 11V6l7-3.2Z'/%3E%3Cpath d='m12 7.6 1.2 2.45 2.7.4-1.95 1.9.46 2.68L12 13.76l-2.41 1.27.46-2.68-1.95-1.9 2.7-.4L12 7.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.solution-home-strip .solution-home-license-chip {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  min-width: 0 !important;
  min-height: 136px !important;
  width: 100% !important;
  padding: 16px 8px !important;
  border: 1px solid #d1dce6 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--sout-navy) !important;
  font-size: .98rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 5px 16px rgba(14, 61, 99, .04) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.solution-home-strip .solution-home-license-chip::after {
  content: "★" !important;
  position: static !important;
  color: #9eafc4 !important;
  font-size: 1.9rem !important;
  line-height: 1 !important;
}

.solution-home-strip .solution-home-license-chip:last-child::after {
  content: "★★" !important;
  letter-spacing: .05em;
}

.solution-home-strip .solution-home-license-chip:hover,
.solution-home-strip .solution-home-license-chip:focus-visible {
  transform: translateY(-2px);
  border-color: #b8c9d8 !important;
  box-shadow: 0 9px 22px rgba(14, 61, 99, .075) !important;
}

.solution-home-strip .solution-home-license-chip--pro {
  border-color: var(--sout-gold) !important;
  background:
    linear-gradient(145deg, #fffefa, var(--sout-gold-soft)) !important;
  color: #bf8610 !important;
}

.solution-home-strip .solution-home-license-chip--pro::after {
  color: #e4a60c !important;
}

/* -------------------------
   TABLET
   ------------------------- */
@media (max-width: 980px) {
  .solution-home-strip {
    background: #fff !important;
  }

  .solution-home-strip .solution-home-copy {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "badge"
      "title"
      "description"
      "origin"
      "features"
      "cta"
      "licenses" !important;
  }

  .solution-home-strip .solution-home-licenses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: auto !important;
    padding: 30px 34px 34px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--sout-line) !important;
  }

  .solution-home-strip .solution-home-license-chip {
    min-height: 112px !important;
  }
}

/* -------------------------
   MÓVIL
   ------------------------- */
@media (max-width: 640px) {
  .solution-home-strip {
    border-radius: 18px !important;
  }

  .solution-home-strip .solution-label {
    margin: 24px 20px 0 !important;
    padding: 9px 14px !important;
    font-size: .7rem !important;
  }

  .solution-home-strip .solution-home-copy > h3 {
    margin: 18px 20px 0 !important;
    font-size: 2.25rem !important;
  }

  .solution-home-strip .solution-home-copy > p:not(.solution-origin) {
    margin: 16px 20px 0 !important;
    font-size: .93rem !important;
    line-height: 1.52 !important;
  }

  .solution-home-strip .solution-origin {
    margin: 4px 20px 0 !important;
    font-size: .93rem !important;
    line-height: 1.52 !important;
  }

  .solution-home-strip .solution-home-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px !important;
    margin: 22px 20px 0 !important;
  }

  .solution-home-strip .solution-home-tags span {
    min-height: 82px !important;
    font-size: .8rem !important;
  }

  .solution-home-strip .solution-home-tags span::before {
    width: 27px !important;
    height: 27px !important;
  }

  .solution-home-strip .solution-home-copy > .text-link {
    margin: 22px 20px 26px !important;
    font-size: .94rem !important;
  }

  .solution-home-strip .solution-home-licenses {
    gap: 8px !important;
    padding: 24px 20px 28px !important;
  }

  .solution-home-strip .solution-home-license-caption {
    min-height: 34px;
    margin-bottom: 12px !important;
    padding: 0 0 14px 40px !important;
    font-size: .95rem !important;
  }

  .solution-home-strip .solution-home-license-caption::before {
    width: 28px;
    height: 28px;
  }

  .solution-home-strip .solution-home-license-chip {
    min-height: 88px !important;
    padding: 12px 4px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
  }

  .solution-home-strip .solution-home-license-chip::after {
    font-size: 1.45rem !important;
  }
}

@media (max-width: 420px) {
  .solution-home-strip .solution-home-licenses {
    grid-template-columns: 1fr !important;
  }

  .solution-home-strip .solution-home-license-caption {
    grid-column: 1 !important;
  }

  .solution-home-strip .solution-home-license-chip {
    min-height: 74px !important;
    flex-direction: row;
    justify-content: space-between !important;
    padding: 12px 18px !important;
  }

  .solution-home-strip .solution-home-license-chip::after {
    font-size: 1.25rem !important;
  }
}
