:root{
  --bg: url('../images/fondomapamundi.png') no-repeat center center fixed; 
  --ink: #233244;
  --brand: #1f5f8b;     /* azul boarding pass */
  --brand2:#f2b705;     /* acento “gold” */
  --muted:#233244;
  /*#6b7b8f;*/
  --paper:#f7f5f0;
  --card:#ffffff;
  --ring: rgba(31,95,139,.16);
  --shadow: 0 10px 28px rgba(15,23,42,.06);
  --radius: 18px;
  --max: 1100px;
  scroll-behavior:smooth;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  background: var(--bg);
  background-size: cover;
  line-height: 1.6;
  overflow-x:hidden;
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background: rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 16px;
  display:flex; gap:10px;
  align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  letter-spacing:.2px;
  transition: .18s ease;
}
.nav a:hover, .nav a.active{
  background: #f3f4f6;
  color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

section{padding:84px 16px; position:relative}
.wrap{max-width:var(--max); margin:0 auto}
h2{
  font-family:"Cormorant Garamond", serif;
  color:var(--brand);
  font-weight:700;
  font-size:clamp(28px, 4.5vw, 46px);
  margin:0 0 14px;
  letter-spacing:.2px;
}
.sub{
  color:var(--muted);
  margin:0 0 28px;
  max-width:72ch;
}

/* avión minimal */
.plane{
  position:fixed;
  left:-120px;
  top: 110px;
  width:110px;
  height:60px;
  z-index:60;
  opacity:0.85;
  pointer-events:none;
  filter: drop-shadow(0 8px 16px rgba(15,23,42,.18));
  animation: flyin 1.1s ease-out .15s both;
}
@keyframes flyin{
  0%{transform:translateX(0) translateY(0) rotate(-6deg); opacity:0}
  15%{opacity:.95}
  100%{transform:translateX(calc(100vw + 220px)) translateY(18px) rotate(6deg); opacity:0}
}

/* HERO / BOARDING PASS */
.hero{
  padding-top:70px;
  min-height:82svh;
  display:flex;
  align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}

.boarding{
  position:relative;
  background:#ffffff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.boarding-inner{
  position:relative;
  padding:26px 26px 22px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background: rgba(31,95,139,.04);
  border-radius: 999px;
  color: var(--brand);
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:12px;
}
.hero-title{
  font-family:"Cormorant Garamond", serif;
  font-weight:700;
  font-size:clamp(34px, 5.6vw, 70px);
  line-height:1.08;
  margin:14px 0 10px;
  color: var(--brand);
}
.hero-title .accent{color: var(--brand2)}
.hero-lede{
  margin:0 0 18px;
  color: var(--ink);
  max-width: 62ch;
}

.flight-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width: 560px){
  .flight-grid{grid-template-columns:1fr}
}
.kv{
  background:#f9fafb;
  border-radius: 16px;
  padding:12px 14px;
}
.kv .k{font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color: var(--muted)}
.kv .v{font-weight:800; color: var(--ink); margin-top:4px}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding:14px 18px;
  font-weight:800;
  text-decoration:none;
  border:1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  transition:.18s ease;
  margin-top:18px;
}
.cta:hover{
  background: var(--brand);
  color:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}

.sidecard{
  background: #f9fafb;
  border-radius: 22px;
  padding:22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.countdown{
  display:flex; gap:16px; flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:12px;
}
.count{
  background:#ffffff;
  border-radius: 16px;
  padding:12px 14px;
  min-width: 92px;
  text-align:center;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.count .n{
  font-size: clamp(22px, 4vw, 34px);
  font-weight:900;
  color: var(--brand);
  line-height:1.1;
}
.count .l{
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color: var(--muted);
}

.music{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#fff;
  border-radius:16px;
}
.toggle{
  border:1px solid rgba(31,95,139,.25);
  background: rgba(31,95,139,.04);
  color: var(--brand);
  font-weight:800;
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  transition:.18s ease;
  user-select:none;
  white-space:nowrap;
}
.toggle:hover{box-shadow:0 0 0 4px var(--ring)}
.muted{color:var(--muted)}

/* Cards / bloques */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}
.card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;
}

/* Pasaporte */
.passport-inner{position:relative}
.passport-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding-bottom:14px;
  margin-bottom:14px;
}
.passport-title{
  font-family:"Cormorant Garamond", serif;
  font-weight:700;
  font-size: 30px;
  margin:0;
  color: var(--brand);
}
.stamp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(31,95,139,.35);
  color: var(--brand);
  padding:8px 12px;
  border-radius:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.4px;
  background: rgba(255,255,255,.9);
}
.passport-fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 650px){.passport-fields{grid-template-columns:1fr}}
.field{
  background: #f9fafb;
  border-radius: 14px;
  padding:12px 14px;
}
.field .label{
  font-size:12px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color: var(--muted);
}
.field .value{
  margin-top:4px;
  font-weight:900;
  color: var(--ink);
}

/* Itinerario */
.timeline{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:14px;
  margin-top:10px;
}
.timecard{
  background:#fff;
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.time{
  font-family:"Cormorant Garamond", serif;
  font-size: 28px;
  font-weight:700;
  color: var(--brand);
  line-height:1.1;
}
.what{font-weight:800}
.emoji{font-size:20px}

/* Destino */
.mapwrap{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  height: 340px;
  background:#fff;
}
.mapwrap iframe{width:100%; height:100%; border:0}

/* Equipaje */
.list{
  padding-left: 0;
  margin: 0;
  list-style:none;
  display:grid;
  gap:10px;
}
.li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#fff;
  border-radius: 14px;
  padding:12px 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
}
.li .b{font-weight:900}

/* RSVP */
form{display:grid; gap:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 700px){.row2{grid-template-columns:1fr}}
label{font-weight:800; font-size:13px; letter-spacing:.3px}
input, select, textarea{
  width:100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  font: inherit;
  outline:none;
  transition: .15s ease;
}
textarea{min-height: 96px; resize: vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(31,95,139,.55);
  box-shadow: 0 0 0 4px var(--ring);
}
.btn{
  border:none;
  border-radius: 999px;
  padding:14px 16px;
  font-weight:900;
  cursor:pointer;
  background: var(--brand);
  color:#fff;
  transition:.18s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15,23,42,.22)}
.notice{
  padding:12px 14px;
  border-radius:14px;
  background: rgba(242,183,5,.10);
  border: 1px solid rgba(242,183,5,.35);
  color: #5a4300;
  font-weight:700;
}
.ok{
  padding:12px 14px;
  border-radius:14px;
  background: rgba(46, 160, 67, .10);
  border: 1px solid rgba(46, 160, 67, .24);
  color: #0f3d1a;
  font-weight:800;
  display:none;
}
.ok.show{display:block}

/* Free shop */
.iban{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight:900;
  letter-spacing:.8px;
  background:#fff;
  border-radius: 14px;
  padding:12px 14px;
  display:inline-block;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

/* Álbum polaroid */
.polaroids{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:14px;
  margin-top:8px;
}
.pola{
  background:#fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:12px 12px 16px;
  transform: rotate(var(--r, -1deg));
}
.pimg{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
  background: #e5e7eb;
  position:relative;
}
.pimg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pcap{
  margin-top:10px;
  color: var(--muted);
  font-size: 13px;
  font-weight:700;
}

/* Pilots photo */
.pilots{
  margin-top:18px;
  text-align:center;
}
.pilots-img{
  width:450px;
  height:auto;
  border-radius:24px;
  overflow:hidden;
  margin:0 auto 6px;
  box-shadow: var(--shadow);
}
.pilots-img img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
.pilots-caption{
  font-size:13px;
}

/* QR + Invitación */
.ticket{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background:#ffffff;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.ticket-inner{position:relative; padding:20px}
.ticket-top{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:center;
}
@media (max-width: 700px){
  .ticket-top{grid-template-columns:1fr}
}
.passport-mini{
  border-radius: 16px;
  padding:14px;
  background: #f9fafb;
}
.ticket-mini{
  border-radius: 16px;
  padding:14px;
  background: #f9fafb;
  margin-top:12px;
}
.mini-title{
  font-weight:900;
  color: var(--brand);
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size: 12px;
  margin-bottom:8px;
}
.mini-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.mini-line:last-child{border-bottom:none}
.mini-line b{font-weight:900}
#qrcode{
  width: 170px;
  height: 170px;
  padding:12px;
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

footer{
  padding:40px 16px;
  border-top: 1px solid rgba(15,23,42,.06);
  color: var(--muted);
  text-align:center;
}

/* Iconos inline (h2, etc.) */
.icon{
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: -6px; /* ajusta alineación con el texto */
  margin-right: 10px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(15,23,42,.10));
}