/* ═══ tipografías alojadas en la propia web (2026-10-04) ═══
   Los mismos archivos que entrega Google Fonts (subconjunto latín, fuentes variables),
   servidos desde fonts/ y precargados en cada página. Antes venían de Google y llegaban
   medio segundo tarde: el encabezado del inicio cambiaba de tamaño y daba un salto. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(fonts/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Letra de reemplazo con las medidas de Newsreader (2026-10-06). Mientras Newsreader llega (~0,8 s en la
   primera visita), los títulos se arman con Georgia ajustada para ocupar el mismo espacio: cuando llega
   la letra, nada se mueve. Antes, Georgia era más ancha, el título ocupaba una línea más y al cambiar
   todo saltaba (CLS 0,184 en computadora). Medidas calculadas con las dos letras reales:
   ancho 89,3 % (normal) y 81,5 % (negrita); alto de Newsreader (0,735 / 0,265) dividido por el ancho. */
@font-face{font-family:'Newsreader Respaldo';src:local('Georgia');font-weight:100 500;
  size-adjust:89.3%;ascent-override:82.3%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:'Newsreader Respaldo';src:local('Georgia Bold'),local('Georgia-Bold');font-weight:501 900;
  size-adjust:81.5%;ascent-override:90.2%;descent-override:32.5%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --fondo:#06070A;
  --fondo-2:#0B0D12;
  --fondo-3:#11141B;
  --tinta:#F2F4F3;
  --tinta-baja:#8E97A3;
  --teal:#14B8A6;
  --teal-claro:#5EEAD4;
  --mostaza:#EAB308;
  --linea:rgba(242,244,243,.10);
  /* Para volver a Fraunces: cambiar esta línea por
     --serif:'Fraunces',Georgia,serif;
     y alojar Fraunces en fonts/ como las de arriba (antes era el link de Google Fonts:
     family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600)
     Respaldo completo del CSS anterior: estilo-con-fraunces.css */
  --serif:'Newsreader','Newsreader Respaldo',Georgia,serif;
  --sans:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Fraunces exagera la j y la f cuando el ajuste óptico sube en títulos grandes.
   Fijándolo, las letras quedan con formas normales. Se hereda a toda la página. */
body{font-optical-sizing:none;
  background:var(--fondo);color:var(--tinta);font-family:var(--sans);
  font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* atmósfera 1: rejilla técnica, da estructura */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.34;
  background-image:linear-gradient(rgba(20,184,166,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(20,184,166,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 70% at 70% 30%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 100% 70% at 70% 30%,#000 10%,transparent 72%);
}
/* atmósfera 2: la red de señales — se mueve porque representa algo */
#red{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease .4s;
}
#red.on{opacity:1}

.aviso{
  position:relative;z-index:30;background:var(--teal);color:#04120F;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-align:center;padding:.5rem 1rem;font-family:var(--sans);
}

/* ───────── barra ───────── */
.barra{position:sticky;top:0;z-index:25;backdrop-filter:blur(16px);background:rgba(6,7,10,.7);border-bottom:1px solid var(--linea)}
.barra-in{max-width:1380px;margin:0 auto;padding:.95rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{font-family:var(--serif);font-size:1.1rem;letter-spacing:.005em;white-space:nowrap;color:var(--tinta);transition:color .25s}
.marca:hover{color:var(--teal-claro)}
.marca b{font-weight:600}
.marca i{font-style:normal;color:var(--teal)}
.nav{display:none;gap:2rem;font-size:.86rem;color:var(--tinta-baja)}
.nav a{transition:color .3s}
.nav a:hover{color:var(--teal)}
@media(min-width:900px){.nav{display:flex}}
.cta{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--mostaza);color:#1A1405;
  font-size:.82rem;font-weight:500;padding:.62rem 1.1rem;border-radius:3px;
  transition:.3s cubic-bezier(.2,.7,.3,1);white-space:nowrap;
}
.cta:hover{background:#F7C325;transform:translateY(-1px);box-shadow:0 6px 22px rgba(234,179,8,.26)}
.cta svg{width:15px;height:15px;fill:currentColor}

/* ───────── hero ───────── */
.hero{position:relative;z-index:1;padding:clamp(2.5rem,6vw,5rem) var(--pad) clamp(3rem,7vw,6rem)}
.hero-in{max-width:1380px;margin:0 auto;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:1000px){.hero-in{grid-template-columns:1.05fr .95fr}}

.etiqueta{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.08em;color:var(--teal);
  border:1px solid rgba(20,184,166,.3);border-radius:100px;padding:.36rem .85rem;
  margin-bottom:1.6rem;
}
.punto{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:latido 2s infinite}
@keyframes latido{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(20,184,166,.55)}50%{opacity:.75;box-shadow:0 0 0 6px rgba(20,184,166,0)}}

h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.022em;
}
h1 em{font-style:normal;font-weight:600;color:var(--teal)}
.bajada{
  margin-top:1.6rem;max-width:46ch;color:var(--tinta-baja);
  font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.68;
}
.bajada b{color:var(--tinta);font-weight:400}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.btn2{
  display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--linea);
  color:var(--tinta);font-size:.86rem;padding:.72rem 1.25rem;border-radius:3px;transition:.3s;
}
.btn2:hover{border-color:var(--teal);color:var(--teal)}
.cta--g{padding:.78rem 1.4rem;font-size:.88rem}

/* prueba bajo el pliegue */
.prueba{
  margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem);
}
@media(max-width:520px){.prueba{grid-template-columns:1fr 1fr}}
.prueba div{display:grid;gap:.35rem;align-content:start}
.prueba .n{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--tinta);line-height:1}
.prueba .n u{text-decoration:none;color:var(--teal)}
.prueba .t{font-size:.75rem;color:var(--tinta-baja);letter-spacing:.01em;line-height:1.45;max-width:22ch}

/* ───────── el sistema vivo ───────── */
.sistema{
  position:relative;background:linear-gradient(160deg,var(--fondo-2),var(--fondo-3));
  border:1px solid var(--linea);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.sis-top{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--linea);background:rgba(255,255,255,.015);
}
.sis-top .luz{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.sis-top span{font-family:var(--mono);font-size:.7rem;color:var(--tinta-baja);letter-spacing:.06em}
.sis-top .reloj{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--teal)}

.sis-cuerpo{display:grid;grid-template-columns:1fr;gap:0}
.sis-foto{position:relative;overflow:hidden;background:#0A0C10;aspect-ratio:16/11}
.sis-foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(.82) contrast(1.06)}
.sis-foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,.12),rgba(6,7,10,.86) 78%),
             linear-gradient(90deg,rgba(6,7,10,.45),transparent 45%);
}
.sis-foto .pie{
  position:absolute;left:1rem;bottom:.9rem;z-index:2;
  font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja);letter-spacing:.05em;
}
.sis-foto .pie b{color:var(--tinta);font-weight:400;display:block;font-family:var(--sans);font-size:.86rem;letter-spacing:0}

/* el flujo */
.flujo{padding:1.1rem 1rem 1.2rem;display:grid;gap:.5rem;position:relative}
.paso{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:.75rem;
  padding:.62rem .7rem;border-radius:4px;border:1px solid transparent;
  transition:background .5s,border-color .5s;
}
.paso.activo{background:rgba(20,184,166,.07);border-color:rgba(20,184,166,.26)}
.paso.hecho{opacity:.55}
.ico{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea);background:var(--fondo);transition:.45s;flex-shrink:0;
}
.paso.activo .ico{border-color:var(--teal);background:rgba(20,184,166,.14)}
.paso.hecho .ico{border-color:rgba(20,184,166,.42)}
.ico svg{width:13px;height:13px;fill:none;stroke:var(--tinta-baja);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.paso.activo .ico svg,.paso.hecho .ico svg{stroke:var(--teal)}
.paso .txt{font-size:.88rem;color:var(--tinta-baja);transition:color .45s;line-height:1.35}
.paso.activo .txt,.paso.hecho .txt{color:var(--tinta)}
.paso .ms{font-family:var(--mono);font-size:.7rem;color:var(--tinta-baja);opacity:0;transition:opacity .4s}
.paso.activo .ms,.paso.hecho .ms{opacity:1;color:var(--teal)}

/* la línea que conecta los pasos */
.riel{position:absolute;left:calc(1rem + 13px);top:1.55rem;bottom:2.4rem;width:1px;background:var(--linea);z-index:0}
.riel b{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(var(--teal),var(--teal-claro));transition:height .55s cubic-bezier(.4,0,.2,1)}

.sis-pie{
  border-top:1px solid var(--linea);padding:.85rem 1rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.71rem;color:var(--tinta-baja);
}
.sis-pie .ok{color:var(--mostaza)}
.sis-pie .ciclo{margin-left:auto;opacity:.55}

@media(min-width:620px){
  .sis-cuerpo{grid-template-columns:.85fr 1.15fr}
  .sis-foto{aspect-ratio:auto;height:100%;min-height:330px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ═══════════ secciones ═══════════ */
section.bloque{position:relative;z-index:1;padding:clamp(4.5rem,9vw,8rem) var(--pad)}
.wrap{max-width:1380px;margin:0 auto}
.ceja{
  display:flex;align-items:center;gap:.8rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1.5rem;
}
.ceja::before{content:'';width:28px;height:1px;background:var(--teal)}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.02em}
h2 em{font-style:normal;font-weight:600;color:var(--teal)}
.sub{margin-top:1.1rem;max-width:56ch;color:var(--tinta-baja);font-size:clamp(.98rem,1.3vw,1.08rem)}

/* ── problemas ── */
.probs{display:grid;gap:1rem;margin-top:clamp(2.4rem,4vw,3.4rem)}
@media(min-width:860px){.probs{grid-template-columns:repeat(3,1fr)}}
.prob{
  position:relative;background:var(--fondo-2);border:1px solid var(--linea);border-radius:5px;
  padding:1.7rem 1.6rem 1.8rem;overflow:hidden;transition:border-color .4s,transform .4s;
}
.prob:hover{border-color:rgba(20,184,166,.4);transform:translateY(-3px)}
.prob::after{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;background:var(--teal);transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.prob:hover::after{width:100%}
.prob .num{font-family:var(--mono);font-size:.7rem;color:var(--teal);letter-spacing:.14em}
.prob h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;line-height:1.25;margin:.85rem 0 .7rem}
.prob p{font-size:.93rem;color:var(--tinta-baja);line-height:1.6}
.prob p b{color:var(--tinta);font-weight:400}

/* ── MAPA ── */
.mapa{margin-top:clamp(2.6rem,5vw,4rem);position:relative}
.fases{display:grid;gap:2.2rem;position:relative;z-index:1}
@media(min-width:820px){.fases{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
.fase{position:relative;padding-top:0}
.fase .bolita{
  width:54px;height:54px;border-radius:50%;background:var(--fondo);
  border:1px solid var(--linea);display:grid;place-items:center;
  font-family:var(--serif);font-size:1.5rem;color:var(--tinta-baja);
  transition:.6s cubic-bezier(.2,.7,.3,1);position:relative;
}
.fase.on .bolita{border-color:var(--teal);color:var(--teal);background:rgba(20,184,166,.09);box-shadow:0 0 0 6px rgba(20,184,166,.07)}
.fase h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:1.15rem 0 .55rem;color:var(--tinta-baja);transition:color .6s}
.fase.on h3{color:var(--tinta)}
.fase p{font-size:.9rem;color:var(--tinta-baja);line-height:1.6;max-width:32ch}
.fase .letra{
  font-family:var(--mono);font-size:.84rem;letter-spacing:.12em;color:var(--teal);
  opacity:0;transition:opacity .6s;white-space:nowrap;flex-shrink:0;
}
.fase.on .letra{opacity:1}
.fase.on .letra{opacity:1}

/* ── caso real ── */
.caso{
  margin-top:clamp(2.4rem,4vw,3.4rem);background:linear-gradient(150deg,var(--fondo-2),var(--fondo-3));
  border:1px solid var(--linea);border-radius:6px;overflow:hidden;
  display:grid;gap:0;
}
@media(min-width:900px){.caso{grid-template-columns:1.15fr .85fr}}
.caso-txt{padding:clamp(1.8rem,3.4vw,2.8rem)}
.caso-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.22;margin:.9rem 0 1rem}
.caso-txt p{color:var(--tinta-baja);font-size:.96rem;line-height:1.65;max-width:52ch}
.caso-datos{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--linea);
}
.caso-datos div{display:grid;gap:.25rem}
.caso-datos .v{font-family:var(--serif);font-size:1.35rem;color:var(--teal)}
.caso-datos .e{font-size:.74rem;color:var(--tinta-baja);font-family:var(--mono);letter-spacing:.05em}
/* consola del caso */
.consola{background:#05060A;border-left:1px solid var(--linea);padding:1.3rem 1.2rem;font-family:var(--mono);font-size:.74rem;line-height:1.85;display:grid;align-content:start;gap:.1rem;min-height:250px}
.consola i{font-style:normal;color:var(--tinta-baja);opacity:0;transform:translateY(4px);transition:.5s}
.consola i.on{opacity:1;transform:none}
.consola i u{text-decoration:none;color:var(--teal)}
.consola i s{text-decoration:none;color:var(--mostaza)}

/* ── cierre ── */
.cierre{text-align:center;border-top:1px solid var(--linea);background:var(--fondo-2)}
.cierre h2{max-width:20ch;margin:0 auto}
.cierre .sub{margin:1.3rem auto 0;text-align:center}
.cierre .acciones{justify-content:center;margin-top:2.4rem}

/* pie */
footer{padding:2.6rem var(--pad);border-top:1px solid var(--linea);position:relative;z-index:1}
.pie{max-width:1380px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--tinta-baja)}
.pie a:hover{color:var(--teal)}
.pie nav{display:flex;gap:1.4rem;flex-wrap:wrap}

/* aparición */
.ap{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.ap.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ap{opacity:1;transform:none}}

/* ═══════════════════════════════════════════
   PÁGINAS INTERIORES
   ═══════════════════════════════════════════ */

/* cabecera de página */
.encab{position:relative;z-index:1;padding:clamp(3.5rem,7vw,6rem) var(--pad) clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--linea)}
.encab h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.05;letter-spacing:-.022em;max-width:20ch}
.encab h1 em{font-style:normal;font-weight:600;color:var(--teal)}
.encab .sub{margin-top:1.4rem;max-width:58ch}

/* nav activo */
.nav a.aqui{color:var(--teal)}

/* ── servicios ── */
.srv{display:grid;gap:1rem;margin-top:clamp(2.2rem,4vw,3.2rem)}
@media(min-width:900px){.srv{grid-template-columns:1fr 1fr}}
.serv{
  background:var(--fondo-2);border:1px solid var(--linea);border-radius:5px;
  padding:1.8rem 1.7rem 1.9rem;transition:border-color .4s,transform .4s;position:relative;overflow:hidden;
}
.serv:hover{border-color:rgba(20,184,166,.4);transform:translateY(-3px)}
.serv .et{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.serv h3{font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.26;margin:.9rem 0 .75rem}
.serv p{font-size:.94rem;color:var(--tinta-baja);line-height:1.62}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.3rem}
.chips span{
  font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja);
  border:1px solid var(--linea);border-radius:100px;padding:.28rem .7rem;
}
.serv--full{grid-column:1/-1;background:linear-gradient(150deg,rgba(20,184,166,.07),var(--fondo-2) 60%);border-color:rgba(20,184,166,.3)}
.serv--full .et{color:var(--mostaza)}
.incluye{list-style:none;display:grid;gap:.55rem;margin-top:1.3rem}
.incluye li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--tinta-baja);line-height:1.5}
.incluye li::before{content:'';width:15px;height:15px;flex-shrink:0;margin-top:.24rem;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── historia (sobre mí) ── */
.hist{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:960px){.hist{grid-template-columns:.8fr 1.2fr;align-items:start}}
.hist-foto{border-radius:5px;overflow:hidden;border:1px solid var(--linea)}
/* la foto se queda fija solo en computadora, donde va al lado del texto. En celular y tablet va arriba
   del texto: fija, el texto le pasaba por detrás (Erick, 7-oct) */
@media(min-width:960px){.hist-foto{position:sticky;top:5rem}}
.hist-foto img{width:100%;height:auto;filter:saturate(.86) contrast(1.05)}
.hist-txt p{margin-bottom:1.15rem;color:var(--tinta-baja);font-size:clamp(1rem,1.3vw,1.08rem);line-height:1.72;max-width:60ch}
.hist-txt p.destaca{color:var(--tinta);font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.42;font-weight:300;margin:1.8rem 0}
.hist-txt p.destaca em{font-style:normal;color:var(--teal)}

/* principios */
.princ{display:grid;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.princ{grid-template-columns:repeat(3,1fr)}}
.pri{border:1px solid var(--linea);border-radius:5px;padding:1.6rem 1.5rem;background:var(--fondo-2)}
.pri .n{font-family:var(--mono);font-size:.7rem;color:var(--teal);letter-spacing:.14em}
.pri h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;margin:.8rem 0 .6rem}
.pri p{font-size:.9rem;color:var(--tinta-baja);line-height:1.6}

/* ── portafolio ── */
.casos{display:grid;gap:1.1rem;margin-top:clamp(2.2rem,4vw,3.2rem)}
@media(min-width:880px){.casos{grid-template-columns:1fr 1fr}}
.cso{
  background:var(--fondo-2);border:1px solid var(--linea);border-radius:5px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .4s,transform .4s;
}
.cso:hover{border-color:rgba(20,184,166,.4);transform:translateY(-3px)}
.cso--ancho{grid-column:1/-1}
.cso-top{padding:1.5rem 1.6rem 0;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.cso-tipo{font-family:var(--mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(20,184,166,.3);border-radius:100px;padding:.24rem .65rem}
.cso-cli{font-family:var(--mono);font-size:.67rem;color:var(--tinta-baja);letter-spacing:.06em}
.cso-cuerpo{padding:1.1rem 1.6rem 1.7rem;flex:1;display:flex;flex-direction:column}
.cso h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;line-height:1.28;margin-bottom:.7rem}
.cso p{font-size:.92rem;color:var(--tinta-baja);line-height:1.62;flex:1}
.cso-pie{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--linea);display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.71rem;color:var(--tinta-baja)}
.cso-pie .vivo{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);flex-shrink:0}
.cso-pie a{color:var(--teal)}
.cso-pie a:hover{text-decoration:underline}
.cso-nums{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.2rem}
.cso-nums div{display:grid;gap:.2rem}
.cso-nums .v{font-family:var(--serif);font-size:1.3rem;color:var(--teal);line-height:1}
.cso-nums .e{font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja)}

/* ── contacto ── */
.cont{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:900px){.cont{grid-template-columns:1fr 1fr}}
.pasos{display:grid;gap:1rem;counter-reset:pa}
.pasos li{list-style:none;display:grid;grid-template-columns:30px 1fr;gap:.9rem;align-items:start;font-size:.94rem;color:var(--tinta-baja);line-height:1.6}
.pasos li::before{
  counter-increment:pa;content:counter(pa);width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(20,184,166,.35);color:var(--teal);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;
}
/* encaje */
.encaje{display:grid;gap:1rem;margin-top:clamp(2.2rem,4vw,3rem)}
@media(min-width:820px){.encaje{grid-template-columns:1fr 1fr}}
.enc{border:1px solid var(--linea);border-radius:5px;padding:1.6rem 1.5rem;background:var(--fondo-2)}
.enc h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:1.1rem}
.enc ul{list-style:none;display:grid;gap:.6rem}
.enc li{display:flex;gap:.7rem;font-size:.9rem;color:var(--tinta-baja);line-height:1.5}
.enc li::before{font-family:var(--mono);flex-shrink:0}
.enc--si{border-color:rgba(20,184,166,.28)}
.enc--si h3{color:var(--teal)}
.enc--si li::before{content:'✓';color:var(--teal)}
.enc--no li::before{content:'✕';color:var(--tinta-baja);opacity:.6}


/* ── franja de datos (fuera del hero, con aire) ── */
.franja{position:relative;z-index:1;background:var(--fondo-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.franja-in{display:grid;grid-template-columns:1fr;gap:1.8rem;padding:clamp(2.2rem,4vw,3.2rem) var(--pad)}
@media(min-width:760px){.franja-in{grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.4rem)}}
.dato{display:grid;gap:.45rem;align-content:start}
.dato .n{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1;color:var(--tinta);font-weight:300}
.dato .n u{text-decoration:none;color:var(--teal)}
.dato .t{font-size:.86rem;color:var(--tinta-baja);line-height:1.5;max-width:26ch}

/* ── MAPA: contexto ampliado al pasar el cursor (o al tocar) ── */
.fase{cursor:default}
.fase .mas-ind{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--teal);
  opacity:.55;transition:opacity .4s;cursor:pointer;background:none;border:none;padding:0;
}
.fase:hover .mas-ind,.fase.abierta .mas-ind{opacity:1}
.fase .mas-ind i{
  width:14px;height:14px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:.62rem;line-height:1;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.fase.abierta .mas-ind i{transform:rotate(45deg)}

.fase-mas{
  position:absolute;left:0;top:calc(100% + .7rem);z-index:12;
  width:clamp(280px,26vw,420px);
  background:var(--fondo-3);border:1px solid rgba(20,184,166,.32);border-radius:5px;
  padding:1.1rem 1.15rem;
  box-shadow:0 22px 54px rgba(0,0,0,.62);
  opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;
  transition:.4s cubic-bezier(.2,.7,.3,1);
}
.fase:hover .fase-mas,.fase.abierta .fase-mas{opacity:1;transform:none;pointer-events:auto}
.fase:last-child .fase-mas{left:auto;right:0}
.fase:last-child .fase-mas::before{left:auto;right:22px}
.fase-mas::before{
  content:'';position:absolute;top:-5px;left:22px;width:9px;height:9px;
  background:var(--fondo-3);border-left:1px solid rgba(20,184,166,.32);border-top:1px solid rgba(20,184,166,.32);
  transform:rotate(45deg);
}
.fase-mas p{font-size:.87rem;color:var(--tinta-baja);line-height:1.62;margin:0}
.fase-mas p + p{margin-top:.7rem}
.fase-mas b{color:var(--tinta);font-weight:400}
.fase-mas .clave{
  display:block;margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:.7rem;color:var(--teal);letter-spacing:.04em;
}
/* la fase abierta se pone por encima de sus vecinas */
.fase.abierta,.fase:hover{z-index:20}
.fases{position:relative}

/* en pantallas chicas el contexto empuja en lugar de flotar */
@media(max-width:819px){
  .fase-mas{
    position:static;opacity:1;transform:none;pointer-events:auto;
    max-height:0;padding-top:0;padding-bottom:0;margin-top:0;
    border-color:transparent;box-shadow:none;overflow:hidden;
    transition:max-height .5s cubic-bezier(.2,.7,.3,1),padding .4s,margin .4s,border-color .4s;
  }
  .fase:last-child .fase-mas{left:auto;right:0}
.fase:last-child .fase-mas::before{left:auto;right:22px}
.fase-mas::before{display:none}
  .fase.abierta .fase-mas{
    max-height:420px;padding:1.1rem 1.15rem;margin-top:.9rem;border-color:rgba(20,184,166,.32);
  }
  .fase:hover .fase-mas{max-height:0;padding-top:0;padding-bottom:0;margin-top:0;border-color:transparent}
  .fase.abierta:hover .fase-mas{max-height:420px;padding:1.1rem 1.15rem;margin-top:.9rem;border-color:rgba(20,184,166,.32)}
}
@media(prefers-reduced-motion:reduce){.fase-mas{transition:none}}


/* ── MAPA: fila de la bolita + flecha hacia el paso siguiente ── */
.fase-top{display:flex;align-items:center;gap:.75rem;min-height:54px}

.flecha{
  flex:1;min-width:22px;height:9px;position:relative;
  opacity:0;transform:translateX(-6px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
}
/* el cuerpo de la flecha se dibuja de izquierda a derecha */
.flecha::before{
  content:'';position:absolute;left:0;top:50%;height:1px;width:0;
  background:linear-gradient(90deg,rgba(20,184,166,.15),rgba(20,184,166,.55));
  transition:width .75s cubic-bezier(.3,0,.2,1) .12s;
}
/* la punta */
.flecha::after{
  content:'';position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid rgba(20,184,166,.6);border-right:1px solid rgba(20,184,166,.6);
  transform:translateY(-50%) rotate(45deg) scale(.4);transform-origin:center;
  opacity:0;transition:opacity .4s .55s,transform .5s cubic-bezier(.2,.7,.3,1) .55s;
}
.fase.on .flecha{opacity:1;transform:none}
.fase.on .flecha::before{width:100%}
.fase.on .flecha::after{opacity:1;transform:translateY(-50%) rotate(45deg) scale(1)}

/* apiladas: la flecha apunta hacia abajo */
@media(max-width:819px){
  .fase-top{gap:.9rem}
  .flecha{flex:0 0 26px;height:26px;min-width:0}
  .flecha::before{left:50%;top:0;width:1px;height:0;background:linear-gradient(180deg,rgba(20,184,166,.15),rgba(20,184,166,.55))}
  .fase.on .flecha::before{width:1px;height:100%}
  .flecha::after{right:auto;left:50%;top:auto;bottom:0;
    transform:translateX(-50%) rotate(135deg) scale(.4)}
  .fase.on .flecha::after{transform:translateX(-50%) rotate(135deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .flecha,.flecha::before,.flecha::after{transition:none}
  .fase.on .flecha::before{width:100%}
}

/* ═══ el sistema en vivo ═══ */
.negocios{display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(1.6rem,3vw,2.4rem) 0 1.1rem}
.neg{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-baja);background:transparent;border:1px solid var(--linea);
  padding:.62rem 1.05rem;border-radius:100px;cursor:pointer;transition:.28s;
}
.neg:hover{color:var(--tinta);border-color:rgba(20,184,166,.45)}
.neg.on{color:#04110F;background:var(--teal-claro);border-color:var(--teal-claro);font-weight:600}

.envivo{display:grid;gap:0;border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--fondo-2)}
@media(min-width:920px){.envivo{grid-template-columns:1.1fr .9fr}}

.chat-col{display:flex;flex-direction:column;min-width:0}
.chat-top{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--linea);background:#05060A;flex-wrap:wrap;
}
.chat-top .luz{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 0 rgba(20,184,166,.55);animation:latir 2.4s infinite}
@keyframes latir{70%{box-shadow:0 0 0 7px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}
.chat-top .quien{font-family:var(--mono);font-size:.72rem;color:var(--tinta);letter-spacing:.04em}
.chat-top .hora{font-family:var(--mono);font-size:.68rem;color:var(--mostaza);margin-left:auto;letter-spacing:.04em}

.chat{padding:1.15rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;min-height:310px;justify-content:flex-end}
.glob{
  max-width:84%;padding:.62rem .85rem;border-radius:14px;font-size:.88rem;line-height:1.5;
  opacity:0;transform:translateY(7px);animation:entra .34s forwards;
}
@keyframes entra{to{opacity:1;transform:none}}
.glob.cli{align-self:flex-end;background:#1B2027;color:var(--tinta);border-bottom-right-radius:5px}
.glob.bot{align-self:flex-start;background:rgba(20,184,166,.11);border:1px solid rgba(20,184,166,.28);
  color:var(--tinta);border-bottom-left-radius:5px}
.glob.esc{display:flex;gap:4px;align-items:center;padding:.72rem .9rem;background:rgba(20,184,166,.07);
  border:1px solid rgba(20,184,166,.18);align-self:flex-start;border-bottom-left-radius:5px}
.glob.esc span{width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.4;animation:punto 1.1s infinite}
.glob.esc span:nth-child(2){animation-delay:.16s}
.glob.esc span:nth-child(3){animation-delay:.32s}
@keyframes punto{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-pie{
  padding:.75rem 1.1rem;border-top:1px solid var(--linea);font-family:var(--mono);
  font-size:.68rem;color:var(--tinta-baja);line-height:1.5;
}
.chat-pie b{color:var(--teal-claro);font-weight:500}

.lado{padding:clamp(1.25rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:1.15rem;
  border-top:1px solid var(--linea);background:var(--fondo-3)}
@media(min-width:920px){.lado{border-top:0;border-left:1px solid var(--linea)}}
.notif{border:1px solid rgba(234,179,8,.3);background:rgba(234,179,8,.05);border-radius:10px;padding:.9rem 1rem}
.notif-t{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mostaza)}
.notif p{margin:.5rem 0 0;font-size:.86rem;line-height:1.55;color:var(--tinta)}
.remate{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.38;color:var(--tinta);margin:0}
.canales{font-family:var(--mono);font-size:.7rem;line-height:1.85;color:var(--tinta-baja);
  border-top:1px solid var(--linea);padding-top:1rem;margin-top:auto}
.canales span{display:block;margin-bottom:.2rem}
.canales b{color:var(--tinta);font-weight:500}

/* evidencia · Nexus */
.evid{display:grid;gap:0;margin-top:clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--fondo-2)}
@media(min-width:900px){.evid{grid-template-columns:1.15fr .85fr}}
.evid-txt{padding:clamp(1.4rem,2.8vw,2.2rem)}
.evid-ceja{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.evid-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.3vw,1.8rem);margin:.6rem 0 .8rem}
.evid-txt p{color:var(--tinta-baja);font-size:.92rem;line-height:1.65;max-width:54ch;margin:0}
.evid-datos{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.4rem}
.evid-datos div{display:grid;gap:.2rem}
.evid-datos .v{font-family:var(--serif);font-size:1.5rem;color:var(--teal);line-height:1}
.evid-datos .e{font-size:.7rem;color:var(--tinta-baja);font-family:var(--mono);letter-spacing:.04em}

/* ── capacidades de Nexus ── */
.capaz{display:grid;gap:1px;margin-top:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden}
@media(min-width:640px){.capaz{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.capaz{grid-template-columns:repeat(4,1fr)}}
.cap{background:var(--fondo-2);padding:1.35rem 1.25rem}
.cap-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.cap p{margin:.6rem 0 0;font-size:.87rem;line-height:1.6;color:var(--tinta-baja)}

/* ── se acomoda a tu medida ── */
.adapta{margin-top:clamp(2.6rem,5vw,4rem)}
.adapta h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,2rem);
  margin:0 0 clamp(1.4rem,2.6vw,2rem);max-width:24ch}
.adapta-g{display:grid;gap:clamp(1.5rem,3vw,2.4rem)}
@media(min-width:760px){.adapta-g{grid-template-columns:1fr 1fr}}
.adapta-g>div{border-top:1px solid var(--linea);padding-top:1.1rem}
.ad-t{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mostaza)}
.adapta-g p{margin:.65rem 0 0;font-size:.92rem;line-height:1.68;color:var(--tinta-baja);max-width:46ch}
.adapta-g b{color:var(--tinta);font-weight:500}
.evid-txt p b{color:var(--tinta);font-weight:500}

/* ═══ pie de página completo ═══ */
.pie-g{padding:clamp(3rem,6vw,5rem) var(--pad) clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--linea);background:var(--fondo-2);position:relative;z-index:2}
.pie-g .wrap{max-width:1380px;margin:0 auto}
.pie-top{display:grid;gap:clamp(2.2rem,4vw,3rem)}
@media(min-width:700px){.pie-top{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.pie-top{grid-template-columns:1.6fr .8fr 1fr 1fr;gap:clamp(1.8rem,3vw,3rem)}}

.pie-marca .marca{font-family:var(--serif);font-size:1.3rem;color:var(--tinta);letter-spacing:.005em}
.pie-marca .marca b{font-weight:600}
.pie-marca .marca i{font-style:normal;color:var(--teal)}
.pie-marca p{margin:.85rem 0 1.4rem;font-size:.88rem;line-height:1.65;color:var(--tinta-baja);max-width:38ch}
.pie-cta{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem}
.pie-cta svg{width:17px;height:17px;fill:currentColor;flex:none}

.pie-col{display:flex;flex-direction:column;gap:.1rem;align-items:flex-start}
.pie-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);margin-bottom:1rem}
.pie-col a{font-size:.87rem;color:var(--tinta-baja);padding:.42rem 0;transition:color .25s;line-height:1.45}
.pie-col a:hover{color:var(--teal)}
.pie-dato{font-size:.87rem;color:var(--tinta-baja);padding:.42rem 0;line-height:1.45}

/* iconos de redes · área táctil 44×44 (WCAG 2.5.5) */
.redes{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.5rem 0 .9rem -.6rem}
.redes a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;color:var(--tinta-baja);
  transition:color .25s,background .25s;padding:0}
.redes a svg{width:19px;height:19px;fill:currentColor}
.redes a:hover{color:var(--teal-claro);background:rgba(20,184,166,.10)}
.redes a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.redes-nota{margin:0;font-size:.78rem;line-height:1.55;color:var(--tinta-baja);max-width:26ch;opacity:.8}

.pie-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  align-items:center;margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.4rem;
  border-top:1px solid var(--linea);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.03em;color:var(--tinta-baja)}
@media(max-width:520px){.pie-legal{justify-content:flex-start}}

/* redes en la página de contacto */
.tambien{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.tambien-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta);display:block;margin-bottom:.6rem}
.tambien .redes{margin:0 0 .7rem -.6rem}
.tambien p{margin:0;font-size:.86rem;line-height:1.6;color:var(--tinta-baja);max-width:44ch}

/* ── recorrido del servicio completo ── */
.recorrido{list-style:none;counter-reset:paso;margin:1.6rem 0 1.3rem;padding:0;display:grid;gap:.85rem}
.recorrido li{counter-increment:paso;position:relative;padding-left:2.5rem;
  font-size:.92rem;line-height:1.62;color:var(--tinta-baja)}
.recorrido li::before{
  content:counter(paso);position:absolute;left:0;top:-.05rem;
  width:1.65rem;height:1.65rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;color:var(--teal);
  border:1px solid rgba(20,184,166,.35);background:rgba(20,184,166,.07)}
.recorrido li b{color:var(--tinta);font-weight:500}
.recorrido-pie{font-family:var(--serif);font-size:1.02rem;line-height:1.5;
  color:var(--tinta);margin:0 0 1.6rem;padding-left:1rem;
  border-left:2px solid rgba(20,184,166,.4)}
@media(min-width:900px){.recorrido{grid-template-columns:1fr 1fr;gap:.85rem 2.2rem}}

/* ═══ el mapa del negocio (auditoría) ═══ */
.audit-sec{background:var(--fondo-2);border-top:1px solid var(--linea)}
.audit-cab{text-align:center;max-width:62ch;margin:0 auto}
.audit-cab h2{margin:.7rem 0 0}
.audit-cab .sub{margin:1.2rem auto 0}

.audit-puertas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.audit-abrir,.audit-directo{
  display:flex;flex-direction:column;align-items:center;gap:.22rem;
  padding:.95rem 1.7rem;border-radius:10px;font-size:.96rem;cursor:pointer;
  font-family:var(--sans);transition:.28s;border:1px solid transparent;text-align:center}
.audit-abrir{background:var(--mostaza);color:#1A1405;font-weight:600;border:0}
.audit-abrir:hover{filter:brightness(1.08)}
.audit-directo{background:transparent;color:var(--tinta);border-color:var(--linea)}
.audit-directo:hover{border-color:var(--teal);color:var(--teal-claro)}
.audit-abrir span,.audit-directo span{font-size:.74rem;font-family:var(--mono);opacity:.72;font-weight:400;letter-spacing:.03em}

.audit{max-width:760px;margin:clamp(2.2rem,4vw,3.2rem) auto 0;
  border:1px solid var(--linea);border-radius:14px;background:var(--fondo);overflow:hidden}
.audit-barra{height:3px;background:rgba(242,244,243,.07)}
.audit-barra i{display:block;height:100%;width:33%;background:var(--teal);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.audit-paso-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);padding:1.1rem clamp(1.2rem,3vw,2rem) 0}

.audit-paso{display:none;border:0;padding:clamp(1.2rem,3vw,2rem);margin:0}
.audit-paso.on{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.preg{margin-bottom:1.9rem}
.preg:last-child{margin-bottom:0}
.preg-t{font-size:1rem;line-height:1.45;color:var(--tinta);margin:0 0 .2rem;font-weight:500;display:block}
.preg-ayuda{display:block;font-size:.78rem;color:var(--tinta-baja);margin-bottom:.7rem;line-height:1.5}
.preg-t + .ops{margin-top:.75rem}

.ops{display:flex;flex-wrap:wrap;gap:.5rem}
.ops label{position:relative;cursor:pointer}
.ops input{position:absolute;opacity:0;width:0;height:0}
.ops span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;
  border:1px solid var(--linea);border-radius:100px;font-size:.87rem;color:var(--tinta-baja);
  transition:.22s;line-height:1.3}
.ops label:hover span{border-color:rgba(20,184,166,.45);color:var(--tinta)}
.ops input:checked + span{background:rgba(20,184,166,.13);border-color:var(--teal);color:var(--teal-claro)}
.ops input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}

.preg textarea,.campos input{
  width:100%;margin-top:.6rem;background:var(--fondo-2);border:1px solid var(--linea);
  border-radius:9px;padding:.75rem .9rem;color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.5;transition:border-color .25s}
.preg textarea:focus,.campos input:focus{outline:0;border-color:var(--teal)}
.campos{display:grid;gap:.9rem;margin-top:.8rem}
@media(min-width:620px){.campos{grid-template-columns:1fr 1fr}.campos label:last-child{grid-column:1/-1}}
.campos label{font-size:.8rem;color:var(--tinta-baja);display:block}
.preg-legal{font-size:.75rem;color:var(--tinta-baja);margin:.8rem 0 0;line-height:1.5;opacity:.85}

.audit-nav{display:flex;gap:.7rem;align-items:center;justify-content:flex-end;
  padding:0 clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem)}
.audit-atras{background:transparent;border:1px solid var(--linea);color:var(--tinta-baja);
  padding:.7rem 1.2rem;border-radius:9px;cursor:pointer;font-family:var(--sans);font-size:.88rem;
  min-height:44px;transition:.25s;margin-right:auto}
.audit-atras:hover{color:var(--tinta);border-color:var(--tinta-baja)}
.audit-sig{min-height:44px}

/* resultado */
.audit-fin{padding:clamp(1.4rem,3vw,2.2rem)}
.audit-fin h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.9rem);margin:.6rem 0 1.4rem}
.hallazgos{display:grid;gap:.9rem;margin-bottom:1.8rem}
.hallazgo{border-left:2px solid var(--mostaza);background:rgba(234,179,8,.045);
  padding:.95rem 1.1rem;border-radius:0 9px 9px 0}
.hallazgo.ok{border-left-color:var(--teal);background:rgba(20,184,166,.05)}
.hallazgo b{display:block;color:var(--tinta);font-weight:500;font-size:.95rem;margin-bottom:.32rem}
.hallazgo p{margin:0;font-size:.88rem;line-height:1.6;color:var(--tinta-baja)}

/* resultado del mapa (7-oct-2026): máximo 3 puntos numerados, cada uno con lo que contestó la persona */
.audit-fin h3 + .audit-intro{margin:-.7rem 0 1.4rem}
.audit-intro{font-size:.95rem;line-height:1.6;color:var(--tinta-baja);max-width:60ch}
.mapa-puntos{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.mapa-punto{display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:start;
  border-left:2px solid var(--mostaza);background:rgba(234,179,8,.045);
  padding:1rem 1.1rem;border-radius:0 9px 9px 0}
.mapa-punto--ok{border-left-color:var(--teal);background:rgba(20,184,166,.05)}
.mapa-punto-n{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(234,179,8,.5);color:var(--mostaza);font-family:var(--mono);font-size:.85rem;line-height:1}
.mapa-punto--ok .mapa-punto-n{border-color:rgba(20,184,166,.5);color:var(--teal)}
.mapa-dijiste{margin:0 0 .35rem;font-family:var(--mono);font-size:.74rem;line-height:1.5;color:var(--tinta-baja)}
.mapa-punto b{display:block;color:var(--tinta);font-weight:500;font-size:1rem;line-height:1.4;margin-bottom:.32rem}
.mapa-punto p:last-child{margin:0;font-size:.9rem;line-height:1.6;color:var(--tinta-baja)}

/* datos de contacto: los campos de una fila alineados abajo · el WhatsApp con el código del país delante */
.campos label{display:flex;flex-direction:column;justify-content:flex-end}
.tel{display:flex;align-items:stretch;margin-top:.6rem}
.tel-cod{display:flex;align-items:center;padding:0 .75rem;background:var(--fondo-2);border:1px solid var(--linea);
  border-right:0;border-radius:9px 0 0 9px;font-family:var(--mono);font-size:.9rem;color:var(--tinta-baja);min-width:3.4rem;justify-content:center}
.campos .tel input{margin-top:0;border-radius:0 9px 9px 0;flex:1;min-width:0}
.campos .tel input:focus{border-color:var(--teal)}
@media(max-width:619px){
  .servicios .mapa-punto p:last-child,.servicios .audit-intro{font-size:1rem}
  /* en el celular el texto usa todo el ancho y pasa por debajo del número */
  .mapa-punto{display:flow-root}
  .mapa-punto-n{float:left;margin:0 .7rem .2rem 0}
}

.audit-cita{border-top:1px solid var(--linea);padding-top:1.6rem}
.audit-cita h4{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 .5rem;color:var(--tinta)}
.audit-cita > p{font-size:.9rem;line-height:1.6;color:var(--tinta-baja);margin:0 0 1.2rem;max-width:52ch}
.audit-dias{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.audit-dia{border:1px solid var(--linea);border-radius:9px;padding:.6rem .9rem;cursor:pointer;
  background:transparent;color:var(--tinta-baja);font-family:var(--mono);font-size:.78rem;
  min-height:44px;transition:.22s;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.audit-dia:hover{border-color:rgba(20,184,166,.5);color:var(--tinta)}
.audit-dia.on{background:rgba(20,184,166,.13);border-color:var(--teal);color:var(--teal-claro)}
.audit-dia b{font-weight:500;font-size:.82rem}
.audit-nota{font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--tinta-baja);
  margin:1rem 0 0;opacity:.8;max-width:50ch}

/* ═══ encabezado a dos columnas · el reloj de 24 horas ═══ */
.encab--dos .wrap{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:940px){.encab--dos .wrap{grid-template-columns:1.15fr .85fr}}
.encab--dos h1{max-width:18ch}

.dia24{position:relative;width:min(100%,320px);margin:0 auto;aspect-ratio:1}
.dia24 svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.dia24 circle{fill:none;stroke-linecap:round}
.dia24-base{stroke:rgba(242,244,243,.07);stroke-width:10}
.dia24-tuyo{stroke:var(--tinta-baja);stroke-width:10;
  stroke-dasharray:0 628.3;transition:stroke-dasharray 1.1s cubic-bezier(.3,.7,.3,1)}
.dia24-sis{stroke:var(--teal);stroke-width:10;opacity:.9;
  stroke-dasharray:0 628.3;transition:stroke-dasharray 1.6s cubic-bezier(.3,.7,.3,1)}
.dia24 .marca{stroke:rgba(242,244,243,.14);stroke-width:1.5}
.dia24 .pt{transition:fill .45s,r .45s}
.dia24 .pt--dentro{fill:var(--tinta)}
.dia24 .pt--fuera{fill:#3A3F47}
.dia24 .pt--perdido{fill:var(--mostaza)}
.dia24 .pt--ok{fill:var(--teal-claro)}

.dia24-centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;gap:.1rem}
.dia24-n{font-family:var(--serif);font-size:3.1rem;line-height:1;color:var(--tinta);
  font-weight:300;transition:color .5s}
.dia24-n.alto{color:var(--teal-claro)}
.dia24-de{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;color:var(--tinta-baja)}
.dia24-pie{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  color:var(--tinta-baja);margin-top:.5rem;max-width:14ch;line-height:1.5;opacity:.85}

.dia24-leyenda{position:absolute;left:0;right:0;bottom:-3.1rem;display:flex;
  flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;
  font-family:var(--mono);font-size:.64rem;color:var(--tinta-baja);letter-spacing:.03em}
.dia24-leyenda span{display:inline-flex;align-items:center;gap:.35rem}
.dia24-leyenda i{width:7px;height:7px;border-radius:50%;flex:none}
.dia24-leyenda .p-tuyo{background:var(--tinta)}
.dia24-leyenda .p-fuera{background:var(--mostaza)}
.dia24-leyenda .p-sis{background:var(--teal-claro)}
@media(max-width:939px){.dia24{margin-bottom:3.4rem}}

/* ═══ portafolio · casos ═══ */
.cs{display:grid;gap:0;margin-top:clamp(1.2rem,2.5vw,1.8rem);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--fondo-2)}
@media(min-width:900px){
  .cs{grid-template-columns:.9fr 1.1fr}
  .cs--inv .cs-vis{order:2}
}
.cs-vis{background:#05060A;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;min-height:250px}
@media(min-width:900px){.cs-vis{border-bottom:0;border-right:1px solid var(--linea)}
  .cs--inv .cs-vis{border-right:0;border-left:1px solid var(--linea)}}
.cs-vis--foto{padding:0;align-items:stretch}
.cs-vis--foto a{display:block;width:100%;overflow:hidden}
.cs-vis--foto img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1);min-height:250px}
.cs-vis--foto a:hover img{transform:scale(1.035)}

.cs-txt{padding:clamp(1.5rem,3vw,2.4rem)}
.cs-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:.9rem}
.cs-tipo{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.cs-cli{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--tinta-baja)}
.cs-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.24;margin:0 0 1rem}
.cs-txt p{color:var(--tinta-baja);font-size:.92rem;line-height:1.68;margin:0 0 .9rem;max-width:56ch}
.cs-txt p b{color:var(--tinta);font-weight:500}
.cs-mas{border-left:2px solid rgba(20,184,166,.35);padding-left:.9rem;font-size:.87rem !important}
.cs-datos{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.3rem 0}
.cs-datos div{display:grid;gap:.15rem}
.cs-datos .n{font-family:var(--serif);font-size:1.45rem;color:var(--teal);line-height:1}
.cs-datos .t{font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja);letter-spacing:.03em}
.cs-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.cs-chips span{font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja);
  border:1px solid var(--linea);border-radius:100px;padding:.35rem .75rem}
.cs-link{display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.78rem;
  color:var(--teal);border-bottom:1px solid rgba(20,184,166,.3);padding-bottom:.15rem}
.cs-link:hover{border-bottom-color:var(--teal)}
.cs-link span{color:var(--tinta-baja);border:0}

/* nexus: capacidades que se encienden */
.nx{width:100%;max-width:290px}
.nx-cab{font-family:var(--mono);font-size:.68rem;color:var(--tinta-baja);
  display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.nx-luz{width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px var(--teal);animation:nxLatir 2.2s infinite}
@keyframes nxLatir{50%{opacity:.35}}
.nx-caps{display:flex;flex-wrap:wrap;gap:.35rem}
.nx-cap{font-family:var(--mono);font-size:.66rem;padding:.35rem .6rem;border-radius:6px;
  border:1px solid var(--linea);color:#4A5058;transition:.4s}
.nx-cap.on{color:var(--teal-claro);border-color:rgba(20,184,166,.5);background:rgba(20,184,166,.08)}

/* restaurante: 4 rutas */
.rt{width:100%;max-width:280px;font-family:var(--mono);font-size:.68rem}
.rt-msg{border:1px solid var(--linea);border-radius:9px 9px 9px 2px;padding:.6rem .75rem;
  color:var(--tinta);background:#1B2027;line-height:1.5;min-height:2.6rem}
.rt-flecha{width:1px;height:18px;background:linear-gradient(var(--linea),var(--teal));margin:.4rem auto}
.rt-rutas{display:grid;gap:.3rem}
.rt-rutas span{border:1px solid var(--linea);border-radius:6px;padding:.4rem .65rem;
  color:#4A5058;transition:.35s}
.rt-rutas span.on{color:var(--teal-claro);border-color:rgba(20,184,166,.55);background:rgba(20,184,166,.09)}
.rt-salida{margin-top:.7rem;display:grid;gap:.22rem;border-top:1px solid var(--linea);padding-top:.7rem}
.rt-salida i{font-style:normal;font-size:.63rem;color:#4A5058;opacity:0;
  transform:translateX(-5px);transition:.4s}
.rt-salida i.on{opacity:1;transform:none;color:var(--tinta-baja)}

/* clínica: 3 capas de seguridad */
.sg{width:100%;max-width:265px;font-family:var(--mono);position:relative}
.sg-punto{width:9px;height:9px;border-radius:50%;background:var(--mostaza);
  margin:0 auto .55rem;box-shadow:0 0 10px rgba(234,179,8,.6);transition:.5s}
.sg-punto.ok{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.sg-capas{display:grid;gap:.4rem}
.sg-capa{border:1px solid var(--linea);border-radius:8px;padding:.5rem .7rem;transition:.45s}
.sg-capa b{display:block;font-size:.68rem;color:#4A5058;font-weight:500;transition:.45s}
.sg-capa span{font-size:.6rem;color:#3A3F47;line-height:1.4;transition:.45s}
.sg-capa.on{border-color:rgba(20,184,166,.5);background:rgba(20,184,166,.07)}
.sg-capa.on b{color:var(--teal-claro)}
.sg-capa.on span{color:var(--tinta-baja)}
.sg-fin{margin-top:.55rem;text-align:center;font-size:.68rem;padding:.5rem;
  border:1px dashed var(--linea);border-radius:8px;color:#4A5058;transition:.45s}
.sg-fin.on{color:var(--tinta);border-color:var(--teal);border-style:solid;background:rgba(20,184,166,.08)}

/* panel: barras */
.pn{width:100%;max-width:265px;font-family:var(--mono);font-size:.66rem}
.pn-cab{display:flex;justify-content:space-between;gap:.5rem;color:var(--tinta-baja);
  padding-bottom:.6rem;border-bottom:1px solid var(--linea);margin-bottom:.9rem}
.pn-cab span{color:var(--teal);font-size:.6rem}
.pn-barras{display:flex;align-items:flex-end;gap:.35rem;height:92px}
.pn-barras i{flex:1;background:linear-gradient(180deg,var(--teal),rgba(20,184,166,.25));
  border-radius:3px 3px 0 0;height:0;transition:height .9s cubic-bezier(.2,.7,.3,1)}
.pn-pie{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--linea);color:var(--tinta-baja)}
.pn-pie b{color:var(--teal-claro);font-size:.95rem}

/* ═══ portafolio · sistemas bajo pedido ═══ */
.sis-sec{background:var(--fondo-2);border-top:1px solid var(--linea)}
.sis-rejilla{display:grid;gap:1px;margin-top:clamp(2rem,4vw,3rem);
  background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
@media(min-width:720px){.sis-rejilla{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.sis-rejilla{grid-template-columns:repeat(3,1fr)}}

.sis{background:var(--fondo);padding:clamp(1.5rem,2.8vw,2rem);display:flex;flex-direction:column}
.sis-ico{width:42px;height:42px;margin-bottom:1.1rem}
.sis-ico svg{width:100%;height:100%;fill:none;stroke:var(--tinta-baja);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.sis-ico svg .ac{stroke:var(--teal)}
.sis:hover .sis-ico svg{stroke:var(--tinta)}
.sis-tipo{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);display:block;margin-bottom:.5rem}
.sis h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;line-height:1.25;margin:0 0 .9rem}
.sis-dolor{font-size:.87rem;line-height:1.6;color:var(--tinta);margin:0 0 .9rem;
  border-left:2px solid var(--mostaza);padding-left:.85rem}
.sis p{font-size:.88rem;line-height:1.65;color:var(--tinta-baja);margin:0 0 1rem}
.sis p b{color:var(--tinta);font-weight:500}
.sis-lista{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.42rem}
.sis-lista li{font-size:.83rem;line-height:1.5;color:var(--tinta-baja);
  padding-left:1.1rem;position:relative}
.sis-lista li::before{content:'';position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:rgba(20,184,166,.6)}
.sis-meta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between}
.sis-meta span{font-family:var(--mono);font-size:.64rem;color:var(--tinta-baja);
  line-height:1.5;max-width:26ch}
.sis-meta b{font-family:var(--mono);font-size:.72rem;color:var(--mostaza);
  font-weight:500;white-space:nowrap}
.sis-nota{font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--tinta-baja);
  margin:1.6rem 0 0;max-width:64ch;opacity:.85}
/* el último sistema llena la fila: mismo orden de lectura, en dos columnas */
@media(min-width:1180px){
  .sis-rejilla .sis:last-child{grid-column:1/-1}
  .sis-rejilla .sis:last-child .sis-dolor,
  .sis-rejilla .sis:last-child > p{max-width:none}
  .sis-rejilla .sis:last-child .sis-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:0 2.6rem;align-items:start}
  .sis-rejilla .sis:last-child .sis-lista{margin-bottom:0}
}

/* ═══ portafolio · las piezas que se combinan ═══ */
.mezcla{width:min(100%,330px);margin:0 auto;font-family:var(--mono)}
.mz-rotulo{font-size:.68rem;color:var(--tinta-baja);letter-spacing:.06em;
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;margin-bottom:.9rem}
.mz-rotulo b{color:var(--teal-claro);font-weight:500;font-size:.78rem;transition:opacity .35s}
.mz-piezas{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.mz-pieza{border:1px solid var(--linea);border-radius:8px;padding:.62rem .5rem;
  font-size:.6rem;line-height:1.35;text-align:center;color:#3E434B;
  min-height:58px;display:flex;align-items:center;justify-content:center;
  transition:color .45s,border-color .45s,background .45s,transform .45s}
.mz-pieza.on{color:var(--teal-claro);border-color:rgba(20,184,166,.55);
  background:rgba(20,184,166,.09);transform:translateY(-2px)}
.mz-pie{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid var(--linea);font-size:.66rem;color:var(--tinta-baja)}
.mz-pie i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 8px var(--teal);animation:nxLatir 2.2s infinite}
@media(max-width:939px){.mezcla{margin-top:2.4rem}}

/* ═══ portafolio · piezas representativas ═══ */

/* NEXUS · un teléfono con Telegram */
.tel{width:100%;max-width:235px}
.tel-marco{border:1px solid rgba(242,244,243,.14);border-radius:20px;background:#0A0C11;
  padding:.5rem .5rem .8rem;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tel-muesca{width:44px;height:4px;border-radius:3px;background:rgba(242,244,243,.14);margin:.25rem auto .6rem}
.tel-cab{display:flex;align-items:center;gap:.5rem;padding:0 .35rem .55rem;
  border-bottom:1px solid rgba(242,244,243,.07);margin-bottom:.6rem}
.tel-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--teal),#0E7C70);
  color:#04110F;font-family:var(--serif);font-size:.82rem}
.tel-cab b{display:block;font-family:var(--sans);font-size:.76rem;color:var(--tinta);font-weight:500;line-height:1.2}
.tel-cab span{font-family:var(--mono);font-size:.58rem;color:var(--teal)}
.tel-chat{display:flex;flex-direction:column;gap:.35rem;min-height:168px;justify-content:flex-end;padding:0 .2rem}
.tel-b{max-width:88%;padding:.42rem .6rem;border-radius:12px;font-size:.72rem;line-height:1.42;
  opacity:0;transform:translateY(6px);animation:telEntra .32s forwards}
@keyframes telEntra{to{opacity:1;transform:none}}
.tel-b.yo{align-self:flex-end;background:#1F3D3A;color:#D9F2EE;border-bottom-right-radius:4px}
.tel-b.el{align-self:flex-start;background:#181C22;color:var(--tinta-baja);border-bottom-left-radius:4px}
.tel-b.el b{color:var(--teal-claro);font-weight:500}
.tel-esc{align-self:flex-start;display:flex;gap:3px;padding:.5rem .65rem;background:#181C22;
  border-radius:12px;border-bottom-left-radius:4px}
.tel-esc i{width:4px;height:4px;border-radius:50%;background:var(--tinta-baja);animation:punto 1.1s infinite}
.tel-esc i:nth-child(2){animation-delay:.15s}
.tel-esc i:nth-child(3){animation-delay:.3s}

/* RESTAURANTE · el bot habla y sale la comanda */
.rbot{width:100%;max-width:250px}
.rbot-fila{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:1rem}
.rbot-cara{width:54px;height:54px;flex:none;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.rbot-cab{stroke:var(--teal);fill:rgba(20,184,166,.07)}
.rbot-ant,.rbot-or{stroke:var(--tinta-baja)}
.rbot-ant-p{fill:var(--mostaza);stroke:none;animation:nxLatir 1.8s infinite}
.rbot-ojo{fill:var(--teal-claro);stroke:none;animation:botParpadeo 4s infinite}
.rbot-ojo2{animation-delay:.08s}
@keyframes botParpadeo{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
.rbot-cara .rbot-ojo{transform-origin:center;transform-box:fill-box}
.rbot-boca{stroke:var(--teal-claro)}
.rbot-burbuja{background:#181C22;border-radius:12px;border-top-left-radius:3px;
  padding:.55rem .7rem;font-size:.75rem;line-height:1.45;color:var(--tinta);
  transition:opacity .3s;flex:1}
.rbot-comanda{border:1px dashed rgba(242,244,243,.16);border-radius:6px;background:#0A0C11;
  padding:.65rem .75rem;font-family:var(--mono)}
.rbot-com-cab{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:.45rem;margin-bottom:.5rem;border-bottom:1px dashed rgba(242,244,243,.12)}
.rbot-com-cab span{font-size:.68rem;color:var(--teal-claro);text-transform:uppercase;letter-spacing:.09em}
.rbot-com-cab i{font-style:normal;font-size:.62rem;color:var(--tinta-baja)}
.rbot-comanda ul{list-style:none;margin:0;padding:0;display:grid;gap:.28rem}
.rbot-comanda li{font-size:.62rem;color:#3E434B;padding-left:.95rem;position:relative;
  opacity:0;transform:translateX(-4px);transition:.35s}
.rbot-comanda li::before{content:'✓';position:absolute;left:0;color:var(--teal)}
.rbot-comanda li.on{opacity:1;transform:none;color:var(--tinta-baja)}

/* CLÍNICA · un escudo de tres capas */
.cesc{width:100%;max-width:250px;display:flex;flex-direction:column;align-items:center}
.cesc-svg{width:110px;height:120px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cesc-forma{stroke:rgba(242,244,243,.14);fill:rgba(242,244,243,.02)}
.cesc-anillo{stroke:#2A2F37;transition:stroke .5s,opacity .5s}
.cesc-anillo.on{stroke:var(--teal)}
.cesc-check{stroke:var(--teal-claro);stroke-width:3.4;opacity:0;
  stroke-dasharray:44;stroke-dashoffset:44;transition:opacity .3s,stroke-dashoffset .6s}
.cesc-check.on{opacity:1;stroke-dashoffset:0}
.cesc-capas{display:grid;gap:.35rem;margin-top:.9rem;width:100%}
.cesc-capa{border-left:2px solid #2A2F37;padding:.3rem 0 .3rem .7rem;transition:.45s}
.cesc-capa b{display:block;font-family:var(--mono);font-size:.66rem;color:#3E434B;font-weight:500;transition:.45s}
.cesc-capa span{font-family:var(--mono);font-size:.58rem;color:#33383F;line-height:1.4;transition:.45s}
.cesc-capa.on{border-left-color:var(--teal)}
.cesc-capa.on b{color:var(--teal-claro)}
.cesc-capa.on span{color:var(--tinta-baja)}

/* ═══ sobre mí · el gráfico de su tesis ═══
   Dos líneas: lo que sabes hacer, y cuántos te encuentran.
   Cuando entra el sistema, la segunda sube. Sin párrafos. */
.graf{width:min(100%,340px);margin:0 auto}
.graf svg{width:100%;height:auto;display:block;overflow:visible}
.g-linea{fill:none;stroke-width:2.5;stroke-linecap:round}
.g-talento{stroke:#E8EDF2;stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1)}
.g-clientes{stroke:var(--mostaza);stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1)}
.g-sube{stroke:var(--teal-claro);stroke-dasharray:220;stroke-dashoffset:220;
  transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.3,1)}
.g-linea.on{stroke-dashoffset:0}
.g-marca{stroke:rgba(20,184,166,.45);stroke-width:1.5;stroke-dasharray:4 5;
  opacity:0;transition:opacity .5s}
.g-marca.on{opacity:1}
.g-pto{fill:var(--mostaza);opacity:0;transition:opacity .4s}
.g-fin{fill:var(--teal-claro);opacity:0;transition:opacity .5s;
  filter:drop-shadow(0 0 7px rgba(94,234,212,.7))}
.g-pto.on,.g-fin.on{opacity:1}

.g-rots{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;justify-content:center;margin-top:.5rem}
.g-rot{font-family:var(--mono);font-size:.68rem;color:#C9D0D8;display:inline-flex;
  align-items:center;gap:.4rem;transition:color .45s}
.g-rot::before{content:'';width:14px;height:2.5px;border-radius:2px;flex:none}
.g-rot--t::before{background:#E8EDF2}
.g-rot--c::before{background:var(--mostaza);transition:background .45s}
.g-rot--c.on::before{background:var(--teal-claro)}
.g-rot--c.on{color:var(--teal-claro)}
.g-pie{margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(242,244,243,.12);
  font-size:.8rem;line-height:1.6;color:#C9D0D8;text-align:center;min-height:2.8em;
  transition:opacity .35s}
.g-pie b{color:var(--teal-claro);font-weight:500}
@media(max-width:939px){.graf{margin-top:2.6rem}}

/* ═══ contacto · el recorrido de tu mensaje ═══
   Cuatro estaciones siempre visibles, con su icono. La línea las
   recorre y cada una se enciende al llegar. No queda vacío nunca. */
.rec{width:min(100%,320px);margin:0 auto}
.rec-pasos{position:relative;display:grid;gap:.2rem}
.rec-pasos::before{content:'';position:absolute;left:21px;top:26px;bottom:26px;width:2px;
  background:rgba(242,244,243,.12);border-radius:2px}
.rec-pasos::after{content:'';position:absolute;left:21px;top:26px;width:2px;height:0;
  background:linear-gradient(var(--teal),var(--teal-claro));border-radius:2px;
  transition:height 2.6s cubic-bezier(.4,.1,.3,1)}
.rec.corre .rec-pasos::after{height:calc(100% - 52px)}

.rec-paso{position:relative;display:flex;align-items:center;gap:.85rem;padding:.4rem 0}
.rec-ico{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:#12151C;border:1.5px solid rgba(242,244,243,.16);
  transition:border-color .5s,background .5s,transform .5s;z-index:1}
.rec-ico svg{width:21px;height:21px;fill:none;stroke:#7A828C;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.rec-ico svg .ac{stroke:#7A828C;transition:stroke .5s}
.rec-ico svg .pt{fill:#7A828C;stroke:none;transition:fill .5s}
.rec-paso.on .rec-ico{border-color:var(--teal);background:#0D2420;transform:scale(1.06)}
.rec-paso.on .rec-ico svg{stroke:#E8EDF2}
.rec-paso.on .rec-ico svg .ac{stroke:var(--teal-claro)}
.rec-paso.on .rec-ico svg .pt{fill:var(--teal-claro)}

.rec-txt b{display:block;font-size:.92rem;color:#8E97A3;font-weight:500;line-height:1.3;
  transition:color .5s}
.rec-txt span{font-family:var(--mono);font-size:.68rem;color:#5A626C;line-height:1.4;
  transition:color .5s}
.rec-paso.on .rec-txt b{color:#FFFFFF}
.rec-paso.on .rec-txt span{color:#A8B0BA}

.rec-pie{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(242,244,243,.12);
  font-size:.82rem;line-height:1.6;color:#C9D0D8;text-align:center}
.rec-pie b{color:var(--teal-claro);font-weight:500}
@media(max-width:939px){.rec{margin-top:2.6rem}}

/* ═══ contacto · el proceso, paso a paso ═══ */
.proc{list-style:none;counter-reset:pp;margin:1.6rem 0 0;padding:0;display:grid;gap:1.1rem}
.proc li{counter-increment:pp;position:relative;padding-left:2.6rem}
.proc li::before{
  content:counter(pp);position:absolute;left:0;top:0;
  width:1.8rem;height:1.8rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.72rem;color:var(--teal-claro);
  border:1px solid rgba(20,184,166,.4);background:rgba(20,184,166,.08)}
.proc li b{display:block;color:var(--tinta);font-weight:500;font-size:.96rem;
  line-height:1.35;margin-bottom:.3rem}
.proc li p{margin:0;font-size:.88rem;line-height:1.65;color:var(--tinta-baja)}

.proc-nota{margin-top:1.7rem;padding:1rem 1.15rem;border-radius:10px;
  background:rgba(234,179,8,.05);border-left:2px solid var(--mostaza);
  font-size:.87rem;line-height:1.65;color:var(--tinta-baja)}
.proc-nota b{display:block;color:var(--tinta);font-weight:500;margin-bottom:.35rem}

/* los canales, como tarjetas con presencia */
.via{display:grid;gap:.6rem}
.medio{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;
  border:1px solid var(--linea);border-radius:12px;background:var(--fondo-2);
  transition:border-color .3s,background .3s,transform .3s}
.medio:hover{border-color:rgba(20,184,166,.5);background:#101820;transform:translateX(3px)}
.medio svg{width:26px;height:26px;fill:var(--teal);flex:none}
.medio > span{display:grid;gap:.15rem;min-width:0}
.medio b{color:var(--tinta);font-weight:500;font-size:.95rem;line-height:1.3}
.medio > span > span{font-family:var(--mono);font-size:.76rem;color:var(--tinta-baja)}
/* frases enteras, una idea cada una — sin partirlas en dato + etiqueta */
.cierra{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--linea);display:grid;gap:.55rem}
.cierra p{margin:0;font-size:.92rem;line-height:1.6;color:var(--tinta)}
.cierra p:last-child{color:var(--tinta-baja)}
.cierra p:only-child{color:var(--tinta)}   /* un solo renglón: conserva su color (7-oct) */

/* ── Puente al portafolio (sobre-mi): la prueba, justo antes de pedir el mensaje ── */
.puente-s{padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--linea)}
.puente{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.puente{grid-template-columns:1fr}}
.puente-i{padding:1.15rem 1.25rem;border:1px solid var(--linea);border-radius:12px;
  background:var(--fondo-2);transition:border-color .3s,background .3s}
.puente-i:hover{border-color:rgba(20,184,166,.45);background:#101820}
.puente-i p{margin:0;font-size:.95rem;line-height:1.55;color:var(--tinta)}
/* el enlace: 44px de alto para que se pueda tocar bien en el teléfono */
.puente-ver{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  min-height:44px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  color:var(--teal);text-decoration:none;transition:gap .3s,color .3s}
.puente-ver:hover{gap:.9rem;color:var(--teal-claro)}
.puente-ver svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ═══════════ HOME 2026-10-01 · menú en celular + lectura y toque ═══════════
   Menú de celular y área de toque de 44 px en encabezado y pie: en las 5 páginas
   (aprobado por Erick el 1-oct). Lo que va con .inicio delante es solo del home:
   letra de 16 px, panel del sistema y anclas internas.                     */

/* ── botón de menú (☰ → ✕) ── */
.menu-btn{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin-right:-8px;padding:0;background:none;border:0;cursor:pointer;color:var(--tinta);
}
.menu-btn span{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s}
.barra.menu-abierto .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.barra.menu-abierto .menu-btn span:nth-child(2){opacity:0}
.barra.menu-abierto .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
@media(min-width:900px){.menu-btn{display:none}}

@media(max-width:899px){
  .barra-in > .cta{margin-left:auto}
  .barra.menu-abierto .nav{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    padding:.4rem var(--pad) 1rem;background:var(--fondo);
    border-bottom:1px solid var(--linea);box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .barra.menu-abierto .nav a{
    display:flex;align-items:center;min-height:54px;font-size:1.05rem;color:var(--tinta);
    border-bottom:1px solid var(--linea);
  }
  .barra.menu-abierto .nav a:last-child{border-bottom:0}
}

/* ── los enlaces internos no quedan tapados por la barra fija ── */
.inicio [id]{scroll-margin-top:84px}

/* ── área de toque mínima de 44 px (norma de accesibilidad en celular) ── */
.barra .cta{min-height:44px}
.barra .marca{padding:.5rem 0;margin:-.5rem 0}
.inicio .fase .mas-ind{min-height:44px;margin-top:0;padding-right:.6rem}
@media(hover:none){.inicio .fase .mas-ind{opacity:1;font-size:.74rem}}
@media(max-width:899px){
  .pie-col a{display:flex;align-items:center;min-height:44px;padding:0}
}

/* ── lectura en celular: texto corrido a 16 px ── */
@media(max-width:619px){
  .inicio .sub,
  .prob p,
  .inicio .fase > p,
  .evid-txt p,
  .adapta-g p,
  .cap p,
  .fase-mas p{font-size:1rem}
  .inicio .paso .txt{font-size:.94rem}

  /* el panel muestra primero lo que hace el sistema y después la foto */
  .inicio .sis-cuerpo .flujo{order:-1}
  .inicio .sis-foto{aspect-ratio:16/9}
}

/* ═══════════ SERVICIOS 2026-10-02 · atajo al mapa, avisos del formulario, toque y lectura ═══════════
   Lo que va con .servicios delante solo afecta a esa página.                                       */

/* ── atajo al formulario desde el encabezado ── */
.encab-mapa{display:inline-flex;align-items:center;min-height:44px;margin-top:1.1rem;
  font-size:.95rem;color:var(--teal);border-bottom:1px solid rgba(20,184,166,.35);transition:color .25s,border-color .25s}
.encab-mapa:hover{color:var(--teal-claro);border-color:var(--teal-claro)}

/* ── avisos del formulario: dicen qué falta, con palabras ── */
.preg-falta{margin:.55rem 0 0;font-size:.85rem;color:var(--mostaza);line-height:1.45}
.campo-error{display:block;margin-top:.4rem;font-size:.82rem;color:var(--mostaza);line-height:1.4}
.campos input[aria-invalid="true"]{border-color:var(--mostaza)}
.dato-ayuda{display:block;margin-top:.2rem;font-size:.75rem;color:var(--tinta-baja);opacity:.85}
.preg-t .dato-ayuda{display:inline;margin:0;font-weight:400}
.volver-mapa{display:inline-flex;align-items:center;min-height:44px;margin-top:.8rem;padding:0 1.1rem;
  background:transparent;border:1px solid rgba(20,184,166,.45);border-radius:9px;color:var(--teal);
  font-family:var(--sans);font-size:.88rem;cursor:pointer;transition:background .25s}
.volver-mapa:hover{background:rgba(20,184,166,.1)}

/* ── área de toque mínima de 44 px ── */
.servicios .neg{min-height:44px}
.servicios .acciones .cta{min-height:44px}

/* ── lectura en celular: texto corrido a 16 px ── */
@media(max-width:619px){
  .servicios .sub,
  .servicios .serv p,
  .servicios .recorrido li,
  .servicios .recorrido-pie,
  .servicios .incluye li,
  .servicios .hallazgo p{font-size:1rem}
  .servicios .notif p{font-size:.94rem}
}

/* ═══════════ SOBRE MÍ 2026-10-03 · lectura, foto y texto accesible del gráfico ═══════════
   Lo que va con .sobre-mi delante solo afecta a esa página.                                */

/* texto que leen los lectores de pantalla y no se ve (el gráfico es decorativo) */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:619px){
  /* texto corrido a 16 px */
  .sobre-mi .sub,
  .sobre-mi .fase > p,
  .sobre-mi .puente-i p{font-size:1rem}
  /* etiquetas del gráfico legibles en celular */
  .sobre-mi .g-rot{font-size:.75rem}
  /* la foto deja de ocupar una pantalla entera */
  .sobre-mi .hist-foto img{max-height:420px;object-fit:cover;object-position:center 22%}
}

/* ═══════════ PORTAFOLIO 2026-10-04 · encabezado, etiquetas legibles, toque y lectura ═══════════
   Lo que va con .portafolio delante solo afecta a esa página.                                 */

/* las piezas apagadas se leen (antes casi no se veían) */
.portafolio .mz-pieza{color:#6B717A}
.portafolio .mz-pieza.on{color:var(--teal-claro)}

/* ── área de toque mínima de 44 px ── */
.portafolio .cs-link{display:inline-flex;align-items:center;min-height:44px;margin-top:.6rem}
.portafolio .acciones .cta{min-height:44px}

@media(max-width:939px){
  /* en celular y tablet, menos aire entre el párrafo y las piezas */
  .portafolio .mezcla{margin-top:0}
}

@media(max-width:619px){
  /* texto corrido a 16 px */
  .portafolio .sub,
  .portafolio .cs-txt p,
  .portafolio .sis p,
  .portafolio .sis-dolor,
  .portafolio .sis-lista li{font-size:1rem}
  .portafolio .sis-nota{font-size:.8rem}
  .portafolio .cs-txt p.cs-mas{font-size:1rem !important} /* la regla base lleva !important */
  /* etiquetas pequeñas a 12 px */
  .portafolio .mz-pieza,
  .portafolio .mz-rotulo,
  .portafolio .mz-pie,
  .portafolio .cs-datos .t,
  .portafolio .cs-chips span,
  .portafolio .cs-tipo,
  .portafolio .cs-cli,
  .portafolio .sis-meta span,
  .portafolio .sis-tipo{font-size:.75rem}
  .portafolio .mz-rotulo b{font-size:.85rem}
}

/* ═══════════ CONTACTO 2026-10-04 · botón en el encabezado, canal principal, lectura y toque ═══════════
   Lo que va con .contacto delante solo afecta a esa página.                                         */

/* botón de WhatsApp junto al mensaje principal */
.contacto .encab-txt .acciones{margin-top:1.6rem}
.contacto .acciones .cta{min-height:44px}

/* el recorrido: la frase final ya no está oculta, y los textos pequeños se leen antes de encenderse */
.contacto .rec-pie{margin-bottom:0}
.contacto .rec-txt span{color:#7A828C}
.contacto .rec-paso.on .rec-txt span{color:#A8B0BA}

/* WhatsApp es el canal principal; el correo queda como opción secundaria */
.contacto .medio--correo{padding:.8rem 1.1rem;background:transparent}
.contacto .medio--correo svg{width:22px;height:22px;fill:var(--tinta-baja)}
.contacto .medio--correo b{font-size:.88rem;color:var(--tinta-baja)}

@media(max-width:939px){
  /* menos aire entre el párrafo y el recorrido */
  .contacto .rec{margin-top:0}
}

@media(max-width:619px){
  /* texto corrido a 16 px */
  .contacto .sub,
  .contacto .proc li p,
  .contacto .proc-nota,
  .contacto .cierra p,
  .contacto .enc li,
  .contacto .rec-pie{font-size:1rem}
  /* etiquetas pequeñas a 12 px */
  .contacto .rec-txt span,
  .contacto .tambien-t,
  .contacto .medio > span > span{font-size:.75rem}
}

/* CONTACTO 2026-10-04 (revisión /copy-web) · lo que tranquiliza, al lado del botón */
.contacto .encab-nota{margin:.75rem 0 0;font-size:.85rem;color:var(--tinta-baja)}

/* campo trampa del mapa (CRM): invisible para personas y lectores de pantalla; solo lo llenan los robots */
.trampa{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ═══ Fase E · privacidad (2026-10-06) ═══ */
.preg-legal a{color:var(--teal-claro);text-decoration:underline;text-underline-offset:2px}
.pie-legal a{color:var(--tinta-baja);transition:color .25s;padding:.3rem 0}
.pie-legal a:hover{color:var(--teal)}

/* página de política de privacidad: texto largo, cómodo de leer */
.legal-fecha{margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--tinta-baja)}
section.bloque.legal{padding-top:clamp(2.6rem,6vw,4.5rem)}
.legal-txt{max-width:70ch}
.legal-txt h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;margin:2.6rem 0 .9rem}
.legal-txt h2:first-child{margin-top:0}
.legal-txt p,.legal-txt li{color:var(--tinta-baja);font-size:clamp(.95rem,1.2vw,1.02rem);line-height:1.7}
.legal-txt p+p{margin-top:.9rem}
.legal-txt b{color:var(--tinta);font-weight:500}
.legal-txt a{color:var(--teal-claro);text-decoration:underline;text-underline-offset:2px}
.legal-txt ul{list-style:none;display:grid;gap:.7rem}
.legal-txt li{position:relative;padding-left:1.3rem}
.legal-txt li::before{content:'';position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--teal)}
.legal-tabla{overflow-x:auto;margin:1.1rem 0;border:1px solid var(--linea);border-radius:4px}
.legal-tabla table{width:100%;border-collapse:collapse;font-size:clamp(.88rem,1.1vw,.95rem)}
.legal-tabla th,.legal-tabla td{text-align:left;vertical-align:top;padding:.85rem 1rem;border-bottom:1px solid var(--linea);line-height:1.55}
.legal-tabla tr:last-child th,.legal-tabla tr:last-child td{border-bottom:0}
.legal-tabla thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-baja);font-weight:400;background:var(--fondo-2)}
.legal-tabla tbody th{color:var(--tinta);font-weight:500;white-space:nowrap}
.legal-tabla tbody th span{display:block;font-weight:300;font-size:.82em;color:var(--tinta-baja);white-space:normal}
.legal-tabla td{color:var(--tinta-baja)}
@media(max-width:520px){
  .legal-tabla tbody th{white-space:normal;width:34%}
  .legal-tabla th,.legal-tabla td{padding:.75rem .8rem}
}
.legal-txt button.btn2{font-family:inherit;background:none;cursor:pointer;min-height:44px}

/* aviso de cookies: barra abajo, la primera vez; aceptar y rechazar del mismo tamaño */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--fondo-2);
  border-top:1px solid var(--linea);box-shadow:0 -10px 30px rgba(0,0,0,.35);
  padding:1rem var(--pad);padding-bottom:max(1rem,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cookies.on{transform:none}
.cookies-in{max-width:1380px;margin:0 auto;display:flex;align-items:center;gap:1rem 2rem;justify-content:space-between}
.cookies p{font-size:.86rem;line-height:1.55;color:var(--tinta-baja);max-width:72ch}
.cookies p a{color:var(--teal-claro);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookies-bot{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;flex-shrink:0}
.cookies-bot button{font-family:inherit;font-size:.86rem;font-weight:500;min-height:44px;min-width:8.5rem;
  padding:.6rem 1.1rem;border-radius:3px;cursor:pointer;border:1px solid var(--linea);
  background:transparent;color:var(--tinta);transition:border-color .25s,color .25s,background .25s}
.cookies-bot button:hover{border-color:var(--teal);color:var(--teal-claro)}
.cookies-bot button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:720px){
  .cookies{padding:.9rem 16px;padding-bottom:max(.9rem,env(safe-area-inset-bottom))}
  .cookies-in{flex-direction:column;align-items:stretch;gap:.8rem}
  .cookies p{font-size:.82rem}
  .cookies-bot button{min-width:0}
}
@media(prefers-reduced-motion:reduce){.cookies{transition:none}}

/* ═══ Página "Demos web" (12-oct-2026) · demos-web.html · todo con el prefijo dw- ═══ */
/* Encabezado: las tres demos en abanico, al lado del titular */
.dw-abanico{position:relative;display:block;aspect-ratio:16/11;max-width:560px;width:100%;justify-self:center}
.dw-ab{position:absolute;inset:8% 6% auto;width:88%;height:auto;border-radius:8px;border:1px solid var(--linea);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.85);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dw-ab--1{transform:rotate(-7deg) translate(-9%,6%);z-index:1}
.dw-ab--2{transform:rotate(5deg) translate(9%,-4%);z-index:2}
.dw-ab--3{transform:translateY(12%);z-index:3}
@media(max-width:939px){
  .dw-abanico{max-width:440px;margin-inline:auto}
  .dw-ab--1{transform:rotate(-5deg) translate(-4%,5%)}
  .dw-ab--2{transform:rotate(4deg) translate(4%,-3%)}
}
@media(hover:hover) and (pointer:fine){
  .dw-abanico:hover .dw-ab--1{transform:rotate(-10deg) translate(-16%,4%)}
  .dw-abanico:hover .dw-ab--2{transform:rotate(8deg) translate(16%,-7%)}
  .dw-abanico:hover .dw-ab--3{transform:translateY(16%) scale(1.02)}
}

/* Las demos: video de la demo en un marco de navegador + texto */
.dw-lista{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.dw-demo{display:grid;background:var(--fondo-2);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
@media(min-width:900px){.dw-demo{grid-template-columns:1.2fr .8fr;align-items:center}
  /* la del medio pone el video a la derecha: las columnas se invierten para que el video quede del mismo tamaño */
  .dw-demo--inv{grid-template-columns:.8fr 1.2fr}
  .dw-demo--inv .dw-pantalla{order:2}}
.dw-pantalla{display:block;margin:clamp(.9rem,2vw,1.4rem);border:1px solid var(--linea);border-radius:8px;overflow:hidden;background:#05060A;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (pointer:fine){.dw-pantalla:hover{transform:translateY(-3px);box-shadow:0 22px 50px -26px rgba(20,184,166,.45)}}
.dw-navegador{display:flex;align-items:center;gap:.38rem;height:30px;padding:0 .8rem;background:#0E1117;border-bottom:1px solid var(--linea)}
.dw-navegador i{width:9px;height:9px;border-radius:50%;background:rgba(242,244,243,.18)}
.dw-navegador span{margin-left:.7rem;font-family:var(--mono);font-size:.66rem;color:var(--tinta-baja);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#05060A}
.dw-txt{padding:clamp(1.3rem,3vw,2.4rem)}
.dw-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:.8rem}
.dw-tipo{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.dw-ejemplo{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--tinta-baja);
  border:1px solid var(--linea);border-radius:999px;padding:.18rem .6rem}
.dw-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin-bottom:.7rem}
.dw-txt p{color:var(--tinta-baja);font-size:.94rem;line-height:1.68;margin:0 0 .9rem;max-width:52ch}
.dw-sirve b{color:var(--tinta);font-weight:500}
.dw-abrir{margin-top:.6rem}

/* ¿Tu negocio es otro?: los rubros */
.dw-rubros{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;max-width:880px}
.dw-rubros li{border:1px solid var(--linea);border-radius:999px;padding:.45rem .95rem;font-size:.86rem;color:var(--tinta);background:rgba(242,244,243,.025)}
.dw-parrafo{margin-top:1.6rem;max-width:62ch;color:var(--tinta-baja);font-size:clamp(.98rem,1.3vw,1.06rem);line-height:1.7}

/* Lo que se le conecta: 9 piezas con su imagen dibujada */
.dw-rejilla{display:grid;gap:1px;margin-top:clamp(2rem,4vw,3rem);background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
@media(min-width:720px){.dw-rejilla{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.dw-rejilla{grid-template-columns:repeat(3,1fr)}}
.dw-pieza{background:var(--fondo-2);padding:clamp(1.2rem,2.4vw,1.7rem)}
.dw-pieza h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2;margin:1.1rem 0 .45rem}
.dw-pieza h3 small{font-family:var(--sans);font-size:.78rem;font-weight:300;color:var(--tinta-baja)}
.dw-pieza p{color:var(--tinta-baja);font-size:.9rem;line-height:1.65}
.dw-img{height:156px;border-radius:8px;border:1px solid var(--linea);background:#05060A;overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:center;padding:.9rem;font-size:.78rem;line-height:1.45}
/* las partes de cada imagen entran cuando la pieza aparece */
.dw-pieza .dw-anim{opacity:0;transform:translateY(10px)}
.dw-pieza.vis .dw-anim{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1) .35s,transform .6s cubic-bezier(.2,.7,.3,1) .35s}

/* WhatsApp (colores de WhatsApp en modo oscuro) */
.dw-img--wa{background:#0B141A;justify-content:flex-start;padding:0}
.wa-cab{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;background:#202C33;color:#E9EDEF}
.wa-cab b{font-weight:500;font-size:.8rem}.wa-cab small{color:#8696A0;font-size:.68rem;margin-left:auto}
.wa-av{width:26px;height:26px;border-radius:50%;background:#00A884;color:#0B141A;display:grid;place-items:center;font-weight:600;font-size:.75rem}
.wa-chat{flex:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:.8rem}
.wa-msg{max-width:86%;background:#005C4B;color:#E9EDEF;border-radius:8px 8px 2px 8px;padding:.5rem .65rem .35rem}
.wa-msg span{display:block;text-align:right;font-size:.62rem;color:#8FD3C3;margin-top:.15rem}
/* CRM */
.crm-ficha{background:#0E1117;border:1px solid var(--linea);border-radius:8px;padding:.7rem .8rem}
.crm-cab{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.crm-cab b{display:block;color:var(--tinta);font-weight:500}.crm-cab small{color:var(--tinta-baja);font-size:.7rem}
.crm-av{width:28px;height:28px;border-radius:6px;background:rgba(20,184,166,.18);color:var(--teal-claro);display:grid;place-items:center;font-weight:600}
.crm-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;font-size:.74rem}
.crm-ficha dt{color:var(--tinta-baja)}.crm-ficha dd{color:var(--tinta)}
.crm-origen{display:inline-block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;color:var(--teal);border:1px solid rgba(20,184,166,.4);border-radius:999px;padding:.12rem .5rem}
/* Telegram: el aviso en la pantalla del teléfono */
.dw-img--tg{background:radial-gradient(120% 90% at 20% 0%,#1B2A3A 0%,#05060A 70%)}
.tg-aviso{display:flex;gap:.6rem;align-items:flex-start;background:rgba(242,244,243,.09);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(242,244,243,.12);border-radius:12px;padding:.65rem .75rem;color:var(--tinta)}
.tg-aviso b{display:block;font-weight:500;font-size:.8rem}.tg-aviso span{color:var(--tinta-baja);font-size:.72rem}
.tg-ico{flex:none;width:30px;height:30px;border-radius:8px;background:#229ED9;display:grid;place-items:center}
.tg-ico svg{width:18px;height:18px;fill:#fff}
/* Píxel: visitó la web → ve el anuncio */
.dw-img--px{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}
.px-web,.px-ig{flex:1;border:1px solid var(--linea);border-radius:7px;background:#0E1117;padding:.45rem;min-height:104px;display:flex;flex-direction:column;gap:.3rem}
.px-web i{display:block;height:7px;border-radius:3px;background:rgba(242,244,243,.12)}.px-web i:nth-child(2){width:70%}.px-web i:nth-child(3){width:85%;height:28px}
.px-web span,.px-ig span:last-child{margin-top:auto;font-size:.68rem;color:var(--tinta-baja);line-height:1.3}
.px-flecha{color:var(--teal);font-size:1.1rem}
.px-ig-cab{display:block;height:8px;width:55%;border-radius:3px;background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF)}
.px-ig-foto{display:block;height:38px;border-radius:4px;background:rgba(20,184,166,.2)}
/* El asistente que responde */
.dw-img--as{gap:.5rem}
.as-q,.as-a{max-width:88%;border-radius:10px;padding:.45rem .65rem;font-size:.74rem}
.as-q{align-self:flex-end;background:rgba(242,244,243,.1);color:var(--tinta)}
.as-a{align-self:flex-start;background:rgba(20,184,166,.16);color:var(--teal-claro);border:1px solid rgba(20,184,166,.3)}
/* La agenda */
.ag-mes{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center;font-size:.66rem}
.ag-mes span{color:var(--tinta-baja);font-family:var(--mono)}
.ag-mes i{font-style:normal;padding:.3rem 0;border-radius:5px;background:rgba(242,244,243,.05);color:var(--tinta)}
.ag-mes .ag-hoy{background:var(--teal);color:#04120F;font-weight:600}
.ag-cita{margin-top:.65rem;font-size:.74rem;color:var(--tinta-baja)}.ag-cita b{color:var(--teal-claro);font-weight:500}
/* El seguimiento */
.dw-img--sg{align-items:flex-end;background:#0B141A}
.sg-msg{max-width:90%;background:#005C4B;color:#E9EDEF;border-radius:8px 8px 2px 8px;padding:.5rem .65rem;font-size:.76rem}
/* Las reseñas de Google */
.rs-tarjeta{background:#0E1117;border:1px solid var(--linea);border-radius:8px;padding:.75rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.rs-tarjeta b{color:var(--tinta);font-weight:500}.rs-tarjeta span{color:var(--tinta-baja);font-size:.74rem}
.rs-estrellas{display:flex;gap:.15rem;margin-top:.3rem;font-size:1.15rem}
.rs-estrellas i{font-style:normal;color:var(--mostaza)}
/* Tus números */
.nm-barras{display:flex;align-items:flex-end;gap:.4rem;height:86px}
.nm-barras i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--teal-claro),var(--teal));transform-origin:bottom}
.dw-pieza .nm-barras i{transform:scaleY(.15)}
.dw-pieza.vis .nm-barras i{transform:none;transition:transform .9s cubic-bezier(.2,.7,.3,1) .3s}
.nm-pie{margin-top:.55rem;font-size:.72rem;color:var(--tinta-baja)}

.dw-mas{margin-top:clamp(1.6rem,3vw,2.2rem);max-width:70ch;border-left:2px solid var(--teal);padding:.2rem 0 .2rem 1rem;
  color:var(--tinta);font-size:clamp(.98rem,1.3vw,1.06rem);line-height:1.7}
.dw-nota{margin-top:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--tinta-baja)}

/* Cómo se hace la tuya: los 4 pasos */
.dw-pasos{list-style:none;display:grid;gap:1px;margin-top:clamp(1.8rem,3.5vw,2.6rem);background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
@media(min-width:820px){.dw-pasos{grid-template-columns:repeat(4,1fr)}}
.dw-pasos li{background:var(--fondo-2);padding:clamp(1.2rem,2.4vw,1.6rem)}
.dw-letra{display:block;font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1;color:var(--teal);margin-bottom:.6rem}
.dw-pasos b{display:block;color:var(--tinta);font-weight:500;margin-bottom:.35rem}
.dw-pasos p{color:var(--tinta-baja);font-size:.9rem;line-height:1.6}
.dw-enlace{display:inline-block;margin-top:1.4rem;color:var(--teal);font-size:.92rem;border-bottom:1px solid rgba(20,184,166,.4)}
.dw-enlace:hover{color:var(--teal-claro)}

@media(prefers-reduced-motion:reduce){
  .dw-ab,.dw-pantalla{transition:none}
  .dw-pieza .dw-anim,.dw-pieza .nm-barras i{opacity:1;transform:none;transition:none}
}