/* ============================================================
   HUB · 04-pilares (#plataforma) — «las tres columnas»
   Base (sin JS · ?reduce · gama baja): 3 bloques imagen + texto completo.
   .hp--cols (≥900, JS): paneles altos que cambian de ancho, pin con scroll.
   .hp--car  (<900, JS): carrusel de tarjetas altas con la receta única.
   ============================================================ */
#plataforma{position:relative;padding-block:var(--sec-y);background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink) 100%);overflow:clip}
#plataforma .hp-glow{position:absolute;left:50%;top:0;width:min(1100px,120vw);height:520px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(216,166,70,.16),transparent 62%)}

/* ---------- Cabecera ---------- */
#plataforma .hp-head{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(40px,5.5vw,80px)}
#plataforma .hp-title{margin-top:20px;max-width:12ch}
#plataforma .hp-lead{max-width:40ch;margin:0;padding-bottom:.4em;border-left:1px solid var(--hair);padding-left:22px}
@media (max-width:899.98px){
  #plataforma .hp-head{grid-template-columns:minmax(0,1fr);gap:18px}
  #plataforma .hp-title{max-width:none}
}

/* ---------- Base estática: tres bloques ---------- */
#plataforma .hp-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
#plataforma .hp-col{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);isolation:isolate}
#plataforma .hp-media{position:relative;z-index:-1;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(ellipse at 70% 30%,rgba(216,166,70,.22),transparent 60%),var(--ink-2)}
#plataforma .hp-media__par,#plataforma .hp-media__z{position:absolute;inset:0}
#plataforma .hp-media__z picture{display:contents}
#plataforma .hp-img,#plataforma .hp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 40%)}
#plataforma .hp-video{opacity:0;transition:opacity .9s var(--ease)}
#plataforma .hp-video.is-on{opacity:1}
#plataforma .hp-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,15,.25) 0%,rgba(5,9,15,0) 30%,rgba(5,9,15,.55) 70%,rgba(5,9,15,.92) 100%)}
#plataforma .hp-num{position:absolute;z-index:2;left:clamp(18px,2vw,28px);top:clamp(12px,1.6vw,22px);pointer-events:none;
  font:600 clamp(3.6rem,6.4vw,6.6rem)/1 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--gold-2);
  text-shadow:0 0 40px rgba(216,166,70,.18)}
#plataforma .hp-tab{display:none}
#plataforma:not(.hp--imm) .hp-num{display:none}
#plataforma .hp-body{position:static;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,34px);flex:1}
#plataforma .hp-kick{display:flex;align-items:center;gap:12px;margin:0;color:var(--gold-2);font-size:.82rem;letter-spacing:.18em}
#plataforma .hp-kick i{flex:0 0 48px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
#plataforma .hp-name{margin:0;font:500 clamp(2rem,3.2vw,3.2rem)/1 var(--serif);letter-spacing:-.02em;color:var(--cream)}
#plataforma .hp-text{margin:0;color:var(--cream-2);font-size:var(--fs-body);line-height:1.55;max-width:42ch}
#plataforma .hp-checks{margin:4px 0 0;padding:0;list-style:none;gap:10px}
#plataforma .hp-checks li{color:var(--cream);font-size:.98rem}
#plataforma .hp-cta{position:static;align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;min-height:48px;margin-top:auto;padding:12px 22px;
  border:1px solid var(--hair);border-radius:999px;color:var(--gold-2);font:700 .92rem/1 var(--sans);letter-spacing:.02em;
  background:rgba(5,9,15,.35);transition:background-color .4s,border-color .4s,color .4s}
#plataforma .hp-cta svg{width:18px;height:18px;transition:transform .6s var(--ease)}
/* toda la tarjeta es el objetivo táctil */
#plataforma .hp-cta:after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
#plataforma .hp-col{cursor:pointer}
#plataforma .hp-col:hover .hp-cta,#plataforma .hp-cta:focus-visible{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2)}
#plataforma .hp-col:hover .hp-cta svg{transform:translateX(5px)}
#plataforma .hp-body>*:not(.hp-cta){position:relative;z-index:2;pointer-events:none}
#plataforma .hp-cta:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* canto superior que destila oro: franja de 2px + 3 gotas lentas */
#plataforma .hp-drip{position:absolute;z-index:4;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:var(--gold-grad);background-size:220% 100%;opacity:.75;animation:hp-shine 9s ease-in-out infinite}
#plataforma .hp-drip i{position:absolute;top:0;width:10px;height:15px;margin-left:-5px;transform-origin:50% 0;animation:hp-drop 7s cubic-bezier(.55,0,.75,.4) infinite}
/* gota en forma de lágrima que nace de la franja: punta arriba, panza abajo, brillo */
#plataforma .hp-drip i:after{content:"";position:absolute;left:0;top:2px;width:10px;height:10px;border-radius:0 50% 50% 50%;transform:rotate(45deg) scaleY(1.15);
  background:radial-gradient(circle at 62% 62%,#FFF4D0 0 12%,#F4D58A 30%,#D8A646 66%,#A77927 100%);box-shadow:0 3px 10px rgba(216,166,70,.4)}
#plataforma .hp-drip i:nth-child(1){left:18%;animation-delay:-1.2s}
#plataforma .hp-drip i:nth-child(2){left:57%;animation-delay:-4.1s;animation-duration:8.4s}
#plataforma .hp-drip i:nth-child(3){left:83%;animation-delay:-6.3s;animation-duration:6.6s}
@keyframes hp-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hp-drop{
  0%{transform:translateY(0) scale(.2,.2);opacity:0}
  10%{opacity:1}
  58%{transform:translateY(0) scale(1,1);opacity:1}
  68%{transform:translateY(2px) scale(.92,1.18);opacity:1}
  100%{transform:translateY(86px) scale(.7,.9);opacity:0}}

#plataforma .hp-prog,#plataforma .hp-ctrl,#plataforma .hp-hint{display:none}

@media (max-width:899.98px){
  #plataforma .hp-row{grid-template-columns:minmax(0,1fr);gap:18px}
  #plataforma .hp-media{aspect-ratio:16/10}
  #plataforma .hp-num{font-size:3.4rem}
  #plataforma .hp-name{font-size:2.2rem}
  #plataforma .hp-text{font-size:1rem}
  #plataforma .hp-cta{min-height:52px;width:100%;justify-content:center}
}

/* ============================================================
   Panel inmersivo compartido (escritorio y carrusel): medio a sangre, texto encima
   ============================================================ */
#plataforma.hp--imm .hp-media{position:absolute;inset:0;aspect-ratio:auto}
#plataforma.hp--imm .hp-media__par{inset:-7% 0}
#plataforma.hp--imm .hp-media__z{will-change:transform}
#plataforma.hp--imm .hp-shade{background:linear-gradient(180deg,rgba(5,9,15,.35) 0%,rgba(5,9,15,0) 26%,rgba(5,9,15,.18) 44%,rgba(5,9,15,.78) 68%,rgba(5,9,15,.96) 100%)}
#plataforma.hp--cols .hp-col.is-active .hp-shade{background:linear-gradient(180deg,rgba(5,9,15,.3) 0%,rgba(5,9,15,0) 24%,rgba(5,9,15,0) 40%,rgba(5,9,15,.8) 72%,rgba(5,9,15,.96) 100%),linear-gradient(90deg,rgba(5,9,15,.62) 0%,rgba(5,9,15,.2) 48%,rgba(5,9,15,0) 70%)}
#plataforma.hp--imm .hp-col{justify-content:flex-end}
#plataforma.hp--imm .hp-body{flex:none}
#plataforma.hp--imm .hp-cta{margin-top:8px}

/* ============================================================
   ESCRITORIO — las tres columnas
   ============================================================ */
#plataforma.hp--cols .hp-stage{position:relative}
#plataforma.hp--cols .hp-row{display:flex;gap:14px;height:clamp(520px,78vh,880px)}
#plataforma.hp--cols .hp-col{flex:22 1 0;transition:border-color .6s var(--ease),box-shadow .8s var(--ease)}
#plataforma.hp--cols .hp-col:first-child{flex-grow:56}
#plataforma.hp--cols .hp-col.is-active{border-color:rgba(216,166,70,.55);box-shadow:0 40px 120px -40px rgba(216,166,70,.28),inset 0 1px 0 rgba(247,226,168,.18)}
#plataforma.hp--cols .hp-shade{transition:background-color .9s var(--ease)}
#plataforma.hp--cols .hp-col:not(.is-active) .hp-shade{background-color:rgba(5,9,15,.4)}
#plataforma.hp--cols .hp-col:not(.is-active):hover .hp-shade{background-color:rgba(5,9,15,.32)}
#plataforma.hp--cols .hp-col:not(.is-active):hover{border-color:rgba(216,166,70,.5)}
#plataforma.hp--cols .hp-img{transition:filter 1s var(--ease)}
#plataforma.hp--cols .hp-col:not(.is-active) .hp-img{filter:saturate(.6)}
#plataforma.hp--cols #inversion:not(.is-active) .hp-shade{background-color:rgba(5,9,15,.18)}
#plataforma.hp--cols #inversion:not(.is-active) .hp-img{filter:saturate(.9) brightness(1.12)}
#plataforma.hp--cols .hp-col:not(.is-active) .hp-video{opacity:0}
#plataforma.hp--cols .hp-num{transition:opacity .8s var(--ease),transform 1s var(--ease-io)}
#plataforma.hp--cols .hp-col.is-active .hp-num{opacity:.9}

/* la columna cerrada es el botón-pestaña: número arriba, título vertical abajo */
#plataforma.hp--cols .hp-tab{display:block;position:absolute;inset:0;z-index:5;width:100%;padding:0;border:0;border-radius:var(--r);background:transparent;cursor:pointer;color:var(--cream)}
#plataforma.hp--cols .hp-tab__t{position:absolute;left:clamp(18px,2vw,28px);bottom:clamp(24px,3vw,40px);writing-mode:vertical-rl;transform:rotate(180deg);
  font:500 clamp(1.8rem,2.6vw,2.8rem)/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;transition:opacity .6s var(--ease),transform 1s var(--ease)}
#plataforma.hp--cols .hp-tab:focus-visible{outline:2px solid var(--gold-2);outline-offset:-6px}
#plataforma.hp--cols .hp-col.is-active .hp-tab{pointer-events:none}
#plataforma.hp--cols .hp-col.is-active .hp-tab__t{opacity:0;transform:rotate(180deg) translateY(-24px)}
#plataforma.hp--cols .hp-col.is-active .hp-tab:focus-visible{outline-offset:-6px}

#plataforma.hp--cols .hp-body{width:clamp(360px,34vw,520px);padding:clamp(28px,3vw,48px);gap:16px;transition:opacity .5s var(--ease),visibility 0s .5s}
#plataforma.hp--cols .hp-col:not(.is-active) .hp-body{opacity:0;visibility:hidden}
#plataforma.hp--cols .hp-col.is-active .hp-body{opacity:1;visibility:visible;transition:opacity .7s var(--ease) .35s,visibility 0s}
#plataforma.hp--cols .hp-name{font-size:clamp(2.6rem,4vw,4.2rem)}
#plataforma.hp--cols .hp-text{font-size:clamp(17px,1.25vw,20px);line-height:1.5;max-width:34ch;color:var(--cream)}
#plataforma.hp--cols .hp-checks{grid-template-columns:minmax(0,1fr);row-gap:12px}
#plataforma.hp--cols .hp-checks li{font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.45}
/* CTA: mismo botón sólido oro que en celular (el fantasma se perdía sobre la foto) */
#plataforma.hp--cols .hp-col.is-active .hp-cta{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2);box-shadow:0 14px 40px -16px rgba(216,166,70,.75)}
#plataforma.hp--cols .hp-col.is-active:hover .hp-cta{background:#F7E2A8;border-color:#F7E2A8}
#plataforma.hp--cols .hp-kick{display:none}
@media (max-height:760px){
  #plataforma.hp--cols .hp-body{gap:12px;padding-block:24px}
  #plataforma.hp--cols .hp-name{font-size:clamp(2.2rem,3.4vw,3.2rem)}
}

/* hilo de avance del recorrido fijado */
#plataforma.hp--cols .hp-prog{display:block;position:relative;height:1px;margin-top:18px;background:var(--line)}
#plataforma.hp--cols .hp-prog i{position:absolute;inset:0;background:var(--gold-grad);transform:scaleX(0);transform-origin:left}

/* ============================================================
   CELULAR — carrusel de tarjetas altas (receta única)
   ============================================================ */
#plataforma.hp--car .hp-wrap{padding-inline:0}
#plataforma.hp--car .hp-row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  padding-inline:var(--gut);overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#plataforma.hp--car .hp-row::-webkit-scrollbar{display:none}
#plataforma.hp--car .hp-row:after{content:"";content:attr(data-ghost) / "";flex:0 0 14vw;align-self:stretch;display:flex;align-items:flex-start;padding:14px 0 0 12px;
  border:1px solid rgba(216,166,70,.32);border-right:0;border-radius:var(--r) 0 0 var(--r);pointer-events:none;
  background:radial-gradient(ellipse at 0% 30%,rgba(216,166,70,.2),transparent 70%),var(--ink-2);opacity:.6;
  font:600 2.6rem/1 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(244,213,138,.7);overflow:hidden;white-space:nowrap}
#plataforma.hp--car .hp-row{padding-inline-end:0}
#plataforma.hp--car{--hp-card-h:clamp(440px,64svh,560px)}
#plataforma.hp--car .hp-col{flex:0 0 min(76vw,440px);min-height:var(--hp-card-h);scroll-snap-align:start;scroll-snap-stop:always;transition:border-color .5s}
#plataforma.hp--car .hp-col.is-active{border-color:rgba(216,166,70,.6)}
#plataforma.hp--car .hp-shade{background:linear-gradient(180deg,rgba(5,9,15,.4) 0%,rgba(5,9,15,0) 22%,rgba(5,9,15,.35) 40%,rgba(5,9,15,.84) 58%,rgba(5,9,15,.97) 100%)}
#plataforma.hp--car .hp-num{display:none}
#plataforma.hp--car .hp-kick{gap:14px;margin-bottom:-4px}
#plataforma.hp--car .hp-kick .cifra{font:600 2.9rem/1 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--gold-2);text-shadow:0 0 30px rgba(216,166,70,.2)}
#plataforma.hp--car .hp-kick i{flex:1 1 auto;max-width:96px}
#plataforma.hp--car .hp-body{padding:22px 20px 20px;gap:11px}
#plataforma.hp--car .hp-name{font-size:2.1rem}
#plataforma.hp--car .hp-checks{gap:8px}
#plataforma.hp--car .hp-checks li{font-size:.95rem}
#plataforma.hp--car .hp-cta{width:100%;justify-content:center;min-height:50px;background:rgba(5,9,15,.55)}
#plataforma.hp--car .hp-col.is-active .hp-cta{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2)}

#plataforma.hp--car .hp-ctrl{display:flex;align-items:center;justify-content:space-between;gap:2px;margin:10px var(--gut) 0}
#plataforma.hp--car .hp-row{transition:opacity .28s ease}
#plataforma.hp--car .hp-row.is-wrap{opacity:0}
#plataforma .hp-arrow,#plataforma .hp-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--hair);border-radius:50%;
  background:rgba(13,27,40,.7);color:var(--gold-2);cursor:pointer;transition:border-color .3s,background-color .3s}
#plataforma .hp-arrow svg{width:22px;height:22px}
#plataforma .hp-pause svg{width:18px;height:18px}
#plataforma .hp-arrow:active,#plataforma .hp-pause:active{background:rgba(216,166,70,.2)}
#plataforma .hp-pause .hp-pause__r{display:none}
#plataforma .hp-pause[aria-pressed=true] .hp-pause__p{display:none}
#plataforma .hp-pause[aria-pressed=true] .hp-pause__r{display:block}
#plataforma .hp-dots{display:flex;align-items:center}
#plataforma .hp-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
#plataforma .hp-dot i{display:block;width:8px;height:8px;border-radius:999px;background:var(--line-2);transition:width .5s var(--ease),background-color .4s}
#plataforma .hp-dot[aria-current=true] i{width:22px;background:var(--gold-grad)}
#plataforma .hp-count{margin:0 auto 0 4px;font-size:.92rem;color:var(--mute);white-space:nowrap}
#plataforma .hp-count b{color:var(--gold-2);font-weight:800}

#plataforma.hp--car .hp-stage{position:relative}
/* la pista «Desliza» vive arriba de las tarjetas (entre cabecera y carrusel), nunca sobre la foto */
#plataforma.hp--car .hp-hint{display:flex;position:absolute;z-index:6;right:var(--gut);bottom:calc(100% + 6px);align-items:center;gap:6px;margin:0;padding:8px 14px;
  border:1px solid var(--hair);border-radius:999px;background:rgba(5,9,15,.72);color:var(--gold-2);font:700 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(10px);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
#plataforma.hp--car .hp-hint svg{width:16px;height:16px}
#plataforma.hp--car .hp-hint.is-on{opacity:1;transform:none}

/* Celular: foto/video arriba con proporción propia y COMPLETA a la vista; el texto va debajo, sobre tinta, sin taparla */
#plataforma.hp--car .hp-col{min-height:0;justify-content:flex-start}
#plataforma.hp--car .hp-kick .cifra{font-size:2.3rem}
#plataforma.hp--car .hp-media{position:relative;inset:auto;flex:none;aspect-ratio:4/5;z-index:0}
#plataforma.hp--car .hp-media__par{inset:0}
#plataforma.hp--car .hp-shade{background:linear-gradient(180deg,rgba(5,9,15,0) 0%,rgba(5,9,15,0) 82%,rgba(13,27,40,.55) 100%)}
#plataforma.hp--car .hp-body{flex:1 1 auto;background:var(--ink-2)}
#plataforma.hp--car .hp-cta{margin-top:auto}
#plataforma.hp--car .hp-row:after{align-self:flex-start;aspect-ratio:auto;height:calc(min(76vw,440px) * 1.25)}

@media (max-width:899.98px) and (max-height:700px){
  #plataforma.hp--car{--hp-card-h:min(62svh,520px)}
  #plataforma.hp--car .hp-kick .cifra{font-size:2.4rem}
  #plataforma.hp--car .hp-body{padding:16px 18px 18px;gap:9px}
  #plataforma.hp--car .hp-name{font-size:1.85rem}
  #plataforma.hp--car .hp-checks{gap:6px}
  #plataforma.hp--car .hp-cta{min-height:48px}
}
@media (max-width:399.98px){
  #plataforma .hp-count{font-size:.85rem;margin-left:0}
}

/* gama baja y movimiento reducido: sin gotas en movimiento */
html.reduce #plataforma .hp-drip,#plataforma.hp--low .hp-drip{animation:none}
html.reduce #plataforma .hp-drip i,#plataforma.hp--low .hp-drip i{display:none}
@media (prefers-reduced-motion:reduce){#plataforma .hp-drip i{display:none}}