/* ============================================================================
INTHARIS — hoja de estilos compartida por las 6 paginas
----------------------------------------------------------------------------
Se carga desde assets/, asi que las rutas relativas de dentro (../fonts/…)
resuelven igual desde la raiz y desde las subpaginas.
Orden: tapa de ruta directa · utilidades · escritorio (lienzo 1920) · movil.
========================================================================== */
/* el lienzo de la home llega a z-index 80; los overlays arrancan en 200 */
html.ruta-directa::before{ content:""; position:fixed; inset:0; z-index:150; background:var(--tapa,#f1f1f1); }
@media (max-width:820px){ html.ruta-directa::before{ display:none; } }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ====== TIPOGRAFIA: FIGTREE ======
Sustituye a Aeonik, que no se va a usar. DOS caras y no tres porque es una
VARIABLE: un solo archivo por subconjunto cubre el 300-700 entero, y la
pagina usa cuatro pesos (300 en 43 reglas, 400 en 60, 500 en 6 y 700 en 9).
SE SIRVE DESDE EL REPOSITORIO, no desde una pila del sistema, y esa es toda
la razon de existir de este bloque: mientras la familia dependia de lo que
hubiera instalado en cada equipo habia TRES renderizados -- Aeonik en la
maquina de desarrollo, que la tiene instalada, Arial en Windows y Helvetica
Neue en macOS -- y lo que se veia al disenar no era lo que salia en
produccion.
Los dos subconjuntos son los de Google Fonts con sus unicode-range: el
castellano cabe entero en `latin` (U+0000-00FF cubre tildes y ene), y
`latin-ext` va por completitud y solo se descarga si aparece un glifo suyo.
Por eso el preload de las plantillas es unicamente el de `latin`.
La ruta es relativa a ESTA hoja, que vive en assets/, asi que apunta a
assets/fonts/. La de Aeonik decia '../fonts/', una carpeta en la raiz que
nunca existio: de ahi los seis 404.
NO llevan ?v=: solo styles.css y app.js van versionados y una fuente no
cambia. OFL.txt va al lado porque la licencia obliga a distribuirla con los
archivos.
Y OJO CON EL NOMBRE: la familia se llama 'Figtree' y solo 'Figtree'. Aeonik
ya no aparece en ninguna pila, que es lo unico que impide que un equipo con
Aeonik instalada la siga pintando. */
@font-face{
font-family:'Figtree';
src:url('fonts/figtree-latin.woff2') format('woff2');
font-weight:300 700; font-style:normal; font-display:swap;
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:'Figtree';
src:url('fonts/figtree-latin-ext.woff2') format('woff2');
font-weight:300 700; font-style:normal; font-display:swap;
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
--black:#000;
--white:#fff;
/* El rojo de la casa. TODO el proyecto lo lee de aqui: la hoja con var(),
app.js asignando 'var(--red-core)' en linea. Subio de var(--red-core) a #ab0000
(+4,3 de L*) porque el anterior se apagaba sobre el gris del resalte. */
--red-core:#ab0000;
/* El aire de CERTIFICACIONES con lo que tenga encima, en unidades de
lienzo y sin unidad, UNO para toda la web: lo lee fitCanvas() en la home
(AIRE_CERTS) y es el padding-top de .nf-certs en los dos clones, que ya
escalan su contenido de 1920 con --fs. Va del borde inferior de lo
ultimo que se ve encima (su fondo, o la tinta de su ultimo texto) al
titulo de la seccion: de lo VISIBLE a lo visible, fondos o tinta,
nunca cajas. */
--aire-certs:160;
/* Donde empieza la TINTA del titulo «CERTIFICACIONES Y METODOLOGIAS» por
debajo de su caja, en unidades de lienzo. CONSTANTE: depende solo de la
fuente (Figtree 400), el cuerpo (21/1.2) y el texto, que la decide la
tilde de la I. Medido rasterizando el texto a 10x: la linea base cae a
19,851 de la caja y la tinta sube 18,2 sobre ella. Si cambia el titulo,
su cuerpo o la tipografia, hay que remedirla. La restan fitCanvas() y el
padding de .nf-certs. */
--certs-tit-tinta:1.65;
/* Lo mismo para el titular del cierre, «Descubre los puntos debiles»:
su tinta empieza 21,45 por debajo de su caja (Figtree 400, 122/1.1; la
decide la tilde de «debiles»). Medido igual, rasterizando a 10x: linea
base a 108,848 y tinta 87,4 por encima. Con ella el top del titular deja
--aire-certs de la tinta de los logos a la suya. */
--cierre-tinta:21.45;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--white)}
body{
font-family:'Figtree',Arial,sans-serif;
color:var(--black);
overflow-x:hidden;
}
/* ====== LIENZO 1920px — fiel al frame de Figma, escalado al ancho de pantalla ====== */
.viewport{ width:100%; overflow:hidden; position:relative; }
.viewport{ width:100%; overflow:hidden; position:relative; z-index:65; }
.viewport.fijado{ position:fixed; top:0; left:0; width:100%; z-index:65; }
.canvas{
position:relative;
width:1920px;
height:7370px;
background:transparent; /* el blanco lo pone el body: así el polvo (z-index menor) queda DETRÁS del contenido opaco y solo asoma por el blanco; los paneles del barrido lo tapan a nivel píxel */
transform-origin:top left;
}
/* ====== HEADER ====== */
.logo-simbolo{
position:absolute; left:59px; top:40px;
width:80px; height:45px;
}
.logo-simbolo svg{width:100%;height:100%;display:block}
.tagline{
position:absolute; left:461px; top:53px;
font-size:20px; line-height:1.0055; width:480px;
}
nav.menu{
position:absolute; left:1203px; top:57px; width:600px;
display:flex; justify-content:space-between;
font-size:20px;
}
nav.menu a{color:var(--black); text-decoration:none}
/* ====== HERO ====== */
.hero-claim{
position:absolute; left:1270px; top:362px;
width:510px; /* sector ampliado; borde derecho en el mismo sitio */
font-size:32px;
}
.hero-claim .rotador .palabra{ font-weight:700; }
.hero-claim .linea{
height:46px; overflow:hidden;
}
.hero-claim .linea-inner{
display:flex; justify-content:space-between; align-items:center;
height:100%;
}
/* Cada línea sube desde abajo hasta su sitio (la propia línea hace de máscara) */
.hero-claim .linea-inner{
transform:translateY(110%);
transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-claim .linea-inner.visible{ transform:translateY(0); }
.logo-grande{
position:absolute; left:48px; top:690px; z-index:2;
width:1040px; height:254px; /* ampliado manteniendo la proporción */
overflow:hidden; /* las letras emergen desde el borde inferior */
}
.logo-grande svg{width:100%;height:100%;display:block}
/* ====== FONDO DE LA SECCIÓN ABOUT ======
Banda #f1f1f1 que empieza donde acaba la zona de las cortinas (y=1300),
de modo que cuando las columnas terminan de cubrir, hero y ABOUT
comparten el mismo color sin costura. */
.fondo-about{
position:absolute; left:0; top:1100px;
width:1920px; height:4569px; /* de reserva: el alto real lo fija fitCanvas, del símbolo hacia arriba */
background:#f1f1f1;
}
/* ====== DEGRADADO ABOUT → LOS CUATRO SERVICIOS ======
Banda elegante, siempre presente, que funde el gris de ABOUT con el
blanco de abajo: el corte directo no existe en ningún momento. El top lo
fija fitCanvas al FIN DEL SÍMBOLO de trazo, no al de la etiqueta SERVICES
— antes compartían número y el gris se comía la sección de los cuatro
servicios entera. */
.degradado-gris{
position:absolute; left:0; top:5669px; /* arranca justo donde acaba el gris */
width:1920px; height:260px;
background:linear-gradient(to bottom, #f1f1f1 0%, rgba(241,241,241,.55) 45%, rgba(241,241,241,0) 100%);
pointer-events:none;
}
/* ====== ABOUT ====== */
.about-text{
position:absolute; left:80px; top:1347px; width:1760px; /* márgenes simétricos de 80px */
font-size:58px; line-height:1.317;
text-indent:120px;
color:#cdcdcd; /* estado inicial: gris claro, legible sobre el fondo */
}
.about-text .ltr{
transition:color .25s linear; /* cada letra se pinta con suavidad */
}
.about-text .ltr.negra{ color:#000; }
/* ====== SÍMBOLO DE TRAZO (sección ABOUT) ====== */
.simbolo-trazo{
position:absolute; left:50%; top:2490px; /* el top real lo fija el JS, pegado al texto */
transform:translateX(-50%);
width:740px; /* centrado en el gris (el JS lo ajusta si no cabe) */
}
.simbolo-trazo svg{ width:100%; height:auto; display:block; overflow:visible; }
/* ====== ENTRADA A SERVICIOS ======
Los dos párrafos que presentan la sección de auditorías. Son lo que quedó
del bloque de factor humano al mudarse a la pantalla de formación: se
quedan aquí porque son la entrada a SERVICES, no argumento de phishing.
Con el bloque se fue TODO el prefijo .pf-, que queda libre; estos tres
estilos son ya lo único que sobrevive, con nombre propio.
Los tops son de reserva: los fija fitCanvas() colgando del símbolo. */
/* ====== LOS CUATRO SERVICIOS: UNA REJILLA DE CUATRO TARJETAS ======
Ocupa el hueco que dejaron .ent-titular/.ent-texto. Los top los fija
fitCanvas(); los de aqui son valor de reserva. Vive sobre el gris
#f1f1f1 de .fondo-about.
Los CUATRO llevan la misma caja: contorno de 1.5px y esquina viva sobre
el mismo blanco del fondo -- las dos superficies son iguales y lo unico
que define la caja es la linea. La jerarquia la da el TAMANO -- auditorias
a todo el ancho y mas alta, las otras tres en fila --, no el que una tenga
caja y otras no.
Se probo al reves (auditorias sin contorno) y el efecto era el contrario
del buscado: el servicio principal pesaba menos que los tres de apoyo.
Ningun contorno aparece por opacidad: se DIBUJA con clip-path, como
todas las lineas de la pagina. Calle de 30 en los dos ejes. */
/* LA DIVISORIA QUE ABRE LA SECCION. Va alineada con la seccion (80/1760),
NO con el titular: su 75 es compensacion optica del glifo del wordmark, y
una linea no tiene aire lateral que compensar -- a 75 quedaria 5 unidades
fuera de todas las demas lineas de la pagina.
height + background y no border: el motor redondea border-width a pixel de
dispositivo y 1.5 se queda en 0.8, mas fina que el resto.
Se dibuja de izquierda a derecha con la curva de .sv2-hline, la divisoria
equivalente del overlay. El top lo fija fitCanvas.
Con CLIP-PATH y no con scaleX, aunque scaleX es lo que usan las divisorias
animadas del overlay: aquellas viven dentro de overlays y esta es hija
DIRECTA de .canvas, donde la animacion de carga aplica
'transform:translateY(14px)' a todos los hijos menos al logotipo. Ese
transform PISA el scaleX -- comprobado: la linea salia en
matrix(1,0,0,1,0,14), entera y sin dibujar, en vez de en scaleX(0).
Y EL RECORTE VA EN EL ::after, NUNCA en .cs-hr. Esto no es cosmetica: un
clip-path sobre el PROPIO elemento observado anula su rectangulo de
interseccion -- el navegador recorta antes de medir --, asi que el
IntersectionObserver lo ve con ratio 0, nunca cruza su threshold de 0.2,
nunca le pone .visible y nunca se quita el recorte. Circulo cerrado: la
linea no se dibujaba porque estaba recortada y seguia recortada porque no
se dibujaba. Con el recorte en el pseudo, el observador mide el padre
entero (ratio 1) -- que es justo la estructura que ya tienen las tarjetas,
con su contorno en .cs-campo::after.
El contenedor NO declara transition: asi conserva las de la carga que le
da la regla generica de .canvas > *. */
.cs-hr{
position:absolute; left:80px; top:4700px; /* top de reserva */
width:1760px; height:var(--linew, 1.5px);
}
.cs-hr::after{
content:""; position:absolute; inset:0; background:#1d1d1c;
clip-path:inset(0 100% 0 0);
transition:clip-path .85s cubic-bezier(.65,0,.35,1);
}
.cs-hr.visible::after{ clip-path:inset(0 0 0 0); }
/* El font-size NO es decorativo: dimTitulos() mide la palabra con esta
tipografia viva y le da al wordmark el ancho resultante, asi que cambiarlo
cambia el tamano del ![]()
-- y con el su ALTO, que es 0.739 por cada px
de cuerpo. De ese alto cuelga el bloque principal en fitCanvas, que no
puede medirlo (dimTitulos corre en un rAF posterior) y lo deriva del
cuerpo. Si se toca este numero hay que tocar CS_TITULO_FONT en app.js, y
nada lo avisa. */
.cs-titulo{
position:absolute; left:75px; top:4765px;
margin:0; font-size:300px; line-height:1; font-weight:300;
color:#1d1d1c; letter-spacing:-.02em;
}
/* AUDITORIAS: LA MISMA TARJETA que las tres de abajo, a todo el ancho y mas
alta. La jerarquia la da el TAMANO, no la ausencia de caja: mientras fue
el unico servicio sin contorno pesaba MENOS que los otros tres, que es lo
contrario de lo que toca. El alto lo pide el contenido; lo mide fitCanvas. */
.cs-principal{
position:absolute; left:80px; top:5010px; width:1760px;
box-sizing:border-box; padding:72px; background:#ffffff;
/* 780 y no 940: el nombre solo usa 615 de ancho -- parte en dos lineas de
537 y 615 --, asi que los 940 dejaban 325 muertas y estrangulaban la
columna de la descripcion a 616. Con 780 la descripcion alcanza por fin
su max-width de 760, que llevaba sin cumplirse desde que se escribio, y
el texto baja de 7 lineas a 5. Por debajo de 780 no se gana nada: topa
con ese max-width. El nombre aguanta en dos lineas hasta 620. */
display:grid; grid-template-columns:780px 1fr; column-gap:60px;
/* SUELO DE ALTURA, y no es decoracion: toda la jerarquia de la seccion es
que esta caja sea mas alta que las tres de abajo. Ha valido 580 y 551, y
las dos veces por la misma cuenta. Subio a 580 cuando un copy nuevo
llevo la fila de 402 a 431 y la diferencia se quedo en 120; con 580
volvia a 149. Al acortarse otra vez las tres descripciones la fila
regreso a 402 y esos 580 pasaron a sobrecorregir -- la diferencia se iba
a 178 --, asi que baja a 551. Medido: 149,6 contra los 401,5 de la fila,
que es el mismo numero de siempre.
551 es JUSTO LO QUE PIDE EL CONTENIDO, asi que el suelo ya no estira
nada y cada hueco de la caja vale lo que esta escrito. Con 580 sobraban
29 que el space-between repartia entre los dos huecos de abajo, 14,4 y
14,5: el de la descripcion al remate se iba de 72 a 86,4 -- 72 es el
margin-top del propio .cs-tipos -- y el del remate a "Mas informacion"
de 28 a 42,5. La franja del fondo no la tocaba: son los 72 del padding.
Sigue haciendo su trabajo original, que es de lo que viene el min-height
y por eso no se quita: si con otra tipografia el nombre cupiera en una linea,
la caja no se desplomaria. */
min-height:551px; align-content:space-between;
}
/* mismo contorno y misma tecnica que .cs-campo::after, ver alli el porque
del box-shadow. Va en absolute, asi que no entra en la rejilla.
EN ::after, no en ::before: el ::before lo ocupa la capa de resalte, y
ademas el ::after se pinta el ultimo, asi que la linea queda POR ENCIMA
del resalte, que es lo que toca. */
.cs-principal::after{
content:""; position:absolute; inset:0;
box-shadow:inset 0 0 0 var(--linew, 1.5px) #1d1d1c;
clip-path:inset(0 0 100% 0);
transition:clip-path .85s cubic-bezier(.65,0,.35,1);
pointer-events:none;
}
.cs-principal.visible::after{ clip-path:inset(0 0 0 0); }
.cs-nombre{
grid-column:1; margin:0;
font-size:96px; line-height:1.06; font-weight:500; letter-spacing:-.02em; color:#1d1d1c;
}
.cs-desc{
grid-column:2; margin:18px 0 0; max-width:760px;
font-size:26px; line-height:1.6; font-weight:400; color:#1d1d1c; text-wrap:pretty;
}
/* el remate: los tres tipos que desarrolla SERVICES justo debajo. Va
DENTRO de la caja y con la misma pieza que la lista de las tres pequenas
-- filete a todo el ancho interior y debajo el indice --, que es lo que
lo saca de ser una linea huerfana entre dos bloques. */
.cs-tipos{
grid-column:1 / -1; position:relative; margin:72px 0 0; padding:32px 0 0;
font-size:18px; line-height:1.0055; font-weight:400;
letter-spacing:.05em; text-transform:uppercase; color:#1d1d1c;
}
.cs-tipos::before{
content:""; position:absolute; left:0; right:0; top:0;
height:var(--linew, 1.5px); background:#1d1d1c;
}
/* LOS TRES: TARJETAS de verdad. El contorno no es invento: es el mismo
rectangulo de 1.5px y esquina viva que .fg-cta y .no-vcta, a escala. El
fondo es el MISMO blanco que el de la seccion: cero contraste de
superficie, a proposito. Se probaron los dos sentidos (tarjeta blanca
sobre gris y gris sobre blanco) y los dos dan el mismo 1.129:1; aqui se
renuncia a esa diferencia y la caja la sostiene solo el contorno. Cero
sombra y cero radio: no existen en la pagina.
SIN alto fijo: lo pide el contenido, y el flex las iguala a la mas alta.
Los 400px que tuvieron dejaban una franja vacia bajo el ultimo punto --
el mismo hueco muerto que ya costo descartar la version anterior. */
.cs-campos{
position:absolute; left:80px; top:5310px; width:1760px;
display:flex; gap:30px;
}
.cs-campo{
position:relative; flex:1; box-sizing:border-box;
padding:40px; background:#ffffff;
}
/* el contorno va en un ::after y se DIBUJA de arriba abajo, con la tecnica
de .no-col-title::before. La caja no se mueve: solo se revela su borde.
En ::after porque el ::before lo ocupa la capa de resalte del hover, y
porque asi la linea se pinta por encima de ella. */
.cs-campo::after{
content:""; position:absolute; inset:0;
/* box-shadow y NO border: el motor redondea border-width a pixel de
dispositivo (1.3333px se queda en 0.8) y la caja saldria mas fina que
las demas lineas de la seccion. El spread del box-shadow conserva el
decimal. Comprobado en el navegador. */
box-shadow:inset 0 0 0 var(--linew, 1.5px) #1d1d1c;
clip-path:inset(0 0 100% 0);
transition:clip-path .85s cubic-bezier(.65,0,.35,1);
pointer-events:none;
}
.cs-campo.visible::after{ clip-path:inset(0 0 0 0); }
.cs-campo:nth-child(2).visible::after{ transition-delay:.12s; }
.cs-campo:nth-child(3).visible::after{ transition-delay:.24s; }
/* SIN position: es el ancestro del enlace, y si se posiciona, el area
pulsable se encoge hasta el tamano del propio titulo. */
.cs-c-nombre{
margin:0;
font-size:32px; line-height:1.15; font-weight:500; letter-spacing:-.02em; color:#1d1d1c;
}
.cs-c-desc{
position:relative; margin:22px 0 0;
font-size:20px; line-height:1.45; font-weight:400; color:#1d1d1c; text-wrap:pretty;
}
/* los tres puntos: el indice del servicio, separado por una hairline.
Misma relacion que .svc-lista2 con su .sv2-pregunta en el overlay. */
.cs-c-lista{
position:relative; list-style:none; margin:34px 0 0; padding:24px 0 0;
}
.cs-c-lista::before{
content:""; position:absolute; left:0; right:0; top:0;
height:var(--linew, 1.5px); background:#1d1d1c;
}
.cs-c-lista li{
font-size:18px; line-height:1.5; font-weight:400; color:#1d1d1c;
}
/* "MAS INFORMACION". El subrayado NO es el nativo: los tres text-decoration
de la hoja (.legal-doc a, .co-basic a, .co-consent a) viven en texto
corrido de los legales y del formulario, y su grosor lo elige el
navegador, que a escala 0.75 no coincide con ninguna otra linea. Aqui es
una linea propia del mismo grosor que las divisorias y los contornos,
sobre un para que mida lo que el texto y no la columna entera.
Y NO con border-bottom, aunque era lo obvio: el motor redondea
border-width a pixel de dispositivo y 1.5px se quedaba en 0.8, mas fino
que cualquier otra linea de la seccion -- el mismo motivo por el que el
contorno de las tarjetas va en box-shadow. Se dibuja con height +
background, que conserva el decimal, igual que .cs-c-lista::before.
Va FUERA del a proposito: el area estirada ya hace pulsable toda la
tarjeta, y asi el texto del enlace sigue siendo el nombre del servicio en
vez de un "Mas informacion" que no dice nada fuera de contexto. */
.cs-mas{
margin:28px 0 0; font-size:18px; line-height:1.5; font-weight:400; color:#1d1d1c;
transition:color .22s ease; /* el mismo del nombre, para que entren juntos */
}
.cs-mas-in{
position:relative; display:inline-block; padding-bottom:4px;
}
.cs-mas-in::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:var(--linew, 1.5px); background:currentColor;
}
/* la grande lo lleva en linea propia bajo los tipos, no a la derecha de
ellos: cabia al lado (1099 unidades libres), pero eso la habria dejado en
470 mientras las tres subian a ~400, estrechando de 127 a 70 la
diferencia de alto que sostiene toda la jerarquia de la seccion. */
.cs-principal .cs-mas{ grid-column:1 / -1; }
/* al pasar el cursor acompana al nombre: el subrayado va en currentColor,
asi que la linea sigue al texto sola */
.cs-campo:hover .cs-mas,
.cs-principal:hover .cs-mas{ color:var(--hl-tinta); }
/* la flecha de los bloques del overlay, misma pieza */
.cs-flecha{ display:inline-block; width:.92em; height:.92em; margin-right:.26em; vertical-align:-.1em; color:#1d1d1c; }
.cs-flecha svg{
width:100%; height:100%; display:block; transform:rotate(45deg);
transition:transform .22s ease;
}
/* LAS CUATRO TARJETAS SON PULSABLES.
El enlace lleva el nombre del servicio como texto real -- son cuatro
enlaces internos de verdad desde la home, no un vacio con aria-label
-- y se estira con un ::after propio para que toda la caja responda.
El resalte es el mecanismo YA ESCRITO para compartirse (ver .cf-item, que
lo documenta): capa que sube desde abajo, parametrizada por dos variables.
La capa es #f4f4f4: 11 niveles por debajo del blanco de la tarjeta, que
es el fondo sobre el que aparece. Se aclaro desde #f1f1f1 (14 niveles).
NO bajar mucho mas de aqui: a 9 niveles el resalte empieza a perderse con
el brillo bajo o con luz fuerte, y de 7 para abajo el hover se queda
marcado solo por el rojo del "Mas informacion". El ROJO no lo
toca el nombre: se reserva para "Mas informacion", que es la llamada a la
accion. El nombre y su flecha se quedan en tinta -- la flecha va pegada al
nombre y con su cuerpo, asi que encenderla sola lo habria partido en dos. */
/* --hl-tinta es el conducto que el mecanismo compartido ya usa para el
color del texto bajo el resalte (ver .cf-item:hover .cf-q). Aqui lleva el
el rojo de la casa, que va en --red-core -- el mismo de .co-email en
hover, de los enlaces de los legales y de los avisos del formulario. El
#6e0000 que tambien aparece en la hoja no cuenta: es una parada intermedia
del degradado de .glow-box, no un color de interfaz.
Sobre el gris del resalte, que es el caso real, da 7,96:1; sobre el blanco
del reposo, 8,99:1. Los dos por encima de AAA. */
/* --hl-tinta se declara POR ANFITRION, asi que este rojo es solo de las
tarjetas: .cf-item (el acordeon de FAQ) y .tb-serv-menu a (el desplegable)
conservan el suyo y sus propias reglas. Aqui la unica que lo consume es la
de .cs-mas, mas abajo. */
.cs-campo, .cs-principal{ --hl-capa:#f4f4f4; --hl-tinta:var(--red-core); }
.cs-enlace{ display:block; color:inherit; text-decoration:none; }
/* SIN capa estirada sobre la tarjeta. La hubo -- un .cs-enlace::after con
inset:0 -- y hacia la caja entera pulsable, pero al estar por ENCIMA del
texto interceptaba el raton y no se podia seleccionar ni copiar nada:
comprobado arrastrando de verdad sobre una descripcion, la seleccion
salia vacia. Ahora la caja entera es pulsable por el manejador delegado,
que acepta el clic venga de donde venga dentro de ella (ver app.js), y el
cursor lo dice el cursor:pointer de aqui. */
.cs-campo, .cs-principal{ cursor:pointer; }
.cs-enlace:hover .cs-flecha svg{ transform:rotate(45deg) translateX(4px); }
/* La capa de resalte se HUNDE en vez de subir el contenido: con z-index:-1
dentro del contexto de apilado de la tarjeta queda por delante de su
fondo y por detras del texto, que asi puede seguir sin posicionar. El
contexto lo crea el z-index:0 de la tarjeta. */
.cs-campo, .cs-principal{ z-index:0; }
.cs-campo::before, .cs-principal::before{ z-index:-1; }
/* mascaras de revelado: las mismas que los bloques del overlay */
.cs-principal .rv, .cs-campo .rv{ display:block; overflow:hidden; padding:.12em 0 .16em; margin:-.12em 0 -.16em; }
.cs-principal .rv-in, .cs-campo .rv-in{ display:block; transform:translateY(130%); }
.cs-principal.visible .rv-in, .cs-campo.visible .rv-in{
transform:none; transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.cs-principal.visible .cs-desc .rv-in{ transition-delay:.1s; }
.cs-principal.visible .cs-tipos .rv-in{ transition-delay:.2s; }
.cs-campo.visible .cs-c-desc .rv-in{ transition-delay:.1s; }
/* LOS NOMBRES NO SUBEN: BARREN DE IZQUIERDA A DERECHA, con la ley que
justifica la regla de abajo (1.1s / .22,1,.36,1) y sin retardo. Los
RETARDOS del escalonado no se tocan -- contorno + nombre a la vez,
descripcion a +.1s y .cs-tipos a +.2s --, pero el nombre dura ahora 1.1s
contra el 1s de la descripcion: no se cruzan porque con esa salida el
nombre se posa hacia los ~580 ms y lo que queda es cola.
Las descripciones se quedan SUBIENDO, con su 1s y su .16,1,.3,1: ya
entraban de abajo a arriba y con mascara, que era lo que se buscaba.
EL RECORTE VA EN .rv-in, DOS NIVELES POR DEBAJO DE LO OBSERVADO. Lo
observado es .cs-principal / .cs-campo, y un clip-path sobre el elemento
observado anula su rectangulo de interseccion -- le paso a .cs-hr y esta
documentado arriba. El .rv-in ya existia para la subida, asi que aqui el
markup no se toca.
Hay que NEUTRALIZAR el translateY(130%) de la regla de arriba, o se
sumarian los dos gestos y el nombre barreria mientras sube.
Los insets verticales son NEGATIVOS y valen lo que el relleno de .rv
(.12em arriba, .16em abajo) a proposito. El clip-path recorta contra la
caja de .rv-in, y con line-height 1.06 sobre 96px esa caja es MAS CORTA
que los glifos: un inset(0) a secas guillotinaria ascendentes y
descendentes. Asi la region de recorte coincide exactamente con la caja
de relleno de .rv, que es donde su overflow:hidden ya corta -- ni recorta
de mas ni deja escapar nada.
Dos efectos que conviene saber: .rv-in es display:block, asi que el
barrido cruza el BLOQUE entero y un nombre de dos lineas se descubre a la
vez en las dos; y en las tarjetas pequenas la flecha va DENTRO del
.rv-in, de modo que entra en el barrido y, por estar a la izquierda,
asoma la primera. */
/* width:fit-content -- EL BARRIDO TIENE QUE CRUZAR TINTA, NO HUECO. .rv-in es
display:block, asi que sin esto el recorte cruza el ancho entero del
bloque y no el del texto, y el reparto es malisimo: medido a 1440, la
tinta de "Vigilancia 24/7" ocupa el 49% de sus 365 px, asi que la mitad
del barrido pasaba por encima de nada. Encogiendo la caja al texto, el
nombre tarda toda la duracion en revelarse, mida lo que mida.
NO cambia el salto de linea: donde el texto ya llenaba el ancho,
fit-content devuelve el mismo ancho, y los de dos lineas siguen en dos.
Y NO encoge el area pulsable: el conserva sus 365x34, porque el que
se encoge es un hijo suyo. Las dos cosas, comprobadas en el navegador.
Solo va en los BARRIDOS. Las descripciones suben y para una subida el
ancho de la caja da igual, asi que no se tocan. */
.cs-nombre .rv-in, .cs-c-nombre .rv-in{
transform:none;
width:fit-content;
clip-path:inset(-.12em 100% -.16em 0);
}
/* LA CURVA NO ES LA DE LA SUBIDA NI LA DEL FILETE, y es a proposito.
Barrer texto no es barrer un filete: en el filete el borde cruza una
banda sin detalle y su curva no se delata, pero sobre texto cada letra
aparece al pasar el borde, asi que lo que se ve es el RITMO al que
llegan las letras -- o sea la velocidad del borde, no su posicion.
Con cubic-bezier(.65,0,.35,1), que es simetrica, el pico de velocidad
cae a 2,86x la media EN EL CENTRO EXACTO del recorrido, que es donde
estan casi todas las letras: las letras llegan a rachas y eso es lo que
se leia como seco.
Con .22,1,.36,1 el pico sube a 4,55x pero se muda al ARRANQUE, donde
todavia no hay nada que mirar, y a partir de ahi el borde solo frena. El
texto se posa en vez de barrerse.
Y no vale con alargar conservando la curva: eso divide la velocidad en
proporcion pero deja el pico donde esta. De 850 a 1400 ms el pico sobre
.cob-desc solo baja de 2118 a 1286 px/s y sigue cayendo en mitad de la
frase. Es el mismo escalon, mas tarde -- la misma leccion que dejo SV_K
en el overlay, donde bajarlo buscando suavidad dio pastosidad.
1100 y no 1000 porque con una salida tan cargada el final deja de verse
mucho antes de acabar: el borde cubre el 97% de .cob-desc a los 584 ms
de los 1100, asi que la duracion nominal no es la percibida. */
.cs-principal.visible .cs-nombre .rv-in,
.cs-campo.visible .cs-c-nombre .rv-in{
clip-path:inset(-.12em 0 -.16em 0);
transition:clip-path 1.1s cubic-bezier(.22,1,.36,1);
}
/* LA TARJETA GRANDE LLEVA OTRA CURVA, y la duracion es la misma. Es el unico
de los cuatro nombres donde el fit-content no sirvio de nada: envuelve a
DOS lineas, asi que fit-content devuelve el ancho disponible (780) y no la
tinta, que solo llega a 615. El 21% del barrido cruza hueco y eso aqui no
se puede arreglar sin clavar un ancho a mano.
Con .22,1,.36,1, que va muy cargada al arranque, ese 79% de tinta se
cubria a los 292 ms de los 1100: lo que se ve duraba menos de un tercio
del tiempo declarado y el resto era cola invisible. Subir la duracion no
lo arregla, lo alarga -- a 1.5s serian 399 ms de tinta y un segundo de
cola. Con .33,1,.68,1, que reparte mas, la tinta pasa a 447 ms SIN cola
muerta, y de paso el pico del borde baja de 3223 a 2149 unid/s.
Y no descasa de las tres pequenas: al compartir duracion el borde de la
grande ya iba 3,13x mas rapido que la media de ellas, porque cruza 780
contra 178-314. Esto lo deja en 2,09x, o sea MAS parejo que antes, no
menos. Igualarlo del todo pediria 3,44s, que es absurdo.
Las tres pequenas no se tocan: son una fila de tres objetos identicos,
casan entre si y su tinta es el 100% de su caja gracias al fit-content,
asi que usan sus 1100 ms enteros.
Va de longhand sobre el atajo de arriba a proposito: asi lo unico que
cambia entre la grande y las pequenas queda en una linea y a la vista. */
.cs-principal.visible .cs-nombre .rv-in{
transition-timing-function:cubic-bezier(.33,1,.68,1);
}
/* ====== COBERTURA -- banda gris a sangre, seis filas ======
A SANGRE como el footer: left:0 y 1920 de ancho, que es la unica forma de
sangrar en el lienzo (no hay margenes negativos que valgan, las
coordenadas son absolutas). El contenido se queda en la columna de
siempre, 80 -> 1840, con el padding lateral de 80: los mismos margenes
simetricos de .about-text, .cs-hr, .cs-principal y .cs-campos.
Los 15px que el lienzo se pasa por debajo de la barra de scroll aqui
juegan a favor: una banda a sangre quiere sobrar, no quedarse corta.
EL ALTO NO SE DECLARA. Es texto y refluye, asi que lo mide fitCanvas y de
el cuelgan el cierre y el footer, igual que ya cuelgan de .cs-campos. */
.cob{
position:absolute; left:0; top:3806px; width:1920px; /* top de reserva; lo fija fitCanvas */
box-sizing:border-box; padding:120px 80px 100px;
background:#3b3b3b;
font-family:'Figtree',Arial,sans-serif;
color:#ffffff;
}
/* SIN EYEBROW: la cabecera es solo el titular, asi que arranca en el
padding-top de la banda y no lleva margen propio. Hubo una etiqueta de 14
encima, y con ella se fue el margen de 43 que la separaba del titular.
Texto vivo y no un img.tsvg: los cinco wordmarks son assets y esta seccion
no trae ninguno. El cuerpo es el de .cs-nombre (96) y el peso el del
display de la pagina (.cierre-headline 122/300, .cs-titulo 300/300). */
.cob-titulo{
margin:0;
/* 400 y no 300: a 96px la Light de Figtree se afina mas de la cuenta. Sube
con .cierre-headline, que tiene el mismo problema y mas acusado por su
cuerpo de 122. Son los DOS titulares de display de texto vivo de la home,
asi que se mueven juntos o la pagina queda con dos voces.
NO arrastran a nadie: cada regla declara su propio peso, las 44 de la
hoja son independientes. El overlay (.sv2-word, .fg-title) y los legales
se quedan en 300 a proposito, que son otra pantalla.
Y .cs-titulo NO puede acompanar: es un wordmark (img.tsvg) y su grosor
esta en el dibujo, no en el CSS. */
font-size:96px; line-height:1; font-weight:400; letter-spacing:-.02em; color:#ffffff;
}
/* DOS COLUMNAS DE TRES, y se llena POR COLUMNAS: grid-auto-flow:column con
tres filas explicitas mete 1-2-3 en la izquierda y 4-6 en la derecha, que
es como se pidio y ademas deja el orden del DOM igual que el de lectura
(se baja por la izquierda y se sigue por la derecha), asi que el lector de
pantalla y la cascada del revelado van por donde va el ojo.
840 + 80 + 840 = 1760. La calle de 80 es el margen de la pagina: media
banda pide un hueco de margen, no la calle de 60 de dentro de una fila. */
.cob-filas{
margin-top:80px;
display:grid; grid-template-columns:840px 840px;
grid-template-rows:repeat(3, auto); grid-auto-flow:column;
column-gap:80px;
}
/* EL NOMBRE SE APILA SOBRE LA DESCRIPCION; ya no son dos columnas.
Al partir la banda en dos, la celda pasa de 1760 a 840 y el reparto de
antes (nombre 340 + calle 60 + descripcion 780 = 1180) no cabe. Encogerlo
a 840 dejaria la descripcion en 440-540, o sea 38-47 caracteres por linea:
mas estrecha que cualquier otra columna de texto de la pagina, y las seis
descripciones se irian a 4 lineas. Apilado, la descripcion se queda con
los 840 enteros -- unos 73 caracteres, casi la medida que ya tenia con
780 (68) -- y el nombre no puede partirse nunca, porque le sobra el ancho.
Asi NO hay que tocar la escala tipografica: los 32 del nombre y los 20 de
la descripcion siguen siendo los de .cs-c-nombre y .cs-c-desc.
Los 22 de separacion son los de .cs-c-desc, que cuelga del mismo cuerpo de
32. El filete sigue en el ::before y ahora mide 840, el ancho de la celda:
esa es la medida de .cs-tipos::before y .cs-c-lista::before, que tampoco
van a sangre sino al ancho de lo que rematan. */
.cob-fila{
position:relative;
padding:32px 0 40px;
}
/* EL FILETE VA EN EL ::before, NUNCA en .cob-fila. La fila es lo que mira el
IntersectionObserver y un clip-path sobre el elemento observado anula su
rectangulo de interseccion: ratio 0, nunca cruza el umbral, nunca se le
pone .visible y nunca se quita el recorte. Le paso a .cs-hr y esta
documentado. Fondo y no border, como .cs-tipos::before y .cs-hr::after:
el motor redondea border-width a pixel de dispositivo. */
.cob-fila::before{
content:""; position:absolute; left:0; right:0; top:0;
/* --linew-nitido y no --linew: es la UNICA regla de la pagina que usa la
ley cuadrada, y se gana la excepcion porque aqui hay seis filetes
identicos en una pantalla, tres encima de otros y dos en paralelo, asi
que el ojo los compara. Con --linew el pico iba de 178 a 254 segun la
fila; con este los tres tienen nucleo 255. En el resto de la pagina las
lineas estan lejos unas de otras y no compensa el 60% de engorde. */
height:var(--linew-nitido, 1.5px); background:#ffffff;
clip-path:inset(0 100% 0 0);
transition:clip-path .85s cubic-bezier(.65,0,.35,1);
}
.cob-fila.visible::before{ clip-path:inset(0 0 0 0); }
.cob-nombre{
margin:0;
font-size:32px; line-height:1.15; font-weight:500; letter-spacing:-.02em; color:#ffffff;
}
/* EL ICONO, AL BORDE DERECHO DE LA CELDA y no pegado al nombre: los seis
nombres miden de 44 a 211, asi que pegados quedarian a seis distancias
distintas y la columna se leeria desordenada. Al borde, los iconos forman
una vertical que el ojo recorre.
Va DENTRO del .rv-in, asi que sube con el nombre como una sola pieza. Es
lo que ya hace .cs-c-nombre con su flecha.
El .cob de mas en el selector NO sobra: .cob .rv-in{display:block} viene
despues en la hoja y con la misma especificidad ganaria por orden.
align-items:baseline y no center: la linea base de un