/* ============================================================
   TÓTEM COMPUTER — totem.css
   Design system · dirección "retablo" (elegida 2026-08-19)
   Bloques de color, líneas gruesas, sombras duras, minúsculas.
   Única fuente de verdad de estilo. Nada de CSS suelto por página.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* color */
  --paper:#f4f1e8;   /* fondo base cálido */
  --ink:#161512;     /* negro tótem: texto, bordes, bloques */
  --mint:#43ffa6;    /* CTA principal y acentos de producto */
  --blue:#005eff;    /* links, bloque empresas */
  --coral:#ff5a3c;   /* kickers, acentos calientes */
  --sun:#ffc843;     /* bloques de arte, acentos secundarios */
  --white:#ffffff;   /* tarjetas y superficies */

  /* estructura */
  --bw:3px;                       /* grosor de línea canónico */
  --shadow:8px 8px 0 var(--ink);  /* sombra dura por defecto */
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --maxw:1240px;
  --pad:24px;

  /* tipografía */
  --font:'Archivo',system-ui,sans-serif;
  --wide:125%;   /* font-stretch para headings (Archivo variable) */
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-weight:900;
  font-stretch:var(--wide);
  text-transform:lowercase;
  line-height:1;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(38px,5.6vw,72px)}
@media(max-width:380px){h1{font-size:clamp(26px,9vw,34px)}}
h2{font-size:clamp(30px,4.4vw,54px);max-width:800px}
h3{font-size:clamp(20px,2.4vw,26px)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
::selection{background:var(--mint);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- utilidades de color ---------- */
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-mint{background:var(--mint)}
.bg-sun{background:var(--sun)}
.bg-coral{background:var(--coral)}
.bg-blue{background:var(--blue);color:#fff}
.bg-white{background:var(--white)}

/* ---------- texto ---------- */
.kick{
  font-weight:900;font-size:13px;letter-spacing:.1em;
  color:var(--coral);margin-bottom:14px;text-transform:lowercase;
}
.bg-ink .kick{color:var(--mint)}
.sect-sub{margin-top:18px;font-size:17px;max-width:560px}
.hl{background:var(--mint);padding:0 10px;display:inline-block}
.hl-sun{background:var(--sun);padding:0 10px;display:inline-block}
.link{font-weight:900;border-bottom:3px solid var(--ink)}
.bg-ink .link{border-color:var(--mint)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mint);color:var(--ink);
  font-weight:900;padding:16px 28px;font-size:16px;
  border:var(--bw) solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.btn .bico{height:19px;width:auto;flex-shrink:0}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.alt{background:var(--sun)}
.btn.wa{background:var(--white)}
.btn.sm{padding:12px 20px;font-size:14px;box-shadow:var(--shadow-sm)}
.btn.sm:hover{box-shadow:1px 1px 0 var(--ink)}

/* ---------- nav canónica ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);border-bottom:var(--bw) solid var(--ink);
  background:var(--paper);position:sticky;top:0;z-index:50;
}
.nav .logo{flex-shrink:0}
.nav .logo img{height:26px;width:auto}
.nav ul{display:flex;gap:24px;list-style:none;font-weight:700;font-size:15px}
.nav ul a:hover{color:var(--blue)}
.nav .active{color:var(--blue)}
.nav .burger{display:none;background:none;border:var(--bw) solid var(--ink);padding:8px 12px;font-weight:900;font-size:14px;cursor:pointer}
.nav-login{font-weight:900;font-size:14px;white-space:nowrap;text-transform:lowercase}
.nav-login:hover{color:var(--blue)}
.nav.scrolled .nav-login:hover{color:var(--mint)}
@media(max-width:600px){.nav-login{display:none}}
.nav .btn.sm{white-space:nowrap}
/* el cta dentro del menú solo existe en móvil */
.nav .menu-cta{display:none}

/* ---------- dropdown de empresas en nav ---------- */
.nav li.has-sub{position:relative}
.nav .subtog{display:none}
.nav .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;display:none;z-index:60}
.nav li.has-sub:hover .sub,.nav li.has-sub:focus-within .sub{display:block}
.sub-box{border:var(--bw) solid var(--ink);background:var(--white);box-shadow:var(--shadow-sm);width:310px;color:var(--ink);position:relative;padding-left:34px}
/* franja lateral estilo menú inicio win98: título vertical de abajo hacia arriba */
/* el fondo negro es un pseudo-elemento del panel: inmune al cascade de spans */
.sub-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:var(--ink)}
.sub-stripe{position:absolute;left:0;top:0;bottom:0;width:34px;margin:0!important;pointer-events:none}
.sub-stripe b{
  position:absolute;left:50%;bottom:16px;
  transform-origin:left bottom;
  transform:rotate(-90deg) translateY(50%);
  white-space:nowrap;color:var(--mint);
  font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:lowercase;font-stretch:125%;
  line-height:1;
}
.sub-box a{display:block;padding:14px 18px;border-bottom:1px solid var(--hair,#e7e7e3)}
.sub-box a:last-child{border-bottom:none}
.sub-box a:hover{background:var(--mint);color:var(--ink)}
.sub-box b{display:block;font-weight:900;font-size:14px;text-transform:lowercase}
.sub-box span{display:block;font-size:12.5px;color:#5a5750;font-weight:500;margin-top:2px}
/* variante ancha: resumen + grid de casos de uso */
.sub-box.wide{width:560px}
.sub-label{padding:14px 18px 8px;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:lowercase;color:var(--coral)}
.sub-cases{display:grid;grid-template-columns:1fr 1fr}
.sub-cases a{padding:10px 18px;border-bottom:1px solid var(--hair,#e7e7e3);font-weight:700;font-size:13.5px;text-transform:lowercase}
.sub-cases a:nth-last-child(-n+2){border-bottom:none}
.sub-cases a:hover{background:var(--mint)}

/* ---------- pila sticky: nav + breadcrumb de sección ---------- */
.stack{position:sticky;top:0;z-index:50}
.stack .nav{position:static}
.crumb{background:var(--ink);color:var(--paper);padding:10px var(--pad);font-weight:700;font-size:13px;text-transform:lowercase;border-bottom:var(--bw) solid var(--ink)}
.crumb a{color:var(--mint);font-weight:900}
.crumb a:hover{text-decoration:underline}
.crumb .sep{margin:0 10px;opacity:.6}

/* ---------- secciones ---------- */
section{padding:88px 0;border-bottom:var(--bw) solid var(--ink)}
section.tight{padding:56px 0}

/* cierres centrados: h2 tiene max-width, hay que centrar el bloque también */
.final{text-align:center}
.final h2{margin-left:auto;margin-right:auto}
.final .sect-sub{margin-left:auto;margin-right:auto}

/* ---------- ticker ---------- */
.ticker{
  border-bottom:var(--bw) solid var(--ink);background:var(--blue);color:#fff;
  overflow:hidden;white-space:nowrap;padding:12px 0;
  font-weight:900;font-size:15px;text-transform:lowercase;
}
.ticker span{display:inline-block;padding-left:100%;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ticker span{animation:none;padding-left:0}}
.ticker.boxed{
  background:var(--ink);color:var(--paper);
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
}
.ticker.boxed span{animation-duration:32s}

/* ---------- nubes a la deriva (estilo mario) ---------- */
/* uso: dentro de un contenedor con position:relative + overflow:hidden.
   el contenido de la sección debe llevar position:relative;z-index:1 */
.cloud-drift{
  position:absolute;left:100%;z-index:0;pointer-events:none;
  animation:drift linear infinite;
}
.cloud-drift path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.cloud-drift.faint{opacity:.4}
@keyframes drift{to{transform:translateX(-130vw)}}
@media(prefers-reduced-motion:reduce){.cloud-drift{animation:none;display:none}}

/* ---------- tarjetas ---------- */
.card{
  border:var(--bw) solid var(--ink);background:var(--white);
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
}
.card:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.card .img{border-bottom:var(--bw) solid var(--ink);padding:28px;display:flex;justify-content:center}
.card .body{padding:24px 28px}
.card-blue{box-shadow:8px 8px 0 var(--blue)}
.card-static:hover{transform:none;box-shadow:var(--shadow)}

/* ---------- chips ---------- */
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chips button,.chips span{
  border:var(--bw) solid var(--ink);background:var(--white);
  font-family:var(--font);font-weight:900;font-size:14px;padding:10px 18px;
  cursor:pointer;text-transform:lowercase;
}
.chips .on{background:var(--mint)}
.chips button:hover{background:var(--sun)}
.chips .on:hover{background:var(--mint)}

/* ---------- marco de demo ---------- */
.demo-wrap{position:relative}
.demo-frame{
  aspect-ratio:16/9;background:var(--ink);border:var(--bw) solid var(--ink);
  box-shadow:10px 10px 0 var(--mint);position:relative;overflow:hidden;
}
.demo-frame video,.demo-frame img{width:100%;height:100%;object-fit:cover}
.demo-frame .caption{
  position:absolute;top:14px;left:14px;background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:700;padding:8px 14px;border:2px solid var(--paper);
}
.demo-wrap .counter{
  position:absolute;bottom:-18px;right:24px;background:var(--sun);
  border:var(--bw) solid var(--ink);padding:8px 14px;font-weight:900;
  font-size:14px;color:var(--ink);z-index:2;
}

/* ---------- listas de logos / clientes ---------- */
.blocklist{display:flex;flex-wrap:wrap;list-style:none;border:var(--bw) solid var(--ink);background:var(--white)}
.blocklist li{
  padding:16px 24px;font-weight:900;font-size:16px;
  border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  display:flex;align-items:center;gap:10px;
}
.blocklist img{height:22px}

/* ---------- footer canónico ---------- */
footer{background:var(--ink);color:var(--paper);padding:56px var(--pad) 36px;font-size:14px}
footer .friends{display:block;width:min(280px,100%);height:auto;margin:0 0 28px;filter:invert(1) brightness(0.96)}
footer .cols{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h4{font-size:14px;color:var(--mint);margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
/* hijos indentados y discretos en el sitemap del footer */
footer li.fsub{padding-left:12px}
footer li.fsub2{padding-left:24px;font-size:12.5px;opacity:.8;margin-bottom:5px}
footer a:hover{color:var(--mint)}
footer .base{max-width:var(--maxw);margin:36px auto 0;padding-top:24px;border-top:1px solid #3a3833;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#a5a29a}
footer .logo{height:24px;filter:invert(1);margin-bottom:16px}

/* ---------- whatsapp flotante ---------- */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:60;
  background:#25D366;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  transition:transform .12s,box-shadow .12s;
}
.wa-float:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.wa-float svg{width:30px;height:30px;fill:var(--ink)}

/* ---------- responsivo ---------- */
@media(max-width:900px){
  .nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:var(--bw) solid var(--ink);
    flex-direction:column;gap:0;
  }
  .nav ul.open{display:flex;max-height:calc(100vh - 76px);overflow-y:auto}
  .nav ul li{border-top:1px solid #d8d4c8}
  .nav ul a{display:block;padding:16px var(--pad)}
  .nav .burger{display:block}
  /* dropdown: en móvil los subitems van expandidos dentro del menú */
  .nav .sub{position:static;transform:none;padding-top:0}
  /* subitems ocultos por default en móvil; se abren con el toggle */
  .nav li.has-sub:hover .sub,.nav li.has-sub:focus-within .sub{display:none}
  .nav li.has-sub.subopen .sub,.nav li.has-sub.subopen:hover .sub,.nav li.has-sub.subopen:focus-within .sub{display:block}
  .nav .subtog{display:block;position:absolute;top:9px;right:var(--pad);border:var(--bw) solid var(--ink);background:var(--white);font-weight:900;font-size:17px;width:38px;height:36px;cursor:pointer;line-height:1;font-family:inherit}
  .nav li.subopen .subtog{background:var(--mint)}
  .sub-box,.sub-box.wide{border:none;box-shadow:none;width:auto;background:transparent;padding-left:0}
  .sub-cases{grid-template-columns:1fr}
  .sub-cases a{border-bottom:none;padding:10px var(--pad) 10px 40px}
  .sub-label{padding-left:40px}
  .sub-box::before{display:none}
  .sub-stripe{display:none}
  .sub-box a{padding:12px var(--pad) 12px 40px;border-bottom:none}
  .sub-box span{display:none}
  /* cta al menú hamburguesa; fuera de la barra */
  .nav > div > .btn.sm{display:none}
  .nav ul li.menu-cta{display:block;padding:18px var(--pad)}
  .nav ul li.menu-cta a{display:inline-flex;padding:12px 20px}
  section{padding:60px 0}
  footer .cols{grid-template-columns:1fr 1fr}
}

/* ---------- showcase: galería de escenarios (home + cloud-pcs) ---------- */
.show-card{border:var(--bw) solid var(--ink);background:var(--white);box-shadow:var(--shadow);margin-top:48px;overflow:hidden}
.show-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.show-track{transition:none}}
.show-slide{min-width:100%;display:grid;grid-template-columns:1.45fr 1fr}
.show-stage{position:relative;aspect-ratio:16/10;border-right:var(--bw) solid var(--ink);background:var(--paper);overflow:hidden}
.show-txt{padding:34px 32px;display:flex;flex-direction:column;justify-content:center}
.show-txt .kick{margin-bottom:10px}
.show-txt h3{font-size:clamp(19px,1.9vw,24px);font-stretch:125%;margin-bottom:12px}
.show-txt p{font-size:15px}
.show-ctrl{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:var(--bw) solid var(--ink);padding:14px 20px;background:var(--white)}
.show-dots{display:flex;gap:10px}
.show-dots button{width:15px;height:15px;border:3px solid var(--ink);background:var(--white);padding:0;cursor:pointer}
.show-dots button.on{background:var(--mint)}
.show-arr{display:flex;gap:10px}
.show-arr button{border:3px solid var(--ink);background:var(--white);font-weight:900;font-size:16px;width:38px;height:34px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;line-height:1}
.show-arr button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* piezas del diagrama */
.sh-links{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sh-links path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:7 7;vector-effect:non-scaling-stroke;opacity:.5;animation:shdash 1.1s linear infinite}
@keyframes shdash{to{stroke-dashoffset:-14}}
@media(prefers-reduced-motion:reduce){.sh-links path{animation:none}}
.sh-cloud{position:absolute;z-index:1}
.sh-cloud>svg{width:100%;display:block}
.sh-cloud .inner{position:absolute;left:13%;right:13%;top:13%;bottom:24%;display:flex;align-items:center;justify-content:center;gap:6%}
.sh-cloud .inner img.mach{height:100%;width:auto;object-fit:contain}
.sh-app{border:3px solid var(--ink);background:var(--white);box-shadow:var(--shadow-sm);padding:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sh-app img{height:30px;width:30px;object-fit:contain;display:block}
.sh-apps{position:absolute;z-index:3;display:flex;gap:8px}
.sh-dev{position:absolute;z-index:2}
.sh-dev .fr{position:relative}
.sh-dev .fr>img.frame{position:relative;z-index:2;width:100%;display:block}
.sh-dev .scr{position:absolute;z-index:1;overflow:hidden;background:#101010}
.sh-dev .scr>img.full{width:100%;height:100%;object-fit:cover;display:block}
.sh-dev .scr.app{background:#fff;display:flex;flex-direction:column}
.sh-dev .scr.app .fbar{height:13%;background:var(--paper);border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:5%;padding:0 5%}
.sh-dev .scr.app .fbar i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.55}
.sh-dev .scr.app .fbody{flex:1;display:flex;align-items:center;justify-content:center}
.sh-dev .scr.app .fbody img{width:34%;max-height:70%;object-fit:contain}
.sh-chip{position:absolute;z-index:4;border:3px solid var(--ink);background:var(--white);box-shadow:var(--shadow-sm);font-weight:900;font-size:clamp(10px,1.1vw,13px);padding:5px 11px;white-space:nowrap;text-transform:lowercase;display:flex;align-items:center;gap:7px}
.sh-chip.mint{background:var(--mint)}
.sh-chip.sun{background:var(--sun)}
@media(max-width:900px){
  .show-slide{grid-template-columns:1fr}
  .show-stage{border-right:none;border-bottom:var(--bw) solid var(--ink)}
  .show-txt{padding:26px var(--pad)}
}