:root {
    --noche:#07080c; --noche-2:#10131b; --tinta:#0b0b0d; --papel:#fbfaf7; --hueso:#f1eee8; --linea:#e2ddd5;
    --gris:#8b857d; --gris-osc:#57524c; --rojo:#c8102e; --rojo-osc:#9e0c24; --ambar:#ffd27a;
    --oro:#e3c27f; --vino:#74060b;
    /* Tipografías de la marca. New Carolina va por peso = tamaño óptico (ver /fuentes/marca-2.css). Herrera Sans Mono está pedida a Puig. */
    --titulo:'New Carolina', 'Herrera Sans', 'Helvetica Neue', Arial, sans-serif;
    --sans:'Herrera Sans', 'Helvetica Neue', Arial, sans-serif;
    --mono:'Herrera Sans Mono', 'Herrera Sans', 'Helvetica Neue', Arial, sans-serif;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  [hidden] { display:none !important; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body { font-family:var(--sans); font-weight:400; color:var(--tinta); background:var(--noche); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

  /* ================= HERO: visual principal "CH Airlines" ================= */
  .cielo {
    position:relative; color:#fff; overflow:hidden; isolation:isolate;
    min-height:max(760px, 66.5vw); padding:0 16px 230px; background:var(--vino);
  }
  /* La foto ocupa todo el hero: modelo y ventanilla a la izquierda, el texto va sobre la pared roja de la derecha. */
  .fondo { position:absolute; inset:0; z-index:-1; }
  /* Siempre al ancho de la pantalla (si el texto alarga el hero, la foto no se agranda ni se corre la ventanilla):
     abajo se funde con el bordó del fondo, que es el mismo tono de la pared. */
  .fondo img { display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, #000 80%, transparent 100%); }
  .fondo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(60,0,6,.25) 0%, transparent 18%); }

  .nav { position:relative; display:flex; justify-content:center; align-items:center; padding:38px 0 0; }
  .marca { margin:0; line-height:0; }
  .marca img { display:block; width:min(560px, 46vw); height:auto; }
  .vuelo-chip { position:absolute; right:clamp(0px, 2vw, 32px); top:34px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; padding:9px 14px;
    border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(40,0,4,.3); backdrop-filter:blur(8px); white-space:nowrap; }
  .vuelo-chip i { width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:pulso 2s infinite; }
  @keyframes pulso { 70% { box-shadow:0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow:0 0 0 0 rgba(61,220,132,0); } }

  .hero { padding:clamp(40px, 6vw, 96px) clamp(16px, 3vw, 48px) 20px 65%; }
  .hero-texto { max-width:520px; }
  .kicker { font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oro); display:flex; align-items:center; gap:12px; }
  .kicker::before { content:''; width:28px; height:1px; background:currentColor; }
  .hero h1 { font-family:var(--titulo); font-weight:600; font-size:clamp(2.6rem, 4.4vw, 4.6rem); line-height:1; letter-spacing:.01em; margin:20px 0 0; text-wrap:balance; }
  .hero h1 em { font-style:normal; }
  .hero h1 .rojo { color:var(--oro); }
  .hero p { margin-top:22px; max-width:44ch; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.85); font-weight:300; }
  .hero .aviso { margin-top:12px; font-size:.86rem; line-height:1.5; color:var(--oro); font-weight:400; }
  .cta { display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:16px 26px; border-radius:999px; background:#fff; color:var(--tinta);
    text-decoration:none; font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; transition:transform .25s, box-shadow .25s; }
  .cta:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(40,0,4,.35); }
  .cta svg { width:18px; height:18px; transition:transform .25s; }
  .cta:hover svg { transform:translateX(4px); }

  /* Tablero de salidas */
  .tablero { margin-top:36px; background:rgba(24,2,6,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px;
    box-shadow:0 30px 80px rgba(40,0,4,.45), inset 0 1px 0 rgba(255,255,255,.06); }
  .tablero-cab { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; color:rgba(255,255,255,.6); text-transform:uppercase; }
  .tablero-cab b { color:var(--oro); font-weight:500; display:flex; align-items:center; gap:8px; }
  .tablero-cab b svg { width:16px; height:16px; }
  .fila-flap { display:flex; gap:5px; margin-top:16px; flex-wrap:nowrap; justify-content:space-between; }
  .flap { position:relative; flex:1 1 0; max-width:56px; aspect-ratio:.72; border-radius:5px; display:grid; place-items:center;
    background:linear-gradient(180deg, #1d2130 0 49.5%, #151826 50.5% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.5);
    font-family:var(--mono); font-weight:500; font-size:clamp(1rem, 2.2vw, 1.6rem); color:#f6f1e6; }
  .flap::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.6); }
  .flap.gira { animation:flip .09s ease-in-out; }
  @keyframes flip { 50% { transform:scaleY(.6); filter:brightness(.6); } }
  .flap.vacio { background:#0e1018; }
  .tablero-datos { display:grid; grid-template-columns:repeat(4, auto); justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px dashed rgba(255,255,255,.16); }
  .tablero-datos div { font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:rgba(255,255,255,.55); text-transform:uppercase; }
  .tablero-datos b { display:block; margin-top:6px; font-size:.9rem; letter-spacing:.08em; color:#fff; font-weight:500; white-space:nowrap; }
  .tablero-datos b.ok { color:#3ddc84; }

  /* ================= BOARDING PASS ================= */
  .embarque { position:relative; display:flow-root; background:var(--hueso); padding:0 16px 80px; }
  .pase { position:relative; max-width:1080px; margin:-190px auto 0; display:grid; grid-template-columns:1fr 300px; background:var(--papel); border-radius:26px;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 50px 120px rgba(7,8,12,.35), 0 8px 24px rgba(7,8,12,.12); }
  .pase-cuerpo { padding:0 0 44px; min-width:0; }
  .pase-cab { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 44px; background:var(--tinta); color:#fff; border-radius:26px 0 0 0; }
  .pase-cab .aero { display:flex; flex-direction:column; gap:8px; }
  .pase-cab .aero img { display:block; width:220px; height:auto; }
  .pase-cab .aero small { font-family:var(--mono); font-size:.6rem; letter-spacing:.32em; opacity:.6; text-transform:uppercase; }
  .pase-cab .clase { font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; padding:7px 12px; border:1px solid rgba(255,255,255,.3); border-radius:6px; text-transform:uppercase; }

  .trayecto { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; padding:34px 44px 30px; border-bottom:1px dashed var(--linea); }
  .ciudad small { display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; color:var(--gris); text-transform:uppercase; }
  .ciudad b { display:block; font-family:var(--titulo); font-weight:600; font-size:clamp(2.6rem, 6vw, 3.6rem); line-height:1; letter-spacing:.01em; margin:6px 0 4px; }
  .ciudad span { font-size:.85rem; color:var(--gris-osc); }
  .ciudad.destino { text-align:right; }
  .vuelo-linea { position:relative; height:2px; background:repeating-linear-gradient(90deg, var(--tinta) 0 6px, transparent 6px 12px); opacity:.85; }
  .vuelo-linea::before, .vuelo-linea::after { content:''; position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translateY(-50%); border:2px solid var(--tinta); background:var(--papel); }
  .vuelo-linea::before { left:-4px; } .vuelo-linea::after { right:-4px; background:var(--tinta); }
  .vuelo-linea svg { position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%, -50%) rotate(90deg); background:var(--papel); padding:3px; fill:var(--rojo); }
  .vuelo-linea em { position:absolute; left:50%; top:22px; transform:translateX(-50%); font-family:var(--mono); font-style:normal; font-size:.62rem; letter-spacing:.2em; color:var(--gris); white-space:nowrap; }

  form { padding:34px 44px 0; display:grid; gap:30px; }
  .seccion { display:grid; gap:20px; }
  .seccion-tit { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-osc); }
  .seccion-tit b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--tinta); color:#fff; font-size:.62rem; letter-spacing:0; }
  .seccion-tit::after { content:''; flex:1; height:1px; background:var(--linea); }
  .grilla { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .ancho { grid-column:1 / -1; }

  .campo { position:relative; display:block; background:#fff; border:1px solid var(--linea); border-radius:14px; padding:12px 16px 10px; transition:border-color .2s, box-shadow .2s; }
  .campo:focus-within { border-color:var(--tinta); box-shadow:0 0 0 4px rgba(11,11,13,.06); }
  .campo small { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); }
  .campo input { width:100%; font:inherit; font-size:1.06rem; font-weight:500; color:var(--tinta); background:transparent; border:0; outline:none; padding:6px 0 2px; }
  .campo input::placeholder { color:#c4beb5; font-weight:400; }
  .ayuda { display:block; margin:6px 4px 0; font-size:.78rem; color:var(--gris); }

  .tiendas { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .tienda { position:relative; cursor:pointer; }
  .tienda input { position:absolute; opacity:0; pointer-events:none; }
  .tienda .tarjeta { display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; background:#fff; border:1px solid var(--linea); transition:all .25s; }
  .tienda .icono { width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--hueso); transition:all .25s; }
  .tienda .icono svg { width:22px; height:22px; stroke:var(--tinta); }
  .tienda b { display:block; font-weight:500; font-size:1rem; }
  .tienda small { font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:var(--gris); text-transform:uppercase; }
  .tienda .check { margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--linea); display:grid; place-items:center; transition:all .25s; }
  .tienda:hover .tarjeta { border-color:var(--tinta); transform:translateY(-1px); }
  .tienda input:checked + .tarjeta { background:var(--tinta); border-color:var(--tinta); color:#fff; box-shadow:0 14px 30px rgba(11,11,13,.2); }
  .tienda input:checked + .tarjeta .icono { background:rgba(255,255,255,.1); }
  .tienda input:checked + .tarjeta .icono svg { stroke:#fff; }
  .tienda input:checked + .tarjeta small { color:rgba(255,255,255,.55); }
  .tienda input:checked + .tarjeta .check { background:var(--rojo); border-color:var(--rojo); }
  .tienda input:checked + .tarjeta .check::after { content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
  .tienda input:focus-visible + .tarjeta { outline:2px solid var(--tinta); outline-offset:3px; }

  .subida { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; padding:22px; border-radius:16px; cursor:pointer;
    background:#fff; border:1.5px dashed #cfc8bd; transition:all .25s; }
  .subida:hover, .subida.arrastrando { border-color:var(--tinta); background:#fdfcfa; }
  .subida input { position:absolute; inset:0; opacity:0; cursor:pointer; }
  .subida .icono { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:var(--tinta); }
  .subida .icono svg { width:26px; height:26px; stroke:#fff; }
  .subida b { display:block; font-weight:500; font-size:1rem; }
  .subida small { color:var(--gris); font-size:.85rem; }
  .vista { display:none; grid-template-columns:72px 1fr auto; gap:16px; align-items:center; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--linea); }
  .vista.activa { display:grid; animation:aparecer .4s ease both; }
  .vista img { width:72px; height:72px; object-fit:cover; border-radius:10px; background:var(--hueso); }
  .vista p { font-size:.92rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vista p small { display:flex; align-items:center; gap:6px; color:#1d7a43; font-size:.78rem; font-weight:400; margin-top:2px; }
  .vista button { font:inherit; font-size:.8rem; font-weight:500; padding:9px 14px; border-radius:999px; background:var(--hueso); border:0; cursor:pointer; color:var(--tinta); }

  .acepto { display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.9rem; line-height:1.55; color:var(--gris-osc); }
  .acepto input { appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; border:1.5px solid #bdb6ab; border-radius:6px; margin-top:1px; display:grid; place-items:center; cursor:pointer; background:#fff; transition:all .2s; }
  .acepto input:checked { background:var(--tinta); border-color:var(--tinta); }
  .acepto input:checked::after { content:''; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
  .acepto input:focus-visible { outline:2px solid var(--tinta); outline-offset:2px; }

  .msg { color:var(--rojo); font-size:.9rem; font-weight:500; min-height:1.3em; margin-bottom:-16px; }
  .enviar { position:relative; display:flex; align-items:center; justify-content:center; gap:14px; height:66px; border:0; border-radius:16px; cursor:pointer; overflow:hidden;
    font:inherit; font-size:.86rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:#fff; background:var(--rojo);
    box-shadow:0 18px 40px rgba(200,16,46,.32); transition:transform .2s, box-shadow .2s, background .2s; }
  .enviar:hover:not(:disabled) { transform:translateY(-2px); background:var(--rojo-osc); box-shadow:0 22px 48px rgba(200,16,46,.4); }
  .enviar svg { width:22px; height:22px; fill:#fff; transform:rotate(90deg); transition:transform .5s cubic-bezier(.5,-.4,.5,1.4); }
  .enviar:hover:not(:disabled) svg { transform:rotate(90deg) translateY(-6px); }
  .enviar:disabled { cursor:wait; opacity:.85; }
  .enviar:disabled svg { animation:despegue 1.2s ease-in-out infinite; }
  @keyframes despegue { 50% { transform:rotate(70deg) translateY(-6px); } }
  .enviar:focus-visible { outline:2px solid var(--tinta); outline-offset:4px; }

  .error.campo, .error .campo { border-color:var(--rojo); box-shadow:0 0 0 4px rgba(200,16,46,.08); }
  .error .tarjeta, .error .subida { border-color:var(--rojo); }
  .acepto a, .pie a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .acepto.error { color:var(--rojo); }
  .acepto.error input { border-color:var(--rojo); }
  .trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* Talón */
  .talon { position:relative; background:var(--tinta); color:#fff; border-radius:0 26px 26px 0; padding:22px 28px 30px; display:flex; flex-direction:column; gap:20px; }
  .talon::before { /* perforación */
    content:''; position:absolute; left:-1px; top:24px; bottom:24px; width:2px;
    background:radial-gradient(circle, var(--papel) 1.5px, transparent 2px) 0 0 / 2px 12px repeat-y; }
  .muesca { position:absolute; left:-15px; width:30px; height:30px; border-radius:50%; background:var(--hueso); }
  .muesca.arr { top:-15px; background:var(--vino); } .muesca.abj { bottom:-15px; }
  .talon-cab { font-family:var(--mono); font-size:.62rem; letter-spacing:.26em; color:rgba(255,255,255,.5); text-transform:uppercase; display:flex; justify-content:space-between; }
  .talon .ruta-mini { display:flex; justify-content:space-between; align-items:center; font-family:var(--titulo); font-weight:700; font-size:2rem; }
  .talon .ruta-mini svg { width:22px; height:22px; fill:var(--rojo); transform:rotate(90deg); }
  .talon dl { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
  .talon dt { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:rgba(255,255,255,.45); text-transform:uppercase; }
  .talon dd { font-size:.95rem; font-weight:500; margin-top:4px; min-height:1.3em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .3s; }
  .talon dd.vacio { color:rgba(255,255,255,.3); }
  .talon dd.full { grid-column:1 / -1; }
  .codigo { margin-top:auto; background:#fff; border-radius:10px; padding:12px 12px 8px; }
  .codigo svg { display:block; width:100%; height:64px; }
  .codigo p { text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; color:var(--tinta); margin-top:6px; }

  /* Confirmación */
  .confirmado { display:none; padding:44px; text-align:center; }
  .confirmado.activo { display:block; animation:aparecer .6s ease both; }
  .confirmado .sello { width:96px; height:96px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; background:var(--rojo); box-shadow:0 18px 40px rgba(200,16,46,.35); animation:sellar .7s cubic-bezier(.3,1.6,.5,1) both .1s; }
  .confirmado .sello svg { width:44px; height:44px; fill:#fff; transform:rotate(45deg); }
  @keyframes sellar { from { transform:scale(0) rotate(-30deg); } }
  .confirmado small { font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; color:var(--gris); text-transform:uppercase; }
  .confirmado h2 { font-family:var(--titulo); font-weight:600; font-size:clamp(2.2rem, 5vw, 3.2rem); line-height:1.05; margin:12px 0; }
  .confirmado h2 em { font-style:italic; }
  .confirmado p { color:var(--gris-osc); max-width:42ch; margin:0 auto; line-height:1.65; }
  .confirmado .revisar-correo { display:flex; gap:12px; align-items:flex-start; text-align:left; max-width:46ch; margin:22px auto 0; padding:14px 16px;
    background:#fff6e0; border-left:3px solid var(--oro); border-radius:8px; font-size:.95rem; line-height:1.55; color:var(--gris-osc); }
  .confirmado .revisar-correo svg { flex:none; width:22px; height:22px; fill:var(--rojo); margin-top:1px; }
  .pase.embarcado .talon dd { color:#fff; }

  .pie { max-width:1080px; margin:44px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); }

  @keyframes aparecer { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .entra { animation:aparecer .9s cubic-bezier(.2,.7,.2,1) both; }
  .d1 { animation-delay:.1s; } .d2 { animation-delay:.2s; } .d3 { animation-delay:.3s; } .d4 { animation-delay:.45s; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
  }

  /* ================= RESPONSIVE ================= */
  /* Hasta 1100px la foto va arriba entera (recorte de modelo, frasco y ventanilla) y el texto abajo, sobre el rojo. */
  @media (max-width: 1100px) {
    .cielo { display:flex; flex-direction:column; min-height:0; background:linear-gradient(180deg, #8f0b12 0%, var(--vino) 100%); }
    .nav { order:0; padding:28px 0 22px; }
    .marca img { width:min(520px, 80vw); }
    .vuelo-chip { display:none; }
    .fondo { order:1; position:relative; inset:auto; z-index:0; margin:0 -16px; }
    .fondo img { aspect-ratio:2900 / 2587; max-height:78vh; object-fit:cover; object-position:30% 30%;
      -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 72%, transparent 100%); }
    .fondo::after { display:none; }
    .hero { order:2; position:relative; padding:0; margin-top:-56px; }
    .hero-texto { max-width:640px; margin:0 auto; }
  }
  @media (max-width: 980px) {
    .pase { grid-template-columns:1fr; }
    .pase-cab { border-radius:26px 26px 0 0; }
    .talon { border-radius:0 0 26px 26px; }
    .talon::before { left:24px; right:24px; top:-1px; bottom:auto; width:auto; height:2px; background:radial-gradient(circle, var(--papel) 1.5px, transparent 2px) 0 0 / 12px 2px repeat-x; }
    .muesca { top:-15px !important; bottom:auto !important; }
    .muesca.arr { left:-15px; background:var(--hueso); } .muesca.abj { left:auto; right:-15px; }
    .codigo { margin-top:4px; }
  }
  @media (max-width: 640px) {
    .cielo { padding-bottom:210px; }
    .nav { padding:22px 0 18px; }
    .marca img { width:86vw; }
    .hero { margin-top:-36px; }
    .hero h1 { font-size:clamp(2.5rem, 12vw, 3.4rem); }
    .hero p { font-size:1rem; }
    .tablero { padding:16px; border-radius:16px; }
    .fila-flap { gap:3px; }
    .tablero-datos { grid-template-columns:repeat(2, 1fr); }
    .pase { margin-top:-170px; border-radius:22px; }
    .pase-cab { padding:16px 20px; border-radius:22px 22px 0 0; }
    .pase-cab .clase { display:none; }
    .pase-cab .aero img { width:190px; }
    .trayecto { padding:26px 20px 30px; gap:12px; }
    .ciudad b { font-size:2.4rem; }
    .ciudad span { font-size:.75rem; }
    form { padding:28px 20px 0; gap:28px; }
    .pase-cuerpo { padding-bottom:32px; }
    .grilla, .tiendas { grid-template-columns:1fr; gap:12px; }
    .talon { padding:22px 20px 26px; border-radius:0 0 22px 22px; }
    .confirmado { padding:36px 20px; }
  }