/* ============================================================================
SERASCOR — web2.
Construida contra lo que hacen los cinco estudios que analizamos:
· ellos usan 1 a 5 tipografias sin criterio -> aqui 2 familias con roles fijos
· ellos ponen el H1 a 14-16 px -> aqui el H1 manda
· los cinco son azul corporativo sobre blanco-> aqui crudo calido + tinta
· ninguno tiene una herramienta util -> aqui el configurador
========================================================================== */
/* ---------------------------------------------------------- la paleta ---
El fondo se leia frio. La causa no era falta de colores sino que el 92%
de la superficie era neutro azulado: blanco puro en las tarjetas y gris
frio en el texto. Se corrige por dos lados a la vez.
1. Los neutros se calientan hacia la arena (--bg-2 pasa de #F3F1EC, que
era gris verdoso, a #F6F1E7, que es papel de verdad).
2. Entra UN acento calido, la terracota, y sale el ambar. Dos calidos
distintos se ensucian entre si: el ambar #96610F era oro oliva y la
terracota es rojo tierra, juntos parecen un error de impresion.
La terracota queda para lo que distingue a esta web -- la fecha real
en que cae cada obligacion ESTE mes.
Resultado: familia fria (navy + celeste) para la estructura y la marca,
familia calida (terracota + arena) para lo humano y las fechas, verde
solo para estados. Tres familias, ni una mas. */
:root{
--bg: #FCFAF6; /* crudo calido: ninguno de los cinco sale del blanco puro */
--bg-2: #F6F1E7; /* arena: la banda alterna deja de ser gris */
--bg-3: #FBF6EE; /* arena muy clara, para lavados y degradados */
--paper: #FFFFFF;
--ink: #101B2A;
--ink-2: #3E4B5C;
--ink-3: #5C6875; /* #6A7686 daba 4.09 sobre la banda alterna */
--brand: #12457F; /* el navy de la marca, apto para texto */
--brand-2: #1668C4;
--sky: #1E8BD8; /* el celeste del logotipo */
--clay: #A4552B; /* terracota: 5.37 sobre blanco, 4.77 sobre la arena */
--clay-2: #C4703F; /* solo para filetes y fondos, nunca para texto */
--green: #1F7A4C; /* incluido */
--line: #E8E1D3;
--line-2: #D6CDBB;
--sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
--serif: "Instrument Serif", Georgia, serif;
--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
--wrap: 1180px;
--gut: clamp(18px, 4vw, 40px);
--r: 10px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
margin:0; background:var(--bg); color:var(--ink-2);
font-family:var(--sans); font-size:17px; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-2); }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px; border-radius:4px; }
.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;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;font-weight:600;}
.skip:focus{ left:0; top:0; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
/* --------------------------------------------------------- tipografia --
Dos familias, tres roles. Sin excepciones. */
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:600; letter-spacing:-.028em; line-height:1.1; }
h1{ font-size:clamp(2.5rem,1.5rem + 3.6vw,4.2rem); line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
h2{ font-size:clamp(1.75rem,1.25rem + 1.8vw,2.6rem); text-wrap:balance; }
h3{ font-size:1.16rem; letter-spacing:-.02em; }
h4{ font-size:.72rem; }
p{ margin:0; }
em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
/* ------------------------------------------------------ justificacion ---
Los parrafos van justificados a ambos lados. Va SIEMPRE acompanado de
hyphens:auto (el documento declara lang="es", asi que el navegador parte
por silabas del castellano): sin guionado, justificar en columna estrecha
abre rios blancos y queda peor que el margen irregular.
Se justifica lo que es un parrafo. NO se justifican rotulos, items de
lista cortos, pies de opcion ni nada que ocupe una o dos lineas: ahi la
justificacion solo consigue separar dos palabras de lado a lado. */
/* .foot-p queda fuera a proposito: es la direccion postal, con saltos de
linea forzados. Justificar un bloque de lo clona en un
shadow tree y «.mk .ch» no llega hasta dentro; las variables sí. */
.mk{ --mk-a:var(--sky); --mk-b:var(--brand); }
.menu{ display:flex; gap:4px; margin-left:auto; }
.menu a{ padding:8px 13px; border-radius:8px; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:background .16s,color .16s; }
.menu a:hover{ background:var(--bg-2); color:var(--ink); }
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); background:transparent; border-radius:8px; cursor:pointer; place-items:center; gap:5px; }
.burger i{ display:block; width:16px; height:1.6px; background:var(--ink); transition:transform .25s,opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }
@media (max-width:1040px){
.head .btn-p{ display:none; } .burger{ display:grid; }
.menu{ position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0; background:var(--paper);
border-bottom:1px solid var(--line); padding:0 var(--gut); max-height:0; overflow:hidden; transition:max-height .3s; }
.menu.open{ max-height:340px; }
.menu a{ padding:15px 0; border-bottom:1px solid var(--line); border-radius:0; }
}
/* ------------------------------------------------------------ portada ---
La imagen se veia pequena porque compartia el ancho a partes iguales con
un texto mas largo. Ahora la columna visual pesa mas, la foto es vertical
(4/5 en vez de 16/10, gana un 60% de altura) y se apoya en un halo en
degradado que la despega del fondo. */
.hero{ padding-block:clamp(44px,6vw,88px) clamp(40px,5vw,72px); position:relative; overflow:hidden; }
/* lavado calido de fondo: dos manchas muy tenues, una arena y una celeste */
.hero::before{
content:""; position:absolute; inset:-20% -10% auto -10%; height:150%; z-index:-1; pointer-events:none;
background:
radial-gradient(46% 40% at 78% 22%, rgba(196,112,63,.13), transparent 68%),
radial-gradient(52% 46% at 8% 78%, rgba(30,139,216,.10), transparent 70%),
radial-gradient(70% 60% at 50% 0%, rgba(251,246,238,.9), transparent 75%);
}
.hero-in{ display:grid; grid-template-columns:.98fr 1.02fr; gap:clamp(28px,4vw,58px); align-items:center; }
@media (max-width:980px){ .hero-in{ grid-template-columns:1fr; } }
.hero-vis{ position:relative; }
/* el halo: respira despacio, se detiene con prefers-reduced-motion */
.hero-vis .halo{
position:absolute; inset:-9% -7% -13% -7%; z-index:0; border-radius:36% 64% 58% 42%/48% 42% 58% 52%;
background:linear-gradient(145deg, rgba(196,112,63,.30), rgba(30,139,216,.24) 55%, rgba(18,69,127,.20));
filter:blur(38px); opacity:.85; animation:respira 14s ease-in-out infinite;
}
@keyframes respira{
0%,100%{ transform:scale(1) rotate(0deg); opacity:.80; }
50% { transform:scale(1.07) rotate(4deg); opacity:.95; }
}
.hero-fig{
position:relative; z-index:1; margin:0; border-radius:14px; overflow:hidden;
border:1px solid rgba(255,255,255,.7);
box-shadow:0 34px 60px -34px rgba(16,27,42,.55), 0 3px 10px -4px rgba(16,27,42,.18);
}
.hero-fig img{
display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 42%;
transform:scale(1.03); transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hero-fig:hover img{ transform:scale(1); }
/* pie sobre la foto: velo oscuro solo donde va el texto, para no lavar la imagen */
/* El velo tiene que ser opaco DONDE CAE EL TEXTO, no en general: si se aclara
a media altura, el rotulo queda sobre el cielo del atardecer y se pierde.
Con .88 hasta el 66% el contraste es 9:1 aun con la foto en blanco puro. */
.hero-fig figcaption{
position:absolute; inset:auto 0 0 0; padding:38px 20px 17px; color:#EAF0F7;
background:linear-gradient(to top,
rgba(9,17,28,.93) 0%, rgba(9,17,28,.88) 64%, rgba(9,17,28,.42) 85%, transparent 100%);
}
.hero-fig figcaption b{ display:block; font-size:14.6px; font-weight:600; color:#fff;
letter-spacing:-.015em; line-height:1.4; }
/* la ficha flotante: se sale del marco a proposito, para romper el rectangulo */
.hero-chip{
position:absolute; z-index:2; left:-16px; bottom:56px; padding:13px 17px;
background:var(--paper); border:1px solid var(--line); border-radius:12px;
box-shadow:0 18px 34px -20px rgba(16,27,42,.55);
border-left:3px solid var(--clay);
animation:flota 7s ease-in-out infinite;
}
@keyframes flota{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.hero-chip .k{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.hero-chip .v{ display:block; font-size:19px; font-weight:600; color:var(--clay); letter-spacing:-.02em; margin-top:3px; }
@media (max-width:980px){
.hero-vis{ max-width:520px; margin-inline:auto; }
.hero-fig img{ aspect-ratio:16/11; object-position:50% 50%; }
.hero-chip{ left:auto; right:12px; bottom:-14px; }
}
.tag{
display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:6px 13px;
background:var(--paper); border:1px solid var(--line); border-radius:100px;
font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.hero h1 em{ color:var(--brand); }
.sub{ font-size:1.14rem; max-width:54ch; margin-top:22px; color:var(--ink-2); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.micro{ display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:22px 0 0; padding:0; font-size:14px; color:var(--ink-3); }
.micro li{ display:flex; align-items:center; gap:8px; }
.micro li::before{ content:""; width:11px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }
/* ====================== EL HALO, COMO RECURSO REUTILIZABLE =============
El resplandor de color que hay detras de la foto de portada es lo que le
da profundidad sin recargar. Aqui se generaliza en dos formas, y se usa
con cuentagotas: si aparece en todas las secciones deja de ser sutil y
se convierte en un fondo sucio.
1. El lavado: dos manchas radiales muy tenues sobre la banda entera.
2. La flotacion: sombra de color bajo una pieza, para despegarla del papel.
Se escribieron como clases reutilizables (.lavado y .flota) pero acabaron
aplicandose por identificador, asi que la clase sobraba y se retiro.
Las opacidades son bajas a proposito (0,05-0,13). Si se ven a simple
vista, estan mal. */
#configurador, #voces, #contacto{ position:relative; overflow:hidden; }
#configurador::before, #voces::before, #contacto::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(42% 46% at var(--hx,86%) var(--hy,12%), rgba(196,112,63,.11), transparent 68%),
radial-gradient(46% 50% at var(--hx2,6%) var(--hy2,92%), rgba(30,139,216,.09), transparent 70%);
}
/* Sombra de COLOR, no gris: la misma pareja navy + terracota de la portada.
Con el desenfoque muy abierto y desplazamiento corto, para que se lea como
luz y no como un borde oscuro. */
.cfg, .det, .form, .tabla-wrap, .faq{
box-shadow:
0 34px 70px -54px rgba(18,69,127,.55),
0 10px 34px -28px rgba(164,85,43,.20);
}
/* ------------------------------------------------------------- bandas --- */
.band{ padding-block:clamp(52px,7vw,96px); border-top:1px solid var(--line); position:relative; }
.band.alt{ background:linear-gradient(180deg, var(--bg-3), var(--bg-2) 42%, var(--bg-2)); }
/* ------------------------------------------------------------------------
GRANO DE PAPEL
Una pantalla se siente fria porque es perfecta; el papel impreso no lo es.
Un grano finisimo sobre los fondos color arena les da cuerpo sin que nadie
sepa decir que cambio.
Lo dibuja el navegador (feTurbulence en un SVG incrustado): no se descarga
ninguna imagen. La CSP permite `img-src data:`, asi que pasa.
Va DEBAJO del contenido, no encima: si se pusiera encima, el texto tambien
saldria granulado y un contador se lee peor. Por eso .wrap sube a z-index 1.
------------------------------------------------------------------------ */
.band.alt::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:.55; mix-blend-mode:soft-light;
/* soft-light y NO multiply: multiply solo oscurece, y bajaba 13 textos por
debajo del minimo de contraste. Con ruido gris centrado en el medio,
soft-light aclara y oscurece a partes iguales: la luminosidad media del
fondo no se mueve y el contraste del texto queda como estaba.
OJO con `color-interpolation-filters='sRGB'` en el filtro: sin eso, SVG
calcula en luz lineal y el gris medio del ruido sale en 186 en vez de 128.
Con soft-light, todo lo que pasa de 128 ACLARA, asi que el grano dejaba de
ser textura y se volvia una neblina que lavaba el fondo. Medido en vivo. */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band > .wrap{ position:relative; z-index:1; }
/* La cabecera de seccion ocupa TODO el ancho, no la mitad.
Antes era una columna de 64ch dentro de un contenedor de 1180px, y eso
dejaba medio bloque vacio en cada seccion. Ahora el titular manda a la
izquierda y la entradilla acompana a la derecha, con las lineas de base
alineadas abajo -- que es como se maqueta una cabecera editorial. */
.sec{
margin-bottom:clamp(28px,4vw,46px);
display:grid; align-items:end;
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
column-gap:clamp(30px,5vw,68px);
}
.sec > .eyebrow{ grid-column:1; grid-row:1; }
.sec > h2 { grid-column:1; grid-row:2; }
.sec > .sec-sub { grid-column:2; grid-row:2; margin:0 0 6px; color:var(--ink-3); }
/* El titular de una pagina de servicio es un h1, no un h2. Sin esta regla el
h1 no encuentra su sitio en la rejilla, se coloca solo en la segunda
columna y la primera queda vacia. El tamano se modera porque aqui ocupa
media pagina, no el ancho entero del heroe de la portada. */
.sec > h1{ grid-column:1; grid-row:2; font-size:clamp(2.1rem,1.4rem + 2.2vw,3.3rem); }
/* En una sola columna la entradilla vuelve debajo del titular. */
@media (max-width:900px){
.sec{ display:block; max-width:64ch; }
.sec > .sec-sub{ margin:14px 0 0; }
}
.sec-sub{ color:var(--ink-3); }
/* filete corto de terracota encima de cada titular: sustituye al aire vacio */
.sec .eyebrow{ position:relative; padding-left:34px; }
.sec .eyebrow::before{
content:""; position:absolute; left:0; top:50%; width:24px; height:2px; background:var(--clay);
transform-origin:left center; transition:transform .6s cubic-bezier(.16,1,.3,1) .15s;
}
/* Se esconde SOLO si el JS llego a arrancar (html.js). Sin JS queda dibujado:
ningun adorno puede depender de que el script cargue. Vease A.15. */
.js .sec .eyebrow::before{ transform:scaleX(0); }
.js .sec.vista .eyebrow::before{ transform:scaleX(1); }
/* ================== EL CONFIGURADOR — la pieza nueva =================== */
.cfg{ background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cfg-nav{ display:flex; border-bottom:1px solid var(--line); background:var(--bg-2); overflow-x:auto; }
.cfg-nav button{
flex:1 0 auto; min-width:132px; padding:14px 16px; background:transparent; border:0; cursor:pointer;
border-bottom:2px solid transparent; text-align:left;
font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
transition:color .18s, border-color .18s, background .18s;
}
.cfg-nav button .n{ display:block; font-size:15px; font-family:var(--sans); font-weight:600; letter-spacing:-.01em; color:var(--ink-3); margin-top:5px; text-transform:none; }
.cfg-nav button[aria-selected="true"]{ background:var(--paper); border-bottom-color:var(--brand-2); color:var(--brand-2); }
.cfg-nav button[aria-selected="true"] .n{ color:var(--ink); }
.cfg-nav button.done .n{ color:var(--green); }
.cfg-body{ padding:clamp(22px,3.5vw,38px); min-height:270px; }
.cfg-q{ font-size:1.5rem; font-weight:600; color:var(--ink); letter-spacing:-.028em; margin:0 0 8px; }
.cfg-h{ font-size:14.5px; color:var(--ink-3); margin:0 0 22px; }
.ops{ display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); gap:12px; }
.op{
text-align:left; padding:16px 18px; background:var(--paper); cursor:pointer;
border:1px solid var(--line-2); border-radius:var(--r); transition:border-color .18s, background .18s, transform .18s;
}
.op:hover{ border-color:var(--brand-2); transform:translateY(-2px); }
.op b{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.op span{ display:block; font-size:13.4px; color:var(--ink-3); margin-top:4px; line-height:1.45; }
.op[aria-pressed="true"]{ border-color:var(--brand); background:#F2F7FD; box-shadow:inset 0 0 0 1px var(--brand); }
.cfg-foot{ padding:16px clamp(22px,3.5vw,38px); border-top:1px solid var(--line); background:var(--bg-2);
display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; position:relative; }
/* barra de avance: se llena sola conforme responde */
.cfg-foot::before{
content:""; position:absolute; left:0; top:-1px; height:2px; width:var(--avance,0%);
background:linear-gradient(90deg, var(--brand), var(--sky));
transition:width .5s cubic-bezier(.16,1,.3,1);
}
.cfg-foot .prog{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; }
.ns{ font-size:15px; color:var(--ink-2); }
/* --- el resultado --- */
.res{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:860px){ .res{ grid-template-columns:1fr; } }
.plan{ background:var(--brand); color:#DCE7F5; border-radius:var(--r); padding:24px; }
.plan .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8FB6E4; }
.plan h3{ color:#fff; font-size:1.9rem; margin:6px 0 10px; letter-spacing:-.03em; }
.plan p{ font-size:14.6px; }
.ent{ list-style:none; margin:0; padding:0; }
.ent li{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:11px 0; border-bottom:1px solid var(--line); }
.ent li:last-child{ border-bottom:0; }
.ent .t{ font-size:15px; color:var(--ink); font-weight:500; }
.ent .c{ font-family:var(--mono); font-size:12px; color:var(--brand-2); white-space:nowrap; }
.ent .f{ grid-column:1/-1; font-size:12.6px; color:var(--clay); font-family:var(--mono); }
.res h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; }
.noap{ list-style:none; margin:18px 0 0; padding:16px; background:#F3F7F4; border:1px solid #D7E6DC; border-radius:var(--r); }
.noap li{ font-size:13.8px; color:#1F5138; padding-left:22px; position:relative; margin-bottom:7px; }
.noap li:last-child{ margin-bottom:0; }
.noap li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }
.plus{ list-style:none; margin:16px 0 0; padding:0; }
.plus li{ padding:12px 0; border-top:1px dashed var(--line-2); }
.plus b{ display:block; font-size:14.6px; color:var(--ink); }
.plus span{ display:block; font-size:13.2px; color:var(--ink-3); margin-top:3px; }
/* ----------------------------------------------------------- la tabla --- */
.tabla-wrap{ overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }
.tabla{ width:100%; min-width:660px; border-collapse:collapse; }
.tabla th{ text-align:left; padding:15px 20px; font-family:var(--mono); font-size:10.5px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); background:var(--bg-2); }
.tabla td{ padding:15px 20px; border-bottom:1px solid var(--line); vertical-align:middle; transition:background .22s; }
/* Las columnas de los extremos tocan el borde de la tarjeta y necesitan mas
aire que las de en medio. Con 18px uniformes el texto quedaba pegado. */
.tabla th:first-child, .tabla td:first-child{ padding-left:30px; }
.tabla th:last-child, .tabla td:last-child { padding-right:30px; }
@media (max-width:700px){
.tabla th:first-child, .tabla td:first-child{ padding-left:20px; }
.tabla th:last-child, .tabla td:last-child { padding-right:20px; }
}
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla tbody tr:hover td{ background:var(--bg-3); }
.it{ font-size:15.2px; color:var(--ink); font-weight:500; width:44%; position:relative; }
/* la fila activa se marca con el filete calido, no cambiando de color el texto */
.it::before{
content:""; position:absolute; left:12px; top:6px; bottom:6px; width:3px; background:var(--clay); border-radius:2px;
transform:scaleY(0); transform-origin:center; transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.tabla tbody tr:hover .it::before{ transform:scaleY(1); }
.pz{ font-family:var(--mono); font-size:12.6px; color:var(--brand-2); white-space:nowrap; }
.fx{ font-family:var(--mono); font-size:12.6px; color:var(--clay); white-space:nowrap; font-weight:500; }
.ar{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.nota{ margin-top:16px; font-size:14px; color:var(--ink-3); }
/* Migas de pan: pegadas al titular al que pertenecen, no flotando en medio. */
.miga{ margin:0 0 12px; font-size:13.5px; }
/* --------------------------------------------------------- servicios ---
Son SIETE, no cuatro: cuatro areas mensuales mas tres servicios a pedido.
La numeracion 01..07 corre por contador CSS y atraviesa los dos bloques,
que es lo que los ata visualmente en una sola serie. */
#servicios{ counter-reset:fr; }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
display:flex; flex-direction:column; position:relative; counter-increment:fr;
transition:border-color .25s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.card:hover{ border-color:var(--line-2); transform:translateY(-6px); box-shadow:0 22px 40px -26px rgba(16,27,42,.5); }
/* ------------------------------------------------------------------------
FOCO QUE SIGUE AL CURSOR
Solo donde hay raton de verdad: en tactil no hay cursor que seguir y la
regla ni se aplica. main.js pasa la posicion en --mx/--my.
La claridad va POR DEBAJO del texto (z-index 0 contra el 1 de figure y
.card-b), asi que ilumina el panel sin restarle contraste a la letra.
Si el JS no corriera, --mx/--my caen a 50% y queda un halo centrado
perfectamente presentable: nada se rompe.
------------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
.card, .extra article{ isolation:isolate; }
.card::before, .extra article::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:0; transition:opacity .35s ease;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
rgba(30,139,216,.20), rgba(30,139,216,0) 62%);
}
.card:hover::before, .card:focus-within::before,
.extra article:hover::before, .extra article:focus-within::before{ opacity:1; }
.card figure, .extra figure{ z-index:1; }
.card-b, .extra article > h3, .extra article > p{ position:relative; z-index:1; }
}
/* filete de terracota que se traza de izquierda a derecha al pasar por encima */
.card::after,.extra article::after{
content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--clay); z-index:3;
transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.card:hover::after,.card:focus-within::after,
.extra article:hover::after,.extra article:focus-within::after{ transform:scaleX(1); }
/* el numero, sobre la foto */
.card figure,.extra figure{ margin:0; overflow:hidden; position:relative; }
.card figure::after,.extra figure::after{
content:counter(fr,decimal-leading-zero); position:absolute; left:12px; top:11px; z-index:2;
font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#fff;
padding:4px 9px; border-radius:100px; background:rgba(16,27,42,.62); backdrop-filter:blur(4px);
transition:background .35s;
}
.card:hover figure::after,.extra article:hover figure::after{ background:var(--clay); }
/* Estaban a saturate(.35): se les quitaba el 65% del color y solo volvia al
pasar el raton. En un movil NO hay raton, asi que la pagina entera se veia
gris para siempre. Ahora salen practicamente a color y el hover solo remata. */
.card img{ display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover;
filter:saturate(1.12) contrast(1.03); transition:filter .55s, transform .7s cubic-bezier(.16,1,.3,1); }
.card:hover img{ filter:none; transform:scale(1.06); }
.card-b{ padding:20px 20px 22px; }
.card-b h3{ margin-bottom:12px; transition:color .25s; }
.card:hover .card-b h3{ color:var(--brand); }
.card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.card li{ font-size:14.2px; line-height:1.5; padding-left:17px; position:relative; }
.card li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
background:var(--sky); opacity:.6; transition:background .3s, opacity .3s, transform .3s; }
.card:hover li::before{ background:var(--clay); opacity:1; transform:scale(1.25); }
.extra{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
@media (max-width:900px){ .extra{ grid-template-columns:1fr; } }
.extra article{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
position:relative; counter-increment:fr; transition:border-color .25s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.extra article:hover{ border-color:var(--line-2); transform:translateY(-6px); box-shadow:0 22px 40px -26px rgba(16,27,42,.5); }
.extra img{ display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover;
filter:saturate(1.12) contrast(1.03); transition:filter .55s, transform .7s cubic-bezier(.16,1,.3,1); }
.extra article:hover img{ filter:none; transform:scale(1.06); }
.extra h3{ margin:18px 20px 8px; transition:color .25s; }
.extra article:hover h3{ color:var(--brand); }
.extra p{ margin:0 20px 20px; font-size:14.4px; color:var(--ink-3); }
.extra b{ color:var(--ink); }
/* rotulo que separa las cuatro mensuales de las tres a pedido */
.fr-sep{
display:flex; align-items:center; gap:16px; margin:34px 0 4px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.fr-sep::before,.fr-sep::after{ content:""; height:1px; background:var(--line-2); flex:1; }
.fr-sep::before{ flex:0 0 24px; background:var(--clay); height:2px; }
.fr-sep.primera{ margin-top:0; }
/* ============ EL EXPLORADOR DE SERVICIOS — carril + panel ==============
Reproduce lo que hacen otros estudios con una barra lateral y siete
paginas distintas, pero sin siete cargas: el carril cambia el panel en
el sitio. Un visitante ve el alcance completo sin navegar.
Sin JavaScript el carril queda vacio (y oculto por :empty) y los siete
paneles se leen seguidos, cada uno con su . No se pierde nada. */
.det{
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
overflow:hidden; display:grid; grid-template-columns:1fr;
}
.det-rail:empty{ display:none; }
/* La rejilla de dos columnas SOLO cuando hay pestañas. Sin JavaScript el
carril se oculta por :empty, pero su columna de 298 px seguia reservada y
los paneles caian dentro de ella: 7 paneles estrujados en un tercio del
ancho. Atarla a .tabs deja una sola columna cuando no hay carril. */
@media (min-width:900px){
.det.tabs{ grid-template-columns:298px minmax(0,1fr); }
}
/* ---- el carril ---- */
.det-rail{ background:var(--bg-2); border-bottom:1px solid var(--line); display:flex; }
@media (min-width:900px){
.det-rail{ flex-direction:column; border-bottom:0; border-right:1px solid var(--line); }
}
/* En movil el carril se desplaza de lado. Sin una pista visual nadie sabe
que detras de la segunda pestaña hay cinco mas, asi que el borde derecho
se desvanece: es la convencion y se entiende sin explicarla. */
@media (max-width:899px){
.det{ position:relative; }
/* Sin scroll-behavior:smooth a proposito. El desplazamiento suave depende
del compositor y se comprobo que, si la pestaña no esta componiendo
fotogramas, la orden se programa y NUNCA avanza: el carril se quedaba
en cero y la pestaña elegida fuera de pantalla. Un salto instantaneo
no depende de nada y es lo que hace cualquier barra de pestañas. */
.det-rail{ overflow-x:auto; scrollbar-width:thin; }
.det-rail button{ padding:13px 16px; max-width:190px; }
.det-rail .r-t{ font-size:14.4px; white-space:normal; }
.det::after{
content:""; position:absolute; right:0; top:0; width:46px; height:64px; z-index:2;
pointer-events:none;
background:linear-gradient(to right, rgba(246,241,231,0), var(--bg-2) 78%);
}
}
.det-rail button{
display:block; text-align:left; cursor:pointer;
padding:15px 18px; background:transparent; border:0;
font-family:var(--sans); transition:background .2s, border-color .2s;
}
/* OJO: width:100% solo vale en el carril VERTICAL. En el horizontal, un
elemento flex con width:100% mide el ancho entero del carril y solo cabe
una pestaña en pantalla. */
@media (min-width:900px){
.det-rail button{ width:100%; flex:0 0 auto; border-left:3px solid transparent; }
}
@media (max-width:899px){
.det-rail button{ width:auto; flex:0 0 auto; border-bottom:3px solid transparent; }
}
.det-rail .r-n{
display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-3);
transition:color .2s;
}
.det-rail .r-t{
display:block; margin-top:4px; font-size:15.4px; font-weight:600; letter-spacing:-.018em; color:var(--ink-2);
transition:color .2s, transform .3s cubic-bezier(.16,1,.3,1);
}
.det-rail .r-k{ display:none; }
@media (min-width:900px){
.det-rail .r-k{
display:block; margin-top:3px; font-size:12.4px; line-height:1.4; color:var(--ink-3);
}
}
.det-rail button:hover{ background:var(--bg-3); }
.det-rail button:hover .r-t{ transform:translateX(3px); }
.det-rail button[aria-selected="true"]{ background:var(--paper); border-color:var(--clay); }
.det-rail button[aria-selected="true"] .r-n{ color:var(--clay); }
.det-rail button[aria-selected="true"] .r-t{ color:var(--ink); }
/* ---- el panel ---- */
.det-panels{ position:relative; }
.det-p{ padding:clamp(22px,3vw,34px); }
.js .det-p + .det-p{ border-top:1px solid var(--line); } /* solo sin pestañas */
.js .det.tabs .det-p + .det-p{ border-top:0; }
.det-p h3{ font-size:1.34rem; margin-bottom:10px; }
.det.tabs .det-p h3{ display:none; } /* con pestañas, el titulo esta en el carril */
/* Sin max-width: la entradilla llega hasta el borde del panel, como el resto
del contenido. A ancho completo son unos 92 caracteres por linea, por
encima de lo comodo, y eso se compensa con INTERLINEADO, no estrechando
la caja: con 1,72 de interlineado el ojo no se pierde al volver al margen
izquierdo, que es el problema real de una linea larga. */
.det-x{ font-size:17px; line-height:1.72; color:var(--ink-2); }
/* Diecisiete servicios seguidos no se leen. Van en tres subareas, y en dos
columnas cuando el panel da de si, que es como se lee una ficha tecnica. */
.det-g{ margin-top:24px; }
.det-g:first-of-type{ margin-top:20px; }
.det-g h4{
font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--clay); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
/* Descripcion propia de un subservicio (diagnostico, control interno, costos).
Va en cursiva de la serifa para que se distinga de la lista y del cuerpo. */
.det-d{
margin:0 0 12px;
font-family:var(--serif); font-size:16.8px; line-height:1.62; color:var(--ink-2);
}
.det-p ul{ list-style:none; margin:0; padding:0; display:grid; gap:0 30px; }
@media (min-width:1080px){ .det-p ul{ grid-template-columns:1fr 1fr; } }
.det-p li{
font-size:14.4px; line-height:1.5; color:var(--ink-2);
padding:8px 0 8px 27px; position:relative;
}
.det-p li::before{ /* el visto, dibujado, sin imagen */
content:""; position:absolute; left:5px; top:14px; width:10px; height:5.5px;
border-left:2px solid var(--clay); border-bottom:2px solid var(--clay);
transform:rotate(-45deg) scale(.4); opacity:0;
transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.det-p.vivo li::before{ transform:rotate(-45deg) scale(1); opacity:1;
transition-delay:calc(var(--i,0) * 22ms); }
/* Sin JavaScript nadie añade .vivo: los vistos tienen que verse igual. */
html:not(.js) .det-p li::before{ transform:rotate(-45deg) scale(1); opacity:1; }
.det-n{
margin-top:20px; padding:13px 16px; border-radius:8px;
background:var(--bg-3); border-left:3px solid var(--clay);
font-size:14px; color:var(--ink-2);
}
.det-n b{ color:var(--ink); }
/* ---------------------------------- por que tercerizar (las ventajas) --- */
.vent-x{
margin:0 0 22px; font-size:16.2px; color:var(--ink-2);
}
.vent{
list-style:none; margin:0; padding:0; counter-reset:vt;
/* Dos columnas y no cuatro: a cuatro, cada tarjeta medía 220 px (unos 32
caracteres por linea) y no habia forma de justificarla. A dos son ~540 y
se justifican solas. Ademas los textos crecieron. */
display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
@media (max-width:720px){ .vent{ grid-template-columns:1fr; } }
.vent li{
counter-increment:vt; position:relative; padding:22px 20px 24px 20px;
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
transition:border-color .25s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.vent li:hover{ border-color:var(--line-2); transform:translateY(-5px);
box-shadow:0 22px 40px -28px rgba(16,27,42,.5); }
.vent li::before{
content:counter(vt,decimal-leading-zero); display:block; margin-bottom:11px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--clay);
}
.vent b{ display:block; font-size:15.6px; color:var(--ink); font-weight:600;
letter-spacing:-.018em; line-height:1.3; }
.vent span{ display:block; margin-top:9px; font-size:13.8px; line-height:1.6; color:var(--ink-3); }
/* ================== A QUIÉN ATENDEMOS — las seis escenas ==============
Se turnan de una en una, con tratamiento oscuro: gris casi total y un
velo navy en multiplicar encima, que las unifica y las ata a la paleta.
Al pasar por encima recuperan el color, que es el mismo gesto que ya
hacen las tarjetas de servicios.
SIN JavaScript las seis se ven a la vez, como una hoja de contactos.
Solo cuando el script arranca se apilan y empiezan a turnarse. */
.neg{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:980px){ .neg{ grid-template-columns:1fr; } }
.neg-t .sec-sub{ margin-top:14px; }
/* --- el rótulo del rubro --- */
.neg-r{ margin:26px 0 0; padding-left:16px; border-left:3px solid var(--clay); }
/* La clave tecnica del rubro, en terracota: distingue de un vistazo el nombre
del sector (lo que el visitante busca) de lo que en el se hace mal. */
.neg-r .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
text-transform:uppercase; color:var(--clay); }
.neg-r .v{ display:block; margin-top:4px; font-size:1.34rem; font-weight:600;
letter-spacing:-.024em; color:var(--ink); line-height:1.2; }
.neg-r .d{ display:block; margin-top:6px; font-size:14.4px; line-height:1.55; color:var(--ink-3); }
/* --- la lista de rubros ---
Antes eran nueve puntitos invisibles que solo servian para cambiar de foto.
Al fundir «Clientes» con «Sectores» pasan a ser la LISTA DE SECTORES: se
ven, dicen su nombre y sirven para ir directo al rubro que a uno le toca.
No es volver a poner los mandos que el cliente pidio quitar. Aquello era
maquinaria del carrusel; esto es contenido. Y de paso arregla dos cosas: el
visitante ve de un vistazo los nueve rubros (antes en movil solo se veian
tres) y vuelve a haber una forma de detener el movimiento, que es lo que
pide la WCAG 2.2.2 -- al elegir un rubro, la rotacion se para sola. */
.neg-c{ margin-top:26px; }
.neg-d{ display:flex; flex-wrap:wrap; gap:7px; }
.neg-d button{
cursor:pointer; padding:7px 13px; border-radius:100px;
background:var(--paper); border:1px solid var(--line-2); color:var(--ink-3);
font-family:var(--sans); font-size:12.8px; font-weight:500; letter-spacing:-.012em;
transition:border-color .2s, color .2s, background .2s;
}
.neg-d button:hover{ border-color:var(--brand-2); color:var(--brand-2); }
.neg-d button.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
/* --- la imagen --- */
/* El halo se sale del marco a proposito, asi que la banda tiene que
recortarlo: sin esto se desbordaba 2 px por la derecha en el movil. */
/* Apuntaba a #negocios, que dejo de existir al fundir las dos secciones. Sin
esta linea el halo volvia a desbordar 2 px por la derecha en el movil. */
#sectores{ overflow:hidden; }
.neg-v{ position:relative; }
.neg-v .halo{
position:absolute; inset:-8% -6% -10% -6%; z-index:0;
border-radius:58% 42% 46% 54%/44% 56% 44% 56%;
background:linear-gradient(150deg, rgba(18,69,127,.34), rgba(196,112,63,.24) 60%, rgba(30,139,216,.20));
filter:blur(40px); opacity:.8; animation:respira 16s ease-in-out infinite;
}
.neg-f{
position:relative; z-index:1; margin:0; border-radius:14px; overflow:hidden;
border:1px solid rgba(255,255,255,.7);
box-shadow:0 34px 62px -36px rgba(16,27,42,.6), 0 3px 10px -4px rgba(16,27,42,.18);
display:grid; grid-template-columns:repeat(3,1fr); gap:2px; /* sin JS */
}
/* El «efecto sombrio» que se pidio se conserva, pero medido: de 68% de gris
a 22%, y de 0,84 de brillo a 0,96. Sigue unificando las nueve fotos bajo un
mismo tono sin dejarlas en blanco y negro. */
.neg-f img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
filter:grayscale(.22) contrast(1.04) brightness(.96); }
/* el velo navy: es lo que hace el «efecto sombrio» y de paso unifica seis
fotos de origenes distintos bajo un mismo color */
.neg-f::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(168deg, rgba(16,27,42,.14) 0%, rgba(18,69,127,.12) 46%, rgba(16,27,42,.38) 100%);
mix-blend-mode:multiply; transition:opacity .7s;
}
.neg-f:hover::after{ opacity:.35; }
.js .neg-f{ display:block; aspect-ratio:4/5; }
.js .neg-f img{
position:absolute; inset:0; width:100%; height:100%;
/* El fundido y la deriva se acortan con el ciclo: a 4 s por escena, un
fundido de 1 s se comia la cuarta parte del tiempo, y una deriva de 7 s
no llegaba a completarse nunca. */
opacity:0; transform:scale(1.04);
transition:opacity .7s ease, transform 4.6s linear, filter .6s;
}
.js .neg-f img.on{ opacity:1; transform:scale(1); } /* deriva lenta mientras se ve */
.js .neg-f:hover img.on{ filter:none; }
@media (prefers-reduced-motion: reduce){
.neg-v .halo{ animation:none; }
.js .neg-f img{ transition:opacity .01s; transform:none; }
.js .neg-f img.on{ transform:none; }
.neg-d button,.neg-f::after{ transition:none; }
}
/* ------------------------------------------------------------- voces ---
Entran desde la derecha, uno detras de otro (el escalonado lo pone el JS
con ScrollTrigger). El contenedor recorta para que no aparezca barra de
desplazamiento horizontal mientras estan fuera de sitio. */
.voces{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .voces{ grid-template-columns:1fr; } }
#voces .wrap{ overflow:hidden; }
.voz{
background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
display:flex; flex-direction:column; position:relative; overflow:hidden;
transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s, border-color .32s;
}
.voz:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 24px 44px -28px rgba(16,27,42,.5); }
/* comilla de apertura, en serif, muy tenue y en terracota */
.voz::before{
content:"\201C"; position:absolute; right:14px; top:-16px; font-family:var(--serif);
font-size:8rem; line-height:1; color:var(--clay); opacity:.10; pointer-events:none;
transition:opacity .35s, transform .5s cubic-bezier(.16,1,.3,1);
}
.voz:hover::before{ opacity:.19; transform:translateY(4px); }
.ini{
width:48px; height:48px; border-radius:50%; color:#fff; display:grid; place-items:center;
background:linear-gradient(140deg, var(--brand), var(--sky));
font-family:var(--serif); font-style:italic; font-size:1.55rem; margin:0 0 16px;
box-shadow:0 8px 18px -10px rgba(18,69,127,.9); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.voz:nth-child(2) .ini{ background:linear-gradient(140deg, var(--clay), var(--clay-2)); box-shadow:0 8px 18px -10px rgba(164,85,43,.9); }
.voz:hover .ini{ transform:scale(1.08) rotate(-4deg); }
.voz blockquote{ margin:0; font-size:15.4px; line-height:1.62; color:var(--ink-2); position:relative; }
.quien{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.quien b{ display:block; font-size:14.6px; color:var(--ink); }
.quien span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
/* --------------------------------------------------------- preguntas --- */
.faq{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.qa{ border-bottom:1px solid var(--line); }
.qa:last-child{ border-bottom:0; }
.qa summary{ list-style:none; cursor:pointer; padding:19px 52px 19px 22px; position:relative; display:list-item; }
.qa summary::marker,.qa summary::-webkit-details-marker{ content:""; display:none; }
.qa summary span{ font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.018em; }
.qa summary:hover span{ color:var(--brand-2); }
.qa i{ position:absolute; right:22px; top:50%; width:13px; height:13px; transform:translateY(-50%); }
.qa i::before,.qa i::after{ content:""; position:absolute; background:var(--brand-2); transition:transform .26s, opacity .2s; }
.qa i::before{ left:0; top:6px; width:13px; height:1.6px; }
.qa i::after{ left:5.7px; top:0; width:1.6px; height:13px; }
.qa[open] i::after{ transform:rotate(90deg); opacity:0; }
.qa:not([open]) .qa-a{ display:none; }
/* El hueco de 52px a la derecha existe para no chocar con el icono +/-, que
solo esta en la fila del titular. La respuesta no lo necesita, y en movil
ese hueco le robaba 30px de un ancho que ya era justo. */
.qa-a{ padding:0 52px 22px 22px; }
@media (max-width:820px){ .qa-a{ padding-right:22px; } }
.qa-a p{ font-size:15.2px; line-height:1.68; color:var(--ink-2); }
/* ---------------------------------------------------------- contacto --- */
/* El lavado va en tres sitios y basta: portada, el configurador y aqui.
Empieza la pagina, marca la herramienta y la cierra. */
#configurador{ --hx:88%; --hy:16%; --hx2:4%; --hy2:88%; }
#voces { --hx:10%; --hy:14%; --hx2:92%; --hy2:86%; }
#contacto { --hx:92%; --hy:14%; --hx2:4%; --hy2:96%; }
.ct{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,58px); align-items:start; }
@media (max-width:900px){ .ct{ grid-template-columns:1fr; } }
.dir{ margin:26px 0 0; }
.dir dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:18px; }
.dir dt:first-child{ margin-top:0; }
.dir dd{ margin:4px 0 0; font-size:16px; color:var(--ink); font-weight:500; }
/* El telefono y el correo del bloque de contacto median 20px de alto. Son los
dos enlaces que alguien con prisa intenta tocar, asi que se estiran hasta el
minimo de 24 sin mover la maquetacion. */
.dir dd a{ display:inline-block; padding-block:4px; margin-block:-4px; }
.mapa{ padding-block:3px; }
.form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,3vw,30px); }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:540px){ .dos{ grid-template-columns:1fr; } }
.f{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; min-width:0; }
.f label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.f input,.f textarea{ font-family:var(--sans); font-size:15.5px; color:var(--ink); padding:11px 13px;
border:1px solid var(--line-2); border-radius:8px; background:var(--bg); transition:border-color .18s, background .18s; }
.f textarea{ resize:vertical; }
.f input:focus,.f textarea:focus{ outline:none; border-color:var(--brand-2); background:#fff; }
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{ border-color:#C0392B; }
.promesa{ margin:0 0 14px; font-size:13.6px; line-height:1.5; color:var(--ink-3); }
.promesa b{ display:block; color:var(--ink); font-weight:600; font-size:14.4px; }
.mapa{ display:inline-block; margin-top:6px; font-size:14px; }
.status{ font-size:14px; color:var(--green); margin:12px 0 0; min-height:1.2em; }
.status.err{ color:#C0392B; }
.consent{ margin:12px 0 0; font-size:12.8px; color:var(--ink-3); line-height:1.55; }
/* Casilla de consentimiento (set. 2026). No usa .f porque no es un campo en
columna: es una casilla con su texto al lado, y el texto tiene que poder
ocupar varias lineas sin descolocar la casilla. */
/* Captura al final del configurador (fase 1). Reutiliza .dos, .f, .f-check
y .status del formulario de contacto: mismos campos, mismo aspecto, y una
sola definición que mantener. */
.cap{ margin-top:26px; padding:22px clamp(18px,2.4vw,26px); background:var(--paper);
border:1px solid var(--line); border-radius:var(--r); }
/* El antetitulo va en mono y pequeño, y el titular manda: al reves la
jerarquia se invierte y el bloque parece un pie de pagina. */
.cap .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-3); margin:0; }
.cap h4{ margin:8px 0 10px; font-size:1.24rem; line-height:1.25; letter-spacing:-.015em;
color:var(--ink); }
.cap-x{ margin:0 0 18px; font-size:14.6px; line-height:1.55; color:var(--ink-3); max-width:62ch; }
.cap .f{ margin-bottom:13px; }
.cap-ok{ font-size:15px; line-height:1.6; color:var(--ink-2); }
.cap-ok b{ color:var(--ink); }
.f-check{ display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:start;
margin:0 0 16px; font-size:13.4px; line-height:1.5; color:var(--ink-3); }
.f-check input{ width:17px; height:17px; margin:2px 0 0; accent-color:var(--brand-2); flex:none; }
.f-check label{ font-family:var(--sans); font-size:13.4px; letter-spacing:0; text-transform:none;
color:var(--ink-3); cursor:pointer; }
.f-check a{ color:var(--brand-2); }
.f-check.mal label{ color:#C0392B; }
.f-check.mal input{ outline:2px solid #C0392B; outline-offset:2px; }
/* La trampa antirrobots. No se usa display:none: algunos robots comprueban
precisamente eso y saltan los campos ocultos asi. Se saca de la pantalla. */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* -------------------------------------------- paginas legales (leg) ----
La de privacidad llevaba la maquetacion en atributos style, fuera del
sistema de tokens. Aqui quedan sus cuatro reglas. */
.leg{ max-width:74ch; }
.leg h1{ font-size:clamp(2rem,1.4rem + 2.2vw,3rem); }
.leg .eyebrow{ padding-left:0; }
.leg .sub{ max-width:none; }
.leg h2{ margin-top:36px; }
.leg h2 + .det-x{ margin-top:12px; }
.leg-btn{ margin-left:auto; }
.leg-fin{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.leg + .foot .foot-l, .foot .foot-l a{ color:#C3CDD9; }
/* --------------------------------------------------------------- pie --- */
.foot{ background:var(--ink); color:#A9B5C4; padding-block:clamp(40px,5vw,64px) 30px; }
.foot .logo{ color:#fff; }
.foot .logo-t b{ color:#fff; } .foot .logo-t i{ color:#7C8A9B; }
.foot .mk{ --mk-a:var(--sky); --mk-b:#fff; } /* sobre el navy del pie */
.foot-g{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,4vw,44px); }
@media (max-width:900px){ .foot-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-g{ grid-template-columns:1fr; } }
.foot-p{ margin-top:18px; font-size:14px; line-height:1.7; color:#8896A6; }
.foot-c{ display:flex; flex-direction:column; gap:9px; }
.foot-t{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#7C8A9B; margin-bottom:5px; }
/* Median 23,99: justo por debajo del minimo de 24. Con este relleno pasan
holgados y la columna del pie no se descoloca porque el gap la gobierna. */
.foot-c a{ font-size:14.4px; color:#C3CDD9; text-decoration:none;
display:inline-block; padding-block:3px; }
.foot-c a:hover{ color:var(--sky); }
.foot-l a{ display:inline-block; padding-block:5px; margin-block:-5px; }
.foot-l{ margin-top:clamp(30px,4vw,46px); padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#7C8A9B; }
/* ============== APARICIONES — sin librería ==============================
Sustituye a GSAP + ScrollTrigger (113 KB). El JavaScript solo pone dos
clases; la animacion entera vive aqui.
El estado OCULTO cuelga de html.rv-on, clase que el script añade solo
despues de comprobar que hay IntersectionObserver y que no se pidio
quietud. Si el script no arranca, esa clase no existe y no se esconde
nada: la pagina se ve entera. Es la misma garantia que daba gsap.from(),
que animaba DESDE un estado desplazado en vez de esconder primero. */
.rv{ transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
transition-delay:calc(var(--i,0) * 70ms); }
.rv-on .rv{ opacity:0; transform:translateY(20px); }
.rv-on .rv.vis{ opacity:1; transform:none; }
/* Las filas de la tabla entran desde la izquierda; las voces, desde la
derecha, comentario a comentario, con mas separacion entre ellas. */
.rv-on #tabla-plazos .rv{ transform:translateX(-18px); }
.rv-on .voces .rv{ transform:translateX(110px); }
.rv-on .voces .rv.vis{ transform:none; }
/* ------------------------------------------------------------------------
APARICIONES SIN JAVASCRIPT
El navegador moderno sabe animar segun donde este el desplazamiento, sin
observador y sin reloj: va pegado al dedo. main.js comprueba el soporte y
solo entonces pone `rv-css` en vez de `rv-on`; si no lo hay, sigue el
camino de siempre con IntersectionObserver, intacto.
DOBLE CANDADO a proposito: @supports aqui y CSS.supports alla. Esconder
contenido esperando que algo lo revele es como se rompen las paginas, y
en este proyecto ya paso una vez.
El rango termina en `entry 55%` y no en `cover`: un elemento al final del
documento no puede seguir desplazandose, y con `cover` se quedaria a medio
aparecer para siempre. Comprobado bajando hasta el final.
------------------------------------------------------------------------ */
@supports (animation-timeline: view()){
.rv-css .rv{
animation:rv-sube .6s cubic-bezier(.16,1,.3,1) both;
animation-timeline:view();
animation-range:entry 4% entry 55%;
}
.rv-css #tabla-plazos .rv{ animation-name:rv-izq; }
.rv-css .voces .rv{ animation-name:rv-der; }
}
@keyframes rv-sube{ from{ opacity:0; transform:translateY(20px); } }
@keyframes rv-izq { from{ opacity:0; transform:translateX(-18px); } }
@keyframes rv-der { from{ opacity:0; transform:translateX(110px); } }
.voces .rv{ transition-duration:.8s; transition-delay:calc(var(--i,0) * 200ms); }
#tabla-plazos .rv{ transition-duration:.45s; transition-delay:calc(var(--i,0) * 55ms); }
/* El resultado del configurador, escalonado al pintarse. */
@keyframes entra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.entra{ animation:entra .4s ease-out backwards; animation-delay:calc(var(--i,0) * 30ms); }
@media (prefers-reduced-motion: reduce){
.rv,.rv-on .rv,.rv-css .rv{ opacity:1 !important; transform:none !important;
transition:none; animation:none !important; }
.entra{ animation:none; }
}
/* ------------------------------------------- barra de acción en móvil ---
El formulario esta al 91% de la pagina: en un telefono hay que recorrer unas
veinte pantallas para encontrar como escribir. Esta barra deja las tres vias
de contacto siempre a mano.
Es CSS puro, sin JavaScript: aparece por debajo de 900px y desaparece por
encima. El boton flotante de WhatsApp se oculta en ese tramo para que no
compitan por el mismo rincon. */
.barra{ display:none; }
@media (max-width:899px){
.barra{
display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
position:fixed; inset:auto 0 0 0; z-index:80;
background:var(--line-2); border-top:1px solid var(--line-2);
box-shadow:0 -8px 26px -18px rgba(16,27,42,.7);
padding-bottom:env(safe-area-inset-bottom);
}
.barra a{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
min-height:56px; background:var(--paper); color:var(--ink-2);
text-decoration:none; font-size:12.4px; font-weight:600; letter-spacing:-.01em;
}
.barra a.p{ background:var(--brand); color:#fff; }
.barra a .i{ font-size:15px; line-height:1; }
.barra a:active{ background:var(--bg-2); }
.barra a.p:active{ background:var(--brand-2); }
body{ padding-bottom:60px; } /* que la barra no tape el final del pie */
}
/* ----------------------------------------------------------- whatsapp --- */
.wa{ position:fixed; right:18px; bottom:18px; z-index:70; width:50px; height:50px; border-radius:50%;
display:grid; place-items:center; background:#0f7f70; color:#fff; text-decoration:none;
box-shadow:0 10px 26px -12px rgba(16,27,42,.9); transition:background .2s, transform .2s; }
.wa:hover{ background:#0b5f54; transform:translateY(-2px); }
/* Se oculta DESPUES de definirlo, no antes: a igualdad de especificidad gana
la ultima regla del archivo aunque la otra este dentro de un @media. Puesto
arriba, el boton seguia saliendo y competia con la barra de accion. */
@media (max-width:899px){ .wa{ display:none; } }
/* Nada de lo de arriba puede moverse si el sistema pide quietud. Se apagan
las animaciones que corren solas (halo, ficha flotante, led) y todas las
transiciones de las piezas que se transforman. */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.led,.hero-vis .halo,.hero-chip{ animation:none; }
.card,.card img,.card::after,.card li::before,.card figure::after,
.extra img,.extra article,.extra article::after,
.op,.btn .s-k,
.voz,.voz::before,.ini,.hero-fig img,.it::before,.tabla td,
.sec .eyebrow::before,.cfg-foot::before,
.vent li,.det-rail button,.det-rail .r-t,.det-p li::before{ transition:none; }
.js .sec .eyebrow::before{ transform:scaleX(1); }
.det-p li::before{ transform:rotate(-45deg) scale(1); opacity:1; }
}
/* ------------------------------------------------------------------------
PANTALLAS TACTILES
En un movil o una tableta NO existe «pasar el raton»: todo el color que se
guardaba para el :hover no se veia NUNCA. La pagina entera salia gris para
quien entra desde el telefono, que son la mayoria.
Va al FINAL de la hoja a proposito. Estaba antes de .neg-f img y no servia
de nada: a igual especificidad gana la regla posterior, aunque la de aqui
este dentro de un @media. Ya paso una vez en esta misma hoja con .wa.
------------------------------------------------------------------------ */
@media (hover: none){
.card img, .extra img{ filter:none; }
.neg-f img{ filter:grayscale(.12) contrast(1.02) brightness(.98); }
}
@media print{
.util,.head,.wa,.form,.cta-row,.cfg-nav,.cfg-foot{ display:none; }
body{ background:#fff; font-size:11pt; }
.band{ padding-block:18px; }
.qa .qa-a{ display:block !important; }
a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}
/* ========================================================================
PAGINAS DE SERVICIO
Todo lo de aqui abajo es de las paginas de servicio y no lo usa ninguna
otra. Se aisla con prefijos propios para que la portada no cambie ni un
pixel cuando esto evolucione.
===================================================================== */
/* --- heroe: el texto a la izquierda, la ficha del mes a la derecha ------
La ficha no es un adorno: son las fechas reales de ESTE mes, calculadas
con los feriados peruanos. Es el argumento de la pagina, dibujado. */
.lp-hero{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4.5vw,64px);
align-items:center; }
@media (max-width:900px){ .lp-hero{ grid-template-columns:1fr; gap:34px; } }
.lp-hero .sec{ display:block; margin-bottom:26px; }
.lp-hero h1{ font-size:clamp(2rem,1.35rem + 1.9vw,2.95rem); margin:10px 0 16px; }
.lp-hero .sec-sub{ max-width:46ch; }
.ficha{
background:var(--brand); color:#DCE7F5; border-radius:var(--r);
padding:clamp(20px,2.6vw,30px); position:relative; overflow:hidden;
box-shadow:0 30px 60px -42px rgba(16,27,42,.85);
}
/* Un velo de celeste en la esquina: da profundidad sin dibujar nada. */
.ficha::after{
content:""; position:absolute; inset:auto -60px -80px auto; width:260px; height:260px;
background:radial-gradient(circle, rgba(30,139,216,.30), transparent 68%); pointer-events:none;
}
.ficha-t{
font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:#8FB6E4; margin:0 0 18px; display:flex; justify-content:space-between; gap:12px;
border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:12px;
}
.ficha-l{ list-style:none; margin:0; padding:0; }
.ficha-l li{
display:grid; grid-template-columns:1fr auto; gap:2px 16px; align-items:baseline;
padding:13px 0; border-bottom:1px solid rgba(255,255,255,.10);
}
.ficha-l li:last-child{ border-bottom:0; padding-bottom:4px; }
/* Las tres posiciones van explicitas. Con la fecha solo declarando su fila,
el navegador la coloca ANTES que el resto (la colocacion definida va primero)
y el chip acababa a la izquierda del entregable. */
.ficha-l .e{ grid-column:1; grid-row:1; color:#fff; font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.ficha-l .p{ grid-column:1; grid-row:2; font-size:13px; color:#9FBDE2; }
.ficha-l .fx{
grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:13px;
color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
border-radius:6px; padding:5px 10px; white-space:nowrap;
}
.ficha-n{ margin:16px 0 0; font-size:12.5px; line-height:1.5; color:#9FBDE2; }
/* --- para quien es: el numeral manda ----------------------------------- */
.situ{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(20px,2.6vw,34px); counter-reset:si; }
@media (max-width:860px){ .situ{ grid-template-columns:1fr; gap:26px; } }
.situ li{ counter-increment:si; padding-top:20px; border-top:2px solid var(--brand-2); }
.situ li::before{
content:"0" counter(si); display:block; font-family:var(--mono); font-size:30px;
font-weight:500; letter-spacing:-.02em; color:var(--brand-2); line-height:1; margin-bottom:16px;
}
.situ .ic{ display:block; width:26px; height:26px; color:var(--clay); margin-bottom:14px; }
.situ b{ display:block; font-size:17.5px; letter-spacing:-.015em; color:var(--ink); margin-bottom:8px; }
.situ span{ display:block; font-size:14.6px; line-height:1.6; color:var(--ink-3); }
/* --- que incluye: dos bloques arriba, uno a lo ancho abajo -------------- */
.inc{ display:grid; gap:18px; }
.inc-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:860px){ .inc-2{ grid-template-columns:1fr; } }
.inc-b{
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
overflow:hidden; display:flex; flex-direction:column;
}
.inc-b figure{ margin:0; aspect-ratio:16/7; overflow:hidden; }
.inc-b img{ width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(.18) contrast(1.03); }
.inc-x{ padding:clamp(20px,2.4vw,28px); }
.inc-x h3{ font-size:1.35rem; letter-spacing:-.02em; margin:0 0 4px; }
.inc-x .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--clay); margin:0 0 10px; }
.inc-x ul{ list-style:none; margin:14px 0 0; padding:0; }
.inc-x li{ position:relative; padding:9px 0 9px 22px; font-size:14.8px; line-height:1.55;
color:var(--ink-2); border-bottom:1px solid var(--line); }
.inc-x li:last-child{ border-bottom:0; padding-bottom:0; }
.inc-x li::before{
content:""; position:absolute; left:2px; top:17px; width:7px; height:7px;
border:1.5px solid var(--brand-2); border-radius:2px; transform:rotate(45deg);
}
/* el tercero ocupa el ancho entero: imagen a un lado, lista al otro */
.inc-w{ display:grid; grid-template-columns:.78fr 1.22fr; }
@media (max-width:860px){ .inc-w{ grid-template-columns:1fr; } }
.inc-w figure{ aspect-ratio:auto; height:100%; min-height:230px; }
.inc-w .inc-x ul{ columns:2; column-gap:34px; }
@media (max-width:1000px){ .inc-w .inc-x ul{ columns:1; } }
.inc-w .inc-x li{ break-inside:avoid; }
/* --- tres cifras antes de la tabla ------------------------------------- */
.cifras{ list-style:none; margin:0 0 30px; padding:0; display:grid;
grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); }
@media (max-width:700px){ .cifras{ grid-template-columns:1fr; gap:18px; } }
.cifras li{ border-left:2px solid var(--clay-2); padding:2px 0 2px 18px; }
.cifras b{ display:block; font-size:clamp(2rem,1.4rem + 1.6vw,2.7rem); line-height:1;
letter-spacing:-.035em; color:var(--brand); font-weight:600; }
.cifras span{ display:block; margin-top:8px; font-size:14.2px; line-height:1.5; color:var(--ink-3); }
/* --- como trabajamos: una linea de tiempo ------------------------------ */
.pasos{ list-style:none; margin:0; padding:0; counter-reset:ps; position:relative;
max-width:78ch; }
.pasos::before{
content:""; position:absolute; left:19px; top:14px; bottom:14px; width:1px;
background:linear-gradient(180deg, var(--brand-2), var(--line-2)); opacity:.5;
}
.pasos li{ counter-increment:ps; position:relative; padding:0 0 30px 60px; }
.pasos li:last-child{ padding-bottom:0; }
.pasos li::before{
content:counter(ps); position:absolute; left:0; top:-2px; width:39px; height:39px;
border-radius:50%; background:var(--paper); border:1px solid var(--line-2);
color:var(--brand); font-family:var(--mono); font-size:14px; font-weight:500;
display:grid; place-items:center;
}
.pasos b{ display:block; font-size:17px; letter-spacing:-.015em; color:var(--ink); margin-bottom:6px; }
.pasos span{ display:block; font-size:14.8px; line-height:1.62; color:var(--ink-3); }
/* --- el fondo del heroe ------------------------------------------------
Tres capas, ninguna protagonista:
1. la aerea de Lima que ya usa la portada, desaturada y al 22 %, con una
mascara que la apaga justo donde empieza el titular;
2. una rejilla de dias, dibujada con gradientes (0 KB), que repite en
silencio el tema de la pagina: las fechas;
3. un lavado hacia el color del papel, para que el texto siempre caiga
sobre fondo plano y no pierda contraste.
La foto es atmosfera. Si se quita, la pagina sigue leyendose igual. */
.lp-top{ position:relative; overflow:hidden; }
.lp-top > .wrap{ position:relative; z-index:1; }
.lp-fondo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.lp-fondo::before{
/* UN PANEL, NO UN LAVADO.
Antes la foto era un fondo al 26 % estirado bajo toda la seccion, y la
ficha tapaba justo la mitad donde se veia: quedaba un marco delgado que
se leia como textura, no como fotografia. Ahora ocupa la mitad derecha
de verdad, a plena opacidad, y solo se difumina en su borde izquierdo,
que es donde tiene que ceder el paso al texto. */
content:""; position:absolute; top:0; bottom:0; left:44%; right:0;
/* Encuadre: se agranda un 30 % sobre el alto del panel para poder recortar
cielo por arriba y agua por la derecha. Lo que queda a la vista son los
edificios y la avenida, que es lo unico reconocible como ciudad. */
/* 1200 px basta para este panel (mide ~700 en un portatil y ~960 en una
pantalla ancha) y pesa 137 KB en vez de 214. La de 1600 se queda para el
heroe de la portada, que la usa a mayor tamano. */
background:url("/assets/img/hero-1200.webp") 12% 68% / auto 132% no-repeat;
filter:saturate(.96) contrast(1.05);
/* La transicion hacia el texto vive en la mascara, no en un velo blanco
encima: asi el degradado hace de puente y no borra la foto entera. */
-webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.82) 18%, #000 28%);
mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.82) 18%, #000 28%);
transform:translate3d(var(--cx,0px), calc(var(--par,0px) + var(--cy,0px)), 0) scale(1.05);
will-change:transform;
}
.lp-fondo::after{
content:""; position:absolute; inset:0;
background:
/* la rejilla de dias, casi al limite de lo perceptible */
repeating-linear-gradient(to right, rgba(18,69,127,.025) 0 1px, transparent 1px 88px),
repeating-linear-gradient(to bottom, rgba(18,69,127,.02) 0 1px, transparent 1px 88px),
/* velo de marca SOLO sobre la foto, y suave: la hermana con el azul de la
ficha sin apagarla */
linear-gradient(to right, transparent 46%, rgba(18,69,127,.10) 62%, rgba(18,69,127,.22) 100%),
/* cierres: arriba para que no choque con la cabecera, abajo para entregar
limpio a la seccion siguiente */
linear-gradient(to bottom, rgba(252,250,246,.30) 0%, transparent 14%, transparent 66%, rgba(252,250,246,.35) 90%, var(--bg) 100%);
}
/* La ficha flota SOBRE la foto: mas estrecha que su columna, pegada a la
izquierda y con sombra propia. Deja ver ciudad arriba, abajo y a su
derecha, y se le mete por debajo en el borde izquierdo. */
.lp-hero > .ficha{
justify-self:start; max-width:430px; width:100%;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 44px 70px -38px rgba(6,18,38,.78), 0 4px 14px -6px rgba(6,18,38,.35);
}
@media (max-width:900px){
/* En una columna no hay derecha donde poner el panel: la foto pasa a ser
una franja arriba y se apaga antes de que empiece el titular. */
.lp-fondo::before{
left:0; right:0; top:0; bottom:auto; height:30%;
background:url("/assets/img/hero-900.webp") 30% 62% / auto 118% no-repeat;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 40%, transparent 88%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 40%, transparent 88%);
}
/* El velo hace aqui el trabajo que en escritorio hace la columna: la foto se
lee entera arriba y se apaga justo donde arranca el titular. */
.lp-fondo::after{
background:
linear-gradient(to bottom, rgba(252,250,246,0) 0%, rgba(252,250,246,.18) 6%,
rgba(252,250,246,.62) 11%, rgba(252,250,246,.90) 16%, var(--bg) 25%);
}
.lp-hero > .ficha{ max-width:none; }
/* En movil el antetitulo cae sobre la foto: el azul claro se sostiene mal
sobre unos edificios, el navy si. En escritorio no hace falta porque ahi
el texto esta sobre papel. */
.lp-top .eyebrow{ color:var(--brand); }
}
@media (prefers-reduced-motion: reduce){
.lp-fondo::before{ transform:scale(1.05); }
}
/* --- interaccion -------------------------------------------------------
Nada se mueve mas de 4 px ni tarda mas de .35 s. La pagina responde al
raton, no lo persigue. */
.inc-b{ transition:border-color .3s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.inc-b:hover{ border-color:var(--line-2); transform:translateY(-4px);
box-shadow:0 26px 46px -30px rgba(16,27,42,.5); }
.inc-b figure{ background:var(--bg-2); }
.inc-b img{ transition:transform .6s cubic-bezier(.16,1,.3,1), filter .45s; }
.inc-b:hover img{ transform:scale(1.045); filter:grayscale(0) contrast(1.05); }
.inc-x li{ transition:color .25s, padding-left .25s; }
.inc-x li:hover{ color:var(--ink); padding-left:26px; }
.inc-x li::before{ transition:background .25s, border-color .25s, transform .35s; }
.inc-x li:hover::before{ background:var(--brand-2); border-color:var(--brand-2); transform:rotate(135deg); }
.situ li{ transition:border-color .3s; }
.situ li::before{ transition:color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
.situ .ic{ transition:color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
.situ li:hover{ border-top-color:var(--clay); }
.situ li:hover::before{ color:var(--clay); transform:translateX(3px); }
.situ li:hover .ic{ color:var(--brand-2); transform:translateY(-3px); }
.ficha-l li{ transition:background .28s; border-radius:6px; margin:0 -10px; padding-left:10px; padding-right:10px; }
.ficha-l li:hover{ background:rgba(255,255,255,.07); }
.ficha-l .fx{ transition:border-color .28s, background .28s; }
.ficha-l li:hover .fx{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); }
.cifras li{ transition:border-color .3s; }
.cifras b{ transition:color .3s; }
.cifras li:hover{ border-left-color:var(--brand-2); }
.cifras li:hover b{ color:var(--brand-2); }
.pasos li::before{ transition:background .3s, color .3s, border-color .3s; }
.pasos li:hover::before{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tabla tbody tr{ transition:background .22s; }
.tabla tbody tr:hover{ background:rgba(30,139,216,.06); }
.btn-p{ transition:background .25s, transform .25s, box-shadow .3s; }
.btn-p:hover{ box-shadow:0 14px 26px -16px rgba(18,69,127,.85); }
.btn-g{ transition:border-color .25s, color .25s, transform .25s; }
.btn-g:hover{ transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){
.inc-b,.inc-b img,.inc-x li,.situ li::before,.situ .ic,.cifras b,.pasos li::before,
.ficha-l li,.btn-p,.btn-g{ transition:none !important; }
.inc-b:hover,.inc-b:hover img,.situ li:hover::before,.situ li:hover .ic,
.btn-g:hover{ transform:none !important; }
}
/* --- el proceso: pasos a la izquierda, panel fijo a la derecha ---------
Los visuales son dibujos con CSS, no imagenes: representan el proceso y se
pueden corregir escribiendo, no reexportando un PNG. */
.proc{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:900px){ .proc{ grid-template-columns:1fr; gap:0; } }
.proc .pasos{ max-width:none; }
/* la indicacion de que hay algo que tocar */
.proc-ayuda{
display:none; margin:0 0 22px; font-family:var(--mono); font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
@media (min-width:901px){ .proc-ayuda{ display:block; } }
.proc-ayuda::before{
content:""; display:inline-block; width:14px; height:1px; background:var(--clay);
vertical-align:middle; margin-right:9px;
}
/* el hilo que llega hasta el paso elegido */
.pasos::after{
content:""; position:absolute; left:19px; top:14px; width:1px;
height:var(--prog,0px); background:var(--brand-2); opacity:.85;
transition:height .45s cubic-bezier(.16,1,.3,1);
}
.pasos li{ transition:opacity .3s, background .3s; }
/* Se atenuan poco: los cinco pasos se leen igual, el elegido solo destaca. */
.proc .pasos li{ opacity:.82; border-radius:10px; }
.proc .pasos li.on{ opacity:1; background:linear-gradient(90deg, rgba(18,69,127,.055), transparent 72%); }
@media (min-width:901px){
.proc .pasos li{ cursor:pointer; }
.proc .pasos li:hover{ opacity:1; }
}
.proc .pasos li:focus-visible{ outline:2px solid var(--brand-2); outline-offset:4px; }
.proc .pasos li.on::before{ background:var(--brand); border-color:var(--brand); color:#fff; }
.proc .pasos li b{ transition:color .3s; }
.proc .pasos li.on b{ color:var(--brand); }
/* el panel: se queda quieto mientras se recorren los pasos */
.proc-panel{ position:sticky; top:96px; min-height:340px; }
@media (max-width:900px){ .proc-panel{ display:none; } }
.proc-v{
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
padding:clamp(18px,2.2vw,26px);
box-shadow:0 26px 46px -34px rgba(16,27,42,.45);
}
/* En escritorio se apilan en el mismo hueco y solo se ve el activo. */
/* Un fundido corto y limpio: sin desplazamientos, que era lo que hacia que
el cambio se leyera como un salto. */
.proc-panel .proc-v{
position:absolute; inset:0 0 auto 0; opacity:0; visibility:hidden;
transition:opacity .22s ease, visibility .22s;
}
.proc-panel .proc-v.on{ opacity:1; visibility:visible; }
/* En movil cada visual vive debajo de su paso, sin sticky ni cambios. */
@media (max-width:900px){ .proc-v{ margin:16px 0 4px; } }
.pv-k{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
color:var(--ink-3); margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.pv-n{ margin:16px 0 0; font-size:13.4px; line-height:1.55; color:var(--ink-3); }
/* 1. ficha del diagnostico */
.pv-ficha{ list-style:none; margin:0; padding:0; }
.pv-ficha li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
padding:11px 0; border-bottom:1px dashed var(--line); }
.pv-ficha li:last-child{ border-bottom:0; }
.pv-ficha span{ font-size:13.6px; color:var(--ink-3); }
.pv-ficha b{ font-family:var(--mono); font-size:13px; color:var(--ink); text-align:right; }
.pv-ficha .pv-al{ color:var(--clay); }
/* 2. arbol del plan de cuentas */
.pv-arbol{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13px; }
.pv-arbol .r{ color:var(--brand); font-weight:500; margin-top:12px; letter-spacing:.02em; }
.pv-arbol .r:first-child{ margin-top:0; }
.pv-arbol .h{ position:relative; padding:5px 0 5px 26px; color:var(--ink-2); }
.pv-arbol .h::before{
content:""; position:absolute; left:7px; top:0; bottom:50%; width:1px; background:var(--line-2);
}
.pv-arbol .h::after{
content:""; position:absolute; left:7px; top:50%; width:11px; height:1px; background:var(--line-2);
}
.pv-arbol .h.u::before{ bottom:50%; }
/* 3. calendario del planeamiento */
.pv-cal{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.pv-cal li{ background:var(--bg-3); border:1px solid var(--line); border-radius:6px;
padding:8px 4px 9px; text-align:center; }
.pv-cal b{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
letter-spacing:.05em; margin-bottom:6px; }
.pv-cal i{ display:inline-block; width:5px; height:5px; border-radius:50%; margin:0 1.5px; }
.pv-cal .m{ background:var(--brand-2); }
.pv-cal .t{ background:var(--sky); }
.pv-cal .a{ background:var(--clay-2); }
.pv-ley{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0; font-size:12px; color:var(--ink-3); }
.pv-ley span{ display:inline-flex; align-items:center; gap:6px; }
.pv-ley span::before{ content:""; width:6px; height:6px; border-radius:50%; }
.pv-ley .m::before{ background:var(--brand-2); }
.pv-ley .t::before{ background:var(--sky); }
.pv-ley .a::before{ background:var(--clay-2); }
/* 4. flujo del mes */
.pv-flujo{ list-style:none; margin:0; padding:0; counter-reset:fl; }
.pv-flujo li{
counter-increment:fl; position:relative; padding:0 0 20px 34px;
}
.pv-flujo li:last-child{ padding-bottom:0; }
.pv-flujo li::before{
content:counter(fl); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
background:var(--brand-2); color:#fff; font-family:var(--mono); font-size:11px;
display:grid; place-items:center;
}
.pv-flujo li:not(:last-child)::after{
content:""; position:absolute; left:11px; top:26px; bottom:6px; width:1px; background:var(--line-2);
}
.pv-flujo b{ display:block; font-size:14.6px; color:var(--ink); letter-spacing:-.01em; }
.pv-flujo span{ display:block; font-size:13.2px; color:var(--ink-3); margin-top:2px; }
/* al entrar en pantalla, los pasos del mes se encienden uno tras otro */
.proc-panel .proc-v.on .pv-flujo li{ animation:pvEntra .5s cubic-bezier(.16,1,.3,1) backwards; }
.proc-panel .proc-v.on .pv-flujo li:nth-child(2){ animation-delay:.09s; }
.proc-panel .proc-v.on .pv-flujo li:nth-child(3){ animation-delay:.18s; }
.proc-panel .proc-v.on .pv-flujo li:nth-child(4){ animation-delay:.27s; }
@keyframes pvEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* 5. bandeja de notificaciones */
.pv-bandeja{ border:1px solid var(--line); border-left:3px solid var(--green); border-radius:8px;
padding:13px 15px; background:var(--paper); }
.pv-bandeja + .pv-bandeja{ margin-top:10px; }
.pv-bandeja.apag{ border-left-color:var(--line-2); opacity:.6; }
.pv-bandeja .o{ display:flex; align-items:center; gap:8px; margin:0 0 6px;
font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pv-bandeja .o i{ margin-left:auto; font-style:normal; letter-spacing:0; text-transform:none; }
.pv-bandeja .pt{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.pv-bandeja.apag .pt{ background:var(--line-2); }
.pv-bandeja .a{ margin:0; font-size:14.6px; color:var(--ink); }
.pv-bandeja .e{ margin:7px 0 0; font-size:13px; color:var(--green); display:flex; align-items:center; gap:7px; }
.pv-bandeja .ok{ font-size:12px; }
@media (prefers-reduced-motion: reduce){
.pasos::after,.proc .pasos li,.proc .pasos li b,.proc-panel .proc-v{ transition:none !important; }
.proc-panel .proc-v{ transform:none !important; }
.proc-panel .proc-v.on .pv-flujo li{ animation:none !important; }
}
/* ====================================================================
PAGINA DE CONSTITUCION DE EMPRESAS
La contable es un calendario: ciclo mensual, panel fijo a la derecha,
linea vertical. Esta es un expediente: recorrido con principio y final,
riel horizontal, y documentos que se acumulan. Comparte tokens, reticula
y componentes; no comparte composicion.
La arcilla pasa al frente. El azul queda para los botones y los enlaces,
que son del sistema y no de esta pagina.
==================================================================== */
/* ------------------------------------------------------------ heroe --- */
.cn-top{ position:relative; overflow:hidden; padding-top:34px; }
.cn-foto{
position:absolute; top:0; right:0; bottom:0; left:40%;
background:url("/assets/img/constitucion.webp") center 32% / cover no-repeat;
}
/* Dos veladuras: una horizontal, para que el papel de la izquierda entregue
la fotografia sin un corte seco; otra vertical, muy leve, para asentar el
color. La foto se ve como foto, no como fondo lavado. */
.cn-foto::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(90deg, var(--bg) 0%, rgba(252,250,246,.92) 9%,
rgba(252,250,246,.35) 26%, rgba(252,250,246,0) 46%),
linear-gradient(180deg, rgba(16,27,42,.10), rgba(16,27,42,.20));
}
.cn-top > .wrap{ position:relative; }
.cn-hero{
display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:clamp(28px,4vw,64px); align-items:center;
padding:14px 0 clamp(46px,6vw,84px);
}
.cn-top .sec{ display:block; }
.cn-top h1{
font-size:clamp(2.05rem, 1.3rem + 2.5vw, 3.25rem); line-height:1.03;
letter-spacing:-.022em; margin:0 0 18px; max-width:15ch;
}
.cn-top .sec-sub{ max-width:52ch; }
/* ------------------------------------------------- el expediente ------ */
.exp{
position:relative; background:var(--paper); border:1px solid var(--line);
border-radius:var(--r); padding:24px 26px 22px;
/* dos hojas mas debajo, dibujadas con sombras: el legajo */
box-shadow:
8px 8px 0 -1px var(--paper), 8px 8px 0 0 var(--line),
16px 16px 0 -1px var(--paper), 16px 16px 0 0 var(--line),
0 22px 50px rgba(16,27,42,.16);
}
.exp-t{
display:flex; justify-content:space-between; align-items:baseline; gap:14px;
margin:0 0 16px; padding-bottom:13px; border-bottom:1px solid var(--line);
font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase;
}
.exp-t span:first-child{ color:var(--ink); }
.exp-t span:last-child{ color:var(--clay); }
.exp-l{ list-style:none; margin:0; padding:0; }
.exp-l li{
display:grid; grid-template-columns:30px 1fr; align-items:baseline; gap:0 4px;
padding:8px 0; border-bottom:1px dashed var(--line);
}
.exp-l li:last-child{ border-bottom:0; padding-bottom:0; }
.exp-l .n{
font-family:var(--mono); font-size:11px; color:var(--clay); letter-spacing:.06em;
}
.exp-l .d{ font-size:15px; color:var(--ink); line-height:1.35; }
@media (max-width:900px){
.cn-foto{ left:0; bottom:auto; height:200px; }
.cn-foto::after{
background:linear-gradient(180deg, rgba(16,27,42,.14) 0%,
rgba(252,250,246,0) 46%, var(--bg) 97%);
}
.cn-top{ padding-top:224px; }
.cn-hero{ grid-template-columns:1fr; gap:30px; padding-bottom:44px; }
.cn-top h1{ max-width:none; }
.exp{ box-shadow:6px 6px 0 -1px var(--paper), 6px 6px 0 0 var(--line),
0 14px 32px rgba(16,27,42,.12); }
}
/* ------------------------------------------------------- el riel ------ */
.riel-marco{
background:var(--paper); border-top:1px solid var(--line);
border-bottom:1px solid var(--line); padding:32px 0 30px; margin-top:34px;
}
.riel-ayuda{
display:none; margin:0 0 20px; font-family:var(--mono); font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.riel-ayuda::before{
content:""; display:inline-block; width:14px; height:1px; background:var(--clay);
vertical-align:middle; margin-right:9px;
}
.riel-scroll{ margin:0 -4px; }
.riel{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ri{ position:relative; padding:0 4px; }
.ri-p{
display:block; width:11px; height:11px; border-radius:50%;
border:1px solid var(--clay); background:var(--paper); margin:0 0 12px;
transition:transform .2s, background .2s;
}
.ri.ser .ri-p{ background:var(--clay); }
.ri.ter .ri-p{ border-color:var(--line-2); }
.ri-n{
display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
color:var(--ink-3); margin:0 0 4px;
}
.ri-t{
display:block; font-size:16px; letter-spacing:-.01em; color:var(--ink);
line-height:1.2; margin:0 0 3px;
}
.ri-s{ display:block; font-size:13.4px; color:var(--ink-3); line-height:1.4; }
/* El detalle vive dentro de su estacion mientras nadie lo mueva: sin JS, y
en movil, la pagina se lee entera igual. */
.ri-d{
margin:12px 0 0; padding:16px 18px; background:var(--bg-3);
border:1px solid var(--line); border-left:2px solid var(--clay);
border-radius:8px;
}
.ri-q{
margin:0 0 8px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
text-transform:uppercase; color:var(--clay);
}
.ri-q.ter{ color:var(--ink-3); }
.ri-d h3{ margin:0 0 8px; font-size:17px; line-height:1.25; letter-spacing:-.012em; }
.ri-d p{ margin:0 0 9px; font-size:15px; color:var(--ink-2); line-height:1.55; }
.ri-r{ margin:0 !important; font-size:14.4px !important; color:var(--ink) !important; }
.ri-r b{ color:var(--clay); font-weight:600; }
.ri-pl{
display:block; margin-top:5px; font-family:var(--mono); font-size:11.5px;
color:var(--ink-3); line-height:1.5;
}
.riel-panel{ display:none; }
.riel-pie{
display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 0;
font-family:var(--mono); font-size:11px; letter-spacing:.09em;
text-transform:uppercase; color:var(--ink-3);
}
.rp{ display:flex; align-items:center; gap:9px; }
.rp::before{
content:""; width:10px; height:10px; border-radius:50%;
border:1px solid var(--clay); background:var(--clay);
}
.rp.ter::before{ background:var(--paper); border-color:var(--line-2); }
/* --- riel horizontal: solo cuando main.js ha movido los detalles --- */
@media (min-width:901px){
.riel-ayuda{ display:block; }
.riel.riel-on{
grid-template-columns:repeat(6, minmax(0,1fr)); gap:0;
position:relative; padding-top:5px;
}
.riel.riel-on .ri{ padding:0 22px 0 0; cursor:pointer; }
/* el hilo que une las seis estaciones */
.riel.riel-on .ri::before{
content:""; position:absolute; left:0; right:0; top:10px; height:1px;
background:var(--line-2);
}
.riel.riel-on .ri:last-child::before{ right:auto; width:11px; }
.riel.riel-on .ri-p{ position:relative; z-index:1; }
.riel.riel-on .ri:hover .ri-p,
.riel.riel-on .ri.on .ri-p{ transform:scale(1.45); }
.riel.riel-on .ri.on .ri-t{ color:var(--clay); }
.riel.riel-on .ri:focus-visible{ outline:2px solid var(--brand-2); outline-offset:4px; border-radius:6px; }
/* Una sola celda para las seis fichas: el panel mide lo que mide la mas
alta y nunca se solapa con la leyenda de abajo. */
.riel-panel{
display:grid; margin:26px 0 0;
border-top:1px solid var(--line); padding-top:24px;
}
.riel-panel .ri-d{
grid-area:1 / 1; margin:0; opacity:0; visibility:hidden;
background:transparent; border:0; border-left:2px solid var(--clay);
border-radius:0; padding:2px 0 2px 22px;
transition:opacity .22s ease, visibility .22s;
max-width:76ch;
}
.riel-panel .ri-d.on{ opacity:1; visibility:visible; }
.riel-panel .ri-d h3{ font-size:1.4rem; margin-bottom:10px; max-width:26ch; }
.riel-panel .ri-d p{ font-size:15.6px; max-width:66ch; }
}
/* ------------------------------------------- comparacion de formas ---- */
.formas{ min-width:940px; }
/* La tabla mide 940px. Por debajo de ~1010px no cabe entera y el lector no
tiene forma de saber que hay seis columnas: justo la mas util, la de
orientacion, es la que queda fuera de cuadro. El aviso sale solo cuando
la tabla desborda de verdad. */
.tabla-pista{ display:none; }
@media (max-width:1010px){
.tabla-pista{
display:block; margin:0 0 10px; font-family:var(--mono); font-size:10.5px;
font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--clay);
}
}
.formas th[scope="row"]{
font-family:var(--sans); font-size:15px; font-weight:600; text-transform:none;
letter-spacing:0; color:var(--ink); white-space:normal; vertical-align:top;
border-bottom:1px solid var(--line); background:var(--bg-3);
}
.formas th[scope="row"] b{ display:block; font-size:16.5px; letter-spacing:-.01em; }
.formas th[scope="row"] span{
display:block; margin-top:3px; font-family:var(--mono); font-size:10.5px;
line-height:1.45; color:var(--ink-3); letter-spacing:.02em; text-transform:none;
}
.formas td{ vertical-align:top; font-size:14.6px; line-height:1.5; color:var(--ink-2); }
/* La columna orientativa lleva su etiqueta en la propia cabecera, para que
nadie la lea como una recomendacion para su caso. */
.formas th .ori{
display:block; margin-top:4px; font-size:9.5px; letter-spacing:.09em;
color:var(--clay); text-transform:uppercase; font-weight:400;
}
.formas td.cn{
color:var(--ink); border-left:2px solid var(--clay); padding-left:18px;
background:rgba(164,85,43,.045);
}
.formas tbody tr:hover td.cn{ background:rgba(164,85,43,.075); }
.fuente-l{ line-height:1.6; }
/* --------------------------------------------------------- que incluye */
.paq{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.paq-b{ background:var(--paper); padding:26px 26px 28px; }
.paq-n{
margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
color:var(--clay);
}
.paq-b h3{ margin:0 0 14px; font-size:1.2rem; letter-spacing:-.012em; }
.paq-b ul{ list-style:none; margin:0; padding:0; }
.paq-b li{
position:relative; padding:0 0 0 18px; margin:0 0 9px; font-size:14.8px;
line-height:1.5; color:var(--ink-2);
}
.paq-b li:last-child{ margin-bottom:0; }
.paq-b li::before{
content:""; position:absolute; left:0; top:.68em; width:8px; height:1px;
background:var(--clay-2);
}
.acomp{
margin-top:20px; background:var(--bg-3); border:1px solid var(--line);
border-left:3px solid var(--clay); border-radius:var(--r); padding:22px 26px;
}
.acomp-t{
margin:0 0 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase; color:var(--clay);
}
.acomp-g{ display:grid; grid-template-columns:1fr 1fr; gap:10px 34px; }
.acomp-g p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }
.acomp-g b{ color:var(--ink); }
.acomp-n{ margin:14px 0 0; font-size:13.8px; color:var(--ink-3); line-height:1.55; }
@media (max-width:900px){
.paq{ grid-template-columns:1fr; }
.acomp-g{ grid-template-columns:1fr; }
}
/* ------------------------------------------------ de quien depende ---- */
.dep{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.dep-c{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
padding:26px 28px 28px; }
.dep-ser{ border-left:3px solid var(--clay); }
.dep-ter{ background:var(--bg-3); }
.dep-t{
margin:0 0 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3);
}
.dep-ser .dep-t{ color:var(--clay); }
.dep-c ul{ list-style:none; margin:0; padding:0; }
.dep-c li{
padding:11px 0; border-bottom:1px solid var(--line); font-size:15px;
line-height:1.5; color:var(--ink-2);
}
.dep-c li:last-child{ border-bottom:0; padding-bottom:0; }
.dep-c{ display:flex; flex-direction:column; }
.dep-c ul{ flex:1; }
.dep-p{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
font-size:14.4px; color:var(--clay); }
.dep-c li b{ color:var(--ink); }
.dep-c .pl{
display:block; margin-top:3px; font-family:var(--mono); font-size:11px;
color:var(--ink-3); letter-spacing:.02em;
}
@media (max-width:820px){ .dep{ grid-template-columns:1fr; } }
/* ------------------------------------------ inscrita / lista para operar */
.est{ display:grid; grid-template-columns:.82fr 1.18fr; gap:22px; align-items:start; }
.est-c{ border:1px solid var(--line); border-radius:var(--r); padding:26px 28px 26px; }
.est-a{ background:var(--bg-3); }
.est-b{ background:var(--paper); border-left:3px solid var(--clay);
box-shadow:0 12px 34px rgba(16,27,42,.07); }
.est-t{
margin:0 0 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3);
}
.est-b .est-t{ color:var(--clay); }
.est-c ul{ list-style:none; margin:0 0 16px; padding:0; }
.est-c li{
position:relative; padding:0 0 0 24px; margin:0 0 10px; font-size:15px;
line-height:1.5; color:var(--ink-2);
}
.est-a li::before{
content:""; position:absolute; left:0; top:.72em; width:11px; height:1px;
background:var(--line-2);
}
.est-b li::before{
content:"\2713"; position:absolute; left:0; top:0; color:var(--clay);
font-size:13px; line-height:1.6;
}
.est-c{ display:flex; flex-direction:column; }
.est-c ul{ flex:1; }
.est-p{ margin:0; padding-top:14px; border-top:1px solid var(--line);
font-size:14.4px; color:var(--ink-3); }
.est-b .est-p{ color:var(--ink); }
@media (max-width:820px){ .est{ grid-template-columns:1fr; } }
/* ------------------------------------------------------- el puente ---- */
.sig{ max-width:660px; padding:12px 0 6px; }
.sig h2{ font-size:clamp(1.5rem,1.15rem + 1.1vw,2rem); margin:0 0 14px; }
.sig p{ font-size:16.5px; color:var(--ink-2); line-height:1.62; margin:0 0 16px; }
.sig-l{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap;
gap:8px 10px; }
.sig-l li{
font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--ink-3);
border:1px solid var(--line-2); border-radius:999px; padding:6px 13px;
}
.sig-e{ font-size:15.4px !important; color:var(--ink-3) !important; margin:0 !important; }
/* ------------------------------------------------------ objeciones ---- */
.obj{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.obj article{ background:var(--paper); padding:26px 26px 28px; }
.obj-n{
margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
color:var(--clay);
}
.obj h3{ margin:0 0 10px; font-size:1.12rem; line-height:1.28; letter-spacing:-.01em; }
.obj p{ margin:0; font-size:14.8px; line-height:1.6; color:var(--ink-2); }
.obj b{ color:var(--ink); font-weight:600; }
@media (max-width:900px){ .obj{ grid-template-columns:1fr; } }
/* ------------------------------------- el desplegable del formulario -- */
.f select{
/* width:100% y min-width:0 no son decorativos: sin ellos el texto de la
opcion mas larga fija el ancho minimo del , y ese minimo sube por
la rejilla del formulario hasta desbordar la pagina en pantallas de 360px.
Se vio en la landing de planillas, cuyas opciones son mas largas. */
width:100%; min-width:0;
font-family:var(--sans); font-size:15.5px; color:var(--ink); padding:11px 36px 11px 13px;
border:1px solid var(--line-2); border-radius:8px; background-color:var(--bg);
transition:border-color .18s, background-color .18s; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C6875' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center;
}
.f select:focus{ outline:none; border-color:var(--brand-2); background-color:#fff; }
@media (prefers-reduced-motion: reduce){
.ri-p,.riel-panel .ri-d,.formas td.cn{ transition:none !important; }
.riel.riel-on .ri:hover .ri-p,
.riel.riel-on .ri.on .ri-p{ transform:none !important; }
}
/* ==========================================================================
PAGINA DE PLANILLAS Y GESTION LABORAL
--------------------------------------------------------------------------
Tercera metafora del sitio, y la mas distinta de las tres:
Contabilidad = el calendario -> el mes que vuelve
Constitucion = el expediente -> uno que avanza por seis estaciones
Planillas = el reloj -> cuatro relojes que arrancan por su cuenta
Por eso aqui NO hay linea ni numeracion: hay una cuadricula. Las cuatro
situaciones de una planilla no pasan en orden ni una sola vez, y la forma
tenia que decir eso antes de que se lea una palabra.
========================================================================== */
/* --- El encabezado. Texto a la izquierda y, al lado, la ficha de un alta.
Ni banda cenital (Constitucion) ni panel de escenas (contable). --- */
.pl-top{ padding-top:26px; }
.pl-hero{ display:grid; gap:clamp(26px, 4vw, 52px); align-items:start; }
.pl-txt .lead{
font-size:clamp(16.5px, 1.6vw, 18.5px); color:var(--ink-2);
line-height:1.65; max-width:56ch; margin:0 0 22px;
}
/* --- La ficha del alta: tres plazos reales, en orden de urgencia. Se lee
como un recibo, con filete terracota a la izquierda de cada linea. --- */
.pl-ficha{
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
padding:22px 24px 18px;
box-shadow:0 26px 60px -50px rgba(18,69,127,.55);
}
.pl-ft{
display:flex; flex-direction:column; gap:2px; margin:0 0 18px;
padding-bottom:14px; border-bottom:1px solid var(--line);
}
.pl-ft span:first-child{
font-family:var(--mono); font-size:10.5px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--clay);
}
.pl-ft span:last-child{ font-size:15px; color:var(--ink-3); }
.pl-fl{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.pl-fl li{ padding-left:14px; border-left:2px solid var(--clay-2); }
.pl-c{
display:block; font-family:var(--mono); font-size:10.5px; font-weight:500;
letter-spacing:.12em; text-transform:uppercase; color:var(--clay); margin:0 0 3px;
}
.pl-d{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.pl-n{ display:block; font-size:13.5px; color:var(--ink-3); line-height:1.5; margin-top:3px; }
.pl-fn{
margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
font-size:13px; color:var(--ink-3);
}
@media (min-width:901px){
.pl-hero{ grid-template-columns:1.25fr .75fr; }
.pl-top{ padding-top:34px; }
}
/* --- El reloj: cuadricula de cuatro situaciones + un panel compartido.
La diferencia con el riel no es decorativa. Alli las estaciones van
numeradas y en linea porque hay un orden; aqui no lo hay, asi que van
en rejilla y sin numero. --- */
.rl-marco{ margin-top:26px; }
.rl-ayuda{
margin:0 0 14px; font-family:var(--mono); font-size:10.5px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.rl{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.rl-i{
position:relative; padding:18px 20px;
background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
transition:border-color .22s, box-shadow .22s, transform .22s;
}
.rl-k{
display:block; width:9px; height:9px; border-radius:50%;
background:var(--paper); border:1.5px solid var(--clay-2); margin:0 0 12px;
transition:background .22s, transform .22s;
}
.rl-t{ display:block; font-size:17px; font-weight:600; color:var(--ink); line-height:1.25; }
.rl-s{ display:block; font-size:13.5px; color:var(--ink-3); margin-top:3px; }
/* El detalle vive dentro de la tarjeta mientras no haya panel (movil y
sin JavaScript). Ahi se lee entero, uno tras otro. */
.rl-d{
margin:14px 0 0; padding:16px 18px; background:var(--bg-3);
border-left:2px solid var(--clay); border-radius:8px;
}
.rl-d h3{ margin:0 0 8px; font-size:17px; line-height:1.25; letter-spacing:-.012em; }
.rl-d p{ margin:0 0 9px; font-size:15px; color:var(--ink-2); line-height:1.55; }
.rl-d p:last-child{ margin-bottom:0; }
.rl-q{
font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.12em;
text-transform:uppercase; color:var(--clay) !important;
}
.rl-r{ color:var(--ink) !important; }
.rl-r b{ color:var(--clay); }
.rl-panel{ display:none; }
@media (min-width:901px){
.rl{ grid-template-columns:repeat(2, 1fr); gap:16px; }
/* Con panel, la tarjeta es solo el titulo: el detalle se mueve abajo. */
.rl-i{ cursor:default; }
.rl.rl-on .rl-i{ padding:20px 22px; }
.rl.rl-on .rl-i:hover,
.rl.rl-on .rl-i.on{
border-color:var(--clay-2);
box-shadow:0 20px 44px -38px rgba(18,69,127,.6);
}
.rl.rl-on .rl-i.on .rl-k{ background:var(--clay); transform:scale(1.15); }
.rl.rl-on .rl-i:focus-visible{ outline:2px solid var(--brand-2); outline-offset:4px; border-radius:var(--r); }
.rl-panel{
display:grid; margin:24px 0 0;
border-top:1px solid var(--line); padding-top:24px;
}
.rl-panel .rl-d{
grid-area:1 / 1; margin:0; background:transparent; border-radius:0;
border-left:2px solid var(--clay); padding:2px 0 2px 22px;
opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
max-width:76ch;
}
.rl-panel .rl-d.on{ opacity:1; visibility:visible; }
.rl-panel .rl-d h3{ font-size:1.4rem; margin-bottom:10px; max-width:26ch; }
.rl-panel .rl-d p{ font-size:15.6px; max-width:66ch; }
}
@media (prefers-reduced-motion: reduce){
.rl-i, .rl-k, .rl-panel .rl-d{ transition:none !important; }
}