/* Comunicación y Colaboración — Capacidades: two-column typographic explorer (docs/render-colaboracion-capacidades.cjs).
   Open composition on the section's own background (no enclosing card): left, the six capacities as a vertical list;
   right, the selected capacity with an editorial hierarchy and a faint giant number behind it. Identity colour: fuchsia
   #CD0298 (blue only as a minor complement in the ambient light). The panels share one grid cell (stable height);
   switching fades the old one out, then the new one in with a 6px rise — never both at once. */
/* The section's fuchsia wash (colaboracion-page.css) reached its bottom edge and ended in a visible seam; same colour,
   but sized so it fades out inside the section. */
.collab-capacities{position:relative;isolation:isolate;overflow-x:clip;background:radial-gradient(ellipse 60% 48% at 25% 52%,#cd029818,transparent 72%)}

/* ---- Ambient light (right side, behind the content): a soft fuchsia glow ------------------------------------------- */
/* Fades out before the section's bottom edge, so it melts into the next section (no seam). */
.collab-capacities::before{content:'';position:absolute;z-index:-1;pointer-events:none;right:0;bottom:0;width:64%;height:80%;
  background:radial-gradient(ellipse 52% 46% at 64% 56%,rgba(205,2,152,.17),transparent 70%),radial-gradient(ellipse 30% 26% at 88% 30%,rgba(6,136,255,.05),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);
  transition:opacity .5s ease}
.collab-capacities.is-switching::before{opacity:.78}

.cc-cap-explorer{--cc-accent:#e548bd;--cc-fuchsia:#cd0298;position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);margin-top:clamp(44px,5vw,64px)}

/* ---- Left: navigation ---- */
.cc-cap-nav{padding-right:clamp(28px,3.6vw,56px)}
.cc-cap-list{display:flex;flex-direction:column}
.cc-cap-tab{position:relative;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);width:100%;margin:0;padding:clamp(17px,1.8vw,22px) 20px clamp(17px,1.8vw,22px) 22px;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:10px 10px 0 0;background:transparent;color:#aeb8c9;font:inherit;font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.4;text-align:left;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.cc-cap-tab-number{flex:none;min-width:1.6em;color:#7d879b;font-size:.82rem;font-variant-numeric:tabular-nums;transition:color .25s ease}
.cc-cap-tab-name{min-width:0}
.cc-cap-tab-arrow{flex:none;width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--cc-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;translate:-3px 3px;transition:opacity .25s ease,translate .3s ease}
/* Active: fuchsia bar at the left edge with a very soft glow, a slightly lifted background, white name. */
.cc-cap-tab::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:3px;border-radius:3px;background:var(--cc-fuchsia);box-shadow:0 0 14px rgba(205,2,152,.55);opacity:0;transform:scaleY(.4);transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.cc-cap-tab:hover{background-color:rgba(255,255,255,.025);color:#e6ebf4}
.cc-cap-tab[aria-selected=true]{border-radius:10px;border-bottom-color:transparent;background:linear-gradient(90deg,rgba(205,2,152,.1),rgba(205,2,152,.035) 45%,rgba(255,255,255,.015));color:#fff;font-weight:500}
.cc-cap-tab[aria-selected=true]::before{opacity:1;transform:none}
.cc-cap-tab[aria-selected=true] .cc-cap-tab-number{color:var(--cc-accent)}
.cc-cap-tab[aria-selected=true] .cc-cap-tab-arrow{opacity:1;translate:0 0}
.cc-cap-tab:focus-visible{outline:2px solid var(--cc-fuchsia);outline-offset:2px}

/* ---- Right: selected capacity (a discreet vertical divider separates the columns) ---- */
.cc-cap-detail{position:relative;isolation:isolate;display:grid;align-items:center;padding-left:clamp(32px,4.4vw,72px);border-left:1px solid rgba(255,255,255,.08)}
.cc-cap-panel{grid-area:1/1;visibility:hidden;opacity:0;translate:0 6px;transition:opacity .14s ease,translate 0s linear .14s,visibility 0s linear .14s}
.cc-cap-panel.is-active{visibility:visible;opacity:1;translate:0 0;transition:opacity .28s ease .14s,translate .34s cubic-bezier(.22,.61,.36,1) .14s,visibility 0s linear .14s}
/* Giant number: Poppins, outlined in translucent fuchsia, to the right; its containing block is .cc-cap-detail. */
.cc-cap-panel-bignum{position:absolute;right:-2%;top:50%;z-index:-1;translate:0 -58%;font-family:Poppins,sans-serif;font-size:clamp(9rem,17vw,16rem);font-weight:600;line-height:1;letter-spacing:-.04em;color:rgba(205,2,152,.035);-webkit-text-stroke:1.5px rgba(205,2,152,.2);pointer-events:none;user-select:none}
.cc-cap-panel-label{display:flex;align-items:center;gap:16px;margin:0;color:var(--cc-accent);font-size:.74rem;font-weight:500;letter-spacing:.18em;line-height:1.5}
.cc-cap-panel-rule{width:clamp(48px,5vw,76px);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cc-fuchsia),rgba(205,2,152,.15))}
.cc-cap-panel-title{max-width:16em;margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(2rem,3.5vw,3.1rem);font-weight:500;line-height:1.12;letter-spacing:-.04em;color:#fff}
.cc-cap-panel-text{max-width:34em;margin:clamp(18px,2vw,24px) 0 0;color:#b9c3d4;font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.7}
.cc-cap-panel-concepts{display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;max-width:40em;margin:clamp(24px,2.6vw,32px) 0 0;padding:clamp(22px,2.4vw,28px) 0 0;border-top:1px solid rgba(255,255,255,.08);list-style:none}
.cc-cap-panel-concepts li{display:flex;align-items:center;gap:10px;padding:2px clamp(16px,2vw,28px);border-left:1px solid rgba(255,255,255,.1);color:#e6ebf4;font-size:.92rem;line-height:1.4}
.cc-cap-panel-concepts li:first-child{padding-left:0;border-left:0}
.cc-cap-panel-concepts li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--cc-fuchsia);box-shadow:0 0 8px rgba(205,2,152,.5)}

@media (prefers-reduced-motion:reduce){
  .cc-cap-panel,.cc-cap-panel.is-active{translate:none;transition:none}
  .cc-cap-tab,.cc-cap-tab::before,.cc-cap-tab-number,.cc-cap-tab-arrow,.collab-capacities::before{transition:none}
}

/* Where three concepts may not fit on one line, drop the vertical separators (a wrapped row would start with one) and
   keep the fuchsia dots with plain spacing. */
@media (max-width:1024px){
  .cc-cap-panel-concepts{column-gap:24px}
  .cc-cap-panel-concepts li,.cc-cap-panel-concepts li:first-child{padding:2px 0;border-left:0}
}
/* ---- Tablet ---- */
@media (max-width:1024px) and (min-width:821px){
  .cc-cap-explorer{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .cc-cap-tab{padding-left:18px;padding-right:14px}
  .cc-cap-panel-title{font-size:clamp(1.8rem,3.4vw,2.3rem)}
  .cc-cap-panel-bignum{font-size:clamp(8rem,16vw,11rem)}
}
/* ---- Tablet portrait and mobile: list above, selected capacity below ---- */
@media (max-width:820px){
  .cc-cap-explorer{grid-template-columns:minmax(0,1fr)}
  .cc-cap-nav{padding-right:0}
  .cc-cap-detail{margin-top:clamp(24px,5vw,36px);padding:clamp(26px,5vw,36px) 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .cc-cap-panel-bignum{right:0;top:clamp(26px,5vw,36px);translate:0 -12%;font-size:clamp(5.5rem,20vw,9rem)}
  .collab-capacities::before{right:-20%;width:100%;height:55%;bottom:-4%}
}
@media (max-width:600px){
  .cc-cap-tab{gap:16px;padding:15px 14px 15px 16px;font-size:.95rem}
  .cc-cap-panel-title{font-size:clamp(1.6rem,7.4vw,2rem)}
  .cc-cap-panel-text{font-size:.95rem}
  .cc-cap-panel-concepts li{font-size:.86rem}
  .cc-cap-panel-bignum{font-size:clamp(4.5rem,22vw,6.5rem);-webkit-text-stroke-width:1px}
}