/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-text);
font-size: var(--fs-0);
line-height: var(--lh-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sitio-contenido { flex: 1; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a {
color: var(--c-accent);
text-decoration-thickness: .08em;
text-underline-offset: .15em;
}
a:hover { text-decoration-thickness: .15em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: var(--fw-display-strong, 600);
line-height: var(--lh-tight);
letter-spacing: -.01em;
margin: 0 0 .5em;
text-wrap: balance;
}
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
html:not([data-movemento="si"]) { scroll-behavior: auto; }
html:not([data-movemento="si"]) *, html:not([data-movemento="si"]) *::before, html:not([data-movemento="si"]) *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
html[data-movemento="non"] { scroll-behavior: auto; }
html[data-movemento="non"] *, html[data-movemento="non"] *::before, html[data-movemento="non"] *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.contenedor { width: min(100% - 2rem, var(--w-max)); margin-inline: auto; }
.contenedor-lectura { width: min(100% - 2rem, var(--w-read)); margin-inline: auto; }
.saltar {
position: absolute; left: 1rem; top: -100px; z-index: 1000;
padding: .5rem 1rem; border-radius: var(--r-sm);
background: var(--c-accent); color: var(--c-accent-ink);
}
.saltar:focus { top: 1rem; }
.visualmente-oculto, .screen-reader-text {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.boton {
display: inline-flex; align-items: center; gap: .5em;
padding: .7em 1.2em; border: 0; border-radius: var(--r-md); cursor: pointer;
background: var(--c-accent); color: var(--c-accent-ink);
font-weight: var(--fw-strong, 600); text-decoration: none; line-height: 1.2; white-space: nowrap;
transition: filter var(--motion-ms) var(--motion-ease), transform var(--motion-ms) var(--motion-ease);
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 1.1em; height: 1.1em; }
.boton-secundario { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-line); }
.boton-secundario:hover { box-shadow: inset 0 0 0 2px var(--c-ink); filter: none; }
.cabecera { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.cabecera-int {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 4.5rem; padding-block: .75rem;
}
.marca {
display: inline-flex; align-items: center; color: var(--c-ink); text-decoration: none;
font-family: var(--f-display); font-size: var(--fs-2); font-weight: var(--fw-display-strong, 600);
}
.marca svg { height: 2.75rem; width: auto; }
.menu-boton {
display: inline-flex; align-items: center; gap: .5rem;
background: none; border: 0; padding: .5rem; margin: -.5rem; cursor: pointer;
}
.menu-boton-icono { display: grid; gap: 4px; width: 22px; }
.cabecera-wa { display: none; margin-left: auto; padding: .5rem; color: var(--c-ink); }
.cabecera-wa svg { width: 24px; height: 24px; display: block; }
.menu-boton-icono span {
display: block; height: 2px; border-radius: 2px; background: currentColor;
transition: transform var(--motion-ms) var(--motion-ease), opacity var(--motion-ms);
}
[aria-expanded="true"] .menu-boton-icono span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-boton-icono span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-boton-icono span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-principal .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.menu-principal a { display: block; padding: .6rem .25rem; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.menu-principal a:hover, .menu-principal .current-menu-item > a, .menu-principal .current-menu-ancestor > a { color: var(--c-accent); }
.menu-principal .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.menu-principal .boton-cta { display: inline-flex; padding: .7em 1.2em; color: var(--c-accent-ink); font-weight: var(--fw-strong, 600); margin-top: .75rem; }
.menu-principal .boton-cta:hover { color: var(--c-accent-ink); }
@media (max-width: 55.99rem) {
.cabecera-int { flex-wrap: wrap; }
.cabecera-wa { display: inline-flex; }
.menu-boton { margin-left: 0; }
.js .menu-principal { display: none; width: 100%; padding-block: .5rem 1rem; }
.js .menu-principal.abierto { display: block; }
}
@media (min-width: 56rem) {
.menu-boton { display: none; }
.menu-principal { display: flex; align-items: center; gap: 1.5rem; }
.menu-principal .menu { flex-direction: row; gap: 1.25rem; }
.menu-principal .menu > li { position: relative; }
.menu-principal .sub-menu {
position: absolute; top: 100%; left: 0; z-index: 20; min-width: 12rem; display: none;
padding: .5rem; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: block; }
.menu-principal .boton-cta { margin: 0; }
}
.pie {
border-top: 1px solid var(--c-line);
background: var(--c-surface, var(--c-bg));
color: var(--c-muted-text); font-size: var(--fs--1);
padding-block: 3rem 1.5rem;
}
.pie-int { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .pie-int { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.pie a { color: inherit; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-block: .4rem; }
.pie h2 { font: var(--fw-strong, 600) var(--fs-0) var(--f-text); color: var(--c-ink); margin-bottom: .75rem; }
.marca-pie svg { height: 2rem; }
.pie-descripcion { max-width: 34rem; }
.pie-contacto li { display: flex; align-items: flex-start; gap: .6rem; }
.pie-contacto svg { width: 20px; height: 20px; flex: none; margin-top: .1em; }
.pie-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.pie-social a { display: inline-flex; padding: .45rem; border: 1px solid var(--c-line); border-radius: 50%; }
.pie-social a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.pie-social svg { width: 20px; height: 20px; }
.pie-linea {
margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-line);
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.pie-linea p { margin: 0; }
.consent {
position: fixed; inset: auto 1rem 1rem; z-index: 900; max-width: 26rem; margin-inline: auto;
padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--r-lg);
background: var(--c-bg); color: var(--c-ink); font-size: var(--fs--1);
box-shadow: 0 10px 40px rgb(0 0 0 / .15);
}
.consent p { margin: 0 0 .75rem; }
.consent-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
/* lienzo.css */
.lienzo .sitio-contenido { overflow-x: clip; }
.m-aparece {
--pp: clamp(0, calc(var(--p, 1) * 2.5), 1);
opacity: var(--pp);
transform: translateY(calc((1 - var(--pp)) * 2rem));
}
.m-escala { transform: scale(calc(.92 + var(--p, 1) * .08)); }
.m-parallax { transform: translateY(calc((var(--p, 1) - .5) * -6rem)); }
.m-barra { position: relative; }
.m-barra::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
width: calc(var(--p, 1) * 100%); background: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
html:not([data-movemento="si"]) .m-aparece, html:not([data-movemento="si"]) .m-escala, html:not([data-movemento="si"]) .m-parallax { opacity: 1; transform: none; }
}
html[data-movemento="non"] .m-aparece, html[data-movemento="non"] .m-escala, html[data-movemento="non"] .m-parallax { opacity: 1; transform: none; }