.pf-salon {
--pfs-pizarra: var(--t-texto);
--pfs-durazno: var(--t-acento);
--pfs-realce: var(--pfs-durazno);
--pfs-sobre-durazno: var(--t-sobre-acento);
--pfs-gris: var(--t-texto-suave);
--pfs-borde: var(--t-borde);
--pfs-ladrillo: var(--t-primario);
--pfs-sobre-oscuro: #fff;
--pfs-etiqueta: #ffea23;
--pfs-sobre-etiqueta: #232323;
--pfs-blanco: color-mix(in oklab, var(--t-fondo) 30%, #fff);
--pfs-pastel-a: color-mix(
in srgb,
color-mix(in srgb, var(--t-fondo) 91%, var(--t-acento)) 94%,
var(--t-primario)
);
--pfs-pastel-b: color-mix(in srgb, var(--t-fondo) 91%, var(--t-texto));
--pfs-pastel: linear-gradient(to bottom, var(--pfs-pastel-a), var(--pfs-pastel-b));
--pfs-pastel-persona: linear-gradient(
160deg,
color-mix(
in srgb,
color-mix(in srgb, var(--t-fondo) 85%, var(--t-acento)) 92%,
var(--t-primario)
),
color-mix(in srgb, var(--t-fondo) 88%, var(--t-texto))
);
--pfs-cortina: color-mix(
in srgb,
color-mix(in srgb, var(--t-fondo) 83%, var(--t-acento)) 89%,
var(--t-primario)
);
--pfs-degradado: linear-gradient(
to right,
var(--pfs-pizarra) 0%,
color-mix(in oklab, var(--pfs-pizarra) 90%, var(--pfs-ladrillo)) 30%,
color-mix(in oklab, var(--pfs-pizarra) 62%, var(--pfs-ladrillo)) 58%,
color-mix(in oklab, var(--pfs-pizarra) 30%, var(--pfs-ladrillo)) 80%,
var(--pfs-ladrillo) 100%
);
--pfs-rayas: repeating-linear-gradient(
to right,
transparent 0 144px,
rgba(0, 0, 0, 0.09) 144px 145px
);
--pf-foco: var(--pfs-durazno);
font-family: var(--t-fuente-texto);
font-size: 17px;
line-height: 30px;
letter-spacing: 0.3px;
color: var(--pfs-gris);
}
:where(.pf-salon) :where(h1, h2, h3, p, blockquote) {
margin: 0;
}
:where(.pf-salon) :where(ul, ol) {
list-style: none;
margin: 0;
padding: 0;
}
:where(.pf-salon) :where(a) {
color: inherit;
text-decoration: none;
}
.pfs-ojal {
display: inline-block;
font-size: 16px;
line-height: 30px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background-image: linear-gradient(
to right,
var(--pfs-pizarra),
color-mix(in oklab, var(--pfs-pizarra) 70%, var(--pfs-ladrillo)) 45%,
var(--pfs-ladrillo)
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pfs-subrayado {
border-bottom: 2px solid currentColor;
}
.pfs-seccion {
padding-block: 90px;
}
.pfs-boton {
border-radius: 4px;
font-family: var(--t-fuente-texto);
font-weight: 600;
letter-spacing: 0.5px;
font-size: 15px;
line-height: 22.5px;
padding: 14px 25px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.pfs-boton:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transform: translate3d(0, -2px, 0);
}
.pfs-boton--xl {
font-size: 17px;
line-height: 25.5px;
padding: 16px 30px;
}
.pfs-boton--durazno {
background: var(--pfs-durazno);
color: var(--pfs-sobre-durazno);
}
.pfs-boton--oscuro {
background: var(--pfs-pizarra);
color: var(--pfs-sobre-oscuro);
}
.pfs-logotipo {
font-family: var(--t-fuente-titulos);
font-size: 34px;
line-height: 42px;
letter-spacing: -0.5px;
white-space: nowrap;
}
.pfs-encabezado {
--pf-alto-encabezado: 72px;
position: relative;
z-index: 40;
width: 100%;
background: var(--t-fondo);
color: var(--pfs-pizarra);
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-encabezado__fila {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
min-height: 92px;
padding-inline: 60px;
}
.pfs-encabezado__marca {
display: inline-flex;
align-items: center;
justify-self: start;
min-width: 0;
}
.pfs-encabezado__logo {
max-height: 42px;
width: auto;
}
.pfs-encabezado__menu ul {
display: flex;
align-items: center;
}
.pfs-encabezado__menu a {
display: block;
padding: 10px 22px;
font-size: 18px;
line-height: 20px;
letter-spacing: 0.5px;
transition: opacity 0.3s;
}
.pfs-encabezado__menu a:hover {
opacity: 0.6;
}
.pfs-encabezado__acciones {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
.pfs-encabezado__telefono {
display: none;
align-items: center;
gap: 10px;
font-size: 17px;
white-space: nowrap;
}
.pfs-encabezado__boton {
display: inline-block;
padding: 9px 20px;
border: 1px solid color-mix(in oklab, var(--pfs-pizarra) 25%, transparent);
border-radius: 4px;
font-size: 13px;
line-height: 19.5px;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
transition:
background-color 0.3s,
color 0.3s;
}
.pfs-encabezado__boton:hover {
background: var(--pfs-pizarra);
color: var(--pfs-sobre-oscuro);
}
.pfs-encabezado__hamburguesa {
display: none;
}
.pfs-encabezado--portada {
position: absolute;
inset: 0 0 auto 0;
background: transparent;
color: var(--pfs-sobre-oscuro);
border-bottom-color: color-mix(in srgb, var(--pfs-sobre-oscuro) 10%, transparent);
}
.pfs-encabezado--portada .pfs-encabezado__boton {
border-color: color-mix(in srgb, var(--pfs-sobre-oscuro) 20%, transparent);
}
.pfs-encabezado--portada .pfs-encabezado__boton:hover {
background: var(--pfs-sobre-oscuro);
color: var(--pfs-pizarra);
}
.pfs-encabezado--portada .pfs-logotipo {
color: var(--pfs-sobre-oscuro);
}
@media (min-width: 1400px) {
.pfs-encabezado__telefono {
display: inline-flex;
}
}
.pfs-portada {
position: relative;
overflow: hidden;
min-height: max(100svh, 700px);
padding-top: 93px;
display: flex;
align-items: center;
background-color: var(--pfs-pizarra);
background-image: var(--pfs-rayas), var(--pfs-degradado);
}
.pfs-portada__circulo {
position: absolute;
left: -150px;
top: -120px;
width: 700px;
height: 860px;
border-radius: 50%;
background: color-mix(in srgb, var(--pfs-sobre-oscuro) 4.5%, transparent);
pointer-events: none;
}
.pfs-portada__palabra {
position: absolute;
left: 40%;
top: 50%;
transform: translateY(-50%);
font-family: var(--t-fuente-titulos);
font-size: 360px;
line-height: 0.8;
letter-spacing: -8px;
color: rgba(0, 0, 0, 0.16);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.pfs-portada__foto {
position: absolute;
top: 93px;
right: 7%;
bottom: 0;
aspect-ratio: 1100 / 1500;
max-width: 58%;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 26%, #000 80%, transparent 100%),
linear-gradient(to top, transparent 0%, #000 16%, #000 92%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0%, #000 26%, #000 80%, transparent 100%),
linear-gradient(to top, transparent 0%, #000 16%, #000 92%, transparent 100%);
mask-composite: intersect;
}
.pfs-portada__foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.pfs-portada__foto img[data-sin-foto],
.pfs-calidad__foto img[data-sin-foto] {
opacity: 0.55;
}
.pfs-portada__sello {
position: absolute;
right: 8%;
top: 50%;
width: 180px;
height: 180px;
margin-top: -10px;
color: var(--pfs-sobre-oscuro);
}
.pfs-portada__sello text {
font-family: var(--t-fuente-titulos);
font-size: 15px;
letter-spacing: 4px;
}
.pfs-portada__contenido {
position: relative;
z-index: 2;
}
.pfs-portada__texto {
max-width: 50%;
}
.pfs-portada__titulo {
font-family: var(--t-fuente-titulos);
font-weight: 400;
color: var(--pfs-sobre-oscuro);
margin-bottom: 25px;
}
.pfs-portada__renglon {
display: block;
}
.pfs-portada__titulo--grande {
font-size: 150px;
line-height: 120px;
letter-spacing: -3px;
}
.pfs-portada__titulo--medio {
font-size: 104px;
line-height: 92px;
letter-spacing: -2.5px;
}
.pfs-portada__titulo--chico {
font-size: 72px;
line-height: 70px;
letter-spacing: -1.5px;
}
.pfs-portada__bajada {
max-width: 350px;
margin-bottom: 35px !important;
font-size: 20px;
line-height: 30px;
color: color-mix(in oklab, var(--pfs-sobre-oscuro) 52%, var(--pfs-pizarra));
}
@media (prefers-reduced-motion: no-preference) {
.pfs-portada__circulo {
animation: pf-subir-lejos 600ms var(--pf-curva) 600ms backwards;
}
}
.pfs-tira {
position: relative;
border-bottom: 1px solid var(--pfs-borde);
background: var(--t-fondo);
}
.pfs-tira__fila {
position: relative;
display: flex;
align-items: center;
}
.pfs-tira__cartel {
position: absolute;
left: 15px;
width: calc(50% - 15px);
top: -40px;
text-align: right;
}
.pfs-tira__cartel span {
display: inline-block;
padding: 5px 25px;
background: var(--pfs-etiqueta);
color: var(--pfs-sobre-etiqueta);
font-size: 15px;
line-height: 30px;
font-weight: 600;
}
.pfs-tira__columna {
flex: 1 1 50%;
padding-block: 40px;
}
.pfs-tira__columna--izquierda {
padding-right: 8%;
border-right: 1px solid var(--pfs-borde);
}
.pfs-tira__columna:not(.pfs-tira__columna--izquierda) {
padding-left: 8%;
}
.pfs-tira__destacado {
display: flex;
align-items: center;
gap: 25px;
}
.pfs-tira__icono {
display: block;
flex: none;
width: 52px;
height: 65px;
color: var(--pfs-pizarra);
}
.pfs-tira__titulo,
.pfs-tira__enlace {
font-family: var(--t-fuente-titulos);
font-size: 28px;
line-height: 31.2px;
letter-spacing: -0.5px;
color: var(--pfs-pizarra);
}
.pfs-tira__detalle {
margin-top: 2px !important;
}
.pfs-tira__enlace {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
}
.pfs-flecha-larga {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
transition: transform 0.3s;
}
.pfs-tira__enlace:hover .pfs-flecha-larga {
transform: translateX(6px);
}
.pfs-nosotros__fila {
display: grid;
grid-template-columns: 50% 1fr;
align-items: center;
}
.pfs-nosotros__foto {
--pf-cortina: var(--pfs-cortina);
position: relative;
top: -2px;
overflow: hidden;
border-radius: 0 0 50px 0;
}
.pfs-nosotros__foto img {
display: block;
width: 100%;
aspect-ratio: 960 / 630;
object-fit: cover;
}
.pfs-nosotros__texto {
max-width: 400px;
margin-left: calc(8.333% + 2%);
padding-block: 40px;
}
.pfs-nosotros__texto .pfs-ojal {
margin-bottom: 10px;
}
.pfs-nosotros__titulo {
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 55px;
line-height: 55px;
letter-spacing: -1px;
color: var(--pfs-pizarra);
margin-bottom: 20px !important;
}
.pfs-nosotros__parrafo {
max-width: 300px;
margin-bottom: 14px !important;
}
.pfs-nosotros__parrafo:last-of-type {
margin-bottom: 30px !important;
}
.pfs-nosotros__botones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 36px;
}
.pfs-enlace-circulo {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 600;
color: var(--pfs-pizarra);
transition: opacity 0.3s;
}
.pfs-enlace-circulo:hover {
opacity: 0.7;
}
.pfs-enlace-circulo__icono {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1.5px solid currentColor;
border-radius: 50%;
padding-left: 2px;
}
.pfs-pasos {
border-bottom: 1px solid var(--pfs-borde);
padding-block: 38px;
}
.pfs-pasos__fila {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.pfs-paso {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 15px;
padding-inline: 15px;
border-right: 1px solid var(--pfs-borde);
transition: transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pfs-paso:last-child {
border-right: 0;
}
.pfs-paso:hover {
transform: translateY(-8px);
}
.pfs-paso__numero {
font-family: var(--t-fuente-titulos);
font-size: 26px;
line-height: 38px;
color: var(--pfs-pizarra);
}
.pfs-paso__raya {
flex: none;
width: 20px;
height: 2px;
margin-top: 18px;
background: var(--pfs-durazno);
}
.pfs-paso__titulo {
display: block;
font-family: var(--t-fuente-titulos);
font-size: 24px;
line-height: 32px;
color: var(--pfs-pizarra);
}
.pfs-paso__detalle {
display: block;
}
.pfs-titulo-partido {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 70px;
}
.pfs-titulo-partido .pfs-ojal {
padding-right: 25px;
border-right: 2px solid var(--pfs-pizarra);
line-height: 30px;
-webkit-text-fill-color: transparent;
}
.pfs-titulo-partido__titulo {
padding-left: 25px;
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 45px;
line-height: 50px;
letter-spacing: -1px;
color: var(--pfs-pizarra);
}
.pfs-tarjetas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 30px;
margin-bottom: 70px !important;
}
.pfs-tarjeta {
display: block;
}
.pfs-tarjeta__foto {
position: relative;
display: block;
overflow: hidden;
border-radius: 6px;
aspect-ratio: 755 / 510;
}
.pfs-tarjeta__foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms cubic-bezier(0.5, 1, 0.89, 1);
}
.pfs-tarjeta__velo {
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--pfs-degradado);
opacity: 0;
transition: opacity 500ms cubic-bezier(0.61, 1, 0.88, 1);
}
.pfs-tarjeta__circulo {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: 65px;
height: 65px;
margin: -32px 0 0 -32px;
border: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 40%, transparent);
border-radius: 50%;
color: var(--pfs-sobre-oscuro);
opacity: 0;
transform: translateY(15px);
transition: all 500ms cubic-bezier(0.5, 1, 0.89, 1);
}
.pfs-tarjeta__circulo svg {
width: 22px;
height: 22px;
}
.pfs-tarjeta:hover .pfs-tarjeta__foto img,
.pfs-tarjeta:focus-visible .pfs-tarjeta__foto img {
transform: scale(1.1);
}
.pfs-tarjeta:hover .pfs-tarjeta__velo,
.pfs-tarjeta:focus-visible .pfs-tarjeta__velo {
opacity: 0.8;
}
.pfs-tarjeta:hover .pfs-tarjeta__circulo,
.pfs-tarjeta:focus-visible .pfs-tarjeta__circulo {
opacity: 1;
transform: none;
}
.pfs-tarjeta__pie {
display: block;
padding: 25px;
text-align: center;
}
.pfs-tarjeta__nombre {
display: block;
font-family: var(--t-fuente-titulos);
font-size: 22px;
line-height: 30px;
color: var(--pfs-pizarra);
}
.pfs-tarjeta__detalle {
display: block;
line-height: 26px;
}
.pfs-carta {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 100px;
margin-bottom: 48px;
}
.pfs-carta__columna {
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-renglon {
position: relative;
display: grid;
grid-template-columns: 112px 1fr auto;
align-items: center;
border-top: 1px solid var(--pfs-borde);
background: var(--pfs-blanco);
transition: box-shadow 400ms cubic-bezier(0.61, 1, 0.88, 1);
}
.pfs-renglon:hover {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
.pfs-renglon__icono {
display: grid;
place-items: center;
align-self: stretch;
color: var(--pfs-pizarra);
}
.pfs-renglon__svg {
width: 55px;
height: 55px;
transition: transform 400ms cubic-bezier(0.61, 1, 0.88, 1);
}
.pfs-renglon:hover .pfs-renglon__svg {
transform: scale(1.1);
}
.pfs-renglon__texto {
min-width: 0;
padding: 30px 30px 30px 35px;
border-left: 1px solid var(--pfs-borde);
}
.pfs-renglon__nombre {
display: block;
font-family: var(--t-fuente-titulos);
font-size: 20px;
line-height: 30px;
color: var(--pfs-pizarra);
}
.pfs-renglon__nombre::after {
content: '';
position: absolute;
inset: 0;
}
.pfs-renglon__detalle {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 26px;
}
.pfs-renglon__precio {
padding-right: 30px;
font-family: var(--t-fuente-titulos);
font-size: 30px;
line-height: 43px;
letter-spacing: -0.5px;
color: var(--pfs-pizarra);
white-space: nowrap;
}
.pfs-servicios__llamado {
text-align: center;
font-family: var(--t-fuente-titulos);
font-size: 28px;
line-height: 31px;
letter-spacing: -0.5px;
color: var(--pfs-pizarra);
}
.pfs-servicios__llamado a {
transition: opacity 0.3s;
}
.pfs-servicios__llamado a:hover {
opacity: 0.7;
}
.pfs-banners {
padding-block: 0 90px;
background-image: var(--pfs-pastel);
}
.pfs-banners--con-banners {
background-image:
linear-gradient(to bottom, var(--t-fondo) 0 160px, transparent 160px), var(--pfs-pastel);
}
.pfs-banners:not(.pfs-banners--con-banners) {
padding-top: 90px;
}
.pfs-banners__fila {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 90px !important;
}
.pfs-banners__fila--uno {
grid-template-columns: 1fr;
max-width: 580px;
margin-inline: auto !important;
}
.pfs-banner {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
aspect-ratio: 1160 / 640;
padding: 50px;
border-radius: 6px;
color: var(--pfs-sobre-oscuro);
}
.pfs-banner__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s;
}
.pfs-banner:hover .pfs-banner__foto,
.pfs-banner:focus-visible .pfs-banner__foto {
transform: scale(1.08);
}
.pfs-banner__velo {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(32, 35, 41, 0.8) 0%, transparent 100%);
opacity: 0.9;
}
.pfs-banner__cartel {
position: relative;
padding: 5px 15px;
border-radius: 4px;
background: var(--pfs-blanco);
color: var(--pfs-pizarra);
font-size: 13px;
line-height: 24px;
font-weight: 700;
text-transform: uppercase;
}
.pfs-banner__pie {
position: relative;
display: flex;
align-items: center;
gap: 15px;
width: 100%;
margin-top: auto;
}
.pfs-banner__pie > span:first-child {
flex: 1;
}
.pfs-banner__titulo {
display: block;
font-family: var(--t-fuente-titulos);
font-size: 32px;
line-height: 38px;
color: var(--pfs-sobre-oscuro);
}
.pfs-banner__bajada {
display: block;
font-weight: 300;
line-height: 38px;
letter-spacing: 0.5px;
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 85%, transparent);
}
.pfs-banner__circulo {
display: grid;
flex: none;
place-items: center;
width: 60px;
height: 60px;
border: 2px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 30%, transparent);
border-radius: 50%;
transition: all 500ms cubic-bezier(0.61, 1, 0.88, 1.5);
}
.pfs-banner:hover .pfs-banner__circulo {
background: var(--pfs-sobre-oscuro);
color: var(--pfs-pizarra);
transform: scale(1.1);
}
.pfs-marcas {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.pfs-marcas li {
display: grid;
place-items: center;
min-height: 190px;
padding: 40px 20px;
border-right: 1px solid color-mix(in srgb, var(--pfs-pizarra) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--pfs-pizarra) 10%, transparent);
text-align: center;
transition: opacity 350ms;
}
.pfs-marcas li:nth-child(4n) {
border-right: 0;
}
.pfs-marcas li:nth-last-child(-n + 4):nth-child(4n + 1),
.pfs-marcas li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li {
border-bottom: 0;
}
.pfs-marcas li:hover {
opacity: 0.5;
}
.pfs-marcas span {
font-family: var(--t-fuente-titulos);
font-size: 30px;
line-height: 1.1;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--pfs-pizarra);
}
.pfs-catalogo {
overflow: hidden;
background: var(--t-fondo);
}
.pfs-catalogo__mas {
margin-bottom: 30px !important;
}
.pfs-catalogo__pista {
display: flex;
gap: 30px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 4px;
}
.pfs-catalogo__pista::-webkit-scrollbar {
display: none;
}
.pfs-catalogo__producto {
flex: 0 0 262px;
scroll-snap-align: start;
}
@media (max-width: 991px) {
.pfs-catalogo__producto {
flex-basis: calc((100% - 60px) / 3);
}
}
@media (max-width: 767px) {
.pfs-catalogo__pista {
gap: 15px;
}
.pfs-catalogo__producto {
flex-basis: calc((100% - 15px) / 1.6);
}
}
.pfs-calidad {
overflow: hidden;
background-color: var(--pfs-pizarra);
background-image: var(--pfs-rayas), var(--pfs-degradado);
color: var(--pfs-sobre-oscuro);
}
.pfs-calidad__fila {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8%;
align-items: end;
}
.pfs-calidad__foto {
align-self: end;
margin-left: -5%;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, #000 18%),
radial-gradient(closest-side, #000 72%, transparent);
mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}
.pfs-calidad__foto img {
display: block;
width: 100%;
max-height: 725px;
aspect-ratio: 775 / 725;
object-fit: cover;
object-position: center 15%;
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 22%,
#000 78%,
transparent 100%
);
mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.pfs-calidad__texto {
padding-block: 120px 150px;
}
.pfs-calidad__ojal {
margin-bottom: 20px !important;
font-size: 16px;
line-height: 30px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--pfs-realce);
}
.pfs-calidad__titulo {
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 55px;
line-height: 55px;
letter-spacing: -1px;
color: var(--pfs-sobre-oscuro);
margin-bottom: 20px !important;
}
.pfs-acordeon {
margin-bottom: 25px;
}
.pfs-acordeon__item {
border-bottom: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 20%, transparent);
}
.pfs-acordeon__item:last-child {
border-bottom: 0;
}
.pfs-acordeon__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-block: 18px;
cursor: pointer;
list-style: none;
font-size: 19px;
font-weight: 500;
color: var(--pfs-sobre-oscuro);
}
.pfs-acordeon__item summary::-webkit-details-marker {
display: none;
}
.pfs-acordeon__signo {
position: relative;
flex: none;
width: 13px;
height: 13px;
}
.pfs-acordeon__signo::before,
.pfs-acordeon__signo::after {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 13px;
height: 1.5px;
background: currentColor;
transition: transform 0.3s;
}
.pfs-acordeon__signo::after {
transform: rotate(90deg);
}
.pfs-acordeon__item[open] .pfs-acordeon__signo::after {
transform: rotate(0deg);
}
.pfs-acordeon__cuerpo {
padding-bottom: 22px;
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 72%, transparent);
}
.pfs-datos {
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-datos__fila {
display: grid;
grid-template-columns: 25% 1fr;
align-items: center;
}
.pfs-datos__titulo {
font-family: var(--t-fuente-titulos);
font-size: 32px;
line-height: 38px;
color: var(--pfs-pizarra);
}
.pfs-datos__deslizador {
position: relative;
padding: 45px 60px;
border-left: 1px solid var(--pfs-borde);
}
.pfs-datos__pista {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.pfs-datos__pista::-webkit-scrollbar {
display: none;
}
.pfs-datos__item {
flex: 0 0 100%;
scroll-snap-align: start;
padding-inline: 20px;
text-align: center;
font-size: 20px;
line-height: 30px;
}
.pfs-datos__item strong {
font-weight: 600;
color: var(--pfs-pizarra);
}
.pfs-datos__flechas button {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-top: -20px;
color: var(--pfs-pizarra);
cursor: pointer;
transition: transform 0.3s;
}
.pfs-datos__flechas button:first-child {
left: 30px;
}
.pfs-datos__flechas button:last-child {
right: 0;
}
.pfs-datos__flechas button:hover {
transform: scale(1.15);
}
.pfs-equipo__fila {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 35px 30px;
margin-bottom: 48px !important;
}
.pfs-persona {
flex: 0 1 calc((100% - 90px) / 4);
text-align: center;
}
.pfs-persona__foto {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
aspect-ratio: 550 / 670;
margin-bottom: 30px;
border-radius: 6px;
background: var(--pfs-pastel-persona);
}
.pfs-persona__inicial {
font-family: var(--t-fuente-titulos);
font-size: 120px;
line-height: 1;
letter-spacing: -4px;
color: color-mix(in oklab, var(--pfs-pizarra) 30%, transparent);
transition: transform 0.6s var(--pf-curva);
}
.pfs-persona:hover .pfs-persona__inicial {
transform: scale(1.06);
}
.pfs-persona__retrato {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
}
@media (prefers-reduced-motion: no-preference) {
.pfs-persona__retrato {
transition: transform 0.6s var(--pf-curva);
}
.pfs-persona:hover .pfs-persona__retrato {
transform: scale(1.04);
}
}
.pfs-persona__velo {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 40px 20px;
background: linear-gradient(to top, var(--pfs-pizarra) 7%, transparent 100%);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.12, 0, 0.39, 0);
}
.pfs-persona__velo a {
color: var(--pfs-sobre-oscuro);
font-weight: 600;
border-bottom: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 60%, transparent);
transform: translateY(25px);
transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.pfs-persona:hover .pfs-persona__velo,
.pfs-persona:focus-within .pfs-persona__velo {
opacity: 1;
}
.pfs-persona:hover .pfs-persona__velo a,
.pfs-persona:focus-within .pfs-persona__velo a {
transform: none;
}
.pfs-persona__nombre {
font-family: var(--t-fuente-titulos);
font-size: 20px;
line-height: 24px;
color: var(--pfs-pizarra);
}
.pfs-equipo__estrellas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--t-fuente-titulos);
font-size: 26px;
line-height: 36px;
color: var(--pfs-pizarra);
}
.pfs-equipo__pastilla {
display: inline-flex;
padding: 0 20px;
border-radius: 30px;
background: var(--pfs-durazno);
color: var(--pfs-sobre-durazno);
font-size: 16px;
line-height: 36px;
}
.pfs-opiniones {
overflow: hidden;
padding-bottom: 90px;
}
.pfs-opiniones__fila {
display: grid;
grid-template-columns: 25% 1fr;
gap: 30px;
}
.pfs-opiniones__cabeza .pfs-ojal {
margin-bottom: 5px;
}
.pfs-opiniones__titulo {
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 38px;
line-height: 43px;
letter-spacing: -1px;
color: var(--pfs-pizarra);
margin-bottom: 25px !important;
}
.pfs-opiniones__flechas {
display: flex;
gap: 10px;
}
.pfs-opiniones__flecha {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 1px solid var(--pfs-borde);
border-radius: 50%;
background: var(--pfs-blanco);
color: var(--pfs-pizarra);
cursor: pointer;
transition:
background-color 0.3s,
color 0.3s;
}
.pfs-opiniones__flecha:hover {
background: var(--pfs-pizarra);
color: var(--pfs-sobre-oscuro);
}
.pfs-opiniones__marco {
min-width: 0;
margin-right: calc((min(100vw, 1440px) - min(100vw, 1220px)) / -2 - 15px);
}
.pfs-opiniones__pista {
display: flex;
gap: 30px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 4px;
}
.pfs-opiniones__pista::-webkit-scrollbar {
display: none;
}
.pfs-opinion {
display: flex;
flex: 0 0 383px;
scroll-snap-align: start;
border: 1px solid var(--pfs-borde);
border-radius: 6px;
}
.pfs-opinion__autor {
writing-mode: vertical-rl;
transform: rotate(180deg);
padding: 15px 20px;
text-align: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--pfs-pizarra);
white-space: nowrap;
}
.pfs-opinion__cuerpo {
flex: 1;
padding: 40px;
border-left: 1px solid var(--pfs-borde);
}
.pfs-opinion__cuerpo blockquote {
margin: 0 0 10px;
}
.pfs-opinion__detalle {
font-size: 15px;
margin-bottom: 6px !important;
}
.pfs-opinion__estrellas {
font-size: 20px;
color: var(--pfs-ladrillo);
}
.pfs-contacto {
position: relative;
min-height: 550px;
display: flex;
align-items: center;
}
.pfs-mapa {
--pf-mapa-pin: var(--pfs-pizarra);
}
.pfs-contacto__fila {
position: relative;
display: flex;
justify-content: flex-end;
pointer-events: none;
}
.pfs-contacto__tarjeta {
width: 380px;
border-radius: 6px;
background: var(--pfs-blanco);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
pointer-events: auto;
}
.pfs-contacto__cuerpo {
padding: 50px 60px 40px;
}
.pfs-contacto__titulo {
margin-bottom: 10px !important;
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 38px;
line-height: 43px;
color: var(--pfs-pizarra);
}
.pfs-contacto__marca,
.pfs-contacto__rotulo {
font-weight: 600;
color: var(--pfs-pizarra);
}
.pfs-contacto__subrayado {
border-bottom: 1px solid currentColor;
font-weight: 500;
color: var(--pfs-pizarra);
}
.pfs-contacto__mapa {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-block: 15px;
border-top: 1px solid var(--pfs-borde);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
color: var(--pfs-pizarra);
}
.pfs-pie {
margin-top: auto;
background-color: var(--pfs-pizarra);
background-image: var(--pfs-degradado);
color: var(--pfs-sobre-oscuro);
}
.pfs-pie a {
transition: opacity 0.3s;
}
.pfs-pie a:hover {
opacity: 0.7;
}
.pfs-pie__llamado {
padding-block: 40px;
border-bottom: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 10%, transparent);
text-align: center;
font-family: var(--t-fuente-titulos);
font-size: 28px;
line-height: 36px;
letter-spacing: -0.5px;
}
.pfs-pie__columnas {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
padding-block: 55px;
}
.pfs-pie__logo {
max-height: 42px;
width: auto;
}
.pfs-pie__rotulo {
margin-bottom: 5px !important;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--pfs-realce);
}
.pfs-pie__suave {
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 78%, transparent);
font-size: 15px;
}
.pfs-pie__redes {
display: flex;
gap: 12px;
margin-bottom: 10px !important;
}
.pfs-pie__redes a {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 25%, transparent);
border-radius: 50%;
font-size: 18px;
}
.pfs-pie__base {
padding-block: 20px;
border-top: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 10%, transparent);
}
.pfs-pie__base-fila {
display: grid;
gap: 12px;
}
.pfs-pie__menu {
display: flex;
flex-wrap: wrap;
gap: 4px 36px;
font-size: 16px;
}
.pfs-pie__legales {
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 82%, transparent);
}
[data-estilo='rosa-viejo'] .pf-salon,
.pf-salon[data-estilo='rosa-viejo'] {
--pfs-realce: color-mix(in oklab, var(--pfs-durazno) 45%, var(--pfs-sobre-oscuro));
}
[data-estilo='dorado'] .pf-salon,
.pf-salon[data-estilo='dorado'] {
--pfs-realce: color-mix(in oklab, var(--pfs-durazno) 60%, var(--pfs-sobre-oscuro));
}
@media (max-width: 1399px) {
.pfs-encabezado__fila {
padding-inline: 30px;
}
.pfs-encabezado__menu a {
font-size: 17px;
padding-inline: 16px;
}
}
@media (max-width: 1199px) {
.pfs-portada__titulo--grande {
font-size: 120px;
line-height: 100px;
}
.pfs-portada__titulo--medio {
font-size: 88px;
line-height: 82px;
}
.pfs-portada__palabra {
font-size: 280px;
}
.pfs-carta {
column-gap: 60px;
}
.pfs-renglon__texto {
padding-inline: 20px;
}
.pfs-renglon__precio {
padding-right: 20px;
font-size: 30px;
}
.pfs-nosotros__titulo,
.pfs-calidad__titulo {
font-size: 48px;
line-height: 50px;
}
}
@media (max-width: 991px) {
.pfs-encabezado,
.pfs-encabezado--portada {
position: relative;
background: var(--t-fondo);
color: var(--pfs-pizarra);
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-encabezado--portada .pfs-logotipo {
color: var(--pfs-pizarra);
}
.pfs-encabezado--portada .pfs-encabezado__boton {
border-color: var(--pfs-pizarra);
}
.pfs-encabezado__fila {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 72px;
padding-inline: 15px;
}
.pfs-encabezado__marca {
max-width: 100%;
}
.pfs-encabezado .pfs-logotipo {
overflow: hidden;
text-overflow: ellipsis;
}
.pfs-encabezado__menu {
display: none;
}
.pfs-encabezado__hamburguesa {
display: block;
}
.pfs-portada {
min-height: 700px;
padding-top: 0;
}
.pfs-portada__foto {
top: 0;
max-width: 70%;
}
.pfs-portada__texto {
max-width: 75%;
}
.pfs-portada__sello,
.pfs-portada__circulo {
display: none;
}
.pfs-seccion {
padding-block: 75px;
}
.pfs-tira__fila {
flex-direction: column;
align-items: stretch;
}
.pfs-tira__columna--izquierda {
padding-right: 0;
border-right: 0;
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-tira__columna:not(.pfs-tira__columna--izquierda) {
padding-left: 0;
}
.pfs-tira__cartel {
left: auto;
right: 15px;
width: auto;
}
.pfs-nosotros__fila {
grid-template-columns: 1fr;
}
.pfs-nosotros__texto {
max-width: 640px;
margin: 0 auto;
padding: 40px 15px 50px;
text-align: center;
}
.pfs-nosotros__parrafo {
max-width: none;
}
.pfs-nosotros__botones {
justify-content: center;
}
.pfs-pasos__fila {
grid-template-columns: 1fr 1fr;
row-gap: 40px;
}
.pfs-paso:nth-child(2) {
border-right: 0;
}
.pfs-tarjetas {
grid-template-columns: 1fr 1fr;
}
.pfs-carta {
grid-template-columns: 1fr;
}
.pfs-carta__columna + .pfs-carta__columna .pfs-renglon:first-child {
border-top: 0;
}
.pfs-carta__columna:first-child {
border-bottom: 0;
}
.pfs-marcas {
grid-template-columns: repeat(2, 1fr);
}
.pfs-marcas li:nth-child(2n) {
border-right: 0;
}
.pfs-calidad__fila {
grid-template-columns: 1fr;
}
.pfs-calidad__foto {
order: 2;
max-width: 520px;
margin: 0 auto;
}
.pfs-calidad__texto {
padding-block: 75px 20px;
}
.pfs-datos__fila {
grid-template-columns: 1fr;
text-align: center;
}
.pfs-datos__titulo {
padding-top: 30px;
}
.pfs-datos__deslizador {
border-left: 0;
padding: 15px 50px 30px;
}
.pfs-datos__flechas button:first-child {
left: 0;
}
.pfs-persona {
flex-basis: calc((100% - 30px) / 2);
}
.pfs-opiniones__fila {
grid-template-columns: 1fr;
text-align: center;
}
.pfs-opiniones__flechas {
justify-content: center;
}
.pfs-opiniones__marco {
margin-right: 0;
}
.pfs-opinion {
flex-basis: calc(50% - 15px);
text-align: left;
}
.pfs-pie__columnas {
grid-template-columns: 1fr 1fr;
}
.pfs-banners--con-banners {
background-image:
linear-gradient(to bottom, var(--t-fondo) 0 120px, transparent 120px), var(--pfs-pastel);
}
}
@media (max-width: 767px) {
.pf-salon {
font-size: 16px;
line-height: 28px;
}
.pfs-logotipo {
font-size: 26px;
line-height: 34px;
}
.pfs-encabezado__boton {
padding: 7px 12px;
}
.pfs-encabezado .pfs-logotipo {
font-size: 22px;
}
.pfs-encabezado__acciones {
gap: 4px;
}
.pfs-portada {
min-height: 0;
padding-block: 70px 120px;
align-items: flex-start;
}
.pfs-portada__foto {
inset: 0 0 0 auto;
width: 82%;
max-width: none;
aspect-ratio: auto;
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.55) 35%,
#000 75%
);
mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 35%, #000 75%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.pfs-portada__foto img {
object-position: 60% 20%;
}
.pfs-portada__palabra {
left: 30%;
font-size: 200px;
}
.pfs-portada__texto {
max-width: 100%;
}
.pfs-portada__titulo--grande {
font-size: 90px;
line-height: 80px;
letter-spacing: -2px;
}
.pfs-portada__titulo--medio {
font-size: 62px;
line-height: 60px;
letter-spacing: -1.5px;
}
.pfs-portada__titulo--chico {
font-size: 46px;
line-height: 48px;
letter-spacing: -1px;
}
.pfs-portada__bajada {
max-width: 330px;
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 82%, transparent);
}
.pfs-tira__cartel {
top: -40px;
}
.pfs-tira__titulo,
.pfs-tira__enlace {
font-size: 22px;
line-height: 28px;
}
.pfs-tira__columna {
padding-block: 30px;
}
.pfs-tira__icono {
width: 46px;
height: 58px;
}
.pfs-nosotros__titulo,
.pfs-calidad__titulo {
font-size: 40px;
line-height: 44px;
}
.pfs-pasos__fila {
grid-template-columns: 1fr;
}
.pfs-paso {
border-right: 0;
justify-content: flex-start;
padding-inline: 20%;
}
.pfs-titulo-partido {
flex-direction: column;
margin-bottom: 45px;
text-align: center;
}
.pfs-titulo-partido .pfs-ojal {
padding-right: 0;
border-right: 0;
}
.pfs-titulo-partido__titulo {
padding-left: 0;
font-size: 36px;
line-height: 42px;
}
.pfs-seccion {
padding-block: 50px;
}
.pfs-tarjetas {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 50px !important;
}
.pfs-renglon {
grid-template-columns: 1fr;
justify-items: center;
padding-block: 20px;
text-align: center;
}
.pfs-renglon__texto {
padding: 10px 0;
border-left: 0;
}
.pfs-renglon__precio {
padding-right: 0;
}
.pfs-renglon__detalle {
-webkit-line-clamp: 2;
}
.pfs-servicios__llamado {
font-size: 22px;
line-height: 30px;
}
.pfs-banners {
padding-bottom: 50px;
}
.pfs-banners__fila {
grid-template-columns: 1fr;
margin-bottom: 50px !important;
}
.pfs-banner {
padding: 25px;
aspect-ratio: 1160 / 800;
}
.pfs-banner__titulo {
font-size: 26px;
line-height: 32px;
}
.pfs-banner__bajada {
line-height: 26px;
}
.pfs-banner__circulo {
width: 50px;
height: 50px;
}
.pfs-marcas li {
min-height: 120px;
padding: 30px 10px;
}
.pfs-marcas span {
font-size: 22px;
}
.pfs-calidad__texto {
padding-block: 50px 10px;
}
.pfs-datos__item {
font-size: 18px;
line-height: 28px;
}
.pfs-persona {
flex-basis: 100%;
}
.pfs-persona__foto {
aspect-ratio: 4 / 3;
}
.pfs-equipo__estrellas {
font-size: 20px;
line-height: 30px;
text-align: center;
}
.pfs-opiniones__titulo {
font-size: 32px;
line-height: 38px;
}
.pfs-opinion {
flex-basis: 100%;
}
.pfs-opinion__cuerpo {
padding: 25px;
}
.pfs-contacto {
flex-direction: column;
align-items: stretch;
min-height: 0;
}
.pf-mapa.pfs-mapa {
position: relative;
height: 350px;
}
.pfs-contacto__fila {
justify-content: center;
padding-block: 30px;
}
.pfs-contacto__tarjeta {
width: 100%;
}
.pfs-contacto__cuerpo {
padding: 30px;
text-align: center;
}
.pfs-pie__llamado {
font-size: 22px;
line-height: 32px;
}
.pfs-pie__columnas {
grid-template-columns: 1fr;
text-align: center;
padding-block: 40px;
}
.pfs-pie__redes {
justify-content: center;
}
.pfs-pie__menu {
justify-content: center;
gap: 4px 20px;
}
.pfs-pie__base-fila {
text-align: center;
}
.pfs-pie__legales nav {
justify-content: center;
}
}
.pf-salon {
--pfs-rosado: linear-gradient(
135deg,
var(--t-superficie) 0%,
color-mix(in oklab, var(--t-superficie) 80%, var(--tono-cartel-3, var(--t-primario))) 100%
);
}
.pfs-portada__monograma {
position: absolute;
right: 9%;
top: calc(50% + 46px);
display: grid;
place-items: center;
width: min(540px, 40vw);
aspect-ratio: 1;
translate: 0 -50%;
color: var(--pfs-sobre-oscuro);
pointer-events: none;
}
.pfs-portada__aro {
position: absolute;
inset: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--pfs-sobre-oscuro) 4.5%, transparent);
}
.pfs-portada__aro::after {
content: '';
position: absolute;
inset: 13%;
border: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 16%, transparent);
border-radius: 50%;
}
.pfs-portada__sello-grande {
position: relative;
width: 74%;
height: 74%;
}
.pfs-portada__sello-grande text {
font-family: var(--t-fuente-titulos);
font-size: 12px;
letter-spacing: 4px;
}
.pfs-portada__sello-grande .pf-sello__centro {
inset: 21%;
border: 1px solid color-mix(in srgb, var(--pfs-sobre-oscuro) 22%, transparent);
background: color-mix(in oklab, var(--pfs-pizarra) 70%, var(--pfs-ladrillo));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.pfs-portada__inicial {
font-family: var(--t-fuente-titulos);
font-size: clamp(110px, 11vw, 170px);
line-height: 1;
color: var(--pfs-sobre-oscuro);
transform: translateY(4%);
}
@media (prefers-reduced-motion: no-preference) {
.pfs-portada__monograma {
animation: pf-subir-lejos 600ms var(--pf-curva) 900ms backwards;
}
.pfs-portada__sello-grande .pf-sello__giro {
animation-duration: 40s;
}
}
.pfs-nosotros__composicion {
display: none;
}
.pfs-nosotros__foto:has(img[data-sin-foto]) img {
background-image: var(--pfs-rosado);
}
.pfs-nosotros__foto:has(img[data-sin-foto]) .pfs-nosotros__composicion {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
pointer-events: none;
}
.pfs-nosotros__palabra {
position: absolute;
left: -0.06em;
bottom: -0.2em;
font-family: var(--t-fuente-titulos);
font-size: clamp(160px, 21vw, 300px);
line-height: 1;
letter-spacing: -0.03em;
white-space: nowrap;
color: var(--pfs-sobre-oscuro);
opacity: 0.85;
}
.pfs-nosotros__icono {
position: absolute;
left: 50%;
top: 44%;
width: clamp(130px, 15vw, 210px);
height: auto;
aspect-ratio: 1;
transform: translate(-50%, -50%);
color: var(--pfs-pizarra);
stroke-width: 0.7;
}
.pfs-tarjeta__numero,
.pfs-tarjeta__icono {
display: none;
}
.pfs-tarjeta__foto:has(img[data-sin-foto]) img {
background-image:
radial-gradient(
90% 120% at 15% 0%,
color-mix(in srgb, var(--pfs-sobre-oscuro) 14%, transparent),
transparent 60%
),
var(--pfs-rayas);
}
.pfs-tarjetas > li:nth-child(even) .pfs-tarjeta__foto:has(img[data-sin-foto]) img {
background-image: var(--pfs-rosado);
}
.pfs-tarjeta__foto:has(img[data-sin-foto]) :is(.pfs-tarjeta__numero, .pfs-tarjeta__icono) {
position: absolute;
z-index: 1;
display: block;
color: var(--pfs-sobre-oscuro);
transition:
opacity 500ms cubic-bezier(0.5, 1, 0.89, 1),
transform 500ms cubic-bezier(0.5, 1, 0.89, 1),
color 500ms;
}
.pfs-tarjetas > li:nth-child(even) :is(.pfs-tarjeta__numero, .pfs-tarjeta__icono) {
color: var(--pfs-pizarra);
}
.pfs-tarjeta__numero {
left: 24px;
top: 16px;
font-family: var(--t-fuente-titulos);
font-size: 26px;
line-height: 38px;
}
.pfs-tarjeta__icono {
left: 50%;
top: 50%;
width: 96px;
height: 96px;
margin: -48px 0 0 -48px;
stroke-width: 1;
}
.pfs-tarjeta:is(:hover, :focus-visible) .pfs-tarjeta__icono {
opacity: 0;
transform: scale(0.85);
}
.pfs-tarjetas > li .pfs-tarjeta:is(:hover, :focus-visible) .pfs-tarjeta__numero {
color: var(--pfs-sobre-oscuro);
}
.pfs-banner__palabra {
display: none;
}
.pfs-banner:has(img[data-sin-foto]) .pfs-banner__foto {
background-color: var(--pfs-pizarra) !important;
background-image: var(--pfs-rayas), var(--pfs-degradado);
}
.pfs-banner:has(img[data-sin-foto]) .pfs-banner__palabra {
position: absolute;
right: -0.04em;
top: 50%;
display: block;
transform: translateY(-58%);
font-family: var(--t-fuente-titulos);
font-size: clamp(120px, 14vw, 200px);
line-height: 0.8;
letter-spacing: -0.04em;
white-space: nowrap;
color: rgba(0, 0, 0, 0.16);
pointer-events: none;
}
.pfs-banner:has(img[data-sin-foto]) .pfs-banner__velo {
opacity: 0.5;
}
.pfs-calidad__composicion {
display: none;
}
.pfs-calidad__foto:has(img[data-sin-foto]) {
position: relative;
align-self: center;
margin-left: 0;
-webkit-mask-image: none;
mask-image: none;
}
.pfs-calidad__foto:has(img[data-sin-foto]) img {
display: none;
}
.pfs-calidad__foto:has(img[data-sin-foto]) .pfs-calidad__composicion {
display: grid;
place-items: center;
width: min(480px, 100%);
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
color: color-mix(in srgb, var(--pfs-sobre-oscuro) 88%, transparent);
}
.pfs-calidad__reloj {
width: 62%;
height: auto;
}
@media (prefers-reduced-motion: no-preference) {
.pfs-calidad__minutero {
transform-origin: 100px 100px;
animation: pf-girar 120s linear infinite;
}
}
@media (max-width: 991px) {
.pfs-portada__monograma {
right: -60px;
top: auto;
bottom: -40px;
width: 340px;
translate: none;
opacity: 0.7;
}
.pfs-calidad__foto:has(img[data-sin-foto]) {
padding-block: 10px 60px;
}
}
@media (max-width: 767px) {
.pfs-tarjetas {
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
}
.pfs-tarjeta__foto {
aspect-ratio: 1;
}
.pfs-tarjeta__pie {
padding: 14px 4px 18px;
}
.pfs-tarjeta__nombre {
font-size: 18px;
line-height: 24px;
}
.pfs-tarjeta__detalle {
font-size: 14px;
line-height: 22px;
}
.pfs-tarjeta__icono {
width: 72px;
height: 72px;
margin: -36px 0 0 -36px;
}
.pfs-tarjeta__numero {
left: 14px;
top: 8px;
font-size: 20px;
}
.pfs-portada__monograma {
width: 280px;
right: -70px;
bottom: -30px;
opacity: 0.55;
}
.pfs-calidad__foto:has(img[data-sin-foto]) .pfs-calidad__composicion {
width: min(300px, 100%);
}
}