:root {
--c0: #0f0805; --c1: #160c07; --c2: #1f110a; --c3: #2a160c; --marron: #361809;
--crema: #FBF4E6;
--crema-85: rgba(251, 244, 230, .86);
--crema-72: rgba(251, 244, 230, .74);
--crema-60: rgba(251, 244, 230, .64);
--oro: #F2A71B; --ambar: #DF9F1B; --nogal: #7A4A22; --oro-luz: #FBE3A6; --oro-sombra: #A8700F;
--filete: rgba(242, 167, 27, .42);
--filete-suave: rgba(242, 167, 27, .2);
--linea: rgba(251, 244, 230, .12);
--metal: linear-gradient(100deg, #A8700F 0%, #DF9F1B 18%, #F2A71B 34%, #FBE3A6 50%, #F2A71B 64%, #DF9F1B 82%, #A8700F 100%);
--listones: linear-gradient(90deg,
var(--oro) 0 14px, var(--nogal) 14px 16px, var(--ambar) 16px 22px, var(--nogal) 22px 24px,
var(--oro) 24px 46px, var(--nogal) 46px 48px, var(--ambar) 48px 58px, var(--nogal) 58px 60px,
var(--oro) 60px 78px, var(--nogal) 78px 80px, var(--ambar) 80px 88px, var(--nogal) 88px 90px,
var(--oro) 90px 114px, var(--nogal) 114px 116px, var(--ambar) 116px 128px, var(--nogal) 128px 130px,
var(--oro) 130px 146px, var(--nogal) 146px 148px, var(--ambar) 148px 154px, var(--nogal) 154px 156px);
--sans: 'Montserrat', 'Montserrat Respaldo', 'Segoe UI', system-ui, sans-serif;
--serif: 'Lora', 'Lora Respaldo', Georgia, serif;
--m: 16px; --g: 16px; --maxw: 1240px;
--hdr: 56px; --hdr-top: 64px; --bar: 49px;
--sec: 64px;
--ease: cubic-bezier(.2, .7, .2, 1);
--bleed: calc((100vw - min(100vw - 2 * var(--m), var(--maxw))) / 2);
--wm-w: clamp(64px, 24%, 190px);
--wm-in: max(8px, 3.5%);
}
@media (min-width: 640px) { :root { --m: 32px; --g: 24px; } }
@media (min-width: 1024px) { :root { --m: 48px; --hdr: 64px; --hdr-top: 88px; --sec: 112px; } }
@media (min-width: 1280px) { :root { --m: 64px; } }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-latin-v31.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lora-latin-400-v37.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/lora-latin-400-italic-v37.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat Respaldo'; src: local('Arial'); size-adjust: 112%; ascent-override: 86%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Lora Respaldo'; src: local('Georgia'); size-adjust: 97%; ascent-override: 100%; descent-override: 27%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); background: var(--c0); color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }
body {
margin: 0; min-width: 320px; overflow-x: clip;
background: var(--c1); color: var(--crema-85);
font: 400 17px/1.6 var(--serif);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; background-size: cover; background-position: center; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { font-family: var(--sans); color: var(--crema); text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
::selection { background: var(--oro); color: var(--c1); }
.wm {
position: absolute; right: 0; bottom: 0; z-index: 2;
width: var(--wm-w); aspect-ratio: 600 / 147;
margin: 0 calc(var(--wm-off, 0px) + var(--wm-in)) calc(var(--wm-off, 0px) + var(--wm-in)) 0;
background: var(--wm-img, url(/img/marca/marca-agua.webp)) no-repeat 100% 100% / contain;
opacity: .9; pointer-events: none;
}
.wm--hero { z-index: 1; margin: 0 0 24px 0; }
@media (max-width: 767px) { .wm--hero { top: calc(var(--hdr-top) + 136px); bottom: auto; margin: 0; } }
@media (max-width: 767px) and (max-height: 760px) { .wm--hero { top: calc(var(--hdr-top) + 12px); } }
.wm-fit {
position: absolute; inset: 0; margin: auto;
width: min(100cqw, 100cqh * var(--ar, 1)); height: min(100cqh, 100cqw / var(--ar, 1));
}
.skip { position: fixed; left: 16px; top: -64px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--oro); color: var(--c1); font: 700 15px var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec__head { max-width: 760px; margin-bottom: 40px; }
.eyebrow {
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
font: 300 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--oro);
}
.mark { flex: none; width: 22px; height: 12px; background: linear-gradient(90deg, var(--oro) 0 6px, transparent 6px 8px, var(--ambar) 8px 12px, transparent 12px 14px, var(--oro) 14px 22px); }
h2 { font-weight: 800; font-size: clamp(28px, 1.15rem + 2.1vw, 46px); line-height: 1.08; letter-spacing: -.015em; }
.ref { font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--oro); font-variant-numeric: tabular-nums; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
font: 700 15px/1.1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--xl { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; min-width: 0; }
.btn--block > span:not(.sr) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn--gold { background: var(--oro); color: var(--c1); }
.btn--gold:hover { background: #F6B63F; }
.btn--ghost { background: rgba(15, 8, 5, .4); color: var(--crema); border-color: rgba(251, 244, 230, .5); }
.btn--ghost:hover { border-color: var(--oro); color: var(--oro-luz); }
.btn--line { background: transparent; color: var(--oro); border-color: var(--filete); }
.btn--line:hover { border-color: var(--oro); background: rgba(242, 167, 27, .08); }
.btn--text { background: none; color: var(--crema-72); padding-inline: 12px; }
.btn--text:hover { color: var(--crema); }
.ico {
display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0;
border-radius: 50%; border: 1px solid var(--filete); background: transparent; color: var(--oro);
transition: border-color .2s, background-color .2s, opacity .2s;
}
.ico svg { width: 22px; height: 22px; }
.ico:hover { border-color: var(--oro); background: rgba(242, 167, 27, .08); }
.ico:disabled { opacity: .3; cursor: default; }
.ico--line { background: rgba(15, 8, 5, .55); color: var(--crema); border-color: rgba(251, 244, 230, .3); }
.hdr {
position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-top);
border-bottom: 1px solid transparent;
transition: height .25s var(--ease), background-color .25s, border-color .25s;
}
.hdr::before { content: ""; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(15, 8, 5, .72), rgba(15, 8, 5, 0)); transition: opacity .25s; }
.hdr.is-solid { height: var(--hdr); background: var(--c0); border-bottom-color: var(--filete-suave); }
.hdr.is-solid::before { opacity: 0; }
.hdr__bar { height: 100%; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; min-height: 44px; }
.brand__sym { width: 44px; height: auto; transition: width .25s var(--ease); }
.hdr.is-solid .brand__sym { width: 38px; }
.brand__txt { display: grid; line-height: 1; }
.brand__m { font: 300 9.5px/1 var(--sans); letter-spacing: .52em; text-transform: uppercase; color: var(--oro); margin-bottom: 5px; }
.brand__n { font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--crema); }
.nav { display: none; }
.hdr__wa {
display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--filete); color: var(--oro); text-decoration: none;
font: 700 14px/1 var(--sans); transition: background-color .2s, color .2s, border-color .2s;
}
.hdr__wa svg { width: 22px; height: 22px; }
.hdr__wa-t { display: none; }
.hdr__wa:hover { border-color: var(--oro); background: rgba(242, 167, 27, .1); }
.hdr__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--crema); border-radius: 50%; }
.hdr__menu svg { width: 26px; height: 26px; }
.hdr__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oro); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@supports (animation-timeline: scroll()) {
.hdr__prog { animation: progreso linear both; animation-timeline: scroll(root); }
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (min-width: 1024px) {
.brand__sym { width: 52px; }
.hdr.is-solid .brand__sym { width: 42px; }
.brand__m { font-size: 10.5px; }
.brand__n { font-size: 17px; }
.nav { display: flex; gap: 4px; margin-right: 16px; }
.nav a {
position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
font: 500 14px/1 var(--sans); color: var(--crema-85); text-decoration: none; transition: color .2s;
}
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
.nav a:hover { color: var(--crema); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--oro-luz); }
.hdr__wa { display: inline-flex; gap: 8px; width: auto; height: 44px; padding: 0 20px; border-radius: 999px; }
.hdr__wa svg { width: 20px; height: 20px; }
.hdr__wa-t { display: inline; }
.hdr.is-solid .hdr__wa { background: var(--oro); border-color: var(--oro); color: var(--c1); }
.hdr__menu { display: none; }
}
.hero {
position: relative; isolation: isolate; overflow: clip;
display: flex; flex-direction: column; min-height: max(100svh, 600px);
background: var(--c0); color: var(--crema);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster, .hero__video { object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .9s var(--ease); }
.hero__video.is-on { opacity: 1; }
.hero__veil {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(15, 8, 5, .55) 0%, rgba(15, 8, 5, 0) 16%, rgba(15, 8, 5, 0) 46%, rgba(15, 8, 5, .35) 72%, rgba(15, 8, 5, .7) 100%),
radial-gradient(130% 80% at 50% 30%, transparent 55%, rgba(15, 8, 5, .45) 100%);
}
.hero__inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--hdr-top); padding-bottom: 20px; }
.hero__copy { position: relative; max-width: 880px; }
@media (min-width: 1600px) { .hero__copy { max-width: 1120px; } }
.hero__h1 {
font-weight: 800; font-size: clamp(30px, 8.3vw, 34px); line-height: 1.04; letter-spacing: -.022em;
max-width: 15ch;
}
@media (min-width: 768px) { .hero__h1 { font-size: clamp(44px, min(5.4vw, 8.7vh), 80px); line-height: 1.02; max-width: 19ch; } }
@media (min-width: 1600px) { .hero__h1 { font-size: clamp(44px, min(5.4vw, 8.7vh), 92px); } }
.oro, .acento {
font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0;
color: var(--oro);
background: var(--metal); background-size: 200% 100%; background-position: 50% 0;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
text-shadow: none;
}
.oro { position: relative; display: inline-block; font-size: 1.1em; line-height: .95; padding: 0 .1em .14em 0; }
.acento { font-size: 1.06em; padding-right: .02em; }
.liston {
position: absolute; left: 0; right: .1em; bottom: -.04em; height: .1em; min-height: 5px;
background: var(--listones); background-size: 156px 100%;
transform-origin: 0 50%;
}
.hero__line { margin-top: 12px; max-width: 34ch; font-size: clamp(16px, .9rem + .35vw, 20px); line-height: 1.5; color: var(--crema-85); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero__actions .wa-lux { flex: 1 1 auto; }
.hero__film { flex: 0 1 auto; padding-inline: 20px 24px; }
.hero__film-ring { display: inline-grid; place-items: center; }
.hero__film-ring svg { width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font: 500 12px/1.3 var(--sans); letter-spacing: .02em; color: var(--crema-85); }
.chips li { display: inline-flex; align-items: center; }
.chips li::before { content: ""; flex: none; width: 4px; height: 4px; margin-right: 8px; background: var(--oro); transform: rotate(45deg); }
.hero__pause {
position: absolute; z-index: 2; left: 0; top: calc(var(--hdr-top) + 8px);
display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
border: 1px solid rgba(251, 244, 230, .3); background: rgba(15, 8, 5, .45); color: var(--crema);
}
.hero__pause svg { width: 18px; height: 18px; }
.hero__pause:hover { border-color: var(--oro); color: var(--oro-luz); }
.hero__pause .i-play, .hero__pause[aria-pressed="true"] .i-pausa { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.seal { position: absolute; right: 0; top: calc(var(--hdr-top) + 12px); width: 112px; aspect-ratio: 1; pointer-events: none; }
.seal__ring { width: 100%; height: 100%; overflow: visible; }
.seal circle { fill: none; stroke: var(--filete); stroke-width: 1; }
.seal text { font: 500 17px var(--sans); fill: var(--oro); letter-spacing: 0; }
.seal__sym { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -54%); }
.hero__index { position: relative; border-top: 1px solid var(--filete-suave); background: rgba(15, 8, 5, .88); }
.hero__index ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__index li { border-right: 1px solid var(--filete-suave); }
.hero__index li:nth-child(4n) { border-right: 0; }
.hero__index li:nth-child(-n + 4) { border-bottom: 1px solid var(--filete-suave); }
.hero__index a {
display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px;
font: 500 12.5px/1.2 var(--sans); color: var(--crema); text-decoration: none; text-align: center;
transition: color .2s, background-color .2s;
}
.hero__index a:hover { color: var(--oro-luz); background: rgba(242, 167, 27, .07); }
.hero__index .n { display: none; }
@media (max-width: 767px) {
.hero__inner { isolation: isolate; }
.hero__copy::before {
content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--m)); right: calc(-1 * var(--m)); top: -48px; bottom: -20px;
background: linear-gradient(180deg, rgba(15, 8, 5, 0) 0, rgba(15, 8, 5, .6) 72px, rgba(15, 8, 5, .86) 150px, rgba(15, 8, 5, .9) 100%);
pointer-events: none;
}
.hero__eyebrow { display: none; }
.hero__h1 { max-width: none; text-shadow: 0 1px 20px rgba(15, 8, 5, .55); }
.chips { gap: 6px 12px; font-size: 11.5px; letter-spacing: 0; }
.chips li:first-child::before { display: none; }
.hero__film {
position: absolute; right: 0; bottom: calc(100% + 16px); z-index: 1;
flex-direction: column; gap: 8px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
}
.hero__film-ring { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--oro-luz); background: rgba(15, 8, 5, .5); color: var(--oro); transition: background-color .2s, color .2s; }
.hero__film-ring svg { width: 22px; height: 22px; margin-left: 3px; }
.hero__film:hover .hero__film-ring { background: var(--oro); color: var(--c1); }
.hero__film-t { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--crema); text-shadow: 0 1px 6px rgba(15, 8, 5, .95), 0 0 2px rgba(15, 8, 5, .9); }
.hero__actions .wa-lux { flex: 1 1 100%; }
}
@media (max-width: 767px) and (max-height: 760px) { .seal { display: none; } }
@media (max-width: 767px) and (max-height: 680px) {
.hero__h1 { font-size: 30px; }
.chips { display: none; }
.hero__index a { min-height: 44px; }
}
@media (min-width: 768px) {
.hero__veil { background:
linear-gradient(90deg, rgba(15, 8, 5, .92) 0%, rgba(15, 8, 5, .7) 34%, rgba(15, 8, 5, .18) 64%, rgba(15, 8, 5, .05) 100%),
linear-gradient(180deg, rgba(15, 8, 5, .6) 0%, rgba(15, 8, 5, 0) 22%, rgba(15, 8, 5, 0) 62%, rgba(15, 8, 5, .9) 100%); }
.hero__inner { padding-bottom: 48px; }
.hero__eyebrow { margin-bottom: 16px; }
.hero__line { margin-top: 16px; }
.hero__actions { margin-top: 28px; }
.hero__actions .wa-lux { flex: 0 0 auto; }
.chips { font-size: 13px; margin-top: 20px; }
.hero__pause { left: auto; right: 0; top: calc(var(--hdr-top) + 16px); }
.seal { top: auto; bottom: 104px; width: 148px; }
.seal text { font-size: 15px; }
}
@media (min-width: 1024px) {
.hero__index ol { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.hero__index li, .hero__index li:nth-child(-n + 4) { border-bottom: 0; }
.hero__index li:nth-child(4n) { border-right: 1px solid var(--filete-suave); }
.hero__index li:first-child { border-left: 1px solid var(--filete-suave); }
.hero__index a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 84px; padding: 18px 18px 14px; text-align: left; font-size: 14px; }
.hero__index .n { display: block; font: italic 400 15px/1 var(--serif); color: var(--oro); }
}
@media (min-width: 1600px) {
.hero__veil { background:
linear-gradient(90deg, rgba(15, 8, 5, .92) 0%, rgba(15, 8, 5, .7) 34%, rgba(15, 8, 5, .18) 64%, rgba(15, 8, 5, .05) 100%),
linear-gradient(180deg, rgba(15, 8, 5, .7) 0%, rgba(15, 8, 5, .15) 30%, rgba(15, 8, 5, 0) 55%, rgba(15, 8, 5, .9) 100%); }
.seal { width: 168px; bottom: 120px; }
}
.show { position: relative; background: var(--c1); padding-top: var(--sec); overflow-x: clip; }
.show__head { margin-bottom: 32px; }
.show__head h2 { max-width: 18ch; }
.show__bar { position: sticky; top: var(--hdr); z-index: 20; background: var(--c0); border-block: 1px solid var(--filete-suave); }
.show__pills { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding-inline: calc(var(--m) - 12px); scroll-padding-inline: var(--m); }
.show__pills::-webkit-scrollbar, .show__track::-webkit-scrollbar, .rail__track::-webkit-scrollbar { display: none; }
.show__pills a {
position: relative; flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
font: 500 13.5px/1 var(--sans); color: var(--crema-72); text-decoration: none; white-space: nowrap; transition: color .2s;
}
.show__pills a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--oro); transform: scaleX(0); transition: transform .25s var(--ease); }
.show__pills a:hover { color: var(--crema); }
.show__pills a[aria-current="true"] { color: var(--oro-luz); }
.show__pills a[aria-current="true"]::after { transform: scaleX(1); }
.show__track {
--card: calc(100vw - 80px);
position: relative; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
padding: 24px calc((100% - var(--card)) / 2) 0;
}
@media (min-width: 640px) { .show__track { --card: min(520px, 100vw - 160px); } }
.ch { position: relative; flex: 0 0 var(--card); scroll-snap-align: center; display: flex; flex-direction: column; }
.ch__title {
position: absolute; top: 0; left: 0; right: 0; z-index: 2;
display: flex; align-items: center; height: 56px; padding: 0 88px 0 20px;
background: var(--oro); color: var(--c1);
font: 700 13px/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.ch__n {
position: absolute; top: 0; right: 0; z-index: 3; height: 56px; padding-right: 20px;
display: flex; align-items: center; gap: 4px;
font: 500 12px/1 var(--sans); letter-spacing: .08em; color: rgba(22, 12, 7, .72); font-variant-numeric: tabular-nums;
}
.ch__map { display: none; }
.ch__media { --wm-off: 12px; position: relative; margin-top: 56px; aspect-ratio: 5 / 6; overflow: hidden; background: var(--c2); }
@media (min-width: 640px) { .ch__media { aspect-ratio: 1 / 1; } }
.ch__media::after { content: ""; position: absolute; inset: 12px; z-index: 2; border: 1px solid var(--filete); pointer-events: none; }
.ch__photo { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ch__img { width: 100%; height: 100%; object-fit: cover; }
.ch__cap {
position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px;
padding: 48px 28px 28px; pointer-events: none;
background: linear-gradient(rgba(15, 8, 5, 0), rgba(15, 8, 5, .86));
font: 500 13px/1.35 var(--sans); color: var(--crema);
padding-right: calc(var(--wm-off) + var(--wm-in) + var(--wm-w) + 12px);
}
.ch__cap .ref { flex: none; }
.ch__more {
position: absolute; z-index: 3; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 4px;
padding: 9px 10px 9px 14px; background: rgba(15, 8, 5, .82); font: 700 12px/1 var(--sans); letter-spacing: .02em; color: var(--crema);
}
.ch__more svg { width: 14px; height: 14px; color: var(--oro); }
.ch__text { padding-top: 16px; }
.ch__line { font-size: 16px; line-height: 1.5; color: var(--crema-72); max-width: 38ch; }
.ch__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ch__actions .btn--gold { flex: 1 1 auto; }
.ch__actions .btn--line { display: none; }
@media (min-width: 1024px) {
.show__pills { justify-content: center; }
.show__pills a { padding: 0 16px; font-size: 14px; }
.show__pills a::after { left: 16px; right: 16px; }
.show__track {
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: repeat(var(--n), auto);
column-gap: 64px; width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto;
overflow: visible; scroll-snap-type: none; padding: 0;
}
.ch { display: contents; }
.ch__text {
grid-column: 1; grid-row: var(--r);
min-height: 68svh;
display: flex; flex-direction: column; justify-content: center; padding: 56px 0;
scroll-margin-top: calc(var(--hdr) + var(--bar));
}
.ch__title {
position: static; height: auto; padding: 0; background: none; color: var(--crema);
font: 800 clamp(40px, 1.2rem + 2.6vw, 60px)/1.04 var(--sans); letter-spacing: -.02em; text-transform: none; max-width: 11ch;
}
.ch__n { position: static; height: auto; padding: 0; display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; color: var(--crema-60); }
.ch__num {
font: italic 400 88px/.9 var(--serif); letter-spacing: 0; color: var(--oro);
background: var(--metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
padding-right: .08em;
}
.ch__of { font: 300 13px/1 var(--sans); letter-spacing: .3em; padding-bottom: 10px; }
.ch__map { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-left: 24px; padding-bottom: 6px; }
.ch__map span { width: 5px; height: 28px; background: var(--nogal); }
.ch__map .is-past { background: var(--ambar); opacity: .55; }
.ch__map .is-cur { height: 40px; background: var(--oro); }
.ch__line { margin-top: 20px; font-size: 19px; max-width: 30ch; }
.ch__actions { margin-top: 32px; gap: 12px; }
.ch__actions .btn--gold { flex: 0 0 auto; }
.ch__actions .btn--line { display: inline-flex; }
.ch__more { display: none; }
.ch__media {
grid-column: 2; grid-row: 1 / -1; align-self: start;
position: sticky; top: calc(var(--hdr) + var(--bar));
margin-top: 0; height: calc(100svh - var(--hdr) - var(--bar)); aspect-ratio: auto;
margin-right: calc(-1 * var(--bleed));
background: var(--c1);
}
.ch__media::after { inset: 24px; }
.ch__media { --wm-off: 24px; }
.ch__cap { padding: 64px 48px 44px; font-size: 14px; padding-right: calc(var(--wm-off) + var(--wm-in) + var(--wm-w) + 16px); }
.js .ch__media { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.ch:not(.is-on):not(.is-near) .ch__media { display: none; }
.js .ch.is-on .ch__media { opacity: 1; visibility: visible; transition-delay: 0s; }
.js .ch__img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.js .ch.is-on .ch__img { transform: none; }
.js .ch__text > * { opacity: .22; transition: opacity .5s var(--ease); }
.js .ch.is-on .ch__text > *, .js .ch__text:focus-within > * { opacity: 1; }
}
.studio { background: var(--c0); }
.seg { display: inline-flex; padding: 4px; border: 1px solid var(--filete); border-radius: 999px; margin-bottom: 32px; }
.seg [role="tab"] {
min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none;
font: 700 14px/1 var(--sans); color: var(--crema-72); transition: background-color .2s, color .2s;
}
.seg [role="tab"]:hover { color: var(--crema); }
.seg [role="tab"][aria-selected="true"] { background: var(--oro); color: var(--c1); }
.studio__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
.studio__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
.studio .tool { position: sticky; top: calc(var(--hdr) + 24px); }
}
.rail { position: relative; min-width: 0; }
.rail__track {
display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); overscroll-behavior-x: contain;
margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); padding-bottom: 4px;
}
.rail__track:focus-visible { outline-offset: -2px; }
.rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail__track.is-drag * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .rail__track { cursor: grab; } }
.rail__nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rail__count { margin-right: auto; font: 500 12px/1 var(--sans); letter-spacing: .18em; color: var(--crema-60); font-variant-numeric: tabular-nums; }
.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.rail__head h2 { max-width: 20ch; }
.rail__head .rail__nav { display: none; margin: 0; }
@media (min-width: 1024px) {
.rail__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
.rail__track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.rail__track.is-end { -webkit-mask-image: none; mask-image: none; }
.rail__head .rail__nav { display: flex; }
.rail__head .rail__count { margin-right: 16px; }
.rail--block > .rail__track { margin-right: calc(-1 * var(--bleed)); padding-right: var(--bleed); }
}
.card { position: relative; flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.card--wide { width: 84%; }
.card--tall { width: 70%; }
.card--door { width: 56%; }
@media (min-width: 640px) { .card--wide { width: 72%; } .card--tall { width: 44%; } .card--door { width: 34%; } }
@media (min-width: 1024px) { .card--wide { width: calc((100% - 16px) / 1.12); } .card--tall { width: 300px; } .card--door { width: 260px; } .studio .card--tall { width: 46%; } }
.card__photo { --wm-off: 12px; position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--c2); cursor: zoom-in; }
.card__photo.is-fit { container-type: size; }
.card--wide .card__photo { aspect-ratio: 3 / 2; }
.card--tall .card__photo { aspect-ratio: 4 / 5; }
.card--door .card__photo { aspect-ratio: 2 / 3; }
.card__photo::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--filete); pointer-events: none; opacity: 0; transition: opacity .3s; }
.card__photo:hover::after, .card__photo:focus-visible::after { opacity: 1; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card__img.is-contain { object-fit: contain; background: var(--c2); }
.card__photo:hover .card__img { transform: scale(1.035); }
.card__cap { display: grid; justify-items: start; gap: 6px; padding-top: 16px; transition: opacity .2s; }
.card.is-peek .card__cap, .card--end.is-peek > * { opacity: 0; }
.card--end > * { transition: opacity .2s; }
.card__ref { font: 500 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.card__name { font: 700 16px/1.35 var(--sans); color: var(--crema); }
.card__wa {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
font: 700 14px/1 var(--sans); color: var(--oro); text-decoration: none;
border-bottom: 1px solid transparent; transition: color .2s;
}
.card__wa svg { width: 18px; height: 18px; }
.card__wa:hover { color: var(--oro-luz); }
.card--end {
display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 12px;
padding: 28px 20px 24px; border: 1px solid var(--filete); background: var(--c1);
}
.card--door.card--end { width: 72%; }
@media (min-width: 640px) { .card--door.card--end { width: 40%; } }
@media (min-width: 1024px) { .card--door.card--end { width: 260px; } }
.card__endq { font: 800 22px/1.15 var(--sans); color: var(--crema); text-wrap: balance; }
.card__endl { font-size: 15px; line-height: 1.5; color: var(--crema-72); margin-bottom: 8px; }
.card--end .btn { width: 100%; padding-inline: 16px; font-size: 14px; white-space: nowrap; }
.tool { border: 1px solid var(--filete); padding: 24px; background: var(--c1); }
.tool__q { font: 800 22px/1.2 var(--sans); color: var(--crema); margin-bottom: 16px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt {
display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px;
border: 1px solid var(--linea); background: transparent; text-align: left;
font: 700 14px/1.2 var(--sans); color: var(--crema-85);
transition: border-color .2s, background-color .2s, color .2s;
}
.opt svg, .tile svg { width: 40px; height: 40px; flex: none; }
.pm { fill: none; stroke: rgba(251, 244, 230, .3); stroke-width: 1.5; }
.pg { fill: rgba(242, 167, 27, .12); stroke: var(--oro); stroke-width: 1.5; stroke-linejoin: miter; transition: fill .2s; }
.pf { fill: none; stroke: var(--oro); stroke-width: 1.5; }
.pq { fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opt:hover { border-color: var(--filete); color: var(--crema); }
.opt[aria-pressed="true"] { border-color: var(--oro); background: rgba(242, 167, 27, .09); color: var(--oro-luz); }
.opt[aria-pressed="true"] .pg, .tile input:checked + span .pg { fill: rgba(242, 167, 27, .3); }
.plan { margin: 20px 0 8px; }
.plan svg { width: 100%; height: auto; max-height: 190px; overflow: visible; }
@media (min-width: 1024px) { .plan svg { max-height: 210px; } }
.plan__muro { fill: none; stroke: rgba(251, 244, 230, .3); stroke-width: 1.5; }
.plan__ghost path, .plan__ghost rect { fill: none; stroke: rgba(251, 244, 230, .26); stroke-width: 1.5; stroke-dasharray: 4 6; }
.plan__ghost path { fill: rgba(251, 244, 230, .05); }
.plan__ghost text { fill: rgba(251, 244, 230, .32); }
.plan__meson { fill: rgba(242, 167, 27, .14); stroke: var(--oro); stroke-width: 1.5; stroke-linejoin: miter; }
.plan__mod { fill: rgba(242, 167, 27, .08); stroke: var(--oro); stroke-width: 1.5; }
.plan__fino { fill: none; stroke: var(--oro); stroke-width: 1; }
.plan__cota { fill: none; stroke: var(--oro); stroke-width: 1; }
[data-plan="cocina"] > .plan__cota { stroke: rgba(251, 244, 230, .3); }
.plan text { font: 300 15px var(--sans); letter-spacing: .2em; fill: var(--crema); text-anchor: middle; }
.plan .plan__etq { font: 500 12px var(--sans); letter-spacing: .18em; fill: var(--oro); }
.plan__f { opacity: 0; transition: opacity .25s; }
.plan__f.is-on { opacity: 1; }
.plan__f.is-on [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trazo .7s var(--ease) both; }
@keyframes trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.tips { counter-reset: t; display: grid; gap: 8px; margin: 16px 0 24px; padding-top: 16px; border-top: 1px solid var(--linea); }
.tips li { counter-increment: t; display: grid; grid-template-columns: 24px 1fr; font-size: 15px; line-height: 1.45; color: var(--crema-72); }
.tips li::before { content: counter(t, decimal-leading-zero); font: 500 11px/2 var(--sans); letter-spacing: .1em; color: var(--oro); }
.tool__more {
display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 8px;
font: 700 13.5px/1.3 var(--sans); color: var(--crema-85); text-decoration: none; text-align: center;
}
.tool__more svg { width: 18px; height: 18px; color: var(--oro); transition: transform .2s; }
.tool__more:hover { color: var(--oro-luz); }
.tool__more:hover svg { transform: translateX(3px); }
@media (min-width: 640px) { .tool { padding: 32px; } .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .opt { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 104px; } }
@media (min-width: 1024px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opt { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 64px; } }
.models { background: var(--c1); }
.models .rail--block + .rail--block { margin-top: var(--sec); padding-top: var(--sec); border-top: 1px solid var(--linea); }
.film { background: var(--c0); padding-block: calc(var(--sec) * .75); }
.film__stage { display: grid; gap: 24px; }
.film__text { order: -1; }
.film__h { font-size: clamp(32px, 1.2rem + 2.6vw, 56px); }
.film__meta { margin-top: 12px; font: 500 13px/1.4 var(--sans); letter-spacing: .08em; color: var(--crema-72); }
.film__screen { --wm-off: 12px; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; outline-offset: 4px; box-shadow: 0 0 0 1px var(--filete); }
.film__screen::before { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid var(--filete-suave); pointer-events: none; }
.film__screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, rgba(15, 8, 5, .1) 40%, rgba(15, 8, 5, .6) 100%); transition: opacity .3s; }
.film__screen img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.film__screen:hover img { transform: scale(1.02); }
.film__ring {
position: absolute; z-index: 2; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--oro-luz); background: rgba(15, 8, 5, .62); color: var(--oro);
transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.film__ring svg { width: 30px; height: 30px; margin-left: 4px; }
.film__screen:hover .film__ring { transform: scale(1.06); background: var(--oro); color: var(--c1); }
@media (min-width: 1024px) {
.film__stage { grid-template-areas: "s"; }
.film__screen, .film__text { grid-area: s; }
.film__screen { aspect-ratio: 21 / 9; }
.film__screen::after { background: linear-gradient(90deg, rgba(15, 8, 5, .88) 0%, rgba(15, 8, 5, .55) 32%, rgba(15, 8, 5, 0) 60%), radial-gradient(120% 100% at 50% 50%, rgba(15, 8, 5, 0) 45%, rgba(15, 8, 5, .55) 100%); }
.film__text { order: 0; align-self: end; position: relative; z-index: 3; padding: 0 0 64px 64px; pointer-events: none; }
.film__ring { left: 62%; }
}
.quote { background: var(--c1); }
.quote__grid { display: grid; gap: 40px; }
.quote__h { max-width: 16ch; }
.steps { position: relative; display: grid; gap: 24px; }
.steps > li { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; align-items: start; }
.steps > li > :not(.steps__ico) { grid-column: 2; }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 23.5px; top: 48px; bottom: -24px; width: 1px; background: linear-gradient(var(--oro), var(--filete-suave)); }
.steps__ico { grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--filete); border-radius: 50%; background: var(--c1); color: var(--oro); }
.steps__ico svg { width: 24px; height: 24px; }
.steps h3 { font: 800 20px/1.25 var(--sans); padding-top: 10px; }
.steps p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--crema-72); }
.howto { margin-top: 4px; }
.howto summary { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.3 var(--sans); color: var(--oro); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--filete); text-underline-offset: 4px; }
.howto summary::-webkit-details-marker { display: none; }
.howto ol { list-style: decimal; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--crema-72); }
.compose { align-self: start; border: 1px solid var(--filete); padding: 28px 24px; background: var(--c0); }
.compose__k { font: 800 24px/1.2 var(--sans); color: var(--crema); }
.bubble { position: relative; margin: 20px 0 24px; padding: 18px 20px; background: var(--c2); border-left: 2px solid var(--oro); }
.bubble p { font: 500 14px/1.65 var(--sans); color: var(--crema-85); }
.bubble b { font-weight: 700; color: var(--oro-luz); }
.compose__alt { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; }
.compose__alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 14px/1 var(--sans); color: var(--crema-85); text-decoration: none; }
.compose__alt a:hover { color: var(--oro-luz); }
.compose__alt svg { width: 18px; height: 18px; color: var(--oro); }
@media (min-width: 1024px) {
.quote__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 96px; row-gap: 56px; align-items: start; }
.quote__h { grid-column: 1; grid-row: 1; }
.steps { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps > li:not(:last-child)::after { left: 48px; right: -32px; top: 23.5px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--oro), var(--filete-suave)); }
.steps > li { display: block; }
.steps__ico { margin-bottom: 20px; }
.steps h3 { padding-top: 0; }
.compose { grid-column: 2; grid-row: 1 / span 2; padding: 40px; }
}
.faq { background: var(--c0); }
.faq__grid { display: grid; gap: 32px; }
.faq__list { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0;
font: 700 16px/1.4 var(--sans); color: var(--crema); cursor: pointer; list-style: none; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro-luz); }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--oro); transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.6; color: var(--crema-72); max-width: 64ch; }
@media (min-width: 1024px) {
.faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr) + 40px); }
.faq__head h2 { font-size: clamp(40px, 1.2rem + 2.6vw, 60px); }
.faq summary { font-size: 17px; }
}
.loc { background: var(--c1); }
.loc__card { display: grid; border: 1px solid var(--filete); background: var(--c0); }
.loc__text { padding: 32px 24px; }
.loc h2 { font-size: clamp(26px, 1.05rem + 1.6vw, 38px); max-width: 20ch; }
.loc__resumen { margin-top: 16px; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--crema-85); }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px 8px 12px; border: 1px solid var(--linea); border-radius: 999px; font: 500 13px/1.35 var(--sans); color: var(--crema-85); }
.status__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--crema-60); }
.status.is-open { border-color: var(--filete); }
.status.is-open .status__dot { background: var(--oro); box-shadow: 0 0 0 4px rgba(242, 167, 27, .18); }
.facts { display: grid; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.facts dt { font: 300 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
.facts dd { font-size: 16px; line-height: 1.5; color: var(--crema-85); }
.rows { margin-top: 24px; border-top: 1px solid var(--linea); }
.row {
display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 4px 10px 0;
border-bottom: 1px solid var(--linea); color: var(--crema); text-decoration: none; transition: background-color .2s;
}
.row__i { width: 22px; height: 22px; flex: none; color: var(--oro); }
.row__t { display: grid; gap: 5px; flex: 1; min-width: 0; }
.row__k { font: 300 11px/1.2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.row__v { font: 500 16px/1.3 var(--sans); color: var(--crema); overflow-wrap: anywhere; transition: color .2s; }
.row__f { width: 18px; height: 18px; flex: none; color: var(--crema-60); transition: transform .2s, color .2s; }
.row:hover .row__v { color: var(--oro-luz); }
.row:hover .row__f { transform: translateX(3px); color: var(--oro); }
.loc__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.loc__actions .btn { flex: 1 1 auto; padding-inline: 18px; }
.facts .linkbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; text-decoration: none; }
.facts .linkbtn svg { width: 18px; height: 18px; }
.facts .linkbtn:hover { color: var(--oro-luz); }
.loc__map { position: relative; min-height: 360px; border-top: 1px solid var(--filete); background: var(--c0); }
.loc__map iframe {
position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 0;
background: var(--c2); box-shadow: 0 0 0 1px var(--filete); filter: saturate(.92) brightness(.95);
}
@media (min-width: 1024px) {
.loc__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.loc__text { padding: 48px; }
.loc__map { min-height: 100%; border-top: 0; border-left: 1px solid var(--filete); }
.loc__map iframe { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
}
.fin { position: relative; color: var(--c1); background: linear-gradient(100deg, #E2A11B 0%, #F2A71B 32%, #F4AF33 52%, #F2A71B 72%, #E09F1B 100%); }
.fin__listones { display: block; height: 12px; background: var(--listones); background-size: 156px 100%; filter: brightness(.8); }
.fin__grid { display: grid; gap: 24px; padding-block: 48px 40px; }
.fin h2 { color: var(--c1); font-size: clamp(30px, 1.2rem + 2.6vw, 56px); max-width: 18ch; }
.fin h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: 0; padding-right: .04em; }
.fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.fin .wa-lux::before { box-shadow: 0 14px 30px -12px rgba(54, 24, 9, .75); }
.fin .wa-lux:focus-visible { outline-color: var(--c1); }
.fin__tel { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1 var(--sans); color: var(--c1); text-underline-offset: 4px; }
.fin__wa { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.fin__wa-k { flex: 1 1 100%; font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c1); }
.fin__wa a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 15px/1 var(--sans); color: var(--c1); text-underline-offset: 4px; }
.fin__wa svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 480px) { .fin__wa-k { flex: none; margin-right: 4px; } }
.fin__firma { font: 500 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c1); }
@media (min-width: 480px) { .fin__firma { letter-spacing: .32em; } }
@media (min-width: 1024px) {
.fin__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-block: 88px 72px; column-gap: 64px; gap: 28px 64px; }
.fin__actions { justify-content: flex-end; }
.fin__wa { justify-content: flex-end; }
.fin__firma { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid rgba(22, 12, 7, .25); letter-spacing: .4em; }
}
.pie { background: var(--c0); border-top: 1px solid var(--filete-suave); font-size: 14px; }
.pie__top { display: grid; gap: 20px; padding-block: 36px 24px; }
.pie__brand { margin: 0; }
.pie__brand .brand__sym { width: 40px; }
.pie__linea { margin-top: 10px; max-width: 40ch; font-size: 14px; line-height: 1.55; color: var(--crema-72); }
.pie__contacto { display: grid; }
.pie__contacto > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 44px; border-bottom: 1px solid var(--linea); }
.pie__contacto > div:first-child { border-top: 1px solid var(--linea); }
.pie__contacto dt { font: 300 10.5px/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.pie__contacto dd { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.pie__contacto a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 500 14.5px/1.2 var(--sans); color: var(--crema); text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.pie__contacto a:hover { color: var(--oro-luz); }
.pie__sep { width: 1px; height: 14px; margin: 0 14px; background: var(--filete); }
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13.5px/1 var(--sans); color: var(--crema-85); text-decoration: none; transition: color .2s; }
.pie__nav a:hover { color: var(--oro-luz); }
.pie__base {
display: grid; gap: 6px 24px; padding-block: 16px calc(20px + env(safe-area-inset-bottom));
border-top: 1px solid var(--filete-suave); font: 500 12px/1.5 var(--sans); color: var(--crema-60);
}
.pie__aviso { font: 400 12px/1.55 var(--serif); color: var(--crema-60); }
.pie__legal, .footer__credit { display: flex; align-items: center; min-height: 32px; }
.footer__credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--crema-85); text-decoration: none; }
.footer__credit strong { margin-left: .3em; font-weight: 700; color: var(--crema); letter-spacing: .02em; }
.footer__credit strong span { color: var(--oro); }
.footer__credit a:hover strong { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px; }
@media (min-width: 640px) {
.pie__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 40px; align-items: start; }
.pie__nav { grid-column: 1 / -1; }
.pie__base { grid-template-columns: minmax(0, 1fr) auto; }
.pie__aviso { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.pie__top { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 56px; padding-block: 40px 28px; }
.pie__nav { grid-column: auto; display: grid; grid-template-columns: repeat(2, auto); gap: 0 32px; align-content: start; }
.pie__nav a { min-height: 36px; }
.footer__credit a { min-height: 32px; }
.pie__contacto > div, .pie__contacto a { min-height: 36px; }
.pie__contacto > div:first-child { border-top: 0; }
.pie__contacto > div:last-child { border-bottom: 0; }
.pie__contacto > div { border-bottom-color: rgba(251, 244, 230, .08); }
.pie__base { padding-block: 14px 20px; }
}
.wa-lux {
position: relative; isolation: isolate; border: 0; background: none; color: var(--oro-luz);
translate: var(--mx, 0) var(--my, 0);
transition: color .3s var(--ease), transform .3s var(--ease), translate .35s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.wa-lux::before {
content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 22px 1px rgba(242, 167, 27, .38), 0 16px 34px -14px rgba(242, 167, 27, .7);
opacity: .7; transition: opacity .3s;
}
.wa-lux__fx { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.wa-lux__fx::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1;
transform: translate(-50%, -50%);
background: conic-gradient(from 0deg, #7A4A22, #DF9F1B 10%, #FBE3A6 16%, #F2A71B 22%, #7A4A22 40%, #5A3416 50%, #DF9F1B 60%, #FBE3A6 66%, #F2A71B 72%, #7A4A22 90%);
}
.wa-lux__fx::after {
content: ""; position: absolute; inset: 1.5px; border-radius: inherit;
background: linear-gradient(180deg, #26150B 0%, #120904 100%);
box-shadow: inset 0 0 16px rgba(242, 167, 27, .12), inset 0 1px 0 rgba(251, 227, 166, .1);
}
.wa-lux__oro {
position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
background: linear-gradient(180deg, #F8C250 0%, #F2A71B 52%, #DC9917 100%);
box-shadow: inset 0 1px 0 rgba(255, 244, 216, .8), inset 0 -1px 0 rgba(122, 74, 34, .4);
}
.wa-lux__brillo {
position: absolute; z-index: 2; top: -30%; bottom: -30%; left: 0; width: 42%;
background: linear-gradient(100deg, transparent 10%, rgba(255, 245, 220, .34) 50%, transparent 90%);
transform: translateX(-160%) skewX(-18deg);
}
.wa-lux__ico { color: var(--oro); filter: drop-shadow(0 0 5px rgba(242, 167, 27, .55)); transition: color .3s; }
.wa-lux--oro { color: var(--c1); }
.wa-lux--oro .wa-lux__oro { opacity: 1; }
.wa-lux--oro .wa-lux__ico { color: var(--c1); filter: none; }
.wa-lux--oro .wa-lux__brillo { background: linear-gradient(100deg, transparent 10%, rgba(255, 252, 240, .62) 50%, transparent 90%); }
.wa-lux:focus-visible { outline: 2px solid var(--oro-luz); outline-offset: 4px; }
.wa-lux:active { transform: scale(.97); transition-duration: .08s; }
@media (hover: hover) {
.wa-lux:hover { transform: translateY(-2px); color: var(--c1); }
.wa-lux:hover::before { opacity: 1; }
.wa-lux:hover .wa-lux__oro { opacity: 1; }
.wa-lux:hover .wa-lux__ico { color: var(--c1); filter: none; }
.wa-lux--oro:hover .wa-lux__oro { filter: brightness(1.07); }
.wa-lux:active { transform: translateY(0) scale(.97); }
.fin .wa-lux:hover { color: var(--crema); }
.fin .wa-lux:hover .wa-lux__oro { opacity: 0; }
.fin .wa-lux:hover .wa-lux__ico { color: var(--oro); filter: drop-shadow(0 0 5px rgba(242, 167, 27, .55)); }
}
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px;
padding: 10px var(--m) calc(10px + env(safe-area-inset-bottom));
background: var(--c0); border-top: 1px solid var(--filete-suave);
transform: translateY(110%); transition: transform .25s var(--ease);
}
.dock.is-on { transform: none; }
.dock__wa { flex: 1; min-width: 0; }
.dock__wa [data-dock-t] { overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
.dock__tel { width: 48px; height: 48px; }
.dock__wa::after { content: ""; position: absolute; inset: 0; z-index: -3; border-radius: inherit; border: 1px solid rgba(251, 227, 166, .75); opacity: 0; pointer-events: none; }
.dock__tip { display: none; }
@media (max-width: 1023px) {
.dock__wa { color: var(--c1); }
.dock__wa::before { box-shadow: 0 0 16px rgba(242, 167, 27, .34); }
.dock__wa .wa-lux__oro { opacity: 1; }
.dock__wa .wa-lux__ico { color: var(--c1); filter: none; }
.dock__wa .wa-lux__brillo { background: linear-gradient(100deg, transparent 10%, rgba(255, 252, 240, .62) 50%, transparent 90%); }
.dock.is-quiet .dock__wa:not(:hover) { color: var(--oro-luz); }
.dock.is-quiet .dock__wa:not(:hover) .wa-lux__oro { opacity: 0; }
.dock.is-quiet .dock__wa:not(:hover) .wa-lux__ico { color: var(--oro); filter: drop-shadow(0 0 5px rgba(242, 167, 27, .55)); }
.dock.is-quiet .dock__wa::before { opacity: .3; }
.dock:not(.is-quiet) .dock__wa .wa-lux__fx::before { animation-play-state: paused; }
}
@media (max-width: 379px) { .dock__wa { padding-inline: 16px; font-size: 14px; gap: 8px; } }
@media (min-width: 1024px) {
.dock { left: auto; right: var(--m); bottom: 24px; padding: 0; background: none; border: 0; transform: translateY(calc(100% + 96px)); }
.dock__tel { display: none; }
.dock__wa { min-height: 56px; padding: 0 28px 0 24px; gap: 12px; font-size: 15.5px; }
.dock__wa .wa-lux__ico { width: 22px; height: 22px; }
.dock.is-on.is-quiet { transform: translateY(calc(100% + 96px)); }
.dock__tip {
position: absolute; right: 4px; bottom: calc(100% + 12px); display: inline-flex; align-items: center; gap: 10px;
padding: 9px 14px 9px 12px; white-space: nowrap; border: 1px solid var(--filete); border-radius: 999px;
background: rgba(15, 8, 5, .94); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .85);
font: 500 12.5px/1.2 var(--sans); color: var(--crema-85);
opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.dock.is-on.is-asoma .dock__tip, .dock.is-on:hover .dock__tip, .dock.is-on:focus-within .dock__tip { opacity: 1; transform: none; }
}
.dock__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--crema-60); }
.dock__tip.is-open .dock__dot { background: var(--oro); }
.dock__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--oro); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.wa-lux.is-vivo .wa-lux__fx::before { animation: wa-gira 5s linear infinite; }
.wa-lux--oro.is-vivo .wa-lux__fx::before { animation: none; }
.wa-lux.is-vivo .wa-lux__brillo { animation: wa-brillo 5.6s ease-in-out 1.2s infinite; }
.wa-lux.is-vivo::before { animation: wa-respira 3.2s ease-in-out infinite alternate; }
.wa-lux.is-vivo .wa-lux__ico { animation: wa-timbre 6.4s ease-in-out 2s infinite; }
.wa-lux.is-vivo:hover::before { animation: none; }
.dock.is-on .dock__wa.is-vivo::after { animation: wa-onda 5.6s cubic-bezier(.2, .6, .3, 1) .6s infinite; }
.dock.is-on .dock__tip.is-open .dock__dot::after { animation: wa-punto 2s ease-out infinite; }
@keyframes wa-gira { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes wa-brillo { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes wa-respira { from { opacity: .4; } to { opacity: 1; } }
@keyframes wa-timbre { 0%, 86%, 100% { transform: rotate(0); } 88.5% { transform: rotate(-14deg); } 91% { transform: rotate(12deg); } 93.5% { transform: rotate(-8deg); } 96% { transform: rotate(4deg); } }
@keyframes wa-onda { 0% { transform: scale(1); opacity: .8; } 32%, 100% { transform: scale(1.06, 1.5); opacity: 0; } }
@keyframes wa-punto { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
.wa-lux:hover .wa-lux__ico { animation: wa-timbre-ya .7s ease-in-out; }
@keyframes wa-timbre-ya { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } }
}
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: var(--crema-85); background: var(--c0); overscroll-behavior: contain; }
dialog::backdrop { background: rgba(8, 4, 2, .84); }
@media (prefers-reduced-motion: no-preference) {
dialog[open] { animation: aparecer .2s var(--ease) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.menu { width: 100%; height: 100%; height: 100dvh; inset: 0; margin: 0; background: var(--c0); display: none; }
.menu[open] { display: flex; flex-direction: column; overflow-y: auto; }
@media (prefers-reduced-motion: no-preference) {
.menu[open] { animation: revelar .3s var(--ease) both; }
@keyframes revelar { from { clip-path: circle(0 at calc(100% - 38px) 28px); } to { clip-path: circle(150% at calc(100% - 38px) 28px); } }
.menu[open] .menu__cats li { animation: entrar .32s var(--ease) both; animation-delay: calc(60ms + var(--k) * 28ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; flex: none; }
.brand--static { margin: 0; }
.menu__body { flex: 1; padding-top: 16px; }
.menu__k { font: 300 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); margin-bottom: 8px; }
.menu__cats { border-top: 1px solid var(--linea); }
.menu__cats a {
display: flex; align-items: baseline; gap: 16px; min-height: 48px; padding: 11px 0;
border-bottom: 1px solid var(--linea); font: 700 19px/1.2 var(--sans); color: var(--crema); text-decoration: none;
}
.menu__cats .n { width: 24px; font: italic 400 15px/1 var(--serif); color: var(--oro); }
.menu__cats a:hover { color: var(--oro-luz); }
.menu__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
.menu__more a { display: flex; align-items: center; min-height: 44px; font: 500 15px/1.25 var(--sans); color: var(--crema-85); text-decoration: none; }
.menu__more a:hover { color: var(--oro-luz); }
.menu__foot { position: sticky; bottom: 0; flex: none; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--c0); box-shadow: 0 -1px 0 var(--linea); }
.menu__foot .status { margin-top: 0; }
.menu__cta { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; margin-top: 12px; }
.menu__dir { margin-top: 10px; font: 500 12.5px/1.4 var(--sans); color: var(--crema-60); }
.cine { width: 100%; height: 100%; height: 100dvh; margin: 0; background: #0a0503; }
.cine[open] { display: grid; place-items: center; }
.cine__box { width: min(100%, 1200px, (100dvh - 200px) * 16 / 9); padding: 0 var(--m); }
.cine__top { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.cine__t { flex: 1; font: 300 12px/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.cine__ver { display: inline-flex; padding: 3px; border: 1px solid var(--filete); border-radius: 999px; }
.cine__ver button { min-height: 40px; min-width: 52px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 700 13px/1 var(--sans); color: var(--crema-72); }
.cine__ver button[aria-pressed="true"] { background: var(--oro); color: var(--c1); }
.cine__frame { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px var(--filete); }
.cine__frame video { width: 100%; height: 100%; }
.cine__bottom { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0 24px; }
.cine__desc { flex: 1 1 260px; font-size: 14px; line-height: 1.6; color: var(--crema-72); }
.cine__desc summary { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1 var(--sans); color: var(--crema-85); cursor: pointer; }
.cine__desc p { max-height: 28vh; overflow: auto; padding-bottom: 8px; }
.viewer { width: 100%; height: 100%; height: 100dvh; margin: 0; background: #0a0503; }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer__bars { display: flex; gap: 4px; padding: 14px 76px 0 16px; height: 18px; }
.viewer__bars span { flex: 1; height: 2px; background: rgba(251, 244, 230, .22); transition: background-color .2s; }
.viewer__bars .is-past, .viewer__bars .is-now { background: var(--oro); }
.viewer__count { position: absolute; left: 16px; top: 28px; font: 500 12px/1 var(--sans); letter-spacing: .18em; color: var(--crema-72); }
.viewer__x { position: absolute; right: 12px; top: 8px; z-index: 3; }
.viewer__fig { position: relative; min-height: 0; margin: 40px 0 0; touch-action: pan-y pinch-zoom; container-type: size; }
.viewer__frame {
position: absolute; inset: 0; margin: auto;
width: min(100cqw, 100cqh * var(--ar, 1)); height: min(100cqh, 100cqw / var(--ar, 1));
transition: opacity .2s;
}
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer__tap { position: absolute; top: 0; bottom: 0; width: 34%; display: flex; align-items: center; padding: 0 12px; border: 0; background: none; color: var(--crema); }
.viewer__tap--prev { left: 0; justify-content: flex-start; }
.viewer__tap--next { right: 0; justify-content: flex-end; }
.viewer__tap .ico { pointer-events: none; opacity: .9; }
.viewer__info { padding: 16px var(--m) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete-suave); background: var(--c0); }
.viewer__cat { font: 300 11px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.viewer__name { margin-top: 6px; font: 800 20px/1.25 var(--sans); color: var(--crema); }
.viewer__line { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--crema-72); }
.viewer__ref { margin-top: 8px; font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--crema-60); }
.viewer__actions { display: flex; gap: 8px; margin-top: 16px; }
.viewer__actions .btn { flex: 1; }
@media (min-width: 1024px) {
.viewer[open] { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr); }
.viewer__bars { grid-column: 1 / -1; padding-right: 88px; }
.viewer__fig { margin: 40px 0 32px 32px; }
.viewer__info { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; margin: 40px 0 32px; border-top: 0; border-left: 1px solid var(--filete-suave); padding: 0 40px; background: none; }
.viewer__name { font-size: 26px; }
.viewer__line { font-size: 17px; }
}
.sheet { width: 100%; height: 100%; height: 100dvh; margin: 0; background: var(--c0); }
.sheet[open] { display: block; }
.sheet__form { display: flex; flex-direction: column; height: 100%; }
.sheet__top, .sheet__foot { flex: none; }
.sheet__top { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px var(--m) 20px; }
.sheet__t { font: 300 12px/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.sheet__n { margin-left: auto; font: 500 13px/1 var(--sans); color: var(--crema-72); font-variant-numeric: tabular-nums; }
.sheet__prog { position: absolute; left: var(--m); right: var(--m); bottom: 0; display: flex; gap: 4px; }
.sheet__prog span { flex: 1; }
.sheet__prog span { height: 6px; background: rgba(251, 244, 230, .12); transition: background-color .2s; }
.sheet__prog span.is-on { background-image: var(--listones); background-size: 156px 100%; }
.sheet__steps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px var(--m) 24px; }
.step { display: none; }
.step.is-on { display: block; animation: paso .2s var(--ease) both; }
@keyframes paso { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.step__q { display: block; margin-bottom: 20px; font: 800 clamp(26px, 1rem + 2.6vw, 36px)/1.1 var(--sans); color: var(--crema); text-wrap: balance; }
.step__help { margin: -8px 0 20px; font-size: 15px; line-height: 1.5; color: var(--crema-72); }
.step__lbl { display: block; margin: 24px 0 10px; font: 700 15px/1.3 var(--sans); color: var(--crema-85); }
.step__lbl:first-of-type { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; display: block; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile > span {
display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; height: 100%;
border: 1px solid var(--linea); font: 700 16px/1.25 var(--sans); color: var(--crema-85);
transition: border-color .15s, background-color .15s, color .15s;
}
.tile:hover > span { border-color: var(--filete); }
.tile input:checked + span { border-color: var(--oro); background: rgba(242, 167, 27, .1); color: var(--oro-luz); }
.tile input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.tile--wide { grid-column: 1 / -1; }
.tiles--plan > .tile > span { flex-direction: column; justify-content: center; text-align: center; min-height: 112px; }
.tiles--plan svg { width: 48px; height: 48px; }
.tiles--chips > .tile > span { min-height: 52px; font-size: 15px; }
.tiles--prod > .tile > span { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 96px; font-size: 15px; }
.tiles--prod svg { width: 40px; height: 40px; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tiles--prod input:checked + span svg { stroke: var(--oro-luz); }
.sw { flex: none; width: 28px; height: 28px; border: 1px solid rgba(251, 244, 230, .3); }
.sw--blanco { background: #F4F0E8; }
.sw--clara { background: linear-gradient(90deg, #D8B48A, #C49A6C 40%, #D3AE83 70%, #C29870); }
.sw--oscura { background: linear-gradient(90deg, #6A3A1C, #5A2F16 40%, #70401F 70%, #55301A); }
.sw--gris { background: #8C8782; }
.sw--nose { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(251, 244, 230, .3) 4px 5px); }
.field {
width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid rgba(251, 244, 230, .28); border-radius: 0;
background: var(--c1); font: 500 17px/1.3 var(--sans); color: var(--crema);
}
.field::placeholder { color: rgba(251, 244, 230, .45); }
.field:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 1px var(--oro); }
.field:disabled { opacity: .4; }
.field--msg { padding: 16px; min-height: 0; font: 500 15px/1.6 var(--sans); resize: vertical; }
.medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.medidas label { position: relative; display: grid; gap: 8px; font: 700 14px/1 var(--sans); color: var(--crema-85); }
.medidas i { position: absolute; right: 12px; bottom: 20px; font: normal 500 13px/1 var(--sans); color: var(--crema-60); pointer-events: none; }
.medidas .field { padding-right: 40px; text-align: left; font-size: 20px; }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 16px; font: 500 15px/1.3 var(--sans); color: var(--crema-85); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--oro); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper input { width: 96px; min-height: 64px; text-align: center; font: 800 28px/1 var(--sans); color: var(--crema); background: var(--c1); border: 1px solid rgba(251, 244, 230, .28); }
.stepper input:focus { border-color: var(--oro); outline: none; }
.linkbtn { min-height: 44px; padding: 0; border: 0; background: none; font: 700 14px/1 var(--sans); color: var(--oro); text-decoration: underline; text-underline-offset: 4px; }
.notes { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--crema-72); }
.notes li { position: relative; padding-left: 18px; }
.notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--oro); transform: rotate(45deg); }
.notes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--crema); text-underline-offset: 4px; }
.notes li { line-height: 1.5; }
.sheet__foot { display: flex; align-items: center; gap: 8px; padding: 12px var(--m) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete-suave); background: var(--c0); }
.sheet__foot [data-s-next], .sheet__foot [data-s-send] { margin-left: auto; }
.sheet__foot [data-s-send] { flex: 1 1 auto; max-width: 340px; min-width: 0; }
.msgtools { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.msgtools .linkbtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.msgtools svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
.sheet { width: min(760px, 100% - 48px); height: auto; max-height: min(800px, 100dvh - 48px); margin: auto; border: 1px solid var(--filete); }
.sheet__form { height: auto; min-height: min(560px, 100dvh - 48px); max-height: min(800px, 100dvh - 50px); }
.sheet__top { padding: 20px 32px 24px; }
.sheet__prog { left: 32px; right: 32px; }
.sheet__steps { padding: 40px 32px 32px; }
.sheet__foot { padding: 16px 32px; }
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--plan, .tiles--chips, .tiles--prod { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--tono { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile--wide { grid-column: auto; }
}
.toast {
position: fixed; left: 50%; bottom: 96px; z-index: 90; padding: 12px 20px; border-radius: 999px;
background: var(--crema); color: var(--c1); font: 700 14px/1 var(--sans);
opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) {
.js .liston { transform: scaleX(0); animation: liston .9s var(--ease) .45s forwards; }
@keyframes liston { to { transform: scaleX(1); } }
.js .hero__h1 .oro { animation: brillo 1.8s var(--ease) .3s both; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 50% 0; } }
.seal__ring { animation: girar 60s linear infinite; }
.hero.is-paused .seal__ring { animation-play-state: paused; }
@keyframes girar { to { transform: rotate(360deg); } }
.hero__eyebrow, .hero__h1, .hero__line, .hero__actions, .chips { animation: subir .7s var(--ease) both; }
.hero__h1 { animation-delay: .06s; animation-name: subir-h1; }
@keyframes subir-h1 { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__line { animation-delay: .14s; }
.hero__actions { animation-delay: .2s; }
.chips { animation-delay: .26s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .hero__actions { animation-name: fundir; } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.hdr__prog { animation: none !important; }
.wa-lux, .wa-lux *, .wa-lux::before, .wa-lux::after, .wa-lux__fx::before, .dock__dot::after { animation: none !important; }
.wa-lux__brillo, .dock__wa::after { display: none; }
.wa-lux, .wa-lux:hover, .wa-lux:active { transform: none; translate: none; }
.hero .oro { background-position: 50% 0; }
}
@media (max-width: 359px) {
.pie__sep { display: none; }
.pie dd > a[data-wa-fijo] { display: block; }
.dock__wa { font-size: 14px; letter-spacing: 0; padding-inline: 14px; gap: 8px; }
}