/* ============================================================
   RUTAS — Sistema de diseño base
   Tokens, reset y componentes compartidos entre páginas.
   ============================================================ */

:root{
  /* Margen lateral de todas las secciones. Estaba repetido a mano —32 px en
     escritorio, 20 en móvil— en cada regla; con una variable, cambiarlo en un
     sitio lo cambia en todas y dejan de desalinearse entre sí. */
  --gutter: 32px;

  /* --- Superficies oscuras (territorio) --- */
  --basalt:      #12181B;
  --basalt-2:    #171F23;
  --moss:        #1B2529;

  /* --- Superficies claras (ficha técnica) --- */
  --fog:         #F4F5F3;
  --fog-2:       #EBEDEA;
  --paper:       #FFFFFF;

  /* --- Tinta --- */
  --graphite:    #1C1F1E;
  --steel:       #6B7570;
  --steel-2:     #AEB6B1;
  --signal:      #FAFAF7;

  /* --- Acentos --- */
  --glacier:     #8FD8E0;
  --glacier-dim: #4E7C86;
  --ember:       #E8A24D;
  --ember-deep:  #B87B34;

  /* --- Líneas --- */
  --rule:        #D9DEDA;
  --rule-dark:   rgba(233,228,216,0.13);

  /* --- Tipografía --- */
  /* Bricolage Grotesque es variable: los ejes opsz (tamaño óptico) y wdth
     (anchura) permiten que un titular gigante y una etiqueta diminuta tengan
     la misma voz sin parecer la misma letra estirada. */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Inter Tight', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Ritmo --- */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 40px;
  --sp-5: 64px;  --sp-6: 96px;  --sp-7: 140px;

  --hdr-h: 57px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--fog);
  color:var(--graphite);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--ember); color:var(--basalt); }

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Utilidades tipográficas ---------- */
.tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.07em;
  text-transform:uppercase;
}
.tag--glacier{ color:var(--glacier); }
.tag--ember{ color:var(--ember); }
.tag--steel{ color:var(--steel); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--glacier);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:''; width:18px; height:1px; background:currentColor; flex-shrink:0;
}
.eyebrow--dark{ color:var(--ember-deep); }

/* El margen lateral vive AQUÍ y no en cada sección. Sin él, en móvil el texto
   llega al borde de la pantalla y parece cortado. */
.wrap{ max-width:1480px; margin:0 auto; padding-inline:var(--gutter); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:13px;
  letter-spacing:0.04em; text-transform:uppercase;
  padding:14px 26px; border:1px solid transparent;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.btn .ar{ transition:transform .28s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

.btn--ember{ background:var(--ember); color:var(--basalt); }
.btn--ember:hover{ background:var(--signal); }

.btn--ghost{ border-color:rgba(250,250,247,0.32); color:var(--signal); }
.btn--ghost:hover{ border-color:var(--signal); background:rgba(250,250,247,0.07); }

.btn--ink{ border-color:var(--graphite); color:var(--graphite); }
.btn--ink:hover{ background:var(--graphite); color:var(--fog); }

/* ---------- Cabecera ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:rgba(18,24,27,0.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-dark);
}
/* El logo es una imagen. La palabra usa currentColor, así que hereda el color
   del enlace y funciona igual sobre fondo claro u oscuro. */
.hdr__logo{ display:inline-flex; align-items:center; color:var(--signal); }
.hdr__logo img{ height:30px; width:auto; display:block; }
.hdr__logo:focus-visible{ outline:2px solid var(--ember); outline-offset:4px; border-radius:3px; }
@media (max-width:600px){ .hdr__logo img{ height:26px; } }
.hdr__nav{ display:flex; gap:30px; }
.hdr__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(250,250,247,0.6);
  transition:color .25s; padding:4px 0; position:relative;
}
.hdr__nav a:hover{ color:var(--signal); }
.hdr__nav a[aria-current="page"]{ color:var(--glacier); }
.hdr__cta{
  font-weight:600; font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--ember); color:var(--basalt); padding:10px 20px;
  transition:background .28s;
}
.hdr__cta:hover{ background:var(--signal); }

/* El corte de la cabecera es 900 px, el mismo que el del menú desplegable.
   Estaba en 920 y repetía el margen a mano: dos valores para lo mismo acaban
   divergiendo, y aquí además dejaban una franja de 20 px donde el botón ya
   había aparecido pero la cabecera seguía con el espaciado de escritorio. */
@media (max-width: 900px){
  .hdr{ padding:14px var(--gutter); }
}

/* ---------- Pie ---------- */
.foot{
  background:var(--basalt); color:var(--signal);
  border-top:1px solid var(--rule-dark);
  padding:var(--sp-6) 32px var(--sp-4);
}
/* --- Franja superior: marca y redes --------------------------------------- */
.foot__top{
  display:flex; flex-wrap:wrap; gap:var(--sp-4);
  align-items:flex-start; justify-content:space-between;
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--rule-dark);
}
.foot__brand{ max-width:26rem; }
.foot__logo{ height:34px; width:auto; display:block; color:var(--signal); }
.foot__intro{ margin:14px 0 0; font-size:14px; line-height:1.6; color:rgba(250,250,247,.6); }

.foot__social{ display:flex; gap:10px; flex-wrap:wrap; }
.foot__soc{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--rule-dark); border-radius:3px;
  color:rgba(250,250,247,.7);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.foot__soc:hover{ color:var(--basalt); background:var(--ember); border-color:var(--ember); }
.foot__soc:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

/* --- Columnas -------------------------------------------------------------
   auto-fit en lugar de un número fijo: las columnas dependen de cuántos
   territorios haya publicados, y fijarlas dejaría filas a medias. */
.foot__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:var(--sp-5); padding:var(--sp-5) 0;
  border-bottom:1px solid var(--rule-dark); margin-bottom:var(--sp-3);
}
.foot__grid h4{
  font-family:var(--mono); font-size:10px; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--glacier);
  margin-bottom:var(--sp-3); font-weight:400;
}
.foot__grid ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.foot__grid ul a{ font-size:14px; color:rgba(250,250,247,0.62); transition:color .22s; }
.foot__grid ul a:hover{ color:var(--signal); }
.foot__intro{
  font-size:13px; line-height:1.7; color:rgba(250,250,247,0.5);
  max-width:280px; margin-top:14px;
}
.foot__urgent{ margin-top:10px; }
.foot__urgent a{ color:var(--ember); font-family:var(--mono); font-size:13px; }
.foot__urgent span{
  display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,250,247,.4); margin-top:2px;
}
.foot__lic{ font-family:var(--mono); font-size:11px; }

.foot__bottom{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em;
  color:rgba(250,250,247,0.38); flex-wrap:wrap; gap:12px;
}
@media (max-width:820px){
  .foot{ padding:var(--sp-5) 20px var(--sp-4); }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:var(--sp-4); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   PORTAL PRIVADO DEL VIAJERO
   Se lee sobre todo en el móvil, y a veces con mala cobertura en destino: por
   eso una columna, tipografía grande y nada que dependa de JavaScript.
   ========================================================================== */

.portal { padding: 48px 0 80px; background: var(--bone, #F6F7F5); }
.portal__block {
  background: #fff; border: 1px solid var(--rule, #E1E6E1);
  padding: 24px; margin-bottom: 16px; border-radius: 3px;
}
.portal__h { font-size: 18px; margin: 0 0 16px; letter-spacing: -.01em; }
.portal__note { font-size: 13px; color: var(--steel, #5A635E); margin-top: 12px; }
.portal__safe { font-size: 12px; color: var(--steel, #5A635E); margin-top: 8px; }
.portal__urgent { font-weight: 600; }
.portal__pay { margin-top: 16px; }

/* --- Lista de comprobación ------------------------------------------------ */
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check__item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.check__mark {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff;
}
.check__item--ok   .check__mark { background: #37634A; }
.check__item--todo .check__mark { background: #B0552C; }
.check__item--info .check__mark { background: #9AA39E; }
.check__note { display: block; font-size: 13px; color: var(--steel, #5A635E); margin-top: 2px; }

/* --- Pagos ---------------------------------------------------------------- */
.paysum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule, #E1E6E1);
}
.paysum dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel, #5A635E); }
.paysum dd { margin: 4px 0 0; font-family: var(--mono, monospace); font-size: 18px; font-weight: 600; }
.paysum__due { color: #B0552C; }

.paytable { width: 100%; border-collapse: collapse; font-size: 14px; }
.paytable th, .paytable td { padding: 8px 0; border-bottom: 1px solid var(--rule, #E1E6E1); text-align: left; }
.paytable th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel, #5A635E); }
.paytable .num { text-align: right; font-family: var(--mono, monospace); }

/* --- Viajeros y documentos ------------------------------------------------ */
.travs, .docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.travs__item { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
               padding-bottom: 10px; border-bottom: 1px solid var(--rule, #E1E6E1); }
.travs__ok   { font-size: 12px; color: #37634A; }
.travs__todo { font-size: 12px; color: #B0552C; }
.docs__meta  { font-size: 12px; color: var(--steel, #5A635E); }

/* --- Itinerario ----------------------------------------------------------- */
.itindays { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.itindays__d { padding-left: 16px; border-left: 2px solid var(--rule, #E1E6E1); }
.itindays__n { display: block; font-family: var(--mono, monospace); font-size: 11px;
               letter-spacing: .1em; text-transform: uppercase; color: var(--steel, #5A635E); }
.itindays__d p { margin: 6px 0; font-size: 14px; line-height: 1.6; }
.itindays__meta { font-family: var(--mono, monospace); font-size: 12px; color: var(--steel, #5A635E); }

@media (max-width: 600px) {
  .paysum { grid-template-columns: 1fr; gap: 8px; }
  .paysum div { display: flex; justify-content: space-between; align-items: baseline; }
  .paysum dd { margin: 0; }
}

/* Impresión: el viajero lo lleva en papel a destino, donde puede no haber datos. */
@media print {
  .portal { background: #fff; padding: 0; }
  .portal__block { border: 0; border-bottom: 1px solid #ccc; padding: 12px 0; }
  .portal__pay, .portal__safe { display: none; }
  .itindays__d { break-inside: avoid; }
}


/* ==========================================================================
   TIPOGRAFÍA · ajustes de la nueva familia
   --------------------------------------------------------------------------
   Bricolage Grotesque es variable. Se aprovechan sus ejes en lugar de usar
   pesos sueltos: un titular a 64 px con opsz alto tiene el contraste correcto,
   y la misma fuente a 12 px con opsz bajo se mantiene legible.
   ========================================================================== */

h1, h2, h3, .display, .hero__title {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  /* El eje óptico sigue al tamaño: es lo que evita que un título grande se vea
     blando y uno pequeño, apretado. */
  font-variation-settings: 'opsz' 64, 'wdth' 100;
  text-wrap: balance;
}

h1, .hero__title { font-weight: 800; font-variation-settings: 'opsz' 96, 'wdth' 92; }
h3 { font-weight: 600; font-variation-settings: 'opsz' 24, 'wdth' 100; letter-spacing: -0.02em; }

.eyebrow, .label, .kicker {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 12, 'wdth' 88;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body { font-family: var(--body); letter-spacing: -0.005em; }

/* Cifras: JetBrains Mono tiene números de ancho fijo, así que altitudes,
   kilómetros y precios se alinean en columna. */
.num, .mono, table td.num, .stat__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* La cursiva de acento cambia: Bricolage no tiene itálica real, y una falsa
   inclinada se ve mal. Se sustituye por una variación de anchura, que es un
   recurso propio de la familia. */
em.accent, .accent {
  font-style: normal;
  font-variation-settings: 'opsz' 96, 'wdth' 75;
  color: var(--glacier, #8FD8E0);
}

/* ==========================================================================
   UTILIDADES DE LA WEB
   Sustituyen a los style= de las plantillas. Una CSP estricta bloquea el
   atributo style, y el mismo valor escrito a mano en veinte sitios acaba
   divergiendo.
   ========================================================================== */
.fill-abs { position:absolute; inset:0; }
.op-45 { opacity:.45; }
.op-50 { opacity:.5; }
.measure-md { max-width:820px; }
.t-16 { font-size:16px; }
.t-19 { font-size:19px; }
.mt-30 { margin-top:30px; }
.mt-34 { margin-top:34px; }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-5 { grid-template-columns:repeat(5,1fr); }
.is-graphite { color:var(--graphite); }
.is-steel { color:var(--steel); }
.static-row { cursor:default; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.ratio-43 { aspect-ratio:4/3; }
.page-center {
  min-height:70vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
/* Fondos dinámicos: llegan en data-bg y los aplica el script. */
.rel { position:relative; }
.fxgrid-web { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fxcard-web { background:var(--fog); padding:0 0 20px; display:flex; flex-direction:column; }
.pad-head { padding:18px 20px 0; }
.fx-slug { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.fx-name { font-family:var(--display); font-weight:500; font-size:20px; margin:6px 0 8px; }
.fx-desc { font-size:13.5px; line-height:1.65; color:var(--steel); }
.fx-foot { margin-top:auto; padding:14px 20px 0; border-top:1px solid var(--rule); }
@media (max-width:820px){ .fxgrid-web{ grid-template-columns:1fr; } }

@media (max-width: 820px) { :root { --gutter: 20px; } }

/* ==========================================================================
   ADAPTACIÓN A TABLETA Y MÓVIL
   --------------------------------------------------------------------------
   El diseño de escritorio no se toca: todo lo de aquí vive dentro de consultas
   de medios. Dos cortes reales, no una escalera de siete:
     · 900 px — la tableta pierde las dos columnas
     · 600 px — el móvil pierde también las rejillas de datos
   ========================================================================== */

/* --- Barra de demostración y avisos, sin estilos en línea ----------------- */
.demobar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px; text-align: center;
  background: var(--ember); color: var(--basalt);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
}
body:has(.demobar) .hdr { top: 29px; }

.flashes {
  position: fixed; top: 70px; right: 20px; z-index: 150;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 40px));
}
.flash {
  padding: 13px 16px; font-size: 13px; color: #FAFAF7;
  background: #1B2529; border: 1px solid rgba(233,228,216,.16);
}
.flash--ok { background: #1F3D33; }
.flash--error { background: #B94E33; }

/* --- Menú de la cabecera --------------------------------------------------
   El botón nace oculto y lo revela el script: sin JavaScript la navegación se
   muestra tal cual y el sitio sigue siendo navegable. */
.hdr__burger {
  display: none; position: relative;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid rgba(250,250,247,.2); border-radius: 3px;
  color: var(--signal); cursor: pointer;
}
.hdr__burger-l,
.hdr__burger-l::before,
.hdr__burger-l::after {
  position: absolute; left: 50%; width: 18px; height: 1.5px;
  background: currentColor; transform: translateX(-50%);
  transition: transform .25s var(--ease), opacity .18s linear;
}
.hdr__burger-l { top: 50%; margin-top: -.75px; }
.hdr__burger-l::before { content: ''; top: -6px; }
.hdr__burger-l::after  { content: ''; top:  6px; }

.hdr__burger[aria-expanded="true"] .hdr__burger-l { transform: translateX(-50%) rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__burger-l::before { opacity: 0; }
.hdr__burger[aria-expanded="true"] .hdr__burger-l::after { top: 0; transform: rotate(-90deg); }
.hdr__burger:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.hdr__navcta { display: none; }

@media (max-width: 900px) {
  .hdr { padding: 12px var(--gutter); }
  .hdr__burger { display: grid; place-items: center; }
  .hdr__cta { display: none; }

  /* El panel cuelga de la cabecera y ocupa el ancho completo: en un móvil, una
     diana de 44 px por enlace se acierta con el pulgar sin mirar. */
  .hdr__nav {
    position: fixed; top: 66px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(18,24,27,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-dark);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease),
                visibility 0s linear .22s;
    max-height: calc(100dvh - 66px); overflow-y: auto;
  }
  .hdr__nav.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  .hdr__nav a {
    padding: 14px 0; font-size: 13px;
    border-bottom: 1px solid rgba(250,250,247,.08);
  }
  .hdr__navcta {
    display: block; margin-top: 16px; padding: 15px 0 !important;
    text-align: center; border: 0 !important;
    background: var(--ember); color: var(--basalt) !important;
    font-weight: 600; letter-spacing: .05em;
  }
  body.nav-abierto { overflow: hidden; }
}

@media (min-width: 901px) {
  /* En escritorio el panel no existe: la navegación es la de siempre. */
  .hdr__nav { position: static; }
}

/* ==========================================================================
   PORTAL · botón de pago y preparativos
   ========================================================================== */

/* El botón de pagar es la acción más importante de la página: tiene que
   distinguirse del resto sin gritar. Importe visible antes de pulsar, para que
   nadie llegue a Stripe sin saber cuánto va a pagar. */
.paybtn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 26rem; padding: 16px 20px;
  border: 0; border-radius: 3px; cursor: pointer;
  background: var(--ember); color: var(--basalt);
  font-family: var(--body); text-align: left;
  box-shadow: 0 1px 0 rgba(20,24,26,.12);
  transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease, box-shadow .18s ease;
}
.paybtn:hover {
  background: #F0B466; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,162,77,.28);
}
.paybtn:active { transform: translateY(0); }
.paybtn:focus-visible { outline: 3px solid var(--glacier); outline-offset: 3px; }

.paybtn__icon { display: grid; place-items: center; flex: none; opacity: .85; }
.paybtn__txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.paybtn__lbl { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.paybtn__amt { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.paybtn__go { flex: none; font-size: 17px; opacity: .55; transition: transform .18s var(--ease); }
.paybtn:hover .paybtn__go { transform: translateX(3px); opacity: .8; }

.portal__lock { margin-right: 4px; }

/* --- Preparativos ---------------------------------------------------------- */
.check__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.check__own {
  font-family: var(--mono); font-size: 12px; color: var(--steel);
  padding: 3px 0;
}
.check__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.check__sel, .check__in {
  padding: 8px 10px; border: 1px solid var(--rule);
  font-family: var(--body); font-size: 13px; background: #fff; border-radius: 2px;
}
.check__sel { flex: 0 0 auto; }
.check__in { flex: 1 1 12rem; min-width: 0; }
.check__btn {
  padding: 8px 16px; border: 1px solid var(--graphite); background: var(--graphite);
  color: var(--signal); font-size: 12.5px; border-radius: 2px; cursor: pointer;
}
.check__btn:hover { background: var(--basalt); }

/* --- Datos de los viajeros -------------------------------------------------- */
.travform { margin-top: 16px; }
.travform > summary {
  cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.travform__f {
  padding: 20px 0; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.travform__n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel); margin: 0;
}
.travform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.travform label, .travform__full { display: flex; flex-direction: column; gap: 5px; }
.travform label > span { font-size: 12px; color: var(--steel); }
.travform input {
  padding: 11px 12px; border: 1px solid var(--rule);
  font-family: var(--body); font-size: 14px; border-radius: 2px; width: 100%;
}
.travform input:focus { outline: none; border-color: var(--graphite); }
.travform label em { font-size: 11px; color: var(--steel); font-style: normal; }
.travform__btn {
  align-self: flex-start; padding: 10px 20px; border: 0; border-radius: 2px;
  background: var(--graphite); color: var(--signal); font-size: 13px; cursor: pointer;
}
.travform__btn:hover { background: var(--basalt); }

@media (max-width: 600px) {
  .travform__row { grid-template-columns: 1fr; }
  .check__form { flex-direction: column; }
  .check__sel, .check__in, .check__btn { width: 100%; }
}

@media (max-width: 700px) {
  /* En vertical la marca y las redes se apilan; los iconos quedan en fila,
     alineados a la izquierda como el resto del contenido. */
  .foot__top { flex-direction: column; gap: var(--sp-4); }
  .foot__logo { height: 28px; }
  .foot__grid { gap: var(--sp-4); }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- Cancelar y pedir devolución -------------------------------------------
   Va en un <details>: es una acción poco frecuente y no debe competir con el
   botón de pagar, pero esconderla del todo solo haría que la cancelación
   llegara por teléfono, sin fecha registrada ni motivo por escrito. */
.cancelbox { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 20px; }
.cancelbox > summary {
  cursor: pointer; padding: 6px 0; font-size: 13px; color: var(--steel);
}
.cancelbox > summary:hover { color: var(--graphite); }
.cancelbox__t { font-size: 14px; line-height: 1.6; margin: 12px 0 16px; max-width: 42rem; }
.cancelbox__f { display: flex; flex-direction: column; gap: 10px; max-width: 34rem; }
.cancelbox__f label { display: flex; flex-direction: column; gap: 5px; }
.cancelbox__f label > span { font-size: 12px; color: var(--steel); }
.cancelbox__f textarea {
  padding: 11px 12px; border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--body); font-size: 14px; resize: vertical; width: 100%;
}
.cancelbox__btn {
  align-self: flex-start; padding: 10px 20px; border-radius: 2px; cursor: pointer;
  background: none; border: 1px solid var(--graphite); color: var(--graphite);
  font-size: 13px;
}
.cancelbox__btn:hover { background: var(--graphite); color: var(--signal); }
.cancelbox__note { margin-top: 12px; font-size: 12px; color: var(--steel); }
.cancelbox__ok {
  margin: 12px 0 0; padding: 12px 16px; font-size: 14px; line-height: 1.6;
  background: #F0F4EF; border-left: 3px solid var(--pine, #3C6E52);
}