/* Marga Tour — página de cada experiencia (generada por generar-seo.mjs). Usa base.css. */
body { background: var(--crema); color: var(--bordo); }
.oscuro { background: var(--bordo); color: var(--crema); }

.xnav { position: sticky; top: 12px; z-index: 40; width: min(100% - 24px, var(--ancho)); margin: 12px auto 0; background: var(--bordo); color: var(--crema); border-radius: 999px; display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 24px; box-shadow: 0 6px 24px rgba(74, 28, 45, .18); }
.xnav a { text-decoration: none; }
.xnav__marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-titulo); text-transform: uppercase; font-size: 22px; line-height: 1; white-space: nowrap; }
.xnav .iso { width: 28px; }
.xnav nav { margin-left: auto; }
.xnav nav ul { display: flex; gap: 22px; font-weight: 600; font-size: 15px; }
.xnav nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.xnav__idiomas { display: flex; gap: 2px; font-size: 14px; font-weight: 600; }
.xnav__idiomas a { display: block; padding: 8px 7px; opacity: .6; }
.xnav__idiomas a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.xnav .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }

.xp { width: min(100% - 40px, var(--ancho)); margin: 32px auto 0; padding-bottom: 72px; }
.xp__migas ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; opacity: .85; }
.xp__migas li + li::before { content: '›'; margin-right: 6px; }
.xp__migas a { text-underline-offset: 3px; }
.xp__cab { margin: 28px 0 24px; }
.xp__cab .exp__cat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.xp h1 { font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 6.4vw, 88px); line-height: .94; letter-spacing: -.015em; margin: 12px 0 10px; }
.xp__zona { font-size: clamp(18px, 2vw, 22px); }

.xp__galeria { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--borde); scrollbar-color: var(--rosa) transparent; padding-bottom: 8px; }
.xp__galeria img { flex: 0 0 min(88%, 760px); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--borde); scroll-snap-align: start; }

.xp__cuerpo { display: grid; grid-template-columns: 1fr 360px; gap: 48px; margin-top: 40px; align-items: start; }
.xp__intro { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; }
.xp__texto h2 { font-size: 20px; font-weight: 700; margin: 32px 0 10px; }
.xp__texto ul { list-style: disc; padding-left: 22px; }
.xp__texto li + li { margin-top: 6px; }
.xp__texto a { text-underline-offset: 3px; }
.xp .detalle__nota { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--oliva); color: var(--carbon); font-weight: 600; }
.xp__caja { position: sticky; top: 96px; background: var(--blanco); border-radius: var(--borde); padding: 28px; display: grid; gap: 18px; box-shadow: 0 6px 24px rgba(74, 28, 45, .08); }
.xp__precio { font-size: 16px; }
.xp__precio b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 44px; line-height: 1.05; }
.xp__datos { display: grid; gap: 10px; font-size: 15px; }
.xp__datos li { padding-left: 18px; position: relative; }
.xp__datos li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); }
.xp__caja .btn { width: 100%; }
.xp__nota { font-size: 13px; opacity: .8; }

.xp__otras { margin-top: 72px; }
.xp__otras h2, .xp__sobre h2 { font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 52px); line-height: .96; margin-bottom: 24px; }
.xp__otras ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.xp__otras a { display: grid; background: var(--blanco); border-radius: var(--borde); overflow: hidden; text-decoration: none; height: 100%; transition: transform .2s ease; }
.xp__otras a:hover { transform: translateY(-3px); }
.xp__otras img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.xp__otras span { padding: 14px 16px 18px; font-size: 14px; }
.xp__otras b { display: block; font-size: 17px; margin-bottom: 4px; }
.xp__sobre { margin-top: 72px; max-width: 46em; }
.xp__sobre p { font-size: 18px; }
.pie .logo { color: var(--rosa); }

@media (max-width: 900px) {
  .xnav nav { display: none; }
  .xnav__idiomas { margin-left: auto; }
  .xp__cuerpo { grid-template-columns: 1fr; gap: 32px; }
  .xp__caja { position: static; }
  .xp__otras ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .xnav { top: 8px; margin-top: 8px; width: calc(100% - 16px); padding: 6px 6px 6px 14px; gap: 6px; }
  .xnav__marca { font-size: 18px; gap: 8px; }
  .xnav .iso { width: 22px; }
  .xnav .btn { padding: 10px 14px; }
  .xnav__idiomas a { padding: 8px 4px; }
  .xp { margin-top: 20px; }
  .xp__galeria img { flex-basis: 92%; }
  .xp__caja { padding: 22px; }
  .xp__otras ul { gap: 10px; }
  .xp__otras span { padding: 10px 12px 14px; }
}