/* AtendiGo · componentes de páginas internas (se carga después de atendigo.css) */

.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}

/* ---------- menú: escritorio en línea, celular como panel desplegable ---------- */
.nav-menu{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav-menu .nav-links{margin:0}
.menu-toggle{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:auto;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:background .2s,border-color .2s}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s,background .2s}
.menu-toggle span:nth-child(1){top:14px}
.menu-toggle span:nth-child(2){top:20.5px}
.menu-toggle span:nth-child(3){top:27px}
.site-header.open .menu-toggle{background:var(--night);border-color:var(--night)}
.site-header.open .menu-toggle span{background:#fff}
.site-header.open .menu-toggle span:nth-child(1){top:20.5px;transform:rotate(45deg)}
.site-header.open .menu-toggle span:nth-child(2){opacity:0}
.site-header.open .menu-toggle span:nth-child(3){top:20.5px;transform:rotate(-45deg)}

@media (max-width:820px){
  .menu-toggle{display:block}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:24px;margin:0;padding:8px 20px 28px;background:var(--night);box-shadow:0 28px 40px -24px rgba(7,16,29,.55);max-height:calc(100vh - 72px);overflow-y:auto}
  .site-header.open{background:var(--ground);border-bottom-color:var(--line)}
  .site-header.open .nav-menu{display:flex}
  .nav-menu .nav-links{display:grid;gap:0}
  .nav-menu .nav-links a{display:flex;justify-content:space-between;align-items:center;padding:17px 4px;font:500 19px var(--display);color:#DCE8FF;border-bottom:1px solid #1C2A40}
  .nav-menu .nav-links a::after{content:"→";font-family:var(--body);color:#6F82A1}
  .nav-menu .nav-links a:hover,.nav-menu .nav-links a[aria-current="page"]{color:var(--mint)}
  .nav-menu .nav-cta{display:block}
  .nav-menu .nav-cta .btn{display:flex;justify-content:center;width:100%;padding:16px 20px;font-size:16px;background:var(--mint);color:var(--night)}
  .nav-menu .nav-cta .btn:hover{background:#fff}
}
@media (prefers-reduced-motion:reduce){.menu-toggle,.menu-toggle span{transition:none}}

/* ---------- migas y cabecera de página ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 28px;padding:0;font:500 12px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink)}

.page-hero{padding:40px 0 56px;border-bottom:1px solid var(--line)}
.page-hero + section:not(.tinted){padding-top:48px}
/* variante compacta: el contenido sigue directo, sin divisoria (p. ej. contacto) */
.page-hero.compact{padding-bottom:40px;border-bottom:0}
.page-hero.compact + section{padding-top:0}
.page-hero-grid{display:grid;gap:56px;align-items:start}
.page-hero-grid.has-aside{grid-template-columns:1.3fr .7fr}
.page-hero-grid.has-aside.even{grid-template-columns:1fr 1fr;align-items:center}
.page-hero h1{font-size:clamp(36px,4.6vw,56px)}
.page-hero .hero-copy{gap:22px}

.hero-aside{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:22px}
.aside-label{margin:0 0 12px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hero-aside .kpis{margin:0}
.aside-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.aside-links li{border-bottom:1px solid var(--line)}
.aside-links a{display:flex;justify-content:space-between;padding:11px 0;text-decoration:none;font-size:15px;color:var(--ink-2)}
.aside-links a::after{content:"↓";color:var(--ink-3)}
.aside-links a:hover{color:var(--accent)}

/* ---------- tarjetas ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:10px;align-content:start;color:var(--ink)}
.tinted .card{background:var(--ground)}
.card h3{font-size:19px}
.card p{margin:0;color:var(--ink-2);font-size:15.5px}
.card-link{text-decoration:none;transition:border-color .2s,transform .2s}
.card-link:hover{border-color:var(--ink-3)}
.card-link .more{font:500 14px var(--body);color:var(--accent);margin-top:6px}
.card-cta,.tinted .card-cta{background:var(--ink);border-color:var(--ink)}
.card-cta h3{color:#fff}
.card-cta p{color:#9FB0C8}
.card-cta .more{color:var(--mint)}
.card-cta:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.card-link:hover{transform:translateY(-2px)}}

.bullets{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.bullets li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ink-2)}
.bullets li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1.5px;background:var(--accent-bright)}

/* número de paso dentro del flujo */
.int-grid.flow .step-num{font:300 36px/1 var(--display);letter-spacing:-.02em;color:var(--accent-bright);margin-bottom:4px}

/* chips dentro del flujo */
.int-grid.flow .chip{font:500 11px/1 var(--mono);color:var(--ink-2);background:var(--tint);opacity:1;justify-self:start;margin-top:8px}
.tinted .int-grid.flow .chip{background:var(--surface);border:1px solid var(--line)}

/* ---------- soluciones por área ---------- */
.area{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;scroll-margin-top:96px}
.area + .area{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.area .section-head{margin-bottom:0}
.area .kpis{margin-top:8px}
.proc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.proc-list li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}
.proc-list b{font:500 18px/1.3 var(--display)}
.proc-list span{color:var(--ink-2);font-size:15.5px}

/* ---------- índice de industrias ---------- */
.ind-group{scroll-margin-top:96px}
.ind-group + .ind-group{margin-top:56px}
.ind-group-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:end;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.ind-group-head h2{font-size:clamp(26px,2.8vw,34px)}
.ind-group-head p{margin:0;color:var(--ink-2)}

/* ---------- demo ---------- */
.demo-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:grid;gap:7px}
.form-field label{font:500 14px var(--body);color:var(--ink)}
.optional{font-weight:400;color:var(--ink-3)}
.form-field input,.form-field select,.form-field textarea{width:100%;font:400 16px var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.form-field textarea{min-height:150px;resize:vertical;line-height:1.5}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:none;border-color:var(--accent-bright);box-shadow:0 0 0 3px var(--accent-soft)}
.form-card .btn{justify-self:start}
.form-note{margin:0;font-size:13px;color:var(--ink-3)}
.contact-aside{display:grid;gap:20px}
.aside-title{font:500 18px var(--display);margin:0 0 6px}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.contact-list li:last-child{border-bottom:0}
.contact-list span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.contact-list a{color:var(--ink);text-decoration:none}
.contact-list a:hover{color:var(--accent)}
.next-steps{margin:0;padding:0 0 0 20px;display:grid;gap:10px;color:var(--ink-2);font-size:15px}
.next-steps li::marker{font:500 13px var(--mono);color:var(--accent)}

/* ---------- chat de demostración ---------- */
.chat{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -30px rgba(7,16,29,.22);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;height:560px;min-width:0}
.chat-preview{height:auto;grid-template-rows:auto auto}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chat-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font:500 15px var(--display)}
.chat-name{font:500 15px var(--display)}
.chat-status{font:500 11.5px var(--mono);color:var(--mint-ink)}
.chat-reset{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;font:500 12.5px var(--body);color:var(--ink-2);padding:7px 12px;cursor:pointer}
.chat-reset:hover{border-color:var(--ink);color:var(--ink)}
.chat-body{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--ground);overscroll-behavior:contain}
.msg{display:flex}
.msg.user{justify-content:flex-end}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.45;background:var(--surface);border:1px solid var(--line);color:var(--ink);overflow-wrap:anywhere}
.msg.bot .bubble{border-bottom-left-radius:4px}
.msg.user .bubble{background:var(--ink);border-color:var(--ink);color:#fff;border-bottom-right-radius:4px}
.bubble time{display:block;margin-top:4px;font:500 10.5px var(--mono);color:var(--ink-3);text-align:right}
.msg.user .bubble time{color:#8FA1C2}
.typing{display:flex;gap:4px;padding:14px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:typing 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;font:400 15px var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:11px 16px}
.chat-input input:focus-visible{outline:none;border-color:var(--accent-bright)}
.chat-input button{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:0 18px;font:500 14px var(--body);cursor:pointer}
.chat-input button:hover{background:var(--accent)}
.chat-input button:disabled,.chat-input input:disabled{opacity:.55;cursor:default}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px}
.chat-chip{font:500 14px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer}
.chat-chip:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.typing span{animation:none;opacity:.6}}

/* ---------- pie: industrias ---------- */
.foot-industries{margin-top:44px;padding-top:28px;border-top:1px solid #16243A}
.foot-industries h4{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#DCE8FF;margin:0 0 14px}
.foot-industries ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px}
.foot-industries a{text-decoration:none;color:#8FA1C2}
.foot-industries a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .page-hero-grid.has-aside,.page-hero-grid.has-aside.even,.area,.contact-grid,.demo-split,.ind-group-head{grid-template-columns:1fr;gap:36px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .card-grid,.form-row{grid-template-columns:1fr}
  .form-card{padding:22px}
  .chat{height:520px}
  .area + .area{margin-top:40px;padding-top:40px}
}