/* ==========================================================================
   BCC — Services page styles
   ========================================================================== */

/* 1) TOKENS & BASE ---------------------------------------------------------*/
:root{
  --accent:#ed4624;
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0;
  --bg:#ffffff; --bg-alt:#f8fafc;
  --nav-h:64px; --radius:12px;
}
@media (max-width:640px){ :root{ --nav-h:56px; } }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline: 2px solid color-mix(in oklab, var(--accent) 55%, #000 45%); outline-offset: 2px; }
::selection{ background: rgba(237,70,36,.18); }

.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding: clamp(56px, 9vh, 88px) 0; }
.section-alt{ background: var(--bg-alt); }
.lead{ color:var(--muted); }
.eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.small{ font-size:.9rem; color:var(--muted); }
.note{ color:#64748b; font-size:.9rem; margin-top:10px; }

/* 2) NAVBAR ---------------------------------------------------------------*/
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.logo{ height:36px; }
.nav-links{ display:flex; gap:18px; font-size:14px; }
.nav-actions{ display:flex; gap:10px; }
.nav-links a[aria-current="page"]{ color:var(--accent); }

/* 3) BUTTONS & CHIPS ------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px;
  font-weight:700; transition: transform .15s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2,6,23,.10); }
.btn-dark{ background:#0b1220; color:#fff; border-color:#0b1220; }
.btn-ghost{ background:#fff; color:#0b1220; }

.chipbar{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 6px; }
.chip{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:.9rem; background:#fff; color:#0b1220; }

/* 4) HERO -----------------------------------------------------------------*/
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height: calc(100dvh - var(--nav-h));
  display:flex; align-items:center;
  padding-block: clamp(24px, 6vh, 64px);
  background:#fff;
}
.hero-grid{
  display:grid; grid-template-columns: .95fr 1.35fr;
  gap: clamp(24px, 4vw, 48px); align-items:center; width:100%;
}
.hero-copy h1{ font-size: clamp(32px, 5vw, 56px); line-height:1.1; letter-spacing:-.02em; margin:.2em 0; }
.hero-figure img{
  width:100%; height:auto; object-fit:cover;
  border-radius:22px; border:1px solid var(--line); background:#fff;
  box-shadow: 0 40px 80px rgba(2,6,23,.20), 0 16px 32px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.55);
}
.media-caption{ font-size:12px; color:#64748b; opacity:.85; margin-top:6px; }

/* Hero background (diferente al de Products) */
.hero .hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hero .hero-bg .layer{ position:absolute; }

/* Base con acento sutil */
.hero .hero-bg .layer.base{
  inset:-15%;
  background:
    radial-gradient(120% 70% at 85% 20%, color-mix(in oklab, var(--accent) 16%, #fff 84%), transparent 65%) no-repeat,
    radial-gradient(80% 55% at 15% 85%, color-mix(in oklab, var(--accent) 10%, #fff 90%), transparent 70%) no-repeat,
    linear-gradient(180deg, #fff, #fff);
  filter: saturate(105%);
  animation: drift 46s linear infinite;
  opacity:.9;
}
/* Grid técnica */
.hero .hero-bg .layer.grid{
  inset:0;
  background: radial-gradient(circle at 1px 1px, rgba(2,6,23,.06) 1px, transparent 0) 0 0 / 22px 22px;
  mix-blend-mode:multiply; opacity:.55;
}
/* Nodos (servicios conectados) */
.hero .hero-bg .layer.nodes{
  inset:-10%;
  background:
    radial-gradient(closest-side, rgba(2,6,23,.10), transparent 70%) 70% 35% / 22% 22% no-repeat,
    radial-gradient(closest-side, rgba(2,6,23,.08), transparent 70%) 60% 60% / 16% 16% no-repeat,
    radial-gradient(closest-side, rgba(2,6,23,.06), transparent 70%) 80% 70% / 28% 28% no-repeat;
  filter: blur(0.25px);
  animation: floaty 26s ease-in-out infinite alternate;
  opacity:.35;
}
/* Ondas (señales/métodos) */
.hero .hero-bg .layer.waves{
  inset:-20%;
  background:
    conic-gradient(from 200deg at 70% 50%, rgba(2,6,23,.10) 0 120deg, transparent 120deg),
    conic-gradient(from 220deg at 75% 55%, rgba(2,6,23,.08) 0 100deg, transparent 100deg);
  filter: blur(0.35px);
  animation: slowspin 120s linear infinite;
  opacity:.22;
}

/* 5) CARDS & GRIDS --------------------------------------------------------*/
.cards-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2,6,23,.12);
  border-color: rgba(237,70,36,.35);
}
.card img{ width:100%; border-radius:12px; margin-bottom:10px; aspect-ratio: 16 / 10; object-fit:cover; }
.card h3{ margin:.4rem 0 .25rem; }
.card .meta{ color:#64748b; font-size:.95rem; margin-bottom:6px; }
.card .bullets{ margin:8px 0 0; padding-left:18px; color:var(--muted); }
.card .bullets li{ margin:.2rem 0; }
.card.pkg .row-cta{ display:flex; gap:10px; margin-top:10px; }

/* Compact cards (paquetes) */
.cards-compact .card{ padding:16px; }

/* Casos */
.card.case .outcome{ margin-top:8px; color:#0b1220; }

/* 6) TIMELINE -------------------------------------------------------------*/
.timeline{
  display:grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.8vw, 18px); margin-top: 8px;
}
.step{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
  position:relative;
}
.step .badge{
  position:absolute; top:-10px; left:-10px; width:28px; height:28px; border-radius:999px;
  background:#0b1220; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; box-shadow:0 6px 16px rgba(2,6,23,.25);
}

/* 7) SECTORES -------------------------------------------------------------*/
.sectors-grid{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
}
.sector{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
}
.sector h4{ margin:.2rem 0 .4rem; }
.sector .bullets{ margin:0; padding-left:18px; color:var(--muted); }

/* 8) COMPARADOR -----------------------------------------------------------*/
.table-wrap{ overflow-x:auto; }
table.compare{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.compare th, .compare td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); }
.compare thead th{ background:#f8fafc; }

/* 9) EQUIPO ---------------------------------------------------------------*/
.team-blurb{
  display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap;
}
.badges{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:8px 0 0; list-style:none; }
.badges li{
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff; font-size:.9rem;
}

/* 10) FAQ (accordion) -----------------------------------------------------*/
.accordion{ display:grid; gap:10px; }
.faq{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.faq summary{
  list-style:none; cursor:pointer; font-weight:700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq[open] summary{ color:#b43320; }
.faq .faq-body{ color:var(--muted); margin-top:6px; }

/* 11) CTA FINAL -----------------------------------------------------------*/
.cta-final{ background:linear-gradient(180deg,#fff,#fff); }
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  box-shadow: 0 20px 50px rgba(23, 20, 2, 0.01);
}
.cta-actions{ display:flex; gap:10px; }

/* 12) FOOTER --------------------------------------------------------------*/
.footer{ border-top:1px solid var(--line); padding:28px 0; background:#fff; }
.foot-inner{ display:flex; justify-content:center; }
.footer p{ color:#64748b; font-size:12px; margin:0; }

/* 13) ANIMATIONS & ACCESSIBILITY -----------------------------------------*/
@keyframes slowspin { to { transform: rotate(360deg); } }
@keyframes drift    { 50% { transform: translate3d(-1%, 1%, 0) rotate(.4deg);} }
@keyframes floaty   { 0% { transform: translateY(-1%);} 100% { transform: translateY(1%);} }

.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; transform:none !important; }
  .hero .hero-bg .layer{ animation: none !important; }
}

/* 14) RESPONSIVE ----------------------------------------------------------*/
@media (max-width: 1080px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .timeline{ grid-template-columns: repeat(3, 1fr); }
  .sectors-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: repeat(2, 1fr); }
  .sectors-grid{ grid-template-columns: repeat(2, 1fr); }
  .cta-inner{ align-items:flex-start; }
}
@media (max-width: 480px){
  .timeline{ grid-template-columns: 1fr; }
  .sectors-grid{ grid-template-columns: 1fr; }
}




/* ===== Advisor (micro-quiz + recomendación) ===== */
.advisor .quiz{ margin: 12px 0 6px; }
.quiz-row{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-start; }
.quiz-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quiz-group .label{ font-size:.95rem; color:var(--muted); margin-right:4px; }

.seg, .pill{
  border:1px solid var(--line); border-radius:999px; padding:8px 12px;
  background:#fff; font-weight:600; cursor:pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}
.seg.is-active, .seg[aria-pressed="true"],
.pill.is-active, .pill[aria-pressed="true"]{
  background: rgba(237,70,36,.08);
  border-color: rgba(237,70,36,.28);
  color:#b43320;
}

.recommendation{ margin-top:16px; display:grid; gap:16px; }
.rec-main{ display:grid; grid-template-columns: 1.4fr .9fr; gap:16px; align-items:start; }
.rec-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.rec-card:hover{ box-shadow: 0 12px 28px rgba(2,6,23,.12); border-color: rgba(237,70,36,.35); }
.rec-card.alt{ padding:16px; }

.rec-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.rec-meta{ color:#64748b; margin:.3rem 0 .4rem; }

.reasoning{
  background:linear-gradient(180deg,#fff,#fff); border:1px solid var(--line);
  border-radius:16px; padding:16px;
}
.reasoning .why{ font-weight:700; margin-bottom:6px; }

.rec-alt{ display:grid; grid-template-columns: 1fr; }

/* Responsive */
@media (max-width: 960px){
  .rec-main{ grid-template-columns: 1fr; }
}




/* =============== QUÉ NECESITAS (Selector Maestro) =============== */
.needs-wrap{ display:grid; grid-template-columns: 1.35fr .9fr; gap:20px; align-items:start; }
.needs-head{ grid-column: 1 / -1; }
.needs-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px);
}
.need-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px;
  cursor:pointer; outline: none;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.need-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,6,23,.12); border-color: rgba(237,70,36,.35); }
.need-card.is-active{ border-color: rgba(237,70,36,.45); box-shadow: 0 12px 28px rgba(2,6,23,.12); }
.need-card[aria-selected="true"] h3{ color:#b43320; }
.need-card h3{ margin:.4rem 0 .25rem; }
.need-card p{ color:var(--muted); }

.need-media{
  position:relative; border-radius:12px; overflow:hidden;
  aspect-ratio: 16 / 10; margin-bottom:10px; background:#fff;
}
.need-media video{ width:100%; height:100%; object-fit:contain; display:block; }

/* Demo antes/después */
.demo-beforeafter{ --split:50; }
.demo-beforeafter .img-before,
.demo-beforeafter .img-after { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.demo-beforeafter .img-after{ clip-path: polygon(0 0, calc(var(--split,50)*1%) 0, calc(var(--split,50)*1%) 100%, 0 100%); }
.demo-beforeafter .demo-slider{
  position:absolute; left:0; right:0; bottom:10px; width:80%; margin:0 auto; display:block;
  accent-color: var(--accent);
}

/* Panel sticky */
.need-detail{
  position: sticky; top: calc(var(--nav-h) + 12px);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow: 0 20px 50px rgba(2,6,23,.08);
  align-self:start;
}
.detail-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.detail-sub{ color:var(--muted); }
.quick-specs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.badge{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff; font-size:.9rem; }

/* A11y focus */
.need-card:focus-visible{ outline: 2px solid color-mix(in oklab, var(--accent) 55%, #000 45%); outline-offset: 2px; }

/* Responsive */
@media (max-width: 1080px){
  .needs-wrap{ grid-template-columns: 1fr; }
  .need-detail{ order: 3; }
}
@media (max-width: 720px){
  .needs-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .needs-grid{ grid-template-columns: 1fr; }
}



/* ============== PROCESS v2 (roadmap por track) ============== */
.process-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 16px;
}
.ptab{
  border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:#fff; font-weight:700; cursor:pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.ptab.is-active, .ptab[aria-selected="true"]{
  background: rgba(237,70,36,.08); border-color: rgba(237,70,36,.28); color:#b43320;
}

.pgrid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px);
}
.pstep{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; position:relative;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.pstep:hover{ box-shadow: 0 12px 28px rgba(2,6,23,.12); border-color: rgba(237,70,36,.35); }
.pstep .badge{
  position:absolute; top:-10px; left:-10px; width:28px; height:28px; border-radius:999px;
  background:#0b1220; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  box-shadow:0 6px 16px rgba(2,6,23,.25);
}
.pstep h3{ margin:.2rem 0 .2rem; }
.p-duration{ color:#0b1220; font-weight:700; margin-bottom:6px; }
.pgate{ margin-top:6px; font-size:.95rem; }
.pgate .p-gate{ font-weight:700; }
.p-client .label{ font-size:.9rem; color:#64748b; margin-top:6px; }

.preadiness{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; margin-top:18px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
}
.checklist{ list-style:none; padding-left:0; margin:6px 0 0; display:grid; gap:8px; }
.checklist input{ transform: translateY(1px); }

.riskbar .bar{
  width:100%; height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; border:1px solid var(--line);
}
.riskbar .bar span{
  display:block; height:100%; width:0%; background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  transition: width .35s ease;
}
.risk-label{ margin-top:6px; color:#0b1220; font-weight:700; }

@media (max-width: 1080px){
  .pgrid{ grid-template-columns: repeat(2, 1fr); }
  .preadiness{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .pgrid{ grid-template-columns: 1fr; }
}


/* ============== PROCESS — Compact ============== */
.process-compact .pc-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 12px; }
.process-compact .pc-tab{
  border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:#fff; font-weight:700; cursor:pointer;
  transition:.2s;
}
.process-compact .pc-tab.is-active, .process-compact .pc-tab[aria-selected="true"]{
  background: rgba(237,70,36,.08); border-color: rgba(237,70,36,.28); color:#b43320;
}

.process-compact .pc-summary{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.process-compact .pc-summary .badge.muted{ opacity:.8; }

.process-compact .pc-bar{
  position:relative; border:1px solid var(--line); border-radius:14px; padding:8px; background:#fff;
  display:flex; gap:6px; overflow:auto; scrollbar-width:thin;
}
.process-compact .pc-seg{
  position:relative; min-width:56px; height:56px; border-radius:10px; background:#f8fafc; border:1px solid var(--line);
  flex: 0 0 auto; display:flex; align-items:center; justify-content:center; color:#0b1220; font-weight:700;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease, background .2s ease;
}
.process-compact .pc-seg[data-active="true"]{ background: rgba(237,70,36,.08); border-color: rgba(237,70,36,.28); color:#b43320; }
.process-compact .pc-seg:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,.10); }

.process-compact .pc-seg .seg-label{
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:12px; color:#64748b; white-space:nowrap;
}
.process-compact .pc-seg .pc-tip{
  position:absolute; inset:auto auto calc(100% + 8px) 50%; transform:translateX(-50%); min-width:220px;
  background:#0b1220; color:#fff; border-radius:10px; padding:10px; font-size:12px; line-height:1.35;
  border:1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(2,6,23,.28);
  opacity:0; pointer-events:none; transition:.18s; z-index:5;
}
.process-compact .pc-seg:focus-visible .pc-tip,
.process-compact .pc-seg:hover .pc-tip{ opacity:1; }

.process-compact .pc-actions{ display:flex; gap:10px; margin-top:12px; }

.process-compact .pc-details{ margin-top:12px; }
.process-compact .pc-details-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.process-compact .pc-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px;
}
.process-compact .pc-card h4{ margin:.1rem 0 .3rem; font-size:1rem; }
.process-compact .pc-card .meta{ color:#0b1220; font-weight:700; margin-bottom:6px; }
.process-compact .pc-card .gate{ font-size:.9rem; margin-top:6px; }
.process-compact .pc-card .gate strong{ color:#0b1220; }

@media (max-width: 1080px){
  .process-compact .pc-details-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .process-compact .pc-details-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .process-compact .pc-seg{ transition:none !important; }
  .process-compact .pc-seg .pc-tip{ transition:none !important; }
}