/* ──────────────────────────────────────────────────────────────
   Orbitravels — CSS del esqueleto de plantillas (/inc/)
   Namespace propio .tpl-* para NO colisionar con .nav de styles.css
   (que la home usa con otra estructura) ni con el <style> inline
   de las 48 páginas interiores.
   ────────────────────────────────────────────────────────────── */

.tpl-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 64px; display: flex; align-items: center; padding: 0 20px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.tpl-nav__inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: .75rem;
}
.tpl-nav__logo {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  color: #0B1B33; text-decoration: none; margin-right: auto;
}
.tpl-nav__logo .logo-t { color: #2DD4BF; }

.tpl-nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .88rem; font-weight: 600; color: #475569;
  text-decoration: none; padding: .45rem .6rem; border-radius: 8px;
  transition: background .18s ease, color .18s ease; white-space: nowrap;
}
.tpl-nav__link:hover { background: rgba(0,0,0,.045); color: #0B1B33; }

.tpl-nav__cta {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff; font-weight: 700; font-size: .88rem;
  padding: .6rem 1.05rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(249,115,22,.32);
  transition: transform .18s ease, box-shadow .18s ease; white-space: nowrap;
}
.tpl-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,.42); }

/* Compensa el nav fijo para que el hero no quede debajo */
body.tpl-body { padding-top: 64px; }

@media (max-width: 560px) {
  .tpl-nav__link--hide-sm { display: none; }
  .tpl-nav__logo { font-size: .95rem; }
  .tpl-nav__cta { padding: .55rem .85rem; font-size: .82rem; }
}

/* Botón secundario legible sobre imagen oscura del hero
   (.btn--outline hereda naranja sobre naranja y no se lee) */
.btn--on-dark {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--on-dark:hover { background: rgba(255,255,255,.24); border-color: #fff; color: #fff; }

/* Nota bajo un CTA */
.tpl-note { font-size: .84rem; opacity: .72; margin-top: .85rem; }

/* FAQ del esqueleto — tpl.css carga DESPUÉS de styles.css, así que gana.
   Además sube el tope: styles.css usa max-height:200px y recorta
   respuestas largas como las de esta landing. */
.faq-item.open > .faq-item__answer { max-height: 800px; }

/* ── FAQ del esqueleto: <details> nativo ──────────────────────────
   Se usa <details> en vez del acordeón por JS de styles.css porque
   ese depende de una cascada que aquí no aplicaba. Nativo = siempre
   funciona, es accesible por teclado y no necesita JavaScript.      */
.tpl-faq { border:1px solid rgba(0,0,0,.09); border-radius:14px; overflow:hidden; background:#fff; }
.tpl-faq__item + .tpl-faq__item { border-top:1px solid rgba(0,0,0,.09); }
.tpl-faq__q{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:20px 24px; font-weight:600; font-size:15px; color:#0B1B33;
  transition:color .18s ease;
}
.tpl-faq__q::-webkit-details-marker{ display:none; }
.tpl-faq__q::after{
  content:'+'; flex-shrink:0; font-size:22px; line-height:1; font-weight:400; color:#F97316;
  transition:transform .2s ease;
}
.tpl-faq__item[open] .tpl-faq__q{ color:#F97316; }
.tpl-faq__item[open] .tpl-faq__q::after{ transform:rotate(45deg); }
.tpl-faq__q:hover{ color:#F97316; }
.tpl-faq__a{ padding:0 24px 20px; font-size:14px; line-height:1.8; color:#475569; }

/* Logo: isotipo v3 (marca real) + wordmark en Plus Jakarta Sans.
   Se usa el isotipo y NO el horizontal completo porque su tagline
   ("EL MUNDO A TU ÓRBITA") queda ilegible a la altura del nav. */
.tpl-nav__logo { display: inline-flex; align-items: center; gap: .5rem; }
.tpl-nav__mark { display: block; height: 23px; width: auto; }
@media (max-width: 420px) { .tpl-nav__mark { height: 20px; } }