/* ══════════════ PÁGINA DE COMPENSACIÓN DE VUELOS (diseño propio) ══════════════ */
.cmp{background:#f6f8fb}
/* hero */
.cmp-hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 78% -10%,#123a6b 0%,transparent 60%),linear-gradient(150deg,#050d18 0%,#0a1e36 45%,#0b2a4a 100%);color:#fff;padding:74px 0 84px}
.cmp-hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none}
.cmp-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .85fr;gap:56px;align-items:center}
.cmp-hero .kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,90,95,.14);border:1px solid rgba(255,90,95,.45);color:#ffb3b6;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:100px}
.cmp-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-1.6px;margin:20px 0 16px;font-weight:900}
.cmp-hero h1 em{font-style:normal;background:linear-gradient(100deg,#ff8f92,#ff5a5f 40%,#ffc46b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cmp-hero p.sub{font-size:18.5px;color:#c6d8ea;max-width:56ch;line-height:1.55}
.cmp-hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cmp-hero .btn-grande{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(100deg,#ff5a5f,#ff7a5f);color:#fff;font-weight:850;font-size:16.5px;padding:16px 26px;border-radius:14px;box-shadow:0 18px 40px rgba(255,90,95,.32);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.cmp-hero .btn-grande:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(255,90,95,.42);text-decoration:none}
.cmp-hero .btn-fantasma{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#eaf3fb;font-weight:750;font-size:16px;padding:16px 22px;border-radius:14px;text-decoration:none}
.cmp-hero .btn-fantasma:hover{background:rgba(255,255,255,.13);text-decoration:none}
.cmp-hero .micro{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:13.5px;color:#9fb8d0}
.cmp-hero .micro span{display:inline-flex;align-items:center;gap:7px}
.cmp-hero .micro svg{width:16px;height:16px;stroke:#47d6a5;fill:none;stroke-width:2.2}
/* tarjeta flotante de importe */
.cmp-ticket{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:26px;backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cmp-ticket .cab{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9fb8d0;font-weight:800}
.cmp-ticket .importe{font-size:64px;font-weight:900;letter-spacing:-3px;margin:14px 0 2px;background:linear-gradient(100deg,#fff,#bfe0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cmp-ticket .importe small{font-size:22px;letter-spacing:0;-webkit-text-fill-color:#9fb8d0}
.cmp-ticket ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:14px;color:#cfe0f0}
.cmp-ticket ul li{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.14);padding-bottom:8px}
.cmp-ticket ul li b{color:#fff}
.cmp-ticket .nota{margin-top:18px;font-size:12.5px;color:#8ea9c4;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
@media(max-width:900px){.cmp-hero .wrap{grid-template-columns:1fr;gap:34px}.cmp-ticket{max-width:420px}}
/* importes */
.cmp-importes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:-46px auto 0;position:relative;z-index:3}
.cmp-imp{background:#fff;border-radius:18px;padding:24px;box-shadow:0 18px 50px rgba(10,30,54,.12);border:1px solid #e7eef6;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.cmp-imp:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(10,30,54,.18)}
.cmp-imp::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#0057b8,#00bfa8)}
.cmp-imp .cifra{font-size:44px;font-weight:900;letter-spacing:-1.8px;color:#0a1e36}
.cmp-imp .cifra small{font-size:18px;color:#7b8ea6;letter-spacing:0}
.cmp-imp .rango{font-size:13.5px;font-weight:800;color:#0057b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.cmp-imp p{font-size:14.5px;color:#54677d;margin:8px 0 0}
@media(max-width:820px){.cmp-importes{grid-template-columns:1fr;margin-top:-30px}}
/* pasos */
.cmp-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;position:relative}
.cmp-pasos::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,#dbe6f2,#c3d6ea,#dbe6f2)}
.cmp-paso{text-align:center;padding:0 16px;position:relative}
.cmp-paso .num{width:68px;height:68px;margin:0 auto 16px;border-radius:50%;background:#fff;border:2px solid #d9e5f1;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#0057b8;box-shadow:0 10px 26px rgba(10,30,54,.08);position:relative;z-index:2}
.cmp-paso h3{font-size:18.5px;margin:0 0 8px;color:#0a1e36}
.cmp-paso p{font-size:15px;color:#5b6e85;max-width:30ch;margin:0 auto}
@media(max-width:760px){.cmp-pasos{grid-template-columns:1fr;gap:26px}.cmp-pasos::before{display:none}}
/* checklist derecho */
.cmp-check{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-check div{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e7eef6;border-radius:14px;padding:16px 18px;font-size:15px;color:#33475f;box-shadow:0 6px 18px rgba(10,30,54,.04)}
.cmp-check .si{color:#0f7b55;font-weight:900}
.cmp-check .no{color:#b4342f;font-weight:900}
@media(max-width:700px){.cmp-check{grid-template-columns:1fr}}
/* proveedores */
.cmp-provs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp-prov{background:#fff;border-radius:20px;border:1px solid #e7eef6;padding:28px;box-shadow:0 16px 44px rgba(10,30,54,.07)}
.cmp-prov .marca{font-size:23px;font-weight:900;letter-spacing:-.6px;color:#0a1e36}
.cmp-prov .tag{display:inline-block;font-size:11.5px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:#0057b8;background:#e8f1fd;padding:5px 11px;border-radius:100px;margin-top:8px}
.cmp-prov ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px;font-size:15px;color:#42566e}
.cmp-prov ul li::before{content:"✓";color:#00a884;font-weight:900;margin-right:9px}
.cmp-prov .btn{display:block;text-align:center;background:#0057b8;color:#fff;font-weight:850;padding:14px;border-radius:12px;text-decoration:none}
.cmp-prov .btn:hover{background:#004a9e;text-decoration:none}
.cmp-prov.alt .btn{background:#0a1e36}
@media(max-width:820px){.cmp-provs{grid-template-columns:1fr}}
/* banda oscura de datos */
.cmp-banda{background:linear-gradient(120deg,#06111f,#0b2545);color:#fff;border-radius:22px;padding:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
.cmp-banda .dato{font-size:40px;font-weight:900;letter-spacing:-1.6px;background:linear-gradient(100deg,#7fd6ff,#a8f0d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cmp-banda p{font-size:14.5px;color:#a9c2d8;margin:4px 0 0}
@media(max-width:760px){.cmp-banda{grid-template-columns:1fr;gap:20px;padding:28px}}
/* cierre */
.cmp-cierre{margin-top:56px;background:linear-gradient(110deg,#ff5a5f,#ff8a5f);border-radius:24px;padding:44px;text-align:center;color:#fff;box-shadow:0 26px 60px rgba(255,90,95,.28)}
.cmp-cierre h2{color:#fff;font-size:clamp(24px,3.4vw,34px);margin:0 0 10px;letter-spacing:-.8px}
.cmp-cierre p{color:rgba(255,255,255,.92);font-size:17px;margin:0 0 24px}
.cmp-cierre a{display:inline-block;background:#fff;color:#c0272c;font-weight:900;padding:16px 30px;border-radius:13px;text-decoration:none}
.cmp-cierre a:hover{text-decoration:none;transform:translateY(-2px)}
.cmp h2{letter-spacing:-.7px}
/* ajustes */
.cmp-hero .wrap{align-items:start}
.cmp-ticket{align-self:start}
.cmp-hero h1{font-size:clamp(30px,4.3vw,50px);letter-spacing:-1.3px;max-width:19ch}
@media(min-width:901px){.cmp-hero{padding:64px 0 78px}}