@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../letras/martian-mono-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../letras/martian-mono-latin.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: 'Martian Mono'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../letras/martian-mono-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../letras/martian-mono-latin.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: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: block; src: url("../letras/sofia-sans-extra-condensed-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: block; src: url("../letras/sofia-sans-extra-condensed-latin.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: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 900; font-display: block; src: url("../letras/sofia-sans-extra-condensed-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 900; font-display: block; src: url("../letras/sofia-sans-extra-condensed-latin.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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url("../letras/source-serif-4-cursiva-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url("../letras/source-serif-4-cursiva-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url("../letras/source-serif-4-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url("../letras/source-serif-4-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url("../letras/source-serif-4-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url("../letras/source-serif-4-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url("../letras/source-serif-4-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url("../letras/source-serif-4-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 800; font-display: swap; src: url("../letras/source-serif-4-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 800; font-display: swap; src: url("../letras/source-serif-4-latin.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; }
:root {
--noche: #020202;
--carbon: #0C0D0F;
--hueso: #ECE8E1;
--papel: #F7F4EF;
--arena: #DAD2C6;
--linea: #D3CDC3;
--linea-arena: #C4BAAC;
--tinta: #141414;
--piedra: #5B5751;
--humo: #8E8A83;
--rojo: #E1002B;
--rojo-hondo: #BD0024;
--rojo-vivo: #FF4A5E;
--rojo-texto: #B8001F;
--display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
--texto: "Source Serif 4", Georgia, "Times New Roman", serif;
--dato: "Martian Mono", ui-monospace, "SF Mono", Consolas, monospace;
--lateral: clamp(20px, 4.4vw, 68px);
--cab: 72px;
--alto-pantalla: 100vh;
--suave: cubic-bezier(.2, .75, .2, 1);
--muelle: cubic-bezier(.3, 1.6, .5, 1);
--grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
--sombra-pieza: 0 2px 4px rgba(20, 20, 20, .08), 0 40px 70px -40px rgba(20, 20, 20, .55);
}
@supports (height: 100svh) { :root { --alto-pantalla: 100svh; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; scroll-behavior: smooth; background: var(--noche); }
body {
margin: 0; background: var(--hueso); color: var(--tinta);
font-family: var(--texto); font-size: 17.5px; line-height: 1.55;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.precio, .resenas-fuentes, .datos dd, .lectura-tecnica, .cifra, .credenciales dt { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
::selection { background: var(--rojo); color: #fff; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 120; background: var(--hueso); color: var(--tinta); padding: 10px 14px; font-family: var(--dato); font-size: 12px; }
.saltar:focus { left: 8px; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--rojo); vertical-align: -3px; }
.ico-boton { width: 16px; height: 16px; color: currentColor; margin: 0 2px; transition: transform .4s var(--suave); }
.boton:hover .ico-boton { transform: translateX(3px); }
.antetitulo {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
font-family: var(--dato); font-size: 11px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.antetitulo-claro { color: var(--rojo-texto); }
.antetitulo-oscuro { color: var(--rojo-vivo); }
.sala-num {
display: inline-block; padding: 5px 9px 4px; border-radius: 2px;
background: var(--tinta); color: var(--hueso); letter-spacing: .14em; white-space: nowrap;
transform-origin: left; transition: transform .7s var(--muelle) .1s, opacity .5s .1s;
}
.antetitulo-oscuro .sala-num { background: var(--hueso); color: var(--tinta); }
.por-aparecer .sala-num, .por-aparecer.antetitulo .sala-num { transform: scaleX(0); opacity: 0; }
.aparecido .sala-num, .aparecido.antetitulo .sala-num { transform: none; opacity: 1; }
.punto { color: var(--rojo); -webkit-text-fill-color: var(--rojo); }
.iluminado { color: var(--hueso); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.iluminado {
background:
linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat,
linear-gradient(180deg, #FFFFFF 0%, #EDE8DF 38%, #A6A198 78%, #7E7A73 100%);
background-size: 260% 100%, 100% 100%;
background-position: 160% 0, 0 0;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.activa .iluminado { animation: barrido 1.6s var(--suave) both .2s; }
}
@keyframes barrido { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.titulo-seccion {
font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(40px, 5.2vw, 90px); line-height: .9; max-width: 17ch; text-wrap: balance; color: var(--tinta);
}
.titulo-claro { color: var(--hueso); }
.js-titulo { clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: clip-path 1.1s var(--suave), translate 1.1s var(--suave); }
.js-titulo.aparecido { clip-path: inset(-12% -2% -12% -2%); translate: 0 0; }
.etiqueta { font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); }
.enlace {
display: inline-block; font-family: var(--dato); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
padding-bottom: 4px; background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 100% / 100% 1px;
transition: background-size .5s var(--suave), color .3s;
}
.enlace:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--rojo-texto); }
.enlace-claro { color: var(--hueso); }
.enlace-claro:hover { color: var(--rojo-vivo); }
.boton {
--alza: 0px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden;
min-height: 46px; padding: 0 22px; border-radius: 3px;
font-family: var(--dato); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
text-decoration: none; white-space: nowrap; isolation: isolate;
transform: translateY(var(--alza));
transition: transform .35s var(--suave), background-color .25s, color .25s, border-color .25s, box-shadow .3s;
}
.boton:hover { --alza: -2px; }
.boton:active { --alza: 1px; transition-duration: .08s; }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--suave); }
.boton:hover::before { transform: translateY(0); }
.boton-rojo { background: var(--rojo); color: #fff; box-shadow: 0 10px 24px -12px rgba(225, 0, 43, .7); }
.boton-rojo::before { background: var(--tinta); }
.boton-rojo:hover { box-shadow: 0 16px 30px -12px rgba(20, 20, 20, .55); }
.boton-linea { border: 1px solid rgba(236, 232, 225, .34); color: var(--hueso); }
.boton-linea::before { background: var(--hueso); }
.boton-linea:hover { color: var(--tinta); border-color: var(--hueso); }
.boton-tinta { border: 1px solid rgba(20, 20, 20, .32); color: var(--tinta); }
.boton-tinta::before { background: var(--tinta); }
.boton-tinta:hover { color: var(--hueso); border-color: var(--tinta); }
.boton-tinta:hover .ico-boton { color: var(--rojo-vivo); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.estrellas { color: var(--rojo); letter-spacing: .12em; white-space: nowrap; }
.estrellas i { font-style: normal; display: inline-block; }
.estrellas.por-brillar i { scale: 0; transition: scale .5s var(--muelle); transition-delay: calc(var(--k, 0) * 70ms + .15s); }
.aparecido .estrellas.por-brillar i, .estrellas.por-brillar.aparecido i { scale: 1; }
.cabecera {
position: fixed; inset: 0 0 auto 0; z-index: 40;
display: flex; align-items: center; gap: 28px;
height: var(--cab); padding: 0 var(--lateral);
color: var(--hueso);
transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--suave);
}
.cabecera[data-sobre="dia"] { color: var(--tinta); }
.cabecera.con-fondo[data-sobre="noche"] { background: rgba(2, 2, 2, .82); }
.cabecera.con-fondo[data-sobre="dia"] { background: rgba(236, 232, 225, .92); box-shadow: 0 1px 0 var(--linea); }
.cabecera.con-fondo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cabecera.escondida { transform: translateY(-101%); }
.cabecera:focus-within { transform: none; }
.marca { display: block; text-decoration: none; margin-right: auto; color: inherit; line-height: 0; }
.marca-logo { display: block; height: 43px; width: auto; aspect-ratio: 2845 / 834; }
.menu { display: flex; gap: 26px; }
.menu a {
font-family: var(--dato); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
opacity: .8; padding: 6px 0; background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 100% / 0 2px;
transition: opacity .25s, background-size .45s var(--suave);
}
.menu a:hover, .menu a[aria-current="true"] { opacity: 1; background-size: 100% 2px; }
.boton-cabecera { min-height: 40px; padding: 0 16px; }
.progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rojo); transform-origin: left; transform: scaleX(var(--avance, 0)); }
.sala-clara { position: relative; background: var(--hueso); padding: clamp(84px, 11vw, 160px) var(--lateral); overflow: clip; }
.sala-arena { background: var(--arena); }
.sala-papel { background: var(--papel); }
.sala-clara::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .05; }
.sala-clara::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70%; pointer-events: none;
background: radial-gradient(46% 100% at 50% 0%, rgba(255, 255, 255, .6), transparent 72%);
}
.sala-arena::after { background: radial-gradient(46% 100% at 30% 0%, rgba(255, 250, 242, .55), transparent 72%); }
.sala-clara > * { position: relative; z-index: 1; }
.cabeza-seccion { display: grid; gap: 16px; margin-bottom: clamp(44px, 6vw, 80px); }
.cabeza-partida { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: clamp(20px, 5vw, 80px); }
.cabeza-partida > div { display: grid; gap: 16px; }
.cabeza-texto { max-width: 46ch; color: var(--piedra); }
.cabeza-partida .cabeza-texto { padding-left: 18px; border-left: 2px solid var(--rojo); }
.sala-oscura { position: relative; background: var(--carbon); color: var(--hueso); padding: clamp(84px, 11vw, 160px) var(--lateral); overflow: clip; }
.sala-oscura::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .07; }
.sala-oscura::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80%; pointer-events: none; background: radial-gradient(40% 90% at 22% 0%, rgba(225, 0, 43, .14), transparent 70%); }
.sala-oscura > * { position: relative; z-index: 1; }
.tarjeta {
position: relative; display: grid; gap: 12px; align-content: start; padding: 30px 28px 34px;
background: linear-gradient(180deg, var(--papel), #F1EDE6); border-radius: 4px; overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(20, 20, 20, .06), 0 22px 44px -26px rgba(20, 20, 20, .28);
transition: box-shadow .4s;
}
.tarjeta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rojo); transform-origin: left; transition: transform 1s var(--suave) .25s; }
.tarjeta.por-aparecer::before { transform: scaleX(0); }
.tarjeta.aparecido::before { transform: scaleX(1); }
.tarjeta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(20, 20, 20, .06), 0 34px 60px -28px rgba(20, 20, 20, .38); }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.tarjeta-num { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--linea-arena); }
.tarjeta h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 2.8vw, 42px); line-height: .92; }
.tarjeta p:last-child { color: var(--piedra); font-size: 16.5px; }
.tarjeta-negra { background: linear-gradient(180deg, #1A1B1E, #08090A); color: var(--hueso); }
.tarjeta-negra p:last-child { color: var(--humo); }
.tarjeta-negra .etiqueta, .tarjeta-negra .ico { color: var(--rojo-vivo); }
.tarjeta-negra .tarjeta-num { -webkit-text-stroke-color: rgba(236, 232, 225, .6); }
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--suave), box-shadow .4s; transform-style: preserve-3d; }
[data-tilt].inclinando { transition: transform .12s linear, box-shadow .4s; }
.cita { margin-top: clamp(56px, 7vw, 96px); max-width: 58rem; display: grid; gap: 16px; padding-left: clamp(0px, 4vw, 64px); position: relative; }
.cita::before {
content: "«"; position: absolute; left: 0; top: -.2em; font-family: var(--display); font-weight: 900; font-size: clamp(60px, 7vw, 110px); line-height: 1; color: var(--rojo);
transition: transform .9s var(--muelle) .2s, opacity .6s .2s;
}
.cita.por-aparecer::before { transform: scale(.4); opacity: 0; }
.cita.aparecido::before { transform: none; opacity: 1; }
.cita blockquote { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.42; font-style: italic; }
.cita figcaption { font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.cita figcaption::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--rojo); vertical-align: middle; margin-right: 10px; }
.vitrinas { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 22px; }
.vitrina, .vitrina-cartela { position: relative; flex: 0 1 calc((100% - 66px) / 4); }
.vitrina { display: grid; gap: 8px; align-content: start; }
.vitrina-cartela {
flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px;
padding-top: 26px; border-top: 1px solid rgba(20, 20, 20, .16);
}
.vitrina-cartela-texto { min-width: 0; max-width: 62ch; padding-left: 18px; border-left: 2px solid var(--rojo); font-size: 17px; line-height: 1.5; color: var(--piedra); }
.vitrina-cartela .boton { flex: none; }
.vitrina::before {
content: ""; position: absolute; z-index: -1; left: -16%; right: -16%; top: -110px; height: calc(110px + 45%); pointer-events: none;
background: radial-gradient(48% 50% at 50% 38%, rgba(255, 252, 246, .6), rgba(255, 252, 246, .16) 55%, transparent 75%);
opacity: .75; transition: opacity .5s;
}
.vitrina:hover::before { opacity: 1; }
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.vitrina-caja {
--sx: 50%; position: relative; aspect-ratio: 1; margin-bottom: 14px;
display: grid; place-items: end center; padding-bottom: 20px;
border-radius: 4px 4px 0 0; overflow: hidden;
background: linear-gradient(180deg, #1A1B1E 0%, #050505 78%);
box-shadow: 0 30px 50px -30px rgba(20, 20, 20, .7);
transition: box-shadow .4s, --sx .7s var(--suave);
}
.vitrina-caja::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(60% 52% at var(--sx) 0%, rgba(245, 240, 232, .24), transparent 72%),
radial-gradient(34% 26% at 50% 48%, rgba(255, 74, 94, .13), transparent 72%);
opacity: .75; transition: opacity .4s;
}
.vitrina-caja::after {
content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; z-index: 3;
background: linear-gradient(90deg, transparent, var(--rojo-vivo), transparent); opacity: .85;
}
.vitrina:hover .vitrina-caja::before { opacity: 1; }
.con-pieza .vitrina-caja::before { background: radial-gradient(60% 52% at var(--sx) 0%, rgba(245, 240, 232, .2), transparent 72%); }
.vitrina:hover .vitrina-caja { box-shadow: 0 44px 70px -30px rgba(20, 20, 20, .8); }
.vitrina-num { position: absolute; z-index: 2; left: 14px; top: 12px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--rojo-vivo); }
.vitrina-caja .vitrina-pieza, .vitrina-caja video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrina-caja video { opacity: 0; transition: opacity .4s; }
.vitrina-caja video.lista { opacity: 1; }
.vitrina h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(25px, 2.1vw, 32px); line-height: .95; padding-top: 12px; border-top: 3px solid var(--tinta); }
.vitrina p { font-size: 15.5px; color: var(--piedra); }
.vitrina .precio {
justify-self: start; margin-top: 4px; padding: 6px 10px 5px; border-radius: 2px; background: var(--tinta); color: var(--hueso);
font-family: var(--dato); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px;
transition: background-color .4s;
}
.vitrina .precio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); transition: transform .4s var(--muelle), background-color .4s; }
.vitrina:hover .precio { background: var(--rojo); }
.vitrina:hover .precio::before { transform: scale(1.6); background: #fff; }
.vitrina:hover h3 { border-top-color: var(--rojo); }
.franja-urgencias {
position: relative; overflow: hidden; color: var(--hueso);
background:
radial-gradient(70% 150% at 50% -60%, rgba(225, 0, 43, .14), transparent 70%),
linear-gradient(180deg, #100c0d 0%, var(--noche) 100%);
border-top: 1px solid rgba(255, 74, 94, .8);
box-shadow: inset 0 1px 0 rgba(255, 74, 94, .3), inset 0 18px 30px -22px rgba(225, 0, 43, .6);
}
.franja-urgencias::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .07; }
.franja-dentro {
position: relative; z-index: 1;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cartel texto boton";
align-items: center; gap: 22px clamp(28px, 4vw, 64px); padding: clamp(30px, 3.2vw, 42px) var(--lateral);
}
.urgencias-cartel { grid-area: cartel; display: grid; gap: 12px; justify-items: start; }
.urgencias-cartel.por-aparecer { opacity: 1; translate: none; }
.cartel { position: relative; margin: 0; }
.cartel::before {
content: ""; position: absolute; inset: -84px -120px; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, rgba(225, 0, 43, .4), rgba(225, 0, 43, .11) 58%, transparent);
}
.cartel-luz {
display: inline-flex; align-items: center; gap: .42em;
padding: .44em calc(.82em - .16em) .38em .74em; border-radius: 6px;
font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .16em;
font-size: clamp(22px, 2vw, 30px); line-height: 1; color: #fff;
background: linear-gradient(180deg, #FF2C4C 0%, var(--rojo) 52%, #C60026 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5),
inset 0 0 0 1px rgba(255, 255, 255, .16),
inset 0 -12px 18px -12px rgba(110, 0, 18, .6),
0 0 0 1px rgba(255, 74, 94, .55),
0 0 18px rgba(225, 0, 43, .6),
0 0 48px rgba(225, 0, 43, .32);
text-shadow: 0 0 1px #fff, 0 0 10px rgba(255, 255, 255, .55);
}
.cartel-luz .ico { width: .86em; height: .86em; color: #fff; fill: currentColor; stroke: none; vertical-align: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)); }
.urgencias-cartel.por-aparecer .cartel-luz { filter: brightness(.3) saturate(.55); }
.urgencias-cartel.por-aparecer .cartel::before { opacity: 0; }
.urgencias-cartel.aparecido .cartel-luz { animation: cartel-enciende 1.3s steps(1, end) .3s both; }
.urgencias-cartel.aparecido .cartel::before { animation: halo-enciende 1.3s steps(1, end) .3s both, halo-respira 5s ease-in-out 2s infinite; }
@keyframes cartel-enciende {
0% { filter: brightness(.3) saturate(.55); }
14% { filter: brightness(1.12); }
22% { filter: brightness(.34) saturate(.6); }
38% { filter: none; }
46% { filter: brightness(.6) saturate(.8); }
60%, 100% { filter: none; }
}
@keyframes halo-enciende { 0% { opacity: 0; } 14% { opacity: .9; } 22% { opacity: .1; } 38% { opacity: 1; } 46% { opacity: .45; } 60%, 100% { opacity: 1; } }
@keyframes halo-respira { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.urgencias-estado { margin: 0; font-family: var(--dato); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hueso); }
.urgencias-estado .estado { font-weight: 500; gap: 9px; }
.urgencias-estado .estado.vivo + .horario-fijo { display: none; }
.urgencias-estado .estado.cerrado { color: var(--humo); }
.franja-texto { grid-area: texto; display: grid; gap: 10px; }
.franja-pregunta {
margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase;
font-size: clamp(32px, 3.7vw, 60px); line-height: .92; color: #fff; text-wrap: balance;
}
.franja-pregunta .signo { color: var(--rojo); }
.franja-detalle { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: clamp(16px, 1.3vw, 19px); color: var(--hueso); }
.franja-detalle b { color: #fff; font-weight: 700; }
.franja-precio {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 5px; border-radius: 2px;
font-family: var(--dato); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; line-height: 1;
background: #fff; color: var(--tinta); white-space: nowrap;
}
.franja-precio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); }
.boton-urgencias { grid-area: boton; background: var(--rojo); color: #fff; box-shadow: 0 0 0 1px rgba(255, 74, 94, .55), 0 12px 30px -10px rgba(225, 0, 43, .8); }
.boton-urgencias::before { background: #fff; }
.boton-urgencias:hover { color: var(--rojo); box-shadow: 0 0 0 1px #fff, 0 16px 34px -12px rgba(225, 0, 43, .6); }
.resenas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.resenas-cifra { display: grid; gap: 12px; align-content: start; position: sticky; top: 110px; }
.cifra { font-family: var(--display); font-weight: 900; font-size: clamp(150px, 21vw, 330px); line-height: .78; letter-spacing: -.01em; }
.cifra span { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: .07em; text-underline-offset: .06em; text-decoration-skip-ink: none; }
.sala-oscura .cifra { color: var(--hueso); }
.resenas-fuentes { font-family: var(--dato); font-size: 10.5px; letter-spacing: .06em; color: var(--piedra); }
.junto { display: inline-block; }
.resenas-enlaces { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin: 0; }
.sala-oscura .resenas-fuentes { color: var(--humo); }
.resenas-lista { display: grid; gap: 18px; }
.resena {
position: relative; overflow: hidden;
display: grid; gap: 12px; padding: 28px 30px 30px; border-radius: 4px;
background: linear-gradient(180deg, var(--papel), #F1EDE6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(20, 20, 20, .06), 0 22px 44px -28px rgba(20, 20, 20, .3);
}
.sala-oscura .resena {
color: var(--hueso); border: 1px solid rgba(255, 110, 124, .26);
background:
radial-gradient(120% 85% at 50% 0%, rgba(255, 74, 94, .2), rgba(255, 74, 94, .05) 55%, transparent 80%),
linear-gradient(180deg, #26282D, #17181C);
box-shadow: 0 0 44px -12px rgba(255, 40, 70, .42), 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sala-oscura .resena::before {
content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, #FF6B7C 20%, #FFD9DE 50%, #FF6B7C 80%, transparent);
box-shadow: 0 0 18px 2px rgba(255, 74, 94, .85);
}
.sala-oscura .resena.resena-clara {
color: var(--tinta); border-color: rgba(255, 255, 255, .7);
background-color: #F7F3EC; background-image: linear-gradient(180deg, #FFFDF9, #EEE8DE);
box-shadow: 0 0 60px -10px rgba(255, 238, 214, .45), 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 #FFFFFF;
}
.sala-oscura .resena.resena-clara::before { left: 0; right: 0; height: 3px; background: var(--rojo); box-shadow: none; }
.resena .estrellas { font-size: 24px; letter-spacing: .16em; }
.sala-oscura .resena .estrellas { color: var(--rojo-vivo); text-shadow: 0 0 10px rgba(255, 74, 94, .8), 0 0 22px rgba(255, 74, 94, .35); }
.sala-oscura .resena.resena-clara .estrellas { color: var(--rojo); text-shadow: none; }
.resena blockquote { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; }
.resena figcaption { font-family: var(--dato); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--piedra); }
.sala-oscura .resena figcaption { color: #A8A39A; }
.sala-oscura .resena.resena-clara figcaption { color: var(--piedra); }
.resena::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .1) 50%, transparent 62%);
transform: translateX(-110%);
}
.resena.resena-clara::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); }
.resena:hover::after { animation: brillo-cruza 1.2s var(--suave) both; }
@keyframes brillo-cruza { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.equipo { padding-top: clamp(64px, 6.4vw, 104px); padding-bottom: clamp(72px, 7.4vw, 120px); }
.equipo-cabeza { display: grid; gap: 12px; margin-bottom: clamp(26px, 2.6vw, 40px); }
.equipo-titulo { max-width: none; white-space: nowrap; font-size: min(104px, calc((100vw - 16px - 2 * var(--lateral)) / 12.9)); line-height: .92; }
.equipo-cifra {
display: inline-block; margin-right: .1em; padding: .1em .14em .03em; border-radius: .05em; line-height: .78;
background: linear-gradient(180deg, #F0183F, var(--rojo) 55%, var(--rojo-hondo)); color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .1em .24em -.1em rgba(189, 0, 36, .7);
}
.equipo-ficha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px clamp(24px, 3.4vw, 56px); padding-top: 12px; border-top: 1px solid var(--linea); }
.equipo-cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.equipo-cuenta li { display: flex; align-items: center; gap: 10px; padding: 0 clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--linea); }
.equipo-cuenta li:first-child { padding-left: 0; border-left: 0; }
.equipo-cuenta b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .8; color: var(--rojo); }
.equipo-cuenta span { font-family: var(--dato); font-size: 10px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.equipo-nota { flex: 1 1 25rem; max-width: 60ch; padding-left: 16px; border-left: 2px solid var(--rojo); font-size: 15px; line-height: 1.5; color: var(--piedra); }
.retratos { --hueco: clamp(18px, 2.4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.42fr) repeat(4, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 44px; align-items: start; padding-top: 6px; }
.retrato { position: relative; display: grid; gap: 12px; align-content: start; }
.retrato::before {
content: ""; position: absolute; top: -6px; left: calc(var(--hueco) * -.5); right: calc(var(--hueco) * -.5); height: 5px;
background: linear-gradient(180deg, #3A3B3E, var(--tinta) 45%, #050505); box-shadow: 0 2px 3px rgba(20, 20, 20, .25);
transform-origin: left; transition: transform 1.1s var(--suave);
}
.retrato-cuelga { position: relative; padding-top: var(--cuelga, 40px); transform-origin: 50% 0; }
.retrato-cuelga::before { content: ""; position: absolute; left: 50%; top: -8px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8A8B8E, var(--tinta) 70%); z-index: 1; }
.retrato-cable { position: absolute; left: 0; top: 0; width: 100%; height: var(--cuelga, 40px); overflow: visible; transform-origin: 50% 0; }
.retrato-cable path { fill: none; stroke: #3A3A3C; stroke-width: 1; vector-effect: non-scaling-stroke; }
.retrato-foto {
position: relative; overflow: hidden; border-radius: 2px; background: #fff; transform-origin: 50% calc(-1 * var(--cuelga, 40px));
border: var(--marco, 6px) solid var(--tinta); padding: var(--paspartu, 8px);
box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .08), 0 22px 34px -22px rgba(20, 20, 20, .55), 0 8px 10px -8px rgba(20, 20, 20, .3);
transition: box-shadow .4s, border-color .4s;
}
.retrato-foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; clip-path: inset(1% 0 0 0); transition: scale .8s var(--suave), filter 1.4s ease; }
.retrato:hover .retrato-foto { border-color: var(--rojo); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .08), 0 30px 44px -22px rgba(20, 20, 20, .55), 0 8px 10px -8px rgba(20, 20, 20, .3); }
.retrato:hover .retrato-foto img { scale: 1.04; }
.retrato p { font-family: var(--dato); font-size: 9.5px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--piedra); }
.retrato b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px); line-height: 1; letter-spacing: .01em; color: var(--tinta); margin-bottom: 4px; }
.retrato-mayor b { font-size: clamp(22px, 2.1vw, 30px); }
.colegiados { display: flex; flex-wrap: wrap; gap: 6px; }
.colegiado { font-family: var(--dato); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--rojo); padding: 4px 7px 3px; border-radius: 2px; }
.colegiado-pendiente { color: var(--rojo-texto); background: rgba(225, 0, 43, .05); border: 1px dashed var(--rojo); padding: 3px 6px 2px; }
.retrato.por-aparecer { opacity: 1; translate: none; }
.retrato.por-aparecer::before { transform: scaleX(0); }
.retrato.aparecido::before { transform: scaleX(1); transition-delay: var(--d, 0s); }
.retrato.por-aparecer .retrato-cuelga { opacity: 0; }
.retrato.por-aparecer .retrato-foto img { filter: grayscale(1) brightness(1.18) contrast(.9); }
.retrato.aparecido .retrato-cuelga { opacity: 1; animation: cuelga 1.9s var(--suave) calc(var(--d, 0s) + .25s) both; }
.retrato.aparecido .retrato-foto img { filter: none; transition-delay: calc(var(--d, 0s) + 1.1s); }
.retrato.por-aparecer > p { opacity: 0; translate: 0 10px; transition: opacity .7s ease, translate .7s var(--suave); }
.retrato.aparecido > p { opacity: 1; translate: 0 0; transition-delay: calc(var(--d, 0s) + .9s); }
@keyframes cuelga {
0% { opacity: 0; translate: 0 -46px; rotate: 0deg; }
28% { opacity: 1; translate: 0 0; rotate: 4.5deg; }
50% { rotate: -3deg; }
68% { rotate: 1.6deg; }
84% { rotate: -.6deg; }
100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
.paseo { position: relative; background: var(--papel); overflow: clip; }
.paseo-moldura, .paseo-zocalo { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.paseo-moldura {
top: 0; height: 42px;
background: linear-gradient(180deg, #34353A 0, var(--tinta) 3px 11px, var(--rojo) 11px 14px, rgba(20, 20, 20, .2) 14px, rgba(20, 20, 20, 0) 42px);
}
.paseo-zocalo {
bottom: 0; height: 58px;
background: linear-gradient(0deg, var(--tinta) 0 17px, #34353A 17px 20px, var(--rojo) 20px 23px, rgba(20, 20, 20, .14) 23px, rgba(20, 20, 20, 0) 58px);
}
.paseo-escena::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grano); opacity: .045; }
.paseo-escena { position: relative; padding: clamp(84px, 10vw, 150px) 0; }
.paseo-pista {
position: relative; z-index: 1;
display: flex; align-items: center; gap: clamp(22px, 3vw, 52px);
padding: 0 var(--lateral) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.paseo-cabeza { flex: 0 0 min(80vw, 30rem); display: grid; gap: 18px; align-content: center; scroll-snap-align: start; }
.paseo-titulo { max-width: none; font-size: clamp(34px, 4.6vw, 66px); line-height: .98; color: var(--papel); }
.paseo-titulo > span {
display: table; margin-bottom: .09em; padding: .1em .16em .03em; border-radius: 2px;
background: linear-gradient(180deg, #26272B, var(--tinta) 40%, #070708);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 20px -14px rgba(20, 20, 20, .6);
}
.paseo-titulo > span:last-child { margin-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 var(--rojo), 0 12px 20px -14px rgba(20, 20, 20, .6); }
.paseo-aviso { display: flex; align-items: center; gap: 12px; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--piedra); }
.paseo-aviso i { position: relative; width: 56px; height: 1px; background: var(--linea); overflow: hidden; }
.paseo-aviso i::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 1px; background: var(--rojo); transform: translateX(-100%); animation: avanza 2.2s var(--suave) infinite; }
@keyframes avanza { 0% { transform: translateX(-100%); } 70%, 100% { transform: translateX(250%); } }
.obra { flex: 0 0 auto; scroll-snap-align: center; }
.obra figure { display: grid; gap: 14px; }
.obra-marco {
--obra-alto: min(56vh, 520px, 42vw);
height: var(--obra-alto); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #D9D4CB;
border: 6px solid var(--tinta); box-shadow: inset 0 0 0 3px var(--hueso), var(--sombra-pieza);
}
.obra img { width: 100%; height: 100%; object-fit: cover; scale: var(--zoom, 1); translate: var(--par, 0px) 0; transition: transform 1s var(--suave); }
.obra:hover img { transform: scale(1.05); }
.obra figcaption { font-family: var(--dato); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.obra figcaption span { color: #fff; background: var(--rojo); padding: 3px 6px 2px; margin-right: 8px; border-radius: 2px; }
.paseo--vivo .paseo-escena {
position: sticky; top: 0; height: var(--alto-pantalla); padding: 0; display: flex; align-items: center; overflow: hidden;
background: radial-gradient(58% 72% at 50% 44%, #FFFEFB 0%, var(--papel) 42%, #E7E1D7 100%);
}
.paseo--vivo .paseo-pista { overflow: visible; padding: 0 var(--lateral); will-change: transform; scroll-snap-type: none; }
.paseo--vivo .paseo-cabeza { flex-basis: min(34vw, 30rem); margin-right: 4vw; }
.paseo--vivo .obra { scale: calc(.84 + .16 * var(--foco, 0)); }
.paseo--vivo .obra-marco {
filter: saturate(calc(.45 + .55 * var(--foco, 0))) brightness(calc(.9 + .1 * var(--foco, 0)));
box-shadow: inset 0 0 0 3px var(--hueso), 0 calc(14px + 28px * var(--foco, 0)) calc(30px + 40px * var(--foco, 0)) -22px rgba(20, 20, 20, calc(.26 + .32 * var(--foco, 0)));
}
.paseo--vivo .obra figcaption { opacity: calc(.35 + .65 * var(--foco, 0)); }
.paseo--vivo .obra figcaption span { background: color-mix(in srgb, var(--rojo) calc(var(--foco, 0) * 100%), var(--piedra)); }
.paseo-final { flex: 0 0 clamp(230px, 24vw, 380px); display: grid; gap: 14px; align-content: center; padding-left: 20px; border-left: 3px solid var(--rojo); scroll-snap-align: end; }
.paseo-final-titulo { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 58px); line-height: .9; color: var(--tinta); }
.paseo-final-texto { font-size: 16.5px; color: var(--piedra); max-width: 30ch; }
.paseo-final .boton { justify-self: start; white-space: normal; text-align: left; }
.ico-abajo { rotate: 90deg; }
.paseo-guia { display: none; }
.paseo--vivo .paseo-guia {
position: absolute; left: var(--lateral); right: var(--lateral); bottom: max(64px, 8vh); z-index: 2; pointer-events: none;
display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 18px;
}
.paseo-guia-num { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 44px); line-height: .8; color: var(--piedra); white-space: nowrap; }
.paseo-guia-num b { color: var(--rojo); font-weight: 900; }
.paseo-guia-num span { font-size: .5em; margin-left: 6px; }
.paseo-guia-nombre { font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.paseo-guia-hilo { position: relative; height: 2px; background: var(--linea); }
.paseo-guia-hilo::after { content: ""; position: absolute; inset: 0; background: var(--rojo); transform-origin: left; transform: scaleX(var(--avance-paseo, 0)); }
.visita { padding-block: clamp(52px, 5.4vw, 96px) clamp(64px, 7vw, 112px); }
.visita-rejilla {
--hueco-v: clamp(28px, 4.5vw, 72px); --col: calc((100vw - 16px - 2 * var(--lateral) - var(--hueco-v)) / 2);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco-v); align-items: stretch;
}
.visita-reserva { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.visita .antetitulo { margin-bottom: 12px; }
.visita-titulo { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: min(124px, calc(var(--col) / 5.7)); line-height: .86; margin-bottom: 20px; }
.visita-titulo > span { display: block; white-space: nowrap; }
.visita-encendida { color: var(--rojo); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.visita-titulo .visita-encendida {
background:
linear-gradient(100deg, transparent 40%, rgba(255, 238, 240, .95) 50%, transparent 60%) no-repeat,
linear-gradient(180deg, #FF4262 0%, var(--rojo) 46%, #A0001B 100%);
background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 .04em .07em rgba(160, 0, 27, .35));
}
.visita-titulo.aparecido .visita-encendida { animation: barrido 1.8s var(--suave) .7s both; }
}
.visita-pasos { align-self: stretch; max-width: 34rem; margin-bottom: 22px; }
.visita-pasos-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--piedra); }
.visita-pasos-cab b { font-weight: 500; color: var(--tinta); }
.visita-duracion { display: inline-flex; align-items: center; gap: 6px; }
.visita-duracion .ico { width: 15px; height: 15px; vertical-align: 0; }
.visita-precio {
display: flex; width: max-content; align-items: center; gap: 8px; margin-left: auto; padding: 6px 11px 5px; border-radius: 2px;
font-family: var(--dato); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--hueso); background: var(--tinta); white-space: nowrap;
}
.visita-precio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); }
.pasos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos::before, .pasos::after { content: ""; position: absolute; left: 6px; right: calc(25% - 6px); top: 5px; height: 2px; }
.pasos::before { background: var(--linea-arena); }
.pasos::after { background: var(--rojo); transform-origin: left; transition: transform 1.35s linear .35s; }
.pasos li { position: relative; padding-top: 22px; font-family: var(--dato); font-size: 10.5px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
.pasos li::before {
content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
background: var(--rojo); box-shadow: 0 0 0 3px var(--arena), 0 0 14px 2px rgba(225, 0, 43, .5);
transition: background-color .35s, box-shadow .5s; transition-delay: calc(.35s + var(--k, 0) * .45s);
}
.visita-pasos.por-aparecer:not(.aparecido) .pasos::after { transform: scaleX(0); }
.visita-pasos.por-aparecer:not(.aparecido) .pasos li::before { background: var(--arena); box-shadow: inset 0 0 0 2px var(--linea-arena), 0 0 0 3px var(--arena); }
.visita-acciones { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; width: 100%; max-width: 34rem; }
.visita-acciones .boton { white-space: normal; text-align: center; }
.visita-acciones .boton-reserva {
grid-column: 1 / -1; min-height: 62px; font-size: 13.5px; letter-spacing: .1em;
box-shadow: 0 20px 40px -16px rgba(225, 0, 43, .85), 0 0 0 1px rgba(255, 74, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.boton-reserva::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%); transform: translateX(-120%);
animation: brillo-reserva 7s var(--suave) 2s infinite;
}
.boton-reserva:hover::after { animation: brillo-reserva-ya 1s var(--suave) both; }
@keyframes brillo-reserva { 0% { transform: translateX(-120%); } 16%, 100% { transform: translateX(120%); } }
@keyframes brillo-reserva-ya { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.visita-aval { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 16px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--piedra); }
.visita-aval b { font-weight: 500; color: var(--tinta); }
.visita-aval .estrellas { font-size: 15px; letter-spacing: .08em; color: var(--rojo); }
.tarjeta-visita-tel { display: grid; gap: 6px; margin-bottom: 22px; }
.tarjeta-visita-tel a {
display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; color: var(--hueso);
font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.5vw, 50px); line-height: 1; letter-spacing: .02em;
transition: color .3s;
}
.tarjeta-visita-tel a .ico { width: .62em; height: .62em; color: var(--rojo-vivo); stroke-width: 1.5; vertical-align: 0; transition: transform .4s var(--muelle); }
.tarjeta-visita-tel a:hover { color: var(--rojo-vivo); }
.tarjeta-visita-tel a:hover .ico { transform: rotate(-12deg) scale(1.08); }
.tarjeta-visita-tel span { font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }
.tarjeta-visita {
position: relative; display: flex; flex-direction: column; color: var(--hueso); border-radius: 6px; overflow: hidden;
padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px);
border: 1px solid rgba(255, 110, 124, .28); background-color: #0E0F11;
background-image: radial-gradient(90% 60% at 50% 0%, rgba(255, 74, 94, .2), rgba(255, 74, 94, .05) 55%, transparent 80%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 44px -16px rgba(225, 0, 43, .45), 0 46px 80px -44px rgba(20, 20, 20, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tarjeta-visita::before {
content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, #FF6B7C 20%, #FFD9DE 50%, #FF6B7C 80%, transparent); box-shadow: 0 0 22px 3px rgba(255, 74, 94, .9);
}
.tarjeta-visita .datos { margin-top: auto; }
.tarjeta-visita-ahora { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(236, 232, 225, .12); font-size: 15.5px; }
.tarjeta-visita-ahora .estado { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; gap: 14px; }
.tarjeta-visita-ahora .estado::before { width: 12px; height: 12px; flex: none; }
.tarjeta-visita-ahora .estado.vivo + .horario-fijo { margin-top: 8px; }
.tarjeta-visita-marca { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .05em; margin-bottom: 18px; }
.tarjeta-visita-marca b { color: var(--rojo); }
.tarjeta-visita-marca span { font-family: var(--dato); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--humo); margin-left: 8px; vertical-align: middle; }
.datos { display: grid; gap: 14px; }
.datos > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(236, 232, 225, .12); }
.datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.datos dt { display: flex; align-items: center; gap: 8px; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); padding-top: 3px; }
.datos dt .ico { color: var(--rojo-vivo); }
.datos dd { font-size: 16px; color: var(--hueso); }
.datos .enlace { margin-top: 6px; }
.estado { display: none; align-items: center; gap: 10px; font-weight: 500; }
.estado.vivo { display: inline-flex; }
.estado.vivo + .horario-fijo { display: block; margin-top: 2px; color: var(--humo); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 0 0 rgba(255, 74, 94, .5); animation: latido 2.4s ease-out infinite; }
.estado.cerrado::before { background: var(--humo); animation: none; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(255, 74, 94, .5); } 70% { box-shadow: 0 0 0 9px rgba(255, 74, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 94, 0); } }
.preguntas { margin-top: clamp(64px, 8vw, 110px); max-width: 62rem; border-top: 2px solid var(--tinta); }
.preguntas-titulo { font-family: var(--dato); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); padding: 18px 0 8px; }
.pregunta { border-bottom: 1px solid var(--linea-arena); }
.pregunta summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
padding: 20px 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 30px); line-height: 1;
transition: color .25s, padding-left .35s var(--suave);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
font-family: var(--dato); font-weight: 400; font-size: 18px; color: #fff; background: var(--tinta);
transition: transform .45s var(--suave), background-color .3s;
}
.pregunta[open] summary::after { transform: rotate(45deg); background: var(--rojo); }
.pregunta summary:hover { color: var(--rojo); padding-left: 8px; }
.respuesta { overflow: hidden; }
.respuesta p { padding: 0 0 22px; max-width: 58ch; color: var(--piedra); }
.preguntas-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.visita .preguntas { margin-top: clamp(44px, 5vw, 72px); max-width: none; }
.visita .pregunta summary { padding: 16px 0; font-size: clamp(19px, 1.7vw, 24px); }
.visita .pregunta summary::after { width: 30px; height: 30px; font-size: 16px; }
.visita .respuesta p { padding-bottom: 18px; font-size: 16.5px; }
.pie { position: relative; background: var(--noche); color: var(--humo); overflow: clip; }
.pie::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .06; }
.pie-rejilla { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 28px; padding: 54px var(--lateral) 28px; align-items: start; border-top: 3px solid var(--rojo); }
.pie-bloque { font-size: 15px; line-height: 1.6; }
.pie-bloque b { display: block; font-family: var(--dato); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--hueso); margin-bottom: 8px; }
.pie-bloque a { color: var(--hueso); text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.pendiente { font-family: var(--dato); font-size: 9.5px; letter-spacing: .06em; color: var(--rojo-vivo); }
.volver { font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--hueso); display: inline-flex; gap: 10px; align-items: center; }
.volver i { font-style: normal; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rojo); color: #fff; transition: transform .45s var(--suave); }
.volver:hover i { transform: translateY(-4px); }
.pie-marca {
position: relative; font-family: var(--display); font-weight: 900; font-size: min(460px, 27vw, calc((100vw - 2 * var(--lateral)) / 3.12)); line-height: .74; letter-spacing: .01em;
padding: 0 var(--lateral); margin: 0 0 -.02em; color: var(--hueso); white-space: nowrap;
pointer-events: none;
}
.pie-legal {
position: relative; z-index: 1; margin: 0;
padding: 15px var(--lateral) calc(15px + env(safe-area-inset-bottom, 0px));
background: var(--noche); border-top: 1px solid rgba(236, 232, 225, .14);
font-family: var(--dato); font-size: 10px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--humo);
}
.contador[hidden] { display: none; }
.contador b { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--hueso); }
.pie-marca b { color: var(--hueso); transition: color 1s ease .4s; }
.pie-marca.aparecido b { color: var(--rojo); }
.pie-marca.por-aparecer { opacity: 1; translate: 0 32%; transition: translate 1.4s var(--suave); }
.pie-marca.por-aparecer.aparecido { translate: 0 0; }
.cursor { position: fixed; inset: 0; z-index: 110; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.listo { opacity: 1; }
html.con-cursor-propio, html.con-cursor-propio * { cursor: none !important; }
html.con-cursor-propio :is(textarea, input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="url"], input[type="password"], [contenteditable="true"]) { cursor: text !important; }
.cursor-luz, .cursor-destello, .cursor-chispas, .cursor-aro { position: absolute; left: 0; top: 0; }
.cursor-luz {
width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 238, 212, .17) 0, rgba(255, 222, 180, .07) 30%, rgba(255, 210, 160, 0) 62%);
-webkit-backdrop-filter: brightness(1.8) saturate(1.06); backdrop-filter: brightness(1.8) saturate(1.06);
-webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 30%, transparent 68%); mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 30%, transparent 68%);
opacity: 0; transition: opacity .5s ease, width .4s var(--suave), height .4s var(--suave), margin .4s var(--suave);
}
.cursor.en-oscuro .cursor-luz { opacity: 1; }
.cursor.sobre .cursor-luz { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.cursor-destello { width: 22px; height: 22px; margin: -11px 0 0 -11px; overflow: visible; filter: drop-shadow(0 0 5px rgba(225, 0, 43, .45)); transition: filter .35s, opacity .2s; }
.cursor-destello path { fill: var(--rojo); stroke: rgba(255, 255, 255, .9); stroke-width: 1.3px; paint-order: stroke; transition: fill .35s, stroke .35s; }
.cursor.en-oscuro .cursor-destello { filter: drop-shadow(0 0 3px rgba(255, 240, 214, .95)) drop-shadow(0 0 14px rgba(255, 206, 150, .6)); }
.cursor.en-oscuro .cursor-destello path { fill: #FFF7EA; stroke: rgba(255, 247, 234, 0); }
.cursor-aro { width: 0; height: 0; transition: opacity .2s; }
.cursor-aro::before, .cursor-aro::after {
content: ""; position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 50%;
border: 1.5px solid var(--rojo); transition: border-color .35s;
}
.cursor-aro::before {
box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .6), 0 0 14px rgba(225, 0, 43, .3);
opacity: 0; scale: .35; transition: opacity .25s ease, scale .45s var(--muelle), border-color .35s, box-shadow .35s;
}
.cursor-aro::after { opacity: 0; }
.cursor.sobre .cursor-aro::before { opacity: 1; scale: 1; }
.cursor.sobre .cursor-aro::after { animation: aro-onda 1.6s ease-out .3s infinite; }
.cursor.sobre.pulsando .cursor-aro::before { scale: .72; transition-duration: .25s, .12s, .35s, .35s; }
.cursor.en-oscuro .cursor-aro::before, .cursor.en-oscuro .cursor-aro::after { border-color: #FFF7EA; }
.cursor.en-oscuro .cursor-aro::before { box-shadow: 0 0 10px rgba(255, 214, 160, .55), inset 0 0 10px rgba(255, 214, 160, .22); }
@keyframes aro-onda { 0% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 1.7; } }
.cursor.escribiendo .cursor-destello, .cursor.escribiendo .cursor-aro, .cursor.escribiendo .cursor-luz { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.cursor.sobre .cursor-aro::after { animation: none; }
}
.cursor-chispas { width: 100%; height: 100%; }
html.volviendo body { opacity: 0; }
html.volviendo-fin body { transition: opacity .25s ease; }
html.sin-entradas *, html.sin-entradas *::before, html.sin-entradas *::after { transition: none !important; }
.por-aparecer { opacity: 0; translate: 0 22px; transition: opacity .9s ease, translate .9s var(--suave); transition-delay: var(--d, 0s); }
.por-aparecer.aparecido { opacity: 1; translate: 0 0; }
.fuera-de-vista, .fuera-de-vista *, .fuera-de-vista *::before, .fuera-de-vista *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
.cartel::before, .estado::before { animation: none; }
.urgencias-cartel.aparecido .cartel::before { animation: halo-enciende 1.3s steps(1, end) .3s both; }
}
@media (max-width: 1100px) {
.franja-dentro { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cartel cartel" "texto boton"; }
.menu { display: none; }
.vitrina, .vitrina-cartela { flex-basis: calc((100% - 44px) / 3); }
.vitrina-cartela {
align-self: flex-start; flex-direction: column; justify-content: center; align-items: flex-start; aspect-ratio: 1;
padding-top: 0; border-top: 0;
}
.vitrina-cartela-texto { max-width: 26ch; }
.retratos { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); }
.retrato-mayor { grid-row: span 2; }
.visita-rejilla { grid-template-columns: minmax(0, 1fr); --col: calc(100vw - 16px - 2 * var(--lateral)); }
.pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cabeza-partida { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
:root { --cab: 60px; }
body { font-size: 16.5px; }
.marca-logo { height: 36px; }
.boton-cabecera { min-height: 36px; padding: 0 12px; font-size: 10.5px; }
.vitrinas { gap: 32px 14px; }
.vitrina { flex-basis: calc((100% - 14px) / 2); }
.vitrina-cartela { flex-basis: 100%; aspect-ratio: auto; }
.vitrina h3 { font-size: 22px; }
.vitrina-num { font-size: 22px; left: 10px; top: 8px; }
.resenas { grid-template-columns: minmax(0, 1fr); }
.resenas-cifra { position: static; }
.equipo-titulo { white-space: normal; font-size: clamp(40px, 11.4vw, 60px); text-wrap: balance; }
.equipo-cuenta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.equipo-cuenta li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 10px; }
.equipo-cuenta span { font-size: 9px; letter-spacing: .06em; white-space: normal; }
.retratos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
.retrato-mayor { grid-row: auto; grid-column: 1 / -1; justify-self: center; width: min(100%, 72vw); }
.datos > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.preguntas-columnas { grid-template-columns: minmax(0, 1fr); }
.visita-rejilla { --col: calc(100vw - 16px - 2 * var(--lateral)); }
.pasos { column-gap: 6px; }
.pasos li { font-size: 8.5px; letter-spacing: .02em; }
.visita-pasos-cab { gap: 6px 12px; }
.visita-acciones { grid-template-columns: minmax(0, 1fr); }
.pie-rejilla { grid-template-columns: minmax(0, 1fr); }
.contador:not([hidden]) { display: block; margin-top: 2px; }
.contador-sep { display: none; }
.franja-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cartel" "texto" "boton"; padding: 32px 20px 30px; row-gap: 20px; }
.boton-urgencias { justify-self: stretch; justify-content: center; }
.paseo-cabeza { flex-basis: 82vw; }
.paseo-final { flex-basis: 76vw; }
.obra .obra-marco { height: auto; width: 84vw; }
}
.menu { align-items: center; }
.menu-grupo { display: flex; }
.menu a[aria-current="page"] { opacity: 1; background-size: 100% 2px; }
.menu-desplegar {
display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; color: inherit; cursor: pointer;
font-family: var(--dato); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8;
background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 100% / 0 2px; transition: opacity .25s, background-size .45s var(--suave);
}
.menu-desplegar .ico { width: 14px; height: 14px; color: currentColor; stroke-width: 2; transition: transform .35s var(--suave); }
.menu-desplegar:hover, .menu-grupo.abierto .menu-desplegar, .menu-grupo-actual .menu-desplegar { opacity: 1; background-size: 100% 2px; }
.menu-grupo.abierto .menu-desplegar .ico { transform: rotate(180deg); }
.submenu {
position: absolute; left: 0; right: 0; top: 100%; z-index: -1;
padding: 24px var(--lateral) 20px; color: var(--hueso);
background: radial-gradient(70% 140% at 50% 0%, rgba(225, 0, 43, .13), transparent 70%), linear-gradient(180deg, #131416, #060607);
border-top: 1px solid rgba(255, 74, 94, .6); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .85);
opacity: 0; visibility: hidden; transform: translateY(-12px);
transition: opacity .28s ease, transform .45s var(--suave), visibility 0s linear .45s;
}
.submenu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .06; }
.menu-grupo.abierto .submenu,
html:not(.arranca) .menu-grupo:hover .submenu, html:not(.arranca) .menu-grupo:focus-within .submenu {
opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .45s var(--suave), visibility 0s;
}
.submenu-piezas { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 20px); max-width: 1420px; margin: 0 auto; }
.menu .submenu-piezas a {
display: grid; gap: 7px; align-content: start; padding: 0; opacity: 1; background: none; text-decoration: none; color: var(--hueso);
font: inherit; text-transform: none; letter-spacing: 0;
}
.submenu-caja {
position: relative; display: block; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #050505;
box-shadow: 0 0 0 1px rgba(236, 232, 225, .09); transition: transform .45s var(--suave), box-shadow .35s;
}
.submenu-caja::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rojo-vivo), transparent); }
.submenu-caja img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--suave); }
.submenu-caja b { position: absolute; left: 8px; top: 6px; font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1; color: var(--rojo-vivo); }
.submenu-nombre { font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.55vw, 22px); line-height: .95; text-transform: uppercase; transition: color .25s; }
.submenu-precio { font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.menu .submenu-piezas a:hover .submenu-caja, .menu .submenu-piezas a:focus-visible .submenu-caja { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 74, 94, .65), 0 18px 30px -12px rgba(225, 0, 43, .55); }
.menu .submenu-piezas a:hover .submenu-caja img { scale: 1.06; }
.menu .submenu-piezas a:hover .submenu-nombre, .menu .submenu-piezas a[aria-current="page"] .submenu-nombre { color: var(--rojo-vivo); }
.submenu-pie { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; max-width: 1420px; margin: 16px auto 0; }
.menu .submenu-pie .enlace { opacity: 1; padding: 0 0 4px; background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 100% / 100% 1px; color: var(--hueso); font-size: 10.5px; }
.menu .submenu-pie .enlace:hover { background-size: 0 1px; color: var(--rojo-vivo); }
.boton-menu {
display: none; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid currentColor; border-radius: 3px;
background: none; color: inherit; cursor: pointer; font-family: var(--dato); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.boton-menu-rayas { display: grid; gap: 5px; width: 18px; }
.boton-menu-rayas i { display: block; height: 2px; background: currentColor; }
.boton-menu-rayas i:last-child { width: 62%; background: var(--rojo); }
.menu-movil { position: fixed; inset: 0; z-index: 90; background: radial-gradient(80% 50% at 50% 0%, rgba(225, 0, 43, .16), transparent 70%) fixed, var(--noche); color: var(--hueso); overflow-y: auto; overscroll-behavior: contain; }
.menu-movil[hidden] { display: none; }
.menu-movil::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .07; }
.menu-movil-dentro { position: relative; min-height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 0 var(--lateral) calc(26px + env(safe-area-inset-bottom, 0px)); }
.menu-movil.abierto .menu-movil-dentro > * { animation: menu-llega .5s var(--suave) both; }
.menu-movil.abierto .menu-movil-dentro > :nth-child(2) { animation-delay: .04s; }
.menu-movil.abierto .menu-movil-dentro > :nth-child(3) { animation-delay: .08s; }
.menu-movil.abierto .menu-movil-dentro > :nth-child(4) { animation-delay: .12s; }
.menu-movil.abierto .menu-movil-dentro > :nth-child(5) { animation-delay: .16s; }
@keyframes menu-llega { from { opacity: 0; translate: 0 14px; } }
.menu-movil-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cab); border-bottom: 1px solid rgba(236, 232, 225, .12); }
.menu-movil .marca { color: var(--hueso); margin-right: 0; }
.menu-cerrar {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(236, 232, 225, .4); border-radius: 3px;
background: none; color: var(--hueso); cursor: pointer; font-family: var(--dato); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.menu-cerrar .ico { color: var(--rojo-vivo); stroke-width: 2; }
.menu-movil-titulo { font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo); }
.menu-movil-servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -8px; }
.menu-movil-servicios a {
display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 7px; border-radius: 4px;
border: 1px solid rgba(236, 232, 225, .1); background: rgba(236, 232, 225, .03); text-decoration: none; color: var(--hueso);
}
.menu-movil-servicios a[aria-current="page"] { border-color: rgba(255, 74, 94, .7); }
.menu-movil-servicios img { grid-row: span 2; width: 48px; height: 48px; border-radius: 2px; object-fit: cover; }
.menu-movil-servicios span { align-self: end; font-family: var(--display); font-weight: 800; font-size: clamp(15px, 4.4vw, 20px); line-height: 1; text-transform: uppercase; }
.menu-movil-servicios em { align-self: start; font-style: normal; font-family: var(--dato); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--humo); white-space: nowrap; }
.menu-movil-paginas a {
display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(236, 232, 225, .1);
font-family: var(--display); font-weight: 900; font-size: clamp(26px, 6.6vw, 32px); line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--hueso);
}
@media (max-width: 389px) {
.menu-movil-servicios a { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; }
.menu-movil-servicios img { width: 40px; height: 40px; }
}
@media (max-width: 359px) { .menu-movil-servicios { grid-template-columns: minmax(0, 1fr); } }
.menu-movil-paginas a::after { content: "→"; font-family: var(--dato); font-size: 16px; color: var(--rojo-vivo); }
.menu-movil-paginas a[aria-current="page"] { color: var(--rojo-vivo); }
.menu-movil-pie { margin-top: auto; display: grid; gap: 10px; }
.menu-movil-pie .boton { width: 100%; }
.menu-movil-estado { font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); text-align: center; }
.menu-movil-estado .estado.vivo + .horario-fijo { color: var(--humo); }
html.menu-abierto, html.menu-abierto body { overflow: hidden; }
.vitrina-enlace { display: grid; gap: 8px; align-content: start; color: inherit; text-decoration: none; }
.vitrina-enlace:focus-visible { outline-offset: 8px; }
.pie-rejilla { grid-template-columns: minmax(max-content, .75fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .75fr) auto; }
.pie-bloque ul { display: grid; gap: 3px; }
.pie-marca-bloque { line-height: 0; }
.pie-logo { display: block; height: 240px; width: auto; aspect-ratio: 2845 / 4125; color: var(--hueso); }
.pie-contacto { font-style: normal; }
.pie-contacto p + p { margin-top: 14px; }
.pie-doble nav + nav { margin-top: 22px; }
.pie-bloque li a { text-decoration: none; transition: color .25s; }
.pie-bloque li a:hover, .pie-bloque a:hover { color: var(--rojo-vivo); }
@media (max-width: 1232px) {
.pie-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.boton-menu { display: inline-flex; }
}
@media (max-width: 760px) {
.pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-rejilla > .pie-bloque:first-child, .pie-rejilla > .pie-bloque:nth-child(4) { grid-column: 1 / -1; }
.cabecera { gap: 10px; }
.boton-menu { padding: 0 10px; gap: 8px; min-height: 36px; font-size: 10.5px; }
}
@media (max-width: 400px) {
.boton-menu { font-size: 0; gap: 0; width: 40px; justify-content: center; }
.boton-cabecera { padding: 0 10px; }
}
@media (max-width: 420px) {
.equipo-cuenta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.equipo-cuenta li { flex-direction: row; align-items: center; gap: 12px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
.equipo-cuenta li:first-child { padding-top: 0; border-top: 0; }
.equipo-cuenta b { min-width: 28px; }
.equipo-cuenta span { font-size: 10px; letter-spacing: .08em; }
.equipo-cuenta span br { display: none; }
}
@media (max-width: 359px) {
.cabecera { gap: 8px; }
.marca-logo { height: 30px; }
.boton-cabecera { padding: 0 8px; letter-spacing: .04em; }
}
@media (max-width: 1232px) {
.menu { display: none; }
.boton-menu { display: inline-flex; }
}
.franja-financia {
--diente: 10px;
position: relative; z-index: 2; margin: calc(-1 * var(--diente)) 0; padding: calc(var(--diente) + clamp(24px, 2.8vw, 38px)) var(--lateral);
background: linear-gradient(180deg, #E4DCCF, #D8CFC1);
-webkit-mask:
linear-gradient(#000 0 0) 0 var(--diente) / 100% calc(100% - 2 * var(--diente)) no-repeat,
conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / calc(2 * var(--diente)) var(--diente) repeat-x,
conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / calc(2 * var(--diente)) var(--diente) repeat-x;
mask:
linear-gradient(#000 0 0) 0 var(--diente) / 100% calc(100% - 2 * var(--diente)) no-repeat,
conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / calc(2 * var(--diente)) var(--diente) repeat-x,
conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / calc(2 * var(--diente)) var(--diente) repeat-x;
}
.franja-financia::before, .franja-financia::after {
content: ""; position: absolute; left: var(--lateral); right: var(--lateral); height: 0; border-top: 1.5px dashed rgba(20, 20, 20, .28); pointer-events: none;
}
.franja-financia::before { top: calc(var(--diente) + 9px); }
.franja-financia::after { bottom: calc(var(--diente) + 9px); }
.financia-dentro { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(20px, 3vw, 52px); }
.financia-texto { display: grid; gap: 6px; }
.financia-ante { font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); }
.financia-titulo { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 3.9vw, 60px); line-height: .9; text-transform: uppercase; color: var(--tinta); }
.financia-titulo span { color: var(--rojo); }
.financia-detalle { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.45; color: var(--piedra); }
.financia-plazos { display: flex; gap: 6px; }
.financia-plazos.por-aparecer { opacity: 1; translate: none; }
.financia-plazos li {
--talon: 12px; position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; width: 62px; height: 66px;
padding-right: var(--talon); font-family: var(--dato); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #A9A49B;
filter: drop-shadow(0 10px 10px rgba(20, 20, 20, .22));
transition: transform .45s var(--suave), filter .35s ease;
}
.financia-plazos li::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
background: linear-gradient(to left, var(--rojo) var(--talon), transparent var(--talon)), linear-gradient(180deg, #202124, #0B0C0E);
-webkit-mask: radial-gradient(circle 4px at calc(100% - var(--talon)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 4px at calc(100% - var(--talon)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle 4px at calc(100% - var(--talon)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 4px at calc(100% - var(--talon)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
}
.financia-plazos li::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: var(--talon); border-left: 1px dashed rgba(255, 255, 255, .4); }
.financia-plazos b { display: block; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: .9; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.financia-plazos.aparecido li { transition: opacity .6s ease calc(var(--i) * 80ms + .15s), translate .7s var(--suave) calc(var(--i) * 80ms + .15s), rotate .7s var(--suave) calc(var(--i) * 80ms + .15s), transform .45s var(--suave), filter .35s ease; }
.financia-plazos.por-aparecer:not(.aparecido) li { opacity: 0; translate: -18px 0; rotate: -6deg; }
@media (hover: hover) and (pointer: fine) {
.financia-plazos li:hover { transform: translateY(-5px) rotate(-2deg); filter: drop-shadow(0 16px 14px rgba(110, 0, 20, .3)); }
.franja-financia:hover .financia-plazos li:nth-child(odd):not(:hover) { transform: translateY(-2px); }
}
.financia-boton { white-space: nowrap; }
@media (max-width: 1100px) {
.financia-dentro { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto boton" "plazos plazos"; row-gap: 22px; }
.financia-texto { grid-area: texto; }
.financia-plazos { grid-area: plazos; }
.financia-boton { grid-area: boton; }
}
@media (max-width: 760px) {
.financia-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "plazos" "boton"; }
.financia-plazos { flex-wrap: wrap; }
.financia-plazos li { width: calc((100% - 12px) / 3); }
.financia-boton { justify-self: stretch; justify-content: center; }
}
@media (max-width: 760px) {
.colegiado { font-size: 11px; letter-spacing: .05em; }
.retrato p { font-size: 10px; }
.financia-plazos li { font-size: 10px; letter-spacing: .06em; }
.pasos li { font-size: 10px; letter-spacing: .02em; }
}
@media (max-width: 374px) { .pasos li { font-size: 9px; } }
@media (max-width: 359px) { .pasos li { font-size: 8.5px; letter-spacing: 0; } }