/* ============================================================
   TARJETAS · 03-confianza (#trust) — «La tarjeta a contraluz»
   Modos (los pone confianza.js en la <section>):
     base (sin JS · ?reduce)              → las 4 marcas a la vez con sus etiquetas + 6 puntos en .grid-3
     .cf--css (celular · ?nogl · gama baja) → halo de luz CSS que revela una marca; chips 2×2; acordeón
     .cf--gl  (≥900px con WebGL)          → escenario fijado ≈4 pantallas, tarjeta three.js a contraluz
   Prefijo propio: cf-
   Zonas de las marcas (en % de la tarjeta, y hacia abajo): 1 (18,40) · 2 (42,24) · 3 (85,80) · 4 (16,78)
   (Lead Bank y Fital en la zona naranja lisa; Bridge fuera del medallón; penumbra local bajo cada glifo)
   ============================================================ */

#trust{overflow:clip;isolation:isolate;--cf-r:4.4%/7%}
#trust .cf-defs{position:absolute;width:0;height:0;overflow:hidden}
#trust .cf-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 34% at 72% 46%,rgba(216,166,70,.10),transparent 72%),radial-gradient(50% 40% at 10% 0%,rgba(16,39,58,.55),transparent 70%)}

/* ---------- Cabecera ---------- */
#trust .cf-head{position:relative;z-index:2;margin-bottom:clamp(36px,5vw,72px)}
#trust .cf-title{margin:22px 0 0;max-width:13ch;text-wrap:balance}
#trust .cf-body{margin:22px 0 0;max-width:48ch;font-size:clamp(1.02rem,1.2vw,1.18rem)}

/* ============================================================
   BASE (sin JS · ?reduce): todo visible
   ============================================================ */
#trust .cf-copy,#trust .cf-tabs,#trust .cf-ctl,#trust .cf-threads{display:none}
#trust .cf-grid{display:grid;justify-items:center;gap:clamp(28px,3.4vw,48px)}
#trust .cf-fig{position:relative;margin:0;width:min(760px,100%)}

/* La tarjeta (versión HTML: base, celular, ?nogl y póster del WebGL) */
#trust .cf-card{position:relative;width:100%;aspect-ratio:1000/631}
#trust .cf-card__face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:var(--cf-r);background:var(--ink-3);
  box-shadow:0 0 0 1px rgba(244,213,138,.55),0 34px 90px -24px rgba(0,0,0,.85),0 0 90px -16px rgba(216,166,70,.28)}
#trust .cf-card__img{width:100%;height:100%;object-fit:cover}
#trust .cf-shade{position:absolute;inset:0;background:rgba(5,9,15,.5);pointer-events:none}
#trust .cf-halo{display:none}
#trust .cf-sheen{position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,248,228,.14) 49%,transparent 58%);mix-blend-mode:screen}

/* Marcas de agua (glifos lineales, oro pálido) */
#trust .cf-mark{position:absolute;left:var(--mx);top:var(--my);width:21.5%;aspect-ratio:1;transform:translate(-50%,-50%);color:#F7E2A8;pointer-events:none}
#trust .cf-mark{isolation:isolate}
#trust .cf-mark:before{content:"";position:absolute;inset:-22%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(5,9,15,.62),rgba(5,9,15,.42) 55%,transparent 100%)}
#trust .cf-mark svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px rgba(244,213,138,.55))}
#trust .cf-mark--1{--mx:18%;--my:40%}
#trust .cf-mark--2{--mx:42%;--my:24%}
#trust .cf-mark--3{--mx:85%;--my:80%}
#trust .cf-mark--4{--mx:16%;--my:78%;width:14%;aspect-ratio:680/1040}
#trust .cf-mark--4:before{inset:-12% -40%}
/* número anclado a la esquina superior izquierda del glifo (misma caja que el SVG) */
#trust .cf-mark__n{position:absolute;left:0;top:0;transform:translate(-45%,-45%);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:1px solid var(--gold);color:var(--gold-2);font-size:.75rem;line-height:1}
@media (min-width:768px){#trust .cf-mark__n{width:28px;height:28px;font-size:.85rem}}

/* Leyenda: quién es quién */
#trust .cf-legend{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
#trust .cf-lab{display:flex;align-items:flex-start;gap:14px;padding-top:16px;border-top:1px solid var(--hair)}
#trust .cf-lab__n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-2);font-size:.85rem}
#trust .cf-lab__c{display:grid;gap:4px;min-width:0}
#trust .cf-lab__t{font:600 clamp(1.25rem,1.6vw,1.5rem)/1.15 var(--serif);color:var(--cream);letter-spacing:-.01em}
#trust .cf-lab__r{font:700 .78rem/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
#trust .cf-lab__x{margin-top:4px;font-size:max(15px,.95rem);line-height:1.55;color:var(--cream-2)}

/* Los 6 puntos */
#trust .cf-points{position:relative;z-index:2;margin-top:clamp(48px,6vw,96px)}
#trust .cf-acc{border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,32px);background:rgba(13,27,40,.42)}
#trust .cf-acc:first-of-type{border-top:1px solid var(--line)}
#trust .cf-acc>summary{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:0 0 12px;pointer-events:none;
  font:600 clamp(1.2rem,1.6vw,1.45rem)/1.2 var(--serif);color:var(--cream)}
#trust .cf-acc>summary:after{display:none}
#trust .cf-acc[open]>summary{color:var(--cream)}
#trust .cf-acc__n{font-size:.82rem;letter-spacing:.14em;color:var(--gold-2)}
#trust .cf-acc__b{padding:0;font-size:max(15px,var(--fs-body));line-height:1.65}
#trust .cf-acc__b p{margin:0}

@media (max-width:899.98px){
  #trust .cf-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479.98px){
  #trust .cf-legend{grid-template-columns:minmax(0,1fr);gap:4px}
  #trust .cf-lab{padding:14px 0}
  #trust .cf-lab__r{letter-spacing:.08em}
}
@media (max-width:767px){
  #trust .cf-mark__n{font-size:.75rem}
}

/* ============================================================
   .cf--css — celular · ?nogl · gama baja · respaldo del WebGL
   ============================================================ */
#trust.cf--css .cf-grid{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"fig fig" "chips pause" "lab lab";
  justify-items:stretch;align-items:center;gap:16px 10px}
#trust.cf--css .cf-fig{grid-area:fig;justify-self:center;width:min(86vw,560px)}
#trust.cf--css .cf-ctl{display:contents}
#trust.cf--css .cf-chips{grid-area:chips;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#trust.cf--css .cf-pause{grid-area:pause;align-self:center}
#trust.cf--css .cf-legend{grid-area:lab;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;transition:height .55s var(--ease)}
#trust.cf--css .cf-lab{grid-area:1/1;padding:0;border:0;visibility:hidden;opacity:0}
#trust.cf--css .cf-lab.is-on{visibility:visible;opacity:1;animation:cf-in .7s var(--ease) both}
#trust.cf--css .cf-lab__n{display:none}
@keyframes cf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Luz que se mueve a la zona activa y la revela */
#trust.cf--css .cf-shade,#trust.cf--css .cf-halo{display:block;inset:auto;left:var(--hx,18%);top:var(--hy,64%);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);transition:left 1.1s var(--ease),top 1.1s var(--ease)}
#trust.cf--css .cf-shade{width:58%;background:radial-gradient(closest-side,transparent 30%,rgba(5,9,15,.55) 100%);box-shadow:0 0 0 200vmax rgba(5,9,15,.55)}
#trust.cf--css .cf-halo{width:54%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(244,213,138,.5),rgba(216,166,70,.26) 38%,rgba(216,166,70,.07) 66%,transparent);
  animation:cf-breathe 4.5s ease-in-out infinite}
@keyframes cf-breathe{0%,100%{opacity:.88}50%{opacity:1}}
#trust.cf--css .cf-mark{opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
#trust.cf--css .cf-mark svg{mix-blend-mode:screen}
#trust.cf--css .cf-mark.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#trust.cf--css .cf-mark__n{display:none}

/* Chips 2×2 */
#trust .cf-chip{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:rgba(243,234,219,.04);color:var(--cream);font:700 1rem/1.15 var(--sans);text-align:left;
  transition:border-color .4s,background-color .4s,color .4s}
#trust .cf-chip__n{flex:none;width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);transition:background-color .4s,border-color .4s,box-shadow .4s}
#trust .cf-chip__t{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-grad);transform:scaleX(var(--t,0));transform-origin:left;opacity:0;transition:opacity .3s}
#trust .cf-chip[aria-pressed=true]{border-color:var(--gold);background:rgba(216,166,70,.12);color:var(--gold-2)}
#trust .cf-chip[aria-pressed=true] .cf-chip__n{border-color:var(--gold-2);background:var(--gold-2);box-shadow:0 0 10px rgba(244,213,138,.7)}
#trust .cf-chip[aria-pressed=true] .cf-chip__t{opacity:1}
/* en espera tras tocar la tarjeta: la barrita se detiene a media luz */
#trust.cf--hold .cf-chip[aria-pressed=true] .cf-chip__t{opacity:.5}
@media (hover:hover){#trust .cf-chip:hover{border-color:var(--gold-2)}}

#trust .cf-pause{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,9,15,.5);cursor:pointer;color:var(--gold-2)}
#trust .cf-pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#trust .cf-pause .cf-ico-play{display:none;fill:currentColor;stroke:none}
#trust .cf-pause[aria-pressed=true] .cf-ico-play{display:block}
#trust .cf-pause[aria-pressed=true] .cf-ico-pause{display:none}

/* Acordeón (contenido crítico apilado) */
#trust.cf--css .cf-list{display:block}
#trust.cf--css .cf-acc{border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;background:none}
#trust.cf--css .cf-acc:first-of-type{border-top:1px solid var(--line-2)}
#trust.cf--css .cf-acc>summary{flex-direction:row;align-items:center;gap:16px;padding:20px 0;pointer-events:auto;min-height:56px;font-size:clamp(1.12rem,1.6vw,1.4rem)}
#trust.cf--css .cf-acc>summary:after{display:block;margin-left:auto}
#trust.cf--css .cf-acc[open]>summary{color:var(--cream)}
#trust.cf--css .cf-acc__n{flex:none;min-width:2ch}
#trust.cf--css .cf-acc{position:relative;transition:background-color .5s}
#trust.cf--css .cf-acc:before{content:"";position:absolute;left:-12px;top:-1px;bottom:-1px;width:3px;background:var(--gold-grad);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
#trust.cf--css .cf-acc.is-hot:before{transform:none}
#trust.cf--css .cf-acc.is-hot>summary{color:var(--gold-2)}
#trust.cf--css .cf-acc.is-hot .cf-acc__n{color:var(--gold)}
#trust.cf--css .cf-acc__b{padding:0 0 22px calc(2ch + 16px)}

@media (max-width:420px){
  #trust.cf--css .cf-chip{padding:10px 12px;gap:8px;font-size:.95rem}
  #trust.cf--css .cf-acc__b{padding-left:0}
}
/* Pantallas bajas (360×640…): tarjeta, chips y etiqueta caben juntas */
@media (max-width:899.98px) and (max-height:700px){
  #trust .cf-head{margin-bottom:28px}
  #trust .cf-title{margin-top:14px}
  #trust .cf-body{margin-top:14px}
  #trust.cf--css .cf-fig{width:min(78vw,520px)}
  #trust.cf--css .cf-grid{gap:12px 10px}
  #trust.cf--css .cf-chip{min-height:44px;padding:8px 12px}
  #trust.cf--css .cf-lab__x{font-size:15px;line-height:1.45}
}

/* ?nogl / respaldo en escritorio: la versión CSS en grande */
@media (min-width:900px){
  #trust.cf--css .cf-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 44px;grid-template-areas:"fig lab pause" "fig chips chips";
    grid-template-rows:auto auto;
    align-content:center;gap:28px clamp(18px,2vw,28px)}
  #trust.cf--css .cf-fig{width:100%;align-self:center}
  #trust.cf--css .cf-legend{align-self:end;min-height:0}
  #trust.cf--css .cf-pause{align-self:end}
  #trust.cf--css .cf-chips{align-self:start}
  #trust.cf--css .cf-lab__t{font-size:clamp(1.8rem,2.6vw,2.6rem)}
  #trust.cf--css .cf-list{max-width:980px;margin-inline:auto}
}

/* ============================================================
   .cf--gl — escritorio con WebGL: escenario fijado (≈4 pantallas)
   ============================================================ */
#trust.cf--gl .cf-head{position:absolute;top:0;left:0;right:0;z-index:5;height:100vh;height:100svh;margin:0;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav-h);pointer-events:none}
#trust.cf--gl .cf-head>*{max-width:min(36vw,560px)}
#trust.cf--gl .cf-stage{position:relative;height:480vh;height:480svh}
#trust.cf--gl .cf-copy,#trust.cf--gl .cf-tabs{transition:opacity .7s var(--ease)}
#trust.cf--intro .cf-copy,#trust.cf--intro .cf-tabs,#trust.cf--intro .cf-legend,#trust.cf--intro .cf-threads{opacity:0;pointer-events:none}
#trust.cf--gl .cf-legend,#trust.cf--gl .cf-threads{transition:opacity .6s var(--ease)}
#trust.cf--gl .cf-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#trust.cf--gl .cf-grid{height:100%;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr) auto;
  justify-items:stretch;align-items:stretch;gap:0 clamp(24px,3vw,56px);padding-top:var(--nav-h);padding-bottom:clamp(22px,4vh,44px);padding-right:max(var(--gut),76px)}
#trust.cf--gl .cf-points{display:none}

/* Texto del punto activo */
#trust.cf--gl .cf-copy{grid-column:1;grid-row:1;display:grid;align-content:center;position:relative;z-index:3}
#trust .cf-panel{grid-area:1/1;display:grid;align-content:center;gap:18px;opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s .6s}
#trust .cf-panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease) .12s,transform 1s var(--ease) .12s,visibility 0s}
#trust .cf-panel__k{display:flex;align-items:center;gap:14px;font:700 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
#trust .cf-panel__k i{flex:none;width:40px;height:1px;background:var(--gold)}
#trust .cf-panel__t{margin:0;font:600 clamp(2rem,3.1vw,3.3rem)/1.04 var(--serif);letter-spacing:-.02em;color:var(--cream);text-wrap:balance;max-width:16ch}
#trust .cf-panel__p{margin:0;font-size:clamp(1.06rem,1.25vw,1.24rem);line-height:1.62;color:var(--cream-2);max-width:40ch}

/* 7 marcas de progreso */
#trust.cf--gl .cf-tabs{grid-column:1;grid-row:2;display:flex;gap:6px;position:relative;z-index:3}
#trust .cf-tab{flex:1 1 0;min-width:0;min-height:48px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:0 0 4px;border:0;background:none;cursor:pointer;color:var(--mute)}
#trust .cf-tab__n{font:700 .75rem/1 var(--sans);letter-spacing:.12em;font-variant-numeric:tabular-nums;text-align:left;transition:color .4s}
#trust .cf-tab i{position:relative;display:block;height:2px;background:var(--line-2);overflow:hidden;border-radius:2px}
#trust .cf-tab i:after{content:"";position:absolute;inset:0;background:var(--gold-grad);transform:scaleX(var(--f,0));transform-origin:left}
#trust .cf-tab[aria-selected=true]{color:var(--gold-2)}
#trust .cf-tab:hover{color:var(--cream)}
#trust .cf-tab:focus-visible{outline-offset:2px}

/* Figura: póster CSS hasta que el WebGL pinta su primer cuadro */
#trust.cf--gl .cf-fig{grid-column:2;grid-row:1/3;width:auto;height:100%;display:grid;place-items:center;perspective:1600px}
#trust.cf--gl .cf-card{width:68%;transform:rotateX(11deg) rotateY(-21deg);transition:opacity .8s var(--ease)}
#trust.cf--gl .cf-mark{opacity:0}
#trust.cf--gl .cf-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease);
  /* desvanecido superior largo (≈ barra + 140 px): el halo nunca se asoma bajo la navegación translúcida */
  -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 78%,transparent 100%),linear-gradient(#0000 0,#0000 calc(var(--nav-h,64px) * .6),#000 calc(var(--nav-h,64px) + 140px),#000 90%,#0000);-webkit-mask-composite:source-in;
  mask:radial-gradient(50% 50% at 50% 50%,#000 78%,transparent 100%),linear-gradient(#0000 0,#0000 calc(var(--nav-h,64px) * .6),#000 calc(var(--nav-h,64px) + 140px),#000 90%,#0000);mask-composite:intersect}
#trust.cf--gl-on .cf-gl{opacity:1}
#trust.cf--gl-on .cf-card{opacity:0}

/* Etiquetas HTML unidas por hilo de oro */
#trust.cf--gl .cf-legend{position:absolute;inset:0;display:block;pointer-events:none;z-index:4}
#trust.cf--gl .cf-lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--hair);border-radius:999px;
  background:rgba(8,18,28,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;
  transform:translate3d(var(--x,0px),var(--y,0px),0);opacity:0;transition:opacity .6s var(--ease);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
#trust.cf--gl .cf-lab.is-on{opacity:1;transition:opacity .8s var(--ease) .35s}
#trust.cf--gl .cf-lab__n{width:28px;height:28px;background:var(--gold-grad);color:var(--ink);border:0}
#trust.cf--gl .cf-lab__c{gap:2px}
#trust.cf--gl .cf-lab__t{font-size:1.2rem}
#trust.cf--gl .cf-lab__r{font-size:.75rem}
#trust.cf--gl .cf-lab__x{display:none}
#trust.cf--gl .cf-threads{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#trust .cf-threads path{fill:none;stroke:var(--gold-2);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.85;
  transition:stroke-dashoffset .5s var(--ease)}
#trust .cf-threads path.is-on{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) .15s}

@media (max-width:1180px){
  #trust.cf--gl .cf-panel__t{font-size:clamp(1.8rem,3vw,2.6rem)}
}
@media (min-width:900px) and (max-height:760px){
  #trust.cf--gl .cf-panel{gap:12px}
  #trust.cf--gl .cf-panel__t{font-size:clamp(1.7rem,2.6vw,2.5rem)}
  #trust.cf--gl .cf-panel__p{font-size:1.02rem}
}

/* Gama baja: sin backdrop-filter */
#trust.cf--low .cf-lab{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,18,28,.96)}
#trust.cf--low .cf-halo{animation:none}

/* Movimiento reducido: nada se mueve */
html.reduce #trust .cf-shade,html.reduce #trust .cf-halo,html.reduce #trust .cf-mark{transition:none;animation:none}