/* compai.cl · hoja única.
   Paleta y tokens heredados del prototipo aprobado (marca/canva-sitio/prototipo-hero)
   y de marca/README.md (CompAI v2, 9-sep-2026): azul = traza, ámbar = transacción. */

@font-face{font-family:Archivo;font-style:normal;font-weight:300 800;font-display:swap;
  src:url(fuentes/archivo-var-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/plexmono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fuentes/plexmono-500-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{
  color-scheme:dark;
  --noche:#0B0806;        /* negro cálido */
  --noche2:#15100C;       /* superficie */
  --noche3:#13171C;       /* panel de servicios, como el Canva */
  --linea:#2C221B;
  --crema:#F5F0E4;
  --crema2:#B8AEA2;
  --brasa:#C87941;        /* terracota de marca · transacción */
  --sol:#FFB25C;          /* acento de acción y precios (marca v2) */
  --petroleo:#2E8FB5;     /* azul check · traza */
  --petroleo2:#78C5E3;
  --display:Archivo,"Arial Narrow",Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --barra:88px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{background:var(--noche);color:var(--crema);overflow-x:clip}
body{margin:0;font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--sol);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.bloqueado{overflow:hidden}

.salto{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sol);color:#080A09;padding:10px 16px;border-radius:6px;font-weight:600;transition:top .2s}
.salto:focus{top:12px}

/* ───────── barra fija: logo izquierda · nodo derecha. Nada más ───────── */
.bar{position:fixed;left:0;right:0;top:0;z-index:40;max-width:1366px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) 10px;pointer-events:none}
.bar>*{pointer-events:auto}
.logo-svg{height:clamp(52px,6.4vw,84px);width:auto;display:block;margin-block:-8px;filter:drop-shadow(0 1px 8px rgba(0,0,0,.6))}
.logo-link{display:block;line-height:0}
body.hero-sello:not(.menu-abierto) .bar .logo-link{opacity:0;pointer-events:none}
.logo-link{transition:opacity .35s}
.nodo{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(11,8,6,.72) 55%,transparent 72%)}
.nodo canvas{width:64px;height:64px;display:block}
.nodo .lbl{position:absolute;right:72px;top:50%;transform:translateY(-50%);white-space:nowrap;color:var(--crema2);opacity:0;transition:opacity .25s}
.nodo:hover .lbl,.nodo:focus-visible .lbl,.menu-abierto .nodo .lbl{opacity:1}

/* ───────── menú a pantalla completa ───────── */
.menu{position:fixed;inset:0;z-index:30;background:rgba(11,8,6,.975);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);
  padding:calc(130px + env(safe-area-inset-top,0px)) clamp(16px,5vw,80px) calc(40px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.menu-abierto .menu{opacity:1;visibility:visible;transition:opacity .35s}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2px,.8vh,10px);align-content:start}
.menu li{transform:translateY(18px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.menu-abierto .menu li{transform:none;opacity:1}
.menu li:nth-child(2){transition-delay:.04s}.menu li:nth-child(3){transition-delay:.08s}
.menu li:nth-child(4){transition-delay:.12s}.menu li:nth-child(5){transition-delay:.16s}.menu li:nth-child(6){transition-delay:.2s}
.menu a.it{display:grid;grid-template-columns:clamp(150px,16vw,220px) 1fr;align-items:center;gap:16px;text-decoration:none;padding:4px 0}
.menu a.it .c{color:var(--crema2);font-weight:300}
.menu a.it b{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:700;
  font-size:clamp(28px,4.2vw,58px);white-space:nowrap;line-height:1.02;letter-spacing:-.01em;
  transition:color .2s,transform .2s;display:inline-block}
.menu a.it:hover b,.menu a.it:focus-visible b{color:var(--sol);transform:translateX(8px)}
.menu aside{display:grid;gap:28px;align-content:end;border-left:1px solid var(--linea);padding-left:clamp(16px,3vw,40px)}
.menu aside p{margin:0;color:var(--crema2)}
.menu aside .big{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:700;
  font-size:clamp(22px,2.4vw,32px);color:var(--crema);line-height:1.1}
.menu aside .pags{display:grid;gap:8px}
.menu aside .pags a{text-decoration:none}
.menu aside .pags a:hover{color:var(--sol)}
@media (max-width:820px){
  .menu{grid-template-columns:1fr;padding-top:calc(104px + env(safe-area-inset-top,0px))}
  .menu a.it{grid-template-columns:1fr;gap:0}
  .menu a.it b{white-space:normal;font-size:clamp(26px,8vw,44px)}
  .menu aside{border-left:0;border-top:1px solid var(--linea);padding:20px 0 0;align-content:start}
}

/* ───────── hero: solo video ───────── */
.hero{position:relative;height:min(100svh,940px);min-height:520px;overflow:hidden;background:#000}
.muro{position:absolute;inset:0}
.muro video,.muro img{width:100%;height:100%;object-fit:cover;display:block}
/* El video pasa por cuadros claros —el hombre de Vitruvio sobre papel crema— y
   ahi la palabra `comp`, que tambien es crema, desaparece. El velo no se ve
   sobre los cuadros oscuros y salva la marca en los claros. */
/* El semicirculo de abajo equilibra la viñeta que traen 4 de los 5 videos:
   sin el, el borde inferior queda mas oscuro que el superior y el hero se ve
   torcido. El sello va centrado adentro. */
.arco{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;
  width:min(620px,96vw);aspect-ratio:2/1;border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:radial-gradient(ellipse at 50% 100%,rgba(8,6,5,.94) 38%,rgba(8,6,5,.72) 62%,transparent 78%);
  display:grid;place-items:center;align-content:center;pointer-events:none}
.arco .sello-img{width:clamp(140px,20vw,260px);height:auto;margin-bottom:6%;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.75))}
@media (max-width:640px){.arco{width:118vw;aspect-ratio:2.1/1}.arco .sello-img{width:min(168px,44vw)}}


.hero-nucleo{display:grid;place-items:center}
.nucleo{width:min(78vh,86vw);aspect-ratio:1;position:relative}
.nucleo video,.nucleo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 49%);mask-image:radial-gradient(circle,#000 38%,transparent 49%);
  animation:respira 9s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.baja{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:var(--crema2);
  display:grid;justify-items:center;gap:6px;text-decoration:none}
.baja i{display:block;width:1px;height:26px;background:linear-gradient(var(--crema2),transparent);animation:cae 1.8s ease-in-out infinite}
@keyframes cae{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ───────── armazón de secciones ───────── */
.sec{position:relative;padding:clamp(72px,11vh,140px) clamp(18px,5vw,72px);scroll-margin-top:var(--barra)}
.ancho{width:100%;max-width:1180px;margin-inline:auto}
/* Rotulo de seccion: SIEMPRE arriba a la izquierda, mono 18 px. Antes dos de
   ellos iban centrados y la pagina parecia dos sitios pegados. */
.kick{color:var(--crema2);display:flex;gap:10px;align-items:center;
  font-family:var(--mono);font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 clamp(18px,4vh,42px);width:100%;max-width:1180px;margin-inline:auto}
.kick b{color:var(--petroleo2);font-weight:500}
@media (max-width:640px){.kick{font-size:14px}}
h2.t{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(30px,5.2vw,64px);line-height:1.02;letter-spacing:-.015em;margin:18px 0 0;text-wrap:balance}
.sub{color:var(--crema2);max-width:62ch;margin:14px 0 0}
/* A SANGRE. En el Canva las piezas grandes van de borde a borde; metidas en
   la caja de 1180 con esquinas redondeadas parecian tarjetas y la seccion
   perdia escala. Comparado lado a lado el 02-10. */
.sangre{width:100vw;margin-left:calc(50% - 50vw);max-width:none;border-radius:0}

.circuitos{position:absolute;inset:0;z-index:-1;background:url(../media/circuitos.webp) center/cover no-repeat;opacity:.5;
  mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}

/* ───────── / 01 Offenbar ───────── */
#offenbar{display:grid;align-content:center;min-height:min(88svh,820px)}
.offen{position:relative;display:grid;place-items:center}
.offen-centro{position:relative;z-index:2;text-align:center;display:grid;justify-items:center}
.ofit{font-family:var(--mono);font-weight:500;font-size:clamp(26px,5.1vw,62px);line-height:1.12;
  letter-spacing:-.02em;margin:0;min-height:2.3em;text-align:center}
.ofit .l2{color:var(--brasa)}
.ofit .cur{display:inline-block;width:.56em;height:1em;vertical-align:-.12em;background:var(--sol);animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.enl{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,5vh,52px);text-decoration:none;
  color:var(--sol);border-bottom:1px solid rgba(255,178,92,.35);padding-bottom:4px;
  transition:border-color .2s,gap .2s}
.enl:hover{border-color:var(--sol);gap:16px}
/* Barrido de bloque: una placa ambar cruza el texto y lo deja revelado detras.
   Arranca cuando la seccion entra en pantalla, no al cargar. */
.enl.bloque{position:relative;overflow:hidden;border-bottom-color:transparent}
.enl.bloque>span{display:inline-block}
.enl.bloque::after{content:"";position:absolute;inset:0;background:var(--sol);transform:scaleX(0);
  transform-origin:left center;pointer-events:none}
.enl.bloque.corre::after{animation:barre .86s cubic-bezier(.76,0,.24,1) forwards}
.enl.bloque.corre{border-bottom-color:rgba(255,178,92,.35);transition:border-color .3s .8s}
@keyframes barre{0%{transform:scaleX(0);transform-origin:left center}
  48%{transform:scaleX(1);transform-origin:left center}
  52%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}}

#lluvia{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.34;z-index:1;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%)}
@media (max-width:860px){#lluvia{opacity:.26}}

/* ───────── / 02 Il Cuore ───────── */
#il-cuore{overflow:hidden}
.cuore-video{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:#000}
.cuore-video video{display:block;width:100%;height:auto}

/* Titulo y parrafo a la IZQUIERDA; los ticks al costado. En telefono el video
   de los ticks baja, no se encoge: a 60 px no se entiende que son. */
.ia{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,4vw,60px);
  align-items:center;margin-top:clamp(40px,7vh,84px);text-align:left}
.ia-tit{font-family:var(--mono);font-weight:700;font-size:clamp(19px,2.3vw,30px);line-height:1.22;
  letter-spacing:-.01em;margin:0;color:var(--crema)}
.ia-tit span{display:block}
.ia-par{margin:clamp(16px,2.4vh,26px) 0 0;font-size:18px;line-height:1.62;color:var(--crema2);max-width:62ch}
.ia-ticks{width:clamp(120px,14vw,190px);flex:0 0 auto}
.ia-ticks video{display:block;width:100%;height:auto;mix-blend-mode:screen}
@media (max-width:760px){
  .ia{grid-template-columns:1fr;gap:18px}
  .ia-ticks{width:min(150px,40vw);justify-self:start}
  .ia-par{font-size:16.5px}
}
.accesos{display:flex;gap:clamp(18px,5vw,56px);justify-content:center;flex-wrap:wrap;margin-top:40px}
.accesos a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--crema)}
.accesos a .ic{width:34px;height:26px;border:1px solid var(--petroleo);border-radius:4px;display:grid;place-items:center;
  color:var(--petroleo);transition:background .2s,color .2s}
.accesos a:hover .ic{background:var(--petroleo);color:var(--noche)}
.accesos a span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.isotipo{margin:40px auto 0;width:clamp(92px,13vw,156px);display:block;overflow:visible;
  filter:drop-shadow(0 0 9px rgba(46,143,181,.85)) drop-shadow(0 0 24px rgba(46,143,181,.4))}
.isotipo path{fill:none;stroke:var(--petroleo2);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}

/* ───────── / 03 Grace ───────── */
#grace{position:relative;isolation:isolate}
.grace-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.grace-fondo video{width:100%;height:100%;object-fit:cover;opacity:.3}
/* Tres BANDAS horizontales, una bajo otra y a todo el ancho — no tres columnas
   verticales. Asi esta en el mockup de Sebastian (pag. 5 del PDF de
   correcciones) y asi se lee: la figura ocupa un tercio y el campo de codigo
   de la seccion respira en el resto. */
.gracelist{display:grid;gap:clamp(6px,1vw,14px);margin-top:clamp(28px,5vh,56px)}
.gfig{margin:0;position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw)}
.gcanvas{display:block;width:100%;aspect-ratio:21/9;background:transparent}
/* La banda del perfil es mas alta: lleva el panel «Grace en vivo» al costado. */
.gfig.alta .gcanvas{aspect-ratio:16/10}

/* Grace en vivo: lo que Grace esta mirando ahora mismo en Mercado Publico. */
.envivo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(1180px,92vw);padding-left:clamp(120px,32vw,460px);
  padding-block:clamp(12px,2vw,24px);
  display:grid;gap:clamp(8px,1.4vh,14px)}
.ev-tit{font-family:var(--mono);font-weight:700;font-size:clamp(15px,1.7vw,22px);
  letter-spacing:.06em;color:var(--petroleo2);margin:0;
  text-shadow:0 0 18px rgba(46,143,181,.7),0 2px 10px rgba(0,0,0,.9)}
.ev-estado{font-size:.6em;letter-spacing:.14em;color:var(--crema);
  border:1px solid rgba(120,197,227,.5);border-radius:999px;padding:3px 9px;margin-left:8px;
  white-space:nowrap;vertical-align:middle}
.ev-lista{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.9vh,9px)}
.ev-lista li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(8px,1.4vw,18px);
  align-items:baseline;font-family:var(--mono);font-size:clamp(8px,.72vw,10.5px);
  line-height:1.35;color:var(--crema2);text-shadow:0 1px 8px rgba(0,0,0,.95)}
.ev-marca{color:var(--sol);letter-spacing:.09em}
.ev-dato{min-width:0}
.ev-dato b{display:block;font-weight:500;color:var(--crema2);opacity:.75}
.ev-dato em{display:block;font-style:normal;color:var(--crema);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-cierre{color:var(--crema2);opacity:.7;white-space:nowrap}
.ev-pie{margin:0;font-family:var(--mono);font-size:clamp(7.5px,.65vw,9.5px);
  letter-spacing:.06em;color:var(--crema2);opacity:.6;text-shadow:0 1px 8px rgba(0,0,0,.95)}

/* La franja de cifras, entre el perfil y el campo de lavanda. */
.franja{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,40px);
  margin:clamp(14px,2.4vw,24px) 0;padding:clamp(18px,3.2vh,36px) 0;
  border-top:1px solid rgba(46,143,181,.18);border-bottom:1px solid rgba(46,143,181,.18)}
.franja div{display:grid;gap:6px;justify-items:center;text-align:center}
.franja b{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:800;
  font-size:clamp(28px,4.6vw,56px);line-height:1;letter-spacing:-.02em;color:var(--crema)}
.franja span{font-family:var(--mono);font-size:clamp(9px,.82vw,11px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--crema2)}

@media (max-width:860px){
  .gcanvas{aspect-ratio:16/10}
  .gfig.alta .gcanvas{aspect-ratio:4/5}
  /* en telefono el panel no cabe al costado: baja y ocupa el ancho */
  .envivo{position:static;transform:none;width:100%;padding:12px 14px 16px}
  .gfig.alta{display:grid}
  .gfig.alta .gcanvas{grid-area:1/1}
  .gfig.alta .envivo{grid-area:1/1;align-self:end}
  .ev-lista li{grid-template-columns:auto minmax(0,1fr);row-gap:1px}
  .ev-cierre{grid-column:2;justify-self:start}
  .franja{gap:10px}
}

/* ───────── / 04 Creative · servicios ───────── */
.servs{display:grid;gap:0;margin-top:46px;border-top:1px solid var(--linea)}
.serv{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,36px);
  align-items:center;padding:clamp(22px,3.4vw,38px) 0;border-bottom:1px solid var(--linea);
  transition:padding-inline .28s cubic-bezier(.2,.7,.2,1),background .28s}
.serv:hover,.serv:focus-visible{background:var(--noche3);padding-inline:clamp(10px,2vw,26px)}
.serv .num{font-family:var(--mono);font-size:12px;color:var(--petroleo2);letter-spacing:.1em}
.serv .tit{display:block;font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(21px,3.4vw,40px);line-height:1.08;letter-spacing:-.015em;margin:0}
.serv .baj{display:block;color:var(--crema2);margin:8px 0 0;max-width:56ch;font-size:15px}
.serv .et{font-family:var(--mono);font-size:12px;color:var(--sol);white-space:nowrap}
.serv .fl{width:34px;height:34px;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;
  color:var(--crema2);transition:border-color .2s,color .2s,transform .2s}
.serv:hover .fl{border-color:var(--sol);color:var(--sol);transform:rotate(-45deg)}
.serv .der{display:flex;align-items:center;gap:16px}
@media (max-width:640px){
  .serv{grid-template-columns:auto 1fr;row-gap:10px}
  .serv .der{grid-column:1/-1;justify-content:space-between}
}
.etiquetas{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;color:var(--petroleo2)}

/* lámina (conqr): capa fija con scroll propio */
.lamina{position:fixed;inset:0;z-index:60;background:var(--noche);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .52s cubic-bezier(.16,.84,.26,1);visibility:hidden}
.lamina.viva{transform:none;visibility:visible}
.lam-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(18px,5vw,64px);background:linear-gradient(var(--noche) 62%,transparent);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--crema2);text-transform:uppercase}
.lam-x{width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;
  transition:border-color .2s,color .2s}
.lam-x:hover{border-color:var(--sol);color:var(--sol)}
.lam-cuerpo{max-width:980px;margin:0 auto;padding:clamp(18px,5vh,46px) clamp(18px,5vw,64px) clamp(70px,14vh,150px)}
.lam-cuerpo h2{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(32px,6.2vw,70px);line-height:1.02;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.lam-et{font-family:var(--mono);font-size:12px;color:var(--sol);letter-spacing:.12em}
.lam-baj{color:var(--crema2);font-size:clamp(17px,2.1vw,21px);margin:18px 0 0;max-width:60ch}
.lam-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(34px,5vh,60px)}
.lam-grid p{margin:0 0 18px;color:#D8D0C4}
.lam-vin{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start;
  border-left:2px solid var(--brasa);padding-left:20px}
.lam-vin li{font-family:var(--mono);font-size:13px;color:var(--crema2);line-height:1.5}
.lam-img{margin:clamp(30px,5vh,56px) 0 0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--noche3)}
.lam-img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.lam-cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,4vh,46px);
  background:var(--sol);color:#080A09;font-weight:600;padding:15px 28px;border-radius:999px;text-decoration:none;
  transition:gap .2s,filter .2s}
.lam-cta:hover{gap:18px;filter:brightness(1.08)}
.lam-pie{margin-top:46px;padding-top:22px;border-top:1px solid var(--linea);font-family:var(--mono);
  font-size:12px;color:var(--crema2);letter-spacing:.1em}
@media (max-width:820px){.lam-grid{grid-template-columns:1fr}}

/* ───────── / 05 Inbox ───────── */
#inbox .caja{margin-top:40px;background:var(--noche3);border:1px solid var(--linea);border-radius:16px;
  padding:clamp(22px,4vw,46px);max-width:860px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:grid;gap:7px}
.campo.ancho2{grid-column:1/-1}
.campo label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--crema2)}
.campo input,.campo textarea{background:#0C0F13;border:1px solid var(--linea);border-radius:8px;color:var(--crema);
  padding:14px 16px;font:inherit;font-size:16px;width:100%}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--sol);outline-offset:0;border-color:transparent}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.enviar{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn{background:var(--sol);color:#080A09;font-weight:600;border-radius:999px;padding:15px 34px;
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default}
.aviso{margin:22px 0 0;padding:16px 18px;border-radius:10px;border:1px solid var(--petroleo);
  background:rgba(46,143,181,.1);color:var(--crema)}
.aviso.mal{border-color:var(--brasa);background:rgba(200,121,65,.12)}
@media (max-width:640px){.campos{grid-template-columns:1fr}}

/* ───────── / 06 Contacto ───────── */
#contacto{padding-bottom:clamp(40px,7vh,80px);overflow:hidden;position:relative}
.scl{font-family:var(--display);font-variation-settings:"wdth" 96;font-weight:800;position:relative;z-index:1;
  font-size:clamp(96px,27vw,300px);line-height:.82;letter-spacing:-.045em;margin:0;text-align:center;
  text-shadow:0 0 60px rgba(245,240,228,.14)}
.lugar{font-family:var(--mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--crema2);text-align:center;margin:14px 0 0}
.colibries{position:absolute;left:clamp(-110px,-5vw,-10px);bottom:clamp(-20px,5vh,110px);width:min(380px,44vw);
  pointer-events:none;mix-blend-mode:screen;opacity:.9;animation:vuela 9s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(ellipse at 52% 48%,#000 54%,transparent 76%);
  mask-image:radial-gradient(ellipse at 52% 48%,#000 54%,transparent 76%)}
@keyframes vuela{0%,100%{transform:translate3d(0,0,0) rotate(0)}33%{transform:translate3d(14px,-16px,0) rotate(-2deg)}66%{transform:translate3d(-8px,10px,0) rotate(1.5deg)}}
.contactos{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:clamp(36px,6vh,66px);position:relative;z-index:2}
.cbtn{display:inline-flex;align-items:center;gap:11px;text-decoration:none;border:1px solid var(--linea);
  border-radius:999px;padding:14px 26px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  background:rgba(21,16,12,.7);transition:border-color .2s,color .2s,transform .2s}
.cbtn:hover{border-color:var(--sol);color:var(--sol);transform:translateY(-2px)}
/* La compuerta: el acceso del equipo va abajo y callado, como en el Canva.
   ClAI-nte lo vetó cuando era un boton de texto entre el correo y el WhatsApp
   —«es lo unico que me hizo dudar del proveedor»— y Sebastian hizo notar que
   su diseño ya lo resolvia: abajo, con la puerta que genero con IA. */
.compuerta{position:absolute;right:clamp(16px,4vw,60px);bottom:clamp(96px,14vh,150px);
  display:block;width:min(190px,40vw);
  border-radius:10px;overflow:hidden;text-decoration:none;isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.compuerta img{display:block;width:100%;height:auto;opacity:.5;
  filter:saturate(.6) brightness(.7) contrast(1.05);transition:opacity .5s,filter .5s,transform 1.4s ease}
/* la rendija entre las dos hojas: al acercarse, se enciende */
.compuerta .luz{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,178,92,.5),rgba(255,178,92,.12) 38%,transparent 62%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;mix-blend-mode:screen}
.compuerta .et{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);color:var(--crema);
  font-size:10px;letter-spacing:.34em;text-indent:.34em;transition:color .5s;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.compuerta:hover,.compuerta:focus-visible{transform:translateY(-4px);
  box-shadow:0 22px 60px -28px rgba(255,178,92,.65)}
.compuerta:hover img,.compuerta:focus-visible img{opacity:1;filter:saturate(1) brightness(.95) contrast(1);transform:scale(1.04)}
.compuerta:hover .luz,.compuerta:focus-visible .luz{opacity:1}
.compuerta:hover .et,.compuerta:focus-visible .et{color:var(--sol)}
/* En telefono la esquina inferior derecha no existe: la compuerta se montaba
   sobre el pie. Medido a 390 px el 02-10. Vuelve al flujo, centrada. */
@media (max-width:760px){
  .compuerta{position:relative;right:auto;bottom:auto;width:min(190px,48vw);
    margin:clamp(34px,6vh,60px) auto 0}
}


.pie{margin-top:clamp(50px,9vh,100px);padding-top:24px;border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:#8A8077;text-transform:uppercase;position:relative;z-index:2}
.pie a{text-decoration:none}
.pie a:hover{color:var(--sol)}

/* ───────── apariciones ───────── */
.ap{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ap.vista{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ap{opacity:1;transform:none}
  .ofit .cur{display:none}
}

/* LA LAMINA COMO HOJA DE PROPUESTA (07-10-2026)
   Sebastian: al tocar el titular o el icono de / 04, la lamina que se
   despliega hacia un lado trae informacion acotada y con la forma de la
   propuesta comercial PC-2026-001. Entra desde la derecha y lo que hay
   adentro es una hoja: papel claro, rotulos en Courier, titular en negrita,
   bloque con filete azul, tabla de tres y el siguiente paso. Sin precios. */
.lamina{left:auto;width:min(920px,100vw);transform:translateX(100%);
  box-shadow:0 0 0 100vmax rgba(0,0,0,0);transition:transform .52s cubic-bezier(.16,.84,.26,1),box-shadow .52s}
.lamina.viva{box-shadow:0 0 0 100vmax rgba(0,0,0,.62)}
.lam-cuerpo{max-width:none;padding:8px clamp(14px,3vw,40px) clamp(48px,10vh,96px)}
.hoja{--h-azul:#0F5C7A;--h-terra:#95521F;--h-gris:#6B7370;--h-tinta:#1A1D1B;--h-linea:#E2E5E3;
  --h-cour:'Courier New',Courier,var(--mono),monospace;
  background:#FBFAF7;color:var(--h-tinta);border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:clamp(26px,5vw,60px) clamp(20px,5.4vw,64px);font-family:Arial,Helvetica,sans-serif}
.hoja .h-kick,.hoja .h-rot,.hoja .h-pie{font-family:var(--h-cour);font-size:12px;letter-spacing:.11em;color:var(--h-gris);margin:0}
.hoja h2{font-family:Arial,Helvetica,sans-serif;font-variation-settings:normal;font-weight:700;color:var(--h-tinta);
  font-size:clamp(24px,3.4vw,32px);line-height:1.22;letter-spacing:0;margin:10px 0 14px;text-wrap:balance}
.hoja .h-lead{font-size:clamp(17px,2vw,20px);line-height:1.45;margin:0 0 26px;color:var(--h-tinta);max-width:58ch}
.hoja .h-como{border-left:4px solid var(--h-azul);padding-left:20px;margin:0 0 30px}
.hoja .h-como p:last-of-type{margin:6px 0 0;font-size:17px;line-height:1.5}
.hoja .h-rot.azul{color:var(--h-azul)}
.hoja strong{font-weight:700}
.hoja .h-tabla{margin:10px 0 0;font-size:15px}
.hoja .h-fila{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;
  padding:12px 0;border-top:1px solid var(--h-linea)}
.hoja .h-fila.b3{grid-template-columns:minmax(0,1fr) 92px minmax(0,1.2fr)}
.hoja .h-cab{border-top:0;padding:0 0 6px}
.hoja .h-cab span{font-family:var(--h-cour);font-size:11px;letter-spacing:.11em;color:var(--h-gris)}
.hoja .h-fila b{display:block;font-size:16px;line-height:1.25}
.hoja .h-fila div span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--h-gris)}
.hoja .h-rec{line-height:1.45}
.hoja .h-barras{display:flex;gap:4px;padding-top:4px}
.hoja .h-barras i{display:block;height:12px;background:var(--h-azul)}
.hoja .h-barras i:nth-child(1){width:36px}.hoja .h-barras i:nth-child(2){width:28px}.hoja .h-barras i:nth-child(3){width:20px}
.hoja .h-barras i.off{background:transparent}
.hoja .h-nota{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--h-gris)}
.hoja .h-nota strong{color:var(--h-tinta)}
.hoja .h-tabla + .h-rot,.hoja .h-nota + .h-rot{margin-top:30px}
.hoja .h-pasos{list-style:none;margin:10px 0 30px;padding:0;display:grid;gap:10px}
.hoja .h-pasos li{display:grid;grid-template-columns:34px 1fr;font-size:15.5px;line-height:1.45}
.hoja .h-pasos b{font-family:var(--h-cour);color:var(--h-azul)}
.hoja .h-sig{margin:0}
.hoja .lam-cta{margin-top:18px;background:var(--h-terra);color:#fff}
.hoja .h-pie{margin-top:34px;padding-top:14px;border-top:1px solid var(--h-linea);font-size:11px}
@media (max-width:640px){
  .hoja .h-fila,.hoja .h-fila.b3{grid-template-columns:1fr;gap:6px}
  .hoja .h-cab{display:none}
  .hoja .h-alc{order:-1}
}
@media (prefers-reduced-motion:reduce){.lamina{transition:none}}
.hoja .h-fila .h-alc .h-barras{display:flex;margin-top:0}

/* PyME con precio «desde» y agenda (07-10-2026) */
.hoja .h-fila.b4{grid-template-columns:minmax(0,1fr) 92px minmax(0,1.2fr) 108px}
.hoja .h-desde{font-family:var(--h-cour);font-size:15px;color:var(--h-terra);white-space:nowrap;text-align:right}
.hoja .h-cab.b4 span:last-child{text-align:right}
.hoja .h-agenda{display:inline-block;margin:16px 0 0 18px;color:var(--h-azul);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.hoja .h-fila.b4{grid-template-columns:1fr}.hoja .h-desde{text-align:left}.hoja .h-agenda{margin-left:0;display:block}}