/* ============================================================
   Catálogo Intezia 2026 · Design System · HUD claro
   Paleta de marca: #000 / #F4BA1A / #E58423 / #FFF
   ============================================================ */

/* ---- Tipografía: Graphit (marca) con fallback geométrico ---- */
@font-face{
  font-family:"Graphit"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/Graphit-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Graphit"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/Graphit-Bold.woff2") format("woff2");
}

:root{
  /* color */
  --black:#0a0a0a; --pure-black:#000; --gold:#F4BA1A; --orange:#E58423; --white:#fff;
  --gold-deep:#a8761a;
  --bg:#faf9f6; --bg-2:#f3f2ec; --surface:#fff;
  --line:#e7e6dc; --line-2:#ecebe1;
  --ink:#15140f; --ink-2:#4f4e48; --ink-3:#83817a; --ink-4:#a3a195;
  --dark-surface:#15140f; --dark-line:#2a2820;
  /* tipografía */
  --font-display:"Graphit","Sora","Space Grotesk",system-ui,sans-serif;
  --font-text:"Graphit","Space Grotesk",system-ui,-apple-system,sans-serif;
  /* radios / sombras */
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 6px 18px -10px rgba(20,18,10,.18);
  --sh-2:0 18px 44px -22px rgba(20,18,10,.30);
  --sh-3:0 30px 70px -30px rgba(20,18,10,.45);
  --grad:linear-gradient(135deg,var(--gold),var(--orange));
  /* layout */
  --maxw:1180px; --gutter:clamp(18px,4vw,40px);
  --z-header:50; --z-filter:40; --z-ficha:100;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--font-text); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ===================== FONDO TECNOLÓGICO ===================== */
.techbg{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    linear-gradient(rgba(20,18,10,.028) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(20,18,10,.028) 1px, transparent 1px) 0 0 / 40px 100%,
    radial-gradient(120% 80% at 50% -10%, #fffdf7, var(--bg) 60%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 60%, rgba(0,0,0,.35) 100%);
          mask-image:radial-gradient(130% 100% at 50% 0%, #000 60%, rgba(0,0,0,.35) 100%);
}
.techbg #neural{position:absolute; inset:0; width:100%; height:100%; display:block}
.techbg .orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.42}
.techbg .o1{width:46vw; height:46vw; left:-10vw; top:-8vw; background:radial-gradient(circle,rgba(244,186,26,.5),transparent 65%); animation:drift1 26s ease-in-out infinite alternate}
.techbg .o2{width:40vw; height:40vw; right:-12vw; bottom:-10vw; background:radial-gradient(circle,rgba(229,132,35,.38),transparent 65%); animation:drift2 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(6vw,4vw,0) scale(1.1)}}
@keyframes drift2{to{transform:translate3d(-5vw,-4vw,0) scale(1.08)}}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; margin:0}
::selection{background:var(--gold); color:var(--black)}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); font-weight:700}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(250,249,246,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; gap:16px; height:62px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:26px; width:auto}
.brand .bn{font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:-.01em}
.brand .bn b{color:var(--orange)}
.header-cta{margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--black); color:var(--white); padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
  transition:transform .18s ease, background .18s ease}
.header-cta:hover{transform:translateY(-1px); background:#000}
.header-cta svg{width:16px; height:16px}

/* ===================== HERO (catálogo) ===================== */
.hero{position:relative; overflow:hidden;
  background:radial-gradient(70% 90% at 50% -10%, rgba(244,186,26,.13), transparent 62%);
  border-bottom:1px solid var(--line);
}
.hero-inner{position:relative; text-align:center; display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(40px,7vw,82px); padding-bottom:clamp(28px,4.5vw,48px)}
.hero .crn{position:absolute; width:20px; height:20px; border:2px solid var(--gold); opacity:.8}
.hero .crn.tl{top:14px; left:0; border-right:0; border-bottom:0}
.hero .crn.tr{top:14px; right:0; border-left:0; border-bottom:0}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.7rem); line-height:1.0; margin:.55rem 0 .2rem}
.hero h1 .hl{position:relative; color:var(--orange)}
.hero h1 .hl::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.08em; height:.24em; background:rgba(244,186,26,.42); z-index:-1; border-radius:3px}
.hero .lead{max-width:600px; color:var(--ink-2); font-size:clamp(1rem,1.6vw,1.12rem); margin:1rem auto 0}
.hero .stats{display:flex; gap:clamp(24px,5vw,52px); margin-top:clamp(22px,3vw,34px); justify-content:center}
.hero .stats .n{font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,2rem); line-height:1}
.hero .stats .n .u{color:var(--orange)}
.hero .stats .l{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-top:4px}
.scanline{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(20,18,10,.012) 5px)}

/* ---- Zona de búsqueda (protagonista, centrada) ---- */
.search-zone{position:relative; width:100%; max-width:700px; margin:clamp(26px,4vw,40px) auto 4px;
  display:flex; flex-direction:column; align-items:center; gap:14px}
.search-hero{width:100%; max-width:700px; margin:0; padding:16px 22px; border-radius:16px; box-shadow:var(--sh-2)}
.search-hero svg{width:20px; height:20px}
.search-hero input{font-size:1.05rem}
.search-count{flex:none; font-size:.78rem; color:var(--ink-3); white-space:nowrap; padding-left:14px; border-left:1px solid var(--line); font-variant-numeric:tabular-nums}
.quick{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px}
.quick .qk-label{font-size:.82rem; color:var(--ink-3)}
.qk{font-size:.82rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 13px; transition:all .16s ease}
.qk:hover{border-color:var(--orange); color:var(--ink); transform:translateY(-1px)}
.chips-hero{justify-content:center; margin-top:clamp(20px,3vw,30px)}

/* ---- Globo flotante que señala el buscador ---- */
.search-tip{position:relative; display:inline-flex; align-items:center; gap:11px; max-width:360px;
  background:var(--black); color:#fff; padding:11px 15px; border-radius:13px; font-size:.83rem; line-height:1.32;
  box-shadow:var(--sh-2); animation:bob 2.8s ease-in-out infinite}
.search-tip::after{content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--black)}
.search-tip .tip-pulse{width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none;
  box-shadow:0 0 0 0 rgba(244,186,26,.6); animation:pulse 1.9s infinite}
.search-tip .tip-x{color:#a8a59c; font-size:1.15rem; line-height:.7; flex:none; padding:0 2px}
.search-tip .tip-x:hover{color:#fff}
.search-tip.gone{display:none}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,186,26,.55)} 70%{box-shadow:0 0 0 9px rgba(244,186,26,0)} 100%{box-shadow:0 0 0 0 rgba(244,186,26,0)}}

/* ===================== FILTER BAR ===================== */
/* barra sticky compacta: oculta hasta que el buscador del hero sale de vista */
.filterbar{position:sticky; top:62px; z-index:var(--z-filter);
  background:rgba(250,249,246,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(-10px); pointer-events:none; max-height:0; overflow:hidden;
  transition:opacity .25s ease, transform .25s ease}
.filterbar.show{opacity:1; transform:none; pointer-events:auto; max-height:180px; padding-block:11px}
.filterbar .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.search-mini{flex:0 1 320px; padding:9px 16px}
.filterbar .chips{flex:1 1 auto}
.search{display:flex; align-items:center; gap:11px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:12px 18px; box-shadow:var(--sh-1); max-width:560px}
.search svg{width:18px; height:18px; color:var(--orange); flex:none}
.search input{border:0; outline:0; background:none; width:100%; font-size:.98rem; color:var(--ink)}
.search input::placeholder{color:var(--ink-4)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:8px 15px; font-size:.85rem; color:var(--ink-2); font-weight:500;
  transition:all .16s ease; white-space:nowrap}
.chip:hover{border-color:var(--ink-4); transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--black); color:var(--white); border-color:var(--black)}
.chip .ct{font-size:.72rem; opacity:.6}
.chip[aria-pressed="true"] .ct{opacity:.8}

/* ===================== GRID + SECTIONS ===================== */
main#catalogo{padding-block:clamp(26px,4vw,44px); min-height:60vh}
.section-block{margin-bottom:clamp(34px,5vw,56px)}
.section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.section-head h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.section-head .sh-line{flex:1; height:1px; background:var(--line); min-width:30px}
.section-head .sh-desc{flex-basis:100%; color:var(--ink-3); font-size:.92rem; margin-top:-6px}
.section-head .sh-count{font-size:.78rem; color:var(--ink-4); font-variant-numeric:tabular-nums}

.grid{display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fill, minmax(290px,1fr))}

/* ---- Card de programa ---- */
.card{position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; overflow:hidden;
  box-shadow:var(--sh-1); cursor:pointer; text-align:left; width:100%;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad);
  transform:scaleY(0); transform-origin:top; transition:transform .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#dedcce}
.card:hover::before{transform:scaleY(1)}
.card .c-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.card .code{font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.06em; color:var(--orange)}
.card .dur{font-size:.72rem; color:var(--ink-3); background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; white-space:nowrap}
.card h3{font-size:1.16rem; line-height:1.18; margin-bottom:8px}
.card .obj{color:var(--ink-2); font-size:.9rem; line-height:1.5; margin:0}
.card .c-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-2)}
.card .obj{margin-bottom:16px}
.card .tag{font-size:.72rem; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px}
.card .tag .dot{width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none}
.card .arrow{width:30px; height:30px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center;
  color:var(--ink-2); transition:all .2s ease}
.card .arrow svg{width:15px; height:15px}
.card:hover .arrow{background:var(--black); color:var(--white); transform:translate(2px,-2px)}

/* ---- Card destacada (Rutas) ---- */
.card.feat{background:linear-gradient(150deg,#15140f,#211c10); border:0; color:var(--white)}
.card.feat::before{display:none}
.card.feat .code{color:var(--gold)}
.card.feat h3{color:var(--white)}
.card.feat .obj{color:#c8c6bb}
.card.feat .dur{background:rgba(255,255,255,.08); border-color:var(--dark-line); color:#d8d6cb}
.card.feat .c-foot{border-top-color:var(--dark-line)}
.card.feat .tag{color:#b6b3a6}
.card.feat .arrow{background:var(--grad); color:var(--black)}
.card.feat .star{position:absolute; top:14px; right:16px; color:var(--gold); width:18px; height:18px; opacity:.5}
.card.feat:hover{box-shadow:0 24px 54px -24px rgba(244,186,26,.4)}

/* estado vacío */
.empty{text-align:center; padding:70px 20px; color:var(--ink-3)}
.empty svg{width:42px; height:42px; color:var(--ink-4); margin-bottom:14px}
.empty h3{font-size:1.2rem; color:var(--ink); margin-bottom:6px}
.empty button{margin-top:16px; background:var(--black); color:var(--white); padding:10px 18px; border-radius:999px; font-weight:600; font-size:.88rem}

/* ===================== FOOTER ===================== */
.site-footer{border-top:1px solid var(--line); background:var(--bg-2); padding-block:26px; margin-top:30px}
.site-footer .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; color:var(--ink-3); font-size:.82rem}
.site-footer .sep{color:var(--ink-4)}
.site-footer b{color:var(--ink-2); font-weight:600}

/* ============================================================
   FICHA (overlay) · v4 diagramática
   ============================================================ */
.ficha-overlay{position:fixed; inset:0; z-index:var(--z-ficha); background:rgba(15,14,10,.5);
  backdrop-filter:blur(4px); overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s}
.ficha-overlay.open{opacity:1; visibility:visible}
.ficha{max-width:1080px; margin:clamp(0px,3vh,40px) auto; background:var(--bg); border-radius:clamp(0px,2vw,20px);
  overflow:hidden; box-shadow:var(--sh-3); transform:translateY(16px) scale(.99); opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease}
.ficha-overlay.open .ficha{transform:none; opacity:1}

/* topbar */
.fc-top{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  padding:13px clamp(18px,3vw,28px); background:rgba(250,249,246,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); font-size:.8rem; color:var(--ink-3)}
.fc-top .back{display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600}
.fc-top .back svg{width:16px; height:16px}
.fc-top .codepill{background:var(--black); color:var(--white); border-radius:7px; padding:3px 9px; font-weight:700; font-size:.72rem; letter-spacing:.05em}
.fc-top .crumb{color:var(--ink-3)}
.fc-top .sp{margin-left:auto; display:flex; gap:8px}
.fc-top .ico{width:32px; height:32px; min-width:32px; min-height:32px; border:1px solid var(--line); border-radius:9px;
  display:grid; place-items:center; background:var(--surface); color:var(--ink-2); transition:all .16s ease}
.fc-top .ico:hover{border-color:var(--ink-4); color:var(--ink)}
.fc-top .ico svg{width:16px; height:16px}

/* HERO de ficha */
.fc-hero{display:grid; grid-template-columns:1fr 330px; background:#fbfaf7}
.fc-hL{padding:clamp(26px,3.4vw,38px) clamp(20px,3vw,34px)}
.fc-hL .crumb{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:700}
.fc-hL h1{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.0; margin:.5rem 0 .6rem}
.fc-hL h1 .g{color:var(--orange)}
.fc-hL .objetivo{color:var(--ink-2); font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.55; max-width:480px}
.fc-ring-row{display:flex; align-items:center; gap:22px; margin-top:24px; flex-wrap:wrap}
.ring{width:90px; height:90px; border-radius:50%; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; border:4px solid var(--orange); background:var(--surface); text-align:center}
.ring .rv{font-family:var(--font-display); font-weight:700; font-size:1.15rem; line-height:1; color:var(--ink)}
.ring .rl{font-size:.56rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-top:3px}
.fc-pills{display:flex; flex-direction:column; gap:9px}
.fc-pill{display:inline-flex; align-items:center; gap:9px; font-size:.9rem; color:var(--ink-2)}
.fc-pill .dot{width:9px; height:9px; border-radius:50%; background:var(--orange); flex:none}

.fc-hR{position:relative; background:var(--black); color:var(--white); overflow:hidden;
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,28px) clamp(22px,2.6vw,28px) clamp(34px,4vw,46px);
  clip-path:polygon(36px 0,100% 0,100% 100%,0 100%); display:flex; flex-direction:column}
.fc-hR .ghost{position:absolute; right:-12px; top:-44px; font-family:var(--font-display); font-weight:700;
  font-size:14rem; line-height:1; color:transparent; -webkit-text-stroke:2px rgba(244,186,26,.26); letter-spacing:-.05em; pointer-events:none}
.fc-hR .ghost.star{font-size:11rem; -webkit-text-stroke-width:2px; top:-10px; right:6px}
.fc-hR .cn{position:absolute; width:14px; height:14px; border:2px solid var(--gold)}
.fc-hR .cn.tr{top:11px; right:11px; border-left:0; border-bottom:0}
.fc-hR .cn.bl{bottom:11px; left:11px; border-right:0; border-top:0}
.fc-hR .lbl{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); position:relative; margin-bottom:4px}
.fc-hR .r{display:flex; justify-content:space-between; gap:10px; font-size:.85rem; padding:9px 0; border-bottom:1px solid var(--dark-line); position:relative}
.fc-hR .r .k{color:#8d8b80} .fc-hR .r .v{font-weight:600; text-align:right}
.fc-cta{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--grad); color:var(--black);
  font-weight:700; border-radius:11px; padding:14px; margin-top:16px; font-size:.95rem; position:relative;
  transition:transform .18s ease, filter .18s ease}
.fc-cta:hover{transform:translateY(-2px); filter:brightness(1.04)}
.fc-cta svg{width:17px; height:17px}
.fc-cta2{display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--dark-line);
  color:var(--white); border-radius:11px; padding:11px; margin-top:9px; font-size:.86rem; position:relative; transition:border-color .18s}
.fc-cta2:hover{border-color:#4a4636}
.fc-cta2 svg{width:16px; height:16px}

/* banda Para quién + Herramientas */
.fc-mid{display:grid; grid-template-columns:1.6fr 1fr; border-top:1px solid var(--line)}
.fc-who{background:var(--dark-surface); color:var(--white); padding:clamp(20px,2.6vw,28px); position:relative; overflow:hidden}
.fc-who::before{content:""; position:absolute; right:-70px; top:-46px; width:180px; height:180px; border-radius:50%; border:2px solid rgba(244,186,26,.16)}
.fc-h3{font-family:var(--font-display); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; display:flex; align-items:center; gap:9px; margin-bottom:12px}
.fc-h3::before{content:""; width:16px; height:2px; background:var(--orange); flex:none}
.fc-who .fc-h3{color:var(--white)} .fc-who .fc-h3::before{background:var(--gold)}
.fc-who p{margin:0; color:#cbc9be; font-size:.96rem; line-height:1.6; max-width:440px; position:relative}
.fc-tools{padding:clamp(20px,2.6vw,28px); border-left:1px solid var(--line)}
.tcircles{display:flex; flex-wrap:wrap; gap:16px}
.tc{display:flex; flex-direction:column; align-items:center; gap:7px; width:70px; text-align:center}
.tc .b{width:54px; height:54px; border-radius:50%; background:var(--surface); border:1.5px solid var(--line);
  display:grid; place-items:center; color:var(--ink); box-shadow:var(--sh-1)}
.tc .b svg{width:27px; height:27px}
.tc .b .tc-init{font-family:var(--font-display); font-weight:700; font-size:.95rem}
.tc:first-child .b{background:var(--grad); border:0; color:var(--black)}
.tc .cap{font-size:.74rem; color:var(--ink-2); line-height:1.2}

/* ===== Menú "Hablar con un asesor" ===== */
.asesor-sheet{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px;
  background:rgba(15,14,10,.45); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s}
.asesor-sheet.open{opacity:1; visibility:visible}
.as-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:20px; transform:translateY(10px) scale(.98); transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.asesor-sheet.open .as-card{transform:none}
.as-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.as-head h4{font-size:1.05rem}
.as-close{width:30px; height:30px; border:1px solid var(--line); border-radius:8px; display:grid; place-items:center; color:var(--ink-2)}
.as-close svg{width:15px; height:15px}
.as-sub{color:var(--ink-3); font-size:.85rem; margin:6px 0 14px}
.as-list{display:flex; flex-direction:column; gap:10px}
.as-item{display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease}
.as-item:hover{border-color:var(--orange); transform:translateY(-1px); box-shadow:var(--sh-1)}
.as-av{width:40px; height:40px; min-width:40px; border-radius:50%; background:var(--grad); color:var(--black);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem}
.as-meta{display:flex; flex-direction:column; line-height:1.25; margin-right:auto}
.as-name{font-weight:600; color:var(--ink); font-size:.95rem}
.as-rol{font-size:.76rem; color:var(--ink-3)}
.as-wa{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:#1f8a4c; white-space:nowrap}
.as-wa svg{width:16px; height:16px}

/* TEMARIO · diagrama de recorrido */
.fc-journey{padding:clamp(24px,3vw,32px) clamp(20px,3vw,34px); background:var(--bg-2)}
.journey{position:relative; margin-top:18px}
.jsteps{display:flex; gap:14px; align-items:flex-start; position:relative}
.jsteps::before{content:""; position:absolute; top:35px; left:40px; right:40px; height:3px;
  background:var(--grad); border-radius:2px; z-index:0}
.jstep{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1}
.jstep .circle{width:72px; height:72px; border-radius:50%; background:var(--surface); border:3px solid var(--orange);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none;
  box-shadow:0 10px 22px -10px rgba(229,132,35,.45)}
.jstep:first-child .circle{background:linear-gradient(150deg,#0a0a0a,#241d10); border-color:var(--gold)}
.jstep .circle .cn{font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink)}
.jstep:first-child .circle .cn{color:var(--gold)}
.jstep .circle .cl{font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.jstep:first-child .circle .cl{color:#c9bd92}
.jcard{margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; width:100%; text-align:center}
.jcard .jt{font-family:var(--font-display); font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.18}
.jcard .jo{font-size:.8rem; color:var(--ink-2); line-height:1.42; margin-top:6px}
.jcard .jtemas{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:3px}
.jcard .jtemas li{font-size:.72rem; color:var(--ink-3); line-height:1.35}
/* bandera de meta */
.jflag{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; width:108px; z-index:1}
.jflag .pennant{background:linear-gradient(135deg,#0a0a0a,#241d10); color:var(--gold); font-family:var(--font-display);
  font-weight:700; font-size:.66rem; letter-spacing:.1em; padding:24px 22px; display:grid; place-items:center; height:72px; width:72px; border-radius:50%}
.jflag .cap{font-size:.74rem; color:var(--ink-2); margin-top:16px; text-align:center; line-height:1.3; font-weight:500}

/* ENTREGABLES · sellos */
.fc-deliv{padding:clamp(22px,2.8vw,30px) clamp(20px,3vw,34px)}
.seals{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:8px}
.seal{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.seal .badge{width:58px; height:58px; border-radius:50%; background:var(--surface); border:2px dashed var(--gold);
  display:grid; place-items:center; color:var(--orange)}
.seal .badge svg{width:24px; height:24px}
.seal:last-child .badge{border-style:solid; background:var(--grad); color:var(--black)}
.seal .st{font-size:.84rem; color:var(--ink-2); line-height:1.35}

/* CTA band */
.fc-ctaband{padding:clamp(24px,3vw,32px) clamp(20px,3vw,34px); background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; overflow:hidden}
.fc-ctaband::before{content:""; position:absolute; left:28%; top:-100px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(244,186,26,.2),transparent 65%); pointer-events:none}
.fc-ctaband h4{font-size:clamp(1.2rem,2.2vw,1.55rem); position:relative; max-width:560px}
.fc-ctaband .sub{color:#9a988d; font-size:.85rem; margin-top:6px; position:relative}
.fc-ctaband .go{display:inline-flex; align-items:center; gap:9px; background:var(--grad); color:var(--black);
  font-weight:700; border-radius:12px; padding:15px 26px; font-size:.96rem; white-space:nowrap; position:relative;
  transition:transform .18s ease, filter .18s ease}
.fc-ctaband .go:hover{transform:translateY(-2px); filter:brightness(1.04)}
.fc-ctaband .go svg{width:17px; height:17px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:920px){
  .fc-hero{grid-template-columns:1fr}
  .fc-hR{clip-path:none; border-top:1px solid var(--dark-line)}
  .fc-hR .ghost{font-size:11rem; top:-28px}
  .fc-mid{grid-template-columns:1fr}
  .fc-tools{border-left:0; border-top:1px solid var(--line)}
  /* journey -> vertical */
  .jsteps{flex-direction:column; gap:0; padding-left:8px}
  .jsteps::before{top:14px; bottom:14px; left:35px; right:auto; width:3px; height:auto}
  .jstep{flex-direction:row; align-items:flex-start; gap:16px; width:100%; padding-bottom:18px}
  .jstep .circle{width:56px; height:56px}
  .jstep .circle .cn{font-size:.95rem}
  .jcard{margin-top:0; text-align:left; flex:1}
  .jflag{flex-direction:row; align-items:center; gap:16px; width:100%}
  .jflag .pennant{width:56px; height:56px; padding:0}
  .jflag .cap{margin-top:0; text-align:left}
}
@media (max-width:600px){
  .site-header .wrap{height:56px}
  .filterbar{top:56px}
  .header-cta span{display:none}
  .header-cta{padding:9px}
  .fc-ctaband{flex-direction:column; align-items:flex-start}
  .hero .stats{gap:22px}
  .search-count{display:none}
  .search-hero{padding:14px 18px}
}

/* ===================== ANIMACIONES ===================== */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.card{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.reveal-stagger > *{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}