@import 'normalize.css';
@import 'herramientas.css';
@import 'tipografias.css';

*, *::before, *::after {
    padding: 0; margin: 0;
    box-sizing: border-box;
}
html {
    min-height: 100%;
    transform: translate3d(0,0,1);
    font-size: 8.5pt;
}
body {
    background: #fff;
    color: #666;
    font-family: 'PFRegularDisplayProRegular';
    font-size: 1.8rem;
    text-align: center;
}
b, strong, h1, h2, h3, h4 {
    font-family: 'PFRegularDisplayProBold';
    font-weight: normal;
}
i, em {
    font-family: 'PFRegularDisplayProItalic';
    font-weight: normal;
}
h2, strong {
    display: inline-block;
    line-height: 1;
    text-transform: uppercase;
}
[onclick] {
    cursor: pointer;
}
a {
    color: currentColor;
    text-decoration: none;
}
nav * {
    display: inline-block;
    vertical-align: middle;
}
nav a {
    pointer-events: all;
    text-transform: uppercase;
    font-family: 'MonserratRegular';
    font-size: 0.8rem;
    letter-spacing: 1px;
    position: relative;
}
nav a::after {
    content: ' ';
    border-radius: 1px;
    background: currentColor;
    width: 0%; height: 3px; margin: auto;
    position: absolute;
    top: calc(100% + 14px); left: 0; right: 0;
    transition: width ease 0.35s;
}
nav a:hover::after {
    width: 50%;
}
nav span {
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)) center center repeat-y;
    background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)) center center repeat-y;
    background-size: 2px 2px;
    max-width: 40px; min-width: 2px;
    width: 16.46%; height: 30px;
}
nav a:hover, nav .activo {
    /*font-family: 'MonserratBlack';*/
    text-shadow: 0 0 0 currentColor, -0.5px 0 0 currentColor, 0.5px 0 0 currentColor, 0 -0.5px 0 currentColor, 0 0.5px 0 currentColor, -0.5px -0.5px 0 currentColor, 0.5px 0.5px 0 currentColor;
}
.boton {
    display: inline-block;
    text-transform: uppercase;
    line-height: 0.8125;
    letter-spacing: 1px;
    padding: 1.125em 1.1em 0.75em !important;
    border: 1px solid currentColor;
    transition: box-shadow ease-out 0.25s;
}
.boton:hover {
    box-shadow: 0 0.125em 1.125em 2px rgba(0,0,0,0.35);
}
.pleca {
    color: #fff;
    border: none;
}
.gris { background-color: #4d4d4d; }
.fondo.rojo { background-color: #e36361; }
.texto.rojo { color: #e36361; } /*#ef4d58*/
.fondo.fucsia { background-color: #ac1974; }
.texto.fucsia { color: #ac1974; }
.fondo.frenchbistre { background-color: #907046; }
.texto.frenchbistre { color: #907046; }
.fondo.mossgreen { background-color: #95a957; }
.texto.mossgreen { color: #95a957; }
.fondo.verdigris { background-color: #5FB8B6; }
.texto.verdigris { color: #5FB8B6; }
.fondo.pacificblue { background-color: #3facba; }
.texto.pacificblue { color: #3facba; }
.fondo.cgblue { background-color: #3e7493; }
.texto.cgblue { color: #3e7493; }
.fondo.davysgrey { background-color: #4c4c4c; }
.texto.davysgrey { color: #4c4c4c; }
.prepay {
    font-size: 1.5rem;
}
header {
    display: block;
    color: #fff;
    background: -webkit-linear-gradient(90deg, transparent 2em, #e36361 2em);
    background: linear-gradient(0deg, transparent 1.9em, #e36361 1.9em);
    position: relative;
}
header div {
    max-width: 980px;
    width: 75.52%; margin: 0 auto;
    padding: 1em 0 2.5em;
    position: relative;
}
header h1 {
    background: url(../pics/logo_hdm.svg) center center no-repeat;
    background-size: contain;
    width: 133px; height: 74px; margin: 0 auto;
    color: transparent; font-size: 0; word-spacing: 0; letter-spacing: 0;
}
header nav {
    text-align: right;
    position: absolute;
    top: 1em; left: 50%; right: 0;
    pointer-events: none;
    transform: translateX(21.25%);
}
header .prepay {
    position: absolute;
    right: 0; bottom: 1.5em;
}
main {
    display: block;
}
section {
    display: block;
    max-width: 980px;
    width: 76.5625%;
    margin: 0 auto;
    position: relative;
}
#galeria {
    background-image: -webkit-linear-gradient(0deg, #808080, #808080), -webkit-linear-gradient(0deg, #808080, #808080);
    background-image: linear-gradient(0deg, #808080, #808080), linear-gradient(0deg, #808080, #808080);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-size: 76.5625% 1px;
    height: 50vh;
    padding: 1em 0;
    margin-bottom: 1em;
    overflow: hidden;
    position: relative;
}
#galeria:empty {
    height: inherit;
    padding: 1px 0 0;
}
#galeria img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
/*
    galería
*/
.indice {
    display: block;
    position: absolute !important;
    left: 0; right: 0; bottom: 32px;
    z-index: 2;
}
.indice span {
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    width: 15px; height: 15px;
    cursor: pointer;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}
.indice span:not(:first-of-type) {
    margin-left: 11px;
}
.indice span.activo {
    background: #e36361;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.fAnterior, .fSiguiente {
    display: none;
}
.fxGaleria {
    min-height: 100%;
    height: 100%;
    position: relative;
}
.fxGaleria:not(.restaurant)::after {
    content: ' ';
    pointer-events: none;
    background-image: url(../pics/logo_mealplan.svg), url(../pics/sombra_galeria.webp);
    background-position: center calc(100% - 76px), center bottom;
    background-repeat: no-repeat;
    background-size: auto, 100% auto;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.fxGaleria > *:not(.indice):not(.fSiguiente):not(.fAnterior) {
    pointer-events: none;
    opacity: 0;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.fxGaleria > *:not(.indice):not(.fSiguiente):not(.fAnterior).activo {
    pointer-events: all;
    opacity: 1;
    position: relative !important;
}
/**/
h2 {
    color: #ef4d58;
    background-image: linear-gradient(0deg, #808080, #808080), linear-gradient(0deg, #808080, #808080);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    font-size: 4.9rem;
    padding: 3rem 0 1.8rem;
    margin: 3.9rem 0 0;
    position: relative;
}
h2 i {
    color: #666;
    background: #fff;
    text-transform: none;
    white-space: nowrap;
    font-family: 'ShimmerOTRegular' !important;
    font-size: 1.2972em;
    line-height: 0;
    padding: 1px 32px;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
h2 + div {
    display: inline-block;
    background-image: -webkit-linear-gradient(90deg, #808080 12.23%, transparent 12.23%, transparent 75.54%, #808080 75.54%);
    background-image: linear-gradient(0deg, #808080 12.23%, transparent 12.23%, transparent 75.54%, #808080 75.54%);
    background-size: 100% 0.817rem;
    background-position: center bottom;
    background-repeat: no-repeat;
    text-transform: uppercase;
    padding: 1.8rem 0;
    margin-bottom: 4.9rem;
}
p {
    max-width: 730px;
    width: 74.49%
    padding: 1px;
    margin: 0 auto 6.5rem;
}
.circulo {
    display: inline-block;
    background-position: center top;
    background-repeat: no-repeat;
    text-transform: uppercase;
    width: 30%;
    padding-top: calc(132px + 1em);
    margin: 0 1.5%;
    vertical-align: top;
}
[data-icono="cutlery"] { background-image: url(../pics/icono_restaurants.svg); }
[data-icono="money"] { background-image: url(../pics/icono_money.svg); }
[data-icono="boxlunch"] { background-image: url(../pics/icono_boxlunch.svg); }
[data-icono="phone"] { background-image: url(../pics/icono_phone.svg); }
[data-icono="arroba"] { background-image: url(../pics/icono_arroba.svg); }
h3 {
    display: block;
    background-image: -webkit-linear-gradient(0deg, #808080, #808080);
    background-image: linear-gradient(0deg, #808080, #808080);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    font-size: 3.35rem;
    text-align: center;
    text-transform: uppercase;
    padding: 0 0 6px;
    margin-bottom: 22px;
    position: relative;
}
h3 + div {
    display: inline-block;
}
#tablero {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: space-between;
    justify-content: space-between;
    padding-bottom: 3.1rem;
    margin-bottom: 5.5rem;
    background-image: -webkit-linear-gradient(90deg, #808080 3px, transparent 3px, transparent 5px, #808080 5px, #808080 6px, transparent 6px);
    background-image: linear-gradient(0deg, #808080 3px, transparent 3px, transparent 5px, #808080 5px, #808080 6px, transparent 6px);
    background-size: 98% 7px;
    background-position: center bottom;
    background-repeat: no-repeat;
    text-align: left;
}
#tablero > span:empty {
    flex: 0 1 98%;
    background: #808080;
    height: 1px;
    margin: 3.1rem 1%;
}
#tablero > :not(span:empty) {
    flex: 0 1 44%;
    position: relative;
}
#tablero a {
    display: inline-block;
    font-family: 'MonserratBold';
    font-size: 0.8rem;
    line-height: 0.93;
}
#tablero .pleca {
    float: right;
    margin: 0 0 1em 1em;
}
#tablero img {
    display: block;
    border: 1px solid #666;
    max-width: 100%; max-height: 100%;
    width: 100%; height: auto;
    padding: 0.6rem;
    margin-bottom: 1em;
}
#tablero h4 {
    padding-top: 0.8rem;
    margin-bottom: 0.5em;
}
#tablero p {
    text-align: inherit;
    margin-bottom: 0.5em;
}
footer {
    display: block;
    color: #fff;
    padding: 1px 0 38px;
    overflow: hidden;
    position: relative;
}
footer p {
    font-family: 'MonserratRegular';
    font-size: 0.95rem;
    margin: 3em auto 1em;
}
#siguenos {
    display: inline-block;
    margin-bottom: 77px;
}
#siguenos strong {
    font-size: 1.6875rem;
    letter-spacing: 0.59em;
    padding: 56px 1em 32px;
}
#siguenos [title] {
    color: transparent;
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    /* */
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 42px; height: 42px;
}
#siguenos [title="tripadvisor"] {
    background-image: url(../pics/icono_tripadvisor.svg);
}
#siguenos [title="facebook"] {
    background-image: url(../pics/icono_facebook.svg);
}
#siguenos [title="instagram"] {
    background-image: url(../pics/icono_instagram.svg);
}
#siguenos [title]:not(:last-child) {
    margin-right: calc(50% - 84px);
}
/* header pegajoso */
@keyframes aparicion {
    0% { transform: translateY(-100%); }
}
.pegajoso {
    background: -webkit-linear-gradient(90deg, transparent 4px, rgba(0,0,0,0.14) 40px, rgba(0,0,0,0.35) 48px, #e36361 48px);
    background: linear-gradient(0deg, transparent 1px, rgba(0,0,0,0.1) 40px, rgba(0,0,0,0.2) 48px, #e36361 48px);
    position: fixed; top: 0; left: 0; right: 0; z-index: 3;
    animation: aparicion ease 0.5s;
}
.pegajoso div {
    padding: 0px 0 48px;
}
.pegajoso div::after {
    content: ' '; display: block; clear: both;
}
.pegajoso h1 {
    display: inline-block;
    background-image: url(../pics/icono_hdm.svg);
    width: 33px; height: 33px;
    margin: 0.75rem 0 0;
    float: left; vertical-align: middle;
}
.pegajoso nav {
    display: none;
}
.pegajoso .prepay {
    float: right; vertical-align: middle;
    position: relative; right: inherit; bottom: inherit;
    margin: 0; transform: none;
}
/* interior | información de restaurante */
[data-interior] {
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto;
    max-height: 867px;
    position: absolute;
    left: 0; right: 0;
    z-index: -1;
}
[data-interior='pitahayas'] {
    background-image: url(../pics/fondo_restaurant_pitahayas.jpg);
}
[data-interior='de_cortez'] {
    background-image: url(../pics/fondo_restaurant_de_cortez.jpg);
}
[data-interior='tomates'] {
    background-image: url(../pics/fondo_restaurant_tomates.jpg);
}
[data-interior='las_sirenas'] {
    background-image: url(../pics/fondo_restaurant_las_sirenas.jpg);
}
[data-interior='tortugas'] {
    background-image: url(../pics/fondo_restaurant_tortugas.jpg);
}
[data-interior='delfines'] {
    background-image: url(../pics/fondo_restaurant_delfines.jpg);
}
[data-interior='la_suerte'] {
    background-image: url(../pics/fondo_restaurant_la_suerte.jpg);
}
[data-interior='burro_cansado'] {
    background-image: url(../pics/fondo_restaurant_burro_cansado.jpg);
}
[data-interior='las_fuentes'] {
    /* background-image: url(../pics/fondo_restaurant_las_fuentes.jpg); */
}
.interior {
    background-image: -webkit-linear-gradient(90deg, #808080 3px, transparent 3px, transparent 5px, #808080 5px, #808080 6px, transparent 6px);
    background-image: linear-gradient(0deg, #808080 3px, transparent 3px, transparent 5px, #808080 5px, #808080 6px, transparent 6px);
    background-size: 98% 7px;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    margin-bottom: 3rem;
}
.interior h2 {
    color: currentColor;
    background: linear-gradient(0deg, #808080, #808080) center 0.33em no-repeat;
    background-size: 86% 1px;
    width: 100%;
    padding: 0;
    margin: 28px auto 0;
    position: relative;
}
.interior h2 span {
    display: inline-block;
    background: linear-gradient(0deg, #fff, #fff) center 0.32em no-repeat;
    background-size: 100% 2.5px;
    padding: 0 0.2em;
}
.interior h2 em {
    display: inline-block;
    background-image: -webkit-linear-gradient(90deg, #808080 12.23%, transparent 12.23%, transparent 75.54%, #808080 75.54%);
    background-image: linear-gradient(0deg, #808080 12.23%, transparent 12.23%, transparent 75.54%, #808080 75.54%);
    background-size: 100% 0.817rem;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-family: 'ShimmerOTRegular' !important;
    font-size: 1.2972em; line-height: 0.66;
    text-transform: none;
    min-width: 50.68%;
    padding: 1.8rem 0;
    margin-bottom: 4.9rem;
}
.interior h2 + div:empty {
    background: none;
}
.interior h2 + div {
    font-family: 'ShimmerOTRegular' !important;
    font-size: 5.99rem;
    line-height: 0.66;
    text-transform: none;
    min-width: 50.68%;
    padding: 1.8rem 0;
    margin-bottom: 4.9rem;
}
.interior p {
    margin-bottom: 3.5rem;
}
.interior i.letrotas {
    font-size: 2.9rem;
}
.interior i.letrotas.negritas {
    font-weight: bolder;
}
.interior .circulo {
    text-transform: inherit;
    width: calc(47% - 1px); margin: 39px 1.5%;
}
.interior .circulo + span:empty {
    display: inline-block;
    background: #666;
    vertical-align: bottom;
    width: 1px; height: 220px;
    margin: 39px 0;
}
ul {
    list-style: none;
    text-align: left;
    margin-bottom: 6.5rem;
}
li:not(:last-child) {
    margin-bottom: 0.5em;
}
li:not(.sinmarca)::before {
    content: '\2022';
    display: inline-block;
    color: #e36361;
    font-weight: bold;
    width: 1em;
    margin-left: -1em;
}
#THM {
    display: table;
    width: 80%;
    margin: 0 auto;
}
#THM > * {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
#THM ul {
    all: unset;
    text-align: left;
    font-family: 'MonserratRegular';
    font-size: 1.2rem;
}
#THM li::before {
    content: none;
}
#THM li:nth-child(1) {
    list-style-image: url(../pics/iconomini_phone.svg);
}
#THM li:nth-child(2) {
    list-style-image: url(../pics/iconomini_clock.svg);
}
#THM li b {
    font-family: 'MonserratBold';
}
.redondo {
    display:  inline-block;
    width: 50%;
    padding: 0.25em 0 0.25em;
    margin-top: 6.5rem;
}
.redondo.anterior {
    border-right: 1px solid rgba(0,0,0,0.15);
    padding-right: 1em;
}
.redondo.siguiente {
    border-left: 1px solid rgba(0,0,0,0.15);
    padding-left: 1em;
}
.redondo.anterior::before, .redondo.siguiente::after {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid currentColor;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.2rem;
    width: 2.4rem; height: 2.4rem;
    vertical-align: top;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.redondo.anterior::before { content: '\02190'; margin-right: 1em; }
.redondo.siguiente::after { content: '\02192'; margin-left: 1em; }
.redondo.anterior:hover::before, .redondo.siguiente:hover::after {
    transform: scale(1.5);
}
.redondo * { display: inline-block; }
/* animaciones */
@keyframes entrar {
    0% { opacity: 0.66; transform: perspective(800px) rotateY(90deg) translate3d(0, 2em, 1rem) scale(0.9); }
}
.animar {
    transform-origin: center bottom;
    backface-visibility: hidden;
    animation: entrar 1s ease 0.15s;
    animation-fill-mode: backwards;
}
/* responsivo */
@media (max-width: 1040px) {
    header div { padding: 2.6rem 0 1.375rem; }
    header:not(.pegajoso) .prepay {
        margin: 1em auto 0;
        position: relative; right: inherit; bottom: inherit;
    }
    .pegajoso .prepay { max-width: calc(87.76% - 33px); }
}
@media (max-width: 980px) and (orientation: portrait) {
    #galeria { height: inherit; }
    #galeria img {
        max-width: 100%; max-height: 100%;
        width: auto; height: auto;
    }
    .fxGaleria:not(.restaurant)::after {
        background-position: center top, center bottom;
        background-size: auto 66%, 100% auto;
    }
}
@media (max-width: 1280px) /* 990 */ {
    header nav {
        pointer-events: all;
        text-align: center;
        left: inherit;
        z-index: 1;
    }
    header nav label{
        pointer-events: all;
        cursor: pointer;
        display: inline-block;
        width: 26px; height: 26px;
        border: none;
        background-image: -webkit-linear-gradient(90deg, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
        background-image: linear-gradient(0deg, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70% 70%;
    }
    header nav :not(label) { display: none; }
    @keyframes crecer {
        0% { opacity: 0.01; transform: scale(0.9); }
    }
    #switch_nav:checked + nav {
        padding: 28px;
        transform-origin: right top;
        animation: crecer 0.5s ease;
        animation-fill-mode: backwards;
    }
    @keyframes colocar {
        0% { transform: translate(-100%, 100%); }
    }
    #switch_nav:checked + nav label {
        background-image: -webkit-linear-gradient(45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%);
        background-image: linear-gradient(45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%);
        position: absolute;
        left: 102%; bottom: calc(100% - 13px);
        transform-origin: left bottom;
        animation: colocar 0.5s ease;
        animation-fill-mode: backwards;
    }
    #switch_nav:checked + nav::after {
        content: ' ';
        display: block;
        background-color: #ef4d58;
        box-shadow: inset 0 0 0 1px #fff, 0 0 1rem rgba(0,0,0,0.2);
        position: absolute;
        top: 0; right: 0; left: 0; bottom: 0;
    }
    #switch_nav:checked + nav a {
        display: block;
        z-index: 1;
    }
    #switch_nav:checked + nav a:not(:first-of-type) { margin-top: 28px; }
    article h4 { clear: both; }
}
@media (max-width: 800px) {
    .circulo {
        width: 47%;
        margin-bottom: 1em;
    }
}
@media (max-width: 780px) {
    #THM {
        width: 100%;
    }
    #THM > * {
        display: block;
        width: inherit;
        margin: 0 auto;
    }
    #THM > :first-child {
        padding-left: calc(22px + 1em);
        margin-bottom: 1em;
    }
    [data-minicono]::after {
        content: ' ';
        display: block;
        width: 29px; height: 29px;
        margin-right: 1em;
        float: left;
    }
    [data-minicono] b::after {
        content: '\0A';
        display: block;
        clear: both;
    }
}
@media (max-width: 700px) {
    body { font-size: 1.6rem; }
    .indice { bottom: 8px; }
    .fxGaleria::after {
        background-position: center calc(100% - 38px), center bottom;
        background-size: auto calc(100% - 52px), 100% auto;
    }
    h2 { font-size: 3.4rem; }
    h3 { font-size: 2.6rem; }
    #tablero > span:empty { display: none; }
    #tablero > :not(span:empty) {
        flex: 0 1 98%;
        padding-bottom: 26px;
        position: relative;
    }
    .interior i.letrotas {
        font-size: 2rem;
        line-height: 0.8125;
    }
    .interior img {
        display: block;
        max-width: 100%;
        margin: auto;
    }
    .interior .circulo {
        width: 100%;
    }
    .interior .circulo + span:empty {
        width: 75%; height: 1px;
    }
    footer img {
        display: block;
        margin: 0 auto 1em;
    }
    footer img + span { display: none; }
    footer nav span { width: 6.46%; }
}
@media (max-width: 600px) {
    .circulo {
        width: 97%;
    }
    .redondo {
        width: 100%;
    }
    .redondo.anterior {
        border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(0,0,0,0.15);
        padding-bottom: 1em;
        margin-top: 6.5rem;
    }
    .redondo.siguiente {
        border-left: none; padding-left: 0;
        border-top: 1px solid rgba(0,0,0,0.15);
        padding-top: 1em;
        margin-top: 0;
    }
}
@media (max-width: 510px) {
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2.2rem; }
}
@media (max-width: 480px) {
    .pegajoso h1 {
        margin: 1.25rem 0 0;
    }
    #THM li b::after {
        content: '\0A';
        white-space: pre-wrap;
    }
}