/* Descubre El Hoyo · V81
   Navegación coherente, contraste robusto y herramientas adaptativas. */
:root {
  --v81-ink: #071c19;
  --v81-forest: #0a322a;
  --v81-jade: #126653;
  --v81-cobalt: #174e72;
  --v81-copper: #c77545;
  --v81-mist: #eaf1ed;
  --v81-paper: #fffdfa;
}

/* El círculo del menú debe mostrar siempre las dos rayas. */
body.village-alive .menu-toggle .menu-toggle-icon,
.menu-toggle .menu-toggle-icon {
  background: var(--v81-ink) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

body.village-alive .menu-toggle .menu-toggle-icon i,
.menu-toggle .menu-toggle-icon i,
.menu-open .menu-toggle .menu-toggle-icon i,
.menu-toggle:hover .menu-toggle-icon i {
  background: #fff !important;
}

/* Pies de foto: fondo y texto viajan juntos; no puede quedar blanco sobre crema. */
.article-card .photo-duo figure,
.article-card .photo-duo figure figcaption {
  background: #102722 !important;
  color: #fff !important;
}

.article-card .photo-duo figcaption :is(strong, span, a),
.article-card .photo-duo .photo-credit,
.article-card .photo-duo .credit-modifications {
  color: rgba(255, 255, 255, .88) !important;
}

.article-card .photo-duo figcaption a {
  text-decoration-color: rgba(255, 255, 255, .55) !important;
}

.article-card .story-photo-single > figcaption,
.article-card .story-photo-card:not(.archive-story .story-photo-card) > figcaption {
  background: var(--v81-paper) !important;
  color: #17352e !important;
}

.article-card .story-photo-single > figcaption :is(strong, span, a),
.article-card .story-photo-card:not(.archive-story .story-photo-card) > figcaption :is(strong, span, a) {
  color: inherit !important;
}

/* Las tarjetas oscuras conservan texto blanco, también ante reglas heredadas. */
.article-card :is(.discovery-card, .landscape-scale-card, .story-signal, .archive-panel),
.article-card :is(.discovery-card, .landscape-scale-card, .story-signal, .archive-panel) :is(h2, h3, h4, p, strong, span, small, a) {
  color: #fff !important;
}

/* Accesos prácticos: sobrios, con jerarquía y respuesta de producto. */
.visit-actions {
  gap: clamp(.7rem, 1.4vw, 1rem) !important;
  counter-reset: practical;
}

.visit-actions a {
  counter-increment: practical;
  min-height: clamp(8.2rem, 13vw, 10.2rem) !important;
  padding: 1.2rem !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 1.25rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 42%),
    linear-gradient(145deg, #123c34 0%, #071f1b 70%) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(7, 28, 25, .2), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.visit-actions a:nth-child(2) { background: linear-gradient(145deg, #1b5274, #0b2636) !important; }
.visit-actions a:nth-child(3) { background: linear-gradient(145deg, #70442d, #2e1b14) !important; }
.visit-actions a:nth-child(4) { background: linear-gradient(145deg, #325348, #0d2923) !important; }

.visit-actions a::before {
  content: "0" counter(practical);
  position: absolute;
  top: .95rem;
  right: 1rem;
  color: rgba(255, 255, 255, .42);
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
}

.visit-actions a::after {
  top: auto !important;
  right: 1rem !important;
  bottom: 1rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.visit-actions span {
  color: #9de2d1 !important;
  font-size: .68rem !important;
}

.visit-actions a:hover,
.visit-actions a:focus-visible {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 25px 54px rgba(7, 28, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

/* Controles flotantes premium: discretos, reconocibles y con foco claro. */
.v80-scroll-top,
.mobile-utility-launcher,
.round-nav,
.route-round,
.tool-circle {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  background: linear-gradient(145deg, #154f42, #071f1b) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(4, 24, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(16px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.round-nav--web,
.route-round--light,
.tool-circle--light {
  background: linear-gradient(145deg, #fff, #e4ece8) !important;
  color: var(--v81-ink) !important;
  border-color: rgba(7, 28, 25, .15) !important;
}

.v80-scroll-top:hover,
.mobile-utility-launcher:hover,
.round-nav:hover,
.route-round:hover,
.tool-circle:hover,
.v80-scroll-top:focus-visible,
.mobile-utility-launcher:focus-visible,
.round-nav:focus-visible,
.route-round:focus-visible,
.tool-circle:focus-visible {
  transform: translateY(-3px) scale(1.035) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 19px 40px rgba(4, 24, 20, .38), 0 0 0 4px rgba(199, 117, 69, .18) !important;
  outline: 3px solid transparent !important;
}

.v81-nav-chip {
  position: relative;
}

@media (min-width: 700px) {
  .v81-nav-chip[data-v81-label] {
    width: auto !important;
    min-width: 48px;
    padding: 0 14px !important;
    grid-auto-flow: column;
    gap: 8px;
    border-radius: 999px !important;
  }

  .v81-nav-chip[data-v81-label]::after {
    content: attr(data-v81-label);
    font: 800 .68rem/1 system-ui, sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
  }
}

/* Herramientas en formato ancho para tableta y portátil. */
@media (min-width: 768px) {
  .choice-card--mobile,
  [data-mode-choice="mobile"],
  [data-dialog-mode="mobile"] {
    display: flex !important;
  }

  html.pocket-wide body.pocket-home,
  html.pocket-wide body.utilities-page,
  html.pocket-wide body.route-app-page,
  html.pocket-wide body.tool-frame-page {
    background:
      radial-gradient(circle at 84% 8%, rgba(23, 78, 114, .15), transparent 30%),
      linear-gradient(135deg, #e8efeb, #f8f4ec);
  }

  html.pocket-wide .pocket-main {
    width: min(1180px, calc(100% - 48px));
    max-width: none !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
    padding: 2rem 0 3rem;
  }

  html.pocket-wide .pocket-main > :is(.pocket-welcome, .pocket-live-tools, .pocket-contribute) {
    grid-column: 1 / -1;
  }

  html.pocket-wide .pocket-main > section {
    margin: 0 !important;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    border: 1px solid rgba(7, 28, 25, .1);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 18px 45px rgba(7, 28, 25, .08);
  }

  html.pocket-wide .pocket-grid--main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.pocket-wide .pocket-dock { display: none !important; }

  html.pocket-wide .app-shell {
    width: min(1120px, calc(100% - 48px));
    max-width: none;
  }

  html.pocket-wide .menu-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  html.pocket-wide .menu-group {
    margin: 0;
    padding: 1.25rem;
    border: 1px solid rgba(7, 28, 25, .1);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 40px rgba(7, 28, 25, .07);
  }

  html.pocket-wide .route-shell {
    width: min(1120px, calc(100% - 48px));
    max-width: none;
  }

  html.pocket-wide .route-view[data-route-view="detail"].is-active {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 1.1rem;
    align-items: start;
  }

  html.pocket-wide .route-view[data-route-view="detail"] .route-toolbar { grid-column: 1 / -1; }
  html.pocket-wide .route-view[data-route-view="detail"] .route-map { height: min(70vh, 620px); }
  html.pocket-wide .route-view[data-route-view="detail"] .route-summary { margin-top: 0; }
}

/* Una sola navegación móvil, con hueco seguro y sin botones superpuestos. */
@media (max-width: 767px) {
  body:has(.pocket-dock) .mobile-utility-launcher,
  body:has(.adaptive-mobile-bar) .mobile-utility-launcher { display: none !important; }

  .pocket-dock,
  .adaptive-mobile-bar {
    min-height: 68px !important;
    padding: .38rem .4rem calc(.38rem + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(6, 27, 24, .95) !important;
    box-shadow: 0 -14px 40px rgba(5, 25, 22, .22) !important;
    backdrop-filter: blur(18px) saturate(1.2);
  }

  .pocket-dock a,
  .pocket-dock button,
  .adaptive-mobile-bar a,
  .adaptive-mobile-bar button {
    min-height: 52px !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .68rem !important;
  }

  .pocket-dock :is(a, button):hover,
  .pocket-dock :is(a, button):focus-visible,
  .pocket-dock [aria-current="page"],
  .adaptive-mobile-bar :is(a, button):hover,
  .adaptive-mobile-bar :is(a, button):focus-visible {
    background: #126653 !important;
    color: #fff !important;
  }

  .v80-scroll-top {
    right: max(.75rem, env(safe-area-inset-right)) !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* Atracciones nuevas y enlaces documentales. */
.v81-attraction-grid,
.v81-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

.v81-attraction-card,
.v81-source-card {
  overflow: hidden;
  border: 1px solid rgba(7, 28, 25, .12);
  border-radius: 1.35rem;
  background: var(--v81-paper);
  box-shadow: 0 18px 44px rgba(7, 28, 25, .1);
}

.v81-attraction-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.v81-attraction-copy,
.v81-source-card {
  padding: clamp(1rem, 2.4vw, 1.55rem);
}

.v81-attraction-copy > span,
.v81-source-card > span {
  color: var(--v81-copper);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.v81-attraction-copy h2,
.v81-attraction-copy h3,
.v81-source-card strong {
  display: block;
  margin: .35rem 0 .6rem;
  color: var(--v81-ink);
}

.v81-attraction-copy p,
.v81-source-card p { color: #3c554e; line-height: 1.65; }

.v81-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .7rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--v81-ink);
  color: #fff !important;
  font-weight: 850;
  text-decoration: none !important;
}

.v81-corrillo-threads {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.v81-thread {
  scroll-margin-top: 7rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-left: 5px solid var(--v81-copper);
  border-radius: 0 1.2rem 1.2rem 0;
  background: #f7f1e7;
}

.v81-thread h2 { margin-top: 0; color: var(--v81-ink); }
.v81-thread p { max-width: 72ch; }

.phone-group--lodging .action-row { background: linear-gradient(145deg, #f4efe5, #fff); }
.phone-group--lodging .action-row small { white-space: normal; overflow: visible; text-overflow: clip; }
.phone-source-note { color: #5a6b65; font-size: .72rem; line-height: 1.5; }

@media (max-width: 700px) {
  .v81-attraction-grid,
  .v81-resource-grid { grid-template-columns: 1fr; }
  .visit-actions { grid-template-columns: 1fr 1fr !important; }
  .visit-actions a { min-height: 8.4rem !important; }
}

@media (max-width: 420px) {
  .visit-actions { grid-template-columns: 1fr !important; }
  .visit-actions a { min-height: 7.6rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v80-scroll-top,
  .mobile-utility-launcher,
  .round-nav,
  .route-round,
  .tool-circle,
  .visit-actions a { transition: none !important; }
}

/* La vista infantil anuncia seis aventuras y muestra las seis. */
body.kids-version :is(.kids-mission-grid, .adventure-route-grid) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.kids-version :is(.kids-mission-card, .adventure-route) {
  display: flex !important;
  flex-direction: column;
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: visible !important;
}

.v81-adventure-count {
  width: fit-content;
  margin: 1rem 0 0;
  padding: .55rem .8rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: #fff;
  color: #17324d;
  font-weight: 900;
}