:root {
--tinta: #161513; --papel: #f4efe6; --bermellon: #e8461e; --cobalto: #2340c8; --limon: #f2d33a;
--fondo: #f4efe6; --fondo-alto: #fffdf8; --fondo-hundido: #eae3d6;
--texto: #161513; --texto-suave: #5c574f; --linea: #d8d0c2; --linea-fuerte: #8c857a;
--bermellon-texto: #b8320f; --bermellon-suave: #fbe1d7; --sobre-bermellon: #161513;
--foco: var(--cobalto);
--radio-s: 6px; --radio-m: 14px; --radio-pildora: 999px; --trazo: 1.5px;
--font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--font-sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--texto); }
a:hover { color: var(--cobalto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.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; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--texto-suave); margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
.btn { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1; height: 48px; padding: 0 24px; border-radius: var(--radio-pildora); border: var(--trazo) solid var(--texto); background: none; color: var(--texto); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { color: var(--texto); background: var(--fondo-hundido); }
.btn--primary { background: var(--bermellon); border-color: var(--bermellon); color: var(--sobre-bermellon); }
.btn--primary:hover { background: var(--bermellon); box-shadow: inset 0 0 0 var(--trazo) var(--sobre-bermellon); }
.btn--sm { height: 36px; font-size: 14px; padding: 0 16px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .01em; padding: 4px 10px 4px 8px; border-radius: var(--radio-s); white-space: nowrap; background: var(--limon); color: var(--tinta); }
.tag svg { width: 12px; height: 12px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.site-header .logo img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 16px; font-weight: 600; }
.site-nav a:not(.btn) { text-decoration: none; }
@media (max-width: 760px) {
.site-nav a:not(.btn) { display: none; }
.site-header .logo img { height: 36px; }
}
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 40px; padding-bottom: 96px; }
.hero__text { flex: 1 1 460px; min-width: 0; }
.hero h1 { margin: 20px 0 24px; font-size: clamp(52px, 7vw, 100px); line-height: 0.92; font-weight: 700; letter-spacing: -0.03em; }
.hero__lead { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.55; }
.hero__art { flex: 1 1 480px; min-width: 0; position: relative; overflow: hidden; min-height: clamp(320px, 38vw, 540px); padding: 40px; border-radius: var(--radio-m); background: var(--fondo-hundido); display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.hero__art .rayas { position: absolute; left: 0; top: 0; width: 100%; height: 150px; object-fit: cover; object-position: center top; }
.hero__art .obra { position: relative; height: auto; }
.hero__art figcaption { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: var(--texto-suave); }
@media (max-width: 760px) {
.hero { gap: 40px; padding-top: 16px; padding-bottom: 64px; }
.hero__art { padding: 24px; gap: 12px; }
}
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 36px; max-width: 600px; }
.field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; line-height: 18px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--texto-suave); }
.input { height: 48px; width: 100%; border-radius: var(--radio-pildora); border: var(--trazo) solid var(--linea-fuerte); padding: 0 20px; font: inherit; font-size: 16px; background: var(--fondo-alto); color: var(--texto); }
textarea.input { height: auto; min-height: 120px; border-radius: var(--radio-m); padding: 14px 20px; resize: vertical; }
.input:focus { border-color: var(--texto); outline: 2px solid var(--foco); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.status { margin: 14px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; min-height: 22px; }
.status--ok { color: var(--texto); }
.status--error { color: var(--bermellon-texto); }
.ok-box { margin-top: 36px; max-width: 600px; padding: 20px 24px; border-radius: var(--radio-m); background: var(--fondo-alto); border: 1px solid var(--linea); }
.ok-box strong { display: block; font-size: 20px; line-height: 26px; margin-bottom: 4px; }
.ok-box p { margin: 0; color: var(--texto-suave); font-size: 16px; }
.band { background: var(--fondo-alto); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 96px 0; }
.section { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 760px) { .band { padding: 64px 0; } .section { padding-top: 64px; padding-bottom: 64px; } }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; padding: 0; list-style: none; }
.step { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.step__n { font-size: 64px; line-height: 0.9; font-weight: 700; color: var(--bermellon); }
.step h3 { margin-top: 12px; font-size: 21px; line-height: 28px; font-weight: 600; }
.step p { margin: 0; font-size: 16px; line-height: 24px; color: var(--texto-suave); }
.compare { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.compare__intro { flex: 1 1 340px; min-width: 0; }
.compare__intro p { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--texto-suave); }
.compare__table { flex: 2 1 520px; min-width: 0; overflow-x: auto; }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 17px; line-height: 24px; }
th { text-align: left; padding: 14px 16px; border-bottom: var(--trazo) solid var(--texto); font-weight: 600; color: var(--texto-suave); }
th:last-child { color: var(--texto); font-weight: 700; }
td { padding: 16px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
td:first-child { font-weight: 600; }
td:nth-child(2) { color: var(--texto-suave); }
@media (max-width: 640px) {
table { min-width: 0; }
thead { display: none; }
tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--linea); }
tr:first-child { border-top: var(--trazo) solid var(--texto); }
td { display: block; padding: 2px 0; border: 0; }
td:first-child { font-size: 18px; margin-bottom: 6px; }
td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--texto-suave); }
td:nth-child(3)::before { color: var(--texto); }
}
.dark { background: var(--tinta); color: var(--papel); padding: 96px 0; }
.dark a:not(.btn) { color: var(--papel); }
.dark .eyebrow { color: #aba498; }
.artists { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.artists__text { flex: 1 1 520px; min-width: 0; }
.artists h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; margin-top: 8px; }
.artists__lead { margin: 24px 0 0; max-width: 600px; font-size: 18px; line-height: 1.55; color: #d9d3c8; }
.artists ul { margin: 24px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 26px; }
.artists__img { flex: 0 1 340px; min-width: 240px; min-height: 280px; position: relative; overflow: hidden; border-radius: var(--radio-m); }
.artists__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .dark { padding: 64px 0; } .artists__img { min-height: 160px; flex-basis: 100%; } }
.faq { max-width: 880px; }
.faq h2 { margin-bottom: 32px; }
details { border-top: 1px solid var(--linea); padding: 20px 0; }
details:last-of-type { border-bottom: 1px solid var(--linea); }
summary { font-size: 20px; line-height: 28px; font-weight: 600; cursor: pointer; }
details p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--texto-suave); }
.site-footer { background: var(--fondo-alto); border-top: 1px solid var(--linea); padding: 48px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer .brand { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 22px; font-weight: 600; }
.site-footer .brand img { width: 72px; height: auto; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.page { max-width: 760px; padding-top: 24px; padding-bottom: 96px; }
.page h1 { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; font-weight: 700; letter-spacing: -0.025em; margin: 16px 0 20px; }
.page .lead { font-size: 19px; line-height: 1.55; margin: 0 0 8px; }
.page h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.01em; margin: 40px 0 8px; }
.page p, .page li { font-size: 17px; line-height: 1.6; }
.stack { display: grid; gap: 20px; margin-top: 36px; }
.stack .field { flex: none; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.back { font-size: 15px; font-weight: 600; text-decoration: none; }
.status:empty { display: none; }