/* ==========================================================================
   Productos: pestañas por producto financiero con el recorrido, la zona de optimización y las tácticas.
   ========================================================================== */

.prod {
  margin-top: clamp(40px, 5vw, 64px);
}
.ptabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--sunk);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}
.ptabs::-webkit-scrollbar {
  display: none;
}
.ptabs button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 500 0.9375rem/1 var(--f-body);
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 220ms ease,
    transform 160ms var(--ease-out);
}
.ptabs button .i {
  font-size: 18px;
}
.ptabs button[aria-selected='true'] {
  color: var(--bg);
}
.ptabs button:active {
  transform: scale(0.97);
}
.ptab-ind {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition:
    transform 420ms var(--ease-out),
    width 420ms var(--ease-out);
}
.ppanel.swap {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
}
.pflow-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.pkey {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pkey i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(234, 71, 78, 0.18);
}
.pflow {
  width: 100%;
  min-width: 640px;
  height: auto;
  display: block;
  overflow: visible;
}
.pflow text {
  fill: var(--ink);
  font: 600 13px var(--f-display);
}
.pflow .pn {
  transform-box: fill-box;
  transform-origin: center;
  animation: pnin 420ms var(--ease-out) both;
  animation-delay: calc(300ms + var(--k) * 90ms);
}
.pflow .pl {
  animation: plin 420ms var(--ease-out) both;
  animation-delay: calc(360ms + var(--k) * 90ms);
}
.pflow .prb {
  stroke-dasharray: 1;
  animation: prb 900ms var(--ease-io) both;
}
.pinfo {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.ptac {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdatas .pzone {
  margin-top: 14px;
}
.ptac li {
  display: flex;
  gap: 12px;
  color: var(--ink-2);
  animation: plin 380ms var(--ease-out) both;
  animation-delay: calc(var(--k) * 60ms);
}

@media (max-width: 960px) {
  .pinfo {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .ptabs button {
    padding: 11px 14px;
    font-size: 0.875rem;
  }
}
.pflow .zone {
  stroke-dasharray: 1;
  animation: prb 700ms var(--ease-io) 450ms both;
}
.pflow .ztxt {
  fill: var(--coral);
  stroke: var(--surface);
  stroke-width: 4px;
  paint-order: stroke;
  stroke-linejoin: round;
  font: 700 11.5px var(--f-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: plin 500ms var(--ease-out) 800ms both;
}
.ppanel {
  box-shadow: var(--shadow);
  background: var(--surface);
  border-radius: 24px;
  margin-top: 20px;
  transition:
    opacity 200ms ease,
    filter 200ms ease,
    transform 260ms var(--ease-out);
  padding: clamp(20px, 2.6vw, 32px);
}
.prod .pflow-head {
  display: none;
}
.pflow-scroll {
  padding: 0 8px;
  margin: 6px -8px 0;
  overflow-x: auto;
  margin-top: 0;
}
.pzone {
  max-width: 80ch;
  font-size: 0.875rem;
  margin-top: 2px;
  color: var(--ink-3);
}
.pzone b {
  font-weight: 600;
  font-family: var(--f-display);
  color: var(--ink-2);
}
.pinfo {
  gap: clamp(24px, 4vw, 64px);
  display: grid;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-top: 16px;
  padding-top: 16px;
  align-items: start;
}
.pinfo small {
  color: var(--ink-3);
  font-size: 0.8125rem;
  display: block;
  margin-bottom: 8px;
}
.pwho {
  max-width: 34ch;
  letter-spacing: -0.01em;
  font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.4 var(--f-display);
  text-wrap: pretty;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.ptac.chips {
  gap: 8px;
}
.ptac .chip {
  font-size: 0.875rem;
  padding: 7px 14px;
  color: var(--ink);
  animation: plin 380ms var(--ease-out) both;
  animation-delay: calc(var(--k) * 60ms);
}

@media (max-width: 960px) {
  .pinfo {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .ptac .chip {
    white-space: normal;
  }
}

.pdata[hidden] {
  display: none !important;
}
@keyframes pnin {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes plin {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes prb {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Boomit v2: resplandor de marca muy tenue para dar profundidad al fondo. */
[data-section='productos'] {
  background: radial-gradient(50% 45% at 92% 8%, color-mix(in srgb, var(--brand-violet) 7%, transparent), transparent 70%);
}

/* Boomit v2: en movil nada scrollea hacia el costado. Las pestañas pasan a
   una grilla y la curva del recorrido (min-width 640px) se reemplaza por la
   lista de etapas que ya trae cada producto, como linea de tiempo vertical;
   las etapas de la zona de optimizacion van en coral. */
@media (max-width: 640px) {
  .ptabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    gap: 4px;
    border-radius: 22px;
  }
  .ptabs button {
    justify-content: center;
  }
  .ptabs button:last-of-type:nth-of-type(odd) {
    grid-column: 1 / -1;
  }
  .ptab-ind {
    display: none;
  }
  .ptabs button[aria-selected='true'] {
    border-radius: 999px;
    background: var(--ink);
  }
  .pflow-scroll {
    display: none;
  }
  .pdata > ol.sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 6px 0 18px;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    list-style: none;
  }
  .pdata > ol.sr-only li {
    position: relative;
    padding: 8px 0 8px 30px;
    font: 600 0.9375rem/1.3 var(--f-display);
    color: var(--ink);
  }
  .pdata > ol.sr-only li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--brand-violet);
  }
  .pdata > ol.sr-only li::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: -12px;
    width: 2px;
    background: linear-gradient(var(--brand-violet), var(--brand-red));
    opacity: 0.35;
  }
  .pdata > ol.sr-only li:last-child::after {
    display: none;
  }
  .pdata > ol.sr-only li[data-zone] {
    color: var(--brand-red);
  }
  .pdata > ol.sr-only li[data-zone]::before {
    background: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(234, 71, 78, 0.18);
  }
}