/* ============================================
   PÁGINA DESCUBRE
   ============================================
   Estilos de la página de entorno. El contenido
   se genera desde data/descubre.json en
   js/descubre.js
   ============================================ */

/* --- Apilamiento --- */
/* main.css pinta un .content-bg absoluto anclado al fondo del contenedor, con
   z-index 1 y altura fija (760px, y hasta 1460px en móvil). Al ser un elemento
   posicionado, tapa cualquier sección estática que caiga en esa franja. Las
   secciones de esta página se posicionan por encima para no quedar ocultas. */
.hero-pagina,
.desc-stats,
.desc-section,
.desc-food,
.desc-cta {
  position: relative;
  z-index: 2;
}

/* El hero usa .hero-pagina de main.css, común a las páginas interiores. */

/* --- Fila de distancias --- */
.desc-stats {
  background: var(--bg-dark, #161616);
  padding: 2.75rem 0 2.25rem;
}
.desc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.desc-stat {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}
.desc-stat:last-child {
  border-right: none;
}
.desc-stat-num {
  font-family: Nyghtserif, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--link, #d9b99b);
  line-height: 1;
}
.desc-stat-num span {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.desc-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.65rem;
}
.desc-stats-note {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
  margin-top: 1.75rem;
}

/* --- Bloques de sección --- */
.desc-section {
  padding: 5.5rem 0;
  /* Red de seguridad para la banda de filtros a sangre: si su ancho se
     desajusta un instante, el sobrante se recorta en vez de provocar scroll
     horizontal. Se usa "clip" y no "hidden" a propósito: hidden crearía un
     contenedor de scroll y rompería el position:sticky de los filtros. */
  overflow-x: clip;
}
.desc-section.alt {
  background: var(--bg-gray-section, #f2f2f2);
}
.desc-section-head {
  max-width: 42rem;
  margin-bottom: 3rem;
}
.desc-section-title {
  font-family: Nyghtserif, sans-serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  color: var(--font, #1f1f1f);
  margin: 0 0 1rem;
}
.desc-section-text {
  color: var(--font-gray, #747474);
  line-height: 1.75;
  font-size: 1rem;
  margin: 0;
}

/* --- Filtros --- */
/* Al pasar por encima se quedan fijos bajo la barra de navegación, para poder
   cambiar de categoría sin tener que volver arriba.

   La banda sale a sangre de lado a lado: el margen negativo la lleva hasta el
   borde de la ventana y el padding equivalente devuelve las píldoras a su
   sitio, alineadas con la cuadrícula.

   Se usa --ancho-ventana (lo mide js/descubre.js con clientWidth) en lugar de
   100vw porque vw incluye la barra de desplazamiento: con ella en pantalla la
   banda sobresalía unos píxeles por cada lado y aparecía scroll horizontal. */
.desc-filters {
  --sangrado: calc(var(--ancho-ventana, 100vw) / 2 - 50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  position: sticky;
  top: var(--alto-barra, 62px);
  z-index: 5;
  background: var(--bg-body, #efefef);
  margin: 0 calc(var(--sangrado) * -1) 3rem;
  padding: 1rem var(--sangrado) 1.1rem;
  transition: box-shadow 0.25s ease;
}

.desc-filters.is-fijo {
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.3);
}

/* Marca invisible justo encima: cuando sale por arriba, la banda está fija */
.desc-filtros-centinela {
  height: 1px;
  margin-bottom: -1px;
}
.desc-chip {
  border: 1px solid var(--lines, #bbbbb6);
  background: transparent;
  color: var(--font, #1f1f1f);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.15rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease,
    color 0.22s ease;
  white-space: nowrap;
  font-family: inherit;
}
.desc-chip:hover {
  border-color: var(--font, #1f1f1f);
}
.desc-chip.is-active {
  background: var(--bg-dark, #161616);
  border-color: var(--bg-dark, #161616);
  color: #fff;
}
.desc-empty {
  color: var(--font-gray, #747474);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* --- Cuadrícula de fichas --- */
.desc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.desc-card {
  display: flex;
  flex-direction: column;
}
.desc-card[hidden] {
  display: none;
}
.desc-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--light-gray, #e0e0e0);
  margin-bottom: 1.1rem;
}
.desc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.desc-card:hover .desc-card-media img {
  transform: scale(1.05);
}
.desc-card-cat {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--font, #1f1f1f);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}
.desc-card-featured {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: var(--link, #d9b99b);
  color: #2a2015;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}

/* Tarjeta ilustrada: se usa cuando no hay fotografía del lugar.
   Cada categoría tiene su tono, para que la cuadrícula no se vea repetida. */
.desc-card-media.is-drawn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--tono, #2f3a34);
  position: relative;
}
.desc-card-media.is-drawn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 62%
  );
}
.desc-card-media.is-drawn svg {
  position: relative;
  z-index: 1;
  opacity: 0.85;
}
.desc-card-media.is-drawn .desc-drawn-label {
  position: relative;
  z-index: 1;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 1.5rem;
  text-align: center;
  line-height: 1.5;
}
.desc-card-media.is-drawn .desc-card-cat {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.desc-tono-playas {
  --tono: #2b4a52;
}
.desc-tono-pueblos {
  --tono: #5c4436;
}
.desc-tono-naturaleza {
  --tono: #33452f;
}
.desc-tono-interior {
  --tono: #4a4530;
}
.desc-tono-miradores {
  --tono: #3a3a4f;
}
.desc-tono-mercados {
  --tono: #54332b;
}

.desc-card-title {
  font-family: Nyghtserif, sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--font, #1f1f1f);
  margin: 0 0 0.4rem;
}
.desc-card-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--font-gray, #747474);
  margin-bottom: 0.75rem;
}
.desc-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lines, #bbbbb6);
  flex-shrink: 0;
}
.desc-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--font-gray, #747474);
  margin: 0 0 1rem;
}
.desc-card-aviso {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #8a6a45;
  background: rgba(217, 185, 155, 0.16);
  border-left: 2px solid var(--link, #d9b99b);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
}
.desc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.desc-badge {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--lines, #bbbbb6);
  color: var(--font-gray, #747474);
}
.desc-badge.is-warn {
  border-color: var(--link, #d9b99b);
  color: #a87f52;
  background: rgba(217, 185, 155, 0.13);
}
.desc-card-foot {
  margin-top: auto;
}
.desc-card-link {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--font, #1f1f1f);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--lines, #bbbbb6);
  transition: border-color 0.22s ease, gap 0.22s ease;
}
.desc-card-link:hover {
  border-bottom-color: var(--font, #1f1f1f);
  gap: 0.75rem;
}

/* --- Rutas --- */
.desc-route {
  background: var(--white, #fff);
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2.5rem;
  align-items: start;
}
.desc-route-num {
  font-family: Nyghtserif, sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--link, #d9b99b);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.desc-route-name {
  font-family: Nyghtserif, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--font, #1f1f1f);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.desc-route-dur {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--font-gray, #747474);
}
.desc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.desc-step {
  position: relative;
  padding: 0 0 1.4rem 1.85rem;
  border-left: 1px solid var(--lines, #bbbbb6);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--font-gray, #747474);
}
.desc-step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.desc-step::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 0.42rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--link, #d9b99b);
}
.desc-step strong {
  color: var(--font, #1f1f1f);
  font-weight: 600;
}

/* --- Gastronomía --- */
.desc-food {
  background: var(--bg-dark, #161616);
  padding: 5.5rem 0;
}
.desc-food .desc-section-title {
  color: var(--white, #fff);
}
.desc-food .desc-section-text {
  color: rgba(255, 255, 255, 0.6);
}
.desc-food-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}
.desc-food-item {
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  padding-top: 1.4rem;
}
.desc-food-name {
  font-family: Nyghtserif, sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--link, #d9b99b);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.desc-food-text {
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* --- Consejos --- */
/* Columnas fluidas: pasa sola de 3 a 2 y a 1 según el espacio, sin el salto
   brusco que dejaba las tarjetas como bandas de ancho completo. */
.desc-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  align-items: start;
}
/* Son advertencias: fondo cálido y filete de acento para que se distingan
   del resto de bloques de la página. */
.desc-tip {
  background: #f5ebe0;
  border-left: 3px solid #c69a6b;
  padding: 1.75rem;
}
.desc-tip-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b4d30;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
/* Icono siren-rounded-bold-duotone (Solar), incrustado como data-URI para no
   depender de una fuente de iconos ni de red. Va en ::before porque i18n
   reescribe el textContent del título en cada cambio de idioma. */
.desc-tip-title::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c69a6b' opacity='.5' d='M4 16v5.25h16V16a8 8 0 1 0-16 0'/%3E%3Cpath fill='%23c69a6b' d='M12.75 2a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0zm8.78 3.47a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l1.5-1.5a.75.75 0 0 1 1.06 0m-18 0a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06-1.06zm11.042 5.335a.75.75 0 0 0-.563 1.39c.814.33 1.466.981 1.795 1.796a.75.75 0 1 0 1.39-.563a4.76 4.76 0 0 0-2.622-2.623M12.75 18.8a1.5 1.5 0 1 0-1.5 0v2.45h1.5zM4 21.25H2a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(0.18rem);
}
.desc-tip-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #7a6249;
  margin: 0;
}

/* --- CTA --- */
.desc-cta {
  text-align: center;
  padding: 5.5rem 0;
  background: var(--bg-gray-section, #f2f2f2);
}
.desc-cta h3 {
  font-family: Nyghtserif, sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  color: var(--font, #1f1f1f);
  margin: 0 0 0.9rem;
}
.desc-cta p {
  color: var(--font-gray, #747474);
  max-width: 34rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
/* El footer del template se sube con margin-top negativo (de -3rem a -26rem
   según el ancho) para montarse sobre la tarjeta blanca redondeada de
   .content-section. Esta página no usa esa tarjeta, así que el solape solo
   se comía el CTA. Aquí se anula, y el footer vuelve a quedar por encima. */
.desc-cta + .footer {
  margin-top: 0;
  z-index: 3;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .desc-grid,
  .desc-food-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .desc-route {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .desc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .desc-stat:nth-child(2) {
    border-right: none;
  }
  .desc-grid,
  .desc-food-grid {
    grid-template-columns: 1fr;
  }
  .desc-section,
  .desc-food,
  .desc-cta {
    padding: 3.5rem 0;
  }
  .desc-route {
    padding: 1.75rem;
  }
  .desc-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desc-card-media img,
  .desc-card-link {
    transition: none;
  }
  .desc-card:hover .desc-card-media img {
    transform: none;
  }
}