/* ==========================================================
   HOTEL DIGITAL PERÚ - Mejoras 2026
   Paleta hotelera premium + interactividad + accesibilidad
   ========================================================== */
:root{
  --hd-navy:#0B1B33;
  --hd-navy-2:#13294B;
  --hd-gold:#C9A86A;
  --hd-gold-2:#E8C97A;
  --hd-teal:#0EA5A0;
  --hd-teal-dark:#0B7E7A;
  --hd-cream:#FFF9F0;
  --hd-grey:#F4F5F7;
  --hd-text:#1E293B;
  --hd-muted:#64748B;
  --hd-radius:18px;
  --hd-shadow:0 18px 50px rgba(11,27,51,.14);
  --hd-shadow-sm:0 8px 24px rgba(11,27,51,.10);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--hd-text);background:#fff}
::selection{background:var(--hd-gold);color:#0B1B33}

/* Barra de progreso de lectura */
#hd-progress{position:fixed;top:0;left:0;height:4px;width:0%;z-index:9999;background:linear-gradient(90deg,var(--hd-gold),var(--hd-gold-2),var(--hd-teal));box-shadow:0 0 12px rgba(201,168,106,.7)}

/* ---------- Logo Hotel Digital Perú ---------- */
.hd-logo{background:#fff;border-radius:12px;padding:4px 10px;object-fit:contain;max-height:52px;width:auto;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.navbar-sticky .hd-logo{box-shadow:0 2px 10px rgba(11,27,51,.12)}

/* ---------- Preloader SISTEMAS JP (extiende delays) ---------- */
.loader .animated-letters:nth-child(9):before{animation-delay:1.6s;-webkit-animation-delay:1.6s}
.loader .animated-letters:nth-child(10):before{animation-delay:1.8s;-webkit-animation-delay:1.8s}
.loader .animated-letters:nth-child(11):before{animation-delay:2s;-webkit-animation-delay:2s}
.preloader-animation .loader{flex-wrap:wrap;justify-content:center;gap:.05em}
.preloader-space{min-width:.4em}

/* ---------- Hero premium ---------- */
.welcome-area{position:relative;background:#0B1B33 url("../img/bg/welcome_bg.jpg") no-repeat center center/cover !important}
.welcome-area.bg-overlay::after{background:linear-gradient(115deg,rgba(11,27,51,.96) 0%,rgba(19,41,75,.88) 42%,rgba(14,165,160,.55) 100%) !important;opacity:1 !important}
.welcome-intro h1{font-weight:800;line-height:1.08;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.welcome-intro h1 .hd-gold{background:linear-gradient(90deg,#E8C97A,#C9A86A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(232,201,122,.45);color:#FFF7E6;padding:.45rem .95rem;border-radius:100px;font-size:.85rem;font-weight:600;backdrop-filter:blur(8px);margin-bottom:1rem}
.hd-badge .dot{width:9px;height:9px;border-radius:50%;background:#34FF92;box-shadow:0 0 0 6px rgba(52,255,146,.18);animation:hd-pulse 1.8s infinite}
@keyframes hd-pulse{0%{box-shadow:0 0 0 0 rgba(52,255,146,.5)}70%{box-shadow:0 0 0 10px rgba(52,255,146,0)}100%{box-shadow:0 0 0 0 rgba(52,255,146,0)}}
.hd-hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.btn-hd-gold{background:linear-gradient(135deg,#E8C97A,#C9A86A) !important;color:#0B1B33 !important;font-weight:800 !important;border:none !important;box-shadow:0 12px 30px rgba(201,168,106,.45);transition:.25s}
.btn-hd-gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(201,168,106,.55);color:#0B1B33 !important}
.btn-hd-ghost{background:rgba(255,255,255,.10) !important;border:1.5px solid rgba(255,255,255,.55) !important;color:#fff !important;backdrop-filter:blur(6px)}
.btn-hd-ghost:hover{background:#fff !important;color:#0B1B33 !important;transform:translateY(-2px)}
.hd-trust{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.3rem;color:#E2E8F0;font-size:.9rem}
.hd-trust strong{color:#fff}
.hd-trust span{display:inline-flex;align-items:center;gap:.4rem}

/* Tarjeta flotante demo en hero */
.hd-demo-card{background:rgba(255,255,255,.98);border-radius:20px;padding:1.2rem;box-shadow:var(--hd-shadow);max-width:360px;margin-left:auto;position:relative;overflow:hidden}
.hd-demo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--hd-gold),var(--hd-teal))}
.hd-demo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.hd-live{font-size:.75rem;font-weight:800;color:#0B7E7A;background:#D7F5F2;padding:.25rem .6rem;border-radius:100px}
.hd-rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:.9rem 0}
.hd-room{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;cursor:pointer;transition:.2s;border:2px solid transparent}
.hd-room.libre{background:#E6F9F6;color:#0B7E7A;border-color:#B8E9E4}
.hd-room.ocupada{background:#FFE4E0;color:#B42318;border-color:#FFB4A8}
.hd-room.limpieza{background:#FFF3D6;color:#8A6A00;border-color:#F5D67A}
.hd-room:hover{transform:scale(1.08)}
.hd-room.selected{outline:3px solid var(--hd-navy);outline-offset:1px}
.hd-room-detail{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:.8rem;margin:.2rem 0 .9rem}
.hd-rd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.hd-rd-head b{color:var(--hd-navy);font-size:1.05rem}
.hd-estado{font-size:.72rem;font-weight:800;padding:.28rem .7rem;border-radius:100px}
.hd-estado.libre{background:#D7F5F2;color:#0B7E7A}
.hd-estado.ocupada{background:#FFE4E0;color:#B42318}
.hd-estado.limpieza{background:#FFF3D6;color:#8A6A00}
.hd-rd-huesped{font-size:.85rem;color:#475569;margin:.5rem 0}
.hd-rd-actions{display:flex;gap:.4rem}
.hd-rd-actions button{flex:1;border:1px solid #CBD5E1;background:#fff;border-radius:10px;padding:.45rem .2rem;font-size:.78rem;font-weight:700;color:var(--hd-navy);cursor:pointer;transition:.2s}
.hd-rd-actions button:hover{background:var(--hd-navy);color:#fff;border-color:var(--hd-navy)}
.hd-demo-stats{display:flex;gap:.6rem}
.hd-mini-stat{flex:1;background:#F8FAFC;border-radius:12px;padding:.6rem;text-align:center}
.hd-mini-stat b{display:block;font-size:1.1rem;color:var(--hd-navy)}
.hd-mini-stat small{color:var(--hd-muted);font-size:.72rem}

/* ---------- Reveal on scroll ---------- */
.hd-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.hd-reveal.visible{opacity:1;transform:none}
.hd-reveal-d1{transition-delay:.08s}.hd-reveal-d2{transition-delay:.16s}.hd-reveal-d3{transition-delay:.24s}

/* ---------- Cards / servicios ---------- */
.single-service,.single-promo,.single-price-plan{border-radius:var(--hd-radius) !important;transition:transform .25s ease,box-shadow .25s ease !important}
.single-service:hover,.single-promo:hover{transform:translateY(-8px);box-shadow:var(--hd-shadow) !important}
.single-service{border:1px solid #E9EDF3;background:#fff}
.single-service > span{box-shadow:var(--hd-shadow-sm)}

/* ---------- Stats ---------- */
.hd-stats{background:linear-gradient(135deg,var(--hd-navy) 0%,var(--hd-navy-2) 60%,#0E3A3A 100%);border-radius:24px;padding:2.2rem 1.5rem;color:#fff;box-shadow:var(--hd-shadow);position:relative;overflow:hidden}
.hd-stats::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(201,168,106,.35),transparent 70%)}
.hd-stat{text-align:center;padding:.8rem}
.hd-stat b{font-size:2.1rem;font-weight:800;color:var(--hd-gold-2);display:block;line-height:1}
.hd-stat span{color:#CBD5E1;font-size:.9rem}

/* ---------- Simulador ---------- */
.hd-sim{background:var(--hd-cream);border:2px dashed rgba(201,168,106,.55);border-radius:24px;padding:2rem}
.hd-range-list{display:flex;flex-direction:column;gap:1rem;margin:1.2rem 0}
.hd-range-item{background:#fff;border:1px solid #E6EAF0;border-radius:16px;padding:.9rem 1rem;box-shadow:var(--hd-shadow-sm)}
.hd-range-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.hd-range-head label{font-weight:700;color:var(--hd-navy);margin:0;flex:1;cursor:pointer}
.hd-step{flex:0 0 28px;height:28px;border-radius:50%;background:var(--hd-navy);color:var(--hd-gold-2);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.hd-range-val{background:#0B1B33;color:#E8C97A;font-weight:800;font-size:.9rem;padding:.25rem .8rem;border-radius:100px;min-width:72px;text-align:center}
.hd-range-item input[type=range]{width:100%;accent-color:var(--hd-teal);height:32px;cursor:pointer;margin:0}
.hd-range-minmax{display:flex;justify-content:space-between;font-size:.75rem;color:var(--hd-muted);margin-top:-4px}
.hd-sim-output{background:#0B1B33;color:#fff;border-radius:16px;padding:1.2rem;text-align:center}
.hd-sim-output b{font-size:2rem;color:var(--hd-gold-2)}
.hd-chip{display:inline-block;background:#fff;border:1px solid #E2E8F0;border-radius:100px;padding:.3rem .8rem;font-size:.82rem;margin:.2rem}

/* ---------- Precios ---------- */
.single-price-plan{border:2px solid #E9EDF3 !important;overflow:hidden}
.single-price-plan.active,.single-price-plan.color-2{border-color:var(--hd-gold) !important;box-shadow:0 22px 60px rgba(201,168,106,.28) !important;transform:scale(1.02)}
.plan-price .h1{color:var(--hd-navy) !important}
.hd-price-toggle{display:inline-flex;background:#EDF2F7;border-radius:100px;padding:.3rem;margin-bottom:1.5rem}
.hd-price-toggle button{border:none;background:transparent;padding:.6rem 1.4rem;border-radius:100px;font-weight:700;color:var(--hd-muted);cursor:pointer}
.hd-price-toggle button.active{background:var(--hd-navy);color:#fff;box-shadow:var(--hd-shadow-sm)}

/* ---------- FAQ (SEO) ---------- */
.hd-faq-item{background:#fff;border:1px solid #E6EAF0;border-radius:14px;margin-bottom:.7rem;overflow:hidden;transition:.2s}
.hd-faq-item.open{border-color:var(--hd-gold);box-shadow:var(--hd-shadow-sm)}
.hd-faq-q{width:100%;background:none;border:none;text-align:left;padding:1rem 1.2rem;font-weight:700;color:var(--hd-navy);display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-size:1rem}
.hd-faq-q .plus{flex:0 0 32px;height:32px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:.25s}
.hd-faq-item.open .plus{background:var(--hd-navy);color:var(--hd-gold-2);transform:rotate(45deg)}
.hd-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1.2rem;color:#475569}
.hd-faq-item.open .hd-faq-a{padding-bottom:1.1rem}

/* ---------- CTA final ---------- */
.hd-cta{background:linear-gradient(120deg,#0B1B33 0%,#14365B 55%,#0B7E7A 100%);border-radius:26px;padding:3rem 2rem;color:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:var(--hd-shadow)}
.hd-cta::before{content:"🏨";position:absolute;font-size:10rem;opacity:.07;left:20px;top:-10px;transform:rotate(-12deg)}
.hd-cta h2{color:#fff !important}
.hd-cta p{color:#D6E4F0}

/* ---------- WhatsApp flotante mejorado ---------- */
.float2{transition:.25s !important}
.float2:hover{transform:scale(1.12) rotate(6deg)}
.float2::after{content:"¿Dudas? Escríbenos";position:absolute;right:52px;top:50%;transform:translateY(-50%);background:#0B1B33;color:#fff;font-size:.78rem;font-weight:700;padding:.45rem .8rem;border-radius:100px;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}
.float2:hover::after{opacity:1;right:56px}

/* ---------- Botón scroll top ---------- */
#scrollUp{background:linear-gradient(135deg,var(--hd-gold),#A8823F) !important;box-shadow:0 10px 26px rgba(201,168,106,.5)}

/* ---------- Navbar ---------- */
.navbar-sticky{background:rgba(255,255,255,.94) !important;backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(11,27,51,.10)}

/* ---------- Testimonios llamativos ---------- */
.hd-testimonials{background:linear-gradient(180deg,#FFF9F0 0%,#fff 100%)}
.hd-badge-dark{background:#0B1B33;color:#E8C97A;border-color:#0B1B33}
.hd-t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:991px){.hd-t-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.hd-t-card{background:#fff;border:1px solid #E9EDF3;border-radius:20px;padding:1.5rem;box-shadow:var(--hd-shadow-sm);position:relative;transition:.25s;display:flex;flex-direction:column}
.hd-t-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--hd-shadow)}
.hd-t-featured{border:2px solid var(--hd-gold);box-shadow:0 22px 60px rgba(201,168,106,.28);transform:scale(1.03)}
.hd-t-featured:hover{transform:scale(1.03) translateY(-8px)}
.hd-t-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#E8C97A,#C9A86A);color:#0B1B33;font-weight:800;font-size:.78rem;padding:.3rem .9rem;border-radius:100px;box-shadow:var(--hd-shadow-sm);white-space:nowrap}
.hd-t-stars{color:#E8A800;font-size:1.1rem;letter-spacing:.1em;margin-bottom:.6rem}
.hd-t-stars span{background:#0B1B33;color:#fff;font-size:.72rem;padding:.15rem .5rem;border-radius:100px;vertical-align:middle}
.hd-t-text{color:#334155;font-size:.96rem;line-height:1.6;flex:1}
.hd-t-foot{display:flex;gap:.8rem;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px dashed #E2E8F0}
.hd-t-avatar{flex:0 0 48px;width:48px;height:48px;border-radius:50%;color:#fff;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.hd-t-foot b{color:var(--hd-navy);display:block;font-size:.92rem}
.hd-t-foot small{color:var(--hd-muted);display:block;font-size:.8rem}
.hd-t-tag{display:inline-block;background:#E6F9F6;color:#0B7E7A;font-size:.72rem;font-weight:700;padding:.15rem .6rem;border-radius:100px;margin-top:.25rem}

/* ---------- Nav con 8 items ---------- */
.navbar-expand .navbar-nav.items .nav-link{padding:.4rem .55rem;font-size:.92rem;white-space:nowrap}
@media(max-width:1199px){.navbar-expand .navbar-nav.items .nav-link{font-size:.82rem;padding:.4rem .4rem}}

/* ---------- Accesibilidad / responsive ---------- */
img{max-width:100%}
:focus-visible{outline:3px solid var(--hd-teal);outline-offset:2px}
@media(max-width:767px){
  .welcome-intro h1{font-size:2rem !important}
  .hd-demo-card{margin:1.5rem auto 0}
  .hd-stats{border-radius:18px}
  .hd-cta{padding:2rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .hd-reveal{opacity:1;transform:none}
}