/* Aura / Dental V5.5 — ubicación odontológica inmersiva
   Este archivo modifica únicamente #ubicacion-dental. */
.dental-location-v55 {
  --loc-blue: #17628e;
  --loc-blue-deep: #0d3148;
  --loc-sky: #63d3df;
  --loc-ice: #9bd8fa;
  --loc-paper: #f5f5f1;
  --loc-ink: #11110f;
  --loc-muted: #66727a;
  position: relative;
  overflow: hidden;
  padding-block: clamp(92px, 10vw, 150px);
  background:
    radial-gradient(circle at 8% 12%, rgba(99,211,223,.11), transparent 23%),
    radial-gradient(circle at 92% 84%, rgba(23,98,142,.10), transparent 26%),
    linear-gradient(180deg, #f8f8f4 0%, #f1f3f2 100%);
}
.dental-location-v55::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(23,98,142,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,98,142,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.dental-location-v55 > .container { position: relative; z-index: 1; }
.dental-location-heading { margin-bottom: clamp(38px, 5vw, 66px); }
.dental-location-heading .eyebrow { color: var(--loc-blue); }
.dental-location-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: end;
}
.dental-location-heading h2 {
  max-width: 900px;
  margin-top: 18px;
  color: var(--loc-ink) !important;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .94;
}
.dental-location-heading-grid > p {
  max-width: 500px;
  margin: 0 0 6px;
  color: var(--loc-muted) !important;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.75;
}
.dental-location-stage {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(23,98,142,.15);
  border-radius: 34px;
  background: #dce9ef;
  box-shadow: 0 34px 110px rgba(13,49,72,.18);
  isolation: isolate;
}
.dental-location-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 42%, rgba(7,29,42,.10) 67%, rgba(7,29,42,.32) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24% 78%, rgba(13,49,72,.14));
}
.dental-map-panel { position: absolute; inset: 0; overflow: hidden; background: #dce9ef; }
.dental-map-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.82) contrast(.98) brightness(1.03);
  transform: scale(1.012);
  transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.dental-location-stage:hover .dental-map-panel iframe {
  filter: saturate(.96) contrast(1) brightness(1.02);
  transform: scale(1.025);
}
.dental-map-open {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(23,98,142,.15);
  border-radius: 999px;
  color: var(--loc-blue-deep);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(13,49,72,.14);
  backdrop-filter: blur(15px) saturate(145%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.dental-map-open:hover,
.dental-map-open:focus-visible {
  transform: translateY(-3px);
  color: white;
  background: var(--loc-blue);
  box-shadow: 0 18px 46px rgba(23,98,142,.26);
  outline: none;
}
.dental-route-art { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .8s ease .35s; }
.dental-route-art svg { width: 100%; height: 100%; overflow: visible; }
.dental-route-art #location-flight-path { animation: dentalRouteDashV55 3.8s linear infinite; }
.dental-destination-pin > circle:first-child { transform-box: fill-box; transform-origin: center; animation: dentalPinPulseV55 2.5s ease-out infinite; }
.dental-map-coordinate {
  position: absolute;
  z-index: 4;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  background: rgba(13,49,72,.5);
  box-shadow: 0 12px 32px rgba(13,49,72,.16);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.dental-map-coordinate-one { left: 8%; bottom: 12%; }
.dental-map-coordinate-two { left: 25%; bottom: 7%; }
.dental-location-card {
  position: absolute;
  z-index: 8;
  top: 34px;
  right: 34px;
  bottom: 34px;
  display: flex;
  width: min(430px, 39%);
  padding: clamp(32px, 4vw, 54px);
  flex-direction: column;
  border: 1px solid rgba(99,211,223,.72);
  border-radius: 28px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 32px 100px rgba(13,49,72,.25);
  backdrop-filter: blur(22px) saturate(135%);
  transform: none;
  opacity: 1;
}
.dental-location-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(23,98,142,.07);
  border-radius: 20px;
  pointer-events: none;
}
.dental-location-card::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -85%;
  width: 72%;
  height: 190%;
  pointer-events: none;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  opacity: .22;
  animation: dentalCardSweepV55 8s ease-in-out infinite 2.5s;
}
.dental-location-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dental-location-card-top span {
  color: var(--loc-blue);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dental-location-card-top i { position: relative; width: 46px; height: 1px; background: rgba(23,98,142,.3); }
.dental-location-card-top i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--loc-sky);
  box-shadow: 0 0 0 7px rgba(99,211,223,.13);
}
.dental-location-kicker {
  margin: clamp(44px, 6vh, 72px) 0 0 !important;
  color: var(--loc-blue) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dental-location-card h3 {
  margin: 10px 0 0;
  color: var(--loc-ink);
  font-size: clamp(38px, 3.5vw, 58px);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .98;
}
.dental-location-details { display: grid; gap: 0; margin: clamp(34px, 5vh, 50px) 0 0; padding: 0; list-style: none; }
.dental-location-details li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
  padding: 17px 0;
  border-top: 1px solid rgba(23,98,142,.12);
}
.dental-location-details li:last-child { border-bottom: 1px solid rgba(23,98,142,.12); }
.dental-location-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, var(--loc-blue), var(--loc-blue-deep));
  box-shadow: 0 10px 24px rgba(23,98,142,.18);
  font-size: 15px;
  font-style: normal;
}
.dental-location-details strong {
  display: block;
  margin-bottom: 5px;
  color: var(--loc-blue-deep);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dental-location-details p,
.dental-location-details a {
  margin: 0 !important;
  color: #4f5f68 !important;
  font-size: 13px;
  line-height: 1.65;
}
.dental-location-details a:hover { color: var(--loc-blue) !important; }
.dental-location-actions { display: grid; gap: 15px; margin-top: auto; padding-top: 28px; }
.dental-location-primary {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 999px;
  color: white !important;
  background: linear-gradient(115deg, var(--loc-blue), var(--loc-blue-deep));
  box-shadow: 0 18px 44px rgba(23,98,142,.24);
}
.dental-location-primary span { transition: transform .3s ease; }
.dental-location-primary:hover span { transform: translate(4px,-4px); }
.dental-location-whatsapp {
  justify-self: center;
  color: var(--loc-blue-deep);
  border-bottom: 1px solid rgba(23,98,142,.28);
  font-size: 11px;
  font-weight: 650;
}
.dental-location-whatsapp:hover { color: var(--loc-blue); }
.dental-location-contact-strip {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(5, minmax(145px, .75fr));
  gap: 12px;
  margin-top: 18px;
}
.dental-location-contact-intro,
.dental-location-contact-card {
  min-height: 104px;
  border: 1px solid rgba(23,98,142,.11);
  border-radius: 22px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 15px 42px rgba(13,49,72,.07);
  backdrop-filter: blur(14px);
}
.dental-location-contact-intro { display: flex; padding: 22px 25px; flex-direction: column; justify-content: center; }
.dental-location-contact-intro span {
  color: var(--loc-blue);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dental-location-contact-intro strong {
  max-width: 250px;
  margin-top: 7px;
  color: var(--loc-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}
.dental-location-contact-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  overflow: hidden;
  padding: 18px;
  color: var(--loc-ink);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.dental-location-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 25%, rgba(99,211,223,.2), transparent 75%);
  transition: transform .65s ease, opacity .35s ease;
}
.dental-location-contact-card:hover,
.dental-location-contact-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(23,98,142,.28);
  background: rgba(255,255,255,.95);
  box-shadow: 0 22px 58px rgba(13,49,72,.13);
  outline: none;
}
.dental-location-contact-card:hover::before,
.dental-location-contact-card:focus-visible::before { opacity: 1; transform: translateX(120%); }
.dental-contact-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: white;
  background: var(--loc-blue);
  font-size: 12px;
  font-weight: 800;
}
.dental-location-contact-card small { display: block; color: #73808a; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dental-location-contact-card strong { display: block; margin-top: 5px; color: var(--loc-ink); font-size: 11px; font-weight: 650; line-height: 1.2; }
.dental-location-contact-card > i { color: var(--loc-blue); font-size: 13px; font-style: normal; transition: transform .3s ease; }
.dental-location-contact-card:hover > i { transform: translate(3px,-3px); }
.dental-location-contact-card.is-pending { cursor: default; opacity: .62; }
.dental-location-contact-card.is-pending .dental-contact-symbol { background: #8a959b; }
.dental-location-contact-card.is-pending:hover { transform: none; box-shadow: 0 15px 42px rgba(13,49,72,.07); }
.dental-location-stage.is-location-visible .dental-route-art { opacity: 1; }
.dental-location-stage.is-location-visible .dental-location-card { animation: dentalLocationCardInV55 .9s cubic-bezier(.16,1,.3,1) .2s forwards; }
.dental-location-stage.is-location-visible .dental-map-panel iframe { animation: dentalMapAwakeV55 1.3s cubic-bezier(.16,1,.3,1) both; }
@keyframes dentalLocationCardInV55 { from { opacity: 0; transform: translate3d(24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes dentalMapAwakeV55 { from { opacity: .55; filter: saturate(.3) blur(6px); transform: scale(1.06); } to { opacity: 1; filter: saturate(.82) contrast(.98) brightness(1.03); transform: scale(1.012); } }
@keyframes dentalRouteDashV55 { to { stroke-dashoffset: -66; } }
@keyframes dentalPinPulseV55 { 0% { transform: scale(.65); opacity: .8; } 72%,100% { transform: scale(1.65); opacity: 0; } }
@keyframes dentalCardSweepV55 { 0%,22% { left: -85%; } 45%,100% { left: 125%; } }
@media (max-width: 1180px) {
  .dental-location-stage { min-height: 720px; }
  .dental-location-card { width: min(410px, 43%); }
  .dental-location-contact-strip { grid-template-columns: repeat(3, 1fr); }
  .dental-location-contact-intro { grid-column: span 3; min-height: 86px; }
}
@media (max-width: 900px) {
  .dental-location-heading-grid { grid-template-columns: 1fr; gap: 24px; }
  .dental-location-heading-grid > p { max-width: 680px; }
  .dental-location-stage {
    display: grid;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .dental-location-stage::before { display: none; }
  .dental-map-panel {
    position: relative;
    min-height: 510px;
    overflow: hidden;
    border: 1px solid rgba(23,98,142,.14);
    border-radius: 28px;
    box-shadow: 0 26px 80px rgba(13,49,72,.16);
  }
  .dental-location-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 9;
    width: calc(100% - 34px);
    min-height: 0;
    margin: -72px auto 0;
    padding: 38px;
  }
  .dental-location-kicker { margin-top: 38px !important; }
  .dental-location-actions { margin-top: 28px; }
  .dental-route-art { inset: 0 0 auto; height: 510px; }
}
@media (max-width: 680px) {
  .dental-location-v55 { padding-block: 78px; }
  .dental-location-heading h2 { font-size: clamp(43px, 13vw, 61px); }
  .dental-map-panel { min-height: 430px; border-radius: 22px; }
  .dental-map-open { top: 15px; left: 15px; min-height: 43px; padding-inline: 15px; }
  .dental-route-art { height: 430px; }
  .dental-map-coordinate { display: none; }
  .dental-location-card { width: calc(100% - 18px); margin-top: -48px; padding: 30px 24px; border-radius: 22px; }
  .dental-location-card h3 { font-size: 42px; }
  .dental-location-kicker { margin-top: 32px !important; }
  .dental-location-contact-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dental-location-contact-intro { grid-column: span 2; }
  .dental-location-contact-card { min-height: 92px; grid-template-columns: 32px 1fr; padding: 15px; }
  .dental-location-contact-card > i { display: none; }
}
@media (max-width: 430px) {
  .dental-location-contact-strip { grid-template-columns: 1fr; }
  .dental-location-contact-intro { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dental-location-v55 *,
  .dental-location-v55 *::before,
  .dental-location-v55 *::after { animation: none !important; transition-duration: .01ms !important; }
  .dental-route-art { display: none; }
  .dental-location-card { opacity: 1; transform: none; }
}
