/* compai.cl · maqueta exacta del Canva «compai.cl».
Lienzo 1366 px. Toda medida sale de kit-canva/PLANO-CANVA.md y de
kit-canva/referencias/canva-spec.json. No se interpreta nada: si una medida
no esta en el plano, no se inventa.
Unidad: --u = 1 px del lienzo. Se resuelve con `cqw` contra la seccion, asi
la barra de desplazamiento no corre la maqueta (100vw si lo haria).
Esta hoja se carga DESPUES de sitio.css y manda sobre ella. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:200;font-display:swap;
src:url(fuentes/plexmono-200-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(fuentes/plexmono-700-latin.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(fuentes/spacemono-400-latin.woff2) format('woff2')}
@font-face{font-family:'Clear Sans';font-style:normal;font-weight:300;font-display:swap;
src:url(fuentes/clearsans-light.woff) format('woff')}
@font-face{font-family:'Clear Sans';font-style:normal;font-weight:400;font-display:swap;
src:url(fuentes/clearsans-regular.woff) format('woff')}
:root{
--plex:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
--clear:'Clear Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
--courier:'Courier New',Courier,monospace;
--space:'Space Mono',ui-monospace,monospace;
--cian:#05f8f9;
--azul:#1d6688;
--grafito:#14181f;
/* El doble check de la marca como mascara, para pintarlo con el color
que toque sin repetir el SVG en cada vineta. */
--check:url('data:image/svg+xml;utf8,');
}
/* ── armazon ───────────────────────────────────────────────────────────── */
/* SIN scroll-margin-top aqui: esta hoja carga DESPUES de sitio.css (ver
cabecera del archivo) y con la misma especificidad (una clase) que
`.sec{scroll-margin-top:var(--barra)}`, asi que cualquier valor que se
fije aqui GANA y anula esa reserva en TODAS las secciones (llevan ambas
clases, "sec cv"): un clic de menu deja la seccion al ras de arriba, bajo
la barra fija y transparente. Pasó el 07-10-2026 (confirmado con
getComputedStyle: scroll-margin-top daba 0px en vez de 88px) y es la causa
repetida de "el logo tapa el contenido a 390px" (01-10, 06-10, 07-10 x2).
`.hero` no necesita reserva (es el tope del documento) y no la pierde: el
valor inicial de scroll-margin-top ya es 0 sin declararlo. */
.cv{position:relative;container-type:inline-size;width:100%;margin:0;padding:0;
background:#000;overflow:hidden;--u:min(0.0732064cqw,1px)}
/* TECHO DE ESCALADO, 13-10-2026 (decision de Sebastian, opcion A).
Hasta hoy --u era 0.0732064cqw a secas: el lienzo de 1366 se estiraba al
ancho de la ventana y TODO crecia con el, texto incluido. A 1920 px el
parrafo de /02 media 33,9 px donde un sitio normal mide 16. Se leia como
un sitio con zoom puesto. Ahora la unidad se capa en 1 px —que es
exactamente 0.0732064cqw a 1366 px— y el lienzo se centra. Bajo 1366 el
comportamiento no cambia: min() toma el cqw, que ahi es menor que 1px.
En movil el techo no entra: --u vale 0.1465128cqw (lienzo 683) y
calc(1366*--u) da 200cqw, asi que el min(100%,...) deja el 100%. */
.cv .pg{position:relative;width:min(100%,calc(1366*var(--u)));margin-inline:auto;
aspect-ratio:calc(1366 / var(--h));overflow:hidden;background:#000}
.cv .b{position:absolute;left:calc(var(--x,0)*var(--u));top:calc(var(--y,0)*var(--u));
width:calc(var(--w,1366)*var(--u));margin:0}
.cv .b.fh{height:calc(var(--hh,0)*var(--u))}
.cv .pg{color:#fff}
.cv .t{font-size:calc(var(--fs,16)*var(--u));line-height:var(--lh,1.21);
letter-spacing:calc(var(--tr,0)*1em)}
.cv video,.cv img,.cv canvas{display:block;width:100%;height:100%;object-fit:cover}
/* Capa de contraste sobre los fondos de video: oscurece parejo y cierra los
bordes, que es lo que disimula la baja definicion del archivo. El filtro
del video acompaña. Receta de Sebastian, 03-10-2026. */
.velo-vid{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
radial-gradient(rgba(0,0,0,0) 15%,rgba(0,0,0,.5) 80%)}
.ofondo video,.ccirc video{filter:contrast(1.2) brightness(.85) saturate(1.1)}
.cv .b>video,.cv .b>img{width:100%;height:100%}
.cv p,.cv h1,.cv h2{margin:0}
/* El rotulo «/ 0X — nombre» de cada seccion: IBM Plex Mono 24 px extralight. */
.cv .rot{font-family:var(--plex);font-weight:200;color:#fff;white-space:nowrap;
font-size:calc(24*var(--u));line-height:1.21;letter-spacing:.122em;text-transform:uppercase}
/* ── / 00 Hero ─────────────────────────────────────────────────────────── */
#hero.cv{height:auto;min-height:0}
.hfranjas{overflow:hidden;background:#000}
/* La elipse negra que remata el video: equilibra la viñeta que traen 4 de los
5 videos. En el Canva es un shape de 1633x158 centrado en x=677. */
.harco{border-radius:50%;background:#000;filter:blur(calc(6*var(--u)))}
.hsello{filter:drop-shadow(0 calc(6*var(--u)) calc(26*var(--u)) rgba(0,0,0,.75))}
.hsello img{object-fit:contain;height:auto}
#hero .baja{bottom:calc(40*var(--u))}
/* ── / 01 Offenbar ─────────────────────────────────────────────────────── */
#offenbar.cv{display:block;min-height:0}
/* El video v3 ya trae su capa oscura: cubre la seccion entera y por eso
salieron la banda negra de arriba y el panel oscuro del centro, que
antes hacian ese trabajo a mano. (03-10-2026) */
.ofondo{overflow:hidden;
-webkit-mask-image:linear-gradient(#000 76%,transparent);
mask-image:linear-gradient(#000 76%,transparent)}
.ofondo video{width:100%;height:100%;object-fit:cover}
/* Banda negra superior: shape 596,-624 173x1366 girado -90 => y 0..146. */
.obanda{background:#000}
/* Panel central oscuro: shape 130,31 1141x1024 girado -90 => x 188..1211. */
.opanel{background:rgba(0,0,0,.94)}
/* Los dos rect 829,-4 y 805,159 de 816x163: el detalle de codigo binario de
la esquina superior derecha. Antes era un canvas animado; el Canva lo
resuelve con una imagen y asi se ve igual sin gastar un bucle. */
.ocod{object-fit:fill;opacity:.9}
.otit{font-family:var(--plex);font-weight:700;text-align:center;color:#fffefe;opacity:1;
text-transform:uppercase}
.osub{font-family:var(--plex);font-weight:400;text-align:center;color:#fff;opacity:1}
/* El «IA» toma el cobre #C87941 del sello compAI y su brasa. Dos sombras:
una corta y saturada que hace el calor del filamento y una larga y tenue
que lo derrama, que es como el SVG arma el resplandor (Sebastian, 08-10). */
.osub b{font-weight:700;color:#C87941;
text-shadow:0 0 calc(10*var(--u)) rgba(200,121,65,.85),
0 0 calc(34*var(--u)) rgba(200,121,65,.45)}
.oenl{font-family:var(--plex);font-weight:700;color:var(--petroleo2);opacity:1;
text-decoration:underline;text-underline-offset:calc(5*var(--u));display:block;
text-align:left;white-space:nowrap}
/* ── / 02 Il Cuore ─────────────────────────────────────────────────────── */
.ctit{font-family:var(--plex);font-weight:700;text-align:center;color:#fff;text-transform:uppercase}
.ctit span{display:block}
.ctit .amp{color:var(--petroleo2);font-style:normal}
/* shape -361,543 2112x1034 girado -90 => x 178..1212: apaga los circuitos
del fondo en el centro y los deja asomar solo por los bordes. */
.cuvelo{background:rgba(0,0,0,.96)}
/* La mariposa se achica dentro de su lamina: el fondo del video ya es negro,
asi que lo que sobra no se ve y la figura respira. Sebastian, 03-10-2026. */
/* La lamina negra se extiende hasta el borde de la seccion: el corte entre
el video de fondo de / 01 y el de / 02 dejaba una costura horizontal,
porque son el mismo video en dos momentos distintos. El negro la tapa y
de paso le da aire a la figura. Sebastian, 03-10-2026. */
.cuore-fondo{background:linear-gradient(#000 82%,transparent)}
/* La mariposa entera: el recorte de `cover` le comia las puntas de las alas
justo cuando las mueve. La caja va en 16:9 y el video en `contain`, asi
que no se recorta un pixel. Sebastian, 03-10-2026. */
.cuore{background:transparent}
.cuore video{object-fit:contain;transform:scale(.92);transform-origin:center}
.cpar{font-family:var(--clear);font-weight:300;text-align:center;color:#fff}
.cacc{display:flex;align-items:center;gap:calc(14*var(--u));text-decoration:none;color:#fff;
font-family:var(--plex);font-weight:400;text-transform:uppercase;white-space:nowrap}
.cacc .ic{width:calc(34*var(--u));height:calc(26*var(--u));border:calc(1.4*var(--u)) solid var(--azul);
border-radius:calc(4*var(--u));display:grid;place-items:center;color:var(--azul);flex:0 0 auto}
.cacc .ic svg{width:60%;height:auto;object-fit:contain}
.cacc .ic.red{border-radius:50%;width:calc(28*var(--u));height:calc(28*var(--u))}
.ciso{overflow:visible;opacity:.9;filter:drop-shadow(0 0 calc(7*var(--u)) rgba(5,248,249,.55))}
.ciso svg{width:100%;height:auto;object-fit:contain;overflow:visible}
.ciso path{fill:none;stroke:var(--cian);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
/* ── / 03 L'Intelligence · Grace ───────────────────────────────────────── */
/* LAMINA 1 DE / 03, segun la referencia que dio Sebastian el 04-10-2026
(Pictures/Screenshots/Captura de pantalla 2026-10-04 162841.png): lamina
negra a sangre, el video de Grace vertical y centrado, el texto a los dos
lados y las trazas de circuito en el cobre de la piel del personaje. */
.glam{background:#000}
/* el video se funde con el negro por los cuatro bordes: sin esto se ve el
rectangulo del archivo y la lamina deja de ser una sola pieza. */
.gvideo{overflow:hidden}
.gvideo video{object-fit:cover;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),
linear-gradient(transparent,#000 9%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),
linear-gradient(transparent,#000 9%,#000 88%,transparent);
-webkit-mask-composite:source-in;mask-composite:intersect}
.gltit{font-family:var(--plex);font-weight:700;color:#fff;text-transform:uppercase;
letter-spacing:.01em}
.gltit span{display:block}
.glpar,.glcierre{font-family:var(--plex);font-weight:300;color:#c9d2d9}
.gldcha{list-style:none;padding:0;margin:0;display:grid;gap:calc(22*var(--u));
font-family:var(--plex);font-weight:300;color:#c9d2d9;
font-size:calc(var(--fs)*var(--u));line-height:var(--lh)}
.gldcha li{position:relative;padding-left:calc(18*var(--u))}
.gldcha li::before{content:"";position:absolute;left:0;top:calc(.62em - 2px);
width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:var(--cian)}
.gldcha b{font-weight:700;color:var(--cian);font-style:normal}
.gldcha b.no{color:#c87941}
/* El punto seguia cian en los NO-GO: el color vivia en el y la vineta
cuelga del
. Cian = traza, cobre = transaccion; un NO-GO con punto
cian decia lo contrario de lo que dice la palabra al lado. 12-10-2026. */
.gldcha li.no::before{background:#c87941}
.glcierre{color:#aeb9c2}
.gllock{display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));
font-family:var(--plex);font-weight:700;color:var(--cian);text-transform:uppercase;
letter-spacing:.055em;font-size:calc(15*var(--u));white-space:nowrap}
/* El emblema es un sello de 30 px, no una lamina: sin el `.cv` delante,
`.cv .b>img{width:100%}` lo estiraba a los 400 px de la caja y asomaba
como un semicirculo cortado por el borde inferior. (04-10-2026) */
/* Sin halo a proposito (04-10-2026): el emblema encendido queda solo en la
lamina 2, donde el halo dice «Grace conectada». Aqui es firma, no estado. */
.cv .gllock img{width:calc(30*var(--u));height:auto;flex:0 0 auto;object-fit:contain}
/* La traza: dos copias del patron y el conjunto se corre una copia entera en
bucle. 26 s por vuelta es el «paneo lento» del encargo; a mas rapido se lee
como una barra de carga y no como un circuito vivo. */
.traza{display:block;overflow:hidden;height:calc(24*var(--u));
-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.traza svg{display:block;width:200%;height:100%;animation:panea 26s linear infinite}
.traza g{fill:none;stroke:#C87941;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.traza circle{fill:#C87941;stroke:none}
@keyframes panea{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.traza svg{animation:none}}
.gcab{background:#000}
.gcampo{filter:saturate(.9)}
/* shape 229,-50 932x1033 girado -90 => x 178..1211: apaga el campo de
codigo en el centro para que se lean el titulo y la lista. */
.gvelo{background:rgba(0,0,0,.9);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* los dos rect 415,276 786x229 y 415,473 786x226: el fondo de la lista. */
.gpanel{background:rgba(2,6,10,.8)}
.gtit{font-family:var(--plex);font-weight:700;color:#fff;text-transform:uppercase;
text-shadow:0 calc(2*var(--u)) calc(18*var(--u)) rgba(0,0,0,.95)}
.gtit span{display:block}
.gsub{font-family:var(--clear);font-weight:300;color:#dfe5ea;
text-shadow:0 calc(2*var(--u)) calc(14*var(--u)) rgba(0,0,0,.95)}
.gperfil{object-fit:contain;object-position:left bottom}
.gcanvas{display:block;width:100%;height:100%;background:transparent}
/* El emblema vive dentro de .gmarca, asi que la linea la arma el flex y no
dos cajas del lienzo que en el telefono se separaban. 26 px contra los 40
de antes: acompana al rotulo, no compite con el. */
/* `.cv` delante: sin el, `.cv .b>img{width:100%}` (0,2,1) le gana a
`.gmarca img` (0,1,1) y el emblema se infla a lamina. Es la MISMA
trampa que ya estaba anotada para .gllock img. */
.cv .gmarca img{width:calc(26*var(--u));height:auto;flex:0 0 auto;object-fit:contain;
/* Apagado de entrada. Se enciende cuando la lamina llega a pantalla: en la
lamina 1 el mismo emblema va sin halo, asi que el encendido es lo que
dice «Grace conectada» — si naciera prendido no se leeria el cambio.
Sebastian, 12-10-2026. */
filter:grayscale(1) brightness(.45);opacity:.5;
transition:filter .9s var(--curva,ease), opacity .9s var(--curva,ease)}
.cv .gmarca.vis img{opacity:1;
filter:grayscale(0) brightness(1)
drop-shadow(0 0 calc(9*var(--u)) rgba(5,248,249,.75))
drop-shadow(0 0 calc(22*var(--u)) rgba(5,248,249,.35))}
/* El encendido llega despues de que el rotulo termino de entrar, para que
se vea como un arranque y no como parte del fundido. */
.cv .gmarca.vis img{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
.cv .gmarca img{filter:none;opacity:1;transition:none}}
.gmarca{display:flex;align-items:center;gap:calc(12*var(--u));
font-family:var(--plex);font-weight:700;color:var(--cian);letter-spacing:.054em;
text-transform:uppercase;white-space:nowrap}
/* 12-10-2026, Sebastian: el sello baja debajo del rotulo y pierde la capsula.
Arriba y encapsulado competia con el emblema encendido; abajo y desnudo se
lee como lo que es, el pie de fecha del panel. */
.gvivo{font-family:var(--plex);font-weight:400;letter-spacing:.14em;
color:rgba(245,240,228,.52);text-transform:none}
/* El panel se lee, no se descifra: el cuerpo pasa de 8-10 px a 11-14 px
y la columna del veredicto baja de 104 a 48 px de lienzo, que es lo que
mide «NO-GO». Medido por Visu, 04-10-2026. */
/* LAMINA 2 DE / 03, encargo de Sebastian del 04-10-2026: el video de Grace a
la izquierda, el barrido a la derecha bajo el rotulo GRACE EN VIVO, cada
fila con su rubro y la caja con desplazador para verlas todas. Salieron el
fondo de campo de codigo (el video ya trae su lluvia de glifos) y el boton
«Ver los servicios»: la seccion cierra con las cifras, no con un llamado. */
.gviva{background:#000}
.gvfilm{overflow:hidden}
.gvfilm video{object-fit:cover;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
linear-gradient(transparent,#000 8%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
linear-gradient(transparent,#000 8%,#000 90%,transparent);
-webkit-mask-composite:source-in;mask-composite:intersect}
/* La caja del barrido: alto fijo y desplazador propio. Ocho filas no caben en
588 px de lienzo y recortarlas mentiria sobre cuanto barre Grace. */
.gcaja{overflow-y:auto;
background:rgba(2,6,10,.72);border:1px solid rgba(5,248,249,.14);
border-radius:calc(3*var(--u));padding:0 calc(20*var(--u));
scrollbar-width:thin;scrollbar-color:#c87941 rgba(255,255,255,.06)}
.gcaja::-webkit-scrollbar{width:calc(6*var(--u))}
.gcaja::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.gcaja::-webkit-scrollbar-thumb{background:#c87941;border-radius:999px}
.glista{list-style:none;padding:0;margin:0;display:grid}
.glista li{display:grid;grid-template-columns:calc(48*var(--u)) minmax(0,1fr) calc(96*var(--u));
align-items:start;gap:calc(12*var(--u));
font-family:var(--plex);font-size:calc(14*var(--u));line-height:1.35;color:#c3cad1;
border-top:1px solid rgba(255,255,255,.07);padding:calc(7*var(--u)) 0}
.glista .mkr{color:var(--petroleo2);font-weight:700;font-size:calc(11*var(--u));letter-spacing:.09em;padding-top:calc(12*var(--u))}
/* El veredicto se lee de un vistazo: GO en azul de traza, NO-GO apagado.
Tres NO-GO en ocho filas dicen que hay criterio y que sabe decir que no. */
.glista li:has(.mkr:not(:empty)) .mkr{white-space:nowrap}
.glista .mkr.no{color:#c87941}
.glista .dt{min-width:0}
/* rubro · licitacion · analisis. El rubro va primero porque es el filtro que
Grace aplica antes de mirar nada mas. */
.glista .dt b{display:block;font-weight:700;color:#7f8a93;font-size:calc(10*var(--u));
letter-spacing:.14em;text-transform:uppercase}
.glista .dt em{display:block;font-style:normal;font-weight:700;color:#e6eaee;
font-size:calc(12*var(--u));letter-spacing:.06em;text-transform:uppercase;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glista .dt i{display:block;font-style:normal;color:#aeb8c0}
.glista .ci{color:#9aa3ab;text-align:right;white-space:nowrap;font-size:calc(11*var(--u));padding-top:calc(13*var(--u))}
.gpie{font-family:var(--plex);font-size:calc(12*var(--u));line-height:1.5;color:#8a9299;letter-spacing:.04em}
/* El llamado a la accion de / 03, que el Canva no traia: la seccion cerraba
sin decirle al visitante que hacer.
VISU 04-10-2026: pasa a ocupar el ancho de la lista (--w 560 -> 752 en
construir.mjs), asi que el rotulo se centra; antes el boton cerraba 192 px
del lienzo antes que la lista y el pie, y era el descuadre mas visible. */
.gcta{display:inline-block;text-align:center;font-family:var(--plex);font-weight:700;font-size:calc(14*var(--u));
letter-spacing:.1em;text-transform:uppercase;color:#1a1208;background:#c87941;
padding:calc(14*var(--u)) calc(26*var(--u));border-radius:calc(3*var(--u));
text-decoration:none;transition:filter .2s}
.gcta:hover{filter:brightness(1.1)}
.gcifras{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;text-align:center}
.gcifras b{display:block;font-family:Archivo,sans-serif;font-variation-settings:"wdth" 104;font-weight:800;
font-size:calc(58*var(--u));line-height:1;letter-spacing:-.02em;color:#fff}
.gcifras span{display:block;font-family:var(--plex);font-size:calc(13*var(--u));letter-spacing:.14em;
text-transform:uppercase;color:#b9c0c6;margin-top:calc(10*var(--u))}
/* ── / 04 Creative ─────────────────────────────────────────────────────── */
.cvfondo{background:var(--grafito)}
.ccirc{opacity:1}
.cvelo{background:rgba(10,13,17,.96)}
.cline{background:linear-gradient(#5b3a22,#c87941 35%,#c87941 65%,#5b3a22)}
/* ── La ficha de / 04, medida por Visu el 05-10-2026 ───────────────────
Encargo de Sebastian: «evitar mucho texto explicativo, si potenciar
conceptos e imagenes». Lo que cambia, con numeros:
· encabezado 26 -> 44 px de lienzo
· bajada 11,5 -> 24, y sale la CAJA ALTA JUSTIFICADA: una bajada
comercial en versalitas justificadas se lee como contrato, no como
promesa, y a 11,5 px medidos daba 9,1 px reales en pantalla
· cinco checks pasan a TRES; los otros dos viven en la lamina
· el check deja de ser un borde de 2,4 px y pasa a ser el doble check
de la marca, solido, uno por linea
· se suma un llamado, en ambar y uno solo por ficha */
.serv-rot{display:block;font-family:var(--courier);font-size:calc(26*var(--u));
letter-spacing:.14em;color:rgba(245,240,228,.6);margin-bottom:calc(12*var(--u))}
.serv-tit{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:calc(44*var(--u));
line-height:1.08;color:#F5F0E4;letter-spacing:-.018em;max-width:16ch}
.serv-par{display:block;font-family:Archivo,sans-serif;font-weight:500;font-size:calc(24*var(--u));
line-height:1.42;color:#c3cad1;letter-spacing:0;max-width:24ch;
margin-top:calc(22*var(--u))}
.serv-vin{list-style:none;margin:calc(40*var(--u)) 0 0;padding:0;display:grid;
gap:calc(14*var(--u));font-family:Archivo,sans-serif;font-size:calc(22*var(--u));
line-height:1.3;color:#dfe3e7;letter-spacing:.01em}
.serv-vin li{display:grid;grid-template-columns:calc(26*var(--u)) minmax(0,1fr);
align-items:start;gap:calc(14*var(--u))}
/* El doble check de la marca, dibujado en el ::before para no repetir el SVG
doce veces en el HTML. Solido y azul: es traza, no transaccion. */
.serv-vin li::before{content:"";display:block;width:calc(22*var(--u));height:calc(20*var(--u));
margin-top:calc(4*var(--u));background:var(--azul);
-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.serv-acc{display:inline-block;margin-top:calc(34*var(--u));font-family:var(--courier);
font-size:calc(22*var(--u));letter-spacing:.12em;color:#c87941}
.servblock:hover .serv-acc{color:#e0944f}
/* ── La placa: lo que reemplaza al mockup de dispositivo ───────────────
El icono solo no sostiene la columna -168 px dentro de 662 es el 8 % del
area que ocupaba el monitor-. La placa es el objeto; el icono es su
contenido. Marco de 1 px, el codigo abajo a la izquierda, la linea en
ambar abajo a la derecha, y el doble check mordiendo la esquina. */
.placa{border:calc(1.4*var(--u)) solid rgba(46,143,181,.28);border-radius:calc(3*var(--u));
background:radial-gradient(120% 120% at 30% 20%,rgba(46,143,181,.09),transparent 62%);
display:grid;place-items:center;overflow:visible}
.placa-ic{width:calc(168*var(--u));height:calc(168*var(--u));color:var(--azul);
grid-area:1/1;align-self:center}
.placa-cod,.placa-lin{grid-area:1/1;font-family:var(--courier);font-size:calc(17*var(--u));
letter-spacing:.18em;align-self:end;margin-bottom:calc(22*var(--u))}
.placa-cod{justify-self:start;margin-left:calc(26*var(--u));color:rgba(245,240,228,.5)}
.placa-lin{justify-self:end;margin-right:calc(26*var(--u));color:#c87941}
.placa-tick{grid-area:1/1;justify-self:end;align-self:start;
width:calc(46*var(--u));height:auto;margin:calc(-16*var(--u)) calc(-16*var(--u)) 0 0;
fill:none;stroke:var(--azul);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Los mockups del Canva: carcasa neutra + un fondo de cielo y pasto. */
.mk{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));
width:calc(var(--w)*var(--u));height:calc(var(--hh)*var(--u))}
.mk .pantalla{position:absolute;inset:0;overflow:hidden;background:#05070a center/cover no-repeat}
/* Las pantallas llevan obra propia: recortes del video del hero, que es el
muestrario de creaciones de la casa. Sebastian, 03-10-2026. */
.mk.p1 .pantalla{background-image:url(../media/pantalla-1.webp)}
.mk.p2 .pantalla{background-image:url(../media/pantalla-2.webp)}
.mk.p3 .pantalla{background-image:url(../media/pantalla-3.webp)}
.mk.p4 .pantalla{background-image:url(../media/pantalla-4.webp)}
.mk.tel{border:calc(9*var(--u)) solid #0d0f12;border-radius:calc(34*var(--u));
background:#0d0f12;box-shadow:0 0 0 calc(2*var(--u)) #33383e}
.mk.tel .pantalla{border-radius:calc(25*var(--u))}
.mk.tel .muesca{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:2;
width:38%;height:calc(14*var(--u));background:#0d0f12;border-radius:0 0 calc(10*var(--u)) calc(10*var(--u))}
.mk.mon .marco{position:absolute;left:0;top:0;right:0;height:calc(var(--mh)*var(--u));
border:calc(7*var(--u)) solid #e8eaec;border-radius:calc(8*var(--u));background:#e8eaec;overflow:hidden}
.mk.mon .marco .pantalla{inset:0}
.mk.mon .cuello{position:absolute;left:50%;transform:translateX(-50%);
top:calc(var(--mh)*var(--u));width:14%;height:calc(42*var(--u));background:#d8dbde}
.mk.mon .base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:46%;height:calc(10*var(--u));border-radius:calc(6*var(--u));background:#e8eaec}
.mk.lap .marco{position:absolute;left:6%;top:0;right:6%;height:calc(var(--mh)*var(--u));
border:calc(7*var(--u)) solid #cfd3d7;border-radius:calc(7*var(--u));background:#cfd3d7;overflow:hidden}
.mk.lap .marco .pantalla{inset:0}
.mk.lap .base{position:absolute;left:0;right:0;bottom:0;height:calc(9*var(--u));
background:linear-gradient(#e6e9ec,#b9bec4);border-radius:0 0 calc(6*var(--u)) calc(6*var(--u))}
/* ── Las tres bandas /pista /nodo /nucleo ──────────────────────────────
Hasta el 04-10-2026 eran tres rectangulos con video y una palabra encima:
tres servicios anunciados y ninguno explicado. Ahora cada banda abre hacia
la derecha con su ficha. y no :hover, porque en telefono no hay
cursor y la mitad de las visitas se quedaria sin saber que hay algo. */
.banda{position:absolute;overflow:hidden;background:#0b0e12}
.banda summary{position:absolute;inset:0;list-style:none;cursor:pointer;
display:block;-webkit-tap-highlight-color:transparent}
.banda summary::-webkit-details-marker{display:none}
.banda summary::marker{content:""}
.banda .ccirc{position:absolute;inset:0;display:block}
.banda-velo{position:absolute;inset:0;background:rgba(0,0,0,.78);
transition:background .45s ease}
.banda[open] .banda-velo{background:rgba(0,0,0,.88)}
/* 06-10-2026 · LAS BANDAS SON COMIC Y EL COMIC SE TIENE QUE VER. Con el velo
al 78 %, el velo del video y brightness(.85) el dibujo de la panadera
quedaba a ~10 % de luz. El velo pasa a degradado: oscuro bajo el rotulo
(izquierda), claro a la derecha, donde esta el chiste. Medido en captura. */
.banda .velo-vid{display:none}
.banda-velo{background:linear-gradient(90deg,rgba(8,6,4,.82) 0%,rgba(8,6,4,.66) 36%,rgba(8,6,4,.2) 70%,rgba(8,6,4,.1) 100%)}
.banda .ccirc video{filter:none}
.banda-tx{position:absolute;left:calc(137*var(--u));top:50%;transform:translateY(-50%);
font-family:var(--courier);font-weight:700;color:var(--cian);opacity:.92;
font-size:calc(81.1*var(--u));line-height:1.1;letter-spacing:.054em;
white-space:nowrap;text-transform:uppercase}
/* Cerrada es una cruz —«abreme»— y al abrir gira 45 grados y se lee como una
equis —«cierrame»—: el mismo elemento dice las dos cosas. */
/* El rotulo de la banda es el codigo grande y el nombre de la linea debajo.
De una sola linea no cabe: «L1 · AUTOMATIZACION E INTEGRACION DE SISTEMAS»
a 81 px se sale del lienzo y se mete bajo la ficha. */
.banda-sub{position:absolute;left:calc(141*var(--u));top:50%;
margin-top:calc(34*var(--u));font-family:var(--plex);font-weight:400;
font-size:calc(15*var(--u));letter-spacing:.2em;text-transform:uppercase;
color:rgba(245,240,228,.72);white-space:nowrap}
.banda-mas{position:absolute;left:calc(137*var(--u));top:50%;
margin-top:calc(86*var(--u));width:calc(26*var(--u));height:calc(26*var(--u));
transform:rotate(0deg);transition:transform .45s ease}
.banda-mas::before,.banda-mas::after{content:"";position:absolute;background:#c87941;
left:50%;top:50%}
.banda-mas::before{width:calc(26*var(--u));height:2px;transform:translate(-50%,-50%)}
.banda-mas::after{width:2px;height:calc(26*var(--u));transform:translate(-50%,-50%)}
.banda[open] .banda-mas{transform:rotate(45deg)}
/* La ficha entra desde la derecha. `visibility` ademas de `transform` para que
los enlaces no sean pulsables mientras esta fuera de cuadro. */
.banda-ficha{position:absolute;right:0;top:0;bottom:0;width:52%;
background:linear-gradient(90deg,rgba(11,14,18,0),rgba(11,14,18,.97) 14%,rgba(11,14,18,.97));
border-left:1px solid rgba(200,121,65,.45);
padding:calc(40*var(--u)) calc(62*var(--u)) calc(40*var(--u)) calc(74*var(--u));
display:flex;flex-direction:column;justify-content:center;gap:calc(14*var(--u));
transform:translateX(102%);visibility:hidden;
transition:transform .5s cubic-bezier(.22,.8,.3,1),visibility 0s linear .5s}
.banda[open] .banda-ficha{transform:translateX(0);visibility:visible;
transition:transform .5s cubic-bezier(.22,.8,.3,1),visibility 0s}
/* El dibujo que abre cada banda. Azul lo que ya estaba en el nivel anterior,
ambar lo que ese nivel agrega: el ambar es lo unico que hay que mirar. */
.esq{display:block;width:calc(400*var(--u));height:auto;max-width:100%}
.esq .traza{stroke:var(--azul);color:var(--azul)}
.esq .accion{stroke:#c87941;color:#c87941}
/* Llamado para la PyME bajo las bandas (veto de ClAI-nte, 06-10-2026). */
/* El banner del catalogo. Ancho completo bajo la lamina PyME: era una frase
al pie («¿Cual es la tuya? Buscala en el catalogo») y nadie la leia como
una accion. Sebastian, 12-10-2026. */
.bcat{display:flex;align-items:center;justify-content:center;
text-decoration:none;border:1px solid rgba(200,121,65,.45);
border-radius:calc(4*var(--u));background:rgba(200,121,65,.06);
font-family:var(--courier);font-size:calc(24*var(--u));letter-spacing:.14em;
color:#c87941;transition:background .3s ease,border-color .3s ease,color .3s ease}
.bcat:hover{background:rgba(200,121,65,.14);border-color:rgba(200,121,65,.8);
color:#e0944f}
.banda-llamado a{color:#c87941;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(200,121,65,.5)}
.banda-llamado a:hover{color:#e09a63;border-bottom-color:#e09a63}
.esq-pie{margin:calc(16*var(--u)) 0 0;font-family:var(--plex);font-weight:300;
font-size:calc(14*var(--u));line-height:1.5;color:#aeb8c0}
.esq-pie b{font-weight:700;color:#c87941;text-transform:uppercase;
letter-spacing:.14em;font-size:calc(12.5*var(--u));margin-right:calc(8*var(--u))}
.banda-ficha h3{margin:0;font-family:Archivo,sans-serif;font-weight:800;
font-size:calc(26*var(--u));line-height:1.18;color:#fff;letter-spacing:-.01em}
.banda-ficha p{margin:0;font-family:var(--clear);font-weight:300;
font-size:calc(14*var(--u));line-height:1.5;color:#c3cad1}
.banda-ficha ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(6*var(--u))}
.banda-ficha li{position:relative;padding-left:calc(16*var(--u));
font-family:var(--plex);font-weight:300;font-size:calc(12.5*var(--u));
line-height:1.4;color:#aeb8c0}
.banda-ficha li::before{content:"";position:absolute;left:0;top:calc(.55em - 1px);
width:calc(5*var(--u));height:calc(5*var(--u));background:#c87941}
.banda-ficha a{align-self:flex-start;margin-top:calc(6*var(--u));
font-family:var(--plex);font-weight:700;font-size:calc(12*var(--u));
letter-spacing:.1em;text-transform:uppercase;color:#1a1208;background:#c87941;
padding:calc(11*var(--u)) calc(22*var(--u));border-radius:calc(3*var(--u));
text-decoration:none;transition:filter .2s}
.banda-ficha a:hover{filter:brightness(1.1)}
@media (prefers-reduced-motion:reduce){
.banda-ficha,.banda-mas,.banda-velo{transition:none}}
/* ── / 05 Inbox ────────────────────────────────────────────────────────── */
.icaja{background:#15181c;border:1px solid rgba(255,255,255,.07);
padding:calc(82*var(--u)) calc(70*var(--u))}
.ikick{font-family:var(--plex);font-weight:400;font-size:calc(11*var(--u));letter-spacing:.22em;
color:#9aa0a6;text-transform:uppercase}
.ititulo{font-family:var(--plex);font-weight:700;font-size:calc(44*var(--u));line-height:1.1;
letter-spacing:.01em;color:#fff;margin:calc(34*var(--u)) 0 calc(52*var(--u));text-transform:uppercase}
.ititulo em{font-style:normal;color:#c87941}
#inbox .campos{display:grid;grid-template-columns:1fr 1fr;gap:calc(40*var(--u)) calc(30*var(--u))}
#inbox .campo{display:grid;gap:calc(16*var(--u))}
#inbox .campo.ancho2{grid-column:1/-1}
#inbox .campo label{font-family:var(--plex);font-weight:400;font-size:calc(10.5*var(--u));
letter-spacing:.2em;text-transform:uppercase;color:#8e949a}
#inbox .campo input,#inbox .campo textarea{background:transparent;border:1px solid rgba(255,255,255,.22);
border-radius:calc(3*var(--u));color:#e9ecef;padding:calc(18*var(--u)) calc(22*var(--u));
font-family:var(--clear);font-size:calc(17*var(--u));line-height:1.3;width:100%}
#inbox .campo input::placeholder,#inbox .campo textarea::placeholder{color:#b6bbc0}
#inbox .campo.mono input{font-family:var(--plex);letter-spacing:.06em}
#inbox .campo textarea{min-height:calc(160*var(--u));resize:vertical}
.iadjunta{grid-column:1/-1;margin-top:calc(26*var(--u))}
.iadjunta input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.iadjunta label{border:1px dashed rgba(255,255,255,.25);cursor:pointer;
border-radius:calc(3*var(--u));padding:calc(20*var(--u)) calc(24*var(--u));
display:grid;grid-template-columns:auto 1fr;gap:calc(16*var(--u));align-items:center}
.iadjunta label:hover{border-color:rgba(200,121,65,.6)}
.iadjunta input[type=file]:focus-visible+label{outline:2px solid #c87941;outline-offset:2px}
.ilista{list-style:none;margin:calc(12*var(--u)) 0 0;padding:0;display:grid;
gap:calc(6*var(--u))}
.ilista li{font-family:var(--plex);font-size:calc(12*var(--u));color:#c9ced3;
letter-spacing:.04em;display:flex;justify-content:space-between;gap:calc(16*var(--u));
border-left:2px solid #c87941;padding-left:calc(10*var(--u))}
.ilista li span{color:#8e949a}
.ilista li.mal{color:#e8a0a0;border-left-color:#e8a0a0}
.iadjunta svg{width:calc(22*var(--u));height:auto;object-fit:contain;color:#c9ced3}
.iadjunta b{display:block;font-family:var(--clear);font-weight:400;font-size:calc(16*var(--u));color:#e4e8eb}
.iadjunta span{display:block;font-family:var(--plex);font-size:calc(11*var(--u));color:#8e949a;
letter-spacing:.04em;margin-top:calc(6*var(--u))}
#inbox .enviar{margin-top:calc(34*var(--u));display:flex;align-items:center;gap:calc(32*var(--u))}
#inbox .btn{background:#c87941;color:#1a1208;border-radius:calc(3*var(--u));
padding:calc(22*var(--u)) calc(38*var(--u));font-family:var(--plex);font-weight:700;
font-size:calc(13*var(--u));letter-spacing:.18em;text-transform:uppercase}
#inbox .nota{font-family:var(--plex);font-size:calc(12*var(--u));color:#9aa0a6;letter-spacing:.04em}
#inbox .aviso{grid-column:1/-1;margin-top:calc(22*var(--u));font-size:calc(14*var(--u))}
/* ── / 06 Contacto ─────────────────────────────────────────────────────── */
.kpreg{font-family:Archivo,sans-serif;font-weight:700;text-align:center;color:#fff;
text-transform:uppercase;letter-spacing:.122em;line-height:1.21}
.kcorreo{font-family:var(--plex);font-weight:400;text-align:center;color:var(--petroleo2);
text-decoration:none;display:block;letter-spacing:.122em}
/* El orbe de la esquina: en el Canva es un video. Aca se arma con gradientes. */
.korbe{border-radius:50%;opacity:.75;overflow:hidden;
background:
radial-gradient(ellipse at 46% 66%,rgba(255,150,40,.75) 0 6%,transparent 34%),
radial-gradient(ellipse at 58% 44%,rgba(214,32,52,.78) 0 14%,transparent 46%),
radial-gradient(ellipse at 36% 30%,rgba(86,24,140,.8) 0 18%,transparent 52%),
radial-gradient(circle at 50% 50%,transparent 44%,rgba(6,4,20,.8) 70%,#040310 100%),
radial-gradient(circle at 50% 50%,#160a38,#05030f 74%)}
.korbe::after{content:"";position:absolute;inset:0;border-radius:50%;
box-shadow:inset 0 0 calc(30*var(--u)) rgba(90,150,200,.22)}
.kscl{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 96;font-weight:800;
text-align:center;color:#fff;line-height:1;letter-spacing:-.031em;
text-shadow:0 calc(10*var(--u)) calc(40*var(--u)) rgba(0,0,0,.9)}
.klugar{font-family:var(--space);font-weight:400;text-align:center;color:#fff;
letter-spacing:.06em;white-space:nowrap}
/* El picaflor es la puerta de la intranet desde el 12-10-2026, y el encendido
NO se puede hacer con filtros: Sebastian entrego la animacion hecha y en
ella el ave ALETEA y los circuitos se prenden en amarillo neon. Un
brightness/saturate sobre la foto quieta no da ninguna de las dos cosas.
Asi que la foto y el video viven superpuestos y el clic cambia cual se ve. */
.kpicaflor{mix-blend-mode:screen;opacity:.95;display:block;cursor:pointer;
position:absolute;-webkit-tap-highlight-color:transparent}
.kpicaflor img,.kpicaflor video{display:block;width:100%;height:auto;
object-fit:contain}
.kpicaflor video{position:absolute;inset:0;opacity:0;pointer-events:none}
/* El cruce es inmediato y no un fundido: el primer cuadro del video es la
misma foto, asi que un fundido se veria como un parpadeo sin motivo. */
.kpicaflor.volando img{opacity:0}
.kpicaflor.volando video{opacity:1}
.kpicaflor:hover img{filter:brightness(1.12) saturate(1.15)}
.kpicaflor img{transition:filter .45s ease}
/* Foco de teclado: la puerta tiene que ser alcanzable sin mouse, porque ya
no queda ningun otro enlace a la intranet en la pagina. */
.kpicaflor:focus-visible{outline:2px solid var(--cian);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
.kpicaflor.volando img{opacity:1}
.kpicaflor.volando video{opacity:0}}
.kcomp{display:block;text-decoration:none;opacity:.5;transition:opacity .4s}
.kcomp:hover{opacity:1}
.kcomp img{object-fit:cover;object-position:center 42%}
.kintranet{font-family:var(--space);font-weight:400;text-align:center;color:#fff;opacity:.4;
text-decoration:none;display:block;letter-spacing:-.031em}
/* #787d82 y no #45484c: el gris anterior daba 2,28 de contraste contra el
negro, la mitad del minimo exigible de 4,5. Son la razon social, el RUT, la
ficha de proveedores y el enlace al portafolio — justo lo que un comprador
publico necesita LEER para verificar con quien trata. Medido por _medir.py
el 12-10-2026, que llevaba dias sin correr y por eso nadie lo vio. */
.kpie{font-family:var(--plex);font-size:calc(11*var(--u));letter-spacing:.08em;color:#787d82;
text-transform:uppercase;display:flex;justify-content:space-between;gap:calc(16*var(--u))}
.kpie a{text-decoration:none}
.kpie a:hover{color:#c87941}
/* ── telefono: bajo 700 px la maqueta se apila en una columna ───────────
El lienzo se lee al doble de escala (--u pasa de 1/1366 a 1/683) y cada
pagina deja de ser un plano absoluto para ser una columna. Las capas que
solo existen para oscurecer o decorar no se apilan: se esconden. */
@media (max-width:700px){
.cv{--u:0.1465128cqw}
.cv .pg{aspect-ratio:auto;height:auto;min-height:0;
display:flex;flex-direction:column;align-items:stretch;
gap:calc(34*var(--u));padding:calc(70*var(--u)) calc(40*var(--u))}
.cv .b{position:static;left:auto;top:auto;width:100%;height:auto;margin:0}
/* el mockup conserva `relative`: su pantalla va absoluta adentro y sin
contenedor posicionado se estira sobre la seccion entera. */
.cv .mk{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0}
.cv .b.fh{height:auto}
.cv .b>video,.cv .b>img{width:100%;height:auto;object-fit:contain}
.cv .b>canvas.gcanvas{width:100%;height:auto;aspect-ratio:calc(var(--w) / var(--hh))}
.cv .rot{order:-1}
.cv .banda-rot{margin:calc(30*var(--u)) 0 calc(14*var(--u))}
.harco,.obanda,.opanel,.cvelo,.cuvelo,.gvelo,.gpanel,.banda-velo,.ccirc,.cline,.ocod{display:none}
#hero .pg{padding:0;gap:0}
#hero .hfranjas{height:calc(430*var(--u))}
#hero .hfranjas video{height:100%;object-fit:cover}
#hero .hsello{width:64%;margin:calc(-40*var(--u)) auto calc(70*var(--u))}
#offenbar .pg{position:relative}
.ofondo{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.cv .gmarca img{width:calc(40*var(--u))}
.otit{font-size:calc(46*var(--u))}
.osub{font-size:calc(38*var(--u))}
.oenl{text-align:center;white-space:normal;font-size:calc(24*var(--u))}
.ctit{font-size:calc(34*var(--u))}
.cpar{font-size:calc(22*var(--u))}
.cv .ciso{width:min(160px,42%);margin-inline:auto;order:4}
.cacc{justify-content:center;font-size:calc(20*var(--u))}
/* LAMINA 1 de / 03 en telefono: el lienzo apila, pero los cuerpos del
escritorio (14,5 px de lienzo) caen a 8 px aca. Visu/04-10-2026. */
.cv .gltit{font-size:calc(46*var(--u))}
.cv .glpar,.cv .glcierre{font-size:calc(28*var(--u))}
.gldcha{font-size:calc(28*var(--u));gap:calc(30*var(--u))}
.gldcha li{padding-left:calc(34*var(--u))}
.gldcha li::before{width:calc(10*var(--u));height:calc(10*var(--u))}
/* En el telefono el lockup GRACE SYSTEM caia al final de la lamina 1,
pegado al emblema encendido de la lamina 2: los dos logos quedaban
juntos y no se leia que uno esta apagado y el otro conectado. Sube a
justo debajo del video del rostro, centrado (Sebastian, 08-10-2026). */
.cv .glam>.b{order:1}
.cv .glam .rot{order:-2}
.cv .glam .gvideo{order:-1}
.cv .glam .gllock{order:0;justify-content:center;margin:calc(26*var(--u)) 0}
.gllock{justify-content:flex-start;font-size:calc(26*var(--u));gap:calc(16*var(--u))}
/* sin esto, `.cv .b>img{width:100%}` convierte el emblema en una lamina */
.cv .gllock img{width:calc(56*var(--u))}
.traza{height:calc(44*var(--u))}
.gvideo video{max-height:72vh}
/* `.cv` delante: sin el, `.cv .t` (0,2,0) de arriba le gana a `.gtit`
(0,1,0) y estas tres reglas no se aplicaban nunca. Visu, 04-10-2026. */
.cv .gtit{font-size:calc(52*var(--u))}
.cv .gsub{font-size:calc(28*var(--u))}
.cv .gmarca{font-size:calc(34*var(--u))}
.cv .gvivo{font-size:calc(22*var(--u));padding:calc(6*var(--u)) calc(16*var(--u));
width:auto;align-self:flex-start}
.gcaja{max-height:none;overflow:visible;padding:calc(10*var(--u)) calc(24*var(--u))}
.gvfilm video{max-height:72vh}
.cv .dt b{font-size:calc(20*var(--u))}
.cv .dt em{font-size:calc(24*var(--u));white-space:normal}
.cv .dt i{white-space:normal}
.glista li{grid-template-columns:1fr;gap:calc(4*var(--u));font-size:calc(28*var(--u))}
.glista .mkr,.glista .dt b,.glista .ci{font-size:calc(23*var(--u))}
.glista .ci{text-align:left}
.glista .dt em{white-space:normal}
.gpie{font-size:calc(23*var(--u))}
/* la unica accion de la seccion no puede ser la pieza mas chica:
33,7 px de alto a 390 px pasan a 50. Visu, 04-10-2026. */
.cv .gcta{font-size:calc(28*var(--u));padding:calc(22*var(--u)) calc(26*var(--u));
align-self:stretch;text-align:center}
.gcifras{grid-template-columns:1fr;gap:calc(40*var(--u))}
.gcifras b{font-size:calc(64*var(--u))}
.gcifras span{font-size:calc(24*var(--u))}
.serv-rot{font-size:calc(26*var(--u))}
.serv-tit{font-size:calc(52*var(--u))}
/* La bajada NO se muestra en el telefono: titular + 3 checks + accion
bastan, y cuatro laminas con bajada eran un muro de texto (probado con
gente, 08-10-2026). El texto sigue en la hoja, que es donde se lee. */
/* la bajada ya no se emite en ninguna lamina: se quito del
constructor el 12-10-2026, no solo del telefono */
.serv-vin{margin-top:calc(34*var(--u));font-size:calc(28*var(--u));gap:calc(20*var(--u))}
.serv-vin li{grid-template-columns:calc(34*var(--u)) minmax(0,1fr)}
.serv-vin li::before{width:calc(30*var(--u));height:calc(27*var(--u))}
.serv-acc{font-size:calc(26*var(--u));margin-top:calc(30*var(--u));
border:1px solid rgba(200,121,65,.55);border-radius:calc(4*var(--u));
padding:calc(14*var(--u)) calc(22*var(--u))}
/* La placa sube sobre el texto y se achica: a ancho completo pesaria mas
que el servicio que anuncia. */
.cv .placa{order:-1;width:calc(300*var(--u));height:calc(300*var(--u));align-self:flex-start}
.placa-ic{width:calc(132*var(--u));height:calc(132*var(--u))}
.placa-cod,.placa-lin{font-size:calc(20*var(--u))}
.cv .placa-tick{width:calc(54*var(--u))}
.mk{aspect-ratio:calc(var(--w) / var(--hh));height:auto;margin-inline:auto}
.cv .mk.tel{width:min(210px,56%)}
/* En telefono la banda es una fila apilada: el video de fondo ya esta
apagado por `.ccirc{display:none}`, asi que la ficha baja en vez de
entrar por el costado. */
.cv .banda{position:static;height:auto;padding:calc(30*var(--u)) 0;
border-top:1px solid rgba(200,121,65,.3)}
.cv .banda summary{position:static;display:grid;
grid-template-columns:1fr auto;align-items:center;gap:calc(8*var(--u)) calc(20*var(--u))}
.cv .banda-mas{grid-row:1 / span 2;grid-column:2;align-self:center}
.cv .banda-velo{display:none}
/* 06-10-2026 · EL COMIC DE LA PANADERA TAMBIEN EN TELEFONO. Antes la
intencion era apagar el video aca, pero `.banda .ccirc{display:block}`
le ganaba por especificidad a `.ccirc{display:none}`: los tres videos
quedaban absolutos contra la seccion, apilados, y solo se veia el
ultimo. Ahora el cuadro va entero, en su proporcion, sobre el rotulo. */
.cv .banda .ccirc{display:block;position:relative;inset:auto;
aspect-ratio:1200 / 676;margin:0 0 calc(18*var(--u));border-radius:4px;overflow:hidden}
.cv .banda .ccirc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv .banda summary{grid-template-columns:1fr auto}
.cv .banda .ccirc{grid-column:1 / -1;grid-row:1}
.cv .banda .banda-tx{grid-column:1;grid-row:2}
.cv .banda .banda-sub{grid-column:1;grid-row:3}
.cv .banda .banda-mas{grid-column:2;grid-row:2 / span 2}
.cv .banda-tx{position:static;transform:none;font-size:calc(64*var(--u))}
.cv .banda-sub{position:static;margin:calc(6*var(--u)) 0 0;font-size:calc(24*var(--u));white-space:normal}
.cv .banda-mas{position:static;margin:0;flex:0 0 auto;
width:calc(40*var(--u));height:calc(40*var(--u))}
.cv .banda-mas::before{width:calc(40*var(--u))}
.cv .banda-mas::after{height:calc(40*var(--u))}
.cv .banda-ficha{position:static;width:auto;transform:none;visibility:visible;
background:none;border-left:0;border-top:1px solid rgba(200,121,65,.3);
padding:calc(28*var(--u)) 0 0;gap:calc(20*var(--u))}
.cv .esq{max-height:none}
.esq-pie{font-size:calc(26*var(--u))}
.esq-pie b{font-size:calc(22*var(--u))}
.cv .banda-ficha h3{font-size:calc(40*var(--u))}
.cv .banda-ficha p{font-size:calc(28*var(--u))}
.cv .banda-ficha li{font-size:calc(26*var(--u));padding-left:calc(30*var(--u))}
.cv .banda-ficha li::before{width:calc(10*var(--u));height:calc(10*var(--u))}
.cv .banda-ficha a{font-size:calc(24*var(--u));padding:calc(20*var(--u)) calc(28*var(--u));
align-self:stretch;text-align:center}
.icaja{padding:calc(44*var(--u)) calc(34*var(--u))}
.ikick{font-size:calc(15*var(--u))}
.ititulo{font-size:calc(42*var(--u));margin:calc(26*var(--u)) 0 calc(34*var(--u))}
#inbox .campos{grid-template-columns:1fr;gap:calc(30*var(--u))}
#inbox .campo label{font-size:calc(15*var(--u))}
#inbox .campo input,#inbox .campo textarea{font-size:16px;padding:calc(18*var(--u)) calc(20*var(--u))}
#inbox .campo textarea{min-height:calc(190*var(--u))}
.iadjunta b{font-size:calc(20*var(--u))}
.iadjunta span{font-size:calc(15*var(--u))}
#inbox .enviar{flex-wrap:wrap;gap:calc(20*var(--u))}
#inbox .btn{font-size:calc(17*var(--u))}
#inbox .nota{font-size:calc(15*var(--u))}
.kpreg{font-size:calc(26*var(--u))}
.kcorreo{font-size:calc(32*var(--u))}
.cv .korbe{width:min(190px,48%);aspect-ratio:1;margin-inline:auto;order:4}
.kscl{font-size:calc(170*var(--u))}
.klugar{font-size:calc(24*var(--u))}
.cv .kpicaflor{order:3;width:min(260px,70%);margin-inline:auto}
.cv .kcomp{order:5;width:min(190px,52%);aspect-ratio:205/115;margin-inline:auto}
.kintranet{order:6;font-size:calc(22*var(--u))}
.kpie{order:7;flex-direction:column;gap:calc(10*var(--u));font-size:calc(14*var(--u));text-align:center}
}
#contacto.cv{padding:0}
#inbox.cv,#creative.cv,#grace.cv,#il-cuore.cv{padding:0}
@media (max-width:700px){
.cv .b>img.gcanvas{width:100%;height:auto;object-fit:contain}
}
/* ── los textos entran y salen con el scroll ────────────────────────────
Bidireccional a proposito: al subir, el texto se retira igual que al
bajar. Si solo entrara, el segundo recorrido de la pagina seria plano.
Sebastian, 03-10-2026. */
.cv .anim{opacity:0;transform:translateY(calc(26*var(--u)));
transition:opacity .62s cubic-bezier(.2,.7,.2,1) var(--d,0ms),
transform .62s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.cv .anim.vis{opacity:1;transform:none}
/* los que ya traen opacidad propia del Canva no deben saltar a 1 */
.cv .banda-tx.anim.vis{opacity:.92}
.cv .kintranet.anim.vis{opacity:.4}
/* ── la barra: el logo se retira de / 02 en adelante ─────────────────── */
body.lejos .bar .logo-link{opacity:0;pointer-events:none}
/* El correo del menu, en azul petroleo de marca. */
.menu aside .big a{color:var(--petroleo);text-decoration:none}
.menu aside .big a:hover{color:var(--sol)}
@media (prefers-reduced-motion:reduce){
.cv .anim{opacity:1!important;transform:none!important}
}
/* Compuerta de medicion: `html.foto` la pone kit-canva/herramientas/compara.mjs
para que la foto retrate el estado LEIDO de la pagina y no un instante a
medio camino de la entrada. No la usa nadie mas. */
html.foto .cv .anim{opacity:1;transform:none;transition:none}
html.foto .cv .banda-tx.anim{opacity:.92}
html.foto .cv .kintranet.anim{opacity:.4}
/* rotulo de los servicios PyME sobre las tres bandas (07-10-2026) */
.cv .banda-rot{font-family:var(--plex);font-weight:200;color:#fff;white-space:nowrap;
font-size:calc(24*var(--u));line-height:1.21;letter-spacing:.122em;text-transform:uppercase}
/* la placa de / 04 tambien abre la lamina (07-10-2026) */
.cv .placa[data-slug]{cursor:pointer;transition:border-color .2s}
.cv .placa[data-slug]:hover{border-color:rgba(46,143,181,.6)}