/* Descubre El Hoyo · V80
   Ajustes globales de legibilidad, navegación, recetas y vistas. */

:root {
  --v80-ink: #13251f;
  --v80-forest: #173f33;
  --v80-forest-deep: #0d2b23;
  --v80-copper: #b45f35;
  --v80-cobalt: #1d4f79;
  --v80-paper: #f7f3ea;
  --v80-line: rgba(19, 37, 31, .16);
}

/* Las cabeceras editoriales llevan velo oscuro: el titular debe ser siempre
   claro, también cuando entra la hoja de estilos de lectura sencilla. */
:is(.page-hero, .section-hero, .article-hero) h1 {
  color: #fff !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .24);
}

main [id] {
  scroll-margin-top: 8.5rem;
}

/* El texto sobre fondos oscuros no debe heredar verdes del artículo. */
.article-card :is(.story-signal, .discovery-card, .landscape-scale-card, .photo-duo figure),
.article-card :is(.story-signal, .discovery-card, .landscape-scale-card, .photo-duo figure)
  :is(h2, h3, h4, p, li, strong, em, small, figcaption) {
  color: #fff !important;
}

.article-card :is(.story-signal, .discovery-card, .landscape-scale-card, .photo-duo figure) a {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, .68);
}

.article-card :is(.story-signal, .discovery-card, .landscape-scale-card, .photo-duo figure)
  .photo-credit {
  color: rgba(255, 255, 255, .82) !important;
}

/* Se elimina el regreso persistente de V79: podía recuperar una visita antigua. */
.v79-return-to-cards {
  display: none !important;
}

.v80-scroll-top {
  position: fixed;
  z-index: 120;
  left: clamp(.75rem, 2vw, 1.35rem);
  bottom: clamp(4.8rem, 9vh, 6rem);
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(13, 43, 35, .94);
  box-shadow: 0 12px 28px rgba(8, 25, 20, .26);
  color: #fff;
  font: 800 1.35rem/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(.7rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.v80-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.v80-scroll-top:hover,
.v80-scroll-top:focus-visible {
  background: #071e18;
  outline: 3px solid rgba(74, 189, 163, .42);
  outline-offset: 3px;
}

/* En la vista de mayores la ruta intermedia cortaba la lectura. */
body.elder-friendly .breadcrumbs,
html[data-adaptive-mode="senior"] .breadcrumbs {
  display: none !important;
}

/* MAGNA 861 y llamadas documentales evidentes. */
.magna-callout,
.heritage-evidence {
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(29, 79, 121, .22);
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, rgba(29, 79, 121, .08), transparent 56%),
    #fbfaf6;
  box-shadow: 0 18px 44px rgba(19, 37, 31, .08);
}

.magna-callout > p:first-child,
.heritage-evidence__kicker {
  margin: 0 0 .45rem;
  color: var(--v80-copper);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.magna-callout h3,
.heritage-evidence h4 {
  margin: 0 0 .65rem;
  color: var(--v80-ink);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.08;
  text-wrap: balance;
}

.magna-callout__link,
.heritage-evidence__link,
.san-isidro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  margin-top: .75rem;
  padding: .82rem 1rem;
  border-radius: .8rem;
  background: var(--v80-cobalt);
  color: #fff !important;
  font-weight: 850;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(29, 79, 121, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.magna-callout__link:hover,
.heritage-evidence__link:hover,
.san-isidro-cta:hover {
  transform: translateY(-2px);
  background: #123c60;
  box-shadow: 0 15px 28px rgba(29, 79, 121, .3);
}

.archive-feature-link[href="/pueblo-san-isidro"] {
  border: 2px solid rgba(180, 95, 53, .42);
  box-shadow: 0 16px 36px rgba(19, 37, 31, .14);
}

.archive-feature-link[href="/pueblo-san-isidro"]::before {
  content: "ABRIR GUÍA";
  display: inline-grid;
  place-items: center;
  align-self: center;
  min-width: 5.7rem;
  min-height: 2.3rem;
  margin-right: .9rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: var(--v80-copper);
  color: #fff;
  font-size: .66rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .09em;
}

/* Fichas de recetas: una preparación por tarjeta, sin fingir una receta única. */
.recipe-intro {
  margin: 1rem 0 1.4rem;
  color: #405149;
  font-size: 1rem;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
  gap: 1rem;
  margin: 1.2rem 0 2.4rem;
}

.recipe-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--v80-line);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(19, 37, 31, .07);
}

.recipe-card__head {
  padding: 1rem 1.05rem .9rem;
  background:
    linear-gradient(135deg, rgba(180, 95, 53, .16), transparent 58%),
    var(--v80-paper);
}

.recipe-card__type {
  display: block;
  margin-bottom: .38rem;
  color: var(--v80-copper);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.recipe-card h4 {
  margin: 0;
  color: var(--v80-ink);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.recipe-card > p {
  margin: .9rem 1.05rem .25rem;
  color: #4b5d54;
  font-size: .94rem;
}

.recipe-card details {
  margin: auto 1.05rem 1rem;
  border-top: 1px solid var(--v80-line);
}

.recipe-card summary {
  padding: .85rem 0 .2rem;
  color: var(--v80-forest);
  font-weight: 850;
  cursor: pointer;
}

.recipe-card dl {
  margin: .65rem 0 0;
}

.recipe-card dt {
  margin-top: .75rem;
  color: var(--v80-ink);
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.recipe-card dd {
  margin: .22rem 0 0;
  color: #405149;
  line-height: 1.55;
}

.recipe-photo {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.recipe-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Herramientas prácticas: sobrias, legibles y con jerarquía de producto. */
.visit-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.visit-actions a {
  position: relative;
  display: grid;
  min-height: 7.4rem;
  align-content: end;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 86% 12%, rgba(78, 196, 170, .3), transparent 35%),
    linear-gradient(145deg, var(--v80-forest), var(--v80-forest-deep));
  color: #fff !important;
  font-size: clamp(.94rem, 1.5vw, 1.08rem);
  font-weight: 800;
  line-height: 1.18;
  text-decoration: none !important;
  box-shadow: 0 14px 30px rgba(13, 43, 35, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.visit-actions a::after {
  content: "↗";
  position: absolute;
  top: .8rem;
  right: .9rem;
  color: rgba(255, 255, 255, .8);
}

.visit-actions a:hover,
.visit-actions a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(13, 43, 35, .28);
}

.visit-actions span {
  position: absolute;
  top: .75rem;
  left: .85rem;
  color: #9fe4d3;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
}

/* Tarjetas de contenido: el texto manda y nunca se recorta. */
.adaptive-page-summary__highlights li,
.story-scrap,
.insight-card,
.discovery-card {
  min-width: 0;
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

.adaptive-page-summary__highlights :is(strong, span),
.story-scrap :is(h2, h3, p),
.insight-card :is(h2, h3, p) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.adaptive-page-summary__highlights strong,
.story-scrap h2,
.story-scrap h3,
.insight-card h3 {
  font-size: clamp(1.08rem, 2.2vw, 1.55rem);
  line-height: 1.08;
  text-wrap: balance;
}

/* La app de bolsillo es una entrada móvil. En una pantalla grande se ofrecen
   páginas completas; las utilidades se convierten en un panel ancho. */
@media (min-width: 768px) {
  .choice-card--mobile,
  [data-mode-choice="mobile"],
  [data-dialog-mode="mobile"] {
    display: none !important;
  }

  body.pocket-home main,
  body.route-app-page main,
  body.tool-frame-page main,
  body.utilities-page main {
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
  }

  body.utilities-page .pocket-grid,
  body.utilities-page .utility-grid,
  body.utilities-page .tools-grid,
  body.utilities-page .menu-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  body.utilities-page .app-shell {
    max-width: 1180px;
    padding: 1.4rem;
  }

  body.utilities-page .app-view {
    min-height: auto;
    border-radius: 1.4rem;
    background: #f8f6f0;
    box-shadow: 0 22px 54px rgba(19, 37, 31, .12);
  }

  body.weather-app-page {
    background:
      radial-gradient(circle at 82% 8%, rgba(29, 79, 121, .13), transparent 28rem),
      #eef2ee;
  }

  body.weather-app-page .weather-shell {
    width: min(1180px, calc(100% - 3rem));
    min-height: auto;
    margin: 2rem auto;
  }

  body.weather-app-page .weather-content:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    gap: 1rem;
  }

  body.weather-app-page :is(.weather-heading, .weather-hours, .weather-source) {
    grid-column: 1 / -1;
  }

  body.weather-app-page .weather-now {
    min-height: 18rem;
  }

  body.weather-app-page .weather-summary {
    align-content: stretch;
  }
}

@media (max-width: 760px) {
  .visit-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visit-actions a {
    min-height: 6.6rem;
  }

  .v80-scroll-top {
    left: .75rem;
    bottom: 5.25rem;
    width: 2.8rem;
    height: 2.8rem;
  }

  .archive-feature-link[href="/pueblo-san-isidro"]::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v80-scroll-top,
  .magna-callout__link,
  .heritage-evidence__link,
  .san-isidro-cta,
  .visit-actions a {
    transition: none;
  }
}