/* Estilo compartido de las páginas públicas de Kynexo (inicio, precios, rubros…). */
:root{
  --bg:#0B0B0B;--surface:#161514;--surface2:#211F1C;--surface3:#2B2825;--ink:#F4F3F1;--muted:#B9B5AE;--accent:#FF4D1A;--paper:#F4F3F1;--ok:#3DDC84;
  --m:clamp(16px,2.4vw,36px);
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.75rem,1.2rem + 5.4vw,6rem);
  --gap:clamp(120px,15vh,220px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{display:block;max-width:100%;height:auto}
.foto{filter:saturate(.82) contrast(1.06)}
.d{font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;text-wrap:balance}
.lead{font-size:var(--step-lead);line-height:1.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:0 30px;background:var(--accent);color:#140700;font:500 1.06rem Barlow,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background-color .15s}
.btn:hover{background:#ff6a3d}.btn:active{transform:scale(.97)}
.tl{font-size:1rem;color:var(--muted);text-underline-offset:4px;transition:color .15s}.tl:hover{color:var(--ink)}
/* foco con teclado: :root suma peso para ganarle a los botones con all:unset; sobre naranja, recuadro oscuro */
:root :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.t1 :focus-visible,.c-acc :focus-visible,.r-acc :focus-visible,.plan.centro :focus-visible,.res :focus-visible,.b3 :focus-visible{outline-color:#140700}
.wrap{padding-left:var(--m);padding-right:var(--m)}
.sec{padding-top:var(--gap);padding-bottom:var(--gap)}

/* navegación */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--m);background:var(--bg)}
nav img{height:18px;width:auto}
nav ul{display:flex;gap:clamp(18px,3vw,44px);list-style:none;font-size:.98rem;align-items:center}
nav ul a{text-decoration:none;color:var(--muted);transition:color .15s}nav ul a:hover,nav ul a[aria-current=page]{color:var(--ink)}nav ul a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}
nav ul a.btn{min-height:42px;padding:0 18px;font-size:.95rem;color:#140700}
/* Ingresar: el acceso de quien ya es cliente, más visible que un link */
nav ul a.ing{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;background:var(--surface2);color:var(--ink);font-weight:500;transition:background-color .15s}nav ul a.ing:hover{background:var(--surface3)}
.menu-m>a.ing{margin-top:8px;padding:14px 16px;background:var(--surface2);font-weight:500}
/* menú desplegable de rubros */
.dd{position:relative}
.dd-b,.menu-b{all:unset;cursor:pointer;color:var(--muted);transition:color .15s}.dd-b:hover,.dd-b[aria-expanded=true],.menu-b:hover{color:var(--ink)}
.dd-b span{font-size:.8em;margin-left:2px;display:inline-block;transition:transform .2s}.dd-b[aria-expanded=true] span{transform:rotate(180deg)}
.dd-p{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);display:none;grid-template-columns:1fr 1fr;gap:2px;min-width:360px;padding:10px;background:var(--surface);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.dd-p.on{display:grid}.dd-p.uno{grid-template-columns:1fr;min-width:240px}
.dd-p a{padding:12px 14px;color:var(--ink);font:700 22px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;text-decoration:none;transition:background-color .15s,color .15s}
.dd-p a:hover{background:var(--surface2);color:var(--accent)}
.menu-li{display:none}
.menu-m{padding:8px var(--m) 24px;background:var(--bg);display:flex;flex-direction:column}
.menu-m[hidden]{display:none}
.menu-m>a{padding:14px 0;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.menu-m b{margin-top:16px;color:var(--muted);font-weight:500}
.menu-r{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.menu-r a{padding:12px 0;font:700 24px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;text-decoration:none;color:var(--ink)}
nav{flex-wrap:wrap}.menu-m{flex-basis:100%}

/* fragmentos de la app (data-ui) */
[data-ui]{font-family:Barlow,sans-serif;text-transform:none;letter-spacing:0;line-height:1.35;color:var(--ink)}
.app{background:var(--surface);font-size:15px}
.app-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--surface2);font-weight:500}
.app-h small{color:var(--muted);font-weight:400}
.chip{display:inline-block;padding:2px 8px;font-size:12.5px;background:var(--surface3);color:var(--muted)}
.chip.acc{background:rgba(255,77,26,.16);color:#FF8A63}


/* selector de período */
.per{display:inline-flex;gap:6px;margin-top:40px;background:var(--surface);padding:6px}
.per button{all:unset;cursor:pointer;padding:12px 20px;white-space:nowrap;font-weight:500;color:var(--muted);transition:background-color .15s,color .15s}
.per button:hover{color:var(--ink)}.per button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
/* preguntas */
.faq h2{font-size:clamp(48px,5.6vw,100px);max-width:16ch}
.faq-l{margin-left:34%;margin-top:80px;max-width:820px}
.faq details{padding:18px 24px;transition:background-color .2s}
.faq details[open]{background:var(--surface)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:clamp(20px,1.6vw,24px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:12px;max-width:52ch;color:#DDD9D3}
.faq details+details{margin-top:12px}

/* pie */
footer{position:relative;overflow:hidden;min-height:100svh;background:var(--paper);color:var(--bg);padding-top:clamp(90px,13vh,150px)}
footer .top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
footer h2{grid-column:1/8;grid-row:1;font-size:clamp(52px,5.8vw,104px)}
footer .btns{grid-column:1/8;grid-row:2;margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
footer .btn{background:var(--bg);color:var(--paper)}footer .btn:hover{background:#2a2725}
footer .btn.sec2{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 2px var(--bg)}
footer .links{grid-column:10/13;grid-row:1/3;list-style:none;display:flex;flex-direction:column;gap:10px}
footer .links a{text-decoration:none}footer .links a:hover{text-decoration:underline}
footer .legal{position:absolute;left:var(--m);right:var(--m);bottom:calc(27.5vw * .66);display:flex;justify-content:space-between;gap:24px;font-size:var(--step-small)}
footer .credits{max-width:72ch}
footer .marca{position:absolute;left:calc(var(--m) - .03em);bottom:0;font-size:27.5vw;white-space:nowrap;transform:translateY(27%);line-height:.8}


/* menú: el completo no entra en pantallas medianas, así que hasta 1080 px se usa el botón Menú */
@media (max-width:1080px){nav ul li{display:none}nav ul li:last-child,nav ul li.menu-li{display:block}}
@media (min-width:1081px){.menu-m{display:none!important}}

/* celular y movimiento (comunes) */
@media (max-width:820px){
  .btn{width:100%}nav ul a.btn{width:auto}
  .faq h2{font-size:11vw}.faq-l{margin-left:0}
  footer .top{grid-template-columns:1fr}footer h2,footer .btns,footer .links{grid-column:1;grid-row:auto}
  footer .links{margin-top:32px;flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  footer .legal{flex-direction:column;bottom:calc(34vw * .7)}footer .marca{font-size:34vw}
}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}
}