/* ==========================================================================
   Autor de la plataforma: Dr. Mauricio Rodríguez Herrera · Director de Desarrollo Tecnológico
   Páginas por experiencia e índices (/experiencias/, /en/experiences/, …).
   Generadas por tools/build-pages.js. Usan los colores y botones de styles.css.
   ========================================================================== */
.xp { background: var(--bg); }
.xp main { padding-bottom: 3rem; }
.xp h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin: .4rem 0 .6rem; }
.xp h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin: 0 0 .8rem; }

/* encabezado */
.xp-top { position: sticky; top: 0; z-index: 50; background: var(--bg-elev); border-bottom: 1px solid var(--border-soft); }
.xp-top__in { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.xp-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.xp-brand img { height: 40px; width: auto; }
.xp-nav { display: flex; gap: .2rem; margin-left: auto; }
.xp-nav a { padding: .45rem .7rem; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; color: var(--text-soft); text-decoration: none; }
.xp-nav a:hover { color: var(--brand); background: var(--bg-soft); }
.xp-langs { display: flex; gap: .15rem; font-size: .78rem; font-weight: 700; }
.xp-langs a, .xp-langs span { padding: .3rem .45rem; border-radius: 8px; text-decoration: none; color: var(--text-soft); }
.xp-langs span { background: var(--brand); color: var(--on-brand, #fff); }
.xp-langs a:hover { background: var(--bg-soft); color: var(--brand); }
@media (max-width: 700px) { .xp-hide-sm { display: none; } .xp-brand span { display: none; } .xp-nav { margin-left: 0; } .xp-top__in { justify-content: space-between; } }
/* 6 banderas en celulares pequeños: más compactas y el logo nunca se encoge */
.xp-brand { flex-shrink: 0; }
@media (max-width: 480px) {
  .xp-brand img { height: 34px; }
  .xp-nav a { padding: .4rem .5rem; font-size: .88rem; }
  .xp-langs { gap: 0; }
  .xp-langs a, .xp-langs span { padding: .25rem .2rem; }
  .xp-langs .flag-i { width: 20px; height: 14px; }
}
@media (max-width: 350px) {
  .xp-langs a, .xp-langs span { padding: .2rem .12rem; }
  .xp-langs .flag-i { width: 18px; height: 12px; }
}

.xp-crumbs { font-size: .85rem; color: var(--text-muted, var(--text-soft)); margin: 1rem 0 .8rem; }
.xp-crumbs a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }

/* cabecera de la experiencia */
.xp-hero { display: grid; gap: clamp(1rem, 3vw, 2.2rem); align-items: start; }
@media (min-width: 900px) { .xp-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.xp-hero__media { border-radius: var(--r-xl, 22px); overflow: hidden; background: var(--bg-soft); box-shadow: var(--shadow-md); }
.xp-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.xp-hero__media--empty { aspect-ratio: 3 / 2; display: grid; place-items: center; font-size: 4rem; background: linear-gradient(135deg, var(--olive-500, #6b7f4e), var(--forest-800, #272e19)); }
.xp-cat { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, #a8521a); background: var(--accent-soft, #fff1e3); border-radius: var(--r-pill); padding: .3rem .75rem; }
.xp-lead { font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem); color: var(--text-soft); line-height: 1.6; margin: 0 0 1rem; max-width: 65ch; }
.xp-facts { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.xp-facts li { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border-radius: var(--r-md, 14px); background: var(--card); border: 1px solid var(--border-soft); }
.xp-facts svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.xp-facts b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, var(--text-soft)); }
.xp-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.xp-actions .btn svg { width: 20px; height: 20px; }
.xp-note { font-size: .9rem; color: var(--text-soft); margin: .9rem 0 0; }

/* contenido */
.xp-sec { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.xp-gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.xp-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md, 14px); }
.xp-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.xp-cols .xp-sec { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.xp-box { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; }
.xp-box h2 { font-size: 1.15rem; }
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.xp-list li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.45; }
.xp-list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: var(--brand); }
.xp-list--plain li { display: block; }
.xp-map { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.4rem 0 0; color: var(--text-soft); }
.xp-map svg { width: 20px; height: 20px; color: var(--brand); }
.xp-map a { font-weight: 600; color: var(--brand); }

.xp-cta { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.3rem, 4vw, 2.2rem); border-radius: var(--r-xl, 22px); background: var(--forest-800, #272e19); color: #fff; }
.xp-cta h2 { color: #fff; margin-bottom: .3rem; }
.xp-cta p { margin: 0; color: #d7e0c9; max-width: 60ch; }
.xp-cta .xp-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

/* tarjetas (relacionadas e índice) */
.xp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.xp-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border-soft); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease, ease), box-shadow .2s; }
.xp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.xp-card__img { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--olive-500, #6b7f4e), var(--forest-800, #272e19)); font-size: 2.4rem; }
.xp-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-card__body { display: grid; gap: .25rem; padding: .9rem 1rem 1.1rem; }
.xp-card__body b { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.2; }
.xp-card__body small { color: var(--brand); font-weight: 600; }
.xp-card__body span { color: var(--text-soft); font-size: .92rem; line-height: 1.45; }

.xp-hubhead { max-width: 900px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.xp-chips a { padding: .4rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.xp-chips a:hover { border-color: var(--brand); color: var(--brand); }
.xp-sec[id] { scroll-margin-top: 80px; }

/* pie */
.xp-foot { margin-top: 3rem; padding: 2rem 0 1.2rem; background: var(--forest-900, #1c2212); color: #d7e0c9; font-size: .92rem; line-height: 1.7; }
.xp-foot a { color: #fff; }
.xp-foot b { color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.xp-foot__in { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.xp-foot__legal { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #aab49b; }

/* página para agencias y guías de viaje */
.xp-feats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.xp-feats .xp-box h3 { display: flex; gap: .5rem; align-items: flex-start; font-size: 1.05rem; margin: 0 0 .45rem; line-height: 1.3; }
.xp-feats .xp-box h3 svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--brand); margin-top: 2px; }
.xp-feats .xp-box p { margin: 0; color: var(--text-soft); line-height: 1.55; font-size: .95rem; }
.xp-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.xp-steps li { counter-increment: st; position: relative; padding: 1.1rem 1.1rem 1.1rem 3.4rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border-soft); display: grid; gap: .3rem; line-height: 1.5; }
.xp-steps li::before { content: counter(st); position: absolute; left: 1rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand, #fff); font-weight: 700; font-size: .95rem; }
.xp-steps span { color: var(--text-soft); font-size: .95rem; }
.xp-more { margin-top: 1rem; }
.xp-faq { display: grid; gap: .6rem; max-width: 860px; }
.xp-faq details { border-radius: var(--r-md, 14px); background: var(--card); border: 1px solid var(--border-soft); padding: .9rem 1.1rem; }
.xp-faq summary { cursor: pointer; font-weight: 650; line-height: 1.4; }
.xp-faq details[open] summary { margin-bottom: .5rem; }
.xp-faq p { margin: 0; color: var(--text-soft); line-height: 1.6; }
.xp-article { max-width: 860px; }
.xp-article > header .xp-note { margin-top: 0; }
.xp-article p { line-height: 1.7; max-width: 72ch; }
.xp-article p + p { margin-top: .8em; }
.xp-figure { margin: 1.2rem 0 0; border-radius: var(--r-xl, 22px); overflow: hidden; background: var(--bg-soft); }
.xp-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.xp-tablewrap { overflow-x: auto; border-radius: var(--r-md, 14px); border: 1px solid var(--border-soft); background: var(--card); }
.xp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.xp-table th, .xp-table td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.xp-table th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); background: var(--bg-soft); }
.xp-table tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .xp-table { font-size: .86rem; } .xp-table th, .xp-table td { white-space: normal; padding: .55rem .5rem; } .xp-table td:nth-child(n+3) { white-space: nowrap; } }
.xp-b2bbox h2 { margin-bottom: .4rem; }
.xp-b2bbox p { margin: 0 0 .9rem; color: var(--text-soft); }