/* Web cabreraconsulting.ch — marca «Cuerno» (26/09/2026). Tokens = marca/gen_marca.py */
@font-face { font-family: "Bricolage"; src: url(/fonts/BricolageGrotesque-300.ttf) format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(/fonts/BricolageGrotesque-800.ttf) format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --fondo: #F2F2EE; --tinta: #111111; --gris: #6E6E69; --senal: #E0421B; --linea: #D9D9D3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #111111; --tinta: #F2F2EE; --gris: #8A8A85; --linea: #2A2A28; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 300 1.125rem/1.55 "Bricolage", system-ui, sans-serif;
}
main, footer { max-width: 38rem; margin: 0 auto; padding: 0 1.25rem; }
main { padding-top: clamp(3rem, 12vh, 7rem); }

.logo { display: block; width: min(100%, 22rem); height: auto; }
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) { .logo-claro { display: none; } .logo-oscuro { display: block; } }

h1 { font-weight: 800; font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.1; letter-spacing: -0.018em; margin: 3.5rem 0 1.25rem; }
h2 { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; margin: 2.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 800; }

/* Lo que hacemos: una lista con el cuadrado naranja de la «i» como viñeta */
.oficios { list-style: none; padding: 0; margin: 2rem 0; }
.oficios li { position: relative; padding-left: 1.5rem; margin-bottom: 1rem; }
.oficios li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5em; height: .5em; background: var(--senal); }

a { color: inherit; text-decoration-color: var(--senal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--senal); }
.contacto { margin-top: 2.5rem; font-size: 1.25rem; }

footer { margin-top: 5rem; padding-bottom: 2.5rem; color: var(--gris); font-size: .875rem; }
footer .raya { border-top: 1px solid var(--linea); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.legal h1 { margin-top: 2.5rem; }
.legal p, .legal li { font-size: 1rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }