/* ============================================================
   ATLAS — secciones consolidadas del portafolio
   Sectores · Stack · Testimonios · Diagnóstico · Vizs animadas
   (todo en tokens oscuros del Atlas)
   ============================================================ */

/* ---------- SECTORES (prueba social) ---------- */
.sectors{ display:flex; flex-wrap:wrap; gap:10px; }
.sector{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--paper-mut);
  padding:9px 15px; border:1px solid var(--line); border-radius:100px;
  /* sin backdrop-filter (8+ pills con blur simultáneo): alpha compensada */
  background:rgba(10,13,20,.82);
  transition:border-color .25s, transform .4s var(--cinema), color .25s;
}
.sector:hover{ border-color:color-mix(in srgb,var(--cyan) 45%,transparent); color:var(--paper); transform:translateY(-2px); }
.sector i{ color:var(--cyan); font-size:1em; }

/* ---------- STACK / herramientas ---------- */
.stackgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.stk-cat{ background:var(--ink); padding:18px 18px 20px; }
.stk-cat-name{ display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:600;
  font-size:1rem; letter-spacing:-.01em; margin-bottom:12px; }
.stk-cat-name .num{ font-family:var(--f-mono); font-size:.6rem; color:var(--gold); letter-spacing:.1em;
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); border-radius:4px; padding:2px 5px; }
.stk-items{ display:flex; flex-wrap:wrap; gap:7px; }
.stk-item{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.02em; color:var(--paper-mut);
  padding:5px 10px; border:1px solid var(--line-soft); border-radius:5px; background:var(--glass);
  transition:border-color .25s, color .25s; }
.stk-item:hover{ border-color:var(--cyan); color:var(--paper); }

/* ---------- TESTIMONIOS ---------- */
.tmons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.tmon{ position:relative; background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:8px; padding:24px 22px 20px;
  display:flex; flex-direction:column; gap:14px; overflow:hidden;
  contain:layout paint;
  transition:transform .5s var(--cinema), border-color .4s; }
.tmon:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--gold) 40%,transparent); }
.tmon .qm{ font-family:var(--f-serif); font-size:3rem; line-height:.5; color:color-mix(in srgb,var(--gold) 55%,transparent);
  height:.4em; }
.tmon p{ font-size:.98rem; line-height:1.6; color:var(--paper); text-wrap:pretty; }
.tmon p em{ font-family:var(--f-serif); font-style:italic; color:var(--gold-lt); }
.tmon .tmetric{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper-dim); }
.tmon .tmetric b{ font-family:var(--f-display); font-size:1.2rem; color:var(--gold-lt); margin-right:6px; letter-spacing:-.01em; }
.tmon .tauthor{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:6px; }
.tmon .tav{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; color:var(--ink);
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); }
.tmon .twho{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tmon .tnm{ font-family:var(--f-display); font-weight:600; font-size:.92rem; }
.tmon .trl{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.04em; color:var(--paper-dim); }

/* ---------- DIAGNÓSTICO (quiz) ---------- */
.diag2{ display:grid; grid-template-columns:5fr 7fr; gap:30px; align-items:center; }
.diag2-intro h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.02; letter-spacing:-.03em; margin-bottom:.7rem; }
.diag2-intro h3 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--gold-lt); }
.diag2-intro p{ font-size:1rem; line-height:1.6; color:var(--paper-mut); margin-bottom:1rem; text-wrap:pretty; }
.diag2-gift{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lt);
  padding:7px 14px; border:1px dashed color-mix(in srgb,var(--gold) 50%,transparent); border-radius:100px; }

.diag2-card{ position:relative; background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:10px; padding:26px; overflow:hidden;
  min-height:330px; display:flex; flex-direction:column;
  contain:layout paint; }
.diag2-prog{ display:flex; gap:6px; margin-bottom:22px; }
.diag2-prog span{ flex:1; height:4px; border-radius:4px; background:var(--line); transition:background .4s; }
.diag2-prog span.done{ background:var(--gold); }
.diag2-step{ display:none; flex-direction:column; flex:1; }
.diag2-step.active{ display:flex; animation:diag2In .5s var(--cinema); }
@keyframes diag2In{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.diag2-qn{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.55rem; }
.diag2-q{ font-family:var(--f-display); font-weight:600; font-size:1.4rem; letter-spacing:-.02em;
  line-height:1.1; margin-bottom:1.3rem; }
.diag2-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.diag2-opt{ cursor:pointer; font-size:.9rem; padding:10px 15px; border:1px solid var(--line-soft);
  border-radius:100px; background:var(--glass); color:var(--paper); user-select:none;
  transition:border-color .2s, background .2s, color .2s, transform .3s var(--cinema); }
.diag2-opt:hover{ border-color:var(--gold); transform:translateY(-2px); }
.diag2-opt.sel{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.diag2-foot{ margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.diag2-prev{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-mut); background:none; border:none; cursor:pointer; pointer-events:auto; }
.diag2-prev:hover{ color:var(--paper); }
.diag2-prev[hidden]{ visibility:hidden; }
.diag2-hint{ font-family:var(--f-mono); font-size:.6rem; color:var(--paper-dim); }
.diag2-result{ display:none; flex-direction:column; flex:1; text-align:center; justify-content:center; }
.diag2-result.active{ display:flex; animation:diag2In .6s var(--cinema); }
.diag2-result .rnum{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.8rem,7vw,4.6rem);
  letter-spacing:-.04em; line-height:1; color:var(--gold-lt); }
.diag2-result .rnum s{ font-style:italic; font-size:.4em; text-decoration:none; color:var(--paper); }
.diag2-result .rlbl{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mut); margin:.55rem 0 1.1rem; }
.diag2-result p{ font-size:.98rem; line-height:1.6; color:var(--paper-mut); margin-bottom:1.4rem;
  max-width:40ch; margin-inline:auto; }
.diag2-result p b{ color:var(--gold-lt); }
.diag2-result p strong{ color:var(--paper); }
.diag2-result .btn{ margin-inline:auto; }

/* ---------- VIZS ANIMADAS ---------- */
.vizs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.viz{ border:1px solid var(--line); border-radius:8px; background:var(--glass); backdrop-filter:blur(8px);
  overflow:hidden; position:relative; contain:layout paint; }
.viz-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.viz-head .live{ display:inline-flex; align-items:center; gap:6px; color:var(--cyan); }
.viz-head .live i{ width:6px; height:6px; border-radius:50%; background:currentColor; position:relative; }
/* anillo expansivo por pseudo (transform+opacity) — el box-shadow animado repintaba cada frame */
.viz-head .live i::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:currentColor; opacity:.6; animation:vizPulse 1.8s var(--ease) infinite; }
@keyframes vizPulse{ 0%{ transform:scale(1); opacity:.6;} 70%,100%{ transform:scale(3); opacity:0;} }
.viz-body{ padding:16px; }

/* flow */
.flow-svg{ width:100%; height:auto; display:block; }
.flow-conn{ fill:none; stroke:var(--line-soft); stroke-width:2; }
.flow-conn-lit{ fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:10 8; animation:flowDash 1s linear infinite; }
@keyframes flowDash{ to{ stroke-dashoffset:-18; } }
.flow-node rect{ fill:var(--ink); stroke:var(--line-soft); stroke-width:1.5; }
.flow-node text{ fill:var(--paper); font-family:var(--f-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.flow-node .nd{ fill:var(--gold); }
.flow-node{ animation:nodePop 4s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
.flow-node.n2{ animation-delay:.4s; } .flow-node.n3{ animation-delay:.8s; }
.flow-node.n4{ animation-delay:1.2s; } .flow-node.n5{ animation-delay:1.6s; }
@keyframes nodePop{ 0%,100%{ transform:scale(1);} 4%{ transform:scale(1.06);} 12%{ transform:scale(1);} }
.flow-packet{ fill:var(--gold-lt); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 60%,transparent)); }

/* dash */
.dash-grid{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; }
.dash-bars{ display:flex; align-items:flex-end; gap:7px; height:88px; }
.dash-bar{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  transform-origin:bottom; transform:scaleY(.12); transition:transform 1.1s var(--cinema); }
.viz.in .dash-bar{ transform:scaleY(var(--h,.5)); animation:barBreathe 3.4s var(--ease) infinite; }
/* respiración por opacidad — filter:brightness animado repinta la barra cada frame */
@keyframes barBreathe{ 0%,100%{ opacity:1;} 50%{ opacity:.85;} }
.dash-kpi{ text-align:right; }
.dash-kpi .v{ font-family:var(--f-display); font-weight:700; font-size:1.7rem; letter-spacing:-.03em; line-height:1; color:var(--paper); }
.dash-kpi .v s{ font-style:italic; color:var(--gold-lt); font-size:.6em; text-decoration:none; }
.dash-kpi .t{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); margin-top:4px; }
.dash-line{ width:100%; height:42px; margin-top:12px; display:block; }
.dash-line path.area{ fill:color-mix(in srgb,var(--gold) 14%,transparent); opacity:0; transition:opacity .8s var(--ease) .6s; }
.dash-line path.trend{ fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; }
.viz.in .dash-line path.trend{ transition:stroke-dashoffset 1.4s var(--cinema) .3s; stroke-dashoffset:0; }
.viz.in .dash-line path.area{ opacity:1; }
.dash-line circle{ fill:var(--gold-lt); opacity:0; transition:opacity .3s var(--ease) 1.4s; }
.viz.in .dash-line circle{ opacity:1; }

/* stack viz */
.stack-layers{ display:flex; flex-direction:column; gap:8px; position:relative; }
.stack-layer{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px;
  border:1px solid var(--line-soft); border-radius:6px; background:var(--ink);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.02em; color:var(--paper);
  opacity:0; transform:translateX(14px); transition:opacity .6s var(--cinema), transform .6s var(--cinema); }
.viz.in .stack-layer{ opacity:1; transform:none; }
.viz.in .stack-layer:nth-child(2){ transition-delay:.1s; }
.viz.in .stack-layer:nth-child(3){ transition-delay:.2s; }
.viz.in .stack-layer:nth-child(4){ transition-delay:.3s; }
.stack-layer .led{ width:8px; height:8px; border-radius:50%; background:#3fb574;
  position:relative; }
/* anillo expansivo por pseudo (transform+opacity) — el box-shadow animado repintaba la fila */
.stack-layer .led::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(63,181,116,.5); animation:ledBlink 2.2s var(--ease) infinite; }
.stack-layer:nth-child(3) .led::after{ animation-delay:.6s; }
.stack-layer:nth-child(4) .led::after{ animation-delay:1s; }
.stack-layer:nth-child(5) .led::after{ animation-delay:1.4s; }
@keyframes ledBlink{ 0%{ transform:scale(1); opacity:.8;} 60%,100%{ transform:scale(2.5); opacity:0;} }
.stack-pulse{ position:absolute; left:-1px; top:4px; width:3px; border-radius:2px; height:24px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent); opacity:0; }
.viz.in .stack-pulse{ opacity:1; animation:pulseDown 2.6s var(--cinema) infinite; }
/* viaja con transform (compositor) — animar `top` invalidaba layout cada frame;
   --sp-travel lo calcula atlas-engine.js al activar la viz (alto del stack - 32px) */
@keyframes pulseDown{ 0%{ transform:translateY(0); opacity:0;} 15%{ opacity:1;} 85%{ opacity:1;} 100%{ transform:translateY(var(--sp-travel,140px)); opacity:0;} }

/* ---------- TARJETAS DE PROYECTO (data-driven, con captura) ---------- */
.proj-card{ padding:0 !important; overflow:hidden; text-align:left; display:flex; flex-direction:column; }
.proj-cover{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.proj-cover .proj-thumb{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; opacity:.72; transition:opacity .35s;
}
.proj-card:hover .proj-cover .proj-thumb{ opacity:.9; }
.proj-mono{ position:absolute; left:16px; bottom:8px; z-index:1; pointer-events:none;
  font-family:var(--f-display); font-weight:800; font-size:2.6rem; line-height:1;
  color:rgba(255,255,255,.92); text-shadow:0 2px 14px rgba(0,0,0,.4); }
/* sin backdrop-filter: pill diminuta, el blur del fondo no se percibe */
.proj-card .badge{ position:absolute; top:11px; right:11px; z-index:2; pointer-events:none;
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:4px 9px; border-radius:100px; }
.badge-prod{ background:rgba(46,160,90,.22); color:#7fe0a6; border:1px solid rgba(46,160,90,.4); }
.badge-dev{ background:rgba(234,176,98,.2); color:var(--gold-lt); border:1px solid rgba(234,176,98,.4); }
.proj-card .idx{ display:block; margin:16px 20px 0; font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.proj-card h4{ margin:7px 20px 0; }
.proj-card p{ margin:8px 20px 0; }
.proj-card .tags{ margin:13px 20px 0; }
.proj-card .feats{ margin:14px 20px 20px !important; }

/* ---------- CERT-CARDS (credenciales con logo de marca) ---------- */
.cert-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.cert-card{
  background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
  position:relative; contain:layout paint;
  transition:transform .5s var(--cinema), border-color .4s;
}
.cert-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--cc,var(--gold)) 50%,transparent); }
.cc-stripe{ height:3px; background:var(--cc,var(--gold)); }
.cc-logo-area{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
.cc-icon{
  width:52px; height:52px; border-radius:10px;
  background:color-mix(in srgb,var(--cc,var(--gold)) 14%, transparent);
  border:1px solid color-mix(in srgb,var(--cc,var(--gold)) 28%, transparent);
  display:grid; place-items:center;
  color:var(--cc,var(--gold)); font-size:22px;
}
.cc-logo-img{
  width:52px; height:52px; border-radius:10px; object-fit:contain;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:4px;
}
.cc-badge{
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px;
  border:1px solid color-mix(in srgb,var(--cc,var(--gold)) 40%,transparent);
  color:var(--cc,var(--gold));
}
.cc-badge.live{ background:rgba(63,181,116,.12); border-color:rgba(63,181,116,.4); color:#7fe0a6; }
.cc-body{ padding:14px 20px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.cc-title{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; line-height:1.2; }
.cc-issuer{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; color:var(--paper-dim); margin-top:4px; }
.cc-desc{ font-size:.88rem; line-height:1.55; color:var(--paper-mut); margin-top:8px; text-wrap:pretty; }
.cc-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line); gap:8px; flex-wrap:wrap; }
.cc-date{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.08em; color:var(--paper-dim); }
.cc-link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cc,var(--gold));
  transition:opacity .2s;
}
.cc-link:hover{ opacity:.75; }
.cc-link svg{ width:10px; height:10px; }

/* roadmap timeline */
.roadmap{ display:flex; flex-direction:column; gap:0; }
.rm-item{ display:grid; grid-template-columns:28px 1fr; gap:16px; position:relative; }
.rm-item:not(:last-child)::before{
  content:''; position:absolute; left:13px; top:26px; bottom:-8px; width:1px;
  background:linear-gradient(180deg, var(--line-cyan), transparent);
}
.rm-dot{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-cyan);
  display:grid; place-items:center; background:var(--ink); flex-shrink:0; margin-top:2px; }
.rm-dot i{ font-size:11px; color:var(--cyan); }
.rm-body{ padding-bottom:clamp(18px,3vh,26px); }
.rm-body h4{ font-family:var(--f-display); font-weight:600; font-size:1rem; margin-bottom:4px; }
.rm-body p{ font-size:.88rem; line-height:1.55; color:var(--paper-mut); text-wrap:pretty; }

/* ---------- GUARDIÁN SVG avatares animados ---------- */
.guardian-av{ display:block; width:64px; height:64px; margin-bottom:14px; }

/* Toby — maltés, cola */
@keyframes tobyTail{ 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(15deg)} }
@keyframes tobyEar{ 0%,100%{transform:rotate(3deg) translateX(0)} 50%{transform:rotate(-3deg) translateX(-1px)} }
.t-tail{ transform-origin:26px 50px; animation:tobyTail 1.4s var(--ease) infinite; }
.t-ear{ transform-origin:28px 32px; animation:tobyEar 2.1s var(--ease) infinite; }

/* Venus — sabueso, orejas largas */
@keyframes venusTail{ 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(14deg)} }
@keyframes venusEar{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(5deg) translateY(2px)} }
.v-tail{ transform-origin:56px 54px; animation:venusTail 1.6s var(--ease) infinite; }
.v-ear{ transform-origin:20px 28px; animation:venusEar 2.4s var(--ease) infinite; }

/* Gladys — salchicha, movimiento corporal */
@keyframes gladysWiggle{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.03)} }
@keyframes gladysTail{ 0%,100%{transform:rotate(-20deg)} 50%{transform:rotate(20deg)} }
.g-body{ transform-origin:40px 54px; animation:gladysWiggle 1.8s var(--ease) infinite; }
.g-tail{ transform-origin:10px 42px; animation:gladysTail 1.2s var(--ease) infinite; }

/* Lucy — la grande, cola y cabeza */
@keyframes lucyTail{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(18deg)} }
@keyframes lucyNod{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-3deg)} }
.l-tail{ transform-origin:60px 50px; animation:lucyTail 1.5s var(--ease) infinite; }
.l-head{ transform-origin:40px 36px; animation:lucyNod 3s var(--ease) infinite; }

/* ---------- FORMULARIO DE CONTACTO ---------- */
.contact-form{ display:flex; flex-direction:column; gap:14px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field{ display:flex; flex-direction:column; gap:6px; }
.cf-label{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.cf-input, .cf-textarea{
  /* sin backdrop-filter (6 inputs con blur simultáneo): alpha compensada */
  background:rgba(8,11,18,.85);
  border:1px solid var(--line); border-radius:6px;
  padding:12px 14px; color:var(--paper); font-family:var(--f-text); font-size:.95rem;
  outline:none; transition:border-color .25s;
  width:100%;
}
.cf-input:focus, .cf-textarea:focus{ border-color:var(--gold); }
.cf-input::placeholder, .cf-textarea::placeholder{ color:var(--paper-dim); }
.cf-textarea{ resize:vertical; min-height:120px; }
.cf-send{ width:100%; }
.cf-input option{ background:var(--ink); color:var(--paper); }
.cf-msg{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; padding:10px 14px;
  border-radius:6px; display:none; margin-top:4px; }
.cf-msg.show-ok{ display:block; background:rgba(63,181,116,.12); border:1px solid rgba(63,181,116,.3); color:#7fe0a6; }
.cf-msg.show-err{ display:block; background:rgba(220,60,60,.1); border:1px solid rgba(220,60,60,.3); color:#f87171; }

@media (max-width:860px){
  .diag2{ grid-template-columns:1fr; gap:20px; }
  .vizs{ grid-template-columns:1fr; }
  .cert-cards{ grid-template-columns:1fr 1fr; }
  .cf-row{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .cert-cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .flow-conn-lit,.flow-node,.dash-bar,.stack-layer .led::after,.stack-pulse,.viz-head .live i::after{ animation:none !important; }
}


/* ============================================================
   MÓVIL ≤480px — legibilidad y tap targets (auditoría ola 3)
   Este archivo carga después de core/stages/section/travel:
   estas reglas ganan la cascada a igual especificidad.
   ============================================================ */
@media (max-width: 480px){
  /* iOS Safari hace zoom automático en inputs <16px */
  .cf-input, .cf-textarea{ font-size:16px; }
  /* texto accionable >=14px y alto de tap >=44px */
  .cf-send{ font-size:.9rem; min-height:46px; }
  .cf-label{ font-size:.72rem; }
  .skip-btn{ font-size:.74rem; padding:.85em 1.3em; min-height:44px; }
  .r-item{ min-height:48px; }
  .r-main .p{ font-size:.7rem; }
  .pin-flag .pl{ font-size:.72rem; }
  .pin-flag .nm{ font-size:.78rem; }
  /* canales de contacto (WhatsApp/LinkedIn/Ubicación) legibles */
  .clink{ font-size:.9rem; min-height:44px; }
}