@import url("https://use.typekit.net/cap2jsc.css");
@import url("https://use.typekit.net/dan7mcf.css");

:root {
   font-family: 'azo-sans-web', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   color: #18202a;
   background: #f5f6f8
}

* {
   box-sizing: border-box
}
/* body, html {
   margin: 0;
   height: 100%;
   background-color: #6d809a;
   overflow-x: hidden;
} */

.map-demo {
   max-width: 100%;
   margin: 0 auto;
   /* padding: 32px 24px */
}

.map-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px
}

.map-eyebrow {
   display: block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .12em;
   color: #7c8490
}

.map-header h1 {
   margin: 4px 0 0;
   font-size: 32px;
   line-height: 1.1
}

.map-layout {  
   display: flex;
   background-color: #6d809a;
   height: 100vh;
   align-items: center;
}

.map-container {
   position: relative;
   /* padding: 35px 16px; */
   padding:0;
   overflow: hidden;
   background: url(background-map.webp) 51% 0% no-repeat;
   background-size: auto 750px;
   border-radius: 14px;
   z-index: 1;
}

.map-container.zoomed {
   background-image: none;
}

#spain-map {
   width: 100%;
   height: 700px;
   text-align: center;
   margin-top: 25px;
   margin-bottom: 25px;
   /* background:url('background-map.webp') center center no-repeat; */
}
.map-container.zoomed #spain-map {
   margin-top: 0;
   margin-bottom: 0;
   height: 100vh;
}
#spain-map svg {
   width:100%;
   height: 100vh;
}

.map-back {
   border: 1px solid #d8dce1;
   background: #fff;
   border-radius: 8px;
   padding: 9px 13px;
   cursor: pointer;
   font-size: 14px
}

.ccaa-overlay {
   position: absolute;
   z-index: 10;
   transform: translate(-50%, -50%);
   pointer-events: none
}

.ccaa-overlay-card {
   max-width: 280px;
   /* padding: 18px 20px;
   background: rgba(255, 255, 255, .96);
   border: 1px solid #dfe3e8;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, .12); */
   pointer-events: auto;
   position: relative
}

.map-container.zoomed .ccaa-overlay+#spain-map svg g {
    translate: 0 10vh;
}

.ccaa-overlay[data-ccaa="ES-CN"]+#spain-map svg g {
    translate: 32vw 0;
}

.ccaa-overlay[data-ccaa="ES-AN"] .ccaa-overlay-card {
   width: 420px;
   max-width: none;
}

.ccaa-overlay[data-ccaa="ES-RI"] .ccaa-overlay-card {
   width: 330px;
   max-width: none;
   zoom:.9;
}
.ccaa-overlay[data-ccaa="ES-CT"] .ccaa-overlay-card {
   width: 330px;
   max-width: none;
}
.ccaa-overlay[data-ccaa="ES-CM"] .ccaa-overlay-card {
   width: 360px;
   max-width: none;
}

.ccaa-overlay-card h2 {
   margin: 6px 0 8px;
   font-size: 45px;
   font-family: "alternate-gothic-atf";
   color: #FFF;
   text-transform: uppercase;
   font-weight: 500;
}
.ccaa-overlay[data-ccaa="ES-VC"] .ccaa-overlay-card h2 {
   line-height: 45px;
}

.ccaa-overlay-card p {
   margin: 0;
   color: #FFF;
   font-size: 17px;
   line-height: 1.25;
   font-family: 'azo-sans-web', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ccaa-overlay[data-ccaa="ES-AN"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-RI"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-CM"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-GA"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-CT"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-MD"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-CL"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-NC"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-PV"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-AR"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-EX"] .ccaa-overlay-card p,
.ccaa-overlay[data-ccaa="ES-MC"] .ccaa-overlay-card p {
   color:#6d809a;
}

.ccaa-overlay-content {
   margin-top: 14px;
   padding-top: 14px;
   border-top: 1px solid #e8eaed;
   padding-right:20px;
}

.ccaa-overlay-close {
   border: 0;
   background: #FFF;
   font-size: 25px;
   line-height: 1;
   cursor: pointer;
   color: #68819d;
   padding: 5px 8px;
   font-family: "alternate-gothic-atf";
   margin-top: 8px;
}

@media(max-width:800px) {
   .map-demo {
      padding: 20px 14px
   }

   #spain-map {
      height: 440px
   }

   .ccaa-overlay-card {
      width: min(280px, calc(100vw - 70px))
   }
}

path {
   fill-opacity: 1 !important;
}

.jvm-tooltip {
   color: #68819d;
   background: #FFF;
   text-transform: uppercase;
   font-family: "alternate-gothic-atf";
   font-size: 21px;
   border-radius: 0;
}

#spain-map [data-code="ES-AS"]:hover,
#spain-map [data-code="ES-CB"]:hover {
   fill: #d3d3d3 !important;
   cursor: default;
}

.info {
   z-index: 99999;
}
.info .cont {
   display: flex;
   max-width: 320px;
}

.info p {
   color: #FFF;
   font-size: 15px;
   margin-bottom: 4px;
   display: block;
   font-family: 'azo-sans-web', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

video {
   max-width: 100%;
}

#spain-map text.jvm-region {
   color: #68819d;
   text-transform: uppercase;
   font-family: "alternate-gothic-atf";
   font-size: 13px;
   border-radius: 0;
   filter: url(#fondo-dinamico);
}
#spain-map text.jvm-region:hover {
   fill:#68819d!important;
}

#spain-map text.jvm-region[data-code="ES-RI"] {
   /* font-size:11px; */
   transform: translateX(-5px);
}
#spain-map text.jvm-region[data-code="ES-NC"] {
   /* font-size:13px; */
   transform: translateX(-8px);
}
#spain-map text.jvm-region[data-code="ES-PV"] {
   /* font-size:12px; */
   transform: translateY(-11px);
}

#spain-map text.jvm-region[data-code="ES-CB"] {
   font-size:11px;
   transform: translateY(-8px);
}
#spain-map text.jvm-region[data-code="ES-CB"],
#spain-map text.jvm-region[data-code="ES-AS"] {
   filter:none;
}

#spain-map .jvm-region-label {
   transition: opacity 250ms ease;
}


/* HACK LANDING */
section.sobre-mesa {
   padding-top:60vh!important;
}
section.recipes {
   z-index: 9!important;
}

@media (min-height: 801px) and (max-height: 899px) {
   section.recipes {
      top: -47vh !important;
   }
}

/* 800px de alto o menos */
@media (max-height: 800px) {
   section.sobre-mesa {
      padding-top: 65vh !important;
   }
   section.recipes {
      top: -50vh !important;
   }
   #spain-map {
      height: 600px;
   }
   .map-container {
      background-size: auto 650px;
   }
}

/* 800px de alto o menos */
@media (max-height: 651px) {
   section.recipes {
      top: -60vh !important;
   }
   #spain-map {
      height: 530px;
   }
   .map-container {
      background-size: auto 580px;
   }
}
@media (min-width: 800px) and (max-width: 1280px) {
   .map-layout {
      min-height: 700px;
   }
   #spain-map {
      height: 500px;
   }
   .map-container {
      background-size: auto 550px;
   }
   section.recipes {
      top: -60vh !important;
   }
}