.pfs-reserva {
background-image: linear-gradient(to bottom, #fff, #f8ebe9 35%, #f2ebf0 70%, #eaecf1);
}
.pfs-reserva__ancla {
scroll-margin-top: 30px;
}
.pfs-reserva__tablero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border-radius: 6px;
background: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.pfs-reserva__tablero--sin-js {
grid-template-columns: 1fr;
}
.pfs-reserva__columna {
min-width: 0;
padding: 45px 50px;
}
.pfs-reserva__columna--agenda {
border-left: 1px solid var(--pfs-borde);
}
.pfs-reserva__grupo {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.pfs-reserva__grupo + .pfs-reserva__grupo {
margin-top: 30px;
}
.pfs-reserva__paso {
display: flex;
align-items: baseline;
gap: 14px;
margin: 0 0 22px;
padding: 0;
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 28px;
line-height: 34px;
letter-spacing: -0.5px;
color: var(--pfs-pizarra);
outline: none;
}
.pfs-reserva__paso > span {
font-family: var(--t-fuente-texto);
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
color: var(--pfs-ladrillo);
}
.pfs-reserva__paso--chico {
font-size: 20px;
line-height: 28px;
margin-bottom: 14px;
}
.pfs-reserva__horas,
.pfs-reserva__datos {
margin-top: 40px;
}
.pfs-reserva__datos {
padding: 45px 50px;
border-radius: 6px;
background: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.pfs-reserva__radio {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.pfs-reserva__lista {
border-top: 1px solid var(--pfs-borde);
}
.pfs-reserva__lista > li {
border-bottom: 1px solid var(--pfs-borde);
}
.pfs-reserva__servicio {
position: relative;
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 18px;
padding: 16px 14px 16px 6px;
cursor: pointer;
transition:
background-color 0.3s,
box-shadow 0.3s;
}
.pfs-reserva__servicio:hover {
background: color-mix(in oklab, var(--pfs-durazno) 8%, #fff);
}
.pfs-reserva__servicio:has(:checked) {
background: color-mix(in oklab, var(--pfs-durazno) 16%, #fff);
box-shadow: inset 3px 0 0 var(--pfs-ladrillo);
}
.pfs-reserva__servicio:has(:focus-visible) {
outline: 2px solid var(--pf-foco);
outline-offset: -2px;
}
.pfs-reserva__icono {
display: grid;
place-items: center;
color: var(--pfs-pizarra);
}
.pfs-reserva__svg {
width: 40px;
height: 40px;
}
.pfs-reserva__texto {
min-width: 0;
}
.pfs-reserva__nombre {
display: block;
font-family: var(--t-fuente-titulos);
font-size: 19px;
line-height: 26px;
color: var(--pfs-pizarra);
}
.pfs-reserva__detalle {
display: block;
font-size: 14px;
line-height: 22px;
}
.pfs-reserva__precio {
font-weight: 600;
color: var(--pfs-pizarra);
white-space: nowrap;
}
.pfs-reserva__fichas {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pfs-reserva__ficha {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 18px;
border: 1px solid var(--pfs-borde);
border-radius: 999px;
font-size: 15px;
color: var(--pfs-pizarra);
cursor: pointer;
}
.pfs-reserva__ficha:has(:checked) {
border-color: var(--pfs-pizarra);
background: var(--pfs-pizarra);
color: #fff;
}
.pfs-reserva__ficha:has(:focus-visible) {
outline: 2px solid var(--pf-foco);
outline-offset: 2px;
}
.pfs-reserva__cara {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
}
.pfs-reserva__mes {
max-width: 420px;
transition: opacity 0.3s;
}
.pfs-reserva__mes--cargando {
opacity: 0.55;
}
.pfs-reserva__mes-cabeza {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.pfs-reserva__mes-nombre {
font-family: var(--t-fuente-titulos);
font-size: 22px;
line-height: 30px;
color: var(--pfs-pizarra);
}
.pfs-reserva__flecha {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--pfs-borde);
border-radius: 50%;
background: #fff;
font-size: 22px;
line-height: 1;
color: var(--pfs-pizarra);
cursor: pointer;
}
.pfs-reserva__flecha:disabled {
opacity: 0.3;
cursor: default;
}
.pfs-reserva__grilla {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.pfs-reserva__grilla th {
padding-bottom: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
color: var(--pfs-gris);
}
.pfs-reserva__grilla td {
padding: 3px;
}
.pfs-reserva__dia {
display: grid;
place-items: center;
width: 100%;
max-width: 48px;
aspect-ratio: 1;
margin-inline: auto;
border: 1px solid var(--pfs-durazno);
border-radius: 50%;
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--pfs-pizarra);
cursor: pointer;
transition:
background-color 0.2s,
color 0.2s;
}
button.pfs-reserva__dia:not(:disabled):hover {
background: color-mix(in oklab, var(--pfs-durazno) 25%, #fff);
}
.pfs-reserva__dia[aria-pressed='true'],
button.pfs-reserva__dia[aria-pressed='true']:hover {
border-color: var(--pfs-pizarra);
background: var(--pfs-pizarra);
color: #fff;
}
.pfs-reserva__dia--apagado {
border-color: transparent;
background: transparent;
font-weight: 400;
color: color-mix(in oklab, var(--pfs-gris) 55%, transparent);
cursor: default;
}
.pfs-reserva__dia--hoy {
text-decoration: underline;
}
.pfs-reserva__mes-aviso,
.pfs-reserva__nota {
margin-top: 14px;
font-size: 15px;
line-height: 24px;
}
.pfs-reserva__nota button {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--pfs-pizarra);
cursor: pointer;
}
.pfs-reserva__momento + .pfs-reserva__momento {
margin-top: 18px;
}
.pfs-reserva__momento-titulo {
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pfs-gris);
}
.pfs-reserva__pildoras {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 8px;
}
.pfs-reserva__pildora {
position: relative;
display: grid;
place-items: center;
min-height: 44px;
border: 1px solid var(--pfs-borde);
border-radius: 999px;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--pfs-pizarra);
cursor: pointer;
}
.pfs-reserva__pildora small {
display: block;
font-size: 11px;
line-height: 14px;
font-weight: 400;
text-align: center;
}
.pfs-reserva__pildora:hover {
border-color: var(--pfs-durazno);
}
.pfs-reserva__pildora:has(:checked) {
border-color: var(--pfs-pizarra);
background: var(--pfs-pizarra);
color: #fff;
}
.pfs-reserva__pildora:has(:focus-visible) {
outline: 2px solid var(--pf-foco);
outline-offset: 2px;
}
.pfs-reserva__campos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 30px;
}
.pfs-reserva__campo {
display: block;
}
.pfs-reserva__rotulo {
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--pfs-pizarra);
}
.pfs-reserva__entrada {
width: 100%;
min-height: 48px;
padding: 8px 0;
border: 0;
border-bottom: 1px solid color-mix(in oklab, var(--pfs-pizarra) 35%, transparent);
border-radius: 0;
background: transparent;
font: inherit;
color: var(--pfs-pizarra);
}
.pfs-reserva__entrada:focus {
border-bottom-color: var(--pfs-pizarra);
}
.pfs-reserva__resumen {
margin-top: 30px;
padding: 16px 20px;
border-radius: 4px;
background: color-mix(in oklab, var(--pfs-durazno) 14%, #fff);
font-size: 16px;
line-height: 26px;
color: var(--pfs-pizarra);
}
.pfs-reserva__reservar {
margin-top: 20px;
border: 0;
cursor: pointer;
}
.pfs-reserva__reservar:disabled {
opacity: 0.6;
}
.pfs-reserva__legal {
margin-top: 16px;
font-size: 13px;
line-height: 20px;
}
@media (max-width: 991px) {
.pfs-reserva__tablero {
grid-template-columns: 1fr;
}
.pfs-reserva__columna--agenda {
border-left: 0;
border-top: 1px solid var(--pfs-borde);
}
.pfs-reserva__mes {
max-width: none;
}
}
@media (max-width: 767px) {
.pfs-reserva__columna,
.pfs-reserva__datos {
padding: 30px 20px;
}
.pfs-reserva__servicio {
grid-template-columns: 40px 1fr auto;
gap: 12px;
}
.pfs-reserva__svg {
width: 32px;
height: 32px;
}
.pfs-reserva__campos {
grid-template-columns: 1fr;
}
.pfs-reserva__paso {
font-size: 24px;
line-height: 30px;
}
}
.pfb-turno__reserva {
min-width: 0;
}
.pfb-reserva {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
min-width: 0;
scroll-margin-top: 20px;
}
.pfb-reserva__elegir {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 30px;
}
.pfb-reserva__elegir .pfb-campo--servicio:only-child {
grid-column: 1 / -1;
}
.pfb-reserva__senia,
.pfb-reserva__nota {
font-size: 15px;
line-height: 24px;
}
.pfb-reserva__reintentar {
border: 0;
background: none;
padding: 0;
font: inherit;
font-weight: 700;
text-decoration: underline;
color: var(--pfb-oscuro);
cursor: pointer;
}
.pfb-reserva__rotulo {
margin: 0 0 12px;
padding: 0;
font-size: 13px;
line-height: 20px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pfb-oscuro);
}
.pfb-reserva__dias-cabeza {
display: flex;
align-items: center;
justify-content: space-between;
}
.pfb-reserva__flechas {
display: flex;
gap: 8px;
}
.pfb-reserva__flechas button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--pfb-linea);
border-radius: 50%;
background: transparent;
font-size: 22px;
line-height: 1;
color: var(--pfb-oscuro);
cursor: pointer;
}
.pfb-reserva__flechas button:disabled {
opacity: 0.3;
cursor: default;
}
.pfb-reserva__tira {
display: grid;
grid-template-columns: repeat(14, minmax(0, 1fr));
gap: 6px;
}
.pfb-reserva__dia {
display: grid;
justify-items: center;
gap: 2px;
width: 100%;
padding: 10px 0 9px;
border: 1px solid var(--pfb-linea);
border-radius: 6px;
background: color-mix(in oklab, #fff 55%, transparent);
font: inherit;
color: var(--pfb-oscuro);
cursor: pointer;
transition:
background-color 0.2s,
border-color 0.2s,
transform 0.2s;
}
.pfb-reserva__dia:not(:disabled):hover {
border-color: var(--pfb-dorado);
transform: translateY(-2px);
}
.pfb-reserva__dia:disabled {
background: transparent;
color: color-mix(in oklab, var(--pfb-oscuro) 35%, transparent);
cursor: default;
}
.pfb-reserva__dia[aria-pressed='true'] {
border-color: var(--pfb-oscuro);
background: var(--pfb-oscuro);
color: #fff;
}
.pfb-reserva__dia-semana,
.pfb-reserva__dia-mes {
font-size: 11px;
line-height: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.pfb-reserva__dia-numero {
font-family: var(--t-fuente-titulos);
font-size: 26px;
line-height: 30px;
}
.pfb-reserva__dia[aria-pressed='true'] .pfb-reserva__dia-numero {
color: var(--pfb-dorado);
}
.pfb-reserva__grupo {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.pfb-reserva__botones {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 10px;
}
.pfb-reserva__hora {
position: relative;
display: grid;
place-items: center;
min-height: 64px;
border: 1px solid var(--pfb-linea);
border-radius: 6px;
background: #fff;
font-family: var(--t-fuente-titulos);
font-size: 22px;
line-height: 26px;
font-variant-numeric: tabular-nums;
color: var(--pfb-oscuro);
cursor: pointer;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.pfb-reserva__hora small {
display: block;
font-family: var(--t-fuente-texto);
font-size: 12px;
line-height: 14px;
text-align: center;
}
.pfb-reserva__hora:hover {
border-color: var(--pfb-dorado);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.pfb-reserva__hora:has(:checked) {
border-color: var(--pfb-oscuro);
background: var(--pfb-oscuro);
color: var(--pfb-dorado);
}
.pfb-reserva__hora:has(:focus-visible) {
outline: 2px solid var(--pf-foco);
outline-offset: 2px;
}
.pfb-reserva__radio {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.pfb-reserva__formulario {
display: grid;
gap: 20px;
}
.pfb-reserva__campos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 30px;
}
.pfb-reserva__campo .pfb-campo__rotulo {
z-index: 1;
}
.pfb-reserva__entrada {
width: 100%;
min-height: 56px;
padding: 12px 25px;
border: 1px solid color-mix(in oklab, var(--pfb-oscuro) 14%, transparent);
border-radius: 6px;
background: transparent;
font: inherit;
font-size: 16px;
color: var(--pfb-oscuro);
}
.pfb-reserva__resumen {
padding: 18px 22px;
border-radius: 6px;
background: var(--pfb-crema-medio);
font-size: 16px;
line-height: 26px;
color: var(--pfb-oscuro);
}
.pfb-reserva__legal {
font-size: 13px;
line-height: 20px;
}
@media (max-width: 1199px) {
.pfb-reserva__tira {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.pfb-reserva__elegir,
.pfb-reserva__campos {
grid-template-columns: 1fr;
}
.pfb-reserva__tira {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
scrollbar-width: thin;
}
.pfb-reserva__tira > li {
flex: 0 0 64px;
scroll-snap-align: start;
}
.pfb-reserva__botones {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.pfa-pestania {
position: fixed;
right: 0;
top: 50%;
z-index: 40;
padding: 22px 12px;
border-radius: 6px 0 0 6px;
background: var(--pfa-oscuro);
color: #fff;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: translateY(-50%) rotate(180deg);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
transition: padding 0.3s;
}
.pfa-pestania:hover {
padding-block: 28px;
}
.pfa-panel {
position: fixed;
inset: 0 0 0 auto;
width: min(940px, 100vw);
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--pfa-gris);
overflow: visible;
}
.pfa-panel::backdrop {
background: rgba(20, 20, 20, 0.45);
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.pfa-panel[open] .pfa-panel__caja {
animation: pfa-panel-entra 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pfa-panel[open]::backdrop {
animation: pfa-velo-entra 0.45s ease;
}
}
@keyframes pfa-panel-entra {
from {
transform: translateX(60px);
opacity: 0;
}
}
@keyframes pfa-velo-entra {
from {
opacity: 0;
}
}
.pfa-panel__caja {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
padding: 40px 50px 50px;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
}
.pfa-panel__cabeza {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.pfa-panel__titulo {
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 38px;
line-height: 42px;
letter-spacing: -1px;
color: var(--pfa-oscuro);
}
.pfa-panel__cerrar {
display: grid;
flex: none;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid var(--pfa-linea);
border-radius: 50%;
background: transparent;
color: var(--pfa-oscuro);
cursor: pointer;
transition: transform 0.3s;
}
.pfa-panel__cerrar:hover {
transform: rotate(90deg);
}
.pfa-panel__progreso {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin: 30px 0 34px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid var(--pfa-linea);
font-size: 13px;
line-height: 20px;
letter-spacing: 1px;
text-transform: uppercase;
}
.pfa-panel__progreso li {
display: flex;
gap: 8px;
opacity: 0.55;
}
.pfa-panel__progreso li > span {
color: var(--pfa-coral-texto);
font-weight: 600;
}
.pfa-panel__progreso li[aria-current='step'] {
opacity: 1;
font-weight: 600;
color: var(--pfa-oscuro);
}
.pfa-panel__cuerpo {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 40px;
align-items: start;
}
.pfa-panel__paso {
min-width: 0;
}
.pfa-panel__titulo-paso {
margin-bottom: 20px;
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 28px;
line-height: 32px;
color: var(--pfa-oscuro);
outline: none;
}
.pfa-panel__nota {
font-size: 16px;
line-height: 26px;
}
.pfa-panel__nota button,
.pfa-panel button.pfa-subrayado {
border: 0;
border-bottom: 1px solid currentColor;
background: none;
padding: 0;
font: inherit;
color: var(--pfa-oscuro);
cursor: pointer;
}
.pfa-panel__lista {
display: grid;
gap: 4px;
}
.pfa-panel__opcion {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 4px 12px;
width: 100%;
padding: 14px 16px;
border: 0;
border-radius: 4px;
background: transparent;
font: inherit;
text-align: left;
color: var(--pfa-gris);
cursor: pointer;
transition: background-color 0.3s;
}
.pfa-panel__opcion:hover {
background: color-mix(in oklab, var(--pfa-coral) 12%, transparent);
}
.pfa-panel__opcion-nombre {
font-family: var(--t-fuente-titulos);
font-size: 21px;
line-height: 28px;
color: var(--pfa-oscuro);
}
.pfa-panel__puntos {
border-bottom: 1px dotted color-mix(in oklab, var(--pfa-oscuro) 40%, transparent);
transform: translateY(-6px);
}
.pfa-panel__opcion-precio {
font-weight: 500;
color: var(--pfa-oscuro);
}
.pfa-panel__opcion-detalle {
grid-column: 1 / -1;
font-size: 15px;
line-height: 22px;
}
.pfa-panel__personas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.pfa-panel__persona {
display: grid;
justify-items: center;
gap: 10px;
width: 100%;
padding: 22px 12px;
border: 1px solid var(--pfa-linea);
border-radius: 6px;
background: color-mix(in oklab, #fff 50%, transparent);
font: inherit;
color: var(--pfa-oscuro);
cursor: pointer;
transition: border-color 0.3s;
}
.pfa-panel__persona:hover {
border-color: var(--pfa-coral);
}
.pfa-panel__inicial {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--pfa-coral);
object-fit: cover;
object-position: 50% 22%;
font-family: var(--t-fuente-titulos);
font-size: 26px;
color: #fff;
}
.pfa-panel__semana-cabeza {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
font-family: var(--t-fuente-titulos);
font-size: 21px;
color: var(--pfa-oscuro);
}
.pfa-panel__semana-cabeza button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--pfa-linea);
border-radius: 50%;
background: transparent;
font-size: 22px;
line-height: 1;
color: var(--pfa-oscuro);
cursor: pointer;
}
.pfa-panel__semana-cabeza button:disabled {
opacity: 0.3;
cursor: default;
}
.pfa-panel__dias {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
.pfa-panel__dia {
display: grid;
justify-items: center;
gap: 4px;
width: 100%;
padding: 14px 0;
border: 1px solid var(--pfa-linea);
border-radius: 40px;
background: color-mix(in oklab, #fff 50%, transparent);
font: inherit;
font-size: 13px;
line-height: 16px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--pfa-oscuro);
cursor: pointer;
}
.pfa-panel__dia strong {
font-family: var(--t-fuente-titulos);
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0;
}
.pfa-panel__dia:not(:disabled):hover {
border-color: var(--pfa-coral);
}
.pfa-panel__dia:disabled {
background: transparent;
color: color-mix(in oklab, var(--pfa-oscuro) 30%, transparent);
cursor: default;
}
.pfa-panel__dia[aria-pressed='true'] {
border-color: var(--pfa-coral);
background: var(--pfa-coral);
color: #fff;
}
.pfa-panel__horas {
display: grid;
gap: 18px;
}
.pfa-panel__momento {
margin-bottom: 8px;
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--pfa-coral-texto);
}
.pfa-panel__grilla-horas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 8px;
}
.pfa-panel__hora {
display: grid;
place-items: center;
width: 100%;
min-height: 48px;
border: 1px solid var(--pfa-linea);
background: color-mix(in oklab, #fff 50%, transparent);
font: inherit;
font-size: 17px;
font-variant-numeric: tabular-nums;
color: var(--pfa-oscuro);
cursor: pointer;
transition: border-color 0.3s;
}
.pfa-panel__hora small {
font-size: 11px;
line-height: 14px;
}
.pfa-panel__hora:hover {
border-color: var(--pfa-coral);
}
.pfa-panel__resumen {
position: sticky;
top: 0;
padding: 26px 26px 22px;
border: 1px solid var(--pfa-linea);
background: color-mix(in oklab, #fff 70%, transparent);
}
.pfa-panel__resumen-titulo {
margin-bottom: 12px !important;
font-family: var(--t-fuente-titulos);
font-size: 22px;
line-height: 28px;
color: var(--pfa-oscuro);
}
.pfa-panel__resumen dl {
margin: 0;
}
.pfa-panel__renglon {
padding: 10px 0;
border-top: 1px solid var(--pfa-linea);
}
.pfa-panel__renglon dt {
font-size: 12px;
line-height: 18px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pfa-coral-texto);
}
.pfa-panel__renglon dd {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 10px;
margin: 0;
font-size: 16px;
line-height: 24px;
color: var(--pfa-oscuro);
}
.pfa-panel__falta {
color: var(--pfa-gris);
}
.pfa-panel__cambiar {
border: 0;
border-bottom: 1px solid currentColor;
background: none;
padding: 0;
font: inherit;
font-size: 13px;
color: var(--pfa-gris);
cursor: pointer;
}
.pfa-panel__total {
display: flex;
justify-content: space-between;
margin-top: 6px !important;
padding-top: 12px;
border-top: 1px solid var(--pfa-oscuro);
font-weight: 600;
color: var(--pfa-oscuro);
}
.pfa-panel__formulario {
display: grid;
gap: 18px;
}
.pfa-panel__campos {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 18px 24px;
}
.pfa-panel__campo {
display: block;
}
.pfa-panel__rotulo {
display: block;
font-size: 12px;
line-height: 18px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pfa-oscuro);
}
.pfa-panel__entrada {
width: 100%;
min-height: 46px;
padding: 8px 0;
border: 0;
border-bottom: 1px solid color-mix(in oklab, var(--pfa-oscuro) 45%, transparent);
border-radius: 0;
background: transparent;
font: inherit;
color: var(--pfa-oscuro);
}
.pfa-panel__reservar {
justify-self: start;
margin-top: 8px;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.pfa-panel__reservar:disabled {
opacity: 0.6;
}
.pfa-panel__legal {
font-size: 13px;
line-height: 20px;
}
@media (max-width: 767px) {
.pfa-pestania {
display: none;
}
.pfa-panel__caja {
padding: 24px 20px 40px;
}
.pfa-panel__titulo {
font-size: 28px;
line-height: 32px;
}
.pfa-panel__progreso {
margin: 20px 0 22px !important;
gap: 6px 14px;
font-size: 11px;
}
.pfa-panel__cuerpo {
grid-template-columns: 1fr;
gap: 24px;
}
.pfa-panel__resumen {
position: static;
padding: 16px 18px 12px;
}
.pfa-panel__campos {
grid-template-columns: 1fr;
}
.pfa-panel__dias {
gap: 4px;
}
.pfa-panel__dia {
padding: 10px 0;
font-size: 11px;
}
.pfa-panel__dia strong {
font-size: 20px;
}
}