.sala-clara { padding-top: clamp(60px, 6.4vw, 104px); padding-bottom: clamp(60px, 6.4vw, 104px); }
.miga ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--humo); }
.miga li + li::before { content: "/"; margin: 0 10px; color: var(--rojo-vivo); }
.miga a { text-decoration: none; color: inherit; transition: color .25s; }
.miga a:hover { color: var(--rojo-vivo); }
.miga [aria-current="page"] { color: var(--hueso); }
.sala-clara .miga { color: var(--piedra); }
.sala-clara .miga li + li::before { color: var(--rojo); }
.sala-clara .miga a:hover { color: var(--rojo-texto); }
.sala-clara .miga [aria-current="page"] { color: var(--tinta); }
.pieza-sala {
position: relative; overflow: clip; color: var(--hueso); isolation: isolate;
padding: calc(var(--cab) + clamp(24px, 4vh, 56px)) var(--lateral) clamp(44px, 7vh, 88px);
min-height: min(max(620px, var(--alto-pantalla)), 1040px); display: grid; align-items: center;
background:
radial-gradient(42% 60% at 74% 12%, rgba(255, 246, 230, .13), transparent 72%),
radial-gradient(46% 38% at 70% 104%, rgba(225, 0, 43, .16), transparent 72%),
radial-gradient(40% 50% at 8% 0%, rgba(225, 0, 43, .08), transparent 70%),
var(--noche);
}
.pieza-sala::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grano); opacity: .07; }
.pieza-sala::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1;
background: linear-gradient(90deg, transparent, rgba(255, 74, 94, .5) 50%, transparent);
}
.pieza-dentro {
width: 100%; max-width: 1480px; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 96px); align-items: center;
}
.pieza-texto { display: grid; gap: 18px; justify-items: start; }
.pieza-texto .miga { margin-bottom: 6px; }
.pieza-titulo {
--col: calc((100vw - 16px - 2 * var(--lateral) - clamp(28px, 5vw, 96px)) * .54);
font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.004em;
font-size: clamp(44px, min(calc(var(--col) / (var(--largo, 14) * .44)), 11.5vh), 112px);
}
.pieza-titulo .linea { display: block; }
.pieza-titulo .linea + .linea .iluminado { background-position: 160% 0, 0 0; }
.pieza-entrada { max-width: 50ch; font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.5; color: #C9C4BB; }
.pieza-acciones { margin-top: 4px; }
.pieza-aval { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.pieza-aval b { font-weight: 500; color: var(--hueso); }
.pieza-aval .estrellas { font-size: 15px; letter-spacing: .08em; }
.vitrina-grande { position: relative; width: min(100%, calc(var(--alto-pantalla) - var(--cab) - 150px), 600px); min-width: 260px; justify-self: center; gap: 0; }
.vitrina-grande::before {
left: -30%; right: -30%; top: -40%; height: 90%; z-index: -1;
background: radial-gradient(40% 50% at 50% 60%, rgba(255, 246, 230, .16), rgba(255, 246, 230, .04) 60%, transparent 76%); opacity: 1;
}
.vitrina-grande .vitrina-caja {
margin-bottom: 0; border-radius: 6px 6px 0 0;
box-shadow: 0 0 0 1px rgba(236, 232, 225, .09), 0 40px 90px -46px rgba(225, 0, 43, .55), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.vitrina-grande .vitrina-num { font-size: clamp(30px, 3vw, 44px); left: 18px; top: 14px; }
.vitrina-grande::after {
content: ""; display: block; height: clamp(14px, 1.6vw, 22px); margin: 0 -3%;
background: linear-gradient(180deg, #232427, #0A0A0B 70%); border-top: 2px solid var(--rojo); border-radius: 0 0 3px 3px;
box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .95), 0 0 30px -6px rgba(225, 0, 43, .35);
}
.vitrina-grande:hover .vitrina-caja { box-shadow: 0 0 0 1px rgba(255, 74, 94, .35), 0 50px 100px -46px rgba(225, 0, 43, .7), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.vitrina-repetir {
position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 6px;
border: 1px solid rgba(236, 232, 225, .28); border-radius: 30px; background: rgba(2, 2, 2, .55); color: var(--hueso); cursor: pointer;
font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .3s, background-color .3s, opacity .4s;
}
.vitrina-repetir .ico { width: 14px; height: 14px; color: var(--rojo-vivo); stroke-width: 2; transition: transform .6s var(--suave); }
.vitrina-repetir:hover { border-color: var(--rojo-vivo); background: rgba(2, 2, 2, .8); }
.vitrina-repetir:hover .ico { transform: rotate(-300deg); }
.vitrina-repetir[hidden] { display: none; }
.metodo-mapa { width: 100%; max-width: 34rem; margin-top: 10px; padding: 18px 20px 16px; border-radius: 4px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--linea), 0 20px 40px -30px rgba(20, 20, 20, .4); }
.metodo-mapa-cab { font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: 16px; }
.metodo-mapa-fases { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.metodo-mapa-fases::before { content: ""; position: absolute; left: 6px; right: calc(25% - 6px); top: 5px; height: 2px; background: var(--linea-arena); }
.metodo-mapa-fases li { position: relative; padding-top: 22px; font-family: var(--dato); font-size: 10px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.metodo-mapa-fases li b { display: block; font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: 0; color: var(--linea-arena); }
.metodo-mapa-fases li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--linea-arena); }
.metodo-mapa-fases li.encendida { color: var(--tinta); }
.metodo-mapa-fases li.encendida b { color: var(--rojo); }
.metodo-mapa-fases li.encendida::before { background: var(--rojo); box-shadow: 0 0 0 3px var(--papel), 0 0 14px 2px rgba(225, 0, 43, .55); }
.metodo-mapa-texto { font-size: 15px; color: var(--piedra); margin-bottom: 10px; }
.quien-retratos { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); max-width: calc(var(--n, 3) * 280px); padding-top: 14px; }
.quien-uno .quien-retratos { max-width: 340px; }
.tarifa { max-width: 62rem; border-top: 2px solid var(--tinta); }
.tarifa-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px clamp(14px, 2vw, 32px); padding: 16px 0; border-bottom: 1px solid var(--linea); }
.tarifa-fila dt b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1; text-transform: uppercase; }
.tarifa-fila dt span { display: block; margin-top: 4px; font-size: 15px; color: var(--piedra); }
.tarifa-dur { margin: 0; font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); white-space: nowrap; }
.tarifa-precio {
margin: 0; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 6px; border-radius: 2px;
font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; color: var(--hueso); background: var(--tinta);
white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color .35s;
}
.tarifa-precio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); }
.tarifa-fila:hover .tarifa-precio { background: var(--rojo); }
.tarifa-fila:hover .tarifa-precio::before { background: #fff; }
.tarifa-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; max-width: 62rem; margin-top: 24px; }
.tarifa-nota { max-width: 52ch; padding-left: 16px; border-left: 2px solid var(--rojo); font-size: 15.5px; color: var(--piedra); }
.tarifa-pie .acciones { align-items: center; gap: 12px 22px; }
.preguntas-sala { margin-top: 0; max-width: none; }
.cierre { padding-top: clamp(64px, 7vw, 110px); padding-bottom: clamp(64px, 7vw, 110px); }
.cierre-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: stretch; }
.cierre-placa {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--hueso); border-radius: 6px; overflow: hidden;
padding: clamp(24px, 2.8vw, 40px) clamp(22px, 2.8vw, 42px);
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);
}
.cierre-placa::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);
}
.cierre-titulo { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 76px); line-height: .88; }
.cierre-titulo > span { display: block; }
.cierre-encendida { color: var(--rojo-vivo); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.cierre-titulo .cierre-encendida {
background: linear-gradient(100deg, transparent 40%, rgba(255, 238, 240, .95) 50%, transparent 60%) no-repeat, linear-gradient(180deg, #FF6A82 0%, #FF3050 46%, #C4002A 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;
}
.cierre-placa.aparecido .cierre-encendida { animation: barrido 1.8s var(--suave) .6s both; }
}
.cierre-texto { max-width: 40ch; font-size: 16.5px; color: #C9C4BB; }
.cierre-acciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 30rem; margin-top: 4px; }
.cierre-acciones .boton { white-space: normal; text-align: center; }
.cierre-acciones .boton-reserva { min-height: 58px; font-size: 13px; 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); }
.cierre-estado { margin-top: auto; padding-top: 14px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); }
.cierre-estado .estado.vivo + .horario-fijo { color: var(--humo); }
.otras-piezas { display: flex; flex-direction: column; gap: 16px; }
.otras-piezas-cab { font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); }
.otras-piezas ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(12px, 1.4vw, 20px); }
.otras-piezas a { display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--tinta); }
.mini-vitrina {
position: relative; display: block; aspect-ratio: 1; border-radius: 3px 3px 0 0; overflow: hidden; background: #050505;
box-shadow: 0 22px 34px -24px rgba(20, 20, 20, .8); transition: transform .45s var(--suave), box-shadow .35s;
}
.mini-vitrina::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rojo-vivo), transparent); }
.mini-vitrina img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--suave); }
.mini-vitrina b { position: absolute; left: 8px; top: 6px; font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1; color: var(--rojo-vivo); }
.mini-nombre { padding-top: 6px; border-top: 2px solid var(--tinta); font-family: var(--display); font-weight: 800; font-size: clamp(16px, 1.3vw, 20px); line-height: .95; text-transform: uppercase; transition: color .25s, border-color .25s; }
.mini-precio { font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.otras-piezas a:hover .mini-vitrina { transform: translateY(-5px); box-shadow: 0 30px 40px -24px rgba(225, 0, 43, .6); }
.otras-piezas a:hover .mini-vitrina img { scale: 1.06; }
.otras-piezas a:hover .mini-nombre { color: var(--rojo-texto); border-top-color: var(--rojo); }
.puerta-sello { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px 5px; border-radius: 2px; font-family: var(--dato); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--rojo); }
.formulario-intro { margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--rojo); }
.formulario {
display: grid; gap: 18px; padding: clamp(22px, 2.8vw, 40px); border-radius: 6px;
background: linear-gradient(180deg, #FFFFFF, #F6F2EC); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 20, 20, .06), 0 40px 70px -40px rgba(20, 20, 20, .5);
border-top: 3px solid var(--rojo);
}
.campo { display: grid; gap: 6px; align-content: start; }
.campo-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.campo label { font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--piedra); }
.campo input, .campo textarea {
width: 100%; padding: 10px 2px 9px; border: 0; border-bottom: 2px solid var(--linea-arena); border-radius: 0; background: transparent;
font: inherit; font-size: 17px; color: var(--tinta); transition: border-color .25s, background-color .25s;
}
.campo textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--rojo); background: rgba(225, 0, 43, .03); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; box-shadow: 0 2px 0 var(--rojo); }
.campo.con-error input, .campo.con-error textarea { border-bottom-color: var(--rojo-texto); }
.campo-error { min-height: 0; font-size: 14px; color: var(--rojo-texto); }
.campo-error:empty { display: none; }
.campo-ayuda { margin-top: -8px; font-size: 14px; color: var(--piedra); }
.campo-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; }
.campo-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rojo); }
.campo-check label { font-family: var(--texto); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.campo-check .campo-error { grid-column: 2; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-enviar { justify-self: start; min-height: 54px; padding: 0 26px; }
.formulario-enviar[disabled] { opacity: .6; cursor: progress; }
.formulario-estado { font-size: 16px; }
.formulario-estado:empty { display: none; }
.formulario-estado.ok { padding: 14px 16px; border-radius: 4px; background: var(--tinta); color: var(--hueso); }
.formulario-estado.mal { padding: 14px 16px; border-radius: 4px; border: 1px solid var(--rojo); color: var(--rojo-texto); background: rgba(225, 0, 43, .04); }
.formulario-estado a { color: inherit; }
.legal-sala { padding-top: calc(var(--cab) + clamp(34px, 5vw, 72px)); }
.interior-titulo { max-width: none; font-size: clamp(44px, 6.4vw, 110px); line-height: .88; }
.interior-titulo > .punto { display: inline; }
.legal-dentro { display: grid; gap: 18px; justify-items: start; max-width: 860px; }
.legal-dentro .interior-titulo { font-size: clamp(44px, 6vw, 96px); }
.legal-borrador { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 4px; border: 1px dashed var(--rojo); background: rgba(225, 0, 43, .05); font-size: 15px; color: var(--rojo-texto); }
.legal-borrador .ico { flex: none; margin-top: 2px; }
.legal-texto { display: grid; gap: 14px; max-width: 70ch; }
.legal-texto h2 { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--tinta); font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; text-transform: uppercase; }
.legal-texto p { color: var(--piedra); }
.legal-texto a { color: var(--tinta); text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.legal-datos { display: grid; border-top: 1px solid var(--linea); }
.legal-datos li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
.legal-datos .junto { white-space: nowrap; }
.legal-datos b { font-family: var(--dato); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--piedra); padding-top: 3px; }
.dato-pendiente { justify-self: start; font-family: var(--dato); font-size: 11px; letter-spacing: .06em; color: var(--rojo-texto); background: rgba(225, 0, 43, .05); border: 1px dashed var(--rojo); padding: 3px 7px 2px; border-radius: 2px; }
.sala-vacia { position: relative; overflow: clip; color: var(--hueso); padding: calc(var(--cab) + clamp(28px, 5vh, 64px)) var(--lateral) clamp(56px, 8vh, 96px);
min-height: min(max(600px, var(--alto-pantalla)), 1000px); display: grid; align-items: center;
background: radial-gradient(42% 60% at 28% 14%, rgba(255, 246, 230, .1), transparent 72%), var(--noche); }
.sala-vacia-dentro { width: 100%; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.sala-vacia-texto { display: grid; gap: 18px; justify-items: start; }
.vitrina-vacia .vitrina-caja { display: grid; place-items: center; }
.vitrina-vacia-cartela { font-family: var(--dato); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--humo); padding: 8px 12px; border: 1px dashed rgba(236, 232, 225, .3); border-radius: 2px; }
@media (max-width: 1100px) {
.pieza-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.cierre-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.pieza-sala { min-height: 0; padding-top: calc(var(--cab) + 22px); }
.pieza-dentro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pieza-texto { display: contents; }
.pieza-texto > * { order: 3; }
.pieza-texto > .miga, .pieza-texto > .antetitulo, .pieza-texto > .pieza-titulo { order: 1; }
.vitrina-grande { order: 2; width: min(100%, 460px); min-width: 0; }
.pieza-titulo { --col: calc(100vw - 16px - 2 * var(--lateral)); font-size: clamp(38px, calc(var(--col) / (var(--largo, 14) * .44)), 76px); }
.quien-uno .quien-retratos { max-width: 260px; }
.quien-retratos { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
.quien-retratos .retrato-mayor { grid-column: auto; width: auto; }
.tarifa-fila { grid-template-columns: minmax(0, 1fr) auto; }
.tarifa-dur { grid-column: 1; grid-row: 2; }
.tarifa-precio { grid-column: 2; grid-row: 1 / span 2; }
.otras-piezas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo-par { grid-template-columns: minmax(0, 1fr); }
.legal-datos li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sala-vacia-dentro { grid-template-columns: minmax(0, 1fr); }
}
.pieza-clara {
color: var(--tinta);
background:
radial-gradient(38% 56% at 75% 48%, rgba(225, 0, 43, .1), transparent 72%),
radial-gradient(42% 58% at 24% 46%, rgba(255, 250, 242, .55), transparent 70%),
radial-gradient(60% 72% at 26% 0%, rgba(255, 250, 242, .5), transparent 72%),
linear-gradient(180deg, #DFD8CD 0%, var(--arena) 58%, #D1C8BA 100%);
}
.pieza-clara::before { opacity: .05; }
.pieza-clara::after { background: linear-gradient(90deg, transparent, rgba(20, 20, 20, .2) 50%, transparent); }
.pieza-clara .miga ol { color: var(--piedra); }
.pieza-clara .miga li + li::before { color: var(--rojo); }
.pieza-clara .miga a:hover { color: var(--rojo-texto); }
.pieza-clara .miga [aria-current="page"] { color: var(--tinta); }
.pieza-clara .iluminado { color: var(--tinta); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.pieza-clara .iluminado {
background:
linear-gradient(100deg, transparent 40%, rgba(255, 240, 242, .85) 50%, transparent 60%) no-repeat,
linear-gradient(180deg, #1C1B1A 0%, #141414 46%, #5C0A16 66%, #C4001F 84%, #FF2D47 100%);
background-size: 260% 100%, 100% 100%;
background-position: 160% 0, 0 0;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
}
.pieza-clara .pieza-titulo {
font-size: clamp(48px, min(calc(var(--col) / (var(--largo, 14) * .46)), 15.5vh), 112px);
filter: drop-shadow(0 1.5px 0 rgba(255, 246, 240, .5)) drop-shadow(0 12px 14px rgba(90, 0, 16, .2));
}
.pieza-clara .pieza-entrada { max-width: 62ch; color: #4E4A44; padding-left: 18px; border-left: 3px solid var(--rojo); font-size: clamp(17.5px, 1.4vw, 20.5px); }
.pieza-clara .pieza-entrada strong { font-weight: 700; color: var(--tinta); }
.pieza-clara .pieza-aval { color: var(--piedra); }
.pieza-clara .pieza-aval b { color: var(--tinta); }
.pieza-clara .pieza-aval .estrellas { color: var(--rojo); }
.aval-doble { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 12px; row-gap: 3px; }
.aval-doble .estrellas { grid-row: span 2; }
.billetes { display: flex; flex-wrap: wrap; gap: 22px 18px; margin: 22px 0 0; }
.pieza-clara .pieza-acciones { margin-top: 0; }
.pieza-clara .pieza-texto { gap: 14px; }
.pieza-sala.pieza-clara { padding-top: calc(var(--cab) + clamp(12px, 2.4vh, 44px)); }
.pieza-clara .aval-doble { row-gap: 7px; }
@media (min-width: 761px) {
.pieza-sala.pieza-clara { padding-top: calc(var(--cab) + clamp(8px, 1.4vh, 44px)); }
.pieza-clara .pieza-texto .miga { margin-bottom: 0; }
.pieza-clara .pieza-titulo { margin-top: -4px; }
.pieza-clara .pieza-acciones { margin-top: 14px; }
.pieza-clara .pieza-aval { margin-top: 8px; }
}
.billete {
--talon: 32px; --fondo: linear-gradient(180deg, #FFFFFF, #F4EFE8); --color-talon: var(--tinta);
position: relative; isolation: isolate; display: grid; grid-template-columns: auto auto; grid-template-areas: "que que" "cifra dur";
align-items: end; column-gap: 12px; row-gap: 5px; padding: 10px calc(var(--talon) + 16px) 11px 16px;
filter: drop-shadow(0 14px 14px rgba(20, 20, 20, .2)) drop-shadow(0 2px 2px rgba(20, 20, 20, .14));
transition: opacity .9s ease, translate .9s var(--suave), rotate .9s var(--suave), transform .5s var(--suave), filter .4s ease;
transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.billete::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px;
background: linear-gradient(to left, var(--color-talon) var(--talon), transparent var(--talon)), var(--fondo);
-webkit-mask: radial-gradient(circle 7px at calc(100% - var(--talon)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - var(--talon)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle 7px at calc(100% - var(--talon)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - var(--talon)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
}
.billete::after {
content: attr(data-talon); position: absolute; top: 10px; bottom: 10px; right: 0; width: var(--talon);
display: grid; place-items: center; border-left: 1.5px dashed rgba(255, 255, 255, .5);
writing-mode: vertical-rl; transform: rotate(180deg);
font-family: var(--dato); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .9); white-space: nowrap;
}
.billete-que { grid-area: que; display: flex; align-items: center; gap: 8px; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); white-space: nowrap; }
.billete-que::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px rgba(225, 0, 43, .14); }
.billete-cifra { grid-area: cifra; margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3vw, 46px); line-height: .82; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cifra-cuenta { display: inline-grid; justify-items: end; }
.cifra-cuenta > * { grid-area: 1 / 1; }
.cifra-fija { visibility: hidden; }
.billete-dur { grid-area: dur; margin: 0; padding-bottom: 3px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--dato); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--piedra); white-space: nowrap; }
.billete-dur .ico { width: 12px; height: 12px; stroke-width: 2; vertical-align: 0; color: var(--rojo); }
.billete-negro { --fondo: radial-gradient(120% 140% at 0% 0%, rgba(255, 74, 94, .24), transparent 56%), linear-gradient(180deg, #202124, #0B0C0E); --color-talon: var(--rojo); filter: drop-shadow(0 16px 16px rgba(110, 0, 20, .3)) drop-shadow(0 2px 2px rgba(20, 20, 20, .25)); }
.billete-negro .billete-que { color: var(--rojo-vivo); }
.billete-negro .billete-que::before { background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .7); }
.billete-negro .billete-cifra { color: #FFFFFF; }
.billete-negro .billete-dur { color: #A9A49B; }
.billete-negro .billete-dur .ico { color: var(--rojo-vivo); }
.billete-sello {
position: absolute; top: -21px; right: calc(var(--talon) + 6px); margin: 0; padding: 4px 8px 3px; border: 2px solid var(--rojo-vivo); border-radius: 3px; rotate: 5deg;
font-family: var(--dato); font-size: 8.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--rojo-vivo); background: #121315;
box-shadow: 0 0 14px -4px rgba(255, 74, 94, .7);
}
.billete.por-aparecer:not(.aparecido) { rotate: -5deg; }
.billete.por-aparecer:not(.aparecido) + .billete { rotate: 5deg; }
@media (hover: hover) and (pointer: fine) {
.billete:hover { transform: translateY(-5px) rotate(-1.4deg); filter: drop-shadow(0 22px 18px rgba(20, 20, 20, .26)) drop-shadow(0 2px 2px rgba(20, 20, 20, .14)); }
.billete + .billete:hover { transform: translateY(-5px) rotate(1.4deg); }
.billete-negro:hover { filter: drop-shadow(0 22px 20px rgba(160, 0, 28, .4)) drop-shadow(0 2px 2px rgba(20, 20, 20, .25)); }
}
.pieza-clara .vitrina-grande::before {
left: -24%; right: -24%; top: -20%; bottom: -6%; height: auto; opacity: 1;
background: radial-gradient(50% 50% at 50% 50%, rgba(225, 0, 43, .32), rgba(225, 0, 43, .1) 52%, transparent 72%);
}
.pieza-clara .vitrina-grande .vitrina-caja {
box-shadow: 0 0 0 1px rgba(20, 20, 20, .6), 0 0 64px -10px rgba(225, 0, 43, .6), 0 60px 90px -50px rgba(20, 20, 20, .85);
}
.pieza-clara .vitrina-grande:hover .vitrina-caja {
box-shadow: 0 0 0 1px rgba(225, 0, 43, .75), 0 0 90px -8px rgba(225, 0, 43, .75), 0 60px 90px -50px rgba(20, 20, 20, .85);
}
.pieza-clara .vitrina-grande::after { box-shadow: 0 26px 34px -20px rgba(20, 20, 20, .75), 0 0 34px -4px rgba(225, 0, 43, .5); }
@media (min-width: 761px) {
.pieza-larga .vitrina-grande { align-self: start; margin-top: 64px; }
}
.pieza-titulo .linea-tilde { margin-top: .12em; }
.sala-proceso {
padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px);
background: radial-gradient(60% 46% at 50% 0%, rgba(225, 0, 43, .1), transparent 70%), var(--noche); border-top: 1px solid rgba(255, 74, 94, .45);
}
.proceso-cabeza .titulo-seccion { max-width: none; }
.proceso-cabeza .cabeza-texto { max-width: 44ch; color: #BDB7AD; border-left-color: var(--rojo-vivo); }
.pasos-hilo {
--punto: 16px; --hueco: clamp(18px, 2.6vw, 44px); --al-bandeja: clamp(44px, 5vw, 72px);
position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 34px;
margin-bottom: var(--al-bandeja);
}
.pasos-hilo.por-aparecer { opacity: 1; translate: none; }
.paso { position: relative; display: grid; align-content: start; gap: 10px; padding: calc(var(--punto) + 22px) 0 0 calc(var(--punto) / 2 + 18px); }
.paso-punto {
position: absolute; left: 0; top: 0; z-index: 2; width: var(--punto); height: var(--punto); border-radius: 50%;
background: var(--rojo-vivo); box-shadow: 0 0 0 4px var(--noche), 0 0 18px 3px rgba(255, 74, 94, .55);
}
.paso-tramo { position: absolute; z-index: 1; left: calc(var(--punto) / 2); top: calc(var(--punto) / 2 - 1px); width: calc(100% + var(--hueco)); height: 2px; background: rgba(236, 232, 225, .14); }
.paso-tramo::after {
content: ""; position: absolute; inset: 0; transform-origin: left;
background: linear-gradient(90deg, var(--rojo-vivo), var(--rojo)); box-shadow: 0 0 10px rgba(255, 74, 94, .65);
}
.paso-num { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 3.6vw, 58px); line-height: .8; color: var(--rojo-vivo); }
.paso-ico {
position: absolute; right: 0; top: calc(var(--punto) + 22px); width: 34px; height: 34px; stroke-width: 1.4; color: var(--hueso); opacity: .85;
stroke-dasharray: 90; stroke-dashoffset: 0;
}
.paso-titulo { font-family: var(--display); font-weight: 800; font-size: clamp(25px, 2.3vw, 34px); line-height: .95; text-transform: uppercase; color: var(--hueso); }
.paso-texto { max-width: 30ch; font-size: 16px; line-height: 1.5; color: #ADA79D; }
.paso-con-bandeja::after {
content: ""; position: absolute; left: calc(var(--punto) / 2 - 1px); top: var(--punto); bottom: calc(-1 * var(--al-bandeja)); width: 2px;
background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo)); box-shadow: 0 0 10px rgba(255, 74, 94, .55);
transform-origin: top;
}
.pasos-hilo.aparecido .paso-punto { transition: background-color .4s ease, box-shadow .5s ease; transition-delay: calc(var(--i) * .55s + .2s); }
.pasos-hilo.aparecido .paso-tramo::after { transition: transform .55s cubic-bezier(.45, 0, .55, 1) calc(var(--i) * .55s + .35s); }
.pasos-hilo.aparecido .paso-num { transition: color .5s ease calc(var(--i) * .55s + .2s), text-shadow .35s ease, transform .45s var(--suave); }
.pasos-hilo.aparecido .paso-ico { transition: stroke-dashoffset 1.4s var(--suave) calc(var(--i) * .55s + .3s), color .3s ease, opacity .3s ease, transform .45s var(--suave); }
.pasos-hilo.aparecido .paso-titulo, .pasos-hilo.aparecido .paso-texto {
transition: opacity .7s ease calc(var(--i) * .55s + .3s), translate .7s var(--suave) calc(var(--i) * .55s + .3s), color .3s ease, transform .45s var(--suave);
}
.pasos-hilo.aparecido .paso-con-bandeja::after { transition: transform .8s var(--suave) calc(var(--n, 4) * .55s); }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-punto { background: var(--carbon); box-shadow: 0 0 0 4px var(--noche), inset 0 0 0 2px rgba(236, 232, 225, .35); }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-tramo::after { transform: scaleX(0); }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-num { color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 225, .38); }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-ico { stroke-dashoffset: 90; }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-titulo, .pasos-hilo.por-aparecer:not(.aparecido) .paso-texto { opacity: 0; translate: 0 12px; }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-con-bandeja::after { transform: scaleY(0); }
.herramientas {
position: relative; border-radius: 6px; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.6vw, 36px) clamp(10px, 1.2vw, 16px);
border: 1px solid rgba(255, 110, 124, .26); background-color: #0E0F11;
background-image: radial-gradient(90% 60% at 50% 0%, rgba(255, 74, 94, .18), rgba(255, 74, 94, .04) 55%, transparent 80%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 44px -16px rgba(225, 0, 43, .45), 0 46px 80px -44px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.herramientas::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);
}
.herramientas-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }
.herramientas-cab b { font-weight: 500; color: var(--rojo-vivo); }
.herramientas-cab em { margin-left: auto; white-space: nowrap; padding: 4px 8px 3px; border-radius: 2px; border: 1px solid rgba(255, 74, 94, .5); font-style: normal; color: var(--rojo-vivo); }
.herramientas-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.herramienta { position: relative; display: grid; align-content: start; gap: 8px; padding: 16px 18px; border-left: 1px solid rgba(236, 232, 225, .1); transition: transform .45s var(--suave); }
.herramientas.aparecido .herramienta { transition: opacity .6s ease calc(var(--i) * 90ms + .3s), translate .6s var(--suave) calc(var(--i) * 90ms + .3s), transform .45s var(--suave); }
.herramienta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.herramienta-num { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.2vw, 34px); line-height: .8; color: var(--rojo-vivo); }
.herramienta:first-child { border-left: 0; padding-left: 0; }
.herramienta .ico { width: 30px; height: 30px; stroke-width: 1.3; color: var(--hueso); opacity: .85; transition: transform .5s var(--muelle), color .3s, opacity .3s; }
.herramienta-nombre { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.7vw, 24px); line-height: 1; text-transform: uppercase; color: var(--hueso); transition: color .3s; }
.herramienta-texto { font-size: 15px; line-height: 1.45; color: #A9A49B; }
.herramientas.por-aparecer:not(.aparecido) .herramienta { opacity: 0; translate: 0 14px; }
.metodo-oscuro {
max-width: none; margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
grid-template-areas: "cab fases" "texto fases" "enlace fases"; align-items: center; column-gap: clamp(24px, 4vw, 64px);
padding: 20px 24px 18px; background: rgba(236, 232, 225, .03); box-shadow: inset 0 0 0 1px rgba(236, 232, 225, .12); transition: box-shadow .4s;
}
.metodo-oscuro .metodo-mapa-cab { grid-area: cab; margin-bottom: 8px; color: var(--rojo-vivo); }
.metodo-oscuro .metodo-mapa-fases { grid-area: fases; margin: 0; }
.metodo-oscuro .metodo-mapa-texto { grid-area: texto; margin-bottom: 10px; color: #B3ADA3; }
.metodo-oscuro .enlace { grid-area: enlace; justify-self: start; }
.metodo-oscuro .metodo-mapa-fases::before { background: rgba(236, 232, 225, .18); }
.metodo-oscuro .metodo-mapa-fases li { color: var(--humo); }
.metodo-oscuro .metodo-mapa-fases li b { color: rgba(236, 232, 225, .28); }
.metodo-oscuro .metodo-mapa-fases li::before { background: var(--carbon); box-shadow: inset 0 0 0 2px rgba(236, 232, 225, .3); }
.metodo-oscuro.aparecido .metodo-mapa-fases li b { transition: color .5s calc(var(--k) * .18s + .4s); }
.metodo-oscuro.aparecido .metodo-mapa-fases li::before { transition: background-color .4s, box-shadow .5s; transition-delay: calc(var(--k) * .18s + .4s); }
.metodo-oscuro .metodo-mapa-fases li.encendida { color: var(--hueso); }
.metodo-oscuro .metodo-mapa-fases li.encendida b { color: var(--rojo-vivo); }
.metodo-oscuro .metodo-mapa-fases li.encendida::before { background: var(--rojo-vivo); box-shadow: 0 0 0 3px var(--carbon), 0 0 16px 3px rgba(255, 74, 94, .6); }
.metodo-oscuro.por-aparecer:not(.aparecido) .metodo-mapa-fases li.encendida b { color: rgba(236, 232, 225, .28); }
.metodo-oscuro.por-aparecer:not(.aparecido) .metodo-mapa-fases li.encendida::before { background: var(--carbon); box-shadow: inset 0 0 0 2px rgba(236, 232, 225, .3); }
@media (hover: hover) and (pointer: fine) {
.paso::before {
content: ""; position: absolute; z-index: -1; left: calc(var(--punto) / 2 + 4px); right: -14px; top: calc(var(--punto) + 8px); bottom: -16px;
border-radius: 6px; pointer-events: none;
background: radial-gradient(110% 80% at 0% 0%, rgba(255, 74, 94, .14), transparent 62%), rgba(236, 232, 225, .025);
box-shadow: inset 0 0 0 1px rgba(255, 74, 94, .22);
opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s var(--suave);
}
.paso:hover::before { opacity: 1; transform: translateY(-4px); }
.pasos-hilo.aparecido .paso:hover :is(.paso-num, .paso-titulo, .paso-texto) { transform: translateY(-4px); }
.pasos-hilo.aparecido .paso:hover .paso-ico { transform: translateY(-4px) rotate(-6deg); }
.pasos-hilo.aparecido .paso:hover .paso-punto { animation: punto-late .9s var(--suave); }
.pasos-hilo.aparecido .paso:hover .paso-num { text-shadow: 0 0 18px rgba(255, 74, 94, .75), 0 0 2px rgba(255, 74, 94, .9); }
.pasos-hilo.aparecido .paso:hover .paso-ico { animation: icono-dibuja 1.1s var(--suave); color: var(--rojo-vivo); opacity: 1; }
.pasos-hilo.aparecido .paso:hover .paso-titulo { color: #FFFFFF; }
.pasos-hilo.aparecido .paso:hover .paso-texto { color: #CFC9BF; }
.herramienta::before {
content: ""; position: absolute; z-index: -1; inset: 6px 2px; border-radius: 5px; pointer-events: none;
background: radial-gradient(90% 75% at 50% 0%, rgba(255, 74, 94, .18), transparent 72%); box-shadow: inset 0 1px 0 rgba(255, 110, 124, .35);
opacity: 0; transition: opacity .35s ease;
}
.herramienta:first-child::before { left: -8px; }
.herramienta:hover::before { opacity: 1; }
.herramienta:hover { transform: translateY(-5px); }
.herramienta:hover .ico { transform: scale(1.14) rotate(-6deg); color: var(--rojo-vivo); opacity: 1; }
.herramienta:hover .herramienta-nombre { color: var(--rojo-vivo); }
.metodo-oscuro:hover { box-shadow: inset 0 0 0 1px rgba(255, 74, 94, .35), 0 0 40px -18px rgba(225, 0, 43, .6); }
.metodo-oscuro.aparecido:hover .metodo-mapa-fases li.encendida::before { animation: punto-late .9s var(--suave); }
}
@keyframes punto-late {
0%, 100% { scale: 1; }
35% { scale: 1.45; box-shadow: 0 0 0 4px var(--noche), 0 0 0 9px rgba(255, 74, 94, .28), 0 0 30px 8px rgba(255, 74, 94, .75); }
}
@keyframes icono-dibuja { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
.sala-quien-trata { padding-top: clamp(52px, 5.6vw, 88px); padding-bottom: clamp(52px, 5.6vw, 88px); }
.quien-trata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.quien-trata-cabeza { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(22px, 2.8vw, 36px); }
.quien-trata-cabeza .titulo-seccion { max-width: none; }
.quien-trata-cabeza .cabeza-texto { max-width: 70ch; padding-left: 18px; border-left: 2px solid var(--rojo); font-size: 16.5px; }
.quien-trata-equipo { display: flex; flex-direction: column; }
.quien-trata-equipo .apoyo-marco { margin-top: auto; padding-top: 18px; }
.quien-trata .quien-retratos { max-width: none; }
.sala-quien-trata .retrato-cuelga { padding-top: calc(var(--cuelga, 40px) * .42); }
.sala-quien-trata .retrato-cable { height: calc(var(--cuelga, 40px) * .42); }
.ficha-uno { display: grid; grid-template-columns: minmax(0, clamp(210px, 19vw, 320px)) minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 40px); align-items: end; }
.ficha-uno-texto { display: grid; gap: 14px; justify-items: start; padding-bottom: 4px; }
.ficha-uno-texto > p:first-child { font-family: var(--dato); font-size: 9.5px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--piedra); }
.ficha-uno-texto > p:first-child b { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1; letter-spacing: .01em; color: var(--tinta); }
.ficha-uno .tambien-hacen { margin-top: 0; gap: 6px 16px; }
.ficha-uno .tambien-hacen > span { flex-basis: 100%; }
.ficha-uno .tambien-hacen i { display: none; }
.ficha-uno .tambien-hacen a:not(.enlace)::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 0 0; border-radius: 50%; vertical-align: .2em; background: var(--rojo); }
@media (max-width: 560px) {
.ficha-uno { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
.ficha-uno .quien-retratos { max-width: 260px; }
}
.patologias.patologias-compactas { font-size: clamp(14.5px, 1.25vw, 18px); }
.patologias-compactas li { padding: .55em .85em .5em .68em; }
.tambien-hacen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--linea-arena); font-size: 15.5px; color: var(--piedra); }
.tambien-hacen span { margin-right: 4px; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); }
.tambien-hacen a:not(.enlace) { color: var(--tinta); text-decoration-color: var(--rojo); text-underline-offset: 3px; transition: color .25s; }
.tambien-hacen a:not(.enlace):hover { color: var(--rojo-texto); }
.tambien-hacen i { font-style: normal; color: var(--rojo); }
.tambien-hacen .enlace { margin-left: auto; }
.cartela-patologias {
position: relative; display: flex; flex-direction: column; padding: 0 clamp(18px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
border-radius: 6px; overflow: hidden; color: var(--tinta);
background: radial-gradient(90% 60% at 100% 100%, rgba(225, 0, 43, .05), transparent 60%), linear-gradient(180deg, #F4EFE7, #EAE3D8);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .1), 0 1px 2px rgba(20, 20, 20, .06), 0 50px 80px -48px rgba(20, 20, 20, .6);
transition: opacity .9s ease, translate .9s var(--suave), transform .5s var(--suave), box-shadow .45s ease;
transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.cartela-patologias::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .06; }
.cartela-cab {
position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 0 calc(-1 * clamp(18px, 2.2vw, 30px)) clamp(16px, 1.8vw, 22px); padding: 13px clamp(18px, 2.2vw, 30px) 12px;
background: linear-gradient(180deg, #1B1C1F, #0B0C0E); border-bottom: 3px solid var(--rojo);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.cartela-cab span { display: inline-flex; align-items: center; gap: 10px; }
.cartela-cab span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .75); }
.cartela-titulo { position: relative; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3vw, 52px); line-height: .9; text-transform: uppercase; color: var(--tinta); }
.cartela-titulo .punto { color: var(--rojo); -webkit-text-fill-color: var(--rojo); }
.cartela-texto { position: relative; margin: 8px 0 14px; font-size: clamp(15.5px, 1.3vw, 20px); line-height: 1.5; color: var(--piedra); }
.patologias { position: relative; display: flex; flex-wrap: wrap; gap: .55em .5em; margin: auto 0; padding: 10px 0; font-size: clamp(15.5px, 1.38vw, 21px); }
.patologias li {
display: inline-flex; align-items: center; gap: .55em; padding: .6em 1em .54em .76em; border-radius: 999px;
font-size: 1em; line-height: 1.2; color: var(--tinta); background: #F9F6F1; box-shadow: inset 0 0 0 1.5px var(--tinta), 0 8px 14px -12px rgba(20, 20, 20, .5);
transition: background-color .3s, color .3s, box-shadow .3s, translate .3s var(--suave);
}
.cartela-patologias.aparecido .patologias li {
transition: opacity .5s ease, scale .6s var(--muelle), background-color .3s, color .3s, box-shadow .3s, translate .3s var(--suave);
transition-delay: calc(var(--i) * 55ms + .35s), calc(var(--i) * 55ms + .35s), 0s, 0s, 0s, 0s;
}
.patologias li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px rgba(225, 0, 43, .14); transition: background-color .3s, box-shadow .3s; }
.patologias li:hover { background: var(--tinta); color: var(--hueso); box-shadow: inset 0 0 0 1.5px var(--tinta), 0 14px 22px -10px rgba(225, 0, 43, .45); translate: 0 -2px; }
.patologias li:hover::before { background: var(--rojo-vivo); box-shadow: 0 0 10px 2px rgba(255, 74, 94, .7); }
.cartela-patologias.por-aparecer:not(.aparecido) .patologias li { opacity: 0; scale: .82; }
.cartela-pie { position: relative; margin-top: 0; padding-top: 14px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }
.cartela-nota { position: relative; margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--rojo); font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.5; color: var(--piedra); }
.cartela-cab { transition: border-color .35s ease, box-shadow .35s ease; }
@media (hover: hover) and (pointer: fine) {
.cartela-patologias:hover {
transform: translateY(-5px);
box-shadow: 0 0 0 1px rgba(225, 0, 43, .28), 0 2px 4px rgba(20, 20, 20, .08), 0 62px 90px -46px rgba(20, 20, 20, .72), 0 0 46px -18px rgba(225, 0, 43, .5);
}
.cartela-patologias:hover .cartela-cab { border-bottom-color: var(--rojo-vivo); box-shadow: 0 6px 18px -6px rgba(255, 74, 94, .7); }
.cartela-patologias:hover .cartela-cab span::before { animation: punto-late .9s var(--suave); }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.titulo-luz {
padding-top: .14em; margin-top: -.14em;
background: linear-gradient(180deg, #1C1B1A 0%, #141414 48%, #5C0A16 66%, #C4001F 80%, #FF2D47 88%, #141414 100%);
background-size: 100% 1lh; background-position: 0 .14em; background-repeat: repeat-y;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.titulo-claro.titulo-luz { background-image: linear-gradient(180deg, #FFFFFF 0%, #F4F0E9 30%, #D2CCC2 58%, #9D978E 86%, #FFFFFF 100%); }
}
.apoyo {
position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 16px;
padding: 13px 18px 13px 13px; border-radius: 6px; text-decoration: none; color: var(--hueso);
border: 1px solid rgba(255, 110, 124, .24);
background: radial-gradient(90% 130% at 0% 0%, rgba(255, 74, 94, .2), transparent 60%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 36px -16px rgba(225, 0, 43, .45), 0 30px 50px -30px rgba(20, 20, 20, .7), inset 0 1px 0 rgba(255, 255, 255, .1);
transition: transform .45s var(--suave), border-color .35s, box-shadow .35s;
}
.apoyo-foto { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--rojo), 0 0 0 6px rgba(255, 74, 94, .16); }
.apoyo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: grayscale(1) contrast(1.05); transition: filter .6s ease; }
.apoyo-texto { display: grid; gap: 3px; }
.apoyo-texto em { font-style: normal; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo); }
.apoyo-texto b { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); line-height: 1; text-transform: uppercase; }
.apoyo-texto span { font-size: 14.5px; line-height: 1.4; color: #B3ADA3; }
.apoyo-flecha { width: 22px; height: 22px; color: var(--rojo-vivo); stroke-width: 2; transition: transform .4s var(--suave); }
.apoyo:hover { transform: translateY(-3px); border-color: rgba(255, 74, 94, .6); box-shadow: 0 0 46px -14px rgba(225, 0, 43, .6), 0 36px 56px -30px rgba(20, 20, 20, .75), inset 0 1px 0 rgba(255, 255, 255, .12); }
.apoyo:hover .apoyo-foto img { filter: none; }
.apoyo:hover .apoyo-flecha { transform: translateX(4px); }
.apoyo:focus-visible { outline-offset: 4px; }
.precio-sencillo { padding-bottom: clamp(44px, 4.6vw, 72px); }
.precio-sencillo .precio-cabeza { margin-bottom: clamp(26px, 3vw, 40px); }
.precio-sencillo .precio-titulo { max-width: none; white-space: nowrap; font-size: min(clamp(40px, 5.2vw, 90px), calc((100vw - 16px - 2 * var(--lateral)) / (var(--largo, 37) * .45))); }
.precio-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.taquilla { display: grid; gap: 14px; }
.taquilla-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); }
.taquilla-cab i { font-style: normal; color: var(--piedra); }
.tarifa-entradas { --talon: clamp(118px, 11vw, 150px); display: grid; gap: 12px; max-width: none; border-top: 0; }
.tarifa-entradas.por-aparecer { opacity: 1; translate: none; }
.tarifa-entradas .tarifa-fila {
position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--talon); align-items: center; gap: 4px 16px;
min-height: 84px; padding: 0 0 0 22px; border: 0;
filter: drop-shadow(0 14px 14px rgba(20, 20, 20, .14)) drop-shadow(0 1px 1px rgba(20, 20, 20, .12));
transition: transform .5s var(--suave), filter .4s ease;
}
.tarifa-entradas .tarifa-fila::before {
content: ""; position: absolute; inset: 0 var(--talon) 0 0; z-index: -1; border-radius: 6px 0 0 6px;
background: linear-gradient(180deg, #FFFFFF, #F6F2EC);
-webkit-mask: radial-gradient(circle 8px at 100% 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle 8px at 100% 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
}
.tarifa-entradas .tarifa-fila dt { padding: 16px 0; }
.tarifa-entradas .tarifa-fila dt b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.75vw, 26px); line-height: 1; text-transform: uppercase; color: var(--tinta); }
.tarifa-entradas .tarifa-fila dt span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.4; color: var(--piedra); }
.tarifa-entradas .tarifa-dur { justify-self: end; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px 4px; border-radius: 3px; background: rgba(20, 20, 20, .05); font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); white-space: nowrap; }
.tarifa-entradas .tarifa-dur:empty { display: none; }
.tarifa-entradas .tarifa-dur .ico { width: 12px; height: 12px; stroke-width: 2; vertical-align: 0; color: var(--rojo); }
.tarifa-entradas .tarifa-precio {
align-self: stretch; justify-self: stretch; display: grid; place-items: center; align-content: center; gap: 4px; margin: 0; padding: 10px 12px;
border-radius: 0 6px 6px 0; border-left: 2px dashed rgba(236, 232, 225, .35);
--precio-f: clamp(30px, 2.7vw, 42px);
font-family: var(--display); font-weight: 900; font-size: min(var(--precio-f), calc((var(--talon) - 28px) / var(--cifra, 1.6))); line-height: .9; color: #FFFFFF; white-space: nowrap; font-variant-numeric: tabular-nums;
background: radial-gradient(120% 90% at 50% 0%, rgba(255, 74, 94, .22), transparent 60%), linear-gradient(180deg, #1F2023, #0B0C0E);
-webkit-mask: radial-gradient(circle 8px at 0 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle 8px at 0 0, #0000 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
transform-origin: 0 100%; transition: transform .5s var(--muelle), color .3s;
grid-column: 3;
}
.tarifa-entradas .tarifa-precio::before { display: none; }
.tarifa-entradas .tarifa-precio::after { content: "Entrada"; font-family: var(--dato); font-weight: 500; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--rojo-vivo); }
.tarifa-entradas .tarifa-conviene { box-shadow: none; background: none; margin: 0; padding-left: 22px; padding-right: 0; }
.tarifa-entradas .tarifa-conviene::before { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 74, 94, .22), transparent 55%), linear-gradient(180deg, #202124, #0B0C0E); }
.tarifa-entradas .tarifa-conviene dt b { color: #FFFFFF; }
.tarifa-entradas .tarifa-conviene dt span { color: #B3ADA3; }
.tarifa-entradas .tarifa-conviene .tarifa-dur { background: rgba(236, 232, 225, .08); color: #B3ADA3; }
.tarifa-entradas .tarifa-conviene .tarifa-dur .ico { color: var(--rojo-vivo); }
.tarifa-entradas .tarifa-conviene .tarifa-precio { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(180deg, #F0163A, #B8001F); border-left-color: rgba(255, 255, 255, .55); }
.tarifa-entradas .tarifa-conviene .tarifa-precio::after { color: #FFE3E7; }
.tarifa-entradas .tarifa-conviene { filter: drop-shadow(0 16px 16px rgba(110, 0, 20, .28)) drop-shadow(0 1px 1px rgba(20, 20, 20, .2)); }
.tarifa-entradas .tarifa-sello {
position: absolute; z-index: 2; right: calc(var(--talon) + 12px); top: -12px; margin: 0; padding: 5px 9px 4px; border: 2px solid var(--rojo-vivo); border-radius: 3px; rotate: -5deg;
font-family: var(--dato); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo-vivo); background: #121315;
box-shadow: 0 0 16px -4px rgba(255, 74, 94, .7); transition: rotate .45s var(--muelle), scale .45s var(--muelle);
}
.tarifa-entradas.aparecido .tarifa-fila { transition: opacity .7s ease calc(var(--i) * .14s + .1s), translate .8s var(--suave) calc(var(--i) * .14s + .1s), rotate .8s var(--suave) calc(var(--i) * .14s + .1s), transform .5s var(--suave), filter .4s ease; }
.tarifa-entradas.por-aparecer:not(.aparecido) .tarifa-fila { opacity: 0; translate: -36px 0; rotate: -2deg; }
.tarifa-entradas.aparecido .tarifa-sello { transition: rotate .45s var(--muelle), scale .55s var(--muelle) .75s, opacity .2s ease .75s; }
.tarifa-entradas.por-aparecer:not(.aparecido) .tarifa-sello { scale: 2.2; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
.tarifa-entradas .tarifa-fila:hover { transform: translateY(-5px) rotate(-.6deg); filter: drop-shadow(0 22px 20px rgba(20, 20, 20, .22)) drop-shadow(0 1px 1px rgba(20, 20, 20, .12)); }
.tarifa-entradas .tarifa-conviene:hover { filter: drop-shadow(0 24px 22px rgba(150, 0, 26, .38)) drop-shadow(0 1px 1px rgba(20, 20, 20, .2)); }
.tarifa-entradas .tarifa-fila:hover .tarifa-precio { transform: translate(5px, -2px) rotate(4deg); }
.tarifa-entradas .tarifa-fila:hover .tarifa-sello { rotate: -10deg; scale: 1.06; }
}
.dudas .pregunta { border-bottom-color: var(--linea); }
.dudas .pregunta:last-of-type { border-bottom: 0; }
.dudas .pregunta summary { padding: 16px 0; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.05; }
.dudas .pregunta summary::after { width: 30px; height: 30px; font-size: 16px; }
.dudas .respuesta p { padding-bottom: 18px; font-size: 16.5px; }
.precio-sencillo .tarifa-pie { max-width: none; margin-top: clamp(18px, 2vw, 26px); }
.tablon {
position: relative; padding: 0 clamp(18px, 2.2vw, 30px) clamp(4px, .8vw, 10px); border-radius: 0 0 6px 6px; border-top: 3px solid var(--tinta);
background: linear-gradient(180deg, #FFFFFF, #F8F5F0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 20, 20, .06), 0 46px 76px -48px rgba(20, 20, 20, .6);
}
.tablon::before { content: ""; position: absolute; left: clamp(18px, 2.2vw, 30px); top: -3px; width: 64px; height: 3px; background: var(--rojo); }
.tablon-cab {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 12px; border-bottom: 1px solid var(--linea);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto);
}
@media (max-width: 760px) {
.tarifa-entradas { --talon: 112px; }
.tarifa-entradas .tarifa-fila { grid-template-columns: minmax(0, 1fr) var(--talon); column-gap: 12px; padding-left: 16px; }
.tarifa-entradas .tarifa-fila dt { grid-column: 1; grid-row: 1; padding: 14px 0 6px; }
.tarifa-entradas .tarifa-dur { grid-column: 1; grid-row: 2; justify-self: start; margin-bottom: 14px; }
.tarifa-entradas .tarifa-precio { grid-column: 2; grid-row: 1 / span 2; --precio-f: 30px; }
.tarifa-entradas .tarifa-sello { top: -24px; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.titulo-acentuado {
padding-top: .14em; margin-top: -.14em;
background: linear-gradient(180deg, #4A4642 0%, #1E1D1C 45%, #141414 100%) 0 .14em / 100% 1lh repeat-y;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.titulo-acentuado .acento {
background: linear-gradient(180deg, #FF4A5E 0%, #E1002B 52%, #A3001D 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 10px rgba(225, 0, 43, .28));
}
}
.precio-titulo .subrayado { background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 calc(100% - .1em) / 100% .07em; }
.precio-titulo.aparecido .subrayado { transition: background-size 1.1s var(--suave) .7s; }
.precio-titulo.js-titulo:not(.aparecido) .subrayado { background-size: 0 .07em; }
.servicio-nuevo .cierre { padding-top: clamp(52px, 5.6vw, 88px); padding-bottom: clamp(52px, 5.6vw, 88px); }
.servicio-nuevo .cierre-placa { gap: 12px; padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px); }
.servicio-nuevo .cierre-titulo { font-size: clamp(38px, 4.2vw, 68px); }
.cierre-aval { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.cierre-aval b { font-weight: 500; color: var(--hueso); }
.cierre-aval .estrellas { font-size: 14px; color: var(--rojo-vivo); }
.mini-vitrina-todas { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 74, 94, .16), transparent 70%), #0B0C0E; }
.mini-vitrina-todas .ico { width: 40%; height: 40%; stroke-width: 1.2; color: var(--rojo-vivo); filter: drop-shadow(0 0 8px rgba(255, 74, 94, .55)); transition: transform .6s var(--muelle); }
.otras-piezas a:hover .mini-vitrina-todas .ico { transform: rotate(90deg) scale(1.08); }
.otras-piezas .otras-piezas-pie { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linea-arena); }
.otras-piezas .otras-piezas-pie a { display: inline-block; }
@media (max-width: 1100px) {
.quien-trata, .precio-rejilla { grid-template-columns: minmax(0, 1fr); }
.quien-uno .quien-trata { grid-template-columns: minmax(0, 1fr); }
.cartela-patologias { max-width: 40rem; }
.quien-trata-equipo .apoyo-marco { margin-top: 0; }
.metodo-oscuro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "fases" "texto" "enlace"; }
.metodo-oscuro .metodo-mapa-fases { margin: 6px 0 14px; }
}
@media (max-width: 760px) {
.pasos-hilo { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
.paso { padding: 0 0 0 calc(var(--punto) + 20px); }
.paso-tramo { left: calc(var(--punto) / 2 - 1px); top: calc(var(--punto) / 2); width: 2px; height: calc(100% + 30px); }
.paso-tramo::after { transform-origin: top; background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo)); }
.pasos-hilo.por-aparecer:not(.aparecido) .paso-tramo::after { transform: scaleY(0); }
.paso-ico { top: 0; }
.paso-con-bandeja::after { display: none; }
.herramienta { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(236, 232, 225, .1); }
.herramienta:first-child { border-top: 0; }
.tambien-hacen .enlace { margin-left: 0; }
.metodo-mapa-fases { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr); }
.metodo-mapa-fases::before { right: calc(34.07% - 6px); }
.metodo-oscuro { padding: 18px 16px 16px; }
.metodo-oscuro .metodo-mapa-fases li { font-size: 8.5px; letter-spacing: .03em; }
.apoyo { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; }
.apoyo-foto { width: 54px; height: 54px; }
.precio-sencillo .tarifa-fila dt { grid-template-columns: minmax(0, 1fr); }
.precio-sencillo .tarifa-fila dt::after { display: none; }
.tarifa-sello { top: -10px; }
.precio-sencillo .precio-titulo { white-space: normal; font-size: clamp(34px, 9.6vw, 46px); }
}
.billete-solo { grid-template-columns: auto; grid-template-areas: "que" "cifra"; }
.bandeja-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding: 14px 0 12px; }
.bandeja-foto { transition: transform .45s var(--suave); }
.bandeja-foto figure { display: grid; gap: 12px; }
.bandeja-foto-marco { overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(236, 232, 225, .14), 0 26px 40px -24px rgba(0, 0, 0, .9); transition: box-shadow .4s ease; }
.bandeja-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: min(340px, 48vh); object-fit: cover; transition: scale .8s var(--suave); }
.bandeja-foto figcaption { display: flex; align-items: baseline; gap: 12px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hueso); }
.herramientas.aparecido .bandeja-foto { transition: opacity .6s ease calc(var(--i) * 140ms + .3s), translate .6s var(--suave) calc(var(--i) * 140ms + .3s), transform .45s var(--suave); }
.herramientas.por-aparecer:not(.aparecido) .bandeja-foto { opacity: 0; translate: 0 14px; }
@media (hover: hover) and (pointer: fine) {
.bandeja-foto:hover { transform: translateY(-5px); }
.bandeja-foto:hover img { scale: 1.04; }
.bandeja-foto:hover .bandeja-foto-marco { box-shadow: 0 0 0 1px rgba(255, 74, 94, .6), 0 0 34px -10px rgba(225, 0, 43, .65), 0 30px 44px -24px rgba(0, 0, 0, .9); }
}
@media (max-width: 560px) { .bandeja-fotos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) {
.apoyo-varios { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
.apoyo-varios .apoyo-fotos { grid-column: 1 / -1; }
.apoyo-texto em { letter-spacing: .1em; }
}
.apoyo-varios { grid-template-columns: auto minmax(0, 1fr) auto; }
.apoyo-fotos { display: flex; }
.apoyo-fotos .apoyo-foto { width: 48px; height: 48px; transition: transform .45s var(--suave); }
.apoyo-fotos .apoyo-foto + .apoyo-foto { margin-left: -14px; }
.apoyo:hover .apoyo-fotos .apoyo-foto:nth-child(2) { transform: translateX(5px); }
.apoyo:hover .apoyo-fotos .apoyo-foto:nth-child(3) { transform: translateX(10px); }
@media (max-width: 760px) { .apoyo-fotos .apoyo-foto { width: 42px; height: 42px; } }
.proceso-aviso { display: flex; gap: 10px; align-items: flex-start; color: #FF9AA6; }
.proceso-aviso .ico { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--rojo-vivo); }
.herramientas-pendientes .herramienta .ico { color: var(--rojo-vivo); opacity: 1; }
.herramientas-pendientes .herramientas-cab em { border-style: dashed; }
.sala-oscura .dato-pendiente { color: var(--rojo-vivo); border-color: rgba(255, 74, 94, .7); background: rgba(255, 74, 94, .08); }
.calculadora {
position: relative; justify-self: center; width: min(100%, 480px); display: grid; gap: clamp(10px, 2.2vh, 16px); margin: 0;
padding: clamp(14px, 2.6vh, 26px) clamp(18px, 2.2vw, 28px) clamp(12px, 2.2vh, 22px); border-radius: 6px; color: var(--hueso);
border: 1px solid rgba(255, 110, 124, .26); background-color: #0E0F11;
background-image: radial-gradient(90% 60% at 50% 0%, rgba(255, 74, 94, .18), rgba(255, 74, 94, .04) 55%, transparent 80%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .6), 0 0 64px -10px rgba(225, 0, 43, .55), 0 60px 90px -50px rgba(20, 20, 20, .85);
}
.calculadora::before {
content: ""; position: absolute; left: 8%; right: 8%; 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);
}
.calc-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo); }
.calc-cab span { display: inline-flex; align-items: center; gap: 10px; }
.calc-cab span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .75); }
.calc-cab em { font-style: normal; padding: 4px 8px 3px; border-radius: 2px; border: 1px solid rgba(255, 74, 94, .5); }
.calc-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.calc-grupo legend { padding: 0; margin-bottom: clamp(4px, 1vh, 8px); font-family: var(--dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--humo); }
.calc-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.calc-plazos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.calc-opciones label { position: relative; display: block; cursor: pointer; }
.calc-opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-opciones span {
display: grid; place-items: center; min-height: clamp(32px, 6.4vh, 40px); padding: 6px 6px 4px; border-radius: 4px; border: 1px solid rgba(236, 232, 225, .22);
font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.5vw, 21px); line-height: 1; color: var(--hueso); white-space: nowrap;
transition: background-color .25s, border-color .25s, color .25s, box-shadow .3s, transform .3s var(--suave);
}
.calc-opciones label:hover span { border-color: rgba(255, 74, 94, .7); transform: translateY(-2px); }
.calc-opciones input:checked + span { background: var(--rojo); border-color: var(--rojo); color: #fff; box-shadow: 0 0 22px -4px rgba(225, 0, 43, .75); }
.calc-opciones input:focus-visible + span { outline: 2px solid var(--rojo-vivo); outline-offset: 2px; }
.calc-resultado { display: grid; gap: clamp(4px, 1vh, 6px); padding: clamp(10px, 2vh, 14px) 0 clamp(8px, 1.8vh, 12px); border-top: 1px solid rgba(236, 232, 225, .14); border-bottom: 1px solid rgba(236, 232, 225, .14); }
.calc-cifra { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2vw, 28px); line-height: 1; color: var(--hueso); text-transform: uppercase; }
.calc-cifra b { font-size: clamp(40px, min(4.4vw, 9vh), 64px); color: #fff; font-variant-numeric: tabular-nums; margin-right: 4px; }
.calc-modo { font-family: var(--dato); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-vivo); }
.calc-otra { font-size: clamp(14px, 1.15vw, 15px); line-height: 1.4; color: #B3ADA3; }
.calc-otra b { color: var(--hueso); font-variant-numeric: tabular-nums; }
.calc-datos { display: grid; gap: clamp(3px, .8vh, 6px); margin: 0; }
.calc-datos div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc-datos dt { font-family: var(--dato); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.calc-datos dd { margin: 0; text-align: right; font-size: 15.5px; color: var(--hueso); font-variant-numeric: tabular-nums; }
.calc-nota { font-size: 13.5px; line-height: 1.45; color: #A9A49B; }
.calc-nota a { color: var(--hueso); text-decoration-color: var(--rojo-vivo); text-underline-offset: 3px; }
.calc-cifra b.cambia { animation: calc-cambia .5s var(--suave); }
@keyframes calc-cambia { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.financia-entidad {
max-width: none; margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); align-items: center; gap: 10px clamp(24px, 4vw, 64px);
padding: 20px 24px 18px; background: rgba(236, 232, 225, .03); box-shadow: inset 0 0 0 1px rgba(236, 232, 225, .12);
}
.financia-entidad-cab { font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo); }
.financia-entidad-texto { font-size: 16px; line-height: 1.55; color: #B3ADA3; }
.financia-precio-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.financia-precio-texto { display: grid; gap: 14px; justify-items: start; align-content: space-between; }
.financia-precio .escalera { grid-template-rows: auto minmax(0, 1fr) auto; }
.financia-precio .escalera-dibujo { display: grid; align-content: end; }
.financia-precio { padding-top: clamp(48px, 4.8vw, 80px); padding-bottom: clamp(48px, 4.8vw, 80px); }
.financia-precio .cabeza-una-linea { margin-bottom: clamp(20px, 2.2vw, 30px); }
.financia-precio .escalera-oscura .escalera-barras { padding-top: 16px; }
@media (min-width: 1101px) {
.financia-precio .escalera-dibujo { container-type: size; }
.financia-precio .escalera { --alto: max(120px, calc(100cqh - 56px)); }
}
.financia-precio-texto .cabeza-texto { max-width: 52ch; padding-left: 18px; border-left: 2px solid var(--rojo); }
.escalera {
--alto: clamp(150px, 30vh, 230px); position: relative; margin: 0; display: grid; gap: 18px; padding: 0 clamp(18px, 2.2vw, 28px) clamp(16px, 1.8vw, 22px);
border-radius: 6px; overflow: visible; background: linear-gradient(180deg, #FFFFFF, #F8F5F0);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .08), 0 1px 2px rgba(20, 20, 20, .06), 0 46px 76px -48px rgba(20, 20, 20, .6);
}
.escalera-cab {
display: grid; gap: 4px; margin: 0 calc(-1 * clamp(18px, 2.2vw, 28px)); padding: 13px clamp(18px, 2.2vw, 28px) 12px; border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, #1B1C1F, #0B0C0E); border-bottom: 3px solid var(--rojo);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.escalera-cab span { font-family: var(--texto); font-size: 14px; letter-spacing: 0; text-transform: none; color: #B3ADA3; }
.escalera-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; padding-top: 30px; }
.escalera-barras li { position: relative; display: grid; justify-items: center; align-content: end; outline: none; cursor: default; }
.escalera-valor { margin-bottom: 8px; font-family: var(--display); font-weight: 900; font-size: clamp(19px, 1.7vw, 25px); line-height: 1; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.escalera-barra { display: block; width: 24px; height: calc(var(--alto) * var(--v) / var(--max)); border-radius: 4px 4px 0 0; background: var(--rojo); transform-origin: 50% 100%; transition: background-color .25s; }
.escalera-plazo { justify-self: stretch; text-align: center; padding-top: 10px; border-top: 1px solid var(--linea-arena); font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.6vw, 23px); line-height: 1; color: var(--tinta); }
.escalera-plazo small { display: block; margin-top: 3px; font-family: var(--dato); font-weight: 400; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.escalera-tae { margin-top: 6px; display: grid; justify-items: center; font-family: var(--dato); font-size: 9.5px; line-height: 1.35; letter-spacing: .04em; color: var(--piedra); white-space: nowrap; }
.escalera-tae small { font-size: 8px; letter-spacing: .12em; color: var(--humo); }
.escalera-globo {
position: absolute; z-index: 3; bottom: calc(100% - 22px); left: 50%; width: max-content; max-width: 220px; padding: 8px 10px 7px; border-radius: 4px;
background: var(--tinta); color: var(--hueso); font-size: 13px; line-height: 1.4; text-align: left; box-shadow: 0 14px 24px -10px rgba(20, 20, 20, .5);
opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .2s, transform .25s var(--suave);
}
.escalera-globo b { color: #fff; }
.escalera-barras li:first-child .escalera-globo { left: 0; transform: translate(0, 6px); }
.escalera-barras li:last-child .escalera-globo { left: auto; right: 0; transform: translate(0, 6px); }
.escalera-barras li:hover .escalera-globo, .escalera-barras li:focus-visible .escalera-globo { opacity: 1; transform: translate(-50%, 0); }
.escalera-barras li:first-child:hover .escalera-globo, .escalera-barras li:first-child:focus-visible .escalera-globo,
.escalera-barras li:last-child:hover .escalera-globo, .escalera-barras li:last-child:focus-visible .escalera-globo { transform: none; }
.escalera-barras li:hover .escalera-barra, .escalera-barras li:focus-visible .escalera-barra { background: var(--rojo-hondo); }
.escalera-barras li:focus-visible .escalera-plazo { outline: 2px solid var(--rojo); outline-offset: 2px; }
.escalera.por-aparecer:not(.aparecido) .escalera-barra { transform: scaleY(0); }
.escalera.aparecido .escalera-barra { transition: transform .9s var(--suave) calc(var(--i) * 90ms + .25s), background-color .25s; }
.importes-pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.importes-pestanas[hidden] { display: none; }
.importes-pestanas button {
padding: 11px 18px 9px; border-radius: 4px; border: 1.5px solid var(--tinta); background: rgba(255, 255, 255, .5); color: var(--tinta); cursor: pointer;
font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; font-variant-numeric: tabular-nums;
transition: background-color .25s, color .25s, box-shadow .3s, transform .3s var(--suave);
}
.importes-pestanas button:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(20, 20, 20, .5); }
.importes-pestanas button[aria-selected="true"] { background: var(--tinta); color: #fff; box-shadow: inset 0 -3px 0 var(--rojo), 0 14px 22px -14px rgba(20, 20, 20, .6); }
.importes-panel[hidden] { display: none; }
.importes-panel + .importes-panel { margin-top: 22px; }
.importes-pestanas:not([hidden]) ~ .importes-panel + .importes-panel { margin-top: 0; }
.cuotas {
width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 6px; overflow: hidden; background: #FFFFFF; font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 1px rgba(20, 20, 20, .08), 0 1px 2px rgba(20, 20, 20, .06), 0 46px 76px -48px rgba(20, 20, 20, .6);
}
.cuotas caption {
caption-side: top; text-align: left; padding: 13px 20px 12px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #1B1C1F, #0B0C0E); border-bottom: 3px solid var(--rojo);
font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.cuotas thead th { padding: 12px 18px 10px; text-align: right; vertical-align: bottom; font-family: var(--dato); font-weight: 500; font-size: 9.5px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); border-bottom: 1px solid var(--linea); }
.cuotas thead tr:first-child th:first-child, .cuotas thead tr:first-child th:nth-child(2) { text-align: left; }
.cuotas thead tr:first-child th:nth-child(2) { text-align: right; }
.cuotas thead th:first-child { text-align: left; }
.cuotas .cuotas-grupo { text-align: center; color: var(--tinta); border-bottom: 2px solid var(--tinta); }
.cuotas .cuotas-grupo-rojo { color: var(--rojo-texto); border-bottom-color: var(--rojo); }
.cuotas tbody th, .cuotas tbody td { padding: 13px 18px; border-top: 1px solid var(--linea); transition: background-color .2s; }
.cuotas tbody tr:first-child th, .cuotas tbody tr:first-child td { border-top: 0; }
.cuotas tbody th { text-align: left; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.6vw, 23px); line-height: 1; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.cuotas tbody td { text-align: right; font-size: 17px; color: var(--tinta); white-space: nowrap; }
.cuotas tbody td span { color: var(--piedra); font-size: 15px; }
.cuotas tbody td small { display: block; margin-top: 3px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .04em; color: var(--piedra); }
.cuotas .cuotas-repartida { font-weight: 700; background: rgba(225, 0, 43, .04); }
.cuotas .cuotas-repartida small { font-weight: 400; }
.cuotas .cuotas-total { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 1.7vw, 24px); }
.cuotas tbody tr:hover th, .cuotas tbody tr:hover td { background: rgba(225, 0, 43, .06); }
.cuotas-nota { max-width: 72ch; margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--rojo); font-size: 15px; color: var(--piedra); }
.letra-pequena { margin-top: clamp(28px, 3.4vw, 48px); max-width: 62rem; display: grid; gap: 12px; padding-bottom: clamp(18px, 2vw, 24px); }
.letra-pequena .tablon-cab { gap: 16px; }
.letra-pequena p:not(.tablon-cab) { font-size: 15px; line-height: 1.6; color: var(--piedra); }
.letra-pequena b { color: var(--tinta); }
.letra-pequena .dato-pendiente { display: inline; font-size: 11px; line-height: 1.8; }
.letra-pequena-aviso { padding-left: 14px; border-left: 3px solid var(--rojo); font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px) !important; line-height: 1.1 !important; text-transform: uppercase; color: var(--tinta) !important; }
@media (min-width: 761px) { .financia-pieza .calculadora { align-self: start; } }
@media (max-width: 1100px) {
.financia-precio-rejilla { grid-template-columns: minmax(0, 1fr); }
.escalera { max-width: 40rem; }
.financia-entidad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.financia-pieza .calculadora { order: 2; width: 100%; }
.calc-plazos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.escalera { --alto: 150px; }
.escalera-valor { font-size: 17px; }
.escalera-barra { width: 18px; }
.escalera-tae { font-size: 8px; letter-spacing: 0; }
.cuotas, .cuotas tbody, .cuotas tr, .cuotas th, .cuotas td { display: block; }
.cuotas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cuotas caption { display: block; }
.cuotas tbody tr { padding: 4px 0 8px; border-top: 1px solid var(--linea-arena); }
.cuotas tbody tr:first-child { border-top: 0; }
.cuotas tbody th { padding: 14px 16px 8px; border: 0; }
.cuotas tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 16px; border: 0; text-align: right; white-space: normal; }
.cuotas tbody td::before { content: attr(data-th); flex: 1; text-align: left; font-family: var(--dato); font-weight: 400; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--piedra); }
.cuotas tbody td small { display: inline; margin: 0 0 0 6px; }
}
.mapa-marco { position: relative; margin: 0; }
.mapa-marco::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; z-index: 4; background: linear-gradient(90deg, transparent, var(--rojo-vivo), transparent); }
.mapa-plano {
display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: var(--papel);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .12), 0 60px 110px -60px rgba(7, 10, 14, .7), 0 18px 34px -20px rgba(7, 10, 14, .35);
}
.mapa-plano iframe { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; border: 0; background: var(--papel); }
.mapa-cargado .mapa-lienzo, .mapa-cargado .mapa-aviso { visibility: hidden; }
.mapa-lienzo { position: relative; flex: 1 0 auto; aspect-ratio: 2 / 1; min-height: 260px; background: #ECE7DE; }
@media (max-width: 760px) { .mapa-lienzo { aspect-ratio: 1 / 1; } }
.plano { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.plano-fondo { fill: #ECE7DE; }
.plano-edificio { fill: #DFD8CC; stroke: #D3CABC; stroke-width: 1; }
.plano-verde { fill: #D3DAC4; }
.plano-pista { fill: #DCE0CF; }
.plano-borde, .plano-calle, .plano-senda { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plano-borde { stroke: #CBC2B3; }
.plano-calle { stroke: #FBF9F5; }
.plano-peatonal { stroke: #F3EFE7; }
.plano-senda { stroke: #CDC3B4; stroke-dasharray: 6 5; stroke-linecap: butt; }
.plano-rotulo { font-family: var(--dato); font-size: 25px; letter-spacing: .06em; fill: #6E685F; paint-order: stroke; stroke: #FBF9F5; stroke-width: 6px; stroke-linejoin: round; }
.plano-rotulo-principal { fill: var(--tinta); font-weight: 500; }
.plano-halo { fill: rgba(225, 0, 43, .18); transform-box: fill-box; transform-origin: center; animation: plano-onda 2.8s var(--suave) infinite; }
.plano-punto { fill: var(--rojo); stroke: #FFF; stroke-width: 5px; }
.plano-cartel rect { fill: var(--tinta); }
.plano-cartel-nombre { font-family: var(--display); font-weight: 900; font-size: 34px; letter-spacing: .02em; fill: var(--hueso); }
.plano-cartel-calle { font-family: var(--dato); font-size: 15px; letter-spacing: .1em; fill: rgba(236, 232, 225, .72); }
@keyframes plano-onda { 0% { transform: scale(.7); opacity: 1; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plano-halo { animation: none; } }
.mapa-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.8vw, 22px); border-top: 1px solid var(--linea); }
.mapa-nota { flex: 1 1 16rem; margin: 0; font-family: var(--dato); font-size: 11px; line-height: 1.5; letter-spacing: .03em; color: var(--piedra); }
.mapa-osm { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 4px 9px; border-top-left-radius: 4px; background: rgba(247, 244, 239, .88); font-family: var(--dato); font-size: 9.5px; letter-spacing: .02em; color: var(--piedra); }
.mapa-osm a { color: inherit; text-underline-offset: 2px; }
.pieza-titulo-ante, .pieza-titulo-sub {
display: block; font-family: var(--dato); font-weight: 500; font-size: clamp(11px, .95vw, 13px); line-height: 1.45; letter-spacing: .16em;
text-transform: uppercase; color: var(--rojo-texto); -webkit-text-fill-color: var(--rojo-texto);
}
.pieza-titulo-ante { margin-bottom: .7em; }
.pieza-titulo-sub { margin-top: 1em; }
.pieza-titulo .signo { color: var(--rojo); -webkit-text-fill-color: var(--rojo); }
.pieza-urgencias, .tablero { transition: opacity .9s ease, translate .9s var(--suave), transform .6s var(--suave); transition-delay: var(--d, 0s), var(--d, 0s), 0s; }
.pieza-urgencias.inclinando, .tablero.inclinando { transition: opacity .9s ease, translate .9s var(--suave), transform .12s linear; transition-delay: 0s; }
.pieza-urgencias::before {
content: ""; position: absolute; z-index: -1; left: -22%; right: -22%; top: -16%; bottom: -8%; pointer-events: none;
background: radial-gradient(50% 50% at 50% 50%, rgba(225, 0, 43, .3), rgba(225, 0, 43, .09) 54%, transparent 72%);
}
.pieza-urgencias-caja::before, .tablero::before {
content: ""; position: absolute; z-index: 3; left: 8%; right: 8%; top: 0; height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, #FF6B7C 20%, #FFD9DE 50%, #FF6B7C 80%, transparent); box-shadow: 0 0 22px 3px rgba(255, 74, 94, .9);
}
.pieza-urgencias::after {
content: ""; display: block; height: clamp(14px, 1.6vw, 22px); margin: 0 -3%;
background: linear-gradient(180deg, #232427, #0A0A0B 70%); border-top: 2px solid var(--rojo); border-radius: 0 0 3px 3px;
box-shadow: 0 26px 34px -20px rgba(20, 20, 20, .75), 0 0 34px -4px rgba(225, 0, 43, .5);
}
@media (min-width: 761px) { .pieza-larga .tablero { align-self: start; margin-top: 64px; } }
.pieza-urgencias { position: relative; justify-self: center; width: min(100%, 460px); margin: 0; }
.pieza-urgencias-caja {
position: relative; display: grid; justify-items: center; gap: clamp(12px, 2.8vh, 24px); text-align: center; overflow: hidden;
padding: clamp(18px, 3.6vh, 32px) clamp(18px, 2.4vw, 32px) clamp(16px, 3vh, 26px); border-radius: 6px 6px 0 0; color: var(--hueso);
border: 1px solid rgba(255, 110, 124, .26); background-color: #0E0F11;
background-image: radial-gradient(80% 50% at 50% 34%, rgba(225, 0, 43, .2), transparent 70%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .6), 0 0 64px -10px rgba(225, 0, 43, .6), 0 60px 90px -50px rgba(20, 20, 20, .85);
}
.pieza-urgencias-caja::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .06; }
.pieza-urgencias-estado { margin: 0; font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hueso); }
.pieza-urgencias-estado .estado { gap: 9px; }
.pieza-urgencias-estado .estado.vivo + .horario-fijo { display: none; }
.pieza-urgencias-estado .estado.cerrado { color: var(--humo); }
.pieza-urgencias .cartel-luz { font-size: clamp(30px, min(3.4vw, 7.4vh), 50px); }
.pieza-urgencias .cartel::before { inset: -70px -110px; }
.pieza-urgencias.por-aparecer .cartel-luz { filter: brightness(.3) saturate(.55); }
.pieza-urgencias.por-aparecer .cartel::before { opacity: 0; }
.pieza-urgencias.aparecido .cartel-luz { animation: cartel-enciende 1.3s steps(1, end) .45s both; }
.pieza-urgencias.aparecido .cartel::before { animation: halo-enciende 1.3s steps(1, end) .45s both, halo-respira 5s ease-in-out 2.2s infinite; }
.pieza-urgencias-reloj { display: grid; justify-items: center; gap: 8px; margin: 0; }
.reloj { font-family: var(--display); font-weight: 900; font-size: clamp(52px, min(6vw, 12vh), 92px); line-height: .82; letter-spacing: .02em; color: #FFFFFF; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255, 74, 94, .45); }
.reloj .dos-puntos { display: inline-block; margin: 0 .02em; animation: dos-puntos 2s steps(1, end) infinite; }
@keyframes dos-puntos { 50% { opacity: .2; } }
.reloj-pie { font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #B3ADA3; }
.pieza-urgencias-precio {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding-top: clamp(10px, 2vh, 16px);
border-top: 1px solid rgba(236, 232, 225, .14); font-family: var(--dato); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hueso);
}
.pieza-urgencias.cerrada.aparecido .cartel-luz, .pieza-urgencias.cerrada .cartel-luz { animation: none; filter: brightness(.36) saturate(.5); }
.pieza-urgencias.cerrada.aparecido .cartel::before, .pieza-urgencias.cerrada .cartel::before { animation: none; opacity: .12; }
.pieza-urgencias.cerrada .reloj { color: #C9C4BB; text-shadow: none; }
.pieza-urgencias.cerrada .reloj .dos-puntos { animation: none; }
.pieza-urgencias.cerrada .reloj-pie { color: var(--rojo-vivo); }
@media (prefers-reduced-motion: reduce) { .reloj .dos-puntos { animation: none; } }
.tablero {
position: relative; justify-self: center; width: min(100%, 470px); margin: 0; display: grid;
padding: 0 clamp(14px, 1.8vw, 24px) clamp(8px, 1.6vh, 16px); border-radius: 6px; color: var(--hueso);
border: 1px solid rgba(255, 110, 124, .26); background-color: #0E0F11;
background-image: radial-gradient(90% 40% at 50% 0%, rgba(255, 74, 94, .16), transparent 70%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .6), 0 0 64px -10px rgba(225, 0, 43, .55), 0 60px 90px -50px rgba(20, 20, 20, .85);
}
.tablero-cab {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: clamp(11px, 2.2vh, 16px) 4px clamp(9px, 1.8vh, 13px);
border-bottom: 1px solid rgba(236, 232, 225, .16); font-family: var(--dato); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.tablero-cab span { display: inline-flex; align-items: center; gap: 10px; }
.tablero-cab span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .75); }
.tablero-cab em { font-style: normal; color: var(--humo); }
.tablero-filas { display: grid; margin: 2px 0 4px; }
.tablero-filas li { border-bottom: 1px solid rgba(236, 232, 225, .07); }
.tablero-filas li:last-child { border-bottom: 0; }
.tablero-filas a {
display: grid; grid-template-columns: 28px minmax(0, max-content) minmax(14px, 1fr) auto; align-items: baseline; column-gap: 10px;
padding: clamp(5px, 1.15vh, 9px) 6px; border-radius: 3px; text-decoration: none; color: var(--hueso); transition: background-color .3s, translate .35s var(--suave);
}
.tablero-num { font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1; color: var(--rojo-vivo); }
.tablero-num .ico { width: 14px; height: 14px; color: var(--rojo-vivo); fill: currentColor; stroke: none; vertical-align: -1px; }
.tablero-nombre { font-family: var(--display); font-weight: 800; font-size: clamp(17px, min(1.55vw, 3.6vh), 22px); line-height: 1; text-transform: uppercase; transition: color .25s; }
.tablero-puntos { align-self: center; height: 0; border-bottom: 2px dotted rgba(236, 232, 225, .26); translate: 0 4px; transition: border-color .25s; }
.tablero-precio { font-family: var(--display); font-weight: 900; font-size: clamp(19px, min(1.75vw, 4vh), 25px); line-height: 1; color: #FFFFFF; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablero-precio small { margin-right: 3px; font-family: var(--dato); font-weight: 400; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.tablero-pie { padding-top: clamp(8px, 1.6vh, 12px); border-top: 1px solid rgba(236, 232, 225, .16); text-align: center; font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--humo); }
@media (hover: hover) and (pointer: fine) {
.tablero-filas a:hover { background: rgba(225, 0, 43, .16); translate: 3px 0; }
.tablero-filas a:hover .tablero-nombre { color: var(--rojo-vivo); }
.tablero-filas a:hover .tablero-puntos { border-color: rgba(255, 74, 94, .7); }
}
.tablero-filas a:focus-visible { outline-offset: -2px; }
.tablero.aparecido .tablero-filas li { transition: opacity .5s ease calc(var(--i) * 70ms + .25s), translate .6s var(--suave) calc(var(--i) * 70ms + .25s); }
.tablero.por-aparecer:not(.aparecido) .tablero-filas li { opacity: 0; translate: -12px 0; }
.placa-final {
margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); align-items: center; gap: 10px clamp(24px, 4vw, 64px);
padding: 20px 24px 18px; background: rgba(236, 232, 225, .03); box-shadow: inset 0 0 0 1px rgba(236, 232, 225, .12); transition: box-shadow .4s;
}
.placa-final-cab { display: flex; align-items: center; gap: 10px; font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo); }
.placa-final-cab .ico { width: 20px; height: 20px; color: var(--rojo-vivo); }
.placa-final-texto p { font-size: 16px; line-height: 1.55; color: #B3ADA3; }
.placa-final-texto b { color: #FFFFFF; }
.placa-final-texto a { color: var(--hueso); text-decoration-color: var(--rojo-vivo); text-underline-offset: 3px; }
.placa-final-texto .placa-final-estado { margin-top: 8px; font-family: var(--dato); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); }
.placa-final-estado .estado.vivo + .horario-fijo { display: none; }
.placa-final-estado .estado.cerrado { color: var(--humo); }
.placa-grave {
grid-template-columns: auto minmax(0, 1.5fr) auto;
background: radial-gradient(60% 140% at 0% 50%, rgba(225, 0, 43, .13), transparent 70%), rgba(236, 232, 225, .03);
box-shadow: inset 0 0 0 1px rgba(255, 74, 94, .45), 0 0 40px -18px rgba(225, 0, 43, .55);
}
.placa-112 {
display: inline-block; padding: 10px 18px 8px; border: 2px solid var(--rojo-vivo); border-radius: 4px; text-decoration: none;
font-family: var(--display); font-weight: 900; font-size: clamp(42px, 4.2vw, 62px); line-height: .8; color: #FFFFFF;
box-shadow: 0 0 22px -4px rgba(255, 74, 94, .7), inset 0 0 14px -6px rgba(255, 74, 94, .6); transition: background-color .3s, transform .35s var(--suave);
}
.placa-112:hover { background: var(--rojo); transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
.placa-final:hover { box-shadow: inset 0 0 0 1px rgba(255, 74, 94, .35), 0 0 40px -18px rgba(225, 0, 43, .6); }
.placa-grave:hover { box-shadow: inset 0 0 0 1px rgba(255, 74, 94, .7), 0 0 50px -16px rgba(225, 0, 43, .7); }
}
.herramienta-accion { justify-self: start; margin-top: 2px; }
.herramienta-foto { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--rojo), 0 0 0 5px rgba(255, 74, 94, .16); }
.herramienta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
.herramienta-persona:hover .herramienta-foto img { filter: none; }
.herramienta-persona .herramienta-texto { font-family: var(--dato); font-size: 10px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; }
.apoyos { display: grid; gap: 12px; margin-top: auto; padding-top: 22px; }
.quien-trata-equipo .apoyos .apoyo-marco { margin-top: 0; padding-top: 0; }
.taquillas { columns: 2; column-gap: clamp(24px, 4vw, 64px); }
.taquilla-servicio { break-inside: avoid; margin-bottom: clamp(28px, 3.4vw, 48px); }
.taquilla-enlace {
display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 10px;
border-bottom: 2px solid var(--tinta); text-decoration: none; color: var(--tinta);
}
.taquilla-enlace .mini-vitrina { width: 56px; }
.taquilla-enlace .mini-vitrina b { font-size: 13px; left: 5px; top: 4px; }
.taquilla-nombre { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); line-height: .95; text-transform: uppercase; transition: color .25s; }
.taquilla-enlace > .ico { width: 22px; height: 22px; transition: transform .4s var(--suave); }
.taquilla-enlace:hover .taquilla-nombre { color: var(--rojo-texto); }
.taquilla-enlace:hover > .ico { transform: translateX(4px); }
.taquillas .tarifa-entradas { --talon: clamp(104px, 9vw, 128px); }
.taquillas .tarifa-entradas .tarifa-fila { min-height: 72px; }
.taquillas .tarifa-entradas .tarifa-fila dt b { font-size: clamp(18px, 1.5vw, 22px); }
.taquillas .tarifa-entradas .tarifa-precio { --precio-f: clamp(26px, 2.2vw, 34px); }
.taquillas .tarifa-entradas .tarifa-sello { top: -14px; }
.cartela-piezas { position: relative; margin: auto 0; padding: 12px 0 6px; }
.cartela-piezas ul { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px clamp(10px, 1.2vw, 16px); }
.cartela-piezas .mini-nombre { font-size: clamp(14px, 1.15vw, 17px); }
.cartela-datos { position: relative; display: grid; margin: 4px 0 18px; border-top: 1px solid var(--linea-arena); }
.cartela-datos div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linea-arena); }
.cartela-datos dt { display: flex; align-items: center; gap: 8px; font-family: var(--dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--piedra); }
.cartela-datos dt .ico { width: 15px; height: 15px; }
.cartela-datos dd { margin: 0; font-size: 16px; color: var(--tinta); }
.cartela-datos a { color: var(--tinta); text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.cartela-boton { position: relative; align-self: flex-start; margin-bottom: 6px; }
.cartela-nota a { color: var(--tinta); text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.mapa-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.formulario-tablon { padding-bottom: clamp(18px, 2vw, 26px); }
.formulario-tablon .formulario-intro { margin: 14px 0 4px; padding-left: 14px; border-left: 3px solid var(--rojo); font-size: 15px; line-height: 1.5; color: var(--piedra); }
.formulario-tablon .formulario { padding: 10px 0 0; background: none; box-shadow: none; border-top: 0; border-radius: 0; }
.formulario-lado { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1101px) { .formulario-lado { position: sticky; top: calc(var(--cab) + 24px); } }
@media (max-width: 1100px) {
.placa-final, .placa-grave { grid-template-columns: minmax(0, 1fr); }
.placa-112 { justify-self: start; }
.mapa-rejilla { grid-template-columns: minmax(0, 1fr); }
.taquillas { columns: 1; max-width: 46rem; }
.quien-trata-inversa > .quien-trata-equipo { order: -1; }
}
@media (max-width: 760px) {
.pieza-urgencias, .tablero, .equipo-hilo { order: 2; width: min(100%, 440px); justify-self: center; }
.cartela-piezas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartela-datos div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.taquilla-enlace { grid-template-columns: 48px minmax(0, 1fr) auto; }
.taquilla-enlace .mini-vitrina { width: 48px; }
.tablero-nombre { font-size: 17px; }
}
@media (min-width: 761px) and (max-width: 1180px) {
.equipo-pieza .pieza-dentro { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.equipo-pieza .pieza-texto { display: contents; }
.equipo-pieza .pieza-texto > * { order: 3; }
.equipo-pieza .pieza-texto > .miga, .equipo-pieza .pieza-texto > .antetitulo, .equipo-pieza .pieza-texto > .pieza-titulo { order: 1; }
.equipo-pieza .equipo-hilo { order: 2; width: min(100%, 640px); justify-self: center; }
}
@media (max-width: 359px) {
.tablero-filas a { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; }
.tablero-puntos { display: none; }
.tablero-nombre { white-space: normal; font-size: 16px; }
.tablero-cab { flex-wrap: wrap; letter-spacing: .1em; }
}
@media (max-width: 400px) {
.taquillas .tarifa-entradas .tarifa-fila:has(.tarifa-sello) dt { padding-top: 26px; }
}
.titulo-una-linea { max-width: none; white-space: nowrap; font-size: min(clamp(40px, 5.2vw, 90px), calc((100vw - 16px - 2 * var(--lateral)) / (var(--largo, 30) * .45))); }
.cabeza-una-linea { gap: 14px; margin-bottom: clamp(26px, 3.2vw, 44px); }
.cabeza-una-linea .cabeza-texto { max-width: 70ch; padding-left: 18px; border-left: 2px solid var(--rojo); }
@media (max-width: 760px) { .titulo-una-linea { white-space: normal; font-size: clamp(34px, 9.6vw, 46px); } }
.resena-tarjeta {
position: relative; margin: 0; display: grid; gap: 12px; max-width: 36rem; padding: 18px 22px 16px; border-radius: 0 0 6px 6px;
border-top: 3px solid var(--tinta); background: linear-gradient(180deg, #FFFFFF, #F6F2EC);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 20, 20, .06), 0 30px 50px -34px rgba(20, 20, 20, .55);
transition: opacity .9s ease, translate .9s var(--suave), transform .45s var(--suave), box-shadow .4s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.resena-tarjeta::before { content: ""; position: absolute; left: 22px; top: -3px; width: 56px; height: 3px; background: var(--rojo); }
.resena-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resena-tarjeta-cab .estrellas { font-size: 15px; letter-spacing: .08em; }
.resena-tarjeta-cab em { font-style: normal; font-family: var(--dato); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--piedra); }
.resena-tarjeta blockquote { position: relative; padding-left: 16px; border-left: 2px solid var(--rojo); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; font-style: italic; color: var(--tinta); }
.resena-tarjeta figcaption { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.resena-tarjeta figcaption b { display: block; margin-bottom: 3px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .01em; color: var(--tinta); }
.resena-inicial { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: 0; box-shadow: 0 0 0 2px #F6F2EC, 0 0 0 4px var(--rojo); }
@media (hover: hover) and (pointer: fine) {
.resena-tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 20, 20, .06), 0 40px 60px -34px rgba(20, 20, 20, .6), 0 0 36px -16px rgba(225, 0, 43, .45); }
}
@media (min-width: 1101px) {
.precio-alineado { grid-template-rows: auto 1fr; row-gap: 14px; align-items: stretch; }
.precio-alineado .taquilla { display: contents; }
.precio-alineado .taquilla-cab { grid-column: 1; grid-row: 1; }
.precio-alineado .tarifa-entradas { grid-column: 1; grid-row: 2; align-content: start; }
.precio-alineado .dudas { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; }
.precio-alineado .dudas .tablon-cab { padding-top: 12px; }
.precio-alineado .dudas .pregunta summary { padding: 12px 0; }
}
.taquillas { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(24px, 4vw, 64px); align-items: stretch; }
.taquillas .taquilla-servicio { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.taquillas .taquilla-servicio .tarifa-entradas { flex: 1; grid-auto-rows: 1fr; }
@media (max-width: 1100px) {
.taquillas { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.taquillas .taquilla-servicio .tarifa-entradas { grid-auto-rows: auto; }
}
.equipo-pieza.pieza-clara {
background:
radial-gradient(40% 56% at 74% 46%, rgba(255, 250, 242, .5), transparent 72%),
radial-gradient(42% 58% at 24% 46%, rgba(255, 250, 242, .55), transparent 70%),
radial-gradient(60% 72% at 26% 0%, rgba(255, 250, 242, .5), transparent 72%),
linear-gradient(180deg, #DFD8CD 0%, var(--arena) 58%, #D1C8BA 100%);
}
.equipo-hilo {
--tallo: clamp(16px, 3.2vh, 30px);
--ciclo: 5.2s; --arranque: 2.6s; --hilo: var(--rojo);
position: relative; isolation: isolate; justify-self: center; width: min(100%, 480px); margin: 0; display: grid; justify-items: center;
}
.equipo-hilo::before {
content: ""; position: absolute; z-index: -2; inset: -8% -12%; pointer-events: none;
background-image: radial-gradient(rgba(20, 20, 20, .17) 1px, transparent 1.5px); background-size: 16px 16px;
-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.equipo-persona { position: relative; display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center; text-decoration: none; color: var(--tinta); }
.equipo-retrato { position: relative; display: block; width: var(--cara, 100px); aspect-ratio: 1; transition: translate .45s var(--suave); }
.equipo-cara {
position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #FFFFFF;
box-shadow: 0 0 0 3px var(--tinta), 0 0 0 6px var(--arena), 0 0 0 8px var(--rojo), 0 24px 32px -18px rgba(20, 20, 20, .6);
transition: box-shadow .35s;
}
.equipo-cara img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; scale: 1.12; transform-origin: 50% 24%; transition: scale .6s var(--suave); }
.equipo-mayor { --cara: clamp(126px, min(13vw, 27vh), 176px); }
.equipo-fila .equipo-persona { --cara: clamp(70px, min(8.2vw, 17vh), 104px); }
.equipo-insignia {
--s: max(22px, calc(var(--cara) * .25));
position: absolute; z-index: 2; left: calc(85.36% - var(--s) / 2); top: calc(14.64% - var(--s) / 2); display: grid; place-items: center;
width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF3B56, var(--rojo) 60%, #A8001F);
color: #FFFFFF; box-shadow: 0 0 0 2.5px var(--arena), 0 8px 14px -6px rgba(150, 0, 26, .7);
}
.equipo-insignia .ico { width: 56%; height: 56%; stroke-width: 2; }
.equipo-chapa {
position: absolute; z-index: 2; left: 50%; bottom: 0; translate: -50% 50%; display: flex; align-items: center; gap: 6px;
padding: 4px 8px 3px; border-radius: 3px; white-space: nowrap; background: linear-gradient(180deg, #232427, #0B0C0E);
font-family: var(--dato); font-size: 8px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: #FFFFFF;
box-shadow: 0 0 0 2px var(--arena), 0 8px 14px -6px rgba(20, 20, 20, .55);
}
.equipo-chapa::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 6px 1px rgba(255, 74, 94, .8); }
.equipo-mayor .equipo-chapa { padding: 5px 10px 4px; font-size: 9px; }
.equipo-nombre { display: grid; gap: 3px; font-family: var(--dato); font-size: 8.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--piedra); }
.equipo-nombre b { font-family: var(--display); font-weight: 800; font-size: clamp(14px, 1.2vw, 17px); line-height: 1; letter-spacing: .01em; color: var(--tinta); transition: color .25s; }
.equipo-mayor .equipo-nombre { font-size: 9.5px; }
.equipo-mayor .equipo-nombre b { font-size: clamp(19px, 1.7vw, 24px); }
.equipo-orbita { position: absolute; z-index: -1; inset: -24px; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 76%); mask-image: linear-gradient(180deg, #000 50%, transparent 76%); }
.equipo-orbita::before, .equipo-orbita::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.equipo-orbita::before { border: 1.5px dashed rgba(225, 0, 43, .45); }
.equipo-orbita::after { inset: -4px; background: radial-gradient(circle at 50% 4.75px, var(--rojo-vivo) 0 3.5px, rgba(255, 74, 94, .4) 4.5px, transparent 8px); }
.equipo-orbita-lenta { inset: -44px; }
.equipo-orbita-lenta::before { border: 1px solid rgba(20, 20, 20, .16); }
.equipo-orbita-lenta::after { background: radial-gradient(circle at 50% 4.5px, var(--tinta) 0 2.6px, transparent 3.4px); }
.equipo-retrato::after {
content: ""; position: absolute; z-index: 1; inset: -10px; border-radius: 50%; pointer-events: none; opacity: 0;
box-shadow: 0 0 0 2px rgba(255, 74, 94, .95), 0 0 24px 5px rgba(255, 74, 94, .6);
}
.equipo-mayor::after {
content: ""; width: 10px; height: var(--tallo); margin-top: -2px;
background: radial-gradient(circle, #FFFFFF 0 1.4px, #FF4A5E 2.6px, rgba(255, 74, 94, .45) 3.6px, transparent 5px) 0 -10px / 10px 10px no-repeat, linear-gradient(90deg, transparent 4px, var(--hilo) 4px 6px, transparent 6px);
filter: drop-shadow(0 0 3px rgba(255, 74, 94, .55)); transform-origin: top; transition: filter .3s;
}
.equipo-fila { position: relative; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(8px, 1.2vw, 16px); padding-top: var(--tallo); }
.equipo-fila::before {
content: ""; position: absolute; top: -4px; left: calc(12.5% - 5px); right: calc(12.5% - 5px); height: 10px;
background: radial-gradient(circle, #FFFFFF 0 1.4px, #FF4A5E 2.6px, rgba(255, 74, 94, .45) 3.6px, transparent 5px) -10px 0 / 10px 10px no-repeat, radial-gradient(circle, #FFFFFF 0 1.4px, #FF4A5E 2.6px, rgba(255, 74, 94, .45) 3.6px, transparent 5px) calc(100% + 10px) 0 / 10px 10px no-repeat,
linear-gradient(180deg, transparent 4px, var(--hilo) 4px 6px, transparent 6px) 5px 0 / calc(100% - 10px) 100% no-repeat;
filter: drop-shadow(0 0 3px rgba(255, 74, 94, .5));
}
.equipo-fila::after { content: ""; position: absolute; top: -4px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 0 3px var(--arena), 0 0 12px 2px rgba(255, 74, 94, .6); }
.equipo-fila li { position: relative; display: grid; justify-items: center; }
.equipo-fila li::before {
content: ""; position: absolute; left: calc(50% - 5px); top: calc(-1 * var(--tallo)); width: 10px; height: calc(var(--tallo) - 2px);
background: radial-gradient(circle, #FFFFFF 0 1.4px, #FF4A5E 2.6px, rgba(255, 74, 94, .45) 3.6px, transparent 5px) 0 -10px / 10px 10px no-repeat, linear-gradient(90deg, transparent 4px, var(--hilo) 4px 6px, transparent 6px);
transform-origin: top; transition: filter .3s;
}
.equipo-fila li::after { content: ""; position: absolute; left: calc(50% - 3px); top: calc(-1 * var(--tallo) - 2px); width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 2px var(--arena); }
.equipo-fila::before, .equipo-fila::after, .equipo-fila li::before, .equipo-fila li::after { pointer-events: none; }
.equipo-hilo.aparecido .equipo-mayor .equipo-cara { transition: opacity .6s ease .1s, scale .8s var(--muelle) .1s, box-shadow .35s; }
.equipo-hilo.aparecido .equipo-mayor :is(.equipo-insignia, .equipo-chapa) { transition: opacity .4s ease .55s, scale .6s var(--muelle) .55s; }
.equipo-hilo.aparecido .equipo-orbita { transition: opacity 1.2s ease .4s; }
.equipo-hilo.aparecido .equipo-mayor .equipo-nombre { transition: opacity .6s ease .35s, translate .6s var(--suave) .35s; }
.equipo-hilo.aparecido .equipo-mayor::after { transition: transform .4s ease .6s, filter .3s; }
.equipo-hilo.aparecido .equipo-fila::before { transition: transform .6s var(--suave) .95s; }
.equipo-hilo.aparecido .equipo-fila::after { transition: opacity .3s ease .9s, scale .5s var(--muelle) .9s; }
.equipo-hilo.aparecido .equipo-fila li::before { transition: transform .35s ease calc(1.4s + var(--i) * .08s), filter .3s; }
.equipo-hilo.aparecido .equipo-fila li::after { transition: opacity .3s ease calc(1.4s + var(--i) * .08s), scale .4s var(--muelle) calc(1.4s + var(--i) * .08s); }
.equipo-hilo.aparecido .equipo-fila .equipo-persona { transition: opacity .5s ease calc(1.55s + var(--i) * .1s), translate .6s var(--suave) calc(1.55s + var(--i) * .1s); }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-mayor .equipo-cara { opacity: 0; scale: .86; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-mayor :is(.equipo-insignia, .equipo-chapa) { opacity: 0; scale: .5; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-orbita { opacity: 0; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-mayor .equipo-nombre { opacity: 0; translate: 0 8px; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-mayor::after { transform: scaleY(0); }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-fila::before { transform: scaleX(0); }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-fila::after { opacity: 0; scale: 0; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-fila li::before { transform: scaleY(0); }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-fila li::after { opacity: 0; scale: 0; }
.equipo-hilo.por-aparecer:not(.aparecido) .equipo-fila .equipo-persona { opacity: 0; translate: 0 10px; }
@keyframes equipo-orbita { to { rotate: 1turn; } }
@keyframes equipo-luz-baja { 0% { background-position: 0 -10px, 0 0; } 10%, 100% { background-position: 0 calc(100% + 10px), 0 0; } }
@keyframes equipo-luz-abre {
0%, 9.9% { background-position: -10px 0, calc(100% + 10px) 0, 5px 0; }
10% { background-position: 50% 0, 50% 0, 5px 0; }
30%, 100% { background-position: -10px 0, calc(100% + 10px) 0, 5px 0; }
}
@keyframes equipo-nudo { 0%, 9%, 100% { scale: 1; } 13% { scale: 1.5; } 20% { scale: 1; } }
@keyframes equipo-anillo { 0%, 100% { opacity: 0; scale: .96; } 5% { opacity: 1; scale: 1; } 22% { opacity: 0; scale: 1.08; } }
.equipo-hilo.aparecido .equipo-orbita::before, .equipo-hilo.aparecido .equipo-orbita::after { animation: equipo-orbita 38s linear infinite; }
.equipo-hilo.aparecido .equipo-orbita-lenta::before, .equipo-hilo.aparecido .equipo-orbita-lenta::after { animation-duration: 70s; animation-direction: reverse; }
.equipo-hilo.aparecido .equipo-mayor::after { animation: equipo-luz-baja var(--ciclo) linear var(--arranque) infinite; }
.equipo-hilo.aparecido .equipo-fila::before { animation: equipo-luz-abre var(--ciclo) linear var(--arranque) infinite; }
.equipo-hilo.aparecido .equipo-fila::after { animation: equipo-nudo var(--ciclo) var(--suave) var(--arranque) infinite; }
.equipo-hilo.aparecido .equipo-mayor .equipo-retrato::after { animation: equipo-anillo var(--ciclo) ease-out calc(var(--arranque) - var(--ciclo) * .04) infinite; }
.equipo-hilo.aparecido .equipo-fila li { --llega: .16; }
.equipo-hilo.aparecido .equipo-fila li:is(:first-child, :last-child) { --llega: .28; }
.equipo-hilo.aparecido .equipo-fila li::before { animation: equipo-luz-baja var(--ciclo) linear calc(var(--arranque) + var(--ciclo) * var(--llega)) infinite; }
.equipo-hilo.aparecido .equipo-fila .equipo-retrato::after { animation: equipo-anillo var(--ciclo) ease-out calc(var(--arranque) + var(--ciclo) * (var(--llega) + .1)) infinite; }
@media (prefers-reduced-motion: reduce) {
.equipo-hilo.aparecido :is(.equipo-orbita, .equipo-retrato, .equipo-fila li)::before, .equipo-hilo.aparecido :is(.equipo-orbita, .equipo-retrato)::after,
.equipo-hilo.aparecido .equipo-mayor::after, .equipo-hilo.aparecido .equipo-fila::before, .equipo-hilo.aparecido .equipo-fila::after { animation: none; }
}
@media (max-width: 760px) {
.equipo-fila .equipo-nombre > span:not(.sr-solo) { display: none; }
.equipo-fila .equipo-nombre b { font-size: 12.5px; }
.equipo-fila .equipo-chapa { padding: 3px 6px 2px; font-size: 8px; letter-spacing: .04em; }
.equipo-fila .equipo-chapa::before { display: none; }
}
@media (hover: hover) and (pointer: fine) {
.equipo-persona:hover .equipo-retrato { translate: 0 -4px; }
.equipo-persona:hover .equipo-cara { box-shadow: 0 0 0 3px var(--tinta), 0 0 0 6px var(--arena), 0 0 0 8px var(--rojo-vivo), 0 0 26px 4px rgba(255, 74, 94, .45), 0 30px 36px -18px rgba(20, 20, 20, .65); }
.equipo-persona:hover .equipo-cara img { scale: 1.2; }
.equipo-persona:hover .equipo-nombre b { color: var(--rojo-texto); }
.equipo-mayor:hover::after, .equipo-fila li:hover::before { --hilo: var(--rojo-vivo); filter: drop-shadow(0 0 4px rgba(255, 74, 94, .95)) drop-shadow(0 0 1px rgba(255, 74, 94, .9)); }
}
.herramienta-persona .herramienta-foto { width: 62px; height: 62px; box-shadow: 0 0 0 2px var(--rojo), 0 0 0 6px rgba(255, 74, 94, .16); }
.equipo-medico .quien-trata { align-items: start; }
.equipo-medico .ficha-uno { grid-template-columns: minmax(0, clamp(170px, 15vw, 230px)) minmax(0, 1fr); align-items: center; }
.equipo-medico .quien-trata-equipo .apoyo-marco { margin-top: 0; padding-top: 18px; }
.equipo-medico .cartela-piezas { margin: 0; padding: 8px 0 4px; }
.equipo-medico .cartela-texto { margin-bottom: 8px; }
.equipo-medico .cartela-nota { margin-top: 12px; }
.medico-cabeza {
--col: calc((100vw - 16px - 2 * var(--lateral) - clamp(24px, 4vw, 64px)) * 1.4 / 2.4);
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); justify-items: stretch; align-items: end; column-gap: clamp(24px, 4vw, 64px); row-gap: 14px;
}
.medico-cabeza .titulo-seccion { white-space: nowrap; font-size: min(clamp(40px, 5.2vw, 90px), calc(var(--col) / (25 * .42))); }
.medico-cabeza .cabeza-texto { max-width: 48ch; font-size: 16px; }
@media (max-width: 1100px) {
.medico-cabeza { grid-template-columns: minmax(0, 1fr); }
.medico-cabeza .titulo-seccion { white-space: normal; font-size: clamp(34px, 7.4vw, 64px); }
}
.puerta-grande { position: relative; margin: 0; display: grid; gap: 14px; align-self: center; }
.puerta-grande-foto {
position: relative; display: block; overflow: hidden; aspect-ratio: 2000 / 1407; border-radius: 6px; background: #0B0C0E;
box-shadow: 0 0 64px -12px rgba(225, 0, 43, .5), 0 40px 70px -40px rgba(20, 20, 20, .7);
}
.puerta-grande-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--suave); }
.puerta-grande-foto::before {
content: ""; position: absolute; z-index: 2; left: 0; top: 8%; bottom: 8%; width: 2px; pointer-events: none;
background: linear-gradient(180deg, transparent, #FF6B7C 20%, #FFD9DE 50%, #FF6B7C 80%, transparent); box-shadow: 0 0 22px 3px rgba(255, 74, 94, .9);
}
.puerta-grande-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.puerta-grande .puerta-sello { position: static; }
.puerta-grande-estado { font-family: var(--dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.puerta-grande-estado .estado { gap: 8px; }
.puerta-grande-estado .estado.vivo + .horario-fijo { display: none; }
.puerta-grande-estado .estado.cerrado { color: var(--piedra); }
.puerta-grande-persiana { flex-basis: 100%; padding-left: 12px; border-left: 2px solid var(--rojo); font-size: 14.5px; line-height: 1.45; color: var(--piedra); }
@media (hover: hover) and (pointer: fine) { .puerta-grande:hover img { scale: 1.03; } }
@media (min-width: 1024px) {
.contacto-pieza .pieza-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 3.9vw, 72px); }
.contacto-pieza .pieza-titulo {
--col: calc((100vw - 16px - 2 * var(--lateral) - clamp(28px, 3.9vw, 72px)) * .5);
font-size: clamp(48px, min(calc(var(--col) / 6.15), 15.5vh), 112px);
}
}
@media (min-width: 1181px) {
.contacto-pieza .pieza-dentro { grid-template-columns: minmax(0, .89fr) minmax(0, 1fr); }
.contacto-pieza .pieza-titulo { --col: calc((min(100vw - 16px - 2 * var(--lateral), 1480px) - clamp(28px, 3.9vw, 72px)) * .89 / 1.89); }
}
@media (min-width: 1024px) and (max-height: 720px) {
.contacto-pieza .puerta-grande { align-self: start; justify-self: end; width: min(100%, calc((100vh - 184px) * 2000 / 1407)); margin-top: 30px; }
}
@media (max-width: 1023px) {
.puerta-grande { width: 100%; align-self: start; }
}
@media (max-width: 760px) {
.puerta-grande { order: 2; width: auto; margin: 0 calc(-1 * var(--lateral)); }
.puerta-grande-foto { border-radius: 0; box-shadow: none; }
.puerta-grande-foto::before { display: none; }
.puerta-grande-pie { padding: 0 var(--lateral); }
}
.calculadora-3d {
--base-rx: 3deg; --base-ry: -6deg;
gap: clamp(6px, 1.3vh, 12px); padding: clamp(10px, 1.8vh, 16px) clamp(16px, 1.9vw, 22px) clamp(12px, 2vh, 18px); border-radius: 18px; border: 0;
background: linear-gradient(160deg, #2A2B2F 0%, #17181B 42%, #0B0C0E 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -3px 0 rgba(0, 0, 0, .55),
0 1px 0 #08080A, 0 2px 0 #08080A, 0 3px 0 #070709, 0 4px 0 #070709, 0 5px 0 #060608, 0 6px 0 #060608, 0 7px 0 #050506, 0 8px 0 #050506,
0 9px 0 #040405, 0 10px 0 #040405, 0 11px 0 #030304,
0 0 70px -12px rgba(225, 0, 43, .55), 0 44px 60px -22px rgba(20, 20, 20, .7);
transform: perspective(1100px) rotateX(calc(var(--base-rx) + var(--rx, 0deg))) rotateY(calc(var(--base-ry) + var(--ry, 0deg)));
transition: opacity .9s ease, translate .9s var(--suave), transform .7s var(--suave), box-shadow .5s ease; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.calculadora-3d.inclinando { transition: opacity .9s ease, translate .9s var(--suave), transform .12s linear, box-shadow .5s ease; transition-delay: 0s; }
.calculadora-3d::before { left: 12%; right: 12%; }
.calculadora-3d:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 110, 124, .18), inset 0 -3px 0 rgba(0, 0, 0, .55),
0 1px 0 #08080A, 0 2px 0 #08080A, 0 3px 0 #070709, 0 4px 0 #070709, 0 5px 0 #060608, 0 6px 0 #060608, 0 7px 0 #050506, 0 8px 0 #050506,
0 9px 0 #040405, 0 10px 0 #040405, 0 11px 0 #030304,
0 0 96px -10px rgba(225, 0, 43, .72), 0 52px 70px -24px rgba(20, 20, 20, .75);
}
.calc-marca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-marca-nombre { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #8E8A83; }
.calc-marca-nombre b { color: var(--rojo-vivo); }
.calc-solar { display: flex; gap: 2px; padding: 3px; border-radius: 3px; background: #050506; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08); }
.calc-solar i { width: 13px; height: 8px; background: linear-gradient(135deg, #3A2A1F 0%, #1A130F 55%, #2B1F17 100%); box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .06); }
.calc-pantalla {
position: relative; overflow: hidden; display: grid; gap: clamp(4px, .9vh, 9px); padding: clamp(7px, 1.3vh, 12px) 14px clamp(7px, 1.3vh, 12px); border-radius: 10px;
background: radial-gradient(120% 90% at 50% 0%, rgba(225, 0, 43, .16), transparent 62%), linear-gradient(180deg, #0D0E10, #050506);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .09);
}
.calc-pantalla::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .07) 44%, rgba(255, 255, 255, .02) 52%, transparent 60%);
translate: -70% 0; transition: translate 1.4s var(--suave);
}
.calculadora-3d:hover .calc-pantalla::after { translate: 70% 0; }
.calculadora-3d .calc-resultado { padding: 2px 0; border: 0; }
.calculadora-3d .calc-datos { gap: clamp(2px, .5vh, 6px); padding-top: clamp(4px, .9vh, 8px); border-top: 1px dashed rgba(236, 232, 225, .16); }
.calculadora-3d .calc-opciones { gap: 7px; }
.calculadora-3d .calc-opciones span { min-height: clamp(30px, 5.8vh, 40px); }
.calculadora-3d .calc-grupo legend { margin-bottom: clamp(3px, .7vh, 8px); }
.calculadora-3d .calc-nota { font-size: 13px; line-height: 1.35; }
.calculadora-3d .calc-opciones span {
border: 0; border-radius: 8px; background: linear-gradient(180deg, #2E2F33, #1A1B1E);
box-shadow: 0 3px 0 #050506, 0 5px 10px -2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .04);
transition: transform .15s ease, box-shadow .15s ease, background-color .2s, color .2s;
}
.calculadora-3d .calc-opciones label:hover span { transform: translateY(-1px); box-shadow: 0 4px 0 #050506, 0 7px 12px -2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 110, 124, .25); }
.calculadora-3d .calc-opciones input:checked + span {
background: linear-gradient(180deg, #FF3352 0%, #D4002A 60%, #A8001F 100%); color: #FFFFFF; transform: translateY(2px);
box-shadow: 0 1px 0 #5A0011, 0 0 20px -2px rgba(225, 0, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.calculadora-3d .calc-opciones label:active span { transform: translateY(3px); box-shadow: 0 0 0 #050506, inset 0 2px 5px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .calculadora-3d { --base-rx: 0deg; --base-ry: 0deg; } }
.financia-tarjetas { display: grid; gap: 14px; max-width: 34rem; }
.financia-tarjeta {
position: relative; overflow: hidden; padding: 0 18px 16px; border-radius: 6px; background: linear-gradient(180deg, #F7F3EC, #ECE5DA);
box-shadow: 0 0 0 1px rgba(20, 20, 20, .1), 0 1px 2px rgba(20, 20, 20, .06), 0 30px 50px -34px rgba(20, 20, 20, .55);
}
.financia-tarjeta-cab {
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -18px 12px; padding: 10px 18px 9px;
background: linear-gradient(180deg, #1B1C1F, #0B0C0E); border-bottom: 3px solid var(--rojo);
font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-vivo);
}
.financia-tarjeta-cab span { display: inline-flex; align-items: center; gap: 9px; }
.financia-tarjeta-cab span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .75); }
.financia-tarjeta-cab em { font-style: normal; color: var(--humo); }
.financia-cuenta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; }
.financia-cuenta > span { display: grid; gap: 5px; }
.financia-cuenta b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.6vw, 38px); line-height: .9; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.financia-cuenta small { font-family: var(--dato); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); }
.financia-cuenta i { padding-bottom: 19px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--rojo); }
.financia-cuenta-total b { color: var(--rojo-texto); }
.financia-tarjeta-texto { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--piedra); }
.escalera-oscura {
color: var(--hueso); background: radial-gradient(90% 55% at 50% 100%, rgba(225, 0, 43, .2), transparent 70%), linear-gradient(180deg, #1B1C1F, #0B0C0E);
box-shadow: 0 0 0 1px rgba(255, 110, 124, .26), 0 0 70px -14px rgba(225, 0, 43, .55), 0 46px 76px -48px rgba(20, 20, 20, .75);
}
.escalera-oscura::after {
content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, #FF6B7C 20%, #FFD9DE 50%, #FF6B7C 80%, transparent); box-shadow: 0 0 22px 3px rgba(255, 74, 94, .9);
}
.escalera-oscura .escalera-cab { background: transparent; border-bottom: 1px solid rgba(236, 232, 225, .14); }
.escalera-oscura .escalera-cab span { color: #A9A49B; }
.escalera-dibujo { position: relative; }
.escalera-oscura .escalera-barras { padding-top: 40px; }
.escalera-oscura .escalera-valor { margin-bottom: 10px; color: #FFFFFF; font-size: clamp(20px, 1.9vw, 28px); text-shadow: 0 0 14px rgba(255, 74, 94, .45); }
.escalera-oscura .escalera-barra {
width: clamp(26px, 3vw, 40px); border-radius: 6px 6px 2px 2px;
background: linear-gradient(180deg, #FF6A7D 0%, #FF2D47 18%, #E1002B 55%, #8E001D 100%);
box-shadow: 0 0 24px -4px rgba(255, 45, 71, .75), inset 3px 0 0 rgba(255, 255, 255, .18), inset -3px 0 0 rgba(0, 0, 0, .18);
}
.escalera-oscura .escalera-barras li:hover .escalera-barra, .escalera-oscura .escalera-barras li:focus-visible .escalera-barra { background: linear-gradient(180deg, #FFB3BD 0%, #FF4A5E 22%, #E1002B 60%, #A3001D 100%); }
.escalera-oscura .escalera-barras li::before, .escalera-oscura .escalera-barras li::after {
content: ""; position: absolute; z-index: 2; pointer-events: none; background: #FFD9DE; box-shadow: 0 0 8px rgba(255, 74, 94, .9);
}
.escalera-oscura .escalera-barras li::before { left: 0; right: 0; bottom: calc(var(--alto) * var(--v) / var(--max) - 1px); height: 2px; transform-origin: left; }
.escalera-oscura .escalera-barras li::after { right: -1px; width: 2px; bottom: calc(var(--alto) * var(--v) / var(--max) - 1px); height: calc(var(--alto) * (var(--vs) - var(--v)) / var(--max) + 2px); transform-origin: bottom; }
.escalera-oscura .escalera-barras li:last-child::after { display: none; }
.escalera-oscura.aparecido .escalera-barras li::before { transition: transform .32s linear calc(1.1s + var(--i) * .36s); }
.escalera-oscura.aparecido .escalera-barras li::after { transition: transform .14s linear calc(1.42s + var(--i) * .36s); }
.escalera-oscura.por-aparecer:not(.aparecido) .escalera-barras li::before { transform: scaleX(0); }
.escalera-oscura.por-aparecer:not(.aparecido) .escalera-barras li::after { transform: scaleY(0); }
.escalera-ejes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(236, 232, 225, .22); }
.escalera-ejes li { display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 10px; }
.escalera-oscura .escalera-plazo { padding: 0; border: 0; color: #FFFFFF; }
.escalera-oscura .escalera-plazo small { color: #A9A49B; }
.escalera-oscura .escalera-tae { color: #A9A49B; }
.escalera-oscura .escalera-tae small { color: var(--humo); }
.escalera-oscura .escalera-barras .escalera-ejemplo .escalera-barra { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 30px -2px rgba(255, 45, 71, .9), inset 3px 0 0 rgba(255, 255, 255, .18); }
.escalera-ejes .escalera-ejemplo .escalera-plazo { color: var(--rojo-vivo); }
.escalera-ejes .escalera-ejemplo::after { content: "Ejemplo"; margin-top: 4px; padding: 2px 6px 1px; border-radius: 2px; background: var(--rojo); font-family: var(--dato); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.escalera-oscura .escalera-globo { background: #FFFFFF; color: var(--tinta); }
.escalera-oscura .escalera-globo b { color: var(--rojo-texto); }
.escalera-oscura .escalera-cab { position: relative; padding-left: calc(clamp(18px, 2.2vw, 28px) + 16px); }
.escalera-oscura .escalera-cab::before {
content: ""; position: absolute; left: clamp(18px, 2.2vw, 28px); top: 17px; width: 7px; height: 7px; border-radius: 50%;
background: var(--rojo-vivo); box-shadow: 0 0 8px 1px rgba(255, 74, 94, .75);
}
.financia-tarjeta, .escalera-oscura {
transition: opacity .9s ease, translate .9s var(--suave), transform .5s var(--suave), box-shadow .45s ease;
transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.financia-tarjeta-cab, .escalera-oscura .escalera-cab { transition: border-color .35s ease, box-shadow .35s ease; }
.escalera-oscura::after { transition: box-shadow .45s ease; }
@media (hover: hover) and (pointer: fine) {
.financia-tarjeta:hover {
transform: translateY(-5px);
box-shadow: 0 0 0 1px rgba(225, 0, 43, .28), 0 2px 4px rgba(20, 20, 20, .08), 0 62px 90px -46px rgba(20, 20, 20, .72), 0 0 46px -18px rgba(225, 0, 43, .5);
}
.escalera-oscura:hover {
transform: translateY(-5px);
box-shadow: 0 0 0 1px rgba(255, 110, 124, .42), 0 0 90px -10px rgba(225, 0, 43, .72), 0 62px 90px -46px rgba(20, 20, 20, .8);
}
.escalera-oscura:hover::after { box-shadow: 0 0 30px 5px rgba(255, 74, 94, 1); }
.financia-tarjeta:hover .financia-tarjeta-cab { border-bottom-color: var(--rojo-vivo); box-shadow: 0 6px 18px -6px rgba(255, 74, 94, .7); }
.escalera-oscura:hover .escalera-cab { border-bottom-color: rgba(255, 74, 94, .6); box-shadow: 0 6px 18px -8px rgba(255, 74, 94, .55); }
.financia-tarjeta:hover .financia-tarjeta-cab span::before, .escalera-oscura:hover .escalera-cab::before { animation: punto-late .9s var(--suave); }
}
@media (max-width: 760px) {
.escalera-oscura .escalera-barra { width: 20px; }
.escalera-oscura .escalera-valor { font-size: 16px; }
.escalera-ejes .escalera-ejemplo::after { font-size: 6.5px; }
}
.financia-cuotas { padding-top: clamp(52px, 5.6vw, 88px); padding-bottom: clamp(52px, 5.6vw, 88px); }
.financia-cuotas .importes-pestanas { margin-bottom: 14px; }
.cuotas tbody th, .cuotas tbody td { padding: 10px 16px; }
.cuotas tbody tr:nth-child(even) th, .cuotas tbody tr:nth-child(even) td { background-color: #FAF7F2; }
.cuotas-plazo {
display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px 5px; border-radius: 4px; background: linear-gradient(180deg, #202124, #0B0C0E);
font-family: var(--dato); font-size: 9px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: #C9C4BB; box-shadow: inset 0 -2px 0 var(--rojo);
}
.cuotas-plazo b { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: .9; letter-spacing: 0; color: #FFFFFF; }
.cuotas td:nth-child(3), .cuotas td:nth-child(4), .cuotas thead tr:first-child th:nth-child(3), .cuotas thead tr:last-child th:nth-child(1), .cuotas thead tr:last-child th:nth-child(2) { background-image: linear-gradient(rgba(20, 20, 20, .035), rgba(20, 20, 20, .035)); }
.cuotas td:nth-child(3) { border-left: 1px solid var(--linea); }
.cuotas .cuotas-repartida, .cuotas thead .cuotas-grupo-rojo, .cuotas thead tr:last-child th:nth-child(3) { background-image: linear-gradient(rgba(225, 0, 43, .075), rgba(225, 0, 43, .075)); }
.cuotas .cuotas-repartida { border-left: 2px solid rgba(225, 0, 43, .4); border-right: 2px solid rgba(225, 0, 43, .4); font-size: 18px; }
.cuotas .cuotas-total { font-size: clamp(21px, 1.8vw, 26px); }
.cuotas tbody tr:hover th, .cuotas tbody tr:hover td { background-color: rgba(225, 0, 43, .07); }
@media (max-width: 760px) {
.cuotas .cuotas-repartida { border-left: 0; border-right: 0; }
.cuotas td:nth-child(3) { border-left: 0; }
}
.financia-saber .cabeza-una-linea { margin-bottom: clamp(18px, 2.2vw, 28px); }
@media (max-width: 760px) {
.mini-precio { font-size: 11px; letter-spacing: .06em; }
.cuotas tbody td small { font-size: 11px; }
.cuotas tbody td::before { font-size: 10px; }
.billete-sello { font-size: 10px; left: 12px; right: auto; }
.tablero-precio small { font-size: 10px; }
.metodo-mapa-fases li, .metodo-oscuro .metodo-mapa-fases li { font-size: 10px; letter-spacing: .02em; }
.cartela-pie, .tablero-pie, .ficha-uno-texto > p:first-child { font-size: 10px; }
.resena-tarjeta-cab em, .resena-tarjeta figcaption { font-size: 10px; }
.financia-cuenta small, .escalera-plazo small { font-size: 10px; }
}
@media (max-width: 374px) { .metodo-mapa-fases li, .metodo-oscuro .metodo-mapa-fases li { font-size: 9px; } }
@media (max-width: 359px) {
.metodo-mapa-fases li, .metodo-oscuro .metodo-mapa-fases li { font-size: 8.5px; letter-spacing: 0; }
.escalera-plazo small { font-size: 9px; }
.ficha-uno-texto > p:first-child { font-size: 9.5px; }
.ficha-uno-texto > p:first-child b { font-size: 21px; }
}