.bc-call-to-action.style_2 .rc-ctaa { padding: 8px 0 4px; } .bc-call-to-action.style_2 .rc-ctaa-heading { margin: 0 0 16px; font-size: clamp(24px, 5.5vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--rc-ink, #111827); } .bc-call-to-action.style_2 .rc-ctaa-card { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto; min-height: 420px; display: flex; flex-direction: column; border-radius: var(--rc-r-xl, 24px); background: #101012; text-align: center; isolation: isolate; /* EL TONO: casi negro NEUTRO, sin teñir. Se probó sacándolo de `--bc-featured-bg` —el color con el que la piel pinta la tira de destacados, #ffd478 en rentcarx— para que los dos bloques se fundieran. Mezclado hasta casi negro ese ámbar no da un negro cálido: da café. Un gris neutro se lleva bien con cualquier foto y con cualquier acento de vendedor, que es lo que tiene que hacer un velo. */ --rc-ctaa-ink: 16, 16, 18; } .bc-call-to-action.style_2 .rc-ctaa-bg, .bc-call-to-action.style_2 .rc-ctaa-veil, .bc-call-to-action.style_2 .rc-ctaa-blur { position: absolute; inset: 0; width: 100%; height: 100%; } .bc-call-to-action.style_2 .rc-ctaa-bg { object-fit: cover; z-index: 0; } /* UN SOLO DEGRADADO, de oscuro arriba a transparente abajo, sobre toda la tarjeta. Los puntos intermedios no son tramos: solo suavizan la caida para que no se vea la banda que deja un degradado de dos topes. El texto vive en la parte de arriba, que es la opaca; la foto se ve limpia en la mitad de abajo. */ .bc-call-to-action.style_2 .rc-ctaa-veil { z-index: 1; background: linear-gradient(to bottom, rgba(var(--rc-ctaa-ink), .95) 0%, rgba(var(--rc-ctaa-ink), .80) 25%, rgba(var(--rc-ctaa-ink), .50) 55%, rgba(var(--rc-ctaa-ink), .18) 80%, rgba(var(--rc-ctaa-ink), 0) 100%); } /* El desenfoque acompaña al degradado con la misma forma: entero arriba, nada abajo. Sin la mascara difuminaria la foto completa. */ .bc-call-to-action.style_2 .rc-ctaa-blur { z-index: 2; -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 60%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 60%, transparent 78%); pointer-events: none; } /* Sin `backdrop-filter` —o sin mascara, que es el caso de algun Android viejo— el degradado solo no alcanza sobre una foto clara. Ahi se sube. */ @supports not ((backdrop-filter: blur(1px)) and (mask-image: linear-gradient(#000, #000))) { .bc-call-to-action.style_2 .rc-ctaa-blur { display: none; } .bc-call-to-action.style_2 .rc-ctaa-veil { background: linear-gradient(to bottom, rgba(var(--rc-ctaa-ink), .97) 0%, rgba(var(--rc-ctaa-ink), .88) 28%, rgba(var(--rc-ctaa-ink), .55) 58%, rgba(var(--rc-ctaa-ink), .2) 82%, rgba(var(--rc-ctaa-ink), 0) 100%); } } .bc-call-to-action.style_2 .rc-ctaa-copy { position: relative; z-index: 3; padding: 30px 20px 28px; } .bc-call-to-action.style_2 .rc-ctaa-card.is-textonly { min-height: 0; } .bc-call-to-action.style_2 .rc-ctaa-title { margin: 0; font-size: clamp(22px, 5.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; /* La sombra es el seguro de ultima instancia: si la foto que sube el vendedor es un cielo blanco, el texto sigue teniendo borde. */ text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } /* El color va con !important y no es por vago: rentcli-skin pinta `.bc-skin .bc_wrap p { color: var(--sk-muted) !important }`, o sea TODO parrafo del sitio. En la maqueta local el subtitulo se veia blanco y en produccion salia gris #484848 sobre el velo oscuro. Entre dos declaraciones importantes gana la mas especifica, y esta —tres clases— le gana a la suya. */ .bc-call-to-action.style_2 .rc-ctaa-sub { margin: 10px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } /* chisfis-skin pinta todo `` del sitio con el acento del vendedor y con una cadena de siete clases; contra eso no hay especificidad que valga desde aqui, asi que el color y el fondo van con !important. Ver la nota 2 de rentcli-pdp-css-trampas. */ .bc-call-to-action.style_2 .rc-ctaa-btn { display: inline-block; margin-top: 18px; padding: 11px 24px; border-radius: var(--rc-r-pill, 9999px); background: rgb(var(--rc-primary, 0 113 227)) !important; color: #fff !important; font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: filter var(--rc-t-fast, .15s) var(--rc-ease, ease), transform var(--rc-t-fast, .15s) var(--rc-ease, ease); } .bc-call-to-action.style_2 .rc-ctaa-btn:hover, .bc-call-to-action.style_2 .rc-ctaa-btn:focus-visible { filter: brightness(1.1); transform: translateY(-1px); color: #fff !important; } @media (min-width: 768px) { .bc-call-to-action.style_2 .rc-ctaa { padding: 16px 0; } .bc-call-to-action.style_2 .rc-ctaa-heading { margin-bottom: 24px; } .bc-call-to-action.style_2 .rc-ctaa-card { min-height: 420px; } .bc-call-to-action.style_2 .rc-ctaa-copy { padding: 48px 40px 36px; } .bc-call-to-action.style_2 .rc-ctaa-title { font-size: clamp(28px, 3.2vw, 40px); } .bc-call-to-action.style_2 .rc-ctaa-sub { margin-top: 14px; font-size: 17px; } .bc-call-to-action.style_2 .rc-ctaa-btn { margin-top: 24px; padding: 13px 30px; font-size: 16px; } } /* En el telefono la tarjeta tiene que ser alta: el texto ocupa el tercio de arriba y lo que queda debajo es lo unico que se ve de la foto. Con una tarjeta baja el degradado se come la foto entera y vuelve a parecer un bloque de color. */ @media (max-width: 767px) { .bc-call-to-action.style_2 .rc-ctaa-card { min-height: min(104vw, 420px); } }