@import '/apps/repsol-guia/clientlibs/clientlib-site/css/variables.less';@import '/apps/repsol-guia/clientlibs/clientlib-site/css/mixins-icon.less';@import '/apps/repsol-guia/clientlibs/clientlib-site/css/mixins-assets.less';@import '/apps/repsol-guia/clientlibs/clientlib-site/css/mixins-hover.less';header.header-guia .submenu-guia-component{display:none !important}
.page-ficha{.hero__ficha{position:relative;background-color:@white;&.RESTAURANTE_SOLETE{&::before{position:absolute;content:"";width:100%;height:80px;background-color:@yellow-guia-low;@media(min-width:@bp-guia-l){height:104px}
}
}
.hero__ficha__vector{position:absolute;width:100%;background-size:cover;background-repeat:no-repeat}
&.RESTAURANTE_RECOMENDADO{.hero__ficha__vector{filter:invert(10%) sepia(34%) saturate(2670%) hue-rotate(204deg) brightness(92%) contrast(104%)}
}
&.LUGARES{.hero__ficha__vector{filter:invert(70%) sepia(86%) saturate(737%) hue-rotate(358deg) brightness(101%) contrast(103%)}
}
&.ESTACION_DE_SERVICIO .hero__ficha__vector{filter:invert(64%) sepia(68%) saturate(4640%) hue-rotate(1deg) brightness(104%) contrast(106%)}
&.CONTENIDO_ANTIGUO .hero__ficha__vector{filter:invert(21%) sepia(1%) saturate(858%) hue-rotate(324deg) brightness(99%) contrast(77%)}
&.withImages{.hero__ficha__vector{background-image:url("../../../../../../../content/dam/repsol-guia/guia-images/vectores/hero-ficha-images.svg");background-position:bottom;aspect-ratio:20/5}
}
&.withoutImages{.hero__ficha__vector{background-image:url("../../../../../../../content/dam/repsol-guia/guia-images/vectores/hero-ficha.svg");aspect-ratio:25/2}
.hero__ficha__container{padding-top:48px}
}
.hero__ficha__container{padding-top:16px;.hero__ficha__assets{position:relative;.hero__assets{.hero__ficha__image,.hero__ficha__video{display:flex;width:100%;aspect-ratio:4/3;img,.guia-video-content,.guia-video-content .videoPoster{width:100%;height:100%;border-radius:8px;object-fit:cover}
}
.hero__ficha__video{.guia-video-content{position:relative;.videCont{height:365px;display:none;iframe#guia-video{border-radius:8px}
}
.videoPoster{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;overflow:hidden;.rp-btn-guia{width:56px;height:56px;.icon{.mixin-size-icon(24px,@font-size-5)}
}
}
}
}
}
.hero__assets__gallery,.hero__assets__current{display:none}
.hero__assets__current{position:absolute;bottom:16px;right:16px;width:fit-content;min-width:46px;padding:4px 8px;color:@white;background-color:@grey-70;border-radius:4px;&.hero__assets__current--show{display:flex;justify-content:space-between}
}
}
.hero__ficha__content{position:relative;padding-top:24px;.hero__ficha__info{&:not(.hero__ficha__info--withoutTags){margin-bottom:24px}
&.hero__ficha__info--withoutTags{.hero__ficha__main.withoutImage{max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_0___)"}
}
.title{margin-bottom:12px;color:@blue-guia}
.localitate{color:@grey-65;letter-spacing:normal}
.localitate,.description,.rp-hr-closed{margin-bottom:0}
.rp-hr-closed{margin-top:12px;color:@red-60}
.rp-link{&:not(.rp-link-location){position:absolute;bottom:-56px;@media(min-width:@bp-guia-s){position:static;margin-top:24px}
}
.icon{.mixin-size-icon(@font-size-6,@font-size-2);margin-right:8px}
}
.hero__ficha__interaction{display:flex;gap:12px;.rp-btn-guia{&--save{display:none}
}
}
.hero__ficha__tag--antiguo{display:inline-flex;padding:4px 8px;margin-bottom:12px;font-size:@font-size-2;line-height:@font-size-5;color:@white;background-color:@grey-70;border-radius:4px}
}
.hero__ficha__badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;min-width:180px;max-width:180px;height:fit-content;padding:28px 24px;border-radius:8px;font-family:@fontSecondary;z-index:5;row-gap:24px;@media(max-width:(@bp-guia-s)){flex-direction:row;align-items:center;gap:12px;height:56px;padding:12px 16px;min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_1___)";max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_2___)";justify-content:space-between}
&.hero__ficha__badge--recomendado{background-color:@surface-yellow}
.badge__icon{.mixin-size-icon(72px,72px);margin-bottom:0;@media(max-width:(@bp-guia-s)){.mixin-size-icon(24px,@font-size-5)}
}
.badge__data{font-size:@font-size-3;font-weight:600;line-height:@font-size-1;letter-spacing:-0.5px;text-align:center;color:@white;@media(max-width:(@bp-guia-s)){display:flex;align-items:center;justify-content:space-between;font-size:@font-size-2;text-align:left;width:100%}
}
.badge__category{display:block;line-height:1.25;max-width:10ch;font-weight:400;color:@blue-guia;@media(max-width:(@bp-guia-s)){text-align:center}
}
.badge__date{display:block;margin-top:8px;color:@blue-guia;@media(max-width:(@bp-guia-s)){margin-top:auto;margin-left:auto}
}
}
.hero__ficha__icon{.mixin-size-icon(56px,32px);border-radius:8px;box-shadow:0 2px 8px -2px rgba(0,0,0,0.14),0 -1px 4px 0 rgba(0,0,0,0.02);color:@blue-guia;.icon{.mixin-size-icon(32px,@font-size-7)}
}
}
}
&.RESTAURANTE_RECOMENDADO{.hero__ficha__container .hero__ficha__assets{@media(min-width:@bp-guia-s){.hero__assets{.video__container,.hero__ficha__image{width:50%}
}
.hero__assets__gallery--show{display:flex;z-index:2}
}
}
.hero__ficha__content{.hero__ficha__info--withoutTags{@media(min-width:@bp-guia-s){justify-content:space-between;flex-direction:row;width:100%;gap:32px}
}
.hero__ficha__interaction{position:absolute;justify-content:flex-end;&:not(.hero__ficha__interaction--localidad){bottom:0;right:0;@media(min-width:@bp-guia-s){justify-content:flex-start;margin-top:32px}
@media(min-width:@bp-guia-m){margin-top:0}
}
&.hero__ficha__interaction--localidad{top:-32px;right:12px;&.withoutImage{top:16px;right:0}
}
}
}
}
&.RESTAURANTE_SOLETE{.hero__ficha__container{@media(min-width:@bp-guia-m){display:flex;justify-content:space-between;gap:48px}
@media(min-width:@bp-guia-l){padding-top:56px}
.hero__ficha__assets{padding-inline:0;@media(min-width:@bp-guia-s){order:2}
@media(min-width:@bp-guia-m){height:fit-content;padding-left:8px}
.hero__assets{display:flex;scroll-snap-type:x mandatory;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;height:auto;margin-right:-20px;@media(min-width:@bp-guia-s){margin-right:-176px}
@media(min-width:@bp-guia-m){margin-right:0}
&::-webkit-scrollbar{display:none}
.hero__ficha__image,.video__container{&:not(:only-child){min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_3___)";&:not(:first-of-type){padding-left:16px}
&:last-of-type{margin-right:20px}
@media(min-width:@bp-guia-s){min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_4___)"}
}
@media(min-width:@bp-guia-s){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_5___)"}
@media(min-width:@bp-guia-m){min-width:100%}
}
.hero__ficha__image{&:not(:only-child){&:not(:first-of-type){@media(min-width:@bp-guia-s){padding-left:0}
}
&:last-of-type{@media(min-width:@bp-guia-s){margin-right:168px}
@media(min-width:@bp-guia-m){margin-right:auto}
}
@media(min-width:@bp-guia-s){min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_6___)"}
}
}
.video__container{&:only-child{min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_7___)";@media(min-width:@bp-guia-s){min-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_8___)"}
@media(min-width:@bp-guia-m){min-width:100%}
}
}
}
@media(min-width:@bp-guia-m){.hero__assets__gallery--show{display:flex;z-index:2}
}
}
.hero__ficha__content{.hero__ficha__info{@media(min-width:@bp-guia-s){flex-direction:column;width:100%}
.hero__ficha__micro{position:relative;top:-8px;.mixin-size-icon(80px,80px);background-color:@white;box-shadow:0 1.54px 6.15px -1.54px rgba(0,0,0,0.14),0 -0.77px 3.08px -3.08px rgba(0,0,0,0.02);border-radius:50%;@media(min-width:@bp-guia-m){.mixin-size-icon(96px,96px)}
.icon-rp{.mixin-size-icon(@font-size-11,@font-size-11);.mixin-placeholder;&.SOLETE-2{content:url("../../../../../../../content/dam/repsol-guia/guia-images/microilustraciones/establecimientos/Bares.svg")}
}
}
.hero__ficha__campaing{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:16px;.icon-rp{.mixin-size-icon(@font-size-3,@font-size-2)}
}
.calification{display:flex;align-items:center;gap:8px;margin-block:12px 0;.icon{.mixin-size-icon(@font-size-4,@font-size-3)}
}
.hero__ficha__favorite-quote{position:relative;width:100%;margin-top:32px;padding:24px;overflow:hidden;border-radius:8px;background-color:@yellow-guia-low;@media(max-width:(@bp-guia-s)){padding:20px;z-index:6}
@media(min-width:@bp-guia-m){padding:32px}
&::after{position:absolute;top:0;right:0;content:"";width:102px;height:71px;background-image:url("../../../../../../../content/dam/repsol-guia/guia-images/vectores/solete_description.png");background-repeat:no-repeat;border-top-right-radius:8px}
.hero__ficha__favorite-quote-content{position:relative;display:flex;flex-direction:column;gap:16px;padding-right:48px;z-index:1;@media(max-width:(@bp-guia-s)){flex-direction:row;gap:12px;padding-right:24px}
@media(min-width:@bp-guia-l){flex-direction:row;gap:24px}
}
.icon-rp-Quotation{.mixin-size-icon(28px,22px);flex:0 0 auto;@media(min-width:@bp-guia-l){.mixin-size-icon(36px,30px)}
}
.hero__ficha__favorite-quote-text{color:@grey-70;font-family:@fontSecondaryMedium;font-size:@font-size-3;font-weight:500;line-height:@font-size-6;@media(max-width:(@bp-guia-s)){font-size:@font-size-2;line-height:@font-size-5}
p{margin:0}
}
.hero__ficha__favorite-recommended{position:relative;margin-top:24px;padding-left:44px;z-index:1;@media(min-width:@bp-guia-l){padding-left:60px}
}
.hero__ficha__favorite-recommended-title{display:flex;align-items:center;gap:8px;margin:0;color:@grey-70;font-family:@fontSecondaryMedium;font-weight:500;.icon-rp{.mixin-size-icon(@font-size-4,@font-size-4);color:@blue-guia}
}
.hero__ficha__favorite-author-group{position:relative;display:flex;flex-wrap:wrap;gap:20px;margin-top:12px;padding-left:44px;z-index:1;@media(min-width:@bp-guia-l){padding-left:60px}
}
.hero__ficha__favorite-author{display:flex;align-items:center;gap:12px}
.hero__ficha__favorite-author-avatar{display:flex;flex:0 0 32px;width:32px;height:32px;img{width:32px;height:32px;border-radius:50%;object-fit:cover}
}
.hero__ficha__favorite-author-info{display:flex;flex-direction:column;gap:2px}
.hero__ficha__favorite-author-name{color:@grey-70;font-family:@fontSecondaryMedium;font-weight:500}
.hero__ficha__favorite-author-profession{color:@grey-65}
}
.hero__ficha__interaction{margin-top:32px;.rp-btn-guia{&--save{display:flex;width:-webkit-fill-available;width:-moz-available;height:48px;padding:12px 32px;@media(min-width:@bp-guia-xs){padding-inline:32px}
@media(min-width:@bp-guia-m){width:fit-content;min-width:160px}
}
&--share{width:48px;height:48px;padding:12px}
}
}
}
}
}
&.hero__ficha--favorite-quote{.hero__ficha__container .hero__ficha__content .hero__ficha__info{.hero__ficha__campaing{display:none}
.calification{gap:9px;margin-block:0 16px;color:@grey-65;font-family:@fontSecondary;font-size:@font-size-2;line-height:@font-size-5;letter-spacing:.25px;.icon{.mixin-size-icon(@font-size-5,@font-size-5);color:@yellow-guia-high}
.info{color:@grey-65}
}
}
}
&.withImages{.hero__ficha__container .hero__ficha__content{@media(min-width:@bp-guia-m){padding-top:0}
.hero__ficha__micro{display:none;@media(min-width:@bp-guia-m){display:flex;margin-bottom:24px}
}
}
}
&.withoutImages{.hero__ficha__container .hero__ficha__content{padding-top:0;@media(min-width:@bp-guia-m){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_9___)"}
.hero__ficha__micro{margin-bottom:24px}
}
}
}
// Tags .hero__ficha__tags{background-color:@grey-10;margin-top:32px;&.margin--plus{margin-top:88px}
&.hero__ficha__tags--empty .tag__list{padding-block:12px}
.tag__list{display:flex;padding:16px 0;margin-right:0;margin-bottom:0;list-style:none;overflow:auto;gap:8px;&::-webkit-scrollbar{display:none}
.tag__item__list{padding:4px 8px;font-family:@fontSecondary;font-weight:400;font-size:@font-size-2;line-height:@font-size-6;letter-spacing:.0025em;border:1px solid @grey-30;border-radius:4px;white-space:nowrap;&:last-of-type{margin-right:20px}
}
}
}
}
}
.page-ficha:has(.hero__ficha.RESTAURANTE_SOLETE.hero__ficha--favorite-quote){.description.section .description-component--solete,.description.section:has(.description-component--solete){display:none}
}
@media(min-width:@bp-guia-s){.page-ficha{.hero__ficha{&.withImages{.hero__ficha__vector{@media(min-width:@bp-guia-xxl){max-height:495px}
}
}
&.withoutImages{@media(min-width:@bp-guia-m){.hero__ficha__vector{max-height:73px}
&.RESTAURANTE_RECOMENDADO .hero__ficha__container{padding-top:60px}
&.RESTAURANTE_SOLETE .hero__ficha__container{padding-top:40px;@media(min-width:@bp-guia-l){padding-top:56px}
}
}
}
.hero__ficha__container{padding-top:40px;.hero__ficha__assets{.hero__assets{display:flex;gap:16px;@media(min-width:@bp-guia-m){gap:24px}
.video__container{.rp-btn-guia{min-width:auto}
}
.hero__ficha__image{cursor:pointer}
}
.hero__assets__gallery{position:absolute;bottom:16px;right:16px;display:none;width:222px;.icon{.mixin-size-icon(20px,@font-size-4)}
.rp-btn-text{font-size:14px;letter-spacing:.025px}
}
.hero__assets__current{&.hero__assets__current--show{display:none}
}
}
.hero__ficha__content{display:flex;gap:32px;.hero__ficha__info{display:flex;order:2;margin-bottom:0;&:not(.hero__ficha__info--withoutTags){flex-direction:column;margin-bottom:0;@media(min-width:@bp-guia-m){flex-direction:row;justify-content:space-between;width:100%;gap:32px}
}
.hero__ficha__main{width:100%;height:fit-content;@media(min-width:@bp-guia-m){&.hero__ficha__main--antiguo{margin-top:-40px}
}
}
.hero__ficha__interaction{position:static;min-width:fit-content;.rp-btn-guia--save{width:fit-content}
}
}
}
}
&.CONTENIDO_ANTIGUO{.hero__ficha__container .hero__ficha__content{padding-top:80px}
}
.hero__ficha__tags,.hero__ficha__tags.margin--plus{margin-top:40px;&.tags__restaurante{@media(min-width:@bp-guia-m){position:relative;margin-top:-48px;&.position__tags{margin-top:40px}
}
.tag__list{&.container-fluid-12-columns{@media(min-width:@bp-guia-l){margin-left:268px}
@media(min-width:@bp-guia-xl){margin-left:auto}
}
}
}
&:not(.tags__restaurante) .tag__list{&.container-fluid-12-columns{@media(min-width:@bp-guia-l){padding-inline:60px}
@media(min-width:@bp-guia-xl){padding-inline:0}
}
}
.tag__list{margin-right:auto;&.container-fluid-12-columns{max-width:648px;@media(min-width:721px){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_10___)"}
@media(min-width:@bp-guia-m){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_11___)"}
@media(min-width:@bp-guia-l){max-width:100%}
@media(min-width:@bp-guia-xl){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_12___)"}
@media(min-width:@bp-guia-xxl){max-width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_13___)"}
}
.tag__item__list .tag__item__link{&:hover{color:@grey-60}
&:active{color:@grey-70}
&:disabled{color:@grey-50;border-color:@grey-50}
}
}
}
}
}
}