
:root{
  --contact-pink:#fa94ad;
  --contact-icon:#ff8fac;
  --contact-title:#ff8fac;
  --contact-soft:#fff4f8;
  --contact-card:#fff1f6;
  --contact-ink:#171117;
  --contact-deep:#ff759f;
}

.contact-page-main{
  min-height:70vh;
  padding:0 0 70px;
  color:var(--contact-ink);
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  background:
    radial-gradient(ellipse at 22% 20%,rgba(255,255,255,.78) 0 18%,transparent 19%),
    radial-gradient(ellipse at 78% 68%,rgba(255,255,255,.54) 0 20%,transparent 21%),
    linear-gradient(120deg,rgba(255,255,255,.42) 0 17%,transparent 17% 42%,rgba(255,255,255,.30) 42% 62%,transparent 62%),
    var(--contact-soft);
}

.contact-page-main,
.contact-page-main button,
.contact-page-main a,
.contact-page-main input,
.contact-page-main textarea{
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
}

.contact-nav-link{text-decoration:none;display:flex;align-items:center}

.contact-hero{padding-top:18px;text-align:center}
.contact-heading{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--contact-title)!important}
.contact-heading h1{
  margin:0;
  color:var(--contact-title)!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-size:clamp(42px,4.6vw,64px)!important;
  font-weight:500!important;
  line-height:1.05;
  letter-spacing:0!important;
  text-transform:none!important;
}
.contact-heading span{color:var(--contact-title)!important;font-size:24px;line-height:1}
.contact-hero>p{
  margin:10px 0 28px;
  color:#0e0b0d!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-size:14px;
  font-weight:700!important;
  letter-spacing:.13em;
}
.contact-hero-art{width:min(890px,100%);margin:0 auto;overflow:hidden}
.contact-hero-art img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}

.locations-section{margin-top:30px}
.locations-grid{display:grid;gap:30px}
.location-card{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(480px,1.14fr);
  min-height:350px;
  overflow:hidden;
  border:0;
  border-radius:28px;
  background:rgba(255,241,246,.92);
  box-shadow:none;
}
.location-details{
  padding:46px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,241,246,.94);
}
.location-details h3{
  margin:0 0 24px;
  color:var(--contact-ink)!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-size:28px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.location-line{display:grid;grid-template-columns:48px 1fr;gap:14px;margin:11px 0;align-items:start}
.location-icon{width:40px;height:40px;display:grid;place-items:center}
.location-icon img{display:block;width:40px;height:40px;object-fit:contain}
.location-line strong{
  display:block;
  margin-bottom:5px;
  color:var(--contact-ink)!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-weight:600!important;
}
.location-line p{
  margin:0;
  color:var(--contact-ink)!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-weight:400!important;
  line-height:1.6;
}
.location-map{position:relative;min-height:350px;overflow:hidden;background:#eee}
.location-map iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:350px;
  border:0;
  filter:grayscale(1) contrast(.96);
  transition:filter .35s ease;
}
.location-map:hover iframe,
.location-map:focus-within iframe{filter:grayscale(0) contrast(1)}
.map-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:22px;
  padding:12px 22px;
  border-radius:999px;
  background:#ff8fac!important;
  color:#fff!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-weight:700!important;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(202,55,126,.18)
}
.map-button:hover{background:#ff759f!important}
.contact-loading{padding:60px;text-align:center}

/* Encabezado exclusivo de la página de ubicación: sin buscador ni carrito. */
.contact-location-page .main-nav .nav-inner{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:"brand menu"!important;
  align-items:center!important;
  gap:24px!important;
  overflow:visible!important;
}
.contact-location-page .main-nav .brand-logo{grid-area:brand!important;justify-self:start!important}
.contact-location-page .main-nav .nav-menu{
  grid-area:menu!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:24px!important;
  width:auto!important;
  overflow:visible!important;
}
.contact-location-page .main-nav .menu-toggle{display:none!important}

.nav-info-wrap{
  position:relative;
  display:flex;
  align-items:stretch;
  width:132px;
  min-width:132px;
}
.nav-info-trigger{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:132px!important;
  height:100%!important;
  margin:0!important;
}
.information-dropdown{
  position:absolute;
  top:100%;
  left:0;
  z-index:1005;
  width:100%;
  min-width:100%;
  padding:0;
  border:0;
  border-radius:0 0 10px 10px;
  background:#ff8fac;
  box-shadow:0 12px 28px rgba(78,31,55,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.nav-info-wrap.is-open .information-dropdown,
.nav-info-wrap:hover .information-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.information-dropdown a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 10px;
  border-radius:0 0 10px 10px;
  color:#fff!important;
  font-family:var(--font-general,Inter,Arial,sans-serif)!important;
  font-weight:700!important;
  text-decoration:none;
  text-align:center;
}
.information-dropdown a:hover,
.information-dropdown a:focus-visible{
  background:#ff759f;
  color:#fff!important;
  outline:0;
}

@media(max-width:900px){
  .location-card{grid-template-columns:1fr}
  .location-map,.location-map iframe{min-height:330px}
  .location-details{padding:34px}
}
@media(max-width:760px){
  .contact-heading h1{font-size:40px!important}
  .contact-heading span{font-size:20px}
  .contact-hero>p{font-size:12px;letter-spacing:.09em}
  .contact-page-main{padding-bottom:35px}
  .location-details{padding:28px 22px}
  .location-details h3{font-size:25px!important}
  .nav-info-wrap{display:block}
  .information-dropdown{
    position:static;
    display:none;
    width:auto;
    min-width:0;
    margin:0 12px 8px;
    transform:none;
    border:1px solid #f6c2d1;
    border-radius:8px;
  }
  .nav-info-wrap.is-open .information-dropdown{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .information-dropdown a{border-radius:7px}
  .nav-menu:not(.is-open){display:none}
  .nav-menu.is-open{display:flex}
}


@media(max-width:760px){
  .contact-location-page .main-nav .nav-inner{
    grid-template-columns:1fr auto!important;
    grid-template-areas:"brand toggle" "menu menu"!important;
    gap:8px 12px!important;
    padding:6px 12px 0!important;
  }
  .contact-location-page .main-nav .brand-logo{grid-area:brand!important}
  .contact-location-page .main-nav .menu-toggle{grid-area:toggle!important;display:flex!important}
  .contact-location-page .main-nav .nav-menu{
    grid-area:menu!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    padding:8px 0!important;
  }
  .contact-location-page .main-nav .nav-menu.is-open{display:flex!important}
  .nav-info-wrap{display:block;width:100%;min-width:0}
  .nav-info-trigger{width:100%!important;min-width:0!important;justify-content:flex-start!important}
  .information-dropdown{
    position:static;
    display:none;
    width:100%;
    min-width:0;
    margin:0;
    transform:none;
    border-radius:8px;
  }
  .nav-info-wrap.is-open .information-dropdown{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .information-dropdown a{border-radius:8px;justify-content:flex-start;padding-left:18px}
}


/* V3.39 · Resumen dinámico de puntos de venta en el footer */
.footer-location-summary {
  display: grid;
  gap: 6px;
  max-width: 265px;
  margin-top: 8px !important;
}
.footer-location-item {
  position: relative;
  display: block;
  padding-left: 17px;
  color: inherit;
  font-size: 14px;
  line-height: 1.35;
}
.footer-location-item::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 900;
}


/* =========================================================
   V3.40 · MISMO ENCABEZADO QUE INICIO, SIN CONTACTO NI LÍNEA BLANCA
   ========================================================= */
html body.contact-location-page .store-header {
  background: #ffffff !important;
}
html body.contact-location-page .store-header .main-nav {
  position: relative !important;
  top: auto !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
html body.contact-location-page .store-header.header-layout-horizontal .nav-inner {
  display: grid !important;
  grid-template-columns: auto minmax(360px,1fr) !important;
  grid-template-areas: "brand menu" !important;
  align-items: center !important;
  gap: 24px !important;
  overflow: visible !important;
}
html body.contact-location-page .store-header.header-layout-horizontal .brand-logo {
  grid-area: brand !important;
  justify-self: start !important;
}
html body.contact-location-page .store-header.header-layout-horizontal .nav-menu {
  grid-area: menu !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  width: auto !important;
  overflow: visible !important;
}
html body.contact-location-page .store-header.header-layout-centered .main-nav {
  padding: 8px 0 0 !important;
}
html body.contact-location-page .store-header.header-layout-centered .nav-inner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "brand" "menu" !important;
  min-height: 118px !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
html body.contact-location-page .store-header.header-layout-centered .brand-logo {
  grid-area: brand !important;
  justify-self: center !important;
  object-position: center !important;
}
html body.contact-location-page .store-header.header-layout-centered .brand-logo img {
  object-position: center !important;
}
html body.contact-location-page .store-header.header-layout-centered .nav-menu {
  grid-area: menu !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--header-menu-height,56px) !important;
  min-height: var(--header-menu-height,56px) !important;
  margin: 4px calc(50% - 50vw) 0 !important;
  padding: 0 max(18px,calc((100vw - min(1180px,calc(100vw - 40px)))/2)) !important;
  overflow: visible !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: var(--header-menu-pink,#fac8d5) !important;
  box-shadow: none !important;
}
html body.contact-location-page .store-header.header-layout-centered.header-menu-left .nav-menu { justify-content: flex-start !important; }
html body.contact-location-page .store-header.header-layout-centered.header-menu-center .nav-menu { justify-content: center !important; }
html body.contact-location-page .store-header.header-layout-centered.header-menu-right .nav-menu { justify-content: flex-end !important; }
html body.contact-location-page .store-header.header-layout-centered .nav-link {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
}
html body.contact-location-page .contact-page-main {
  margin-top: -1px !important;
  border-top: 0 !important;
}
html body.contact-location-page .main-nav .menu-toggle { display: none !important; }

@media (max-width: 760px) {
  html body.contact-location-page .store-header.header-layout-horizontal .nav-inner,
  html body.contact-location-page .store-header.header-layout-centered .nav-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand toggle" "menu menu" !important;
    gap: 8px 12px !important;
    padding: 6px 12px 0 !important;
  }
  html body.contact-location-page .store-header .brand-logo { grid-area: brand !important; }
  html body.contact-location-page .store-header .menu-toggle {
    grid-area: toggle !important;
    display: flex !important;
  }
  html body.contact-location-page .store-header .nav-menu {
    grid-area: menu !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: #ffffff !important;
  }
  html body.contact-location-page .store-header .nav-menu.is-open { display: flex !important; }
}

/* =========================================================
   V3.41 · ESPACIADO UNIFORME DEL MENÚ EN UBICACIONES
   ========================================================= */
html body.contact-location-page .store-header .nav-menu {
  column-gap: 18px !important;
  gap: 18px !important;
}
html body.contact-location-page .store-header .nav-info-wrap {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
html body.contact-location-page .store-header .nav-info-trigger {
  width: auto !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.contact-location-page .store-header .information-dropdown {
  left: 50% !important;
  right: auto !important;
  width: 132px !important;
  min-width: 132px !important;
  transform: translate(-50%, -4px) !important;
}
html body.contact-location-page .store-header .nav-info-wrap.is-open .information-dropdown,
html body.contact-location-page .store-header .nav-info-wrap:hover .information-dropdown {
  transform: translate(-50%, 0) !important;
}
