/* Kycevo Technologies — sitio oficial
Paleta y tipografía: kycevo-brand / references/visual-identity.md
Movimiento: conservado del diseño original por decisión del owner de marca.
Ver README.md § Excepción de marca registrada. */
/* ------------------------------------------------------------------ fuentes
IBM Plex auto-hospedada. No se carga nada de fonts.googleapis.com ni de
fonts.gstatic.com: el Aviso de Privacidad declara que el sitio no recaba
datos de navegación, y un tercero sirviendo las fuentes recibe la IP de cada
visitante. Ver LICENCIAS.md § 1.
Los archivos los copia tools/fonts.mjs desde los paquetes de IBM. Añadir un
peso aquí exige añadirlo también allá, o cae a la fuente del sistema.
Los unicode-range son los que define IBM para sus propios subsets. Latin1
cubre español e inglés; Pi aporta las flechas — el único carácter del
contenido fuera de Latin1 es ↓ en la señal de scroll, compuesta en Mono. */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('assets/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/IBMPlexSerif-Regular-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/IBMPlexSerif-LightItalic-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/IBMPlexMono-Regular-Pi.woff2') format('woff2');
unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}
:root {
/* Primario y acento */
--graphite: #16181A;
--blueprint: #1F4FD8;
/* Neutros de apoyo */
--carbon: #2A2E33;
--slate: #3C4147;
--mist: #6B7076;
--rule: #DCDCD8;
--paper: #E8E8E6;
--ground: #FFFFFF;
/* Estados y superficies oscuras */
--deep: #0F2A7A;
--dark: #163AA0;
--wash: #EEF1FC;
--ink: #0E1013;
--panel: #1A1D20;
--edge: #2F3439;
--chalk: #C9CED3;
--sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
--serif: 'IBM Plex Serif', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--gutter: clamp(24px, 8vw, 120px);
--hdr-h: 72px;
--ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; }
body {
margin: 0;
background: var(--graphite);
color: var(--graphite);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
a { color: var(--blueprint); text-decoration: none; }
a:hover { color: var(--dark); }
/* Un enlace a una pagina borrada, despublicada o privada sale sin href
(nucleo/wagtail_hooks.py: EnlaceAPagina): no debe parecer clicable. */
a:not([href]), a:not([href]):hover { color: inherit; }
::selection { background: var(--blueprint); color: var(--ground); }
img, svg { max-width: 100%; }
section[id], div[id] { scroll-margin-top: 104px; }
/* Radio 0 en todas partes; 2 px sólo en controles interactivos (visual-identity.md) */
button, input, select { border-radius: 0; font: inherit; }
:focus-visible {
outline: 2px solid var(--blueprint);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ground);
color: var(--graphite);
padding: 12px 16px;
font-size: 15px;
line-height: 24px;
}
.skip-link:focus {
left: 0;
color: var(--graphite);
}
/* ---------------------------------------------------------------- tipografía */
/* El peso se fija a proposito. Cuando la etiqueta es un encabezado —los
titulos de columna del pie son —, el navegador la pondria
en negrita, y Plex Mono solo se carga en 400: saldria una negrita
sintetica. La marca pide Mono 400/500 y nunca en negrita. */
.eyebrow,
.note,
.label {
font-family: var(--mono);
font-size: 11px;
font-weight: 400;
line-height: 19px;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0;
}
.eyebrow { margin-bottom: 16px; }
/* Pie de un bloque (las tarjetas, la lista de fases). Las tarjetas tienen 28 px
de padding inferior: por debajo de eso el pie lee como parte del bloque en vez
de como nota al pie. 32 es el primer paso de la escala que lo despega. */
.note { margin-top: 32px; }
.on-light .eyebrow, .on-light .note, .on-light .label { color: var(--mist); }
.on-dark .eyebrow, .on-dark .note, .on-dark .label { color: var(--chalk); }
.h1-display {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.06;
letter-spacing: -.02em;
color: var(--ground);
text-wrap: pretty;
}
.h2-lg,
.h2-med {
margin: 0;
font-family: var(--serif);
font-weight: 400;
text-wrap: pretty;
}
.h2-lg { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.h2-med { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.14; letter-spacing: -.01em; }
.on-light .h2-lg, .on-light .h2-med { color: var(--graphite); }
.on-dark .h2-lg, .on-dark .h2-med { color: var(--ground); }
.body-lg { font-size: 18px; line-height: 29px; text-wrap: pretty; }
.body { font-size: 15px; line-height: 24px; }
.on-light .body-lg, .on-light .body { color: var(--slate); }
.on-dark .body-lg, .on-dark .body { color: var(--chalk); }
.measure { max-width: 62ch; }
.rule-accent {
height: 2px;
width: 96px;
background: var(--blueprint);
transform-origin: left;
}
/* ---------------------------------------------------------------- estructura */
.section { padding: clamp(80px, 10vw, 128px) var(--gutter); }
.section--light { background: var(--ground); }
.section--dark { background: var(--graphite); }
.container { max-width: 1200px; margin: 0 auto; }
.split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 48px 64px;
align-items: start;
}
/* ------------------------------------------------------- barra de progreso */
.progress-track {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: transparent;
z-index: 50;
}
.progress-bar { height: 2px; width: 0%; background: var(--blueprint); }
/* ------------------------------------------------------------------ header */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px clamp(20px, 6vw, 120px);
background: var(--graphite);
border-bottom: 1px solid var(--edge);
}
/* Sin animacion de entrada, y no es por gusto.
Los 2.2s de retraso que habia aqui estaban calculados para la portada, donde
la cabecera entra despues del simbolo del heroe. Pero esta regla aplica a
TODAS las paginas: en el blog, en un servicio o en un documento legal, la
barra de navegacion se quedaba invisible mas de dos segundos y el contenido
se deslizaba debajo cuando por fin aparecia.
Ademas la marca fija el movimiento en 200ms para un revelado y prohibe pasar
de 400ms. 2.2s + .8s no es una animacion lenta: es otra cosa. */
.logo-link { display: block; line-height: 0; }
.logo { width: 132px; height: auto; display: block; }
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
.nav {
display: flex;
align-items: center;
gap: 28px;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
}
.nav a { color: var(--chalk); }
.nav a:hover { color: var(--ground); }
.lang-switch { display: flex; border: 1px solid var(--edge); flex: none; }
.lang-btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border: none;
background: transparent;
color: var(--chalk);
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
cursor: pointer;
}
.lang-btn:hover { color: var(--ground); }
.lang-btn[aria-current='true'] { background: var(--blueprint); color: var(--ground); }
.burger {
display: none;
width: 44px; height: 44px;
flex: none;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--edge);
cursor: pointer;
padding: 0;
}
.burger-bars { display: grid; gap: 5px; width: 18px; }
.burger-bars span { display: block; height: 1.5px; background: var(--ground); }
/* -------------------------------------------------------------------- hero */
.hero {
position: relative;
min-height: 100vh;
background: var(--graphite);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
padding-top: 96px;
}
.hero-registry {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(40px, 6vw, 96px);
align-items: center;
padding: clamp(48px, 7vh, 96px) var(--gutter);
}
.hero-copy { max-width: 60ch; }
.hero-copy .eyebrow { margin-bottom: 20px; animation: k-fade .8s 1.45s both; }
.hero-copy .rule-accent { animation: k-rule .7s 1.55s both var(--ease); margin-bottom: 28px; }
.hero-copy .h1-display { animation: k-fade 1s 1.65s both; }
.hero-body { margin: 32px 0 0; max-width: 58ch; animation: k-fade 1s 1.85s both; }
.hero-cta-wrap { margin: 32px 0 0; font-size: 18px; line-height: 29px; animation: k-fade 1s 2.05s both; }
.hero-cta {
color: var(--ground);
border-bottom: 2px solid var(--blueprint);
padding-bottom: 3px;
}
.hero-cta:hover { color: var(--blueprint); }
.hero-symbol-wrap { display: flex; justify-content: center; align-items: center; }
.hero-symbol { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.hero-foot {
position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
padding: 0 var(--gutter) 32px;
animation: k-fade .8s 2.5s both;
}
.hero-foot .label { color: var(--chalk); }
/* ---------------------------------------------------------- 02 · tarjetas */
.cards {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.card {
background: var(--ground);
border: 1px solid var(--graphite);
padding: 20px 20px 28px;
}
.card:hover { background: var(--wash); }
.card--dark { background: var(--graphite); }
.card--dark:hover { background: var(--graphite); }
.card-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 12px;
}
.card--dark .card-label { color: var(--chalk); }
.card-value { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--graphite); }
.card--dark .card-value { color: var(--ground); }
/* --------------------------------------------------- 03 · Business Units */
.units-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.units-head .h2-lg { max-width: 24ch; }
.tabs { display: flex; gap: 16px; align-items: center; }
.tab {
height: 44px;
padding: 0 20px;
background: transparent;
font-family: var(--sans);
font-size: 15px;
line-height: 24px;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--edge);
color: var(--chalk);
}
.tab:hover { border-color: var(--ground); }
.tab[aria-selected='true'] {
border-color: var(--blueprint);
background: var(--blueprint);
color: var(--ground);
}
.unit-panel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1px;
background: var(--edge);
border: 1px solid var(--edge);
}
.unit-panel[hidden] { display: none; }
.unit-about { background: var(--panel); padding: 32px clamp(20px, 3vw, 40px) 40px; }
.unit-index { margin-bottom: 12px; }
.unit-name { margin: 0; font-size: 23px; line-height: 30px; font-weight: 600; color: var(--ground); }
.unit-tagline {
margin: 8px 0 24px;
font-family: var(--serif);
font-weight: 300;
font-style: italic;
font-size: 18px;
line-height: 29px;
color: var(--ground);
border-left: 2px solid var(--blueprint);
padding-left: 14px;
}
.unit-body { margin: 0; max-width: 52ch; }
.unit-method { margin-top: 24px; }
.unit-services { background: var(--graphite); padding: 32px clamp(20px, 3vw, 40px) 40px; }
.unit-services .label { margin-bottom: 16px; }
.services-list { margin: 0; padding: 0; list-style: none; display: grid; }
.service {
border-top: 1px solid var(--edge);
padding: 12px 0;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
display: flex;
gap: 16px;
}
.service:hover { color: var(--ground); }
.service-n {
font-family: var(--mono);
font-size: 11px;
line-height: 24px;
letter-spacing: .14em;
color: var(--chalk);
}
/* ------------------------------------------------ 04 · Delivery Framework */
.framework-head { margin-bottom: 56px; }
.framework-head .h2-med { margin-bottom: 20px; max-width: 26ch; }
.framework-list { border-top: 2px solid var(--graphite); }
.fw-row {
border-bottom: 1px solid var(--rule);
padding: 20px 0;
display: grid;
grid-template-columns: minmax(200px, .8fr) 2fr;
gap: 24px;
align-items: baseline;
}
.fw-row:hover { background: var(--wash); }
.fw-head { display: flex; gap: 16px; align-items: baseline; }
.fw-n {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
color: var(--blueprint);
}
.fw-phase { font-size: 18px; line-height: 29px; font-weight: 500; color: var(--graphite); }
.fw-stages { font-size: 15px; line-height: 24px; color: var(--slate); }
/* --------------------------------------------------- 05 · Diferenciador */
.problems { margin: 0; padding: 0; list-style: none; display: grid; border-bottom: 1px solid var(--edge); }
.problem {
border-top: 1px solid var(--edge);
padding: 16px 0;
font-size: 18px;
line-height: 29px;
color: var(--chalk);
}
.problem:hover { color: var(--ground); }
/* ------------------------------------------------------- 06 · Clientes */
.client-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 48px 64px;
}
.client-label {
margin-bottom: 16px;
border-bottom: 1px solid var(--graphite);
padding-bottom: 8px;
}
/* ------------------------------------------------------- 07 · Contacto */
.contact {
position: relative;
background: var(--graphite);
padding: clamp(80px, 10vw, 128px) var(--gutter) 48px;
overflow: hidden;
}
.contact-ghost {
position: absolute;
right: -6%;
top: 12%;
width: min(46vw, 620px);
height: auto;
opacity: .06;
pointer-events: none;
will-change: transform;
}
.contact-inner { position: relative; }
.form-legend {
margin-bottom: 24px;
border-bottom: 1px solid var(--edge);
padding-bottom: 8px;
}
.contact-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.field { display: grid; gap: 8px; }
.input, .select {
height: 48px;
padding: 0 12px;
background: var(--panel);
border: 1px solid var(--edge);
color: var(--ground);
font-family: var(--sans);
font-size: 15px;
line-height: 24px;
outline: none;
}
.input:focus, .select:focus { border-color: var(--blueprint); }
.select { appearance: none; background-image: none; }
/* Honeypot: invisible para personas, presente para bots */
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.btn-primary {
height: 48px;
padding: 0 28px;
background: var(--blueprint);
border: none;
color: var(--ground);
font-family: var(--sans);
font-size: 15px;
line-height: 24px;
font-weight: 500;
cursor: pointer;
}
.btn-primary:hover { background: var(--dark); }
.btn-primary:active { background: var(--deep); }
.btn-primary[disabled] { opacity: .6; cursor: default; }
.form-status { border-left: 2px solid var(--blueprint); padding: 16px 0 16px 16px; }
.form-status p { margin: 0; font-size: 18px; line-height: 29px; color: var(--ground); }
.form-status[hidden] { display: none; }
.form-status--error { border-left-color: var(--edge); }
/* Aviso simplificado. Va junto al formulario y en el pie, por handoff § 2.
Ocupa el ancho completo de la retícula del formulario: es una declaración,
no un campo. */
.privacy-short {
grid-column: 1 / -1;
margin: 8px 0 0;
max-width: 68ch;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
}
.privacy-short a { color: var(--ground); border-bottom: 1px solid var(--chalk); }
.privacy-short a:hover { color: var(--ground); border-bottom-color: var(--ground); }
/* Marca de campo obligatorio. En Ground, no en Blueprint: seis asteriscos en
azul agotarían el presupuesto de acento de la sección. */
.req {
color: var(--ground);
margin-left: 2px;
}
.required-note {
grid-column: 1 / -1;
margin: 0;
font-family: var(--mono);
font-size: 11px;
line-height: 19px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mist);
}
/* Casilla de consentimiento. Sin premarcar y obligatoria: el navegador bloquea
el envío si no se marca, y app.js no llega siquiera a construir el payload. */
.consent {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
cursor: pointer;
}
.consent input[type='checkbox'] {
width: 20px;
height: 20px;
margin: 2px 0 0;
flex: none;
accent-color: var(--blueprint);
cursor: pointer;
}
.consent a { color: var(--ground); border-bottom: 1px solid var(--blueprint); }
.consent a:hover { color: var(--blueprint); }
/* --------------------------------------------- documento legal (/aviso...) */
.doc-body { background: var(--ground); color: var(--graphite); }
.doc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px var(--gutter);
border-bottom: 1px solid var(--rule);
}
.doc-header img { width: 132px; height: auto; display: block; }
.doc-back { color: var(--mist); }
.doc-back:hover { color: var(--graphite); }
.doc { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 128px); }
/* Medida 62–74 caracteres (visual-identity.md § retícula). */
.doc-article { max-width: 72ch; margin: 0 auto; }
.doc-h1 {
margin: 0 0 48px;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.015em;
color: var(--graphite);
}
.doc-h2 {
margin: 48px 0 16px;
font-family: var(--sans);
font-weight: 600;
font-size: 23px;
line-height: 30px;
color: var(--graphite);
text-wrap: pretty;
}
.doc-p {
margin: 0 0 16px;
font-size: 18px;
line-height: 29px;
color: var(--slate);
text-wrap: pretty;
}
.doc-list { margin: 0 0 16px; padding: 0 0 0 20px; }
.doc-list li { margin-bottom: 8px; font-size: 18px; line-height: 29px; color: var(--slate); }
.doc-list li strong { color: var(--graphite); font-weight: 500; }
/* Los incisos llevan su propia letra: sin viñeta y sin sangría de lista. */
.doc-list--incisos { list-style: none; padding-left: 0; }
.doc-list--incisos li { margin-bottom: 4px; }
.doc-rule { margin: 48px 0 24px; border: 0; border-top: 1px solid var(--rule); }
.doc-article a { color: var(--blueprint); }
.doc-article a:hover { color: var(--dark); }
.doc-rule + .doc-p { font-family: var(--mono); font-size: 11px; line-height: 19px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
/* ---------------------------------------------------------------- reveals */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal='left'] { transform: translateX(-28px); }
[data-reveal='right'] { transform: translateX(28px); }
[data-reveal='rule'] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-stagger] > * {
opacity: 0;
transform: translateY(14px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
/* ------------------------------------------------------------- animaciones */
#kdatum, #kmember-1, #kmember-2, #kmember-3, #kmember-4, #kmember-5 { transform-box: view-box; }
#kdatum { animation: k-datum 1.1s .1s both var(--ease); }
#kmember-1 { animation: k-m1 1s .5s both var(--ease); }
#kmember-2 { animation: k-m2 1s .64s both var(--ease); }
#kmember-3 { animation: k-m3 1s .78s both var(--ease); }
#kmember-4 { animation: k-m4 1s .92s both var(--ease); }
#kmember-5 { animation: k-m5 1.1s 1.06s both var(--ease); }
@keyframes k-datum { from { transform: translateY(2500px); } to { transform: none; } }
@keyframes k-m1 { from { transform: translate(1500px, -1100px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-m2 { from { transform: translate(-1700px, -500px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-m3 { from { transform: translate(-2100px, 260px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-m4 { from { transform: translate(1900px, 620px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-m5 { from { transform: translate(1700px, 1500px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes k-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes k-fade-flat { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-rise-s { from { transform: translateY(700px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-set { from { transform: translate(300px, -120px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ------------------------------------------------------------ breakpoints */
@media (max-width: 1180px) {
.nav { gap: 20px; font-size: 14px; }
}
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-symbol { max-width: 300px; }
}
@media (max-width: 980px) {
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.hero-symbol { overflow: hidden; }
.hero-copy .eyebrow,
.hero-copy .rule-accent,
.hero-copy .h1-display,
.hero-body,
.hero-cta-wrap,
.hero-foot,
/* .logo-link y .header-right ya no se animan: ver la nota en su regla. */
#kdatum { animation: k-rise-s .55s 0s both var(--ease); }
#kmember-1 { animation: k-set .5s .16s both var(--ease); }
#kmember-2 { animation: k-set .5s .26s both var(--ease); }
#kmember-3 { animation: k-set .5s .36s both var(--ease); }
#kmember-4 { animation: k-set .5s .46s both var(--ease); }
#kmember-5 { animation: k-set .55s .56s both var(--ease); }
.logo { width: 104px; }
.burger { display: flex; }
.nav {
display: none;
position: fixed;
top: var(--hdr-h, 72px);
left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--graphite);
border-bottom: 1px solid var(--edge);
padding: 0 0 8px;
font-size: 17px;
}
.nav.is-open { display: flex; }
.nav > a { padding: 16px clamp(20px, 6vw, 120px); border-top: 1px solid var(--edge); }
.hero { padding-top: calc(var(--hdr-h, 72px) + 32px); }
section[id], div[id] { scroll-margin-top: calc(var(--hdr-h, 72px) + 8px); }
.units-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
.fw-row { grid-template-columns: 1fr; gap: 6px; }
.hero-foot { flex-direction: column; gap: 8px; }
.hero-symbol { max-width: 200px; }
}
@media (max-height: 560px) and (orientation: landscape) {
.hero { min-height: 0; padding-bottom: 40px; }
.hero-symbol { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
#kdatum, #kmember-1, #kmember-2, #kmember-3, #kmember-4, #kmember-5,
.hero-copy .eyebrow, .hero-copy .rule-accent, .hero-copy .h1-display,
.hero-body, .hero-cta-wrap, .hero-foot {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
[data-reveal], [data-stagger] > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.contact-ghost, [data-parallax] { transform: none !important; }
html { scroll-behavior: auto; }
}
/* Cabecera de los documentos legales: selector de idioma y vuelta al sitio. */
.doc-header-right { display: flex; align-items: center; gap: 16px; }
/* ------------------------------------------------------------------ blog y FAQ
Los bloques con los que se escribe un articulo. Se apoyan en la tipografia
del documento legal —.doc-article, .doc-p— que ya estaba resuelta: un texto
largo para leer es el mismo problema, lo diga la ley o lo digamos nosotros. */
/* El ancho lo fija el contenedor, no cada bloque. Si cada uno usa 72ch, la
cita —que va en cuerpo mayor— sale mas ancha que el texto y nada alinea:
ch depende del tamano de letra. */
.articulo-cuerpo { max-width: 72ch; margin: 0 auto; }
.articulo-cuerpo > * { max-width: none; margin-left: 0; margin-right: 0; }
.articulo-texto { margin: 0 0 24px; }
.articulo-texto h2 { font-family: var(--serif); font-size: 30px; line-height: 38px; color: var(--graphite); margin: 48px 0 16px; }
.articulo-texto h3 { font-size: 21px; line-height: 30px; color: var(--graphite); margin: 32px 0 12px; font-weight: 500; }
.articulo-texto p { font-size: 18px; line-height: 29px; color: var(--slate); margin: 0 0 16px; }
.articulo-texto ul, .articulo-texto ol { margin: 0 0 16px; padding-left: 20px; }
.articulo-texto li { font-size: 18px; line-height: 29px; color: var(--slate); margin-bottom: 8px; }
.articulo-texto a { color: var(--blueprint); }
.articulo-texto hr { margin: 48px 0; border: 0; border-top: 1px solid var(--rule); }
.articulo-cita { margin: 48px 0; padding-left: 24px; border-left: 2px solid var(--blueprint); }
.articulo-cita p { font-family: var(--serif); font-size: 24px; line-height: 34px; color: var(--graphite); margin: 0; }
.articulo-cita cite { display: block; margin-top: 12px; font-style: normal; color: var(--mist); }
.articulo-destacado { margin: 48px 0; font-family: var(--serif); font-size: 26px; line-height: 36px; color: var(--graphite); }
/* La imagen si se sale del ancho de lectura: es lo unico que gana al verse
grande. */
.articulo-figura { margin: 48px calc((72ch - 100%) / 2); }
.articulo-figura img { width: 100%; height: auto; display: block; }
.articulo-figura figcaption { margin-top: 12px; color: var(--mist); }
.articulo-autor { margin: 64px 0 0; }
.paginacion { display: flex; gap: 24px; align-items: center; }
.paginacion a { color: var(--blueprint); }
/* ------------------------------------------------------------------ servicios
Nada de tarjetas. La marca lo dice explicitamente: sin contenedores tipo
tarjeta alrededor de contenido que una regla puede separar. Lo que ordena
estas paginas son reglas, numeros Mono y espacio. */
/* El registro: una lista de filas abierta por una regla de 2 px. Se usa aqui,
y lo van a usar los indices de blog y de preguntas frecuentes. Por eso los
nombres no dicen «servicio». */
.registro {
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid var(--graphite);
}
.reg-fila {
display: grid;
grid-template-columns: 64px 1fr;
gap: 8px 24px;
align-items: baseline;
border-bottom: 1px solid var(--rule);
/* El relleno lateral es lo que deja respirar al fondo del hover; el margen
negativo lo devuelve a la retcula para que las reglas sigan alineadas. */
padding: 24px 16px;
margin-inline: -16px;
transition: background .12s cubic-bezier(.2, 0, 0, 1);
}
.reg-fila:hover { background: var(--wash); }
.reg-marca {
font-family: var(--mono);
font-size: 11px;
line-height: 19px;
letter-spacing: .14em;
color: var(--mist);
}
.reg-texto { display: grid; gap: 6px; }
.reg-titulo {
font-size: 18px;
line-height: 29px;
font-weight: 500;
color: var(--graphite);
}
.reg-fila:hover .reg-titulo { color: var(--blueprint); }
.reg-cuerpo { font-size: 15px; line-height: 24px; color: var(--slate); max-width: 68ch; }
/* La apertura de una pagina de servicio: B · POSICION de la marca, anclada
arriba a la izquierda y con medida corta. */
.serv-apertura { padding-bottom: clamp(40px, 5vw, 64px); }
.serv-migas { display: flex; gap: 8px; margin-bottom: clamp(40px, 6vw, 64px); }
.serv-migas a { color: var(--mist); }
.serv-migas a:hover { color: var(--graphite); }
.serv-apertura-cuerpo { max-width: 74ch; }
.serv-apertura-cuerpo .rule-accent { margin-bottom: 28px; }
/* Serif 400, la voz del negocio. Por debajo de la Display de la portada: la
portada abre el sitio, esto abre una pagina. */
.h1-serv {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.08;
letter-spacing: -.015em;
color: var(--graphite);
margin: 0;
max-width: 20ch;
}
.serv-resumen { margin: 24px 0 0; max-width: 66ch; }
.serv-cuerpo-seccion { padding-top: 0; }
.serv-cuerpo > *:first-child { margin-top: 0; }
/* La clausula: referencia Mono en columna angosta junto al texto. */
.serv-puntos, .serv-fases { margin: 56px 0; }
.serv-puntos-titulo {
font-family: var(--serif);
font-weight: 400;
font-size: 31px;
line-height: 37px;
color: var(--graphite);
margin: 0 0 24px;
max-width: 24ch;
}
.serv-puntos-lista {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--rule);
}
.serv-punto {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--rule);
}
/* Mist, no Blueprint. Son metadatos: ordenan la lista, no senalan nada. Cinco
numeros azules se comen el presupuesto de acento de la pagina entera —la
marca permite tres apariciones por superficie— y el azul deja de significar
nada. Aqui se gasta en la regla que abre, en la ultima fase y en el boton. */
.serv-punto-n {
font-family: var(--mono);
font-size: 11px;
line-height: 29px;
letter-spacing: .14em;
color: var(--mist);
}
.serv-punto-texto { font-size: 18px; line-height: 29px; color: var(--graphite); }
.serv-punto-detalle { display: block; font-size: 15px; line-height: 24px; color: var(--slate); }
/* La terraza: miembros de igual profundidad desplazados un incremento
constante, tomados de la marca. Una vez por superficie, y el modelo lo
limita a un bloque por pagina. El desplazamiento se apaga en movil: a 390 px
no queda ancho para escalonar nada. */
.serv-terraza { margin: 0; padding: 0; list-style: none; }
.serv-fase {
display: grid;
grid-template-columns: 48px 1fr;
gap: 4px 16px;
padding: 20px 0 20px 24px;
border-left: 2px solid var(--graphite);
margin-left: calc(var(--paso, 0) * 24px);
}
.serv-fase:last-child { border-left-color: var(--blueprint); }
.serv-fase-n {
grid-row: span 2;
font-family: var(--mono);
font-size: 11px;
line-height: 29px;
letter-spacing: .14em;
color: var(--mist);
}
.serv-fase-nombre { font-size: 18px; line-height: 29px; font-weight: 500; color: var(--graphite); }
.serv-fase-cuerpo { font-size: 15px; line-height: 24px; color: var(--slate); max-width: 56ch; }
/* D · CONSECUENCIA. Una sola accion posible en toda la pagina. */
.serv-cierre-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
.serv-cierre-grid .h2-med { max-width: 20ch; }
.serv-cierre-cuerpo { margin: 20px 0 0; max-width: 52ch; }
.serv-cta-wrap { display: grid; gap: 12px; justify-items: start; }
.serv-cta { text-decoration: none; display: inline-flex; align-items: center; }
.serv-cta-nota { color: var(--mist); }
.serv-hermanos .h2-med { margin: 0 0 32px; max-width: 24ch; }
/* El indice de servicios. */
.serv-indice-cabeza { max-width: 74ch; margin-bottom: clamp(48px, 7vw, 80px); }
.serv-indice-cabeza .rule-accent { margin-bottom: 28px; }
.serv-grupo + .serv-grupo { margin-top: clamp(64px, 9vw, 96px); }
.serv-grupo-cabeza { margin-bottom: 24px; }
.serv-grupo-cabeza .h2-med { margin: 0; }
/* Los servicios de la portada ahora son enlaces. */
.service--link a { color: inherit; }
.service--link:hover a { color: var(--ground); }
@media (max-width: 760px) {
.reg-fila { grid-template-columns: 1fr; gap: 4px; }
.serv-cierre-grid { grid-template-columns: 1fr; align-items: start; }
.serv-punto, .serv-fase { grid-template-columns: 1fr; gap: 4px; }
.serv-fase-n { grid-row: auto; line-height: 19px; }
.serv-fase { margin-left: 0; }
}
/* --------------------------------------------------------------- pie del sitio
Tres franjas sobre Graphite, cada una con su trabajo:
1. El cierre — la frase de la firma en Serif y la unica accion.
2. Las columnas — Servicios, Empresa, Contacto, Legal.
3. La firma — el logotipo, los derechos y el aviso simplificado.
Tres tamanos de tipo y no mas (visual-identity.md): Mono 11 para las
etiquetas, Sans 15 para todo lo que se lee y se pulsa, Serif 31 para la
frase. Blueprint, tres veces: la regla que abre la frase, el boton y el
miembro final del logotipo. Los enlaces van en Chalk y pasan a Ground: en
Graphite, Blueprint como texto no llega a 3:1.
La reticula es la del sitio: 12 columnas, medianil 24, contenido 1200. */
.pie { background: var(--graphite); padding: 0 var(--gutter); }
.pie-marco {
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid var(--edge);
}
/* El foco en Ground, no en Blueprint: sobre Graphite el contorno azul no llega
al 3:1 que pide un indicador de foco, y aqui todo es navegable con teclado. */
.pie :focus-visible { outline-color: var(--ground); }
/* 1 · El cierre. La frase arriba a la izquierda, la accion abajo a la derecha:
se lee la posicion y despues lo que sigue. */
.pie-cierre {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px 48px;
padding: clamp(64px, 8vw, 96px) 0 clamp(48px, 6vw, 64px);
}
.pie-cierre .rule-accent { margin-bottom: 24px; }
.pie .pie-etiqueta { margin: 0 0 16px; color: var(--chalk); }
.pie-posicion {
margin: 0;
max-width: 22ch;
font-family: var(--serif);
font-weight: 400;
font-size: 31px;
line-height: 37px;
letter-spacing: -.01em;
color: var(--ground);
text-wrap: balance;
}
.pie-descripcion {
margin: 16px 0 0;
max-width: 56ch;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
text-wrap: pretty;
}
.pie-boton {
display: inline-flex;
align-items: center;
text-decoration: none;
white-space: nowrap;
}
.pie-boton:hover { color: var(--ground); }
/* 2 · Las columnas. Servicios lleva cinco de las doce porque son dos listas
—una por Business Unit—; Contacto, tres, para que el domicilio quepa en sus
renglones y no se parta en cinco; Empresa y Legal, dos.
El titulo de cada columna lleva su propia regla: entre columna y columna la
linea se corta, y el pie se lee como una tabla y no como una lista suelta. */
.pie-columnas {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 48px 24px;
padding-bottom: clamp(48px, 6vw, 64px);
}
.pie-col { grid-column: span 2; min-width: 0; }
.pie-col--servicios { grid-column: span 5; }
.pie-col--contacto { grid-column: span 3; }
.pie .pie-titulo {
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--edge);
color: var(--ground);
}
.pie .pie-subtitulo { margin: 0 0 12px; color: var(--chalk); }
.pie-unidades {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
.pie-lista {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-style: normal;
}
.pie-lista--extra { margin-top: 8px; }
.pie-enlace,
.pie-direccion {
font-family: var(--sans);
font-size: 15px;
line-height: 24px;
color: var(--chalk);
}
.pie-enlace {
text-decoration: none;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
overflow-wrap: anywhere;
transition: color 120ms var(--ease);
}
.pie-enlace:hover { color: var(--ground); text-decoration-line: underline; }
/* La pagina en la que se esta: en Ground y subrayada, sin depender del color. */
.pie-enlace[aria-current="page"] { color: var(--ground); text-decoration-line: underline; }
/* «Configurar cookies» es un boton —no lleva a ningun sitio, cambia una
preferencia aqui mismo— pero se lee como un enlace mas de su columna. */
.pie-cookies {
padding: 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
}
/* Las dos salidas en Mono: «Todos los servicios →» y «Volver arriba ↑». Las
flechas viven en el subset Pi de Plex Mono, no en Sans: por eso son
etiquetas y no enlaces de texto corrido. */
.pie .pie-mas,
.pie .pie-arriba {
color: var(--chalk);
text-decoration: none;
transition: color 120ms var(--ease);
}
.pie .pie-mas:hover,
.pie .pie-arriba:hover { color: var(--ground); }
.pie-mas { display: inline-block; margin-top: 24px; }
/* 3 · La firma. El logotipo reverse, como pide logo-usage.md para el pie, con
su area de respeto: nada a menos de un cuarto de su altura. */
.pie-firma {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
padding-top: 32px;
border-top: 1px solid var(--edge);
}
.pie-logo { display: block; line-height: 0; padding: 8px 0; }
.pie-logo img { display: block; width: 132px; height: auto; }
.pie .pie-derechos { margin: 0; color: var(--chalk); }
.pie-arriba { margin-left: auto; }
/* A todo lo ancho del pie, no en columna: es letra pequena que se consulta, no
se lee de corrido, y en una columna de 74 caracteres ocupaba diez renglones
y alargaba el pie entero. */
.pie-aviso {
margin: 24px 0 0;
padding-bottom: 48px;
max-width: none;
font-size: 15px;
line-height: 24px;
color: var(--chalk);
}
/* Un enlace dentro de un parrafo no se distingue solo por el color: Ground
contra Chalk da 1.6:1. Lo que lo marca es el subrayado, y por eso va en
Chalk (11:1 sobre Graphite) y no en Edge, que se perdia (1.4:1). */
.pie-aviso a { color: var(--ground); border-bottom: 1px solid var(--chalk); }
.pie-aviso a:hover { border-bottom-color: var(--ground); }
.solo-lectores {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Tableta: Servicios a todo lo ancho y las otras tres debajo, en tercios. */
@media (max-width: 1023px) {
.pie-col, .pie-col--contacto { grid-column: span 4; }
.pie-col--servicios { grid-column: 1 / -1; }
}
/* Movil grande: la accion debajo de la frase, a todo lo ancho y con el texto
centrado —es el blanco mas grande de la pantalla—; columnas de dos en dos. */
@media (max-width: 767px) {
.pie-cierre { grid-template-columns: minmax(0, 1fr); align-items: start; }
/* El texto del boton se escribe en el panel y puede ser largo: en una
pantalla de 320 px, sin poder partirse, se salia del boton. */
.pie-boton {
justify-content: center;
height: auto;
min-height: 48px;
padding-block: 12px;
white-space: normal;
text-align: center;
}
.pie-posicion { font-size: 26px; line-height: 32px; }
.pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.pie-col, .pie-col--contacto { grid-column: auto; }
.pie-col--servicios { grid-column: 1 / -1; }
}
/* Movil: una sola columna, y las dos listas de servicios una tras otra. */
@media (max-width: 559px) {
.pie-columnas { grid-template-columns: minmax(0, 1fr); }
.pie-unidades { grid-template-columns: minmax(0, 1fr); }
.pie-arriba { margin-left: 0; }
}
/* ------------------------------------------- documentos legales desde el panel
El texto enriquecido del panel sale en etiquetas desnudas —,
,
—
y no con las clases doc-*. Es a proposito: Draftail normaliza el HTML cada
vez que alguien edita, y una clase escrita a mano no sobrevive a la segunda
edicion. Asi que la tipografia la fija el contenedor.
Los valores son los mismos que tenian .doc-h2, .doc-p y .doc-list: el
documento se ve exactamente igual que cuando venia del markdown. */
.doc-texto h2 {
margin: 48px 0 16px;
font-family: var(--sans);
font-weight: 600;
font-size: 23px;
line-height: 30px;
color: var(--graphite);
text-wrap: pretty;
}
.doc-texto h3 {
margin: 32px 0 12px;
font-family: var(--sans);
font-weight: 500;
font-size: 18px;
line-height: 29px;
color: var(--graphite);
}
.doc-texto p {
margin: 0 0 16px;
font-size: 18px;
line-height: 29px;
color: var(--slate);
text-wrap: pretty;
}
.doc-texto ul, .doc-texto ol { margin: 0 0 16px; padding: 0 0 0 20px; }
.doc-texto li { margin-bottom: 8px; font-size: 18px; line-height: 29px; color: var(--slate); }
.doc-texto li strong, .doc-texto p strong { color: var(--graphite); font-weight: 500; }
.doc-texto hr { margin: 48px 0 24px; border: 0; border-top: 1px solid var(--rule); }
/* La linea de «fecha de ultima actualizacion» va justo detras de una regla y
se pinta como etiqueta. Venia asi del sitio estatico. */
.doc-texto hr + p {
font-family: var(--mono);
font-size: 11px;
line-height: 19px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mist);
}
/* Los incisos llevan su propia letra: sin vineta y sin sangria de lista. */
.doc-incisos { list-style: none; margin: 0 0 16px; padding: 0; }
.doc-incisos li { margin-bottom: 4px; font-size: 18px; line-height: 29px; color: var(--slate); }
.doc-vigencia { display: block; color: var(--mist); }
/* ---------------------------------------------------------- banner de cookies
Abajo y acotado, no a pantalla completa. Un muro que tapa el sitio empuja a
aceptar por quitarlo de en medio, y un consentimiento arrancado asi no vale
para nada. Aqui se puede leer la pagina con el banner abierto.
El corchete de la marca: dos bordes, nunca cuatro. */
.cookies {
position: fixed;
left: var(--gutter);
right: var(--gutter);
bottom: 24px;
z-index: 60;
max-width: 640px;
/* En un telefono pequeno, o en horizontal, el banner con el detalle abierto
mide mas que la pantalla. Sin esto, el texto que explica que se acepta
quedaba por encima del borde y no habia forma de llegar a el. */
max-height: calc(100vh - var(--hdr-h) - 24px);
max-height: calc(100dvh - var(--hdr-h) - 24px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Lo que el banner y la franja de vista previa tapan, lo reserva la pagina:
el final del pie se puede leer y el elemento que recibe el foco no queda
debajo. La medida la pone cookies.js en --cookie-notice-h. */
html { scroll-padding-bottom: var(--cookie-notice-h, 0px); }
body { padding-bottom: var(--cookie-notice-h, 0px); }
.cookies[hidden] { display: none; }
.cookies-caja {
background: var(--graphite);
border-top: 2px solid var(--blueprint);
border-left: 1px solid var(--edge);
padding: 24px;
box-shadow: 0 8px 24px rgba(22, 24, 26, .12);
}
.cookies-cuerpo { margin: 0; color: var(--chalk); max-width: 60ch; }
.cookies-mas { margin: 12px 0 0; color: var(--mist); }
.cookies-mas a { color: var(--chalk); border-bottom: 1px solid var(--chalk); }
.cookies-mas a:hover { color: var(--ground); }
.cookies-detalle { margin-top: 24px; border-top: 1px solid var(--edge); padding-top: 16px; }
.cookies-detalle[hidden] { display: none; }
.cookies-categoria + .cookies-categoria { margin-top: 16px; border-top: 1px solid var(--edge); padding-top: 16px; }
.cookies-categoria-cabeza {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.cookies-nombre { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ground); }
.cookies-fijas { color: var(--mist); }
.cookies-det { margin: 6px 0 0; color: var(--mist); max-width: 56ch; }
.cookies-casilla {
appearance: none;
width: 20px; height: 20px;
flex: none;
/* Chalk y no Edge: apagada es como nace, y tiene que verse que es una
casilla. Edge sobre Graphite da 1.4:1; Chalk, 11:1. */
border: 1px solid var(--chalk);
background: transparent;
cursor: pointer;
position: relative;
}
.cookies-casilla:checked { background: var(--blueprint); border-color: var(--blueprint); }
.cookies-casilla:checked::after {
content: '';
position: absolute;
left: 6px; top: 2px;
width: 5px; height: 10px;
border: solid var(--ground);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* Sobre el fondo oscuro del banner el contorno azul no llega a 3:1. */
.cookies-casilla:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }
.cookies :focus-visible { outline-color: var(--ground); }
@media (forced-colors: active) {
.cookies-casilla { border-color: CanvasText; }
.cookies-casilla:checked { background: Highlight; border-color: Highlight; }
}
@media (max-height: 480px) {
.cookies { bottom: 12px; }
.cookies-caja { padding: 16px; }
.cookies-detalle, .cookies-acciones { margin-top: 16px; }
}
.cookies-acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-top: 24px;
}
.cookies-acciones [hidden] { display: none; }
/* El boton de contorno: misma caja que el primario, sin el relleno azul. El
azul lo gasta la accion que recomendamos, no las tres. */
.btn-lineal {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 20px;
border: 1px solid var(--edge);
background: transparent;
color: var(--chalk);
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.btn-lineal:hover { border-color: var(--ground); color: var(--ground); }
.btn-texto {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: var(--mist);
}
.btn-texto:hover { color: var(--ground); }
@media (max-width: 640px) {
.cookies { left: 12px; right: 12px; bottom: 12px; }
.cookies-caja { padding: 20px; }
.cookies-acciones > .btn-primary, .cookies-acciones > .btn-lineal { flex: 1 1 auto; justify-content: center; }
}
/* Tablas de los documentos legales. Reglas, no bordes de caja: la marca separa
con lineas. Desborda el ancho de lectura porque una tabla de cuatro columnas
dentro de 72ch no se lee, y en movil se desplaza en horizontal en vez de
apretarse hasta romperse. */
.doc-tabla-envoltura { margin: 32px 0; overflow-x: auto; }
.doc-tabla-titulo { display: block; margin: 0 0 12px; color: var(--mist); }
.doc-tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.doc-tabla th, .doc-tabla td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; }
.doc-tabla thead th { border-bottom: 2px solid var(--graphite); color: var(--graphite); font-weight: 600; }
.doc-tabla tbody td { border-bottom: 1px solid var(--rule); color: var(--slate); }
.doc-tabla tbody td:first-child { color: var(--graphite); font-family: var(--mono); font-size: 13px; }
/* ------------------------------------------------------- documentos legales
Comparten estructura con servicios y con el blog: misma barra de navegacion,
misma apertura, mismo pie. Antes tenian cabecera propia y fondo blanco, y se
leian como si fueran de otro sitio — justo en las paginas donde mas importa
que quien las lee reconozca de quien son. */
.legal-apertura { max-width: 74ch; margin-bottom: clamp(48px, 7vw, 72px); }
.legal-apertura .rule-accent { margin: 16px 0 28px; }
.legal-apertura .h1-serv { max-width: 22ch; }
.legal-vigencia { margin: 24px 0 0; color: var(--mist); }
/* Dos columnas: el indice a la izquierda y el texto a la derecha. El indice se
queda fijo al desplazarse porque su utilidad es justo esa — saber donde
estas en un documento de quince apartados. */
.legal-cuerpo {
display: grid;
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.legal-indice {
position: sticky;
top: calc(var(--hdr-h, 72px) + 24px);
border-top: 2px solid var(--graphite);
padding-top: 16px;
}
.legal-indice .label { margin-bottom: 12px; color: var(--mist); }
.legal-indice-lista {
margin: 0;
padding: 0;
list-style: none;
/* Un aviso largo no cabe en pantalla ni plegado: el indice se desplaza solo
cuando hace falta, sin empujar el texto. */
max-height: calc(100vh - var(--hdr-h, 72px) - 120px);
overflow-y: auto;
}
.legal-indice-lista li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--rule);
}
/* El numero en Mono, como en el registro del resto del sitio. **Sale del
titulo del apartado, no de un contador**: el numero lo escribe el abogado
dentro del texto y es el que se cita. Un contador propio pintaba «01 1.
Identidad» y, peor, daria dos numeros distintos al mismo apartado en cuanto
alguien reordene el documento. */
.legal-indice-n {
font-family: var(--mono);
font-size: 11px;
line-height: 22px;
letter-spacing: .14em;
color: var(--mist);
}
.legal-indice-lista a {
font-size: 14px;
line-height: 22px;
color: var(--slate);
text-wrap: pretty;
}
.legal-indice-lista a:hover { color: var(--graphite); }
/* El texto conserva su medida de lectura, pero ya no se centra en la pagina:
se alinea con su columna. */
.legal-texto { margin: 0; max-width: 72ch; }
/* Un documento corto —el compromiso de confidencialidad son cinco parrafos sin
apartados— no lleva indice. Sin esto el texto se quedaba en la columna
estrecha que el indice habria ocupado, con lineas de cinco palabras. */
.legal-texto:only-child { grid-column: 1 / -1; }
.legal-texto > :first-child > :first-child { margin-top: 0; }
/* El salto desde el indice deja el encabezado pegado a la barra fija si no se
reserva sitio. */
.legal-texto h2 { scroll-margin-top: calc(var(--hdr-h, 72px) + 24px); }
/* D · CONSECUENCIA: sobre una regla de 2px, como pide la marca. */
.legal-cierre {
margin-top: clamp(48px, 7vw, 72px);
border-top: 2px solid var(--graphite);
padding-top: 20px;
}
.legal-cierre .label { color: var(--mist); }
.legal-cierre-nota { margin: 8px 0 0; }
@media (max-width: 900px) {
/* En una columna el indice deja de ser util como barra lateral: pasa a ser
un bloque plegable al principio del documento. */
.legal-cuerpo { grid-template-columns: 1fr; gap: 32px; }
.legal-indice { position: static; max-height: none; }
.legal-indice-lista { max-height: none; overflow: visible; }
}
/* ----------------------------------------------- vista previa de Analytics
Solo la ve quien la pidio desde el panel (nucleo/analitica.py). Fija abajo,
a todo lo ancho, para que nadie confunda lo que esta revisando con el sitio
publicado. Abajo y no arriba: arriba tapaba la cabecera, que es fija, y con
ella la navegacion que hay que revisar. El banner de cookies sube para
dejarle sitio. Sin Blueprint: es una advertencia, no una accion. */
.vista-previa {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
padding: 10px var(--gutter);
background: var(--ground);
color: var(--graphite);
border-top: 2px solid var(--graphite);
}
/* El banner sube lo que mida la franja (cookies.js la mide en --vista-previa-h). */
.vista-previa ~ .cookies { bottom: calc(var(--vista-previa-h, 48px) + 24px); }
@media (max-width: 640px) {
.vista-previa ~ .cookies { bottom: calc(var(--vista-previa-h, 72px) + 12px); }
}
/* ------------------------------------------------------------------ impresion
Lo que esta fijo en la pantalla se repetiria en cada hoja impresa encima del
texto, y lo que mas se imprime son los documentos legales. */
@media print {
.cookies, .vista-previa, .site-header, .progress-track, .skip-link { display: none !important; }
html { scroll-padding-bottom: 0; }
body { padding-bottom: 0; background: #fff; }
}
.vista-previa p { margin: 0; font-size: 15px; line-height: 24px; }
.vista-previa a {
color: var(--graphite);
text-decoration: underline;
text-underline-offset: 4px;
}
.vista-previa :focus-visible { outline-color: var(--graphite); }
/* Un documento con Analytics que sigue en borrador, visto en la vista previa. */
.legal-borrador {
display: inline-block;
margin: 0 0 16px;
padding: 2px 8px;
border: 1px solid var(--graphite);
color: var(--graphite);
}