/* ════════════════════════════════════════════════════════════════════════════
   hoteles.css — Transotel.Web
   Ubicación: Transotel.Web/wwwroot/css/hoteles.css
   v2: fix color H1 hero, estilos FAQ acordeón, botón scroll-to-top
   ════════════════════════════════════════════════════════════════════════════ */

/* ── BADGE DORADO ─────────────────────────────────────────────────────────── */
.page-badge--gold {
    background:    rgba(223,187,62,.15);
    border-color:  rgba(223,187,62,.45);
    color:         #dfbb3e;
}

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.hot-hero {
    position:   relative;
    color:      #fff;
    overflow:   hidden;
    padding:    0;
    min-height: 88vh;
    display:    flex;
    align-items:center;
}
.hot-hero-bg {
    position:            absolute;
    inset:               0;
    background-image:    url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1600&auto=format&fit=crop&q=60');
    background-size:     cover;
    background-position: center;
}
.hot-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(130deg,rgba(11,31,58,.97) 0%,rgba(11,31,58,.88) 55%,rgba(0,101,86,.75) 100%);
    pointer-events:none;
}
.hot-hero-inner {
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    gap:             3rem;
    padding:         6rem 0 5rem;
    align-items:     center;
}
@media (min-width:992px) {
    .hot-hero-inner { flex-direction:row; align-items:center; gap:4.5rem; padding:8rem 0 6rem; }
    .hot-hero-text  { flex:1 1 54%; }
    .hot-hero-figure{ flex:1 1 46%; }
}

/* ─── FIX #1: el H1 hereda color oscuro de site.css; forzar blanco ─────────── */
.hot-hero-text h1 {
    font-size:      clamp(2.4rem,5vw,3.8rem);
    font-weight:    800;
    letter-spacing: -.03em;
    line-height:    1.05;
    margin-bottom:  1.2rem;
    color:          #ffffff !important;
    text-shadow:    0 2px 12px rgba(0,0,0,.55);
}

.hot-hero-text .lead {
    color:         rgba(255,255,255,.88) !important;
    margin-bottom: 2rem;
    text-shadow:   0 1px 4px rgba(0,0,0,.35);
}

.hot-hero-proof {
    display:   flex;
    flex-wrap: wrap;
    gap:       1.5rem;
    margin-bottom: 2rem;
}
.hot-proof-item { text-align:center; }
.hot-proof-num {
    display:     block;
    font-size:   2.2rem;
    font-weight: 900;
    color:       #dfbb3e;
    line-height: 1;
}
.hot-proof-label { font-size:.78rem; color:rgba(255,255,255,.65); }

.hot-hero-cta { margin-top:.5rem; }
.hot-hero-figure img {
    border-radius: 18px;
    width:         100%;
    object-fit:    cover;
    aspect-ratio:  4/3;
    box-shadow:    0 28px 70px rgba(0,0,0,.45);
    border:        3px solid rgba(223,187,62,.25);
}

/* ── VENTAJAS ─────────────────────────────────────────────────────────────── */
.hot-ventajas-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3rem;
    padding:               0;
}
@media (min-width:576px) { .hot-ventajas-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px) { .hot-ventajas-grid { grid-template-columns:repeat(3,1fr); } }

.hot-ventaja-card {
    border-radius: 14px;
    border:        1px solid rgba(11,31,58,.08);
    box-shadow:    0 2px 16px rgba(11,31,58,.06);
    transition:    transform .25s, box-shadow .25s;
    position:      relative;
    overflow:      hidden;
}
.hot-ventaja-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#dfbb3e,#008572);
    opacity:0; transition:opacity .25s;
}
.hot-ventaja-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(11,31,58,.12); }
.hot-ventaja-card:hover::before { opacity:1; }

.hot-ventaja-icon {
    width:54px; height:54px;
    background:rgba(223,187,62,.10);
    border:1px solid rgba(223,187,62,.25);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:#c9a830;
    margin-bottom:.85rem;
    transition:background .25s, transform .25s;
}
.hot-ventaja-card:hover .hot-ventaja-icon { background:rgba(223,187,62,.18); transform:scale(1.08); }

.hot-ventaja-card h3 { font-size:1rem; font-weight:700; margin-bottom:.45rem; color:#0B1F3A; }
.hot-ventaja-card p  { font-size:.875rem; color:#6c757d; margin:0; line-height:1.65; }

/* ── CÓMO FUNCIONA ───────────────────────────────────────────────────────── */
.hot-como-steps {
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
    margin-top:     3rem;
    padding:        0;
    max-width:      720px;
    margin-inline:  auto;
}
.hot-como-step { display:flex; gap:1.5rem; align-items:flex-start; }

.hot-como-icon {
    width:64px; height:64px; flex-shrink:0;
    background:linear-gradient(135deg,#0B1F3A,#1e4070);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:#dfbb3e;
    box-shadow:0 8px 24px rgba(11,31,58,.22);
}
.hot-como-icon--gold { background:linear-gradient(135deg,#dfbb3e,#c9a830); color:#0B1F3A; }

.hot-como-body h3 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; color:#0B1F3A; padding-top:.85rem; }
.hot-como-body p  { font-size:.875rem; color:#6c757d; margin:0; line-height:1.7; }

/* ── PANEL ────────────────────────────────────────────────────────────────── */
.hot-panel-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3.5rem;
    align-items:           center;
    margin-top:            1rem;
}
@media (min-width:900px) { .hot-panel-grid { grid-template-columns:1fr 1fr; } }

.hot-panel-text h2 { display:flex; align-items:center; gap:.55rem; margin-bottom:.75rem; }
.hot-panel-text p  { font-size:.95rem; color:#495057; line-height:1.8; margin-bottom:1.25rem; }

.hot-panel-list { display:flex; flex-direction:column; gap:.85rem; padding:0; margin:1.25rem 0 0; }
.hot-panel-list li { display:flex; align-items:flex-start; gap:.75rem; font-size:.9rem; color:#495057; line-height:1.6; }
.hot-panel-list .fa-check-circle { color:#008572; flex-shrink:0; margin-top:3px; }

.hot-panel-img img {
    border-radius: 16px;
    width:         100%;
    object-fit:    cover;
    aspect-ratio:  4/3;
    box-shadow:    0 14px 40px rgba(11,31,58,.12);
}

/* ── FAQ ACORDEÓN (clases cf-faq-*) ──────────────────────────────────────── */
/* ─── FIX #3: los estilos se añaden aquí directamente para no depender
              de contacto-faq.css (cuyos selectores internos difieren) ─────── */
.cf-faq-container {
    max-width:    780px;
    margin-left:  auto;
    margin-right: auto;
}
.cf-faq-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        .65rem;
}
.cf-faq-item {
    background:    #fff;
    border:        1px solid rgba(11,31,58,.10);
    border-radius: 10px;
    overflow:      hidden;
    box-shadow:    0 2px 10px rgba(11,31,58,.05);
    transition:    box-shadow .2s;
}
.cf-faq-item:hover { box-shadow: 0 4px 18px rgba(11,31,58,.10); }

.cf-faq-q {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         1.05rem 1.4rem;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    font-weight:     600;
    font-size:       .95rem;
    color:           #0B1F3A;
    line-height:     1.45;
    transition:      background .2s, color .2s;
}
.cf-faq-q:hover,
.cf-faq-q:focus-visible { background: rgba(0,133,114,.06); outline: none; }
.cf-faq-q[aria-expanded="true"] { color: #008572; }

.cf-faq-q span { flex: 1; }

.cf-faq-q .fa-chevron-down {
    flex-shrink: 0;
    color:       #008572;
    font-size:   .78rem;
    transition:  transform .3s ease;
}
.cf-faq-q[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.cf-faq-a {
    padding:         0 1.4rem 1.1rem;
    border-top:      1px solid rgba(0,133,114,.12);
    background:      rgba(0,133,114,.03);
}
.cf-faq-a p {
    font-size:   .9rem;
    color:       #495057;
    line-height: 1.75;
    margin:      .75rem 0 0;
}

/* ── CTA CON FORMULARIO ───────────────────────────────────────────────────── */
.hot-cta-section { position:relative; overflow:hidden; }
.hot-cta-bg {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg,#0B1F3A 0%,#152d55 60%,#1a4478 100%);
    pointer-events:none;
}
.hot-cta-section .container { position:relative; z-index:1; }

.hot-cta-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3rem;
    align-items:           start;
}
@media (min-width:900px) { .hot-cta-grid { grid-template-columns:1fr 1.2fr; } }

.hot-cta-text h2 { color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; margin-bottom:1rem; }
.hot-cta-text .lead { color:rgba(255,255,255,.78); margin-bottom:1.75rem; }

.hot-cta-list { display:flex; flex-direction:column; gap:.75rem; padding:0; }
.hot-cta-list li { display:flex; align-items:flex-start; gap:.7rem; color:rgba(255,255,255,.82); font-size:.9rem; line-height:1.6; }
.hot-cta-list .fa-check { color:#dfbb3e; flex-shrink:0; margin-top:4px; }

.hot-contact-form {
    background:    rgba(255,255,255,.97);
    border-radius: 18px;
    padding:       2.25rem;
    box-shadow:    0 20px 60px rgba(0,0,0,.25);
}

/* Sobrescribir select */
.hot-contact-form select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
    cursor: pointer;
}

/* ── BOTÓN SCROLL TO TOP ──────────────────────────────────────────────────── */
/* ─── FIX #4 ─────────────────────────────────────────────────────────────── */
.hot-scroll-top {
    position:        fixed;
    bottom:          1.75rem;
    right:           1.75rem;
    z-index:         1050;
    width:           46px;
    height:          46px;
    border-radius:   50%;
    border:          none;
    background:      #008572;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    box-shadow:      0 4px 18px rgba(0,133,114,.40);
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(12px);
    transition:      opacity .3s, transform .3s;
    text-decoration: none;
}
.hot-scroll-top.is-visible {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
}
.hot-scroll-top:hover,
.hot-scroll-top:focus-visible {
    background:      #006e5d;
    transform:       translateY(-3px);
    box-shadow:      0 6px 22px rgba(0,133,114,.50);
    outline:         none;
}

/* ── ANIMACIONES FADE-IN ──────────────────────────────────────────────────── */
.fade-wait  { opacity:0; transform:translateY(20px); transition:opacity .5s, transform .5s; }
.fade-in    { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:767px) {
    .hot-hero { min-height:auto; }
    .hot-hero-inner { padding:5rem 0 4rem; }
}
@media (max-width:575px) {
    .hot-hero-proof { gap:1rem; }
    .hot-contact-form { padding:1.5rem; }
    .hot-scroll-top { bottom:1.25rem; right:1.25rem; width:42px; height:42px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ALTERNATIVA A LAS TASAS DE EQUIPAJE DE LA AEROLÍNEA  ·  añadido Lote 4b
   ════════════════════════════════════════════════════════════════════════════ */
.hot-airline-section {
    position:relative; overflow:hidden;
    padding:4.5rem 0; color:#fff;
}
.hot-airline-bg {
    position:absolute; inset:0;
    background:linear-gradient(130deg,#0B1F3A 0%,#0d3b46 55%,#008572 100%);
    pointer-events:none;
}
.hot-airline-inner {
    position:relative; z-index:1;
    max-width:820px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.hot-airline-icon {
    display:inline-flex; align-items:center; gap:.8rem;
    font-size:1.8rem; color:#dfbb3e;
    background:rgba(223,187,62,.12); border:1px solid rgba(223,187,62,.4);
    padding:.85rem 1.4rem; border-radius:999px;
}
.hot-airline-icon .fa-arrow-right-long { font-size:1.1rem; color:rgba(255,255,255,.75); }
.hot-airline-section h2 {
    color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; margin:0;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hot-airline-section .lead { color:rgba(255,255,255,.88); margin:0; max-width:680px; }
.hot-airline-points {
    list-style:none; padding:0; margin:.5rem 0 0;
    display:flex; flex-direction:column; gap:.7rem;
    text-align:left; width:100%; max-width:620px;
}
.hot-airline-points li {
    display:flex; align-items:flex-start; gap:.7rem;
    font-size:.95rem; color:rgba(255,255,255,.92); line-height:1.55;
}
.hot-airline-points .fa-circle-check { color:#dfbb3e; margin-top:3px; flex-shrink:0; }
.hot-airline-btn { margin-top:1rem; }

@media (max-width:575px) {
    .hot-airline-section { padding:3.25rem 0; }
    .hot-airline-points li { font-size:.9rem; }
}